/**
 * Electropo Design System — Apple-style
 * Ported from Next.js src/app/globals.css + AdminSidebar.tsx
 * Scope : sélecteurs préfixés .electropo-* pour zéro conflit Storefront.
 *
 * @package Electropo
 * @since   2026-08-30
 */

/* ══════════════════════════════════════════
   PALETTE CSS VARS
═══════════════════════════════════════════ */
:root {
  --ep-navy:        #0A1628;
  --ep-navy-dark:   #052B40;
  --ep-navy-light:  #0A4E72;
  --ep-cyan:        #08AAC5;
  --ep-cyan-dark:   #069AB3;
  --ep-cyan-light:  #24C3D0;
  --ep-coral:       #FF7058;
  --ep-gray-text:   #3C3C43;
  --ep-gray-mid:    #8E8E93;
  --ep-gray-light:  #F2F2F7;
  --ep-gray-bg:     #F5F5F7;
  --ep-white:       #ffffff;
  --ep-dark:        #1D1D1F;
  --ep-border:      #d2d2d7;
  --ep-green:       #34C759;
  --ep-amber:       #FF9500;
  --ep-red:         #FF3B30;

  --ep-shadow-card:     0 2px 12px rgba(8,62,94,0.08);
  --ep-shadow-hover:    0 8px 32px rgba(8,62,94,0.16), 0 2px 8px rgba(8,62,94,0.08);
  --ep-shadow-dropdown: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);

  --ep-radius-btn:   8px;
  --ep-radius-card:  12px;
  --ep-radius-badge: 20px;

  --ep-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;

  /* Spring animation (Apple bounce) */
  --ep-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ep-ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════
   BASE SAFETY NET
═══════════════════════════════════════════ */
.electropo-btn,
.electropo-btn-primary,
.electropo-btn-secondary,
.electropo-btn-ghost,
.electropo-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ep-font);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--ep-radius-btn);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 20px;
  transition: all 0.4s var(--ep-spring);
  box-sizing: border-box;
}

/* ══════════════════════════════════════════
   BOUTON CTA — Fond cyan
═══════════════════════════════════════════ */
.electropo-btn-primary {
  background: var(--ep-cyan);
  color: var(--ep-white);
  box-shadow: 0 2px 8px rgba(8,170,197,0.30);
}
.electropo-btn-primary:hover,
.electropo-btn-primary:focus-visible {
  background: var(--ep-cyan-dark);
  color: var(--ep-white);
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 6px 20px rgba(8,170,197,0.45);
  text-decoration: none;
}
.electropo-btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(8,170,197,0.20);
}

/* ══════════════════════════════════════════
   BOUTON SECONDAIRE — Bord cyan, fond blanc
═══════════════════════════════════════════ */
.electropo-btn-secondary {
  background: var(--ep-white);
  color: var(--ep-navy);
  border: 1.5px solid var(--ep-cyan);
  box-shadow: 0 1px 4px rgba(8,62,94,0.06);
}
.electropo-btn-secondary:hover,
.electropo-btn-secondary:focus-visible {
  background: rgba(8,170,197,0.06);
  color: var(--ep-cyan-dark);
  border-color: var(--ep-cyan-dark);
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 4px 14px rgba(8,170,197,0.20);
  text-decoration: none;
}
.electropo-btn-secondary:active {
  transform: scale(0.97);
}

/* ══════════════════════════════════════════
   BOUTON GHOST — transparent
═══════════════════════════════════════════ */
.electropo-btn-ghost {
  background: transparent;
  color: var(--ep-cyan);
  border: none;
  padding: 8px 14px;
}
.electropo-btn-ghost:hover {
  background: rgba(8,170,197,0.08);
  text-decoration: none;
}

/* ══════════════════════════════════════════
   BOUTON DANGER — rouge
═══════════════════════════════════════════ */
.electropo-btn-danger {
  background: rgba(255,59,48,0.10);
  color: var(--ep-red);
  border: none;
}
.electropo-btn-danger:hover {
  background: rgba(255,59,48,0.18);
  text-decoration: none;
}

/* Taille SM */
.electropo-btn-sm {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
}
/* Taille LG */
.electropo-btn-lg {
  font-size: 16px;
  padding: 13px 28px;
  border-radius: 10px;
}

/* ══════════════════════════════════════════
   HOVER SPRING ANIMATION (icônes / cards)
═══════════════════════════════════════════ */
.electropo-hover-spring {
  transition: transform 0.4s var(--ep-spring), box-shadow 0.4s var(--ep-spring);
}
.electropo-hover-spring:hover {
  transform: scale(1.12) translateY(-1.5px);
}

/* ══════════════════════════════════════════
   BADGE STATUS
═══════════════════════════════════════════ */
.electropo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--ep-radius-badge);
  white-space: nowrap;
  font-family: var(--ep-font);
}
.electropo-badge-green  { background: rgba(52,199,89,0.12);  color: #248A3D; }
.electropo-badge-cyan   { background: rgba(8,170,197,0.10);  color: #0A7A8C; }
.electropo-badge-amber  { background: rgba(255,149,0,0.12);  color: #B25000; }
.electropo-badge-red    { background: rgba(255,59,48,0.10);  color: #C0392B; }
.electropo-badge-blue   { background: rgba(0,122,255,0.10);  color: #0058CC; }
.electropo-badge-purple { background: rgba(175,82,222,0.10); color: #6B2F8A; }
.electropo-badge-gray   { background: rgba(142,142,147,0.12);color: #48484A; }

/* ══════════════════════════════════════════
   CARD
═══════════════════════════════════════════ */
.electropo-card {
  background: var(--ep-white);
  border-radius: var(--ep-radius-card);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: var(--ep-shadow-card);
  transition: box-shadow 0.3s var(--ep-ease), transform 0.3s var(--ep-ease);
}
.electropo-card:hover {
  box-shadow: var(--ep-shadow-hover);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   SPLIT BUTTON PDF
═══════════════════════════════════════════ */
.electropo-split-btn-wrap {
  position: relative;
  display: inline-flex;
}

.electropo-split-btn-group {
  display: inline-flex;
  border-radius: var(--ep-radius-btn);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  overflow: visible;
}

.electropo-split-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #E8F8FB;
  color: var(--ep-cyan);
  border: 1px solid var(--ep-cyan);
  border-right: none;
  border-radius: var(--ep-radius-btn) 0 0 var(--ep-radius-btn);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.electropo-split-btn-main:hover {
  background: rgba(8,170,197,0.15);
}

.electropo-split-btn-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 28px;
  background: #E8F8FB;
  color: var(--ep-cyan);
  border: 1px solid var(--ep-cyan);
  border-radius: 0 var(--ep-radius-btn) var(--ep-radius-btn) 0;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.electropo-split-btn-caret[aria-expanded="true"] {
  background: var(--ep-cyan);
  color: var(--ep-white);
}

.electropo-split-btn-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--ep-white);
  border-radius: 12px;
  box-shadow: var(--ep-shadow-dropdown);
  border: 1px solid rgba(0,0,0,0.08);
  min-width: 148px;
  z-index: 9999;
  overflow: hidden;
  padding: 4px;
  animation: electropoDropIn 0.18s var(--ep-ease) both;
}

@keyframes electropoDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.electropo-split-btn-dropdown[hidden] {
  display: none;
}

.electropo-split-btn-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ep-dark);
  text-decoration: none;
  font-family: var(--ep-font);
  transition: background 0.12s;
}
.electropo-split-btn-lang:hover {
  background: #F2FBFD;
  text-decoration: none;
}
.electropo-split-btn-lang-flag {
  font-size: 16px;
  line-height: 1;
}
.electropo-split-btn-lang-check {
  margin-left: auto;
  font-size: 10px;
  color: var(--ep-cyan);
  font-weight: 700;
}

/* ══════════════════════════════════════════
   SIDEBAR ADMIN — LIQUID GLASS SILVER
═══════════════════════════════════════════ */
.electropo-sidebar {
  display: none;
  flex-direction: column;
  background: #DFF0FA;
  border-right: 1px solid rgba(0,90,160,0.10);
  transition: width 0.22s var(--ep-ease);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .electropo-sidebar { display: flex; }
}

.electropo-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  margin-bottom: 2px;
  text-decoration: none;
  position: relative;
  transition: background 0.18s var(--ep-ease);
}
.electropo-sidebar-nav-item:hover {
  background: rgba(0,90,160,0.07);
  text-decoration: none;
}
.electropo-sidebar-nav-item.is-active {
  background: rgba(0,90,160,0.10);
}

/* Icon box — liquid glass */
.electropo-nav-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(195,215,232,0.52);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.90),
    inset 0 -1.5px 0 rgba(0,50,100,0.08),
    0 3px 7px rgba(0,50,90,0.14),
    0 1px 2px rgba(0,30,80,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s var(--ep-ease),
    border-color 0.18s var(--ep-ease),
    box-shadow 0.18s var(--ep-ease),
    transform 0.22s var(--ep-spring),
    filter 0.18s var(--ep-ease);
}
.electropo-sidebar-nav-item.is-active .electropo-nav-icon-box {
  background: rgba(248,253,255,0.90);
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,60,120,0.10),
    0 4px 10px rgba(0,55,110,0.20),
    0 1px 3px rgba(0,40,90,0.12);
}
.electropo-sidebar-nav-item:hover .electropo-nav-icon-box {
  background: rgba(250,254,255,0.92);
  border-color: rgba(255,255,255,0.96);
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,60,120,0.08),
    0 6px 18px rgba(0,55,110,0.22),
    0 2px 5px rgba(0,40,90,0.14);
  transform: scale(1.12) translateY(-1.5px);
  filter: drop-shadow(0 3px 5px rgba(0,40,100,0.20));
}

.electropo-nav-icon {
  width: 19px;
  height: 19px;
  display: block;
  filter: drop-shadow(0 1.5px 2.5px rgba(0,0,0,0.30)) drop-shadow(0 -0.5px 0.5px rgba(255,255,255,0.50));
}

/* Active indicator bar */
.electropo-sidebar-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--ep-cyan);
}

/* ══════════════════════════════════════════
   TOP BAR FROSTED GLASS (mobile)
═══════════════════════════════════════════ */
.electropo-topbar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: 52px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--ep-font);
}
@media (min-width: 769px) {
  .electropo-topbar { display: none; }
}
/* Front page: topbar hidden (hero is the top anchor) */
.electropo-topbar--hidden,
.electropo-topbar[hidden] {
  display: none !important;
}

.electropo-topbar__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ep-dark);
  letter-spacing: -0.3px;
}

.electropo-topbar__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ep-cyan);
  text-decoration: none;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.electropo-topbar__btn:hover {
  background: rgba(8,170,197,0.10);
}

/* ══════════════════════════════════════════
   BOTTOM NAV iOS (mobile)
═══════════════════════════════════════════ */
.electropo-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: 64px;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,0.07);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--ep-font);
}
@media (min-width: 769px) {
  .electropo-bottomnav { display: none; }
}

.electropo-bottomnav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--ep-gray-mid);
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.electropo-bottomnav__tab:hover { text-decoration: none; }
.electropo-bottomnav__tab:active { opacity: 0.6; }
.electropo-bottomnav__tab.is-active { color: var(--ep-cyan); }

.electropo-bottomnav__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: inherit;
}

/* === LEGAL PAGES 2026-08-30 === */

/* ── Container ── */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ep-gray-text, #3C3C43);
}

/* ── H1 ── */
.legal-page .legal-header h1,
.legal-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--ep-navy, #0A1628);
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

/* ── Date mise à jour ── */
.legal-page .legal-updated {
  font-size: 0.85rem;
  color: var(--ep-gray-mid, #8E8E93);
  margin: 0 0 40px;
}

/* ── H2 (sections) ── */
.legal-page h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ep-cyan, #08AAC5);
  margin: 40px 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ep-cyan, #08AAC5);
  line-height: 1.3;
}

/* ── H3 (sous-sections) ── */
.legal-page h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ep-navy, #0A1628);
  margin: 28px 0 8px;
}

/* ── Paragraphes ── */
.legal-page p {
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 18px;
}

/* ── Listes ── */
.legal-page ul,
.legal-page ol {
  padding-left: 1.5rem;
  margin: 0 0 18px;
}
.legal-page li {
  line-height: 1.7;
  margin-bottom: 6px;
}

/* ── Sommaire / TOC ── */
.legal-toc {
  background: var(--ep-gray-light, #F2F2F7);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 48px;
}
.legal-toc h2 {
  font-size: 1rem;
  color: var(--ep-navy, #0A1628);
  border-bottom: none;
  margin: 0 0 14px;
  padding-bottom: 0;
}
.legal-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  counter-reset: toc-counter;
  list-style: none;
}
.legal-toc ol li {
  counter-increment: toc-counter;
  margin-bottom: 8px;
}
.legal-toc ol li::before {
  content: counter(toc-counter) ". ";
  color: var(--ep-cyan, #08AAC5);
  font-weight: 600;
}
.legal-toc a {
  color: var(--ep-navy-light, #0A4E72);
  text-decoration: none;
  font-size: 0.925rem;
}
.legal-toc a:hover {
  color: var(--ep-cyan, #08AAC5);
  text-decoration: underline;
}

/* ── Sections ── */
.legal-section {
  scroll-margin-top: 80px;
}

/* ── Footer de page ── */
.legal-footer {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--ep-border, #d2d2d7);
  font-size: 0.9rem;
  color: var(--ep-gray-mid, #8E8E93);
}
.legal-footer a {
  color: var(--ep-cyan, #08AAC5);
}

/* ── Tables dans les pages légales ── */
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 0.9rem;
}
.legal-page table th {
  background: var(--ep-navy, #0A1628);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}
.legal-page table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ep-border, #d2d2d7);
  vertical-align: top;
}
.legal-page table tr:nth-child(even) td {
  background: var(--ep-gray-light, #F2F2F7);
}

/* ── Callout (encadré info) ── */
.legal-callout {
  background: #E8F8FB;
  border-left: 4px solid var(--ep-cyan, #08AAC5);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ── Responsive mobile ── */
@media (max-width: 600px) {
  .legal-page {
    padding: 24px 16px 60px;
  }
  .legal-page h1 {
    font-size: 1.5rem;
  }
  .legal-toc {
    padding: 18px 16px;
  }
  .legal-page table {
    font-size: 0.8rem;
  }
  .legal-page table th,
  .legal-page table td {
    padding: 8px 10px;
  }
}

/* Sheet overlay */
.electropo-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.40);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
}
.electropo-sheet-overlay.is-open {
  display: block;
}

.electropo-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ep-white);
  border-radius: 20px 20px 0 0;
  padding: 0 0 max(env(safe-area-inset-bottom, 0px), 16px);
  box-shadow: 0 -4px 40px rgba(0,0,0,0.15);
}

.electropo-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}
.electropo-sheet__handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.12);
}

.electropo-sheet__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ep-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 12px;
  padding-left: 4px;
}

.electropo-sheet__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--ep-dark);
  font-weight: 600;
  font-size: 15px;
  font-family: var(--ep-font);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.electropo-sheet__row:hover { background: rgba(0,0,0,0.02); text-decoration: none; }
.electropo-sheet__row:last-child { border-bottom: none; }

.electropo-sheet__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.electropo-sheet__chevron {
  margin-left: auto;
  color: #C7C7CC;
}

/* ══════════════════════════════════════════
   ADMIN TABLE / PAGE HEADERS (portage)
═══════════════════════════════════════════ */
.electropo-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ep-dark);
  letter-spacing: -0.5px;
  line-height: 1.2;
  font-family: var(--ep-font);
}
.electropo-page-subtitle {
  font-size: 13px;
  color: var(--ep-gray-mid);
  margin-top: 2px;
  font-family: var(--ep-font);
}

/* ══════════════════════════════════════════
   FOCUS VISIBLE — accessibility
═══════════════════════════════════════════ */
.electropo-btn:focus-visible,
.electropo-btn-primary:focus-visible,
.electropo-btn-secondary:focus-visible,
.electropo-bottomnav__tab:focus-visible,
.electropo-split-btn-caret:focus-visible,
.electropo-split-btn-main:focus-visible {
  outline: 2px solid var(--ep-cyan);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes electropoFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   CAROUSEL NAV ARROWS (< >)
   Matches prod electropo.fr cyan round buttons.
═══════════════════════════════════════════ */
.product-scroll-wrap {
  position: relative !important;
}

/* Homepage carousels: EXACTLY 5 cards visible per row × 2 ROWS stacked,
   scrolled horizontally. Keeps grid-auto-flow: column but forces 2 rows
   so the nav arrows sit at the vertical midpoint between the two rows.
   Formula: (100% - (N-1) * gap) / N */
.product-scroll[data-scroll-rows="2"] {
  grid-template-rows: 1fr 1fr !important; /* 2 rows for arrow centering */
  grid-auto-columns: calc((100% - 4 * 16px) / 5) !important; /* 5 cards visible */
}
.product-scroll[data-scroll-rows="1"] {
  grid-template-rows: 1fr !important; /* 1 row when <= 5 products */
  grid-auto-columns: calc((100% - 4 * 16px) / 5) !important; /* 5 cards visible max */
}
@media (max-width: 1279px) {
  .product-scroll { grid-auto-columns: calc((100% - 3 * 16px) / 4) !important; } /* 4 cards */
}
@media (max-width: 1023px) {
  .product-scroll { grid-auto-columns: calc((100% - 2 * 16px) / 3) !important; } /* 3 cards */
}
@media (max-width: 767px) {
  .product-scroll { grid-auto-columns: calc((100% - 1 * 12px) / 2) !important; gap: 12px !important; } /* 2 cards */
}
@media (max-width: 479px) {
  .product-scroll { grid-auto-columns: 85% !important; gap: 12px !important; } /* 1 card + preview next */
}

.product-scroll-wrap > .product-scroll-nav,
.product-scroll-nav {
  position: absolute !important;
  /* top set dynamically by carousel.js — midpoint between the 2 rows */
  transform: translateY(-50%);
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background: #08AAC5;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(8, 170, 197, 0.35),
              0 2px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              opacity 0.2s ease,
              background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.product-scroll-nav:hover {
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 6px 20px rgba(8, 170, 197, 0.55),
              0 2px 6px rgba(0, 0, 0, 0.12);
  background: #069AB3;
}

.product-scroll-nav:active {
  transform: translateY(-50%) scale(0.96);
}

/* Buttons positioned FAR OUTSIDE the product cards (in the side gutter),
   shifted ~10% outward. Never overlay cards on desktop. Clamped so they
   don't get clipped by the viewport edge on ultra-wide layouts. */
.product-scroll-nav--prev {
  left: clamp(-60px, -5%, -18px) !important;
}
.product-scroll-nav--next {
  right: clamp(-60px, -5%, -18px) !important;
}

/* Medium desktop / laptop: fixed 60px outside so they stay in the gutter */
@media (max-width: 1279px) {
  .product-scroll-nav--prev { left: -60px !important; }
  .product-scroll-nav--next { right: -60px !important; }
}

/* Tablet: 40px outside (smaller gutter but still clear of cards) */
@media (max-width: 1023px) {
  .product-scroll-nav--prev { left: -32px !important; }
  .product-scroll-nav--next { right: -32px !important; }
}

/* Mobile: no gutter available → buttons sit at very edge with a small
   inward padding to avoid touching cards, semi-transparent for legibility */
@media (max-width: 767px) {
  .product-scroll-nav--prev { left: -18px !important; }
  .product-scroll-nav--next { right: -18px !important; }
}

/* On mobile: buttons stay visible but smaller & pulled inside the wrap edge
   with a semi-transparent background so cards remain readable behind them. */
@media (max-width: 767px) {
  .product-scroll-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
    background: rgba(8, 170, 197, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .product-scroll-nav--prev { left: 6px; }
  .product-scroll-nav--next { right: 6px; }
  .product-scroll-nav:hover {
    transform: translateY(-50%) scale(1.08);
    background: rgba(6, 154, 179, 0.98);
  }
}
.electropo-fade-in { animation: electropoFadeIn 0.3s var(--ep-ease) both; }

/* === RESPONSIVE FIXES 2026-08-30 === */

/* 1. Tap targets >= 44x44px sur mobile (WCAG 2.5.5 / Google accessibility) */
@media (max-width: 767px) {
  .header-action-link, .btn-icon-mobile, .electropo-topbar__btn,
  a.btn.btn-sm, .site-nav-burger, .btn-menu-mobile,
  .add_to_cart_button, .product-card__add {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  a.site-logo, .site-logo { min-height: 44px !important; }
}

/* 2. Empecher debordement horizontal global */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
* { box-sizing: border-box !important; }

/* SAFE height: auto — SKIP images with explicit width+height attrs (logo, etc.)
   The [width][height] selector matches only <img width="X" height="Y"> tags
   whose intrinsic ratio must be preserved. */
img:not([width]):not([height]), video { height: auto !important; }

/* HARD CONSTRAINT on the header + footer logo — never let it grow beyond
   its intended box regardless of parent CSS. */
.site-logo__img,
.site-footer__logo-img,
img.site-logo__img {
  width: auto !important;
  max-width: 160px !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
}
@media (max-width: 767px) {
  .site-logo__img,
  .site-footer__logo-img,
  img.site-logo__img {
    max-width: 130px !important;
    max-height: 34px !important;
  }
}

/* 3. Sidebar filtres -> drawer sur mobile */
@media (max-width: 767px) {
  .catalog-sidebar {
    position: fixed !important;
    top: 0; left: -100%;
    height: 100vh; width: 85%; max-width: 320px;
    background: #fff; z-index: 999;
    padding: 20px !important;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .catalog-sidebar.is-open { left: 0; }
  .catalog-sidebar__toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; background: #08AAC5; color: #fff;
    border: none; border-radius: 8px; margin-bottom: 12px;
    min-height: 44px; cursor: pointer;
  }
  .catalog-layout { display: block !important; }
}
@media (min-width: 768px) {
  .catalog-sidebar__toggle { display: none; }
}

/* 4. Nav dark -> burger mobile */
@media (max-width: 767px) {
  .site-nav-dark ul { display: none; }
  .site-nav-dark.is-open ul {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #3E3E3A; padding: 12px;
    z-index: 100;
  }
  .site-nav-burger {
    display: block !important; padding: 10px;
    background: transparent; border: none;
    color: #fff; font-size: 20px;
    min-width: 44px; min-height: 44px;
  }
}
@media (min-width: 768px) {
  .site-nav-burger { display: none !important; }
}

/* 5. Cards produit lisibles sur mobile */
@media (max-width: 479px) {
  .product-card { padding: 12px !important; }
  .product-card__title { font-size: 13px !important; line-height: 1.3 !important; }
  .product-card__price { font-size: 16px !important; font-weight: 700 !important; }
  .product-card__specs { font-size: 11px !important; }
  .product-card__add { padding: 8px 12px !important; font-size: 13px !important; }
}

/* === LEGAL PAGES 2026-08-30 === */
.legal-page { max-width: 780px; margin: 40px auto 80px; padding: 0 20px; font-family: var(--ep-font, -apple-system, sans-serif); }
.legal-page h1 { font-size: 32px; color: var(--ep-navy, #0A1628); margin: 0 0 8px; font-weight: 700; }
.legal-page .legal-updated { color: var(--ep-gray-mid, #8E8E93); font-size: 13px; margin: 0 0 32px; }
.legal-page .legal-toc { background: var(--ep-gray-light, #F5F5F7); padding: 20px 24px; border-radius: 12px; margin: 0 0 40px; }
.legal-page .legal-toc h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ep-gray-mid, #8E8E93); margin: 0 0 12px; border: none; padding: 0; }
.legal-page .legal-toc ol { margin: 0; padding: 0 0 0 24px; }
.legal-page .legal-toc li { margin: 4px 0; }
.legal-page .legal-toc a { color: var(--ep-cyan, #08AAC5); text-decoration: none; }
.legal-page .legal-toc a:hover { text-decoration: underline; }
.legal-page .legal-section { margin: 40px 0; }
.legal-page .legal-section h2 { font-size: 22px; color: var(--ep-cyan, #08AAC5); border-bottom: 2px solid var(--ep-cyan, #08AAC5); padding: 0 0 8px; margin: 0 0 16px; }
.legal-page .legal-section h3 { font-size: 17px; color: var(--ep-navy, #0A1628); margin: 24px 0 8px; }
.legal-page .legal-section p, .legal-page .legal-section li { line-height: 1.7; color: var(--ep-gray-text, #3C3C43); font-size: 15px; }
.legal-page .legal-section ul, .legal-page .legal-section ol { padding-left: 24px; margin: 12px 0; }
.legal-page .legal-footer { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--ep-border, #d2d2d7); font-size: 13px; color: var(--ep-gray-mid, #8E8E93); }
@media (max-width: 767px) {
  .legal-page { margin: 24px auto 48px; }
  .legal-page h1 { font-size: 26px; }
  .legal-page .legal-section h2 { font-size: 19px; }
  .legal-page .legal-toc { padding: 16px 20px; }
}


/* === FOOTER READABILITY 2026-08-30 ===
   Fond footer = #000. Textes actuels #86868b = contraste 4:1 (sous WCAG 4.5:1).
   Override en gris clair pour meilleure lisibilité + titres blancs bold. */
.site-footer { color: #E5E7EB !important; }
.site-footer__title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 14px !important;
}
.site-footer__list a,
.site-footer a {
  color: #D1D5DB !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.site-footer__list a:hover,
.site-footer a:hover {
  color: var(--ep-cyan, #08AAC5) !important;
  text-decoration: none !important;
}
.site-footer__desc,
.site-footer__email,
.site-footer__contact-link,
.site-footer address,
.site-footer p {
  color: #D1D5DB !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.site-footer__company-name { color: #FFFFFF !important; font-weight: 700 !important; }
.site-footer__payment-label { color: #FFFFFF !important; font-weight: 600 !important; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  color: #B0BEC5 !important;
}
.site-footer__bottom-inner,
.site-footer__bottom-inner p,
.site-footer__bottom-inner a { color: #B0BEC5 !important; font-size: 13px !important; }

/* === SINGLE PRODUCT REFONTE 2026-08-31 === */
.product-badge-energy {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.product-stock {
  font-size: 0.9rem;
  color: #22c55e;
  margin: 4px 0 12px;
  font-weight: 500;
}
.product-stock.out-of-stock { color: #ef4444; }
.product-short-desc {
  color: #4b5563;
  line-height: 1.6;
  margin: 16px 0;
}
.product-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.95rem;
}
.product-specs tr:nth-child(even) { background: #f9fafb; }
.product-specs th, .product-specs td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.product-specs th {
  font-weight: 500;
  color: #6b7280;
  width: 40%;
}
.product-specs tr:last-child th,
.product-specs tr:last-child td { border-bottom: none; }
.product-reassurance {
  list-style: none;
  padding: 12px 0;
  margin: 16px 0 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #059669;
  border-top: 1px solid #f3f4f6;
}
.product-reassurance li { display: flex; align-items: center; gap: 6px; }
.product-meta { margin-top: 12px; font-size: 0.85rem; color: #6b7280; }
.product-sku { margin: 4px 0; }
.product-bottom-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin: 48px 0;
  padding-top: 32px;
  border-top: 1px solid #e5e7eb;
}
@media (max-width: 768px) {
  .product-bottom-grid { grid-template-columns: 1fr; gap: 24px; }
  .product-reassurance { flex-direction: column; gap: 8px; }
}
.product-description-full h2.section__title {
  font-size: 1.5rem;
  color: #083E5E;
  margin-bottom: 16px;
}
.product-description-full p { margin: 0 0 16px; line-height: 1.7; color: #374151; }
.product-key-info {
  background: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  height: fit-content;
}
.product-key-info h3 {
  font-size: 1.1rem;
  color: #083E5E;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.product-key-info ul { list-style: none; padding: 0; margin: 0; }
.product-key-info li { padding: 6px 0; font-size: 0.9rem; color: #374151; }
.product-key-info li strong { color: #6b7280; font-weight: 500; margin-right: 6px; }