/* ==========================================================================
   ADDICT STORE — ARCHITECTURE v2
   Refonte structurelle du thème classic PrestaShop 8.1.2.
   Inspiration : Nike (compacité, méga-panneau par univers, éditorial plein
   cadre) x Decathlon (recherche dominante, entrées par sport, réassurance).

   Ce fichier est chargé APRÈS custom-addict.css et n'y touche pas : il
   réutilise ses tokens (--accent, --text, --border…) et se contente de
   remplacer l'OSSATURE. La direction artistique blanc/orange est conservée.

   Convention : toutes les classes de structure sont préfixées .ax-
   ========================================================================== */

/* ==========================================================================
   0. NEUTRALISATION DE L'ANCIENNE OSSATURE PRESTASHOP
   ========================================================================== */

/* L'ancien header à 3 rangées (header-nav / header-top / header-top-row)
   n'existe plus dans header.tpl. On désamorce les règles résiduelles qui
   pourraient encore cibler des conteneurs réutilisés. */
#header .header-nav,
#header .header-top,
#header .header-top-row,
#header .header-top-right,
#header .header-top-actions {
  all: unset;
}

#header {
  position: relative;
  z-index: 60;
  background: var(--bg-header);
}

.header-banner:empty {
  display: none;
}

/* ==========================================================================
   1. ÉTAGE 1 — BARRE DE SERVICE
   Bande sombre fine : c'est elle qui signe immédiatement la rupture visuelle
   avec l'ancien site, entièrement blanc en haut de page.
   ========================================================================== */

.ax-topbar {
  background: var(--bg-ink);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1;
}

.ax-topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.75rem;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ax-usp {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-usp-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.ax-usp-item svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--accent);
}

.ax-topbar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Les modules injectés (contact, langue, devise) héritent de la bande sombre */
.ax-topbar a,
.ax-topbar span,
.ax-topbar li,
.ax-topbar button {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.75rem !important;
  text-transform: none;
}

.ax-topbar a:hover,
.ax-topbar button:hover {
  color: var(--white) !important;
}

.ax-topbar .material-icons {
  font-size: 15px !important;
  vertical-align: middle;
}

/* Neutralise les marges Bootstrap des modules PrestaShop dans la bande */
.ax-topbar #_desktop_language_selector,
.ax-topbar #_desktop_currency_selector,
.ax-topbar .language-selector-wrapper,
.ax-topbar .currency-selector,
.ax-topbar #contact-link {
  margin: 0;
  padding: 0;
}

.ax-topbar .dropdown-menu {
  background: var(--bg-ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ax-topbar-contact:empty,
.ax-topbar-selectors:empty {
  display: none;
}

/* ==========================================================================
   2. ÉTAGE 2 — BARRE PRINCIPALE (sticky, recherche dominante)
   Modèle Decathlon : logo compact, recherche qui occupe l'espace central,
   actions réduites à des icônes.
   ========================================================================== */

.ax-bar {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}

.ax-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.75rem;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: height 0.24s var(--ease-smooth);
}

/* ---- Logo ---- */
.ax-logo {
  flex: 0 0 auto;
}

.ax-logo .header-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.ax-logo .header-brand-logo {
  height: 42px;
  width: auto;
  display: block;
  transition: height 0.24s var(--ease-smooth);
}

/* ---- Recherche : pièce maîtresse ---- */
.ax-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 680px;
}

.ax-search #search_widget,
.ax-search .search-widget {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

.ax-search form {
  position: relative;
  display: block;
  width: 100%;
}

.ax-search input[type="text"],
.ax-search input[type="search"] {
  width: 100%;
  height: 48px;
  padding: 0 3.25rem 0 1.15rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg-elevated-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  outline: none;
  transition: var(--transition);
}

.ax-search input::placeholder {
  color: var(--text-dim);
}

.ax-search input[type="text"]:focus,
.ax-search input[type="search"]:focus {
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.ax-search button[type="submit"] {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}

.ax-search button[type="submit"]:hover {
  background: var(--accent-press);
}

.ax-search button[type="submit"] .search,
.ax-search button[type="submit"] i,
.ax-search button[type="submit"] .material-icons {
  color: var(--white) !important;
  font-size: 20px !important;
}

/* ---- Actions compte / panier ---- */
.ax-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.ax-actions-desktop,
.ax-actions-mobile {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ax-actions .user-info,
.ax-actions .blockcart,
.ax-actions #_desktop_user_info,
.ax-actions #_desktop_cart {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.ax-actions a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 44px;
  padding: 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text) !important;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: var(--transition);
}

.ax-actions a:hover {
  background: var(--accent-soft);
  color: var(--accent) !important;
}

.ax-actions .material-icons {
  font-size: 22px !important;
}

/* Panier : traité comme l'action principale */
.ax-actions .blockcart a {
  background: var(--bg-ink);
  color: var(--white) !important;
}

.ax-actions .blockcart a:hover {
  background: var(--accent);
  color: var(--white) !important;
}

.ax-actions .cart-products-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--bg-ink);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.ax-actions .blockcart a:hover .cart-products-count {
  color: var(--accent);
  background: var(--white);
}

/* ---- Burger mobile ---- */
.ax-burger {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.ax-burger:hover {
  background: var(--bg-elevated-2);
}

.ax-burger-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
}

.ax-burger-bars i {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

.ax-burger-bars i:nth-child(2) {
  width: 70%;
}

#header.is-open .ax-burger-bars i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#header.is-open .ax-burger-bars i:nth-child(2) {
  opacity: 0;
}

#header.is-open .ax-burger-bars i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   3. ÉTAGE 3 — BARRE SPORTS + MÉGA-PANNEAU
   Modèle Nike : entrées d'univers en capitales, panneau pleine largeur qui
   déploie toute la profondeur du catalogue d'un seul coup d'œil.
   Le contenu vient de ps_mainmenu → reste piloté depuis le back-office.
   ========================================================================== */

.ax-nav {
  position: relative;          /* ancre du méga-panneau pleine largeur */
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}

.ax-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.75rem;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ax-nav-menu {
  flex: 1 1 auto;
  min-width: 0;
}

.ax-nav .menu,
.ax-nav #_desktop_top_menu {
  position: static !important;
  width: 100%;
}

/* ---- Niveau 0 : les univers ---- */
.ax-nav ul.top-menu[data-depth="0"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-nav ul.top-menu[data-depth="0"] > li {
  position: static;            /* le panneau s'ancre sur .ax-nav, pas sur le li */
  float: none;
  margin: 0;
}

.ax-nav ul.top-menu[data-depth="0"] > li > a {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 1.1rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text) !important;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: var(--transition);
}

.ax-nav ul.top-menu[data-depth="0"] > li:hover > a,
.ax-nav ul.top-menu[data-depth="0"] > li.current > a {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

/* On masque le chevron hérité du thème : le méga-panneau se suffit */
.ax-nav ul.top-menu[data-depth="0"] > li > a::after {
  content: none !important;
}

.ax-nav .top-menu .collapse-icons,
.ax-nav .top-menu .navbar-toggler {
  display: none !important;
}

/* ---- Le méga-panneau ---- */
.ax-nav .top-menu .sub-menu {
  position: absolute !important;
  top: 100% !important;        /* écrase le `top` inline posé par theme.js */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 2rem 0 2.25rem !important;
  background: var(--white);
  border: 0 !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 55;
}

/* Grille de colonnes : un sport par colonne */
.ax-nav .top-menu .sub-menu > ul[data-depth="1"] {
  max-width: 1440px;
  margin: 0 auto !important;
  padding: 0 1.75rem !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.75rem 2rem;
  list-style: none;
}

.ax-nav .top-menu .sub-menu > ul[data-depth="1"] > li {
  float: none !important;
  margin: 0 !important;
  min-width: 0;
}

/* Titre de colonne */
.ax-nav .top-menu .sub-menu > ul[data-depth="1"] > li > a {
  display: block;
  margin-bottom: 0.75rem;
  padding: 0 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.ax-nav .top-menu .sub-menu > ul[data-depth="1"] > li > a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

/* Sous-rayons : toujours dépliés dans le panneau (desktop) */
.ax-nav .top-menu .sub-menu ul[data-depth="2"],
.ax-nav .top-menu .sub-menu ul[data-depth="3"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-nav .top-menu .sub-menu ul[data-depth="2"] > li > a,
.ax-nav .top-menu .sub-menu ul[data-depth="3"] > li > a {
  display: block;
  padding: 0.3rem 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted) !important;
  text-transform: none;
  transition: color 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth);
}

.ax-nav .top-menu .sub-menu ul[data-depth="2"] > li > a:hover,
.ax-nav .top-menu .sub-menu ul[data-depth="3"] > li > a:hover {
  color: var(--accent) !important;
  transform: translateX(3px);
}

/* ---- Raccourci « Bons plans » à droite de la barre ---- */
.ax-nav-aside {
  flex: 0 0 auto;
}

.ax-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 34px;
  padding: 0 0.95rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent) !important;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: var(--transition);
}

.ax-nav-pill svg {
  width: 15px;
  height: 15px;
}

.ax-nav-pill:hover {
  color: var(--white) !important;
  background: var(--accent);
}

/* ==========================================================================
   4. COMPORTEMENT STICKY
   La barre principale + la barre sports restent accessibles au scroll et se
   compactent. C'est un marqueur fort : l'ancien site n'a aucun sticky.
   ========================================================================== */

@media (min-width: 992px) {
  .ax-bar,
  .ax-nav {
    position: sticky;
    z-index: 58;
  }

  .ax-bar {
    top: 0;
    z-index: 59;
  }

  .ax-nav {
    top: 78px;
    transition: top 0.24s var(--ease-smooth);
  }

  /* État compacté, activé par addict-structure.js au-delà de 120px de scroll */
  .ax-scrolled .ax-bar-inner {
    height: 62px;
  }

  .ax-scrolled .ax-logo .header-brand-logo {
    height: 34px;
  }

  .ax-scrolled .ax-nav {
    top: 62px;
  }

  .ax-scrolled .ax-bar {
    box-shadow: var(--shadow-sm);
  }

  /* Le méga-panneau doit rester visible et dépliable en desktop */
  .ax-nav .top-menu .sub-menu .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   5. TIROIR MOBILE
   ========================================================================== */

@media (max-width: 991px) {
  .ax-bar-inner {
    height: 62px;
    gap: 0.5rem;
    padding: 0 1rem;
  }

  .ax-topbar-inner {
    padding: 0 1rem;
    justify-content: center;
  }

  /* En mobile on ne garde qu'un argument, en rotation */
  .ax-usp {
    gap: 0;
  }

  .ax-usp-item {
    display: none;
  }

  .ax-usp-item.is-active {
    display: flex;
  }

  .ax-topbar-right {
    display: none;
  }

  /* La recherche passe sous la barre, pleine largeur */
  .ax-bar-inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .ax-search {
    order: 10;
    flex: 1 0 100%;
    max-width: none;
    margin-top: 0.6rem;
  }

  .ax-search input[type="text"],
  .ax-search input[type="search"] {
    height: 42px;
  }

  .ax-logo--mobile {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  .ax-logo--mobile .header-brand-logo {
    height: 34px;
  }

  /* La barre sports disparaît : tout passe dans le tiroir */
  .ax-nav {
    display: none;
  }

  .ax-drawer {
    display: block;
    margin: 0;
    padding: 0.5rem 1rem 1.5rem;
    background: var(--white);
    border-top: 1px solid var(--border);
  }

  .mobile-menu-home {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 0;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
  }

  .mobile-menu-home svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
  }
}

/* ==========================================================================
   6. PAGE D'ACCUEIL — SOCLE COMMUN
   ========================================================================== */

.ax-home > * {
  margin-bottom: 4.5rem;
}

.ax-home > *:last-child {
  margin-bottom: 0;
}

/* Pleine largeur SANS débordement horizontal.
   100vw inclut la barre de défilement : sur desktop ça déborde de ~10px et
   crée un scroll parasite. --ax-sbw est mesurée par addict-structure.js. */
.ax-hero,
.ax-strip,
.ax-clubs,
.ax-block--dark,
.ax-props {
  width: calc(100vw - var(--ax-sbw, 0px));
  margin-left: calc(50% - (100vw - var(--ax-sbw, 0px)) / 2);
  max-width: calc(100vw - var(--ax-sbw, 0px));
}

.ax-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.ax-eyebrow--light {
  color: var(--accent-hover);
}

/* ---- Boutons ---- */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 2rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}

.ax-btn--primary {
  color: var(--white) !important;
  background: var(--accent);
}

.ax-btn--primary:hover {
  background: var(--accent-press);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.ax-btn--ghost {
  color: var(--text) !important;
  border-color: var(--text);
}

.ax-btn--ghost:hover {
  color: var(--white) !important;
  background: var(--text);
}

.ax-btn--light {
  color: var(--bg-ink) !important;
  background: var(--white);
}

.ax-btn--light:hover {
  color: var(--white) !important;
  background: var(--accent);
}

/* ---- En-tête de section ---- */
.ax-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ax-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.ax-section-link {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text) !important;
  white-space: nowrap;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: var(--transition);
}

.ax-section-link:hover {
  color: var(--accent) !important;
}

/* ==========================================================================
   7. HERO — split éditorial asymétrique
   ========================================================================== */

.ax-hero {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.ax-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 3rem;
  min-height: 540px;
}

.ax-hero-copy {
  padding: 3.5rem 0;
}

.ax-hero-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

/* Mot en contour : marqueur graphique fort, très « sport » */
.ax-hero-title .ax-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  paint-order: stroke fill;
}

.ax-hero-sub {
  max-width: 42ch;
  margin: 0 0 2rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.ax-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.ax-hero-media {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gradient-hero-light);
  border-radius: var(--radius-lg);
}

.ax-hero-media > * {
  width: 100%;
}

.ax-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le diaporama piloté en BO s'intègre sans ses marges d'origine */
.ax-hero-media #carousel,
.ax-hero-media .carousel {
  margin: 0 !important;
  width: 100%;
  border: 0;
  box-shadow: none;
}

.ax-hero-media .carousel .carousel-item img {
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   8. SÉLECTEUR DE SPORT
   ========================================================================== */

.ax-sports-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.ax-sport {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: 1.1rem;
  overflow: hidden;
  text-decoration: none;
  background: var(--gradient-ink);
  border-radius: var(--radius-lg);
  isolation: isolate;
  transition: var(--transition);
}

.ax-sport-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ax-sport-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out-expo);
}

/* Voile pour garantir la lisibilité du libellé, avec ou sans image */
.ax-sport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(15, 15, 17, 0.88) 0%, rgba(15, 15, 17, 0.25) 55%, rgba(15, 15, 17, 0.05) 100%);
  transition: var(--transition);
}

.ax-sport-label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.ax-sport-go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--bg-ink);
  background: var(--white);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-6px);
  transition: var(--transition);
}

.ax-sport:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.ax-sport:hover .ax-sport-media img {
  transform: scale(1.08);
}

.ax-sport:hover::after {
  background: linear-gradient(to top, rgba(255, 107, 0, 0.85) 0%, rgba(15, 15, 17, 0.35) 60%, rgba(15, 15, 17, 0.1) 100%);
}

.ax-sport:hover .ax-sport-go {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   9. BLOCS PRODUITS — 4 TRAITEMENTS DISTINCTS
   L'ancienne home empilait 3 carrousels identiques. Chaque bloc a désormais
   sa propre écriture, ce qui casse l'effet « liste PrestaShop ».
   ========================================================================== */

/* Titres de section des modules : on reprend l'écriture .ax-section-title */
.ax-block .products-section-title,
.ax-block h2.products-section-title {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  text-align: left;
  color: var(--text);
}

.ax-block .products-section-title::after {
  content: none !important;
}

.ax-block .featured-products {
  text-align: left;
}

/* ---- 9a. Grille (nouveautés) ---- */
.ax-block--grid .products {
  grid-template-columns: repeat(4, 1fr);
}

/* ---- 9b. Rail horizontal à défilement (notre sélection) ---- */
.ax-block--rail .products {
  display: flex !important;
  /* .row de Bootstrap force flex-wrap:wrap → les cartes retombaient à la
     ligne et le « rail » faisait 1382px de haut. */
  flex-wrap: nowrap !important;
  grid-template-columns: none;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}

.ax-block--rail .products > .js-product,
.ax-block--rail .products > [class*="col-"] {
  flex: 0 0 clamp(220px, 24%, 300px) !important;
  scroll-snap-align: start;
}

.ax-block--rail .products::-webkit-scrollbar {
  height: 4px;
}

.ax-block--rail .products::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}

/* ---- 9c. Bandeau sombre (promos) ---- */
.ax-block--dark {
  padding: 4rem 0;
  background: var(--bg-ink);
}

.ax-block-dark-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.ax-block--dark .products-section-title,
.ax-block--dark h2.products-section-title {
  color: var(--white);
}

.ax-block--dark .all-product-link {
  color: var(--white) !important;
  border-color: var(--white) !important;
}

.ax-block--dark .all-product-link:hover {
  color: var(--bg-ink) !important;
  background: var(--white) !important;
  border-color: var(--white) !important;
}

/* ---- 9d. Top numéroté (meilleures ventes) ---- */
.ax-block--ranked .products {
  counter-reset: ax-rank;
  grid-template-columns: repeat(4, 1fr);
}

.ax-block--ranked .products > .js-product,
.ax-block--ranked .products > [class*="col-"] {
  position: relative;
  counter-increment: ax-rank;
}

.ax-block--ranked .products > .js-product::before,
.ax-block--ranked .products > [class*="col-"]::before {
  content: counter(ax-rank, decimal-leading-zero);
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 2px var(--accent);
  pointer-events: none;
}

/* ==========================================================================
   10. BANDEAU OUTLET
   ========================================================================== */

.ax-strip {
  background: var(--gradient-accent);
}

.ax-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.ax-strip .ax-eyebrow--light {
  color: rgba(255, 255, 255, 0.85);
}

.ax-strip-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.ax-strip-copy p {
  max-width: 52ch;
  margin: 0;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.9);
}

.ax-banner:empty {
  display: none;
}

.ax-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   11. CLUBS PARTENAIRES — split éditorial
   ========================================================================== */

.ax-clubs {
  background: var(--bg-ink);
}

.ax-clubs-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 4.5rem 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}

.ax-clubs-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--white);
}

.ax-clubs-copy p {
  max-width: 50ch;
  margin: 0 0 2rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.ax-clubs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-clubs-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.ax-clubs-list a::after {
  content: "→";
  color: var(--accent);
  transition: var(--transition);
}

.ax-clubs-list a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(4px);
}

.ax-clubs-list a:hover::after {
  color: var(--white);
}

/* ==========================================================================
   12. RÉASSURANCE
   ========================================================================== */

.ax-props {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ax-props-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2.75rem 1.75rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.ax-prop {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.ax-prop-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.ax-prop-icon svg {
  width: 19px;
  height: 19px;
}

.ax-prop-title {
  margin-bottom: 0.2rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.ax-prop p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   13. BLOC ÉDITORIAL / SEO
   ========================================================================== */

.ax-editorial {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ax-editorial h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text);
}

.ax-editorial p {
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ==========================================================================
   14. RESPONSIVE — PAGE D'ACCUEIL
   ========================================================================== */

@media (max-width: 1199px) {
  .ax-sports-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ax-block--grid .products,
  .ax-block--ranked .products {
    grid-template-columns: repeat(3, 1fr);
  }

  .ax-props-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .ax-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: 0;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .ax-hero-copy {
    padding: 0;
  }

  .ax-hero-media {
    min-height: 240px;
  }

  .ax-clubs-inner {
    grid-template-columns: 1fr;
    padding: 3rem 1.25rem;
  }

  .ax-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 767px) {
  .ax-home > * {
    margin-bottom: 3rem;
  }

  .ax-sports-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .ax-block--grid .products,
  .ax-block--ranked .products {
    grid-template-columns: repeat(2, 1fr);
  }

  .ax-block--rail .products > .js-product,
  .ax-block--rail .products > [class*="col-"] {
    flex: 0 0 62% !important;
  }

  .ax-props-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ax-clubs-list {
    grid-template-columns: 1fr;
  }

  .ax-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ax-block--ranked .products > .js-product::before,
  .ax-block--ranked .products > [class*="col-"]::before {
    font-size: 2rem;
  }
}

/* ==========================================================================
   15. DIVERS
   ========================================================================== */

/* Le fil d'Ariane n'a pas lieu d'être sur la page d'accueil */
.page-index .breadcrumb {
  display: none;
}

/* ==========================================================================
   16. CORRECTIFS (constatés sur le rendu en ligne)
   ========================================================================== */

/* ---- 16a. Recherche : le markup réel de ps_searchbar n'a pas de <button>,
   mais deux <i class="material-icons"> (search / clear), et les règles
   existantes ciblent #search_widget par ID. On monte la spécificité. ---- */
.ax-search #search_widget,
.ax-search .search-widgets {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

.ax-search #search_widget form {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
}

.ax-search #search_widget form input[type="text"] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 2.75rem 0 3rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  color: var(--text) !important;
  background: var(--bg-elevated-2) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: var(--transition);
}

.ax-search #search_widget form input[type="text"]:focus {
  background: var(--white) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

.ax-search #search_widget form i.search {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 22px !important;
  color: var(--accent) !important;
  cursor: pointer;
  pointer-events: none;
}

.ax-search #search_widget form i.clear {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 20px !important;
  color: var(--text-dim) !important;
  cursor: pointer;
}

/* ---- 16b. Sections vides : ps_newproducts et ps_banner ne renvoient rien
   sur cette boutique et laissaient des trous. addict-structure.js marque les
   blocs sans contenu, on les retire du flux. ---- */
.ax-is-empty {
  display: none !important;
}

/* ---- 16c. Tuiles sport : tant qu'aucune image de catégorie n'est chargée
   en BO, l'aplat dégradé doit se suffire à lui-même. Numérotation façon
   « rayon », dans la continuité du langage visuel du thème. ---- */
.ax-sports-grid {
  counter-reset: ax-sport-num;
}

.ax-sport {
  counter-increment: ax-sport-num;
}

.ax-sport::before {
  content: counter(ax-sport-num, decimal-leading-zero);
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  transition: var(--transition);
}

.ax-sport:hover::before {
  color: var(--white);
}

/* Une image de catégorie chargée doit primer sur le dégradé */
.ax-sport-media img[src] {
  background: var(--bg-ink);
}

/* ==========================================================================
   17. CORRECTIFS — 2e passe (retours client sur le rendu)
   ========================================================================== */

/* ---- 17a. PANIER
   ps_shoppingcart ne génère AUCUNE balise <a> quand le panier est vide : le
   bloc est un simple <div class="header">. Nos règles ciblaient `a`, donc
   rien ne s'appliquait — et custom-addict.css force .blockcart .header en
   var(--text-inverse), soit du blanc sur blanc : icône et libellé
   invisibles, seul le « (0) » ressortait. On style le conteneur réel. ---- */
.ax-actions .blockcart {
  display: flex;
  align-items: center;
}

.ax-actions .blockcart .header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  margin: 0;
  padding: 0 1.1rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white) !important;
  white-space: nowrap;
  background: var(--bg-ink);
  border-radius: var(--radius-pill);
  transition: var(--transition);
}

.ax-actions .blockcart .header a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: auto;
  padding: 0;
  color: var(--white) !important;
  background: transparent !important;
}

.ax-actions .blockcart .header a:hover {
  background: transparent !important;
  color: var(--white) !important;
}

.ax-actions .blockcart:hover .header {
  background: var(--accent);
}

.ax-actions .blockcart .header i.material-icons,
.ax-actions .blockcart .header .material-icons {
  margin: 0 !important;
  font-size: 21px !important;
  color: var(--white) !important;
}

/* Le compteur reste dans le fil du libellé : « Panier (0) » se comprend,
   la pastille isolée ne voulait rien dire. */
.ax-actions .blockcart .cart-products-count {
  min-width: 0;
  height: auto;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--white);
  background: transparent;
  border-radius: 0;
}

.ax-actions .blockcart:hover .cart-products-count {
  color: var(--white);
  background: transparent;
}

/* ---- 17b. RECHERCHE : l'icône restait collée en haut du champ ---- */
.ax-search #search_widget form i.search,
.ax-search #search_widget form i.clear {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
}

.ax-search #search_widget form i.search {
  left: 1rem !important;
  right: auto !important;
}

.ax-search #search_widget form i.clear {
  right: 1rem !important;
  left: auto !important;
}

/* ---- 17c. MÉGA-PANNEAU : plus compact, et surtout il ne s'ouvre plus au
   moindre frôlement. Délai d'intention à l'ouverture, fermeture immédiate. ---- */
.ax-nav .top-menu > li > .sub-menu {
  padding: 1.6rem 0 1.8rem !important;
  transition: opacity 0.16s var(--ease-smooth) 0s,
              visibility 0.16s var(--ease-smooth) 0s !important;
}

.ax-nav .top-menu > li:hover > .sub-menu {
  transition-delay: 0.3s !important;
}

.ax-nav .top-menu .sub-menu > ul[data-depth="1"] {
  gap: 1.1rem 1.75rem;
}

.ax-nav .top-menu .sub-menu > ul[data-depth="1"] > li > a {
  margin-bottom: 0.5rem;
  padding-bottom: 0.45rem;
  font-size: 0.8125rem;
}

.ax-nav .top-menu .sub-menu ul[data-depth="2"] > li > a,
.ax-nav .top-menu .sub-menu ul[data-depth="3"] > li > a {
  padding: 0.22rem 0;
  font-size: 0.78125rem;
}

/* ---- 17d. HERO : quand le diaporama est vide, la colonne droite laissait
   un grand aplat blanc. addict-structure.js bascule alors sur une colonne. ---- */
.ax-hero--solo .ax-hero-inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
}

.ax-hero--solo .ax-hero-media {
  display: none;
}

.ax-hero--solo .ax-hero-copy {
  padding: 4.5rem 0;
}

/* ---- 17e. FOCUS : le cadre noir du navigateur apparaissait au clic sur les
   images et les liens. On le retire à la souris, on garde un anneau lisible
   au clavier — l'accessibilité reste assurée. ---- */
#header a:focus:not(:focus-visible),
#header img:focus:not(:focus-visible),
.ax-home a:focus:not(:focus-visible),
.ax-home img:focus:not(:focus-visible),
.ax-home button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

#header a:focus-visible,
.ax-home a:focus-visible,
.ax-home button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Les images décoratives ne doivent jamais capter le focus visuellement */
.ax-sport img,
.ax-hero-media img,
.header-brand img {
  outline: none !important;
}

/* ==========================================================================
   18. CORRECTIFS — 3e passe
   ========================================================================== */

/* ---- 18a. RECHERCHE : une seule loupe, sobre.
   L'orange faisait doublon visuel avec l'icône du thème. ---- */
.ax-search #search_widget form i.search {
  color: var(--text-dim) !important;
  font-size: 20px !important;
}

.ax-search #search_widget form:focus-within i.search {
  color: var(--accent) !important;
}

/* ---- 18b. TITRES SUR FOND SOMBRE : ils restaient noirs sur noir.
   custom-addict.css pose un -webkit-text-fill-color, qui a la priorité sur
   `color` : il faut donc écraser les deux. ---- */
.ax-block--dark .products-section-title,
.ax-block--dark h2.products-section-title,
.ax-block--dark .h2.products-section-title,
.ax-block--dark .featured-products h2 {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.ax-block--dark .featured-products,
.ax-block--dark .products-section-title {
  text-align: left;
}

/* Les cartes produit gardent leur fond clair sur la bande sombre */
.ax-block--dark .product-miniature .thumbnail-container {
  border-color: transparent !important;
}

/* ---- 18c. TOP NUMÉROTÉ : les chiffres blancs cerclés d'orange sur fond
   blanc formaient un halo fantôme derrière le titre. Chiffres pleins. ---- */
.ax-block--ranked .products {
  padding-top: 1.5rem;
}

.ax-block--ranked .products > .js-product::before,
.ax-block--ranked .products > [class*="col-"]::before {
  top: -1.35rem;
  left: 0;
  font-size: 2.25rem;
  color: var(--accent);
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--accent);
  opacity: 1;
}

/* ---- 18d. HERO sans diaporama : plutôt qu'une colonne vide à droite, on
   recentre. Double sécurité CSS (:has) + JS, l'un ou l'autre suffit. ---- */
.ax-hero--solo .ax-hero-inner,
.ax-hero:not(:has(.ax-hero-media img)) .ax-hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 980px;
  min-height: 440px;
  text-align: center;
}

.ax-hero--solo .ax-hero-media,
.ax-hero:not(:has(.ax-hero-media img)) .ax-hero-media {
  display: none;
}

.ax-hero--solo .ax-hero-sub,
.ax-hero:not(:has(.ax-hero-media img)) .ax-hero-sub {
  margin-left: auto;
  margin-right: auto;
}

.ax-hero--solo .ax-hero-actions,
.ax-hero:not(:has(.ax-hero-media img)) .ax-hero-actions {
  justify-content: center;
}

/* ---- 18e. MÉGA-PANNEAU PILOTÉ EN JAVASCRIPT
   Le thème l'ouvrait sur `li:hover` pur, sans aucune tolérance : le panneau
   se fermait dès que le curseur traversait un pixel de vide (clignotement),
   et se rouvrait intempestivement. On neutralise cette règle et on laisse
   addict-structure.js gérer l'ouverture avec des délais d'intention. ---- */
.ax-nav .top-menu[data-depth="0"] > li > .sub-menu {
  visibility: hidden !important;
  opacity: 0 !important;
  /* colle le panneau au bas de la barre : plus de rainure d'1px à traverser */
  top: calc(100% - 1px) !important;
  transition: opacity 0.18s var(--ease-smooth),
              visibility 0.18s var(--ease-smooth) !important;
}

.ax-nav .top-menu[data-depth="0"] > li.ax-open > .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Soulignement de l'onglet actif tant que son panneau est ouvert */
.ax-nav ul.top-menu[data-depth="0"] > li.ax-open > a {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

/* ---- 18f. BANDE CONTACT ---- */
.ax-contact {
  width: calc(100vw - var(--ax-sbw, 0px));
  margin-left: calc(50% - (100vw - var(--ax-sbw, 0px)) / 2);
  max-width: calc(100vw - var(--ax-sbw, 0px));
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}

.ax-contact-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 4rem 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}

.ax-contact-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

.ax-contact-copy p {
  max-width: 46ch;
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.ax-contact-infos {
  padding: 1.75rem 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Mise en forme des coordonnées rendues par ps_contactinfo */
.ax-contact-infos .block-contact,
.ax-contact-infos #block_myaccount_infos {
  padding: 0 !important;
  border: 0 !important;
}

.ax-contact-infos .block-contact-title,
.ax-contact-infos .block_newsletter_title {
  display: none;
}

.ax-contact-infos ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-contact-infos li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.ax-contact-infos li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ax-contact-infos li:first-child {
  padding-top: 0;
}

.ax-contact-infos a {
  color: var(--text) !important;
  font-weight: 600;
  transition: var(--transition);
}

.ax-contact-infos a:hover {
  color: var(--accent) !important;
}

.ax-contact-infos .material-icons {
  font-size: 20px !important;
  color: var(--accent) !important;
}

@media (max-width: 991px) {
  .ax-contact-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 1.25rem;
  }
}

/* ==========================================================================
   19. AJUSTEMENTS FINS
   ========================================================================== */

/* Le sur-titre du hero était trop collé au titre : l'espace passe de
   16 à 32 px. Le titre est en Anton, dont les capitales montent haut :
   il faut plus d'air que pour une typo classique. */
.ax-hero .ax-eyebrow {
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Panneau SPORTS qui se refermait dès qu'on descendait vers ses rayons.

   Cause : la règle §5 forçait `visibility: visible !important` sur les blocs
   .collapse pour déplier les sous-rayons en desktop. Elle s'appliquait aux
   TROIS panneaux, y compris fermés — or ils se superposent tous sur la même
   zone. Les blocs du dernier panneau du DOM (Clubs) captaient donc la souris
   par-dessus le panneau Sports ouvert, qui se croyait quitté et se refermait.

   On ne force plus la visibilité : `display: block` suffit à déplier, et la
   visibilité reste héritée du panneau parent. Plus le pointer-events, qui
   verrouille définitivement le comportement.
   -------------------------------------------------------------------------- */
.ax-nav .top-menu .sub-menu .collapse {
  visibility: inherit !important;
}

.ax-nav .top-menu[data-depth="0"] > li > .sub-menu {
  pointer-events: none !important;
}

.ax-nav .top-menu[data-depth="0"] > li.ax-open > .sub-menu {
  pointer-events: auto !important;
}


/* --------------------------------------------------------------------------
   Zoom des visuels produit rogné par le cadre.

   custom-addict.css agrandit l'image à scale(1.07) au survol, dans un
   conteneur en overflow:hidden. Sur un produit qui remplit déjà la hauteur
   du cadre (pantalon, maillot…), l'agrandissement sort du cadre et se fait
   couper en haut et en bas.

   Correction : on inverse le mouvement. L'image repose légèrement réduite et
   revient à sa taille pleine au survol. L'effet de zoom est identique à
   l'œil, mais l'image ne dépasse jamais du cadre — donc plus aucun rognage,
   quel que soit le format du produit.
   -------------------------------------------------------------------------- */
.product-miniature .product-thumbnail img {
  transform: scale(0.93);
  transform-origin: center center;
  transition: transform 0.45s var(--ease-out-expo);
  will-change: transform;
}

.product-miniature .thumbnail-container:hover .product-thumbnail img,
.product-miniature:hover .product-thumbnail img {
  transform: scale(1) !important;
}

/* --------------------------------------------------------------------------
   Cartes rognées dans le rail horizontal.
   overflow-x:auto force le navigateur à rogner AUSSI verticalement : la carte
   qui se soulève au survol était coupée en haut. On lui réserve la place.
   -------------------------------------------------------------------------- */
.ax-block--rail .products {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   BANDE CONTACT — remise en page complète.

   Le bloc rendu par ps_contactinfo est avant tout une colonne de pied de page :
   il porte `col-md-3`, soit 25 % de largeur. Dans la carte de l'accueil, le
   texte se retrouvait donc comprimé dans un quart de l'espace, d'où les
   coupures « Rue Baty de / Fleurus 101 ».
   Le template rend désormais une liste structurée (une ligne par moyen de
   contact) ; il reste à lui rendre toute la largeur et à la mettre en forme.
   -------------------------------------------------------------------------- */
.ax-contact-inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 4rem;
}

.ax-contact-infos {
  padding: 0.5rem 0.5rem;
}

/* Neutralise la grille Bootstrap héritée du pied de page */
.ax-contact-infos .block-contact {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.ax-contact-infos .ax-infos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-contact-infos .ax-info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.ax-contact-infos .ax-info:last-child {
  border-bottom: 0;
}

.ax-info-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.ax-info-icon svg {
  width: 19px;
  height: 19px;
}

.ax-info-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ax-info-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ax-info-value {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text) !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

a.ax-info-value,
.ax-info-value a {
  color: var(--text) !important;
  font-weight: 600;
  transition: var(--transition);
}

a.ax-info-value:hover,
.ax-info-value a:hover {
  color: var(--accent) !important;
}

/* Annule le traitement « bouton » de la passe précédente : les coordonnées
   sont maintenant portées par les lignes de la liste. */
.ax-contact-infos a[href^="tel"],
.ax-contact-infos a[href^="mailto"] {
  display: inline;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: normal;
  background: transparent;
  border-radius: 0;
  white-space: normal;
}

/* --- Le même bloc, en colonne de pied de page --- */
#footer .ax-infos {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .ax-info {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.5rem 0;
}

#footer .ax-info-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background: transparent;
}

#footer .ax-info-icon svg {
  width: 16px;
  height: 16px;
}

#footer .ax-info-label {
  display: none;
}

#footer .ax-info-value {
  font-size: 0.875rem;
  font-weight: 500;
}

@media (max-width: 991px) {
  .ax-contact-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ax-contact-infos .ax-info {
    padding: 1rem 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Carte contact — plus d'air. Le bloc était trop bas de plafond et l'adresse
   trop tassée. On augmente les hauteurs de ligne et les respirations
   internes plutôt que d'agrandir la carte artificiellement.
   -------------------------------------------------------------------------- */
.ax-contact-infos {
  padding: 1rem;
}

.ax-contact-infos .ax-info {
  gap: 1.15rem;
  padding: 1.6rem 1.35rem;
}

.ax-contact-infos .ax-info-value {
  font-size: 1rem;
  line-height: 1.75;
}

.ax-contact-infos .ax-info-body {
  gap: 0.4rem;
}

.ax-contact-infos .ax-info-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.ax-contact-infos .ax-info-icon svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Sélecteur de quantité.

   D'origine : un champ arrondi à 10px, et à côté deux boutons carrés de 22px
   avec 11px de padding — il ne restait aucune place pour le chevron, qui se
   retrouvait rogné, et les angles carrés juraient avec le champ arrondi.

   Refait comme un seul contrôle : le champ et la colonne de boutons vivent
   dans un même cadre arrondi, séparés par un filet. Les angles suivent le
   même rayon, donc plus aucun conflit rond/carré.
   -------------------------------------------------------------------------- */
.product-quantity .input-group.bootstrap-touchspin,
.quickview .input-group.bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch;
  width: auto !important;
  height: 48px;
  overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.product-quantity #quantity_wanted,
.quickview #quantity_wanted,
.product-quantity input[name="qty"],
.quickview input[name="qty"] {
  width: 56px !important;
  height: 100% !important;
  padding: 0 !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield;
}

/* Les flèches natives du champ number feraient doublon */
.product-quantity input[type="number"]::-webkit-outer-spin-button,
.product-quantity input[type="number"]::-webkit-inner-spin-button,
.quickview input[type="number"]::-webkit-outer-spin-button,
.quickview input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-quantity .input-group-btn-vertical,
.quickview .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column;
  width: 36px !important;
  height: 100%;
  border-left: 1px solid var(--border);
  border-radius: 0 !important;
  overflow: visible !important;
}

.product-quantity .btn-touchspin,
.quickview .btn-touchspin {
  flex: 1 1 50%;
  width: 36px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: var(--transition);
}

.product-quantity .btn-touchspin + .btn-touchspin,
.quickview .btn-touchspin + .btn-touchspin {
  border-top: 1px solid var(--border) !important;
}

.product-quantity .btn-touchspin:hover,
.quickview .btn-touchspin:hover {
  color: var(--white) !important;
  background: var(--accent) !important;
}

.product-quantity .btn-touchspin i,
.product-quantity .btn-touchspin .material-icons,
.quickview .btn-touchspin i,
.quickview .btn-touchspin .material-icons {
  display: block !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   Bouton « Ajouter au panier » : le glyphe Material Icons tombe sous la ligne
   de base quand line-height suit la taille de police. On centre réellement.
   -------------------------------------------------------------------------- */
.add-to-cart,
button.add-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem;
  line-height: 1 !important;
}

.add-to-cart i,
.add-to-cart .material-icons,
.add-to-cart .shopping-cart {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   Encadré noir au clic sur les boutons et les croix de fermeture.

   Origine : Bootstrap 4 alpha, embarqué dans theme.css —
     a:focus      { outline: 5px auto -webkit-focus-ring-color; }
     button:focus { outline: 5px auto -webkit-focus-ring-color; }
     .btn:focus   { outline: 5px auto -webkit-focus-ring-color; }

   Ces règles ciblent :focus et non :focus-visible : elles se déclenchent donc
   au clic de souris, alors que l'anneau de focus ne devrait apparaître qu'à
   la navigation clavier.

   On neutralise uniquement le cas « focus sans focus-visible », c'est-à-dire
   la souris. Le focus clavier garde son anneau : l'accessibilité est
   préservée, ce qui compte sur un site marchand.

   Note : on ne touche pas à box-shadow, sinon les boutons perdraient leur
   halo orange au clic.
   -------------------------------------------------------------------------- */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.close:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[data-dismiss]:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
.js-touchspin:focus:not(:focus-visible),
.thumbnail-container:focus:not(:focus-visible),
.quickview:focus:not(:focus-visible),
.modal :focus:not(:focus-visible) {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* --------------------------------------------------------------------------
   Bloc « Partager » retiré du site (voir le template ps_sharebuttons).
   Filet de sécurité : si un autre module ou une autre page produisait ce
   balisage, il resterait masqué.
   -------------------------------------------------------------------------- */
.social-sharing {
  display: none !important;
}

/* ==========================================================================
   20. FICHE PRODUIT
   ========================================================================== */

/* ---- 20a. BADGES (promo, rupture de stock…)
   Ils sortaient du cadre : le conteneur est en position absolue sans largeur
   maximale, et « RUPTURE DE STOCK » s'affichait en cyan #24b9d7, la couleur
   PrestaShop par défaut — la DA du thème ne stylait pas cette classe. ---- */
.product-flags {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: calc(100% - 1.7rem);
  pointer-events: none;
}

.product-flag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 !important;
  padding: 0.42rem 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white) !important;
  background: var(--bg-ink);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Promotions : orange Addict */
.product-flag.discount,
.product-flag.discount-percentage,
.product-flag.discount-amount,
.product-flag.on-sale {
  background: var(--accent);
}

/* Rupture de stock : neutre et sobre, ce n'est pas une promesse commerciale */
.product-flag.out_of_stock {
  color: var(--white) !important;
  background: var(--text-muted);
}

.product-flag.new {
  background: var(--text);
}

.product-flag.pack,
.product-flag.online-only {
  background: var(--text-dim);
}

/* ---- 20b. GABARIT EN DEUX COLONNES
   Remplace la grille Bootstrap (row + col-md-6) par une vraie grille. ---- */
.ax-pdp {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: start;
  gap: 3.5rem;
  margin: 0 0 4.5rem !important;
}

.ax-pdp > .ax-pdp-gallery,
.ax-pdp > .ax-pdp-buy {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- 20c. GALERIE : grand visuel, vignettes en dessous
   Le strip vertical de vignettes réduisait le visuel principal à 452px. ---- */
.ax-pdp-gallery .page-content {
  padding: 0;
  margin: 0;
}

.ax-pdp .images-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.ax-pdp .product-cover {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ax-pdp .product-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Loupe de zoom */
.ax-pdp .product-cover .layer {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  top: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  cursor: zoom-in;
  transition: var(--transition);
}

.ax-pdp .product-cover:hover .layer {
  opacity: 1;
}

.ax-pdp .product-cover .layer i {
  margin: 0;
  font-size: 22px !important;
  color: var(--text) !important;
}

/* Bande de vignettes horizontale */
.ax-pdp .js-qv-mask,
.ax-pdp .mask {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

.ax-pdp .product-images {
  display: flex;
  gap: 0.6rem;
  margin: 0 !important;
  padding: 0.15rem 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ax-pdp .product-images > li {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: 0 0 auto;
}

.ax-pdp .product-images img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  display: block;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.ax-pdp .product-images img:hover,
.ax-pdp .product-images .selected img,
.ax-pdp .product-images li.selected img {
  border-color: var(--accent);
}

/* Flèches de défilement du strip vertical : obsolètes dans ce gabarit */
.ax-pdp .scroll-box-arrows {
  display: none !important;
}

/* ---- 20d. COLONNE D'ACHAT ---- */
@media (min-width: 992px) {
  .ax-pdp-buy {
    position: sticky;
    top: 150px;
  }
}

.ax-pdp-buy > h1.h1,
.ax-pdp-buy h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.ax-pdp .product-prices {
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--border);
}

.ax-pdp .product-information {
  margin: 0;
  font-size: 0.9375rem;
}

.ax-pdp .product-information .product-description {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.ax-pdp .product-actions {
  margin: 0;
}

.ax-pdp .product-quantity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 0 1rem;
}

.ax-pdp .product-quantity .qty {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.ax-pdp .product-quantity .add {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---- 20e. ONGLETS EN PLEINE LARGEUR ---- */
.ax-pdp ~ .tabs,
#main > .tabs {
  clear: both;
  margin: 0 0 4rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--border);
}

#main > .tabs .nav-tabs {
  display: flex;
  gap: 2rem;
  margin: 0 0 2rem;
  padding: 0;
  border-bottom: 1px solid var(--border);
}

#main > .tabs .nav-tabs .nav-item {
  margin: 0;
}

#main > .tabs .nav-tabs .nav-link {
  display: block;
  padding: 0 0 0.9rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  transition: var(--transition);
}

#main > .tabs .nav-tabs .nav-link:hover {
  color: var(--text) !important;
}

#main > .tabs .nav-tabs .nav-link.active {
  color: var(--text) !important;
  border-bottom-color: var(--accent) !important;
}

#main > .tabs .tab-content {
  max-width: 78ch;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ---- 20f. RESPONSIVE ---- */
@media (max-width: 991px) {
  .ax-pdp {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ax-pdp-buy {
    position: static;
  }

  #main > .tabs .nav-tabs {
    gap: 1.25rem;
    overflow-x: auto;
  }
}

/* ==========================================================================
   21. FORMULAIRES, PANIER ET NAVIGATION — 5e passe
   ========================================================================== */

/* ---- 21a. SÉLECTEURS DÉROULANTS (état fermé uniquement)
   Le chevron est dessiné en dégradés CSS : aucune image encodée dans la
   feuille de style. Le pare-feu de l'hébergeur avait bloqué le fichier la
   dernière fois qu'une data-URI y figurait. ---- */
select,
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 46px;
  padding: 0 2.6rem 0 1rem !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  background-color: var(--white);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition: var(--transition);
}

select:hover {
  border-color: var(--border-hover);
}

select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- 21b. BOUTON « CHOISIR UN FICHIER »
   Il restait en cyan #24b9d7, couleur Bootstrap par défaut du thème. ---- */
.group-span-filestyle .btn,
.group-span-filestyle label,
.bootstrap-filestyle .btn,
.input-group-btn > .btn,
label.btn-default,
.btn-default {
  font-family: var(--font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white) !important;
  background: var(--bg-ink) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition);
}

.group-span-filestyle .btn:hover,
.group-span-filestyle label:hover,
.input-group-btn > .btn:hover,
.btn-default:hover {
  color: var(--white) !important;
  background: var(--accent) !important;
}

/* ---- 21c. SOULIGNEMENT DE LA NAVIGATION
   La bordure basse de 3px produisait une forme mal définie. Remplacée par une
   barre fine qui se déploie depuis la gauche. ---- */
.ax-nav ul.top-menu[data-depth="0"] > li > a {
  position: relative;
  border-bottom: 0 !important;
}

.ax-nav ul.top-menu[data-depth="0"] > li > a::after {
  content: "" !important;
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 11px;
  display: block;
  width: auto;
  height: 2px;
  background: var(--accent);
  border: 0;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out-expo);
}

.ax-nav ul.top-menu[data-depth="0"] > li:hover > a::after,
.ax-nav ul.top-menu[data-depth="0"] > li.ax-open > a::after,
.ax-nav ul.top-menu[data-depth="0"] > li.current > a::after {
  transform: scaleX(1);
}

/* ---- 21d. SÉLECTEUR DE QUANTITÉ — valable PARTOUT désormais
   Les règles précédentes étaient limitées à la fiche produit et à l'aperçu
   rapide. Le panier utilise le même composant et restait mal rendu. ---- */
.bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch;
  width: auto !important;
  height: 46px;
  overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.bootstrap-touchspin > input,
.bootstrap-touchspin .form-control,
.bootstrap-touchspin input[type="number"] {
  width: 52px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield;
}

.bootstrap-touchspin input[type="number"]::-webkit-outer-spin-button,
.bootstrap-touchspin input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bootstrap-touchspin .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column;
  width: 34px !important;
  height: 100%;
  margin: 0 !important;
  border-left: 1px solid var(--border);
  border-radius: 0 !important;
  overflow: visible !important;
}

.bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down {
  flex: 1 1 50%;
  width: 34px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: var(--transition);
}

.bootstrap-touchspin .bootstrap-touchspin-down {
  border-top: 1px solid var(--border) !important;
}

.bootstrap-touchspin .btn-touchspin:hover {
  color: var(--white) !important;
  background: var(--accent) !important;
}

.bootstrap-touchspin .btn-touchspin i,
.bootstrap-touchspin .btn-touchspin .material-icons {
  display: block !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* ---- 21e. BOUTON DE SUPPRESSION DU PANIER
   La corbeille n'était pas centrée dans son cercle. ---- */
.remove-from-cart {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0;
  color: var(--text-muted) !important;
  background: var(--white);
  border: 1.5px solid var(--border) !important;
  border-radius: 50%;
  transition: var(--transition);
}

.remove-from-cart:hover {
  color: var(--white) !important;
  background: var(--danger);
  border-color: var(--danger) !important;
}

.remove-from-cart i,
.remove-from-cart .material-icons {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ---- 21f. PANIER : cadres qui se superposaient ---- */
.cart-grid-body .card,
.cart-grid-right .card,
.cart-summary.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Le bloc interne portait une seconde bordure : d'où l'effet de double cadre */
.cart-grid-body .card .card-block,
.cart-grid-right .card .card-block,
.cart-grid-body .card .card-body,
.cart-summary .card-block {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cart-grid-body .card-block + .card-block,
.cart-summary .cart-summary-line + .cart-summary-line {
  border-top: 1px solid var(--border) !important;
}

.cart-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-item {
  padding: 1.35rem 1.25rem;
}

.cart-item + .cart-item {
  border-top: 1px solid var(--border);
}

/* Séparateurs superflus à l'intérieur des lignes produit */
.cart-overview hr,
.cart-grid-body hr,
.cart-summary hr {
  display: none !important;
}

/* ---- 21g. BOUTON « COMMANDER » : il flottait mal dans sa carte ---- */
.cart-detailed-actions {
  padding: 1.25rem !important;
  margin: 0 !important;
}

.cart-detailed-actions .btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin: 0 !important;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   22. PICTOGRAMMES DES TUILES SPORT
   Les tuiles étaient des aplats noirs quand aucune image de catégorie n'est
   chargée en back-office. Un pictogramme en filigrane occupe l'espace et
   identifie le sport d'un coup d'œil. Il s'efface si une photo est présente.
   ========================================================================== */

.ax-sport-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 58%;
  max-width: 108px;
  transform: translate(-50%, -58%);
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: color 0.35s var(--ease-smooth), transform 0.45s var(--ease-out-expo);
}

.ax-sport-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.ax-sport:hover .ax-sport-icon {
  color: rgba(255, 255, 255, 0.42);
  transform: translate(-50%, -62%) scale(1.06);
}

/* Une vraie photo de catégorie doit primer sur le pictogramme */
.ax-sport:has(.ax-sport-media img[src]:not([style*="none"])) .ax-sport-icon {
  color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767px) {
  .ax-sport-icon {
    width: 50%;
    max-width: 72px;
  }
}

/* ==========================================================================
   23. PRODUITS RECOMMANDÉS (fiche produit)
   ========================================================================== */

.ax-reco:empty,
.ax-reco:not(:has(.product-miniature)) {
  display: none;
}

.ax-reco {
  margin: 0 0 4rem;
  padding: 3rem 0 0;
  border-top: 1px solid var(--border);
}

/* Chaque module apporte son propre bloc : on les espace proprement */
.ax-reco > *,
.product-accessories {
  margin: 0 0 3rem;
}

.ax-reco > *:last-child {
  margin-bottom: 0;
}

/* Titres des blocs de recommandation, alignés sur l'écriture du site */
.ax-reco .products-section-title,
.ax-reco h2,
.ax-reco .h2,
.ax-reco .h5,
.product-accessories .h5,
.product-accessories .products-section-title {
  margin: 0 0 1.75rem !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  text-align: left !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.ax-reco .products-section-title::after,
.product-accessories .h5::after {
  content: none !important;
}

/* Rail horizontal : plus adapté qu'une grille pour de la recommandation */
.ax-reco .products,
.product-accessories .products {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 1.25rem;
  margin: 0 !important;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.ax-reco .products > .js-product,
.ax-reco .products > [class*="col-"],
.product-accessories .products > .js-product,
.product-accessories .products > [class*="col-"] {
  flex: 0 0 clamp(200px, 23%, 268px) !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

.ax-reco .products::-webkit-scrollbar,
.product-accessories .products::-webkit-scrollbar {
  height: 4px;
}

.ax-reco .products::-webkit-scrollbar-thumb,
.product-accessories .products::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}

/* Le lien « tous les produits » de ces blocs n'a pas lieu d'être ici */
.ax-reco .all-product-link {
  display: none !important;
}

@media (max-width: 767px) {
  .ax-reco .products > .js-product,
  .ax-reco .products > [class*="col-"],
  .product-accessories .products > .js-product,
  .product-accessories .products > [class*="col-"] {
    flex: 0 0 62% !important;
  }
}

/* Pictogrammes redessinés : trait plus épais, donc un peu plus présents. */
.ax-sport-icon {
  color: rgba(255, 255, 255, 0.2);
}

.ax-sport:hover .ax-sport-icon {
  color: rgba(255, 255, 255, 0.5);
}

/* Dès qu'une vraie photo de catégorie est chargée, le pictogramme s'efface.
   La classe est posée par addict-structure.js quand l'image aboutit. */
.ax-sport--photo .ax-sport-icon {
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================================
   24. EN-TÊTE DE CATÉGORIE EN BANNIÈRE
   Remplace le titre accompagné d'une vignette de 141x180 px qui flottait au
   milieu du bloc. La bannière est un fichier du thème nommé d'après l'id de
   la catégorie : assets/img/cat/23.jpg pour Football, etc.
   ========================================================================== */

.ax-cat-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(180px, 19vw, 270px);
  margin: 0 0 2rem;
  padding: 0;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ax-cat-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* Voile clair dégradé depuis la gauche : garantit la lisibilité du titre en
   noir quelle que soit la bannière, et sert de fond si aucune n'existe. */
.ax-cat-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 42%,
    rgba(255, 255, 255, 0.25) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.ax-cat-inner {
  position: relative;
  z-index: 2;
  max-width: 62%;
  padding: 2.25rem 2.75rem;
}

.ax-cat-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

.ax-cat-desc {
  max-width: 60ch;
  margin: 0.9rem 0 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.ax-cat-desc p:last-child {
  margin-bottom: 0;
}

/* Sans bannière, un bandeau plus bas suffit : pas de grand vide inutile */
.ax-cat-header:not(:has(.ax-cat-banner)) {
  min-height: 0;
}

.ax-cat-header:not(:has(.ax-cat-banner)) .ax-cat-inner {
  max-width: 100%;
  padding: 1.75rem 2rem;
}

/* Barre d'outils de la liste : resserrée, elle repoussait les produits très
   bas dans la page — au point de les faire passer sous la ligne de flottaison. */
#js-product-list-top {
  margin-bottom: 1rem;
  padding: 0;
}

.ax-cat-header + #js-product-list-top,
#js-product-list-header + #js-product-list-top {
  margin-top: 0;
}

@media (max-width: 767px) {
  .ax-cat-header {
    min-height: 150px;
  }

  .ax-cat-inner {
    max-width: 100%;
    padding: 1.5rem 1.25rem;
  }

  /* En mobile la bannière est trop étroite pour dégager la gauche :
     on éclaircit toute la surface. */
  .ax-cat-header::after {
    background: rgba(255, 255, 255, 0.88);
  }
}

/* ==========================================================================
   25. ANIMATIONS
   Le site était très statique. Ces règles ajoutent la révélation au
   défilement et affinent les micro-interactions.

   RÈGLE DE SÉCURITÉ : rien n'est masqué en dehors du sélecteur .ax-anim,
   posé sur <html> par addict-structure.js une fois qu'il a démarré. Si le
   JavaScript ne se charge pas — erreur réseau, script bloqué, navigateur
   ancien — la page reste intégralement visible. Aucun risque de page blanche.
   ========================================================================== */

/* ---- 25a. Révélation au défilement ---- */
.ax-anim [data-ax-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

.ax-anim [data-ax-reveal].ax-in {
  opacity: 1;
  transform: none;
  /* Propriétés longues volontairement : la forme raccourcie `transition`
     réinitialiserait le transition-delay que le script pose en inline
     pour décaler les éléments d'une même grille. */
  transition-property: opacity, transform;
  transition-duration: 0.75s;
  transition-timing-function: var(--ease-out-expo);
}

/* Le hero part d'un peu plus bas : c'est le premier écran, le mouvement
   doit se remarquer sans être lourd. */
.ax-anim .ax-hero-copy > [data-ax-reveal] {
  transform: translateY(34px);
}

/* Les tuiles sport arrivent avec une légère montée en échelle */
.ax-anim .ax-sport[data-ax-reveal] {
  transform: translateY(30px) scale(0.97);
}

.ax-anim .ax-sport[data-ax-reveal].ax-in {
  transform: none;
}

/* Les cartes produit d'un rail horizontal ne doivent pas se décaler
   verticalement : le conteneur rogne, elles seraient coupées. */
.ax-anim .ax-block--rail .products > [data-ax-reveal] {
  transform: translateY(0) scale(0.96);
}

.ax-anim .ax-block--rail .products > [data-ax-reveal].ax-in {
  transform: none;
}

/* ---- 25b. Micro-interactions ---- */

/* Retour tactile à l'appui : le bouton s'enfonce légèrement */
.ax-btn:active,
.add-to-cart:active,
.cart-detailed-actions .btn:active {
  transform: translateY(1px) scale(0.99);
}

.ax-btn {
  transition-property: background-color, color, border-color, transform, box-shadow;
  transition-duration: 0.28s;
  transition-timing-function: var(--ease-smooth);
}

/* Cartes produit : mouvement plus ample et plus souple */
.product-miniature .thumbnail-container {
  transition-property: transform, box-shadow, border-color;
  transition-duration: 0.42s;
  transition-timing-function: var(--ease-out-expo);
}

.product-miniature .thumbnail-container:hover {
  transform: translateY(-6px);
}

/* Lien de section : le soulignement se déploie depuis la gauche */
.ax-section-link {
  position: relative;
  border-bottom: 0 !important;
}

.ax-section-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 0.32s var(--ease-out-expo);
}

.ax-section-link:hover::after {
  transform: scaleX(0.4);
}

/* Pastille du panier : réaction à l'ajout */
.ax-actions .blockcart .header {
  transition-property: background-color, transform;
  transition-duration: 0.3s;
  transition-timing-function: var(--ease-smooth);
}

.ax-actions .blockcart:hover .header {
  transform: translateY(-1px);
}

/* ---- 25c. Défilement fluide vers les ancres ----
   scroll-padding-top évite que la cible se retrouve cachée sous l'en-tête
   collant. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

/* ---- 25d. RESPECT DES PRÉFÉRENCES SYSTÈME ----
   Certaines personnes désactivent les animations pour des raisons médicales
   (troubles vestibulaires, migraines). On coupe tout, sans exception. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ax-anim [data-ax-reveal],
  .ax-anim [data-ax-reveal].ax-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   26. CORRECTIFS — 6e passe
   ========================================================================== */

/* ---- 26a. CADRE CYAN SUR LES SOUS-CATÉGORIES
   theme.css applique au survol :
     #subcategories ul li:hover .subcategory-image a {
       padding: 5px; border: 5px solid #24b9d7; }
   Soit une bordure de 5 px en cyan PrestaShop, jamais neutralisée par la DA.
   On la remplace par le vocabulaire du thème. ---- */
#subcategories ul li .subcategory-image a,
#subcategories ul li:hover .subcategory-image a,
.subcategories-list .subcategory-image a,
.subcategories-list li:hover .subcategory-image a {
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Le nom de sous-catégorie virait lui aussi au cyan au survol */
#subcategories ul li .subcategory-name:hover,
#subcategories ul li:hover .subcategory-name,
.subcategories-list li:hover .subcategory-name {
  color: var(--accent) !important;
}

/* ---- 26b. ANIMATIONS PLUS AFFIRMÉES
   Le mouvement de 26 px passait inaperçu. On amplifie et on allonge. ---- */
.ax-anim [data-ax-reveal] {
  transform: translateY(42px);
}

.ax-anim [data-ax-reveal].ax-in {
  transition-duration: 0.9s;
}

.ax-anim .ax-hero-copy > [data-ax-reveal] {
  transform: translateY(52px);
}

.ax-anim .ax-sport[data-ax-reveal] {
  transform: translateY(48px) scale(0.94);
}

.ax-anim .ax-block--rail .products > [data-ax-reveal] {
  transform: translateY(0) scale(0.92);
}

/* ---- 26c. TITRE DU HERO — révélation par masque
   Le fondu rendait mal sur la typo en contour : le tracé orange
   apparaissait par transparence, ce qui donnait un effet sale.
   Chaque ligne remonte maintenant de sous la précédente, sans fondu. ---- */
.ax-hero-title .ax-line {
  display: block;
  overflow: hidden;
  /* marge de sécurité pour que le tracé du contour ne soit pas rogné */
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}

.ax-hero-title .ax-line > span {
  display: block;
}

/* Le titre lui-même ne subit plus le traitement générique : ce sont ses
   lignes qui s'animent. */
.ax-anim .ax-hero-title[data-ax-reveal] {
  opacity: 1;
  transform: none;
}

.ax-anim .ax-hero-title[data-ax-reveal] .ax-line > span {
  transform: translateY(105%);
}

.ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line > span {
  transform: none;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: var(--ease-out-expo);
}

.ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line:nth-child(2) > span {
  transition-delay: 0.14s;
}

/* ---- 26d. Titres de section : même révélation par masque ---- */
.ax-anim .ax-section-head[data-ax-reveal] .ax-section-title,
.ax-anim .ax-section-head[data-ax-reveal] .ax-section-link {
  display: inline-block;
  transform: translateY(28px);
  opacity: 0;
}

.ax-anim .ax-section-head[data-ax-reveal].ax-in .ax-section-title,
.ax-anim .ax-section-head[data-ax-reveal].ax-in .ax-section-link {
  transform: none;
  opacity: 1;
  transition-property: transform, opacity;
  transition-duration: 0.85s;
  transition-timing-function: var(--ease-out-expo);
}

.ax-anim .ax-section-head[data-ax-reveal].ax-in .ax-section-link {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .ax-hero-title .ax-line > span,
  .ax-anim .ax-hero-title[data-ax-reveal] .ax-line > span,
  .ax-anim .ax-section-head[data-ax-reveal] .ax-section-title,
  .ax-anim .ax-section-head[data-ax-reveal] .ax-section-link {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   27. CORRECTIFS — 7e passe
   ========================================================================== */

/* ---- 27a. TITRE DU HERO — on repasse en clip-path.
   La version précédente masquait avec overflow:hidden + padding compensé par
   une marge négative. Ce montage modifie la hauteur réelle des lignes : avec
   un line-height de 0,92 sur du Anton, la boîte devient plus courte que les
   lettres et le titre remontait dans le sur-titre.

   clip-path découpe à l'affichage sans jamais toucher à la mise en page :
   le problème disparaît par construction. ---- */
.ax-hero-title .ax-line {
  display: block;
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}

.ax-anim .ax-hero-title[data-ax-reveal] .ax-line > span {
  display: block;
  /* rien de visible : découpe totale par le haut */
  clip-path: inset(100% 0 0 0);
  transform: translateY(0.16em);
}

.ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line > span {
  /* marge négative pour que le tracé du contour orange ne soit pas rogné */
  clip-path: inset(-30% -30% -30% -30%);
  transform: none;
  transition-property: clip-path, transform;
  transition-duration: 1s;
  transition-timing-function: var(--ease-out-expo);
}

.ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line:nth-child(2) > span {
  transition-delay: 0.14s;
}

/* ---- 27b. BARRE DE TRI DE LA LISTE PRODUITS
   Le compteur et le sélecteur étaient posés dans deux colonnes Bootstrap
   qui se répartissaient mal : le tri se retrouvait décalé au milieu du
   cadre. On repasse la barre en flex, compteur à gauche, tri à droite. ---- */
#js-product-list-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.5rem !important;
  padding: 0.9rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

#js-product-list-top > div,
#js-product-list-top .total-products,
#js-product-list-top .sort-by-row {
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#js-product-list-top .total-products {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}

#js-product-list-top .total-products p {
  margin: 0;
}

#js-product-list-top .sort-by-row {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
}

#js-product-list-top .sort-by {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

#js-product-list-top .products-sort-order {
  width: auto !important;
  padding: 0 !important;
}

#js-product-list-top .products-sort-order .select-title {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 190px;
  height: 42px;
  margin: 0;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}

#js-product-list-top .products-sort-order .select-title:hover {
  border-color: var(--border-hover);
}

#js-product-list-top .products-sort-order .select-title i,
#js-product-list-top .products-sort-order .material-icons {
  margin: 0 !important;
  font-size: 20px !important;
  color: var(--text-muted) !important;
}

#js-product-list-top .products-sort-order .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

#js-product-list-top .products-sort-order .select-list {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  color: var(--text) !important;
}

#js-product-list-top .products-sort-order .select-list:hover {
  color: var(--accent) !important;
  background: var(--accent-soft);
}

@media (max-width: 575px) {
  #js-product-list-top {
    justify-content: flex-start;
  }

  #js-product-list-top .products-sort-order .select-title {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-anim .ax-hero-title[data-ax-reveal] .ax-line > span,
  .ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line > span {
    clip-path: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   28. ANIMATIONS — REPRISE PROPRE

   Constat en ligne : le sur-titre restait à opacity 0 et translateY(52px)
   alors que sa classe .ax-in était bien posée, et les lignes du titre
   restaient découpées à inset(100%) — donc invisibles.

   Cause : les sections 25, 26 et 27 se sont empilées au fil des passes.
   Plusieurs règles d'état INITIAL arrivent après l'état RÉVÉLÉ à spécificité
   égale — en CSS, à égalité, la dernière l'emporte. L'état masqué gagnait
   donc systématiquement.

   Correction : l'état révélé devient prioritaire, une bonne fois. Et le
   titre abandonne clip-path, trop sensible aux valeurs et aux transitions,
   au profit d'un simple déplacement — qui ne touche pas à la mise en page.
   ========================================================================== */

/* ---- 28a. L'état révélé l'emporte toujours ---- */
.ax-anim [data-ax-reveal].ax-in {
  opacity: 1 !important;
  transform: none !important;
  transition-property: opacity, transform !important;
  transition-duration: 0.9s !important;
  transition-timing-function: var(--ease-out-expo) !important;
}

/* ---- 28b. Titre du hero : déplacement simple, ligne par ligne ----
   Plus de masque overflow, plus de clip-path. transform et opacity
   n'affectent jamais la mise en page : le chevauchement avec le sur-titre
   ne peut plus se produire. */
.ax-hero-title .ax-line {
  display: block;
  overflow: visible !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.ax-anim .ax-hero-title[data-ax-reveal] .ax-line > span {
  display: block;
  clip-path: none !important;
  opacity: 0;
  transform: translateY(0.42em);
}

.ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition-property: opacity, transform !important;
  transition-duration: 0.95s !important;
  transition-timing-function: var(--ease-out-expo) !important;
}

.ax-anim .ax-hero-title[data-ax-reveal].ax-in .ax-line:nth-child(2) > span {
  transition-delay: 0.15s !important;
}

/* ---- 28c. Titres de section : même principe ---- */
.ax-anim .ax-section-head[data-ax-reveal].ax-in .ax-section-title,
.ax-anim .ax-section-head[data-ax-reveal].ax-in .ax-section-link {
  opacity: 1 !important;
  transform: none !important;
  transition-property: opacity, transform !important;
  transition-duration: 0.85s !important;
  transition-timing-function: var(--ease-out-expo) !important;
}

/* ---- 28d. Préférences système : priorité absolue ---- */
@media (prefers-reduced-motion: reduce) {
  .ax-anim [data-ax-reveal],
  .ax-anim [data-ax-reveal].ax-in,
  .ax-anim .ax-hero-title[data-ax-reveal] .ax-line > span,
  .ax-anim .ax-section-head[data-ax-reveal] .ax-section-title,
  .ax-anim .ax-section-head[data-ax-reveal] .ax-section-link {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   29. MOBILE — CORRECTION DES DÉBORDEMENTS

   Constat à 320 px sur la fiche produit : 33 éléments dépassaient de 13 px.
   La chaîne des parents montrait un enfant de grille de 318 px dans une
   grille de 280 px.

   Cause : un enfant de grille a min-width: auto par défaut. Il refuse donc
   de devenir plus étroit que la largeur minimale de son contenu. Sur la
   fiche produit, la bande de vignettes est en white-space: nowrap, ce qui
   imposait 318 px à toute la colonne.

   Deux corrections, appliquées partout :
     - min-width: 0 sur les enfants de grille, pour les autoriser à rétrécir
     - minmax(0, 1fr) au lieu de 1fr dans les définitions de colonnes

   Le débordement était invisible dans mes premières mesures parce que
   custom-addict.css applique overflow-x: hidden sur html et body : le
   contenu n'était pas décalé, il était rogné. D'où l'image coupée à droite.
   ========================================================================== */

/* ---- 29a. Les enfants de grille doivent pouvoir rétrécir ---- */
.ax-pdp > *,
.ax-hero-inner > *,
.ax-contact-inner > *,
.ax-clubs-inner > *,
.ax-props-inner > *,
.ax-sports-grid > *,
.ax-strip-inner > *,
.ax-cat-header > *,
.ax-block .products > *,
.ax-reco .products > *,
.product-accessories .products > * {
  min-width: 0;
}

/* ---- 29b. La bande de vignettes ne doit plus dicter la largeur ---- */
.ax-pdp .js-qv-mask,
.ax-pdp .mask {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
}

.ax-pdp .images-container,
.ax-pdp .product-cover,
.ax-pdp-gallery .page-content {
  min-width: 0;
  max-width: 100%;
}

.ax-pdp .product-cover img,
.ax-pdp .product-images img {
  max-width: 100%;
}

/* ---- 29c. Colonnes : minmax(0,…) à tous les points de rupture ---- */
@media (max-width: 1199px) {
  .ax-sports-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ax-block--grid .products,
  .ax-block--ranked .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ax-props-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .ax-pdp,
  .ax-hero-inner,
  .ax-clubs-inner,
  .ax-contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .ax-sports-grid,
  .ax-block--grid .products,
  .ax-block--ranked .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ax-props-inner,
  .ax-clubs-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 29d. Garde-fous généraux sur petits écrans ---- */
@media (max-width: 767px) {
  /* Les mots très longs (références, e-mails) ne doivent pas pousser
     la mise en page au-delà de l'écran. */
  .ax-pdp-buy h1,
  .ax-cat-title,
  .ax-info-value,
  .product-title,
  .breadcrumb {
    overflow-wrap: anywhere;
  }

  /* Le fil d'Ariane se replie au lieu de s'étirer sur une ligne */
  .breadcrumb ol {
    flex-wrap: wrap;
  }

  /* Les blocs pleine largeur : on neutralise la compensation de barre de
     défilement, inutile sur mobile et source de décalage d'un ou deux pixels. */
  .ax-hero,
  .ax-strip,
  .ax-clubs,
  .ax-block--dark,
  .ax-props,
  .ax-contact {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  /* Les paires quantité + bouton d'achat passent à la ligne proprement */
  .ax-pdp .product-quantity,
  .product-actions .product-add-to-cart {
    flex-wrap: wrap;
  }

  .ax-pdp .product-quantity .add,
  .product-add-to-cart .add-to-cart {
    flex: 1 1 100%;
  }

  /* Vignettes de la galerie un peu plus compactes */
  .ax-pdp .product-images img {
    width: 62px;
    height: 62px;
  }
}

/* ---- 29e. Très petits écrans (320 px) ---- */
@media (max-width: 359px) {
  .ax-sports-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ax-block--grid .products,
  .ax-block--ranked .products {
    grid-template-columns: minmax(0, 1fr);
  }

  .ax-bar-inner,
  .ax-topbar-inner {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ---- 29f. Bloc newsletter du pied de page
   Un .row imbriqué porte les marges négatives de -15px de Bootstrap, mais la
   colonne qui le contient a perdu son padding : plus rien ne compense, et le
   bloc dépassait de 5px de chaque côté. C'était le dernier débordement. ---- */
#blockEmailSubscription_displayFooterBefore .row,
.block_newsletter .row,
.block-social .row,
#footer .block_newsletter > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#blockEmailSubscription_displayFooterBefore [class*="col-"],
.block_newsletter [class*="col-"] {
  max-width: 100%;
  min-width: 0;
}

/* Garde-fou général : aucune ligne du pied de page ne doit pouvoir sortir */
@media (max-width: 991px) {
  #footer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #footer [class*="col-"] {
    min-width: 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   30. MOBILE — SOUS-CATÉGORIES ET PAGINATION

   Mesure à 320 px sur /22-sports : la grille des sous-catégories calculait
   « 220px 220px », soit 440 px de colonnes dans un conteneur de 280 px.
   Le premier item se retrouvait à x = -62.

   Cause : theme.css impose min-width: 200px et margin: 10px sur chaque
   item (#subcategories ul li). Une grille ne peut pas réduire une colonne
   sous la largeur minimale imposée à son contenu — elle débordait donc.
   ========================================================================== */

.subcategories-list,
#subcategories ul {
  display: grid !important;
  gap: 0.85rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.subcategories-list li,
#subcategories ul li {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

@media (min-width: 1200px) {
  .subcategories-list,
  #subcategories ul {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1199px) {
  .subcategories-list,
  #subcategories ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .subcategories-list,
  #subcategories ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
}

@media (max-width: 359px) {
  .subcategories-list,
  #subcategories ul {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- Pagination : elle refusait de se replier et sortait de l'écran ---- */
.pagination .page-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination .page-list li {
  margin: 0 !important;
  min-width: 0;
}

.pagination .page-list a,
.pagination .page-list .disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
}

.pagination .page-list a .material-icons {
  font-size: 20px !important;
  line-height: 1 !important;
}

@media (max-width: 575px) {
  .pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .pagination > div,
  .pagination .col-md-4,
  .pagination .col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center;
  }

  .pagination .page-list a,
  .pagination .page-list .disabled {
    min-width: 36px;
    height: 36px;
    padding: 0 0.4rem;
  }
}