/* =====================================================
   KAKA SPORT - FOOTBALL THEME
   Design premium inspiré du monde du football
   ===================================================== */

/* --- TYPOGRAPHIE GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, a, span, div, li, input, button {
  font-family: 'Outfit', sans-serif !important;
}

/* Exception pour les icônes Material (indispensable sur PrestaShop) */
.material-icons {
  font-family: 'Material Icons' !important;
}

/* --- VARIABLES DE COULEURS --- */
:root {
  --football-black:   #1a1a1a;
  --football-dark:    #111111;
  --football-green:   #00c853;
  --football-green2:  #00a844;
  --football-white:   #ffffff;
  --football-grey:    #f4f4f4;
  --football-text:    #333333;
}

/* --- FOND GENERAL --- */
body, html, #wrapper {
  background-color: #ffffff !important;
  color: var(--football-text) !important;
}

/* =====================================================
   HEADER - Look stade / nuit
   ===================================================== */
.header-nav {
  background-color: var(--football-black) !important;
  border-bottom: 2px solid var(--football-green) !important;
}

.header-nav a,
.header-nav span,
.header-nav .dropdown,
.header-nav .user-info a,
.header-nav #contact-link a {
  color: #cccccc !important;
}

.header-nav a:hover {
  color: var(--football-green) !important;
}

/* Barre de navigation principale */
.header-top {
  background-color: var(--football-black) !important;
  border-bottom: 3px solid var(--football-green) !important;
  padding: 10px 0 !important;
}

/* Logo texte */
.header-top .logo,
#_desktop_logo .logo {
  filter: brightness(10) !important;
}

/* Menu principal */
#_desktop_top_menu .top-menu a[data-depth="0"] {
  color: var(--football-white) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px 16px !important;
  transition: all 0.25s ease !important;
}

#_desktop_top_menu .top-menu a[data-depth="0"]:hover {
  color: var(--football-green) !important;
  border-bottom: 3px solid var(--football-green) !important;
}

/* Barre de recherche */
.search-widget form input[type=text] {
  background: #2a2a2a !important;
  border: 1px solid #444 !important;
  color: #fff !important;
  border-radius: 4px !important;
}

.search-widget form input[type=text]::placeholder {
  color: #aaa !important;
}

.search-widget form input[type=text]:focus {
  background: #333 !important;
  outline: 2px solid var(--football-green) !important;
}

.search-widget form button[type=submit] {
  color: var(--football-green) !important;
}

/* Panier & connexion - header-nav */
.header-nav .blockcart a,
#_desktop_cart .blockcart a,
#_desktop_user_info a {
  color: var(--football-white) !important;
  text-decoration: none !important;
}

/* Bouton PANIER - design premium fond noir */
#_desktop_cart,
#_desktop_cart .blockcart {
  display: flex !important;
  align-items: center !important;
  background-color: var(--football-black) !important;
}

#_desktop_cart .blockcart a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--football-black) !important;
  border: 2px solid var(--football-green) !important;
  border-radius: 25px !important;
  padding: 5px 14px 5px 10px !important;
  color: var(--football-white) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 0.85rem !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

#_desktop_cart .blockcart a:hover {
  background: var(--football-green) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(0, 200, 83, 0.4) !important;
  transform: scale(1.04) !important;
}

#_desktop_cart .blockcart a .material-icons {
  font-size: 1.2rem !important;
  color: var(--football-green) !important;
  transition: color 0.25s ease !important;
}

#_desktop_cart .blockcart a:hover .material-icons {
  color: #fff !important;
}

/* Compteur articles */
#_desktop_cart .cart-products-count {
  background: var(--football-green) !important;
  color: #fff !important;
  border-radius: 50% !important;
  min-width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0 5px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  transition: background 0.25s ease !important;
}

#_desktop_cart .blockcart a:hover .cart-products-count {
  background: #fff !important;
  color: var(--football-green) !important;
}

/* =====================================================
   SOUS-MENU / MEGA-MENU - Design premium
   ===================================================== */

/* Ancrage du menu dans le header - pas de débordement */
#header {
  position: relative !important;
}

/* Conteneur du dropdown - calé dans le site */
.top-menu .sub-menu {
  background: #111111 !important;
  border-top: 3px solid var(--football-green) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
  padding: 20px 32px !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

/* Colonnes CSS - chaque catégorie depth-1 déclenche une nouvelle colonne */
.top-menu .sub-menu ul {
  column-width: 170px !important;
  column-gap: 8px !important;
  column-fill: balance !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Chaque item de sous-menu */
.top-menu .sub-menu li {
  display: block !important;
  break-inside: avoid !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Liens des sous-catégories (depth-2+) */
.top-menu a:not([data-depth="0"]) {
  color: #bbbbbb !important;
  font-size: 0.80rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 5px 10px !important;
  display: block !important;
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Hover - accent vert à gauche */
.top-menu a:not([data-depth="0"]):hover {
  color: var(--football-green) !important;
  border-left: 3px solid var(--football-green) !important;
  background: rgba(0, 200, 83, 0.06) !important;
  padding-left: 14px !important;
}

/* Titres de catégorie : forcent une nouvelle colonne SEULEMENT s'ils ont un sous-menu */
.top-menu li:has(ul) {
  break-before: column !important;
  break-inside: avoid !important;
}

/* Style "En-tête" UNIQUEMENT pour les ligues qui ont des sous-menus (ex: PREMIER LEAGUE) */
/* Les pays de NATIONAL (sans sous-menus) hériteront du style standard a:not([data-depth="0"]) */
.top-menu li:has(ul) > a[data-depth="1"] {
  color: var(--football-white) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 0 10px 8px !important;
  margin-bottom: 4px !important;
  border-bottom: 2px solid var(--football-green) !important;
  border-left: none !important;
  cursor: pointer !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.top-menu li:has(ul) > a[data-depth="1"]:hover {
  color: var(--football-green) !important;
  border-bottom-color: var(--football-green) !important;
  background: transparent !important;
}

}


/* =====================================================
   FIL D'ARIANE (breadcrumb)
   ===================================================== */
.breadcrumb {
  background: transparent !important;
  border-bottom: none !important;
  border-top: none !important;
  padding: 10px 0 10px 20px !important;
}

/* Wrapper breadcrumb */
nav.breadcrumb {
  background: transparent !important;
}

.breadcrumb li a {
  color: #000000 !important;
  font-weight: 500 !important;
}

.breadcrumb li a:hover {
  color: var(--football-green) !important;
}

/* Séparateur "/" */
.breadcrumb li::after,
.breadcrumb-item + .breadcrumb-item::before {
  color: #000000 !important;
}

/* Dernier élément (page courante) - en vert */
.breadcrumb li:last-child,
.breadcrumb li:last-child a,
.breadcrumb li:last-child span {
  color: var(--football-green) !important;
  font-weight: 600 !important;
}

/* =====================================================
   BOUTONS PRINCIPAUX
   ===================================================== */
.btn-primary,
.btn-primary:hover,
.add-to-cart,
#add-to-cart-or-refresh .btn-primary {
  background-color: var(--football-green) !important;
  border-color: var(--football-green) !important;
  color: var(--football-white) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 4px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(0, 200, 83, 0.3) !important;
}

.btn-primary:hover,
.add-to-cart:hover {
  background-color: var(--football-green2) !important;
  box-shadow: 0 6px 20px rgba(0, 200, 83, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* =====================================================
   PRIX PRODUIT
   ===================================================== */
.product-price,
.current-price,
.price {
  color: var(--football-green) !important;
  font-weight: 800 !important;
}

/* Prix sur la PAGE PRODUIT - grand et impactant */
.page-product .product-price,
.page-product .current-price,
.page-product .current-price span,
.page-product .product-price-and-shipping .price,
.page-product .product-prices .price {
  color: var(--football-green) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
}

.product-price-and-shipping .price {
  color: var(--football-green) !important;
}

/* =====================================================
   PAGE PRODUIT
   ===================================================== */
/* Image principale */
.product-cover img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  border: 2px solid #e8e8e8 !important;
}

/* Nom du produit */
.page-product h1,
.product-detail h1 {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--football-black) !important;
}

/* Thumbnails */
.product-images > li.thumb-container .thumb:hover,
.product-images > li.thumb-container .thumb.selected {
  border: 3px solid var(--football-green) !important;
}

/* Onglets description */
.tabs .nav-tabs .nav-link.active {
  color: var(--football-green) !important;
  border-bottom: 3px solid var(--football-green) !important;
}

.tabs .nav-tabs .nav-link:hover {
  color: var(--football-green) !important;
  border-bottom: 3px solid var(--football-green) !important;
}

/* Disponibilité */
#product-availability .product-available {
  color: var(--football-green) !important;
}

/* =====================================================
   LISTE DES PRODUITS (grille)
   ===================================================== */
.product-miniature .thumbnail-container {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.product-miniature .thumbnail-container:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  transform: translateY(-4px) !important;
}

.product-miniature .product-title a {
  color: var(--football-black) !important;
  font-weight: 600 !important;
}

.product-miniature .product-price-and-shipping {
  color: var(--football-green) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

/* Badge produit */
.product-flags li.product-flag {
  background: var(--football-green) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
}

/* Bouton ajout rapide */
.product-miniature .highlighted-informations .quick-view:hover {
  color: var(--football-green) !important;
}

/* =====================================================
   CATEGORIES - SIDEBAR
   ===================================================== */
#search_filters,
.block-categories {
  border-left: 4px solid var(--football-green) !important;
  border-radius: 0 6px 6px 0 !important;
}

.block-categories .h6,
#search_filters > .h6 {
  color: var(--football-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.block-categories a:hover,
.facet-label a:hover {
  color: var(--football-green) !important;
}

/* =====================================================
   PAGINATION
   ===================================================== */
.page-item.active .page-link,
.pagination .current a {
  color: var(--football-green) !important;
  border-bottom: 2px solid var(--football-green) !important;
}

.page-link:hover {
  color: var(--football-green) !important;
}

/* =====================================================
   FOOTER - Ambiance stade
   ===================================================== */
#footer {
  background-color: var(--football-black) !important;
  color: #aaaaaa !important;
  border-top: 3px solid var(--football-green) !important;
}

#footer .footer-container {
  background-color: var(--football-black) !important;
}

.footer-container li a,
.footer-container p,
.footer-container span {
  color: #aaaaaa !important;
}

.footer-container li a:hover {
  color: var(--football-green) !important;
}

.block-contact .block-contact-title,
.blockcms-title,
.myaccount-title,
.myaccount-title a,
#footer h4,
#footer .h4 {
  color: var(--football-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Séparateurs dans le footer */
#footer .separator {
  border-color: #333 !important;
}

/* =====================================================
   ALERTES & NOTIFICATIONS
   ===================================================== */
.alert-success {
  border-left: 4px solid var(--football-green) !important;
}

/* =====================================================
   FORMULAIRES
   ===================================================== */
.form-control:focus {
  outline: 2px solid var(--football-green) !important;
  border-color: var(--football-green) !important;
}

/* =====================================================
   SELECTION DE TAILLE / VARIANTE
   ===================================================== */
.product-variants > .product-variants-item select {
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.product-variants > .product-variants-item select:focus {
  border-color: var(--football-green) !important;
  outline: none !important;
}

/* =====================================================
   REASSURANCE BLOC
   ===================================================== */
#block-reassurance {
  border-top: 2px solid #f0f0f0 !important;
}

/* =====================================================
   PAGE PANIER
   ===================================================== */
.cart-summary-line .label {
  font-weight: 600 !important;
}

.cart-summary-line .cart-total .label,
.cart-summary-line .cart-total .value {
  color: var(--football-black) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}

/* =====================================================
   QUICKVIEW MODAL
   ===================================================== */
.quickview .modal-content {
  border-radius: 8px !important;
  border-top: 4px solid var(--football-green) !important;
}

/* =====================================================
   RESPONSIVE - Mobile
   ===================================================== */
#mobile_top_menu_wrapper {
  background-color: var(--football-black) !important;
}

#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
  color: var(--football-white) !important;
  border-bottom: 1px solid #2a2a2a !important;
}

#mobile_top_menu_wrapper .top-menu a[data-depth="0"]:hover {
  color: var(--football-green) !important;
}

/* =====================================================
   NEWSLETTER - Design premium football
   ===================================================== */

/* Conteneur principal */
#blockEmailSubscription_displayFooterBefore,
.block_newsletter {
  background: linear-gradient(135deg, #111111 0%, #1e1e1e 100%) !important;
  border-top: 3px solid var(--football-green) !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 40px 20px !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Inner container centré */
#blockEmailSubscription_displayFooterBefore .container,
.block_newsletter .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Row centré */
#blockEmailSubscription_displayFooterBefore .row,
.block_newsletter .row {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Titre de la newsletter */
.block_newsletter h2,
.block_newsletter .h2,
.block_newsletter p.h2,
.block_newsletter .block-title {
  color: var(--football-white) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}

/* Sous-texte / description */
.block_newsletter p,
.block_newsletter .page-content.page-cms ul {
  color: #aaaaaa !important;
  font-size: 0.85rem !important;
  margin-top: 8px !important;
}

/* Champ email */
.block_newsletter form input[type=text],
.block_newsletter form input[type=email] {
  background: #2a2a2a !important;
  border: 2px solid #444 !important;
  border-right: none !important;
  color: var(--football-white) !important;
  padding: 12px 18px !important;
  font-size: 0.95rem !important;
  border-radius: 4px 0 0 4px !important;
  height: 48px !important;
  min-width: 280px !important;
  transition: border-color 0.25s ease !important;
}

.block_newsletter form input[type=text]:focus,
.block_newsletter form input[type=email]:focus {
  border-color: var(--football-green) !important;
  outline: none !important;
  background: #333 !important;
}

.block_newsletter form input::placeholder {
  color: #777 !important;
  font-style: italic !important;
}

/* Bouton S'ABONNER */
.block_newsletter form button[type=submit],
#blockEmailSubscription_displayFooterBefore button[type=submit] {
  background: var(--football-green) !important;
  color: #fff !important;
  border: 2px solid var(--football-green) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 0 24px !important;
  height: 48px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 0 16px rgba(0, 200, 83, 0.3) !important;
  white-space: nowrap !important;
}

.block_newsletter form button[type=submit]:hover {
  background: var(--football-green2) !important;
  box-shadow: 0 0 28px rgba(0, 200, 83, 0.6) !important;
  transform: scale(1.03) !important;
}

/* Icône loupe du bouton */
.block_newsletter form button[type=submit] .material-icons,
.block_newsletter form button[type=submit] i {
  display: none !important;
}

/* Alignement du formulaire */
.block_newsletter form {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-top: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =====================================================
   RÉTABLISSEMENT DES PUCES (BULLETS) DANS LE TEXTE
   ===================================================== */
.rte ul,
.page-cms .page-content ul,
.category-description ul,
.product-description ul {
  list-style-type: disc !important;
  padding-left: 24px !important;
  margin-bottom: 16px !important;
}

.rte ul li,
.page-cms .page-content ul li,
.category-description ul li,
.product-description ul li {
  list-style-type: disc !important;
  display: list-item !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

.rte ol,
.page-cms .page-content ol,
.category-description ol,
.product-description ol {
  list-style-type: decimal !important;
  padding-left: 24px !important;
  margin-bottom: 16px !important;
}

.rte ol li,
.page-cms .page-content ol li,
.category-description ol li,
.product-description ol li {
  list-style-type: decimal !important;
  display: list-item !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

/* =====================================================
   SOUS-CATÉGORIES : AFFICHAGE PAR 4
   ===================================================== */
#subcategories ul,
#subcategories .subcategories-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  padding: 0 !important;
}

#subcategories ul li,
#subcategories .subcategories-list li {
  width: 25% !important;
  flex: 0 0 25% !important;
  max-width: 25% !important;
  min-width: 25% !important; /* Force override */
  box-sizing: border-box !important;
  padding: 0 15px !important;
  margin: 0 0 30px 0 !important;
  float: none !important;
  clear: none !important;
  list-style: none !important; /* Reset default list style */
}

/* Tablette : par 3 */
@media (max-width: 991px) {
  #subcategories ul li,
  #subcategories .subcategories-list li {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    min-width: 33.333% !important;
  }
}

/* Mobile grand : par 2 */
@media (max-width: 767px) {
  #subcategories ul li,
  #subcategories .subcategories-list li {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
  }
}

/* =====================================================
   CAROUSEL - Tailles forcées (1317x280)
   ===================================================== */
#carousel {
  max-width: 1317px !important;
  width: 100% !important;
  height: 280px !important;
  left: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

#carousel .carousel-inner,
#carousel .carousel-item {
  height: 100% !important;
}

#carousel .carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Permet à l'image de remplir l'espace sans se déformer */
}

/* Alignement parfait des flèches au centre vertical */
#carousel .direction {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 100% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  z-index: 10 !important;
}