/**
 * Electropo — Catalogue CSS
 *
 * Styles du catalogue WooCommerce pour matcher EXACTEMENT electropo.fr (Next.js).
 * Desktop : sidebar 280px sticky + grid 3-4 colonnes.
 * Mobile  : drawer bottom-sheet + grid 2 colonnes.
 *
 * Référence couleurs extraites des TSX :
 *   --ep-navy       : #083E5E  (titres, legendes)
 *   --ep-cyan       : #08AAC5  (accents, checkboxes, hover)
 *   --ep-mid        : #5A7A8C  (labels secondaires)
 *   --ep-border     : #E4EDF2  (bordures légères)
 *   --ep-bg-light   : #F5F5F7  (bg images)
 *   --ep-text       : #1d1d1f  (texte principal)
 *   --ep-text-soft  : #6e6e73  (texte secondaire)
 *   --ep-red        : #E85E47  (prix en promo)
 *   --ep-green      : #25A96B  (en stock)
 *
 * Version 1.1.0 — 2026-09-01 (bump: padding mobile card corrigé + product-card-electropo.css séparé)
 */

/* ══════════════════════════════════════════════════════════════════════════
   VARIABLES COULEURS
══════════════════════════════════════════════════════════════════════════ */
:root {
  --ep-navy:      #083E5E;
  --ep-cyan:      #08AAC5;
  --ep-mid:       #5A7A8C;
  --ep-border:    #E4EDF2;
  --ep-bg-light:  #F5F5F7;
  --ep-text:      #1d1d1f;
  --ep-text-soft: #6e6e73;
  --ep-red:       #E85E47;
  --ep-green:     #25A96B;
  --ep-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --ep-radius-card: 12px;
  --ep-radius-xl:   16px;
  --ep-transition:  150ms ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════════════════════ */
.ep-catalogue-main {
  padding-bottom: 64px;
}

.ep-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.ep-catalogue-page {
  padding-top: 24px;
  padding-bottom: 48px;
}

/* Layout 2 colonnes desktop */
.ep-catalogue-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px 32px;
  align-items: start;
}

@media (max-width: 1023px) {
  .ep-catalogue-layout {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════════════════════════ */
.ep-breadcrumb {
  margin-bottom: 24px;
}

.ep-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--ep-mid);
}

.ep-breadcrumb__link {
  color: var(--ep-mid);
  text-decoration: none;
  transition: color var(--ep-transition);
}
.ep-breadcrumb__link:hover {
  color: var(--ep-navy);
}

.ep-breadcrumb__sep {
  color: var(--ep-border);
}

.ep-breadcrumb__current {
  font-weight: 600;
  color: var(--ep-navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER CATÉGORIE
══════════════════════════════════════════════════════════════════════════ */
.ep-cat-header {
  margin-bottom: 32px;
}

.ep-cat-title {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  color: var(--ep-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px 0;
}

.ep-cat-desc {
  font-size: 14px;
  color: var(--ep-text-soft);
  line-height: 1.65;
  max-width: 720px;
  margin: 0 0 8px 0;
}

.ep-cat-count-sub {
  font-size: 12px;
  color: var(--ep-mid);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   CATÉGORIES SOEURS
══════════════════════════════════════════════════════════════════════════ */
.ep-sibling-cats {
  margin-bottom: 24px;
}

.ep-sibling-cats__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ep-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.ep-sibling-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ep-sibling-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ep-navy);
  background: #EBF8FB;
  border: 1px solid #C7EBF3;
  text-decoration: none;
  transition: background var(--ep-transition), color var(--ep-transition);
}
.ep-sibling-chip:hover {
  background: var(--ep-cyan);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTER PILLS RAPIDES
══════════════════════════════════════════════════════════════════════════ */
.ep-filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.ep-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--ep-border);
  background: #fff;
  color: var(--ep-mid);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--ep-transition), color var(--ep-transition), background var(--ep-transition);
  cursor: pointer;
  white-space: nowrap;
}
.ep-filter-pill:hover {
  border-color: var(--ep-cyan);
  color: var(--ep-navy);
}
.ep-filter-pill--active {
  border-color: var(--ep-navy);
  background: var(--ep-navy);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR DESKTOP
══════════════════════════════════════════════════════════════════════════ */

/* Bouton mobile "Filtres" : caché sur desktop */
.ep-cat-filters-mobile-btn {
  display: none;
}

/* Sidebar : visible desktop, cachée mobile */
.ep-sidebar-desktop {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--ep-radius-xl);
  padding: 16px;
  position: sticky;
  top: 80px; /* sous le header sticky */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  box-shadow: var(--ep-shadow-sm);
}

/* Scrollbar légère dans la sidebar */
.ep-sidebar-desktop::-webkit-scrollbar { width: 4px; }
.ep-sidebar-desktop::-webkit-scrollbar-track { background: transparent; }
.ep-sidebar-desktop::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 2px; }

/* Formulaire sidebar */
.ep-sidebar-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Fieldsets */
.ep-sidebar-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px 0;
}
.ep-sidebar-fieldset--bordered {
  border-top: 1px solid var(--ep-border);
  padding-top: 16px;
}

/* Legend = label de section */
.ep-sidebar-legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ep-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* Liste de checkboxes (Marques, scroll interne) */
.ep-sidebar-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-sidebar-checks--scroll {
  max-height: 256px;
  overflow-y: auto;
  padding-right: 4px;
}
.ep-sidebar-checks--scroll::-webkit-scrollbar { width: 3px; }
.ep-sidebar-checks--scroll::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 2px; }

/* Catégories groupées */
.ep-sidebar-cat-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ep-sidebar-cat-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ep-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
}

/* Label checkbox */
.ep-sidebar-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ep-navy);
  cursor: pointer;
  line-height: 1.35;
  padding: 3px 0;
  min-width: 0;
}
.ep-sidebar-check-label span {
  flex: 1;
  min-width: 0;
  word-break: break-words;
}
.ep-sidebar-check-label--inline {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Checkbox */
.ep-checkbox {
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin-top: 2px;
  accent-color: var(--ep-cyan);
  cursor: pointer;
  flex-shrink: 0;
}
.ep-sidebar-check-label--inline .ep-checkbox {
  margin-top: 0;
}

/* Énergie row (wrap) */
.ep-sidebar-energy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

/* Prix inputs */
.ep-sidebar-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ep-sidebar-price-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ep-border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--ep-transition);
  background: #fff;
  color: var(--ep-text);
  box-sizing: border-box;
}
.ep-sidebar-price-input:focus {
  border-color: var(--ep-cyan);
  box-shadow: 0 0 0 3px rgba(8,170,197,0.15);
}
.ep-sidebar-price-sep {
  color: #94a3b8;
  font-size: 13px;
  flex-shrink: 0;
}

/* Boutons CTA sticky bas sidebar */
.ep-sidebar-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--ep-border);
  padding-top: 16px;
  margin: 0 -16px -16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}
.ep-btn-apply {
  flex: 1;
  background: var(--ep-navy);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--ep-transition);
  min-height: 44px;
}
.ep-btn-apply:hover {
  background: #052B40;
}
.ep-btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--ep-mid);
  border: 1px solid var(--ep-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ep-transition), border-color var(--ep-transition);
  min-height: 44px;
  white-space: nowrap;
}
.ep-btn-reset:hover {
  color: var(--ep-navy);
  border-color: var(--ep-navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUTON MOBILE "FILTRES"
══════════════════════════════════════════════════════════════════════════ */
.ep-btn-filters-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--ep-border);
  border-radius: var(--ep-radius-xl);
  background: #fff;
  color: var(--ep-navy);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--ep-transition);
  min-height: 44px;
}
.ep-btn-filters-trigger:hover {
  border-color: var(--ep-cyan);
}
.ep-btn-filters-trigger .ep-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ep-filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--ep-cyan);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DRAWER MOBILE (BOTTOM-SHEET STYLE SLIDE-LEFT)
══════════════════════════════════════════════════════════════════════════ */
.ep-drawer-overlay {
  display: none; /* caché par défaut — JS retire hidden et applique .ep-drawer--open */
  position: fixed;
  inset: 0;
  z-index: 500;
}
.ep-drawer-overlay:not([hidden]) {
  display: block;
}

.ep-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  animation: ep-fade-in 200ms ease;
}

.ep-drawer-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 85%;
  max-width: 380px;
  background: #fff;
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ep-slide-in-left 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

.ep-drawer-panel.ep-drawer--closing {
  animation: ep-slide-out-left 220ms ease forwards;
}

@keyframes ep-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ep-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes ep-slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.ep-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--ep-border);
  flex-shrink: 0;
}
.ep-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-navy);
}
.ep-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ep-mid);
  cursor: pointer;
  border-radius: 8px;
  transition: color var(--ep-transition), background var(--ep-transition);
}
.ep-drawer-close:hover {
  color: var(--ep-navy);
  background: var(--ep-bg-light);
}

.ep-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.ep-drawer-body::-webkit-scrollbar { width: 4px; }
.ep-drawer-body::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   SORT BAR (count + tri + pagination haut/bas)
══════════════════════════════════════════════════════════════════════════ */
.ep-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.ep-sort-bar--pagination-only {
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 8px;
}

.ep-sort-count {
  font-size: 14px;
  color: var(--ep-text-soft);
  margin: 0;
}
.ep-sort-count__num {
  font-weight: 600;
  color: var(--ep-text);
}

.ep-sort-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ep-sort-label {
  font-size: 14px;
  color: var(--ep-text-soft);
  white-space: nowrap;
}
.ep-sort-select {
  border: 1px solid #d2d2d7;
  border-radius: var(--ep-radius-xl);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ep-text);
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color var(--ep-transition);
}
.ep-sort-select:focus {
  border-color: var(--ep-cyan);
  box-shadow: 0 0 0 3px rgba(8,170,197,0.15);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════════════════ */
.ep-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ep-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ep-text);
  background: #fff;
  border: 1px solid var(--ep-border);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ep-transition), color var(--ep-transition), border-color var(--ep-transition);
  min-width: 36px;
  flex-shrink: 0;
}
.ep-page-btn:hover {
  background: var(--ep-bg-light);
  border-color: #d2d2d7;
}
.ep-page-btn--current {
  background: var(--ep-navy);
  color: #fff;
  border-color: var(--ep-navy);
  cursor: default;
}
.ep-page-btn--nav {
  border-color: var(--ep-border);
}
.ep-page-btn--disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.ep-page-icon {
  width: 16px;
  height: 16px;
}
.ep-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  color: var(--ep-text-soft);
  user-select: none;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRID PRODUITS
══════════════════════════════════════════════════════════════════════════ */
.ep-product-grid,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px !important;
  list-style: none !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

@media (min-width: 1280px) {
  .ep-product-grid,
  ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Reset WooCommerce float natif */
ul.products::before,
ul.products::after { display: none !important; }
ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════════════════════════════════════ */
.ep-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--ep-radius-card);
  background: #fff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--ep-transition), transform var(--ep-transition);
}
.ep-product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  transform: translateY(-1px);
}
.ep-product-card--out-of-stock {
  opacity: 0.75;
}

/* Badges absolus top-left */
.ep-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ep-badge--promo { background: var(--ep-red); color: #fff; }
.ep-badge--new   { background: var(--ep-cyan); color: #fff; }
.ep-badge--eco   { background: #25A96B; color: #fff; }
.ep-badge--soon  { background: #6e6e73; color: #fff; }

/* Badge énergie top-right */
.ep-card-energy-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.ep-energy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Image (padding-top trick = ratio 72%) */
.ep-card-image-link {
  display: block;
  text-decoration: none;
}
.ep-card-image-wrap {
  position: relative;
  background: var(--ep-bg-light);
  overflow: hidden;
  padding-top: 72%;
}
.ep-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  transition: transform 500ms ease;
}
.ep-product-card:hover .ep-card-image {
  transform: scale(1.06);
}
.ep-card-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-card-out-of-stock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.70);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-card-out-of-stock-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-text-soft);
  background: rgba(255,255,255,0.90);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d2d2d7;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* Corps de la card */
.ep-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  gap: 6px;
}

/* Brand */
.ep-card-brand {
  font-size: 10px;
  color: var(--ep-text-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
}

/* Titre */
.ep-card-title-link {
  text-decoration: none;
  display: block;
}
.ep-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ep-text);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--ep-transition);
}
.ep-card-title-link:hover .ep-card-title {
  color: var(--ep-cyan);
}

/* Rating étoiles */
.ep-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-stars {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}
.ep-star-wrap {
  position: relative;
  display: inline-block;
  color: #d2d2d7;
  overflow: hidden;
  width: 1em;
  height: 1em;
}
.ep-star-fill {
  position: absolute;
  left: 0;
  top: 0;
  color: #FABD00;
  overflow: hidden;
  white-space: nowrap;
}
.ep-star-empty {
  color: #d2d2d7;
}
.ep-card-rating-count {
  font-size: 11px;
  color: var(--ep-text-soft);
}
.ep-card-rating-spacer {
  height: 16px;
}

/* Specs */
.ep-card-specs {
  font-size: 11px;
  color: var(--ep-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Spacer flex */
.ep-card-spacer {
  flex: 1;
}

/* Prix */
.ep-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ep-card-price {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ep-text);
}
.ep-card-price--sale {
  color: var(--ep-red);
}
.ep-card-price-original {
  font-size: 12px;
  color: var(--ep-text-soft);
  text-decoration: line-through;
  line-height: 1;
}

/* Prix WooCommerce natif override */
.ep-product-card .price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ep-text) !important;
}
.ep-product-card .price del {
  font-size: 12px !important;
  color: var(--ep-text-soft) !important;
  opacity: 1 !important;
}
.ep-product-card .price ins {
  color: var(--ep-red) !important;
  text-decoration: none !important;
}

/* Stock */
.ep-card-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.ep-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ep-stock-dot--in   { background: var(--ep-green); }
.ep-stock-dot--out  { background: #EF4444; }
.ep-stock-dot--soon { background: var(--ep-text-soft); }
.ep-stock-label {
  font-size: 11px;
  font-weight: 500;
}
.ep-stock-label--in   { color: var(--ep-green); }
.ep-stock-label--out  { color: #EF4444; }
.ep-stock-label--soon { color: var(--ep-text-soft); }

/* Bouton Add to Cart */
.ep-card-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  margin-top: 8px;
  min-height: 44px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  transition: background var(--ep-transition), color var(--ep-transition), box-shadow var(--ep-transition);
  box-sizing: border-box;
}
/* btn-glass-dark (produits chauds) */
.ep-card-btn--dark {
  background: var(--ep-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(8,62,94,0.20);
}
.ep-card-btn--dark:hover {
  background: #052B40;
  color: #fff;
}
/* btn-snow (produits froids — climatiseurs) */
.ep-card-btn--snow {
  background: linear-gradient(180deg, #08AAC5 0%, #0694AC 60%, #057E93 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(8,170,197,0.25);
}
.ep-card-btn--snow:hover {
  background: linear-gradient(180deg, #0694AC 0%, #057E93 100%);
  color: #fff;
}
/* Bouton désactivé */
.ep-card-btn--disabled {
  background: var(--ep-bg-light);
  color: var(--ep-text-soft);
  cursor: not-allowed;
  opacity: 0.65;
}

/* État loading AJAX (spinner overlay sur le grid) */
.ep-catalogue-results--loading {
  position: relative;
}
.ep-catalogue-results--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.65);
  z-index: 20;
}
.ep-loading-spinner {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ep-border);
  border-top-color: var(--ep-cyan);
  border-radius: 50%;
  animation: ep-spin 600ms linear infinite;
}
@keyframes ep-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉTAT VIDE
══════════════════════════════════════════════════════════════════════════ */
.ep-empty-state {
  text-align: center;
  padding: 64px 20px;
}
.ep-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: var(--ep-border);
}
.ep-empty-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ep-text-soft);
  margin: 0 0 8px 0;
}
.ep-empty-tip {
  font-size: 14px;
  color: var(--ep-text-soft);
  margin: 0 0 20px 0;
}
.ep-btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--ep-navy);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--ep-transition);
}
.ep-btn-view-all:hover {
  background: #052B40;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉNERGIE — badges sidebar (couleurs EU)
══════════════════════════════════════════════════════════════════════════ */
.ep-energy-badge--apppp { background: #00A550; color: #fff; }
.ep-energy-badge--appp  { background: #3DB84B; color: #fff; }
.ep-energy-badge--app   { background: #7DC342; color: #fff; }
.ep-energy-badge--ap    { background: #B5D334; color: #1a1a1a; }
.ep-energy-badge--a     { background: #F5E800; color: #1a1a1a; }
.ep-energy-badge--b     { background: #FABD00; color: #1a1a1a; }
.ep-energy-badge--c     { background: #F28B00; color: #fff; }
.ep-energy-badge--d     { background: #EE5E25; color: #fff; }
.ep-energy-badge--e     { background: #E03020; color: #fff; }
.ep-energy-badge--f     { background: #C00020; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — max-width: 1023px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Afficher le bouton Filtres, masquer la sidebar desktop */
  .ep-cat-filters-mobile-btn {
    display: block;
    margin-bottom: 16px;
  }
  .ep-sidebar-desktop {
    display: none !important;
  }

  /* Pas de colonne sidebar dans le layout */
  .ep-catalogue-layout {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — max-width: 768px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grid 2 colonnes strictes sur mobile */
  .ep-product-grid,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Sort bar : empilé */
  .ep-sort-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .ep-sort-form {
    justify-content: space-between;
  }

  /* Filter pills : scroll horizontal */
  .ep-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ep-filter-pills::-webkit-scrollbar {
    display: none;
  }

  /* Pagination : boutons plus grands (touch) */
  .ep-page-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 15px;
  }
  .ep-pagination {
    gap: 6px;
    justify-content: center;
  }

  /* Card : image légèrement plus haute */
  .ep-card-image-wrap {
    padding-top: 80%;
  }
  .ep-card-image {
    padding: 8px;
  }
  /* padding réduit à 8px — les cards ~165px wide perdent sinon 32px en padding */
  .ep-card-body {
    padding: 8px;
    gap: 4px;
  }
  .ep-card-title {
    font-size: 12px;
    line-height: 1.3;
  }
  .ep-card-price {
    font-size: 15px;
  }
  .ep-card-btn {
    font-size: 11px;
    padding: 8px 10px;
    min-height: 40px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }

  /* Catégories soeurs : scroll horizontal */
  .ep-sibling-cats__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ep-sibling-cats__list::-webkit-scrollbar { display: none; }

  /* Spacing réduit */
  .ep-catalogue-page {
    padding-top: 16px;
    padding-bottom: 80px; /* bottom nav */
  }
  .ep-cat-title {
    font-size: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESET WC natif (éviter double CSS)
══════════════════════════════════════════════════════════════════════════ */
.ep-product-card .button,
.ep-product-card .added_to_cart {
  display: none !important; /* on utilise ep-card-btn à la place */
}

/* WooCommerce product loop wrapper */
.woocommerce .ep-product-grid {
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR #secondary STOREFRONT — masquée définitivement
   (renforcé par product-card-electropo.css avec !important)
══════════════════════════════════════════════════════════════════════════ */
#secondary,
.widget-area,
aside#secondary {
  display: none !important;
}

/* Le contenu principal prend toute la largeur */
#primary,
.site-main {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  float: none !important;
}

.storefront-two-column-right #primary,
.storefront-two-column-left #primary {
  width: 100% !important;
  float: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB — parent intermédiaire (sous-catégorie → parent → catalogue)
   Version 1.1.0 — 2026-09-01
══════════════════════════════════════════════════════════════════════════ */
.ep-breadcrumb__parent {
  color: var(--ep-mid);
  text-decoration: none;
  transition: color var(--ep-transition);
}
.ep-breadcrumb__parent:hover {
  color: var(--ep-navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   GRILLE DE CATÉGORIES (page /catalogue/ racine — is_shop())
   Version 1.1.0 — 2026-09-01
══════════════════════════════════════════════════════════════════════════ */
.ep-cat-grid-section {
  margin-top: 8px;
  margin-bottom: 48px;
}

.ep-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .ep-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .ep-cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card catégorie */
.ep-cat-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--ep-radius-card);
  background: #fff;
  border: 1px solid var(--ep-border);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow var(--ep-transition), transform var(--ep-transition);
  position: relative;
}
.ep-cat-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.ep-cat-card:hover .ep-cat-card__image {
  transform: scale(1.04);
}

/* Image wrapper — ratio 60% */
.ep-cat-card__image-wrap {
  position: relative;
  padding-top: 60%;
  background: var(--ep-bg-light);
  overflow: hidden;
}
.ep-cat-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 400ms ease;
}
.ep-cat-card__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ep-border);
}

/* Corps de la card catégorie */
.ep-cat-card__body {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 6px;
  flex: 1;
}

.ep-cat-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ep-navy);
  margin: 0;
  line-height: 1.3;
}

.ep-cat-card__count {
  font-size: 12px;
  color: var(--ep-text-soft);
  margin: 0;
}

/* Liste de sous-catégories dans la card */
.ep-cat-card__subcats {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ep-cat-card__subcat-item {
  font-size: 11px;
  color: var(--ep-mid);
  background: #EBF8FB;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
}
.ep-cat-card__subcat-item--more {
  background: var(--ep-bg-light);
  color: var(--ep-text-soft);
}

/* Flèche CTA en bas à droite */
.ep-cat-card__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
  color: var(--ep-cyan);
  transition: transform var(--ep-transition);
}
.ep-cat-card:hover .ep-cat-card__cta {
  transform: translateX(4px);
}

/* Mobile : image moins haute */
@media (max-width: 640px) {
  .ep-cat-card__image-wrap {
    padding-top: 55%;
  }
  .ep-cat-card__body {
    padding: 12px;
    gap: 4px;
  }
  .ep-cat-card__name {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIPS SOUS-CATÉGORIES (page catégorie avec enfants — is_product_category())
   Version 1.1.0 — 2026-09-01
══════════════════════════════════════════════════════════════════════════ */
.ep-subcat-chips {
  margin-bottom: 24px;
}

.ep-subcat-chips__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ep-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px 0;
}

.ep-subcat-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chip sous-catégorie */
.ep-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ep-navy);
  background: #fff;
  border: 1.5px solid var(--ep-border);
  text-decoration: none;
  transition: background var(--ep-transition), color var(--ep-transition), border-color var(--ep-transition), box-shadow var(--ep-transition);
  white-space: nowrap;
}
.ep-subcat-chip:hover {
  background: var(--ep-navy);
  color: #fff;
  border-color: var(--ep-navy);
  box-shadow: 0 2px 8px rgba(8,62,94,0.20);
}

/* Compteur produits dans le chip */
.ep-subcat-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--ep-bg-light);
  color: var(--ep-text-soft);
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
  transition: background var(--ep-transition), color var(--ep-transition);
}
.ep-subcat-chip:hover .ep-subcat-chip__count {
  background: rgba(255,255,255,0.20);
  color: #fff;
}

/* Mobile : scroll horizontal si nombreuses sous-catégories */
@media (max-width: 768px) {
  .ep-subcat-chips__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ep-subcat-chips__list::-webkit-scrollbar {
    display: none;
  }
  .ep-subcat-chip {
    font-size: 12px;
    padding: 7px 12px;
    flex-shrink: 0;
  }
}