/* 
 * custom.css – Les Pelotes de Joléon (FINAL)
 * PrestaShop 8.1.x – child_classic overrides
 * - NO SHADOWS (box-shadow désactivés)
 * - Bordures visibles (focus 2px, sélection 3px)
 * - Palette alignée sur ta backup
 */

/* ========= Palette ========= */
:root{
  --lpj-primary: #7fbad6;        /* couleur principale (backup) */
  --lpj-primary-dark: #3f6f97;   /* hover/active (backup) */
  --lpj-sale: #e57373;           /* rouge promo doux */

  /* Bootstrap helpers (optionnel mais utile) */
  --bs-primary: var(--lpj-primary);
  --bs-link-color: var(--lpj-primary);
  --bs-link-hover-color: var(--lpj-primary-dark);
}

/* ========= Liens ========= */
a{ color: var(--lpj-primary); }
a:hover, a:focus{ color: var(--lpj-primary-dark); }

/* Footer : certains liens ont des règles plus spécifiques */
.footer-container .footer-block a:hover,
.footer-container .links a:hover,
.footer-container .block-contact a:hover{
  color: var(--lpj-primary-dark);
}

/* Bootstrap utility */
.text-primary { color: var(--lpj-primary) !important; }
a.text-primary:hover,
.text-primary a:hover,
.text-primary:hover{
  color: var(--lpj-primary-dark) !important;
}

/* ========= Header ========= */
#header .header-nav .cart-preview.active{
  background-color: var(--lpj-primary);
}

/* Déconnexion + compte */
#header .user-info a,
#header a.logout,
#header .user-info a.account{
  color: var(--lpj-primary);
}
#header .user-info a:hover,
#header a.logout:hover,
#header .user-info a.account:hover{
  color: var(--lpj-primary-dark);
}

/* Contactez-nous (hover uniquement, conserve le gris par défaut) */
#header .header-nav a:hover,
#header .header-nav a:focus{
  color: var(--lpj-primary-dark);
}

/* ========= Boutons ========= */
.btn-primary{
  background-color: var(--lpj-primary);
  border-color: var(--lpj-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active{
  background-color: var(--lpj-primary-dark);
  border-color: var(--lpj-primary-dark);
}

/* Rupture de stock / désactivé */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled]{
  background-color: var(--lpj-primary);
  border-color: var(--lpj-primary);
  opacity: 0.7;
}
.btn-primary:disabled:hover,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover{
  background-color: var(--lpj-primary);
  border-color: var(--lpj-primary);
}

/* ========= Prix ========= */
.product-price,
.current-price span{
  color: var(--lpj-primary);
}

/* ========= Tabs ========= */
.tabs .nav-tabs .nav-link.active{
  color: var(--lpj-primary);
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover{
  border-bottom: 3px solid var(--lpj-primary);
}

/* ========= Flags produits ========= */
.product-flags li.product-flag{
  background-color: var(--lpj-primary);
}
.product-flags li.product-flag.on-sale,
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage{
  background-color: var(--lpj-sale);
  color: #fff;
}
.has-discount .discount{
  background-color: var(--lpj-sale);
  color: #fff;
}

/* ========= PDP : vignettes images produit ========= */
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover{
  border: 3px solid var(--lpj-primary) !important;
}
.product-images > li.thumb-container .thumb:hover,
.product-images > li.thumb-container .thumb:focus,
.product-images > li.thumb-container .thumb:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.product-images > li.thumb-container .thumb img{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ========= Quick view ========= */
.product-miniature .highlighted-informations .quick-view:hover,
.product-miniature .highlighted-informations .quick-view:focus,
.product-miniature .highlighted-informations .quick-view:hover i,
.product-miniature .highlighted-informations .quick-view:focus i{
  color: var(--lpj-primary-dark) !important;
}

/* ========= Menus ========= */
#_desktop_top_menu .top-menu a.dropdown-item:hover,
#_desktop_top_menu .top-menu a.dropdown-item:focus,
#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li > a:focus{
  color: var(--lpj-primary-dark) !important;
}
#_desktop_top_menu .dropdown-menu a.dropdown-item:hover,
#_desktop_top_menu .dropdown-menu a.dropdown-item:focus{
  color: var(--lpj-primary-dark) !important;
}

/* Mobile menu */
#mobile_top_menu_wrapper a:hover,
#mobile_top_menu_wrapper a:focus,
#_mobile_top_menu a:hover,
#_mobile_top_menu a:focus,
.mobile-menu a:hover,
.mobile-menu a:focus,
#mobile_top_menu_wrapper .dropdown-item:hover,
#mobile_top_menu_wrapper .dropdown-item:focus{
  color: var(--lpj-primary-dark) !important;
}

/* ========= Formulaires : focus SANS SHADOW, bordure visible ========= */
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus{
  border-color: var(--lpj-primary) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}

.form-control:focus-visible{
  border-color: var(--lpj-primary) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Input-group (ex: mot de passe + AFFICHER) */
.input-group:focus-within .form-control,
.input-group:focus-within .form-select{
  border-color: var(--lpj-primary) !important;
  border-width: 2px !important;
}
.input-group:focus-within{
  outline: none !important;
  box-shadow: none !important;
}
.input-group:focus-within .btn,
.input-group:focus-within .input-group-text{
  border-color: var(--lpj-primary) !important;
}

/* Newsletter footer */
footer .block_newsletter form .input-wrapper input[type="email"]:focus,
footer .block_newsletter form .input-wrapper input[type="email"]:focus-visible,
footer .block_newsletter form input[type="email"].form-control:focus,
footer .block_newsletter form input[type="email"].form-control:focus-visible{
  border-color: var(--lpj-primary) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}
footer .block_newsletter form .input-wrapper:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* Radios custom */
.custom-radio input[type="radio"]:checked + span{
  background-color: var(--lpj-primary);
  border-color: var(--lpj-primary);
}

/* Checkout : adresse sélectionnée */
body#checkout section.checkout-step .address-item.selected{
  border: 3px solid var(--lpj-primary);
}

/* ========= Panier : code promo ========= */
.block-promo .promo-input + button{
  border: 2px solid var(--lpj-primary);
}
.block-promo .promo-input + button:hover,
.block-promo .promo-input + button:focus{
  border-color: var(--lpj-primary-dark);
}
.block-promo .promo-code-button.cancel-promo{
  color: var(--lpj-primary);
}
.block-promo .promo-code-button.cancel-promo:hover,
.block-promo .promo-code-button.cancel-promo:focus{
  color: var(--lpj-primary-dark);
}

/* ========= TouchSpin ========= */
.bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default{
  background-color: var(--lpj-primary);
  border-color: var(--lpj-primary);
  color: #fff;
}
.bootstrap-touchspin .btn-touchspin:hover,
.group-span-filestyle .btn-default:hover{
  background-color: var(--lpj-primary-dark);
  border-color: var(--lpj-primary-dark);
}

/* ========= Cart modal ========= */
#blockcart-modal .product-name{
  color: var(--lpj-primary);
}

/* ========= Mon compte ========= */
.page-my-account #content .links a:hover i{
  color: var(--lpj-primary-dark);
}

/* ========= Wishlist ========= */
a.wishlist-list-item-link:hover .wishlist-list-item-title,
a.wishlist-list-item-link:focus .wishlist-list-item-title{
  color: var(--lpj-primary-dark) !important;
}
a.wishlist-list-item-link:hover,
a.wishlist-list-item-link:focus{
  color: var(--lpj-primary-dark) !important;
}
.wishlist-list-item:hover .wishlist-list-item-title{
  color: var(--lpj-primary-dark) !important;
}

/* ========= Réassurance ========= */
.blockreassurance .block-title{
  margin-bottom: 10px;
}

.blockreassurance{
	margin-bottom: 30px;
}

/* ========= Home – HERO ========= */
.hero-lpj{
  max-width: 1200px;
  margin: 16px auto 24px;
  padding: 20px 20px;
  text-align: center;
}
.hero-lpj h1{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.3;
  margin-bottom: 10px;
  color: #232323;
}
.hero-lpj p{
  max-width: 700px;
  margin: 0 auto 18px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
}
.hero-lpj .actions{
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-lpj .btn{
  display: inline-block;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hero-lpj .btn-primary-hero{
  background-color: var(--lpj-primary);
  color: #fff;
}
.hero-lpj .btn-primary-hero:hover{
  background-color: var(--lpj-primary-dark);
  color: #fff;
}
.hero-lpj .btn-secondary-hero{
  background-color: transparent;
  border-color: var(--lpj-primary);
  color: var(--lpj-primary);
}
.hero-lpj .btn-secondary-hero:hover{
  border-color: var(--lpj-primary-dark);
  color: var(--lpj-primary-dark);
}
@media (max-width: 576px){
  .hero-lpj{
    margin: 20px auto 30px;
    padding: 24px 16px;
  }
}

/* ========= Home – catégories (4 blocs) ========= */
.home-categories{
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 20px;
  text-align: left;
}
.home-categories h2{
  font-size: 1.5rem;
  margin-bottom: 14px;
  color: #232323;
  text-align: left;
}
.home-categories-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.home-category{
  display: block;
  padding: 20px 18px;
  border: 2px solid #eee;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  background-color: #fff;
}
.home-category:hover{
  border-color: var(--lpj-primary);
}
.home-category-title{
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #232323;
  margin-bottom: 6px;
}
.home-category-desc{
  display: block;
  font-size: 0.95rem;
  color: #666;
}
@media (max-width: 992px){
  .home-categories-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .home-categories-list{ grid-template-columns: 1fr; }
}

/* ========= Home – À propos (avec logo) ========= */
.about-lpj--with-logo{
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 28px 32px;

  display: flex;
  align-items: center;
  gap: 40px;

  background-color: #f8fafc;
  border-radius: 6px;
}

/* Texte */
.about-lpj-text{
  flex: 1;
}

.about-lpj-text h2{
  margin-bottom: 12px;
  font-size: 1.4rem;
  color: #232323;
}

.about-lpj-text p{
  margin-bottom: 12px;
  line-height: 1.6;
  color: #555;
}

.about-lpj-text p:last-of-type{
  margin-bottom: 0;
}

/* Lien */
.about-lpj-link{
  margin-top: 8px;
}

.about-lpj-link a{
  font-weight: 600;
  color: var(--lpj-primary);
}

.about-lpj-link a:hover{
  color: var(--lpj-primary-dark);
}

/* Logo Katia */
.about-lpj-logo{
  flex: 0 0 180px;
  text-align: center;
}

.about-lpj-logo img{
  width: 110px;     /* largeur FIXE */
  max-width: 110px;
  height: auto;
  opacity: 0.85;
  display: block;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px){
  .about-lpj--with-logo{
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 24px 20px;
  }

  .about-lpj-logo{
    flex: none;
    max-width: 160px;
  }
}

.block_newsletter{
  background-color: #f1f6fa;
  padding: 32px 20px;
  margin: 48px auto;
  border-radius: 6px;
}

.block_newsletter h3{
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #232323;
}

.block_newsletter p{
  color: #555;
  max-width: 600px;
  margin: 0 auto 16px;
}

.block_newsletter form{
  max-width: 500px;
  margin: 0 auto;
}

/* Footer : zone engagement (newsletter + réseaux) */
.lpj-footer-engagement{
  padding: 28px 0;
  background: #eef4f9;
}

/* Row : on étire les 2 colonnes à la même hauteur */
.lpj-footer-engagement > .container > .row{
  display: flex !important;
  align-items: stretch !important;
}

/* Les colonnes directes deviennent flex (sans casser le layout interne des modules) */
.lpj-footer-engagement > .container > .row > [class*="col-"]{
  display: flex !important;
}

/* Colonne newsletter : garde le layout “normal” mais centré verticalement */
.lpj-footer-engagement > .container > .row > [class*="col-"]:first-child{
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Colonne social : centrage vertical + horizontal */
.lpj-footer-engagement > .container > .row > [class*="col-"]:last-child{
  justify-content: center !important;  /* vertical */
  align-items: center !important;      /* horizontal */
}

/* Bloc social : pas de marges parasites */
.lpj-footer-engagement .block-social{
  width: auto !important;
  margin: 0 !important;
}

/* Liste des réseaux */
.lpj-footer-engagement .block-social ul{
  display: flex !important;
  gap: 60px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* IMPORTANT : retire tout fond carré potentiel au niveau LI */
.lpj-footer-engagement .block-social ul li,
.lpj-footer-engagement .block-social ul li:hover{
  background: transparent !important;
}

/* Boutons ronds */
.lpj-footer-engagement .block-social ul li a{
  width: 70px !important;
  height: 70px !important;
  border-radius: 999px !important;
  background: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-decoration: none !important;
  color: transparent !important; /* cache texte */
  font-size: 0 !important;
  line-height: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  border: 2px solid transparent !important;
  transition: transform .15s ease, border-color .15s ease !important;
}

/* Focus clavier : propre (pas de carré bleu) */
.lpj-footer-engagement .block-social ul li a:focus,
.lpj-footer-engagement .block-social ul li a:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Icône via mask SVG (remplie par background) */
.lpj-footer-engagement .block-social ul li a::before{
  content: "" !important;
  width: 40px;
  height: 40px;

  display: block;
  background: var(--lpj-primary);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Facebook icon */
.lpj-footer-engagement .block-social ul li.facebook a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.5V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.5V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
}

/* Instagram icon */
.lpj-footer-engagement .block-social ul li.instagram a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.5A5.5 5.5 0 1 1 6.5 14 5.5 5.5 0 0 1 12 8.5zm0 2A3.5 3.5 0 1 0 15.5 14 3.5 3.5 0 0 0 12 10.5zM18 6.8a1.2 1.2 0 1 1-1.2 1.2A1.2 1.2 0 0 1 18 6.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.5A5.5 5.5 0 1 1 6.5 14 5.5 5.5 0 0 1 12 8.5zm0 2A3.5 3.5 0 1 0 15.5 14 3.5 3.5 0 0 0 12 10.5zM18 6.8a1.2 1.2 0 1 1-1.2 1.2A1.2 1.2 0 0 1 18 6.8z'/%3E%3C/svg%3E");
}

/* Hover : léger + cohérent */
.lpj-footer-engagement .block-social ul li a:hover{
  transform: translateY(-1px) !important;
  border-color: var(--lpj-primary-dark) !important;
}
.lpj-footer-engagement .block-social ul li a:hover::before{
  background: var(--lpj-primary-dark) !important;
}