/* assets/css/custom.css */
:root{
    --epa-red:#dd0b14;
    --epa-white:#f5f5f5;
    --epa-dark: var(--bs-dark, #121417);
    --epa-muted:#a9b1b8;
  }
.nav .nav-link { color: var(--epa-white) !important; }
.nav .nav-link:hover,
.nav .nav-link:focus { color: var(--epa-red) !important; }

/* Bouton panier en cohérence charte */
.btn-outline-light:hover { background-color: var(--epa-red); border-color: var(--epa-red); color: var(--epa-white); }

/* Form search lisible en dark */
.search-form .form-control { background:#121212; border-color:#2a2a2a; color:#fff; }
.search-form .form-control::placeholder { color:#bfbfbf; }


/* Taille d’affichage du logo (WP ajoute class="custom-logo" sur l'img) */
.custom-logo {
  max-height: 42px;     /* taille header mobile */
  height: auto !important;
  width: auto;
}

/* Par défaut, masquer les pills (on révèle selon breakpoint) */
.epa-cat-scroller .epa-cat-pill { display: none !important; }

/* Mobile (xs–md) : afficher uniquement les 3 premières marquées .show-mob */
@media (max-width: 767.98px){
  .epa-cat-scroller .epa-cat-pill.show-mob { display: inline-flex !important; }
}

@media (min-width: 768px) {
  .custom-logo { max-height: 48px; }  /* un peu plus grand sur desktop */
.epa-cat-scroller .epa-cat-pill.show-desk { display: inline-flex !important; }

}

/* Alignement propre dans la barre */
.custom-logo-link { 
  display: inline-flex; 
  align-items: center; 
  gap: .5rem; 
  line-height: 1; 
}

/* Si tu veux que le logo ne “déforme” jamais */
.custom-logo { 
  object-fit: contain; 
}

/* Optionnel : rendre le bouton panier cohérent au survol */
.btn-outline-light:hover {
  background-color: #dd0b14; 
  border-color: #dd0b14; 
  color: #f5f5f5;
}



/* 🌙 Skins dark pour le formulaire de recherche */
.epa-search {
  background-color: #212529 !important; /* équivalent bg-dark Bootstrap */
  border: 1px solid rgba(255,255,255,0.4)!important; /* équivalent border-light */
  border-radius: .5rem !important; /* arrondi */
}

.epa-search .form-control::placeholder { 
  color: rgba(255,255,255,0.5) !important; 
}

.epa-search .form-control,
.epa-search .input-group-text,
.epa-search .btn {
  color: #f5f5f5 !important;
  background-color: transparent !important;
  border: none !important;
}

.epa-search .form-control:focus {
  box-shadow: none !important;
  outline: 0 !important;
  color: #fff !important;
}

.epa-search:focus-within {
  border-color: #f8f9fa !important; /* border-light encore plus visible au focus */
}

.epa-search .btn:hover,
.epa-search .btn:focus {
  background-color: rgba(255,255,255,0.15) !important;
}



/*Menu catégories*/
/* Menu catégories — ruban centré sans flèches */
.epa-cat-bar {
  border: 0 !important;            /* enlève tout "hr/border" bas/haut */
}

/* Ruban horizontal des catégories */
.epa-cat-scroller {
  display: flex !important;
  justify-content: center !important;         /* centre les pills si ça ne dépasse pas */
  gap: .5rem !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important; 
  white-space: nowrap !important;
}

/* Pills catégories — bordure moins blanche */
.epa-cat-pill {
  max-width: 220px !important;
  border-color: rgba(255,255,255,0.22) !important; /* ↓ atténuation du blanc */
  background-color: #212529 !important;        /* bg-dark */
  color: #f5f5f5 !important;
}
.epa-cat-pill:hover,
.epa-cat-pill:focus {
  border-color: rgba(255,255,255,0.35) !important;
  background-color: #1b1f22 !important;
  color: #ffffff !important;
}

/* (Optionnel) masquer discrètement la scrollbar horizontale sur desktop */
@media (min-width: 992px) {
  .epa-cat-scroller { scrollbar-width: thin; }
  .epa-cat-scroller::-webkit-scrollbar { height: 6px; }
  .epa-cat-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
}

/* Mode sombre cohérent Offcanvas */
.offcanvas.text-bg-dark .accordion-button { box-shadow: none; }
.offcanvas.text-bg-dark .accordion-button:not(.collapsed) {
  color: #fff; background-color: rgba(255,255,255,0.05) !important;
}

.epa-shop{background:var(--epa-dark); color:var(--epa-white);}
  .epa-shop a{color:var(--epa-white); text-decoration:none}
  .epa-shop a:hover{opacity:.9}
  .epa-hero{
    background:
      radial-gradient(900px 500px at 100% -20%, rgba(221,11,20,.25), transparent 60%),
      linear-gradient(180deg, #0b0d10, #111317);
    padding: clamp(2.2rem, 3.5vw, 3.5rem) 0;
  }
  .epa-hero h1{font-weight:800; letter-spacing:.2px}
  .muted{color:var(--epa-muted)}
  .epa-section{padding: clamp(2rem, 4vw, 3rem) 0}
  .epa-aside{
    position: sticky; top: 1.25rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px; padding:1rem;
  }
  .form-control{ background:#0f1215; border:1px solid rgba(255,255,255,.12); color:#fff; }
  .form-control::placeholder{color:#8f98a1}
  .btn-epa{ background:var(--epa-red); border:none; color:#fff }
  .btn-epa:hover{ filter:brightness(1.05) }
  .epa-cat-list{
    background:#0f1215; border:1px solid rgba(255,255,255,.12);
    border-radius:12px; max-height:260px; overflow:auto; padding:.5rem .75rem;
    display:none;
  }
  .epa-cat-list.show{ display:block; }
  .epa-cat-item{ display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
  .epa-cat-item input{ accent-color: var(--epa-red); }

  /* Progressbars + sliders prix */
  .progress{height: 8px; background:#0f1215; border:1px solid rgba(255,255,255,.12)}
  .progress + .progress{ margin-top: .35rem; }
  .progress .progress-bar{ background: var(--epa-red); }
  .range-stack{ position:relative; margin-top:.5rem; }
  .range-stack .form-range{ position:relative; z-index:1; background:transparent; }
  .range-stack .form-range.top{ position:absolute; left:0; right:0; top:0; z-index:2; }
  .form-range::-webkit-slider-thumb{ background:#fff; border:2px solid var(--epa-red); width:18px; height:18px; -webkit-appearance:none; border-radius:50%; }
  .form-range::-moz-range-thumb{ background:#fff; border:2px solid var(--epa-red); width:18px; height:18px; border-radius:50%; }

  /* Grille produits */
  .epa-grid .epa-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px; padding:1rem; height:100%;
    display:flex; flex-direction:column; gap:.6rem;
  }
  .epa-thumb{ aspect-ratio:1/1; background:#0e1114; border-radius:12px; display:grid; place-items:center; overflow:hidden; }
  .epa-thumb img{ width:100%; height:100%; object-fit:contain }
  .epa-name{ font-weight:600; line-height:1.25; min-height:2.4em }
  .epa-price{ font-weight:800 }
  .epa-meta{ display:flex; gap:.5rem; align-items:center; color:var(--epa-muted); font-size:.9rem }

  /* ===== Bouton Ajouter au panier – rouge transparent + pill ===== */
  .epa-atc-wrap .add_to_cart_button,
  .epa-atc-wrap .single_add_to_cart_button,
  .epa-atc-wrap .button.product_type_simple {
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; padding:.55rem .9rem;
    border-radius:9999px;
    border:1px solid rgba(221,11,20,.55);
    background:rgba(221,11,20,.40);
    color:#fff; text-decoration:none; font-weight:700;
    transition:transform .08s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
    box-shadow:0 6px 14px rgba(221,11,20,.20);
  }
  .epa-atc-wrap .add_to_cart_button:hover{
    background:rgba(221,11,20,.55);
    border-color:rgba(221,11,20,.70);
    filter:brightness(1.04);
    transform:translateY(-1px);
  }
  .epa-atc-wrap .add_to_cart_button.epa-loading{
    pointer-events:none; opacity:.9; position:relative;
  }
  .epa-atc-wrap .add_to_cart_button.epa-loading:after{
    content:""; width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.7); border-top-color:transparent;
    display:inline-block; animation:epaSpin .8s linear infinite; margin-left:.25rem;
  }
  @keyframes epaSpin { to { transform:rotate(360deg); } }
  .epa-atc-wrap .epa-view-cart{
    background:transparent !important;
    border-color:rgba(255,255,255,.5);
    color:#fff !important;
    box-shadow:none;
  }
  .epa-atc-wrap .epa-view-cart:hover{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.75);
  }
  /* Masque le petit lien "Voir le panier" auto de Woo */
  .epa-atc-wrap .added_to_cart.wc-forward{ display:none !important; }

  /* Pagination Bootstrap dark améliorée */
  .pagination{ margin-top:1rem }
  .pagination .page-item .page-link{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    color:var(--epa-white);
  }
  .pagination .page-item .page-link:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.2);
    color:#fff;
  }
  .pagination .page-item.disabled .page-link{ opacity:.5; pointer-events:none; }
  .pagination .page-item.active .page-link{
    background:var(--epa-red); border-color:var(--epa-red); color:#fff;
  }
  
  /*footer*/
  /* Logo du footer */
footer .custom-logo{ max-height:80px; width:auto; height:auto; }

/* Menu footer amélioré */
.epa-footer-menu .menu-item > a{
  color:#d1d5db;
  padding:4px 0;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
}
.epa-footer-menu .menu-item > a::before{
  content:"›";
  display:inline-block;
  transform:translateY(-1px);
  opacity:.5;
}
.epa-footer-menu .menu-item > a:hover{ color:#fff; text-decoration:underline; }

/* Sous-niveau (si présent) */
.epa-footer-menu .sub-menu{
  margin:4px 0 8px 14px;
  padding-left:10px;
  border-left:1px dashed rgba(255,255,255,.15);
}
.epa-footer-menu .sub-menu a{ font-size: .95em; opacity:.9 }

/* Liste contact (icônes alignées) */
.epa-contact i{ width:18px; text-align:center; line-height:1.1; }