/* =========================================================
   PRESTASHOP CLASSIC - PERSONNALISATION "BLEU PISCINE"
   Fichier : /themes/classic/assets/css/custom.css
   ========================================================= */

/* 1) Palette */
:root{
  --bleu-piscine: #0ea5e9;
  --bleu-piscine-dark: #0284c7;
  --bleu-piscine-soft: #38bdf8;
  --bleu-piscine-light: #e0f7ff;

  --texte: #0b1220;
  --gris: #e5e7eb;
  --rayon: 12px;
}

/* 2) Liens (site entier) */
a{
  color: var(--bleu-piscine-dark);
  transition: color .2s ease, opacity .2s ease;
}
a:hover{
  color: var(--bleu-piscine);
}

/* 3) Header sticky + ombre légère */
#header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* 4) Barre du haut (compte/panier) */
.header-nav{
  background: var(--bleu-piscine-dark);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.header-nav a,
.header-nav .user-info a{
  color: #fff !important;
  opacity: .95;
}
.header-nav a:hover{
  opacity: 1;
}

/* 5) Menu principal */
#header .top-menu{
  background: var(--bleu-piscine);
  padding: 10px 0;
}
#header .top-menu a{
  color: #fff !important;
  font-weight: 700;
  position: relative;
  transition: all .25s ease;
}

/* Hover premium + soulignement animé */
#header .top-menu a:hover{
  color: var(--bleu-piscine-light) !important;
  transform: translateY(-1px);
}
#header .top-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#fff;
  transition: width .3s ease;
}
#header .top-menu a:hover::after{
  width:100%;
}

/* 6) Boutons (primaire) */
.btn-primary,
.btn-unstyle.btn-to-cart{ /* parfois utilisé sur certains blocs */
  background: var(--bleu-piscine) !important;
  border-color: var(--bleu-piscine) !important;
  border-radius: var(--rayon);
  transition: transform .15s ease, filter .2s ease;
}
.btn-primary:hover,
.btn-unstyle.btn-to-cart:hover{
  background: var(--bleu-piscine-dark) !important;
  border-color: var(--bleu-piscine-dark) !important;
  transform: translateY(-1px);
}

/* Boutons secondaires plus clean */
.btn-secondary{
  border-radius: var(--rayon);
}

/* 7) Champs / focus (inputs) */
.form-control:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: var(--bleu-piscine) !important;
  box-shadow: 0 0 0 .2rem rgba(14,165,233,0.20) !important;
}

/* 8) Barre de recherche */
#search_widget input.form-control{
  border-radius: var(--rayon);
}
#search_widget button{
  background: var(--bleu-piscine) !important;
  border-color: var(--bleu-piscine) !important;
  border-radius: var(--rayon);
}
#search_widget button:hover{
  background: var(--bleu-piscine-dark) !important;
  border-color: var(--bleu-piscine-dark) !important;
}

/* 9) Prix produit */
.product-price,
.current-price span{
  color: var(--bleu-piscine-dark) !important;
  font-weight: 800;
}

/* 10) Badges / flags (promo, nouveau, etc.) */
.product-flag,
.product-flags li{
  border-radius: 999px;
}
.product-flag.discount,
.product-flags li.discount{
  background: var(--bleu-piscine) !important;
}
.product-flag.new,
.product-flags li.new{
  background: var(--bleu-piscine-dark) !important;
}

/* 11) Pagination */
.pagination .current a,
.pagination .current span{
  background: var(--bleu-piscine) !important;
  border-color: var(--bleu-piscine) !important;
  color: #fff !important;
}
.pagination a:hover{
  border-color: var(--bleu-piscine) !important;
}

/* 12) Petits plus "premium" sur cartes produits (sans casser le thème) */
.product-miniature,
.card{
  border-radius: var(--rayon);
}
.product-miniature{
  transition: transform .15s ease, box-shadow .2s ease;
}
.product-miniature:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* 13) Footer liens (cohérence) */
#footer a{
  color: var(--bleu-piscine-dark);
}
#footer a:hover{
  color: var(--bleu-piscine);
}

/* 14) Sélection texte (détail sympa) */
::selection{
  background: var(--bleu-piscine);
  color: #fff;
}




/* Masquer le bloc info catégorie en haut de page */
.block-category{
  display:none !important;
}

/* Sous-catégories : grille moderne */
#subcategories{
  margin-top: 10px;
}

#subcategories ul{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:0;
  margin:0;
}

#subcategories ul li{
  list-style:none;
  float:none !important;
  width: calc(25% - 14px);  /* 4 colonnes */
}

@media (max-width: 992px){
  #subcategories ul li{ width: calc(33.333% - 14px); }
}
@media (max-width: 768px){
  #subcategories ul li{ width: calc(50% - 14px); }
}
@media (max-width: 480px){
  #subcategories ul li{ width: 100%; }
}

/* Carte */
#subcategories ul li .subcategory-image{
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
}

#subcategories ul li a{
  display:block;
  text-align:center;
  padding:10px;
}

/* Titre */
#subcategories ul li h5{
  margin:10px 0 0;
  font-weight:700;

}

/* Effet hover */
#subcategories ul li:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}






.product-miniature {
    transition: all 0.3s ease;
}

.product-miniature:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 123, 255, 0.6);
}



















/* =========================================================
   CENTRAGE MENU PRINCIPAL + SOUS-MENU (THEME CLASSIC)
   ========================================================= */

/* ===== MENU PRINCIPAL ===== */

#_desktop_top_menu{
  width:100%;
}

/* UL principal */
#_desktop_top_menu > ul#top-menu.top-menu[data-depth="0"]{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:18px;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  float:none !important;
}

/* LI du niveau 0 */
#_desktop_top_menu > ul#top-menu.top-menu[data-depth="0"] > li{
  float:none !important;
  margin:0;
  padding:0;
  display:flex;
}

/* liens du menu */
#_desktop_top_menu > ul#top-menu.top-menu[data-depth="0"] > li > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ===== SOUS-MENUS ===== */

/* Centre les listes internes */
#header .top-menu .top-menu[data-depth="1"],
#header .top-menu .top-menu[data-depth="2"]{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  width:100%;
  margin:0 auto;
  padding-left:0;
}

/* Nettoyage des li */
#header .top-menu .top-menu > li{
  margin:0;
  padding:0;
}

/* alignement des liens */
#header .top-menu .top-menu > li > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}