/* =============================================================
   Dakar Atletic — Palette & Overrides
   Thème : Astra + Elementor
   À enqueue via functions.php ou Insert Headers and Footers
   ============================================================= */

/* ── 1. Variables globales ── */
:root {
  --da-blanc:      #FFFFFF;
  --da-noir:       #0A0A0A;
  --da-vert:       #1FA855;
  --da-vert-fonce: #168A43;
  --da-gris-clair: #F4F4F4;
  --da-gris-texte: #5C5C5C;
}

/* ── 2. Fond et texte de base ── */
html,
body,
.site,
#page {
  background-color: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* ── 3. Remplacement du bleu Elementor Kit (#6EC1E4, #273171) par --da-vert ── */

/* Variable CSS Elementor — primary color */
:root,
.elementor-kit-214 {
  --e-global-color-primary: var(--da-vert) !important;
}

/* Occurrences hardcodées du bleu #6EC1E4 */
[style*="color:#6EC1E4"],
[style*="color: #6EC1E4"],
[style*="background-color:#6EC1E4"],
[style*="background-color: #6EC1E4"] {
  color: var(--da-vert) !important;
  background-color: var(--da-vert) !important;
}

/* Bleu marine #273171 — utilisé comme couleur de texte/fond foncé */
[style*="color:#273171"],
[style*="color: #273171"],
[style*="background-color:#273171"],
[style*="background-color: #273171"] {
  color: var(--da-noir) !important;
  background-color: var(--da-noir) !important;
}

/* Liens et éléments Elementor qui héritent du bleu primaire */
a,
.elementor-widget-heading .elementor-heading-title a,
.elementor-button,
.elementor-button-wrapper .elementor-button {
  color: var(--da-vert);
}

a:hover,
a:focus {
  color: var(--da-vert-fonce);
}

/* ── 4. Remplacement des couleurs parasites ── */

/* #585367 — violet foncé parasite → noir pour le texte, vert pour les boutons */
[style*="color:#585367"],
[style*="color: #585367"] {
  color: var(--da-noir) !important;
}

[style*="background-color:#585367"],
[style*="background-color: #585367"] {
  background-color: var(--da-vert) !important;
}

.elementor-button[style*="background-color:#585367"],
.elementor-button[style*="background-color: #585367"] {
  background-color: var(--da-vert) !important;
}

/* ── 5. Boutons globaux Elementor → vert ── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
  background-color: var(--da-vert) !important;
  border-color: var(--da-vert) !important;
  color: var(--da-blanc) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--da-vert-fonce) !important;
  border-color: var(--da-vert-fonce) !important;
  color: var(--da-blanc) !important;
}

/* ── 6. Astra — couleurs du header et de la navigation ── */

/* Barre du dessus (contact : adresse / téléphones / livraison) — fond blanc */
.ast-above-header-bar {
  background-color: var(--da-blanc) !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

/* Texte de contact (adresse, téléphones, livraison) — widget HTML personnalisé
   classes : .contact-item, .contact-text, .phone-number, .delivery-text */
.ast-above-header-bar .contact-item,
.ast-above-header-bar .contact-text,
.ast-above-header-bar .phone-number,
.ast-above-header-bar .phone-number span,
.ast-above-header-bar .delivery-text {
  color: var(--da-noir) !important;
}

/* Icônes de contact (localisation, téléphone, livraison) — vert */
.ast-above-header-bar .contact-icon,
.ast-above-header-bar .contact-icon i {
  color: var(--da-vert) !important;
}

/* Barre principale (logo + menu + recherche + panier) — fond blanc */
.ast-primary-header-bar,
.ast-primary-header-bar.main-header-bar {
  background-color: var(--da-blanc) !important;
}

/* Liens du menu desktop — noirs sur fond blanc */
.ast-desktop .main-navigation a,
.ast-desktop .ast-header-navigation a {
  color: var(--da-noir) !important;
}

/* Survol et item actif — vert */
.ast-desktop .main-navigation a:hover,
.ast-desktop .ast-header-navigation a:hover {
  color: var(--da-vert) !important;
}

/* Lien actif dans la nav desktop */
.ast-desktop .main-navigation .current-menu-item > a,
.ast-desktop .main-navigation .current-menu-ancestor > a {
  color: var(--da-vert) !important;
}

/* ── 7. Éléments Astra divers ── */

/* Accent Elementor (#61CE70) — conserver vert, aligner sur --da-vert */
:root,
.elementor-kit-214 {
  --e-global-color-accent: var(--da-vert) !important;
}

/* Couleur secondaire (#54595F) → gris texte */
:root,
.elementor-kit-214 {
  --e-global-color-secondary: var(--da-gris-texte) !important;
  --e-global-color-text: var(--da-gris-texte) !important;
}

/* Orange de transition page (#FFBC7D) — neutralisé en vert */
.e-page-transition {
  background-color: var(--da-vert) !important;
}

/* Fonds gris clair (sections, cards) */
.ast-separate-container .ast-article-post,
.entry-content,
.ast-card,
section.elementor-section[style*="background-color:#F4F4F4"],
section.elementor-section[style*="background-color: #F4F4F4"] {
  background-color: var(--da-gris-clair);
}

/* ── 8. Couleur des liens du menu mobile (popup burger) ──
   .ast-builder-menu-mobile .main-navigation = sélecteur officiel du menu mobile
   (source : mobile-menu/dynamic-css/dynamic.css.php ligne 35)
   Le fond du popup est #fafafa (blanc cassé), notre règle body color:#FFFFFF
   remontait dans la cascade et rendait les liens blancs sur fond blanc.
── */

/* Fond et couleur de base du popup */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-desktop-popup-content {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* Liens du menu mobile — spécificité maximale pour battre .main-navigation a */
.ast-mobile-popup-drawer .ast-mobile-popup-inner .main-navigation a,
.ast-mobile-popup-drawer .ast-mobile-popup-inner .menu-item > .menu-link,
.ast-mobile-popup-drawer .ast-mobile-popup-inner .menu-item > a,
.ast-mobile-popup-drawer .ast-mobile-popup-content .main-navigation a,
.ast-mobile-popup-drawer .ast-mobile-popup-content .menu-item > .menu-link,
.ast-mobile-popup-drawer .ast-desktop-popup-content .main-navigation a,
.ast-mobile-popup-drawer .ast-desktop-popup-content .menu-item > .menu-link,
.ast-header-break-point #ast-mobile-popup .main-navigation a,
.ast-header-break-point #ast-mobile-popup .menu-item > .menu-link,
.ast-header-break-point .ast-mobile-popup-drawer .menu-item > a {
  color: #0A0A0A !important;
}

/* Survol dans le popup mobile */
.ast-mobile-popup-drawer .ast-mobile-popup-inner .menu-item:hover > a,
.ast-mobile-popup-drawer .ast-mobile-popup-inner .menu-item:hover > .menu-link,
.ast-mobile-popup-drawer .ast-mobile-popup-content .menu-item:hover > a,
.ast-mobile-popup-drawer .ast-desktop-popup-content .menu-item:hover > .menu-link,
.ast-header-break-point #ast-mobile-popup .menu-item:hover > a {
  color: var(--da-vert) !important;
}

/* ── 9. Correction bug menu double sur mobile ──
   Classe .ast-builder-menu-1 = menu desktop "menu-1" (source : dynamic.css.php ligne 38)
   Classe .ast-header-break-point = ajoutée au <body> par JS Astra dès que la largeur
   passe sous le breakpoint header (configurable, 921px par défaut dans le Customizer).
   Sur mobile, seul le popup burger (.ast-mobile-popup-inner) doit être actif.
── */

/* Cache le menu desktop menu-1 quand le breakpoint mobile est actif */
.ast-header-break-point .ast-builder-menu-1 {
  display: none !important;
}

/* S'assure que le trigger burger reste visible */
.ast-header-break-point .ast-mobile-menu-buttons,
.ast-header-break-point .ast-mobile-menu-trigger-minimal,
.ast-header-break-point .ast-mobile-menu-trigger-default,
.ast-header-break-point .main-header-menu-toggle {
  display: flex !important;
}

/* Le popup mobile (menu burger) reste accessible */
.ast-header-break-point .ast-mobile-popup-inner,
.ast-header-break-point #ast-mobile-popup,
.ast-header-break-point .ast-above-header-mobile-nav,
.ast-header-break-point .ast-below-header-mobile-nav {
  display: block;
}

/* Garantit que le menu-1 reste visible sur desktop (annule l'effet au-dessus du breakpoint) */
.ast-desktop .ast-builder-menu-1 {
  display: flex !important;
}

/* ── 9b. Suppression de l'overlay assombrissant Elementor sur le Hero ──
   Elementor Background Overlay génère un ::before semi-transparent (overlay-opacity: 0.2)
   par-dessus le slideshow. On le neutralise complètement. */
.elementor-element-e2b531f::before,
.elementor-element-e2b531f > .elementor-background-slideshow::before,
.elementor-element-e2b531f > .e-con-inner > .elementor-background-slideshow::before {
  opacity: 0 !important;
  display: none !important;
}

/* ── 10. Hero container — règle unique consolidée ── */
.elementor-element-e2b531f {
  position: relative !important;
  min-height: 700px !important;
  height: 700px !important;
  max-height: 700px !important;
  overflow: visible !important;
  /* z-index > 0 pour que le ::after (athlète) passe devant les sections suivantes */
  z-index: 2;
  isolation: isolate;
}

/* Slideshow wrapper : couvre tout le container, clippé aux 700px */
.elementor-element-e2b531f .elementor-background-slideshow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0;
}

/* Slides individuelles : couvrent aussi tout le wrapper */
.elementor-element-e2b531f .elementor-background-slideshow .swiper-wrapper,
.elementor-element-e2b531f .elementor-background-slideshow .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

/* Images du slideshow.
   Images réelles : 1584×672px (ratio 2.357:1) — pas exactement 1920×700.
   cover = remplit sans bandes grises, légère coupe sur les bords.
   position: center 60px = décale vers le bas de 60px pour que le haut
   du texte apparaisse sous le header (80px). */
.elementor-element-e2b531f .elementor-background-slideshow__slide__image {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center 60px !important;
  background-repeat: no-repeat !important;
}

/* Ken Burns désactivé */
.elementor-element-e2b531f .elementor-ken-burns {
  animation: none !important;
  transform: none !important;
}

/* ── 11. Athlète découpé — ×10, déborde intentionnellement du hero ──
   Image réelle : 1376×768px (ratio 16:9 paysage).
   Pseudo-élément en portrait 900×506px (ratio 16:9 maintenu).
   Le container a overflow:visible → l'athlète peut déborder vers le bas.
   bottom: -150px = l'athlète sort de 150px sous le hero (effet "sortir du banner").
   z-index: 10 = passe devant le slideshow.
── */
.elementor-element-e2b531f::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -100px;
  /* Image réelle : 1376×768px (ratio 1.7917 ≈ 16:9 paysage).
     Hauteur 630px × ratio = 1129px de large.
     bottom: -70px → tête à 140px du haut du container (60px sous le header),
     pieds à 70px sous le container, protégés par z-index: 2 sur le hero. */
  width: 1129px;
  height: 630px;
  background-image: url("https://dakaratletic.com/wp-content/uploads/2026/06/hero-athlete-detoure.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.elementor-element-e2b531f.da-slide-1-active::after {
  opacity: 1;
}

@media (max-width: 1024px) {
  .elementor-element-e2b531f {
    min-height: 500px !important;
    height: 500px !important;
    max-height: 500px !important;
  }
  .elementor-element-e2b531f::after {
    width: 752px;
    height: 420px;
    bottom: -40px;
  }
}

@media (max-width: 767px) {
  .elementor-element-e2b531f::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. Grilles de produits WooCommerce — harmonisation catalogue
   Classes sources :
     - .astra-shop-thumbnail-wrap       → wrapper image (Astra)
     - .woocommerce-loop-product__title → titre produit (WC)
     - .woocommerce ul.products li.product .price → prix (Astra/WC)
     - .button.add_to_cart_button       → bouton panier (WC standard)
     - .ast-on-card-button              → bouton panier mode moderne Astra
     - .star-rating                     → étoiles d'avis (WC)
   ═══════════════════════════════════════════════════════════════ */

/* ── 12a. Grille : espacement cohérent entre les produits ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
  gap: 24px !important;
  row-gap: 28px !important;
}

/* ── 12b. Carte produit : fond gris clair, coins arrondis, ombre légère ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--da-gris-clair);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex !important;
  flex-direction: column;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  transform: translateY(-3px);
}

/* ── 12c. Image : ratio 4:5 portrait, recadrage centré ──
   Technique : aspect-ratio directement sur l'img (pas de position:absolute).
   Le hack padding-top causait height:100% = 0 car height% absolu se résout
   contre la hauteur du CONTENU du parent, pas son padding. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
  overflow: hidden;
  background: var(--da-gris-clair);
  flex-shrink: 0;
  display: block;
}

/* L'<a> entre le wrapper et l'img doit être block pour que l'img remplisse la largeur */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap > a {
  display: block;
  width: 100%;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* ── 12d. Zone texte : padding interne cohérent ── */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── 12e. Lien titre — bloc pour que le ::after bouton soit contenu ── */
.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce-page ul.products li.product .ast-loop-product__link {
  display: block;
  text-decoration: none;
}

/* ── 12f. Titre : taille réduite, line-height aéré, 2 lignes max ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--da-noir) !important;
  line-height: 1.45 !important;
  /* Limite à 3 lignes avec ellipsis */
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 12g. Prix ── */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--da-vert) !important;
  display: block !important;
}

/* ── 12h. Étoiles : masquées ── */
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
  display: none !important;
}

/* ── 12i. Bouton "Ajouter au panier" : masqué — remplacé par "Voir le produit" ── */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce-page ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce-page ul.products li.product .ast-on-card-button {
  display: none !important;
}

/* ── 12j. Bouton "Voir le produit" via ::after sur le lien titre ──
   Le pseudo-élément est à l'intérieur de .ast-loop-product__link
   (lien vers get_the_permalink()) → cliquable, pointe vers la fiche produit. */
.woocommerce ul.products li.product .ast-loop-product__link::after,
.woocommerce-page ul.products li.product .ast-loop-product__link::after {
  content: "Voir le produit";
  display: block;
  margin-top: 10px;
  padding: 8px 14px;
  background-color: var(--da-noir);
  color: #FFFFFF !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.woocommerce ul.products li.product:hover .ast-loop-product__link::after,
.woocommerce-page ul.products li.product:hover .ast-loop-product__link::after {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 12k. Mobile : bouton toujours visible (pas de hover tactile) ── */
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 14px !important;
    row-gap: 18px !important;
  }
  .woocommerce ul.products li.product .ast-loop-product__link::after,
  .woocommerce-page ul.products li.product .ast-loop-product__link::after {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12L. Section "Produits populaires" (container 3de24df) — pleine largeur
   Scope strict à ce container uniquement : ne touche pas les autres
   grilles produits du site (Sélection du moment, etc.).
   ═══════════════════════════════════════════════════════════════ */

/* Casse la contrainte boxed_width (1200px) → pleine largeur viewport */
.elementor-element-3de24df.e-con-boxed {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  box-sizing: border-box !important;
}

/* Supprime le plafond 1200px du wrapper interne */
.elementor-element-3de24df.e-con-boxed > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* Espacement plus aéré entre les cartes, uniquement dans cette section */
.elementor-element-3de24df ul.products,
.elementor-element-3de24df.woocommerce ul.products {
  gap: 36px !important;
  row-gap: 40px !important;
}

/* Padding interne plus généreux des cartes (texte ↔ bord) */
.elementor-element-3de24df ul.products li.product .astra-shop-summary-wrap {
  padding: 18px 20px 22px !important;
}

/* Cartes plus grandes : on remonte le ratio image légèrement pour mieux
   remplir l'espace disponible en largeur, tout en gardant 4 colonnes */
.elementor-element-3de24df ul.products li.product .astra-shop-thumbnail-wrap img {
  aspect-ratio: 3 / 4 !important;
}

.elementor-element-3de24df ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem !important;
}

/* ── Animation de zoom léger au survol des images (Produits populaires
   + grilles de maillots). overflow:hidden est déjà sur .astra-shop-thumbnail-wrap
   (règle globale ligne ~410) : le zoom est donc clippé à l'image, sans
   déborder sur le titre/prix de la carte. */
.elementor-element-3de24df ul.products li.product .astra-shop-thumbnail-wrap img,
.elementor-element-a236a45 ul.products li.product .astra-shop-thumbnail-wrap img {
  transition: transform 0.35s ease;
}

.elementor-element-3de24df ul.products li.product:hover .astra-shop-thumbnail-wrap img,
.elementor-element-a236a45 ul.products li.product:hover .astra-shop-thumbnail-wrap img {
  transform: scale(1.07);
}

/* ── Style carte produit "Chrome Industries" : titre majuscules/gras,
   ronds de couleur sous le prix, bouton WhatsApp masqué par défaut ── */

/* 1. Titre en majuscules, gras, compact */
.elementor-element-3de24df ul.products li.product .woocommerce-loop-product__title,
.elementor-element-a236a45 ul.products li.product .woocommerce-loop-product__title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* 2. Ronds de couleur (variation-swatches-woo) sous le prix : on resserre
   la taille/l'espacement par défaut du plugin (24px) pour rester discret
   sur une carte produit de grille. */
.elementor-element-3de24df ul.products li.product .cfvsw-swatches-container,
.elementor-element-a236a45 ul.products li.product .cfvsw-swatches-container {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.elementor-element-3de24df ul.products li.product .cfvsw-swatches-option,
.elementor-element-a236a45 ul.products li.product .cfvsw-swatches-option {
  min-width: 18px !important;
  min-height: 18px !important;
  cursor: pointer;
}
.elementor-element-3de24df ul.products li.product .cfvsw-more-link,
.elementor-element-a236a45 ul.products li.product .cfvsw-more-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--da-noir);
  cursor: pointer;
  margin-left: 2px;
}

/* 3. Bouton WhatsApp (Spoki) : masqué par défaut, révélé au survol de la
   carte. Le plugin Spoki encapsule le bouton réel dans un Shadow DOM et
   retire dynamiquement sa classe '.spoki-shadowed-button' au chargement,
   donc on cible la structure (sibling direct après .astra-shop-summary-wrap)
   plutôt que la classe, pour rester fiable après ce nettoyage JS. */
.elementor-element-3de24df ul.products li.product > .astra-shop-summary-wrap + div,
.elementor-element-a236a45 ul.products li.product > .astra-shop-summary-wrap + div {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.elementor-element-3de24df ul.products li.product:hover > .astra-shop-summary-wrap + div,
.elementor-element-a236a45 ul.products li.product:hover > .astra-shop-summary-wrap + div {
  max-height: 60px;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .elementor-element-3de24df.e-con-boxed {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-3de24df.e-con-boxed {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-element-3de24df ul.products,
  .elementor-element-3de24df.woocommerce ul.products {
    gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* ── 13. Catégories sport — icônes toutes vertes (override Elementor cache) ──
   Les couleurs individuelles sont stockées dans _elementor_data mais le cache
   résiste. On écrase directement via CSS toutes les variations de sélecteurs
   qu'Elementor peut générer pour les cercles d'icônes. */
/* Cercles d'icônes noirs uniquement dans le bloc Catégories sport (02b9fd2) */
.elementor-element-02b9fd2 .elementor-icon,
.elementor-element-02b9fd2 .elementor-icon-box-icon span,
.elementor-element-02b9fd2 .elementor-icon-box-icon .elementor-icon {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  border-color: #0A0A0A !important;
  color: #FFFFFF !important;
}

.elementor-element-02b9fd2 .elementor-icon i,
.elementor-element-02b9fd2 .elementor-icon svg,
.elementor-element-02b9fd2 .elementor-icon-box-icon i,
.elementor-element-02b9fd2 .elementor-icon-box-icon svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. Bande "4 avantages" — version compacte
   a819a65 = desktop/tablette (visible), 5c33a60 = mobile (visible)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Padding vertical du container réduit : 60px/0 → 24px/24px */
.elementor-element-a819a65 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.elementor-element-5c33a60 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 2. Icônes plus petites : 32px → 22px, padding du cercle 14px → 9px */
.elementor-element-a819a65 .elementor-icon-box-icon .elementor-icon,
.elementor-element-5c33a60 .elementor-icon-box-icon .elementor-icon {
  width: 40px !important;
  height: 40px !important;
  padding: 9px !important;
}
.elementor-element-a819a65 .elementor-icon-box-icon .elementor-icon svg,
.elementor-element-5c33a60 .elementor-icon-box-icon .elementor-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* 3. Espacement réduit entre icône / titre / texte */
.elementor-element-a819a65 .elementor-icon-box-wrapper,
.elementor-element-5c33a60 .elementor-icon-box-wrapper {
  gap: 6px !important;
}
.elementor-element-a819a65 .elementor-icon-box-title,
.elementor-element-5c33a60 .elementor-icon-box-title {
  margin-bottom: 2px !important;
  font-size: 0.92rem !important;
}
.elementor-element-a819a65 .elementor-icon-box-title span,
.elementor-element-5c33a60 .elementor-icon-box-title span {
  line-height: 1.2 !important;
}
.elementor-element-a819a65 .elementor-icon-box-description,
.elementor-element-5c33a60 .elementor-icon-box-description {
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   15. Carrousel "Découvrez nos catégories" (da8e5b5) — pleine largeur
   ═══════════════════════════════════════════════════════════════ */

/* Casse la contrainte de largeur du thème → pleine largeur viewport */
.elementor-element-da8e5b5.e-con-full {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 24px !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  box-sizing: border-box !important;
}

/* Les cartes se répartissent sur toute la largeur de la section,
   avec un gap généreux, tout en gardant une taille standard
   (flex-grow avec max-width pour éviter qu'elles deviennent géantes) */
.elementor-element-da8e5b5 .da-cat-carousel {
  width: 100%;
}
.elementor-element-da8e5b5 .da-cat-track {
  gap: 56px;
  justify-content: center;
}
.elementor-element-da8e5b5 .da-cat-card {
  flex: 1 1 0;
  max-width: 480px;
  min-width: 260px;
}

@media (max-width: 1024px) {
  .elementor-element-da8e5b5.e-con-full {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-da8e5b5.e-con-full {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-element-da8e5b5 .da-cat-track {
    gap: 16px;
  }
  .elementor-element-da8e5b5 .da-cat-card {
    flex: 0 0 240px;
    max-width: none;
  }
}

/* Fond noir → texte clair pour rester lisible */
.elementor-element-da8e5b5 .ekit-heading--title,
.elementor-element-da8e5b5 h2.ekit-heading--title {
  color: #FFFFFF !important;
}
.elementor-element-da8e5b5 .ekit-heading__description,
.elementor-element-da8e5b5 .ekit-heading__description p {
  color: #D9D9D9 !important;
}

/* ═══════════════════════════════════════════════════════════════
   16. Section "Sélection du moment" (0b1bdb7) — pleine largeur,
   images agrandies, espacement aéré (même logique que "Produits populaires")
   ═══════════════════════════════════════════════════════════════ */

.elementor-element-0b1bdb7.e-con-boxed {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  box-sizing: border-box !important;
}

/* Fond noir → titre en blanc pour rester lisible */
.elementor-element-0b1bdb7 .elementor-heading-title {
  color: #FFFFFF !important;
}

.elementor-element-0b1bdb7.e-con-boxed > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}

.elementor-element-0b1bdb7 ul.products,
.elementor-element-0b1bdb7.woocommerce ul.products {
  gap: 36px !important;
  row-gap: 40px !important;
}

.elementor-element-0b1bdb7 ul.products li.product .astra-shop-summary-wrap {
  padding: 18px 20px 22px !important;
}

.elementor-element-0b1bdb7 ul.products li.product .astra-shop-thumbnail-wrap img {
  aspect-ratio: 4 / 5 !important;
}

.elementor-element-0b1bdb7 ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem !important;
}

/* Bouton WhatsApp (Spoki) masqué par défaut, révélé au survol — même
   comportement que les grilles "Produits populaires" et "Maillots". */
.elementor-element-0b1bdb7 ul.products li.product > .astra-shop-summary-wrap + div {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.elementor-element-0b1bdb7 ul.products li.product:hover > .astra-shop-summary-wrap + div {
  max-height: 60px;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .elementor-element-0b1bdb7.e-con-boxed {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-0b1bdb7.e-con-boxed {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-element-0b1bdb7 ul.products,
  .elementor-element-0b1bdb7.woocommerce ul.products {
    gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* ── 17. Titres de section en MAJUSCULES (site entier) ──
   CSS only : text-transform n'affecte que le rendu visuel, pas le
   contenu réel en base (SEO/édition non impactés).
   Cible les widgets "titre" d'Elementor Pro (.elementor-heading-title)
   et d'ElementsKit (.ekit-heading--title.elementskit-section-title)
   utilisés comme titres de section/bloc (ex. "Produits populaires",
   "Maillots Officiels les Plus Demandés à Dakar – Sénégal",
   "Découvrez nos catégories de produits", "Sélection du moment").
   Exclus volontairement :
   - .woocommerce-loop-product__title (titres produits, règle dédiée)
   - .elementor-icon-box-title (libellés courts sous icônes, pas des titres de section)
   - le logo du site (image, non affecté par ce sélecteur de toute façon) */
.elementor-heading-title,
.ekit-heading--title.elementskit-section-title {
  text-transform: uppercase !important;
}

/* ── 18. Page Boutique (ID 974, /boutiques/) — style "Chrome Industries" ──
   Bandeau hero + spacer + breadcrumb supprimés de _elementor_data (plus
   besoin de neutraliser leur fond ici). Il reste : la ligne sidebar filtres
   [woof] (24%) + grille [products columns="4"] (66,66%). */

/* Fond blanc pur garanti sur toute la page */
body.page-id-974 {
  background-color: #FFFFFF !important;
}

/* --- Sidebar de filtres WOOF (container 9653229) --- */
.elementor-element-9653229 {
  background-color: #FFFFFF !important;
}
.elementor-element-9653229,
.elementor-element-9653229 label,
.elementor-element-9653229 select,
.elementor-element-9653229 option,
.elementor-element-9653229 .woof_radio_label {
  color: var(--da-noir) !important;
  font-family: 'Instrument Sans', sans-serif !important;
}
/* Titres de groupe de filtres ("Catégories de produits", "Couleur produit"...) */
.elementor-element-9653229 .woof_container_inner h4 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--da-noir);
  margin-bottom: 12px;
}
/* Fine ligne séparatrice légère entre groupes de filtres, pas de bordures épaisses */
.elementor-element-9653229 .woof_container {
  border: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #EAEAEA;
  padding-bottom: 18px;
  margin-bottom: 18px;
  background: transparent !important;
}
.elementor-element-9653229 .woof_container:last-child {
  border-bottom: none;
}
/* Select catégories : fin, simple, pas de couleur */
.elementor-element-9653229 select {
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  background-color: #FFFFFF;
}
.elementor-element-9653229 select:focus {
  border-color: var(--da-vert);
  outline: none;
}
/* Cases à cocher / boutons radio actifs en vert */
.elementor-element-9653229 input[type="checkbox"],
.elementor-element-9653229 input[type="radio"] {
  accent-color: var(--da-vert);
}
.elementor-element-9653229 input[type="radio"]:checked + label,
.elementor-element-9653229 input[type="checkbox"]:checked + label {
  color: var(--da-vert) !important;
  font-weight: 600;
}

/* --- Grille produits (container 3af8269, [products columns="4"]) --- */
.elementor-element-3af8269 {
  background-color: #FFFFFF !important;
  padding-left: 24px !important;
  padding-right: 0 !important;
}
.elementor-element-3af8269 ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  row-gap: 32px !important;
}
.elementor-element-3af8269 ul.products li.product {
  background-color: #FFFFFF !important;
}

/* 1. Titre en majuscules gras (cohérent avec les grilles homepage) */
.elementor-element-3af8269 ul.products li.product .woocommerce-loop-product__title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.25;
  font-size: 0.92rem;
}

/* 2. Zoom léger au survol de l'image (overflow:hidden déjà sur
   .astra-shop-thumbnail-wrap, règle globale ligne ~410) */
.elementor-element-3af8269 ul.products li.product .astra-shop-thumbnail-wrap img {
  transition: transform 0.35s ease;
}
.elementor-element-3af8269 ul.products li.product:hover .astra-shop-thumbnail-wrap img {
  transform: scale(1.07);
}

/* 3. Ronds de couleur (variation-swatches-woo) sous le prix */
.elementor-element-3af8269 ul.products li.product .cfvsw-swatches-container {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.elementor-element-3af8269 ul.products li.product .cfvsw-swatches-option {
  min-width: 18px !important;
  min-height: 18px !important;
  cursor: pointer;
}
.elementor-element-3af8269 ul.products li.product .cfvsw-more-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--da-noir);
  cursor: pointer;
  margin-left: 2px;
}

/* 4. Bouton WhatsApp (Spoki) masqué par défaut, révélé au survol — même
   technique structurelle que sur les grilles homepage (cf. section 16),
   car Spoki retire la classe '.spoki-shadowed-button' au chargement JS. */
.elementor-element-3af8269 ul.products li.product > .astra-shop-summary-wrap + div {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.elementor-element-3af8269 ul.products li.product:hover > .astra-shop-summary-wrap + div {
  max-height: 60px;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .elementor-element-3af8269 ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    row-gap: 24px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-3af8269 ul.products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .elementor-element-3af8269 {
    padding-left: 16px !important;
  }
}

/* ── 19. Pages catégories WooCommerce natives — même style "Chrome Industries"
   que la grille Boutique : Crampons & Chaussures de Sport, Maillots de club,
   Maillots Équipes Nationales, Trophées & Médailles. Ce sont des archives
   WooCommerce standard (pas de page Elementor custom), donc on cible via
   les classes de <body> propres à chaque taxonomie plutôt qu'un ID Elementor. */
body.term-crampons-chaussures-de-sport,
body.term-maillots-foot-club,
body.term-maillots-equipes-nationales,
body.term-trophees-medailles {
  background-color: #FFFFFF !important;
}

body.term-crampons-chaussures-de-sport ul.products,
body.term-maillots-foot-club ul.products,
body.term-maillots-equipes-nationales ul.products,
body.term-trophees-medailles ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  row-gap: 32px !important;
}
body.term-crampons-chaussures-de-sport ul.products li.product,
body.term-maillots-foot-club ul.products li.product,
body.term-maillots-equipes-nationales ul.products li.product,
body.term-trophees-medailles ul.products li.product {
  background-color: #FFFFFF !important;
}

/* 1. Titre en majuscules gras */
body.term-crampons-chaussures-de-sport ul.products li.product .woocommerce-loop-product__title,
body.term-maillots-foot-club ul.products li.product .woocommerce-loop-product__title,
body.term-maillots-equipes-nationales ul.products li.product .woocommerce-loop-product__title,
body.term-trophees-medailles ul.products li.product .woocommerce-loop-product__title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.25;
  font-size: 0.92rem;
}

/* 2. Zoom léger au survol de l'image */
body.term-crampons-chaussures-de-sport ul.products li.product .astra-shop-thumbnail-wrap img,
body.term-maillots-foot-club ul.products li.product .astra-shop-thumbnail-wrap img,
body.term-maillots-equipes-nationales ul.products li.product .astra-shop-thumbnail-wrap img,
body.term-trophees-medailles ul.products li.product .astra-shop-thumbnail-wrap img {
  transition: transform 0.35s ease;
}
body.term-crampons-chaussures-de-sport ul.products li.product:hover .astra-shop-thumbnail-wrap img,
body.term-maillots-foot-club ul.products li.product:hover .astra-shop-thumbnail-wrap img,
body.term-maillots-equipes-nationales ul.products li.product:hover .astra-shop-thumbnail-wrap img,
body.term-trophees-medailles ul.products li.product:hover .astra-shop-thumbnail-wrap img {
  transform: scale(1.07);
}

/* 3. Ronds de couleur (variation-swatches-woo) sous le prix */
body.term-crampons-chaussures-de-sport ul.products li.product .cfvsw-swatches-container,
body.term-maillots-foot-club ul.products li.product .cfvsw-swatches-container,
body.term-maillots-equipes-nationales ul.products li.product .cfvsw-swatches-container,
body.term-trophees-medailles ul.products li.product .cfvsw-swatches-container {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
body.term-crampons-chaussures-de-sport ul.products li.product .cfvsw-swatches-option,
body.term-maillots-foot-club ul.products li.product .cfvsw-swatches-option,
body.term-maillots-equipes-nationales ul.products li.product .cfvsw-swatches-option,
body.term-trophees-medailles ul.products li.product .cfvsw-swatches-option {
  min-width: 18px !important;
  min-height: 18px !important;
  cursor: pointer;
}
body.term-crampons-chaussures-de-sport ul.products li.product .cfvsw-more-link,
body.term-maillots-foot-club ul.products li.product .cfvsw-more-link,
body.term-maillots-equipes-nationales ul.products li.product .cfvsw-more-link,
body.term-trophees-medailles ul.products li.product .cfvsw-more-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--da-noir);
  cursor: pointer;
  margin-left: 2px;
}

/* 4. Bouton WhatsApp (Spoki) masqué par défaut, révélé au survol */
body.term-crampons-chaussures-de-sport ul.products li.product > .astra-shop-summary-wrap + div,
body.term-maillots-foot-club ul.products li.product > .astra-shop-summary-wrap + div,
body.term-maillots-equipes-nationales ul.products li.product > .astra-shop-summary-wrap + div,
body.term-trophees-medailles ul.products li.product > .astra-shop-summary-wrap + div {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
body.term-crampons-chaussures-de-sport ul.products li.product:hover > .astra-shop-summary-wrap + div,
body.term-maillots-foot-club ul.products li.product:hover > .astra-shop-summary-wrap + div,
body.term-maillots-equipes-nationales ul.products li.product:hover > .astra-shop-summary-wrap + div,
body.term-trophees-medailles ul.products li.product:hover > .astra-shop-summary-wrap + div {
  max-height: 60px;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  body.term-crampons-chaussures-de-sport ul.products,
  body.term-maillots-foot-club ul.products,
  body.term-maillots-equipes-nationales ul.products,
  body.term-trophees-medailles ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    row-gap: 24px !important;
  }
}
@media (max-width: 767px) {
  body.term-crampons-chaussures-de-sport ul.products,
  body.term-maillots-foot-club ul.products,
  body.term-maillots-equipes-nationales ul.products,
  body.term-trophees-medailles ul.products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* ── 20. Page "À propos" (ID 390) — cohérence titres ── */
.elementor-element-55950bf {
  text-transform: uppercase !important;
}

/* Section "Présentation + stats" (c1aee62) : texte centré, interligne plus aéré
   (le widget Text Editor n'a pas de contrôle d'alignement natif fiable, on le force en CSS) */
.elementor-element-7d53c77,
.elementor-element-7d53c77 p {
  text-align: center !important;
  line-height: 1.8 !important;
}
.elementor-element-93a0459 {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 21. Suppression du bandeau hero des pages catégories produit (Astra
   "Archive Entry Banner") — ex. Maillots de club, Trophées & Médailles, etc.
   C'est une fonctionnalité globale du thème Astra (réglage Customizer), pas
   propre à une catégorie : ce sélecteur la masque sur TOUTES les pages
   catégorie produit du site, pour rester cohérent avec le reste (pas de
   bandeau hero avec photo de stock sur les grilles produits). */
.ast-archive-entry-banner[data-post-type="product"] {
  display: none !important;
}

/* Grille pleine largeur et bien espacée pour la catégorie "Maillots de club" */
body.term-maillots-foot-club ul.products {
  gap: 32px !important;
  row-gap: 36px !important;
}

/* ── 22. Section "Panneaux boutique" (façade / horaires / maps) — pleine
   largeur du site, même technique de breakout que les autres sections
   (3de24df, a236a45, da8e5b5...). Appliquée au niveau du container
   Elementor lui-même (pas dans le widget HTML imbriqué) pour rester
   cohérente avec le reste du site et éviter un double décalage. */
.elementor-element-da9f3c2.e-con-full {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}