/* ================================================================
   Deplace depuis app/views/product.php (12/09/2026) — CSS inchange, ordre conserve.
   ================================================================ */
/* ============================================================
   FICHE PRODUIT — Layout 2 colonnes V1-fidèle, charte A4 V2
   (étape 3A PATCH3 vue produit, refacto charte A4 du 01/05/2026)
   À consolider dans /assets/css/product.css en fin de migration.
   ============================================================ */

.ep-product-page {
  max-width: var(--ep-max-width, 1280px);
  margin: 0 auto;
  padding: 32px;
}
.ep-product-breadcrumb {
  font-size: 13px;
  color: var(--ep-text-muted, #6B6B6B);
  margin-bottom: 20px;
}
.ep-product-breadcrumb a {
  color: var(--ep-text, #1A1A1A);
  text-decoration: none;
}
.ep-product-breadcrumb a:hover { text-decoration: underline; }

/* ── Fil d'Ariane (12/09/2026 : <nav><ol>, chemin categorie) ── */
.ep-product-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ep-product-breadcrumb li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--ep-text-subtle, #999999); }
.ep-product-breadcrumb li[aria-current] { color: var(--ep-text, #1A1A1A); }

/* ── Ligne d'identite sous le H1 ─────────────────────────── */
.ep-product-identity {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  font-size: 13px; color: var(--ep-text-muted, #6B6B6B); margin: 0 0 6px;
}
.ep-product-identity span + span::before { content: "·"; margin: 0 8px; color: var(--ep-text-subtle, #999999); }
.ep-product-identity b { font-weight: 600; color: var(--ep-text, #1A1A1A); }
.ep-product-identity a { color: var(--ep-text, #1A1A1A); text-decoration: underline; }

/* ── Tableau Caracteristiques ─────────────────────────────── */
.ep-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.ep-specs th, .ep-specs td { padding: 7px 0; border-bottom: 1px solid var(--ep-border-soft, #F0F0F0); text-align: left; vertical-align: top; }
.ep-specs tr:last-child th, .ep-specs tr:last-child td { border-bottom: 0; }
.ep-specs th { width: 200px; font-weight: 400; color: var(--ep-text-muted, #6B6B6B); padding-right: 16px; }
.ep-specs td { color: var(--ep-text, #1A1A1A); font-weight: 500; }
.ep-specs code { font-family: 'Courier New', monospace; font-size: 14px; }
.ep-specs a { color: var(--ep-text, #1A1A1A); }
.ep-specs td.ep-cat-chips { display: flex; }
@media (max-width: 600px) { .ep-specs th { width: 120px; } }

/* ── Onglets ──────────────────────────────────────────────── */
.ep-tablist { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ep-border, #E5E5E5); margin: -6px 0 16px; }
.ep-tab {
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ep-text-muted, #6B6B6B);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; margin-bottom: -1px; cursor: pointer;
}
.ep-tab:hover { color: var(--ep-text, #1A1A1A); }
.ep-tab.is-on { color: var(--ep-text, #1A1A1A); font-weight: 700; border-bottom-color: var(--ep-gold, #C9A24A); }
.ep-tab:focus-visible { outline: 2px solid var(--ep-gold, #C9A24A); outline-offset: -2px; }
.ep-tabpanel { display: none; }
.ep-tabpanel.is-on { display: block; }
.ep-tab-intro { font-size: 13px; color: var(--ep-text-muted, #6B6B6B); margin: 0 0 10px; }
.ep-compat-family { margin-bottom: 12px; }
.ep-compat-family.hidden { display: none; }
.ep-compat-family-name { font-size: 12px; color: var(--ep-text-muted, #6B6B6B); margin-bottom: 6px; }
.ep-kits-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ep-kits-table th { font-weight: 400; font-size: 12px; color: var(--ep-text-muted, #6B6B6B); text-align: left; padding: 4px 0; border-bottom: 1px solid var(--ep-border, #E5E5E5); }
.ep-kits-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--ep-border-soft, #F0F0F0); }
.ep-kits-table a { color: var(--ep-text, #1A1A1A); font-weight: 600; text-decoration: none; }
.ep-kits-table a:hover { text-decoration: underline; }
.ep-kits-cta { text-align: right; white-space: nowrap; }
.ep-kit-discount { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--ep-gold, #C9A24A); color: var(--ep-text, #1A1A1A); font-weight: 700; font-size: 11px; }
.ep-shipping-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; }
.ep-shipping-list a { color: var(--ep-text, #1A1A1A); text-decoration: underline; }
@media (max-width: 700px) { .ep-shipping-list { grid-template-columns: 1fr; } }

/* ── Onglet Qui sommes-nous ───────────────────────────────── */
.ep-about { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ep-about-nophoto { grid-template-columns: 1fr; }
.ep-about-photos { display: grid; gap: 10px; }
.ep-about-photos img { width: 100%; height: auto; border-radius: var(--ep-radius-md, 8px); border: 1px solid var(--ep-border, #E5E5E5); display: block; }
.ep-about-facts { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 8px; }
.ep-about-facts li { padding-left: 18px; position: relative; }
.ep-about-facts li::before { content: "●"; position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--ep-gold, #C9A24A); }
.ep-about-more { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; }
.ep-about-more a { color: var(--ep-text, #1A1A1A); font-weight: 600; text-decoration: underline; }
@media (max-width: 700px) { .ep-about { grid-template-columns: 1fr; } .ep-about-photos { grid-template-columns: 1fr 1fr; } }

/* ── Buybox : arguments de service ────────────────────────── */
.ep-buy-service { list-style: none; margin: 0 0 12px; padding: 12px 0 0; border-top: 1px solid var(--ep-border-soft, #F0F0F0); font-size: 13px; color: var(--ep-text-muted, #6B6B6B); display: grid; gap: 4px; }
.ep-buy-service a { color: var(--ep-text, #1A1A1A); font-weight: 600; text-decoration: none; }

/* ── Disclaimer en bas de fiche ───────────────────────────── */
.ep-product-disclaimer-bottom { font-size: 12px; color: var(--ep-text-subtle, #999999); border-top: 1px solid var(--ep-border, #E5E5E5); margin: 24px 0 0; padding: 12px 0 0; line-height: 1.5; }
.ep-product-disclaimer-bottom a { color: var(--ep-text-muted, #6B6B6B); text-decoration: underline; }

/* ── Bandeau disclaimer "spécialiste indépendant" (CSS conserve, bloc retire du haut le 12/09/2026) ── */
.ep-product-disclaimer {
  font-size: 12px;
  color: var(--ep-text-muted, #6B6B6B);
  background: var(--ep-bg-soft, #FAFAFA);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-md, 8px);
  padding: 10px 14px;
  margin-bottom: 20px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ep-product-disclaimer-icon {
  flex-shrink: 0;
  color: var(--ep-text-muted, #6B6B6B);
  font-size: 14px;
  line-height: 1.4;
}
.ep-product-disclaimer-text { flex: 1; }
.ep-product-disclaimer a {
  color: var(--ep-text, #1A1A1A);
  text-decoration: underline;
  white-space: nowrap;
}
.ep-product-disclaimer a:hover { text-decoration: none; }

/* ── Layout desktop : galerie + buybox 50/50 en haut, détails pleine largeur dessous ── */
/* PATCH 06/08/2026 — suppression du double H1.
   AVANT : le bloc .ep-product-head etait ecrit DEUX FOIS dans le HTML
   (une fois enfant direct de la grille, une fois dans .ep-product-details),
   et le CSS en masquait un selon le breakpoint. Google ne voit pas le CSS
   comme un utilisateur : il lisait DEUX balises H1 identiques, deux paragraphes de
   reference et deux description_short sur chaque fiche.
   APRES : un seul bloc, enfant direct de la grille, place par
   grid-template-areas aux deux breakpoints. Rendu visuel identique. */
.ep-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head    head"
    "gallery buybox"
    "details details";
  gap: 32px;
  align-items: stretch;
}
.ep-product-gallery { grid-area: gallery; display: flex; flex-direction: column; }
.ep-product-right   { grid-area: buybox; display: flex; }
.ep-product-details { grid-area: details; min-width: 0; }
.ep-product-head    { grid-area: head; }

/* Desktop : l'espacement sous le head est desormais assure par le gap de
   la grille (32px). On neutralise le margin-bottom pour ne pas cumuler.
   Ecart avec l'ancien rendu : 32px au lieu de 16px entre le H1 et la
   premiere section — aligne sur le rythme 32px du reste de la grille.
   Pour retrouver l'espacement d'origine au pixel pres : mettre -16px. */
@media (min-width: 901px) {
  .ep-product-grid > .ep-product-head { margin-bottom: 0; }
}

@media (max-width: 900px) {
  .ep-product-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "buybox"
      "gallery"
      "details";
    gap: 16px;
  }
}

/* ── Photo ─────────────────────────────────────────────────── */
.ep-product-photo-wrap {
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-lg, 10px);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ep-product-photo-main {
  width: 100%;
  flex: 1;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ep-bg-soft, #FAFAFA);
  overflow: hidden;
}
.ep-product-photo-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 12px;
  cursor: zoom-in;
  transition: transform var(--ep-tr-fast, 0.15s ease);
}
@media (hover: hover) and (pointer: fine) {
  .ep-product-photo-main:hover img { transform: scale(1.03); }
}
.ep-product-photo-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ep-border-soft, #F0F0F0);
  flex-wrap: wrap;
}
.ep-product-photo-thumb {
  width: 64px;
  height: 64px;
  border: 2px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius, 6px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--ep-tr-fast, 0.15s ease);
  flex-shrink: 0;
  background: var(--ep-white, #FFFFFF);
}
.ep-product-photo-thumb:hover,
.ep-product-photo-thumb.active {
  border-color: var(--ep-text, #1A1A1A);
}
.ep-product-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* Lightbox avec zoom interactif + navigation */
.ep-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ep-lightbox.open { display: flex; }
.ep-lightbox-stage {
  position: relative;
  width: 92vw;
  height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: manipulation;
}
.ep-lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--ep-radius-sm, 4px);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 0.18s ease;
  will-change: transform;
}
.ep-lightbox-stage.is-zoomed img { cursor: zoom-out; transition: none; }
.ep-lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  color: var(--ep-white, #FFFFFF);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  background: none;
  border: 0;
  padding: 0;
}
.ep-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--ep-white, #FFFFFF);
  background: rgba(0,0,0,0.35);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background var(--ep-tr-fast, 0.15s ease);
}
.ep-lightbox-nav:hover { background: rgba(0,0,0,0.6); }
.ep-lightbox-prev { left: 20px; }
.ep-lightbox-next { right: 20px; }
.ep-lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ep-white, #FFFFFF);
  font-size: 13px;
  letter-spacing: 1px;
  background: rgba(0,0,0,0.4);
  padding: 4px 12px;
  border-radius: 999px;
}
.ep-lightbox-hint {
  position: absolute;
  bottom: 18px;
  right: 26px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}
@media (max-width: 600px) {
  .ep-lightbox-hint { display: none; }
  .ep-lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
}

/* ── Infos head ────────────────────────────────────────────── */
.ep-product-head { margin-bottom: 16px; }
.ep-product-ref {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--ep-text-muted, #6B6B6B);
  margin-bottom: 8px;
}
.ep-product-h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ep-text, #1A1A1A);
  margin-bottom: 16px;
  line-height: 1.3;
}
.ep-product-short {
  font-size: 14px;
  color: var(--ep-text, #1A1A1A);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Buybox droite ─────────────────────────────────────────── */
.ep-buy-box {
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-lg, 10px);
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Aligne le bas de la carte sur le bas du cadre photo :
   on pousse le bloc d'action (qty + boutons) vers le bas. */
.ep-buybox-qty-row { margin-top: auto; }
/* Cas sans prix (Nous contacter) : pas de qty-row, on pousse le bouton renseignement. */
.ep-buy-stock.nous_contacter ~ .ep-buybox-ask-info { margin-top: auto; }
@media (max-width: 900px) {
  .ep-buy-box { position: static; }
}
.ep-buy-ref {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--ep-text-muted, #6B6B6B);
  margin-bottom: 6px;
}
.ep-buy-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ep-text, #1A1A1A);
  margin-bottom: 20px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* ─── Prix : bascule HT / TTC (10/08/2026) ──────────────────
   Les DEUX montants sont toujours dans le HTML. La classe posee sur
   .ep-buy-prices decide lequel est en gros. Le basculement est donc
   purement CSS : instantane, aucune requete, compatible cache.
   flex + order permet d'inverser l'ordre visuel sans toucher au DOM,
   ce qui garde un ordre de lecture stable pour les crawlers. */
.ep-buy-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
/* Ligne en position PRINCIPALE */
.px-ttc .ep-buy-line-ttc,
.px-ht  .ep-buy-line-ht {
  order: 1;
  font-size: 30px;
  font-weight: 700;
  color: var(--ep-text, #1A1A1A);
  line-height: 1.1;
  margin: 0;
}
.px-ttc .ep-buy-line-ttc small,
.px-ht  .ep-buy-line-ht small {
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-text, #1A1A1A);
}
/* Ligne en position SECONDAIRE.
   Retouche 10/08 : 12px etait trop discret. 80% de l'activite est
   B2B, les pros doivent pouvoir lire le HT sans le chercher — sans
   pour autant concurrencer les 30px de la ligne principale. */
.px-ttc .ep-buy-line-ht,
.px-ht  .ep-buy-line-ttc {
  order: 2;
  font-size: 14px;
  font-weight: 600;
  color: #4A4A4A;
  line-height: 1.4;
  margin: 0;
}
.px-ttc .ep-buy-line-ht small,
.px-ht  .ep-buy-line-ttc small {
  font-size: 13px;
  font-weight: 600;
  color: #4A4A4A;
}
/* Note "(TVA 20% France)" : information contextuelle, pas un montant.
   Elle etait au meme niveau visuel que le suffixe TTC et captait
   l'oeil avant le prix. Passee en gris clair, taille reduite, sur
   les DEUX positions (principale et secondaire). */
.ep-buy-vat-note,
.px-ttc .ep-buy-line-ttc .ep-buy-vat-note,
.px-ht  .ep-buy-line-ttc .ep-buy-vat-note {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ep-text-subtle, #999999);
  white-space: nowrap;
  margin-left: 2px;
}
/* Le "environ" ne s'affiche que sur la ligne SECONDAIRE : en position
   principale, pour un particulier France, le TTC est un prix ferme. */
.ep-buy-approx { display: none; }
.px-ht .ep-buy-line-ttc .ep-buy-approx { display: inline; }

/* Export TVA 0% : pas de TTC a montrer, donc pas de bascule. */
.ep-buy-prices.is-export .ep-buy-line-ttc { display: none; }
.ep-buy-prices.is-export .ep-buy-line-ht {
  order: 1;
  font-size: 30px;
  font-weight: 700;
  color: var(--ep-text, #1A1A1A);
  line-height: 1.1;
  margin: 0;
}
.ep-buy-prices.is-export .ep-buy-line-ht small {
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-text, #1A1A1A);
}
.ep-buy-export-note {
  font-size: 12px;
  color: var(--ep-text-muted, #6B6B6B);
  margin: 2px 0 8px;
}
.ep-buy-vat-select { font-size: 12px; margin-bottom: 18px; }
.ep-buy-vat-select form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ep-buy-vat-select label { color: var(--ep-text-muted, #6B6B6B); }
.ep-buy-vat-select select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-sm, 4px);
  background: var(--ep-white, #FFFFFF);
  cursor: pointer;
  font-family: inherit;
}

/* États stock — palette charte A4 §13 (badges arrondis) */
.ep-buy-stock {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: var(--ep-radius-md, 8px);
}
.ep-buy-stock.en_stock {
  color: var(--ep-green-dark, #006633);
  background: var(--ep-green-light, #EAF3DE);
  border: 1px solid var(--ep-green-light, #EAF3DE);
}
.ep-buy-stock.sur_commande {
  color: var(--ep-orange-dark, #854F0B);
  background: var(--ep-orange-light, #FAEEDA);
  border: 1px solid var(--ep-orange-light, #FAEEDA);
}
.ep-buy-stock.nous_contacter {
  color: var(--ep-text-muted, #6B6B6B);
  background: var(--ep-bg-section, #F5F5F5);
  border: 1px solid var(--ep-border, #E5E5E5);
}
.ep-buy-stock-detail {
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.4;
}

.ep-buy-price-na {
  font-size: 16px;
  color: var(--ep-text-muted, #6B6B6B);
  font-weight: 600;
  margin-bottom: 18px;
}

/* CTA — "Demander un renseignement" = bouton secondaire noir charte A4 §13 ligne 754 */
.ep-btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--ep-black, #000000);
  color: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-black, #000000);
  border-radius: var(--ep-radius-md, 8px);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--ep-tr-fast, 0.15s ease);
  margin-bottom: 10px;
  text-decoration: none;
  display: block;
  text-align: center;
}
.ep-btn-primary:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: var(--ep-white, #FFFFFF);
}
.ep-btn-secondary {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--ep-text, #1A1A1A);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-md, 8px);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--ep-tr-fast, 0.15s ease);
  text-decoration: none;
  display: block;
  text-align: center;
}
.ep-btn-secondary:hover {
  border-color: var(--ep-text, #1A1A1A);
  color: var(--ep-text, #1A1A1A);
}

/* ── L2 panier — Bouton Ajouter au panier (icône + label) ────── */
.ep-buybox-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ep-buybox-qty-label {
  font-size: 12px;
  color: var(--ep-text-muted, #6B6B6B);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  min-width: 36px;
}
.ep-buybox-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-md, 8px);
  background: var(--ep-white, #FFFFFF);
  overflow: hidden;
  height: 40px;
}
.ep-buybox-qty-btn {
  width: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: var(--ep-text, #1A1A1A);
  font-family: inherit;
  padding: 0;
  user-select: none;
  transition: background var(--ep-tr-fast, 0.15s ease);
}
.ep-buybox-qty-btn:hover {
  background: var(--ep-bg-soft, #f5f3ee);
}
.ep-buybox-qty-btn:active {
  background: var(--ep-border, #E5E5E5);
}
.ep-buybox-qty-btn:disabled {
  color: var(--ep-text-muted, #6B6B6B);
  cursor: not-allowed;
  opacity: 0.4;
}
.ep-buybox-qty-input {
  width: 56px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--ep-border, #E5E5E5);
  border-right: 1px solid var(--ep-border, #E5E5E5);
  font-size: 15px;
  font-weight: 600;
  color: var(--ep-text, #1A1A1A);
  font-family: inherit;
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ep-buybox-qty-input:focus {
  outline: none;
  background: var(--ep-bg-soft, #f5f3ee);
}
/* Hide native number arrows */
.ep-buybox-qty-input::-webkit-outer-spin-button,
.ep-buybox-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Note de stock dynamique sous le sélecteur qty */
.ep-buybox-stock-note {
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px 0;
  padding: 8px 12px;
  border-radius: var(--ep-radius-md, 8px);
  background: #fff8e1;
  color: #854f0b;
  border: 1px solid #f0c97a;
}
.ep-buybox-stock-note strong { font-weight: 700; }
.ep-buybox-stock-note.is-info {
  background: #e8f4fd;
  color: #0c5582;
  border-color: #a8d4f0;
}

.ep-buybox-add-cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ep-gold, #C9A24A);
  color: var(--ep-text, #1A1A1A);
  border-color: var(--ep-gold, #C9A24A);
  font-weight: 700;
}
.ep-buybox-add-cart:hover {
  background: var(--ep-gold-dark, #A8842F);
  border-color: var(--ep-gold-dark, #A8842F);
  color: var(--ep-text, #1A1A1A);
}
.ep-buybox-add-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ep-buybox-add-cart.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.ep-buybox-add-cart:disabled {
  cursor: wait;
}
.ep-buybox-added-msg {
  margin: 0 0 10px 0;
  padding: 10px 14px;
  background: #d4edda;
  color: #155724;
  border-radius: var(--ep-radius-md, 8px);
  font-size: 13px;
  text-align: center;
  display: none;
  border: 1px solid #b8dabf;
}
.ep-buybox-added-msg.is-visible { display: block; }
.ep-buybox-added-msg a {
  color: #155724;
  font-weight: 700;
  text-decoration: underline;
}
.ep-buybox-ask-info { margin-top: 0; }

/* ── Sections ──────────────────────────────────────────────── */
.ep-product-section {
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-lg, 10px);
  padding: 20px;
  margin-bottom: 16px;
}
.ep-product-section h2,
.ep-product-section h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ep-text-muted, #6B6B6B);
  margin-bottom: 14px;
}
.ep-product-description {
  font-size: 14px;
  color: var(--ep-text, #1A1A1A);
  line-height: 1.7;
}

/* ── Bloc Référence constructeur ──────────────────────────── */
.ep-ref-list {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 24px;
  font-size: 14px;
  align-items: baseline;
}
@media (max-width: 600px) {
  .ep-ref-list { grid-template-columns: 1fr; gap: 4px; }
  .ep-ref-list .ep-ref-label {
    color: var(--ep-text-muted, #6B6B6B);
    font-size: 12px;
    margin-bottom: -4px;
  }
}
.ep-ref-label { color: var(--ep-text-muted, #6B6B6B); }
.ep-ref-value {
  color: var(--ep-text, #1A1A1A);
  font-weight: 500;
}
.ep-ref-value code {
  font-family: 'Courier New', monospace;
  background: transparent;
  padding: 0;
  font-size: 14px;
}

/* Chips catégorie */
.ep-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ep-cat-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: 20px;
  font-size: 12px;
  color: var(--ep-text-muted, #6B6B6B);
  text-decoration: none;
  transition: all var(--ep-tr-fast, 0.15s ease);
}
.ep-cat-chip:hover {
  border-color: var(--ep-text, #1A1A1A);
  color: var(--ep-text, #1A1A1A);
  background: var(--ep-bg-soft, #FAFAFA);
}
.ep-cat-chip-empty {
  color: var(--ep-text-subtle, #999999);
  font-style: italic;
  font-size: 13px;
}

/* ── Compatibilités en chips ───────────────────────────────── */
.ep-compat-filter {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-md, 8px);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.ep-compat-filter:focus {
  outline: none;
  border-color: var(--ep-text, #1A1A1A);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.ep-compat-empty {
  font-size: 13px;
  color: var(--ep-text-muted, #6B6B6B);
  font-style: italic;
  padding: 12px 0;
  display: none;
}
.ep-compat-empty.show { display: block; }

.ep-compat-brand-group { margin-bottom: 18px; }
.ep-compat-brand-group:last-child { margin-bottom: 0; }
.ep-compat-brand-group.hidden { display: none; }

.ep-compat-brand-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--ep-text, #1A1A1A);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0 10px;
  margin-bottom: 0;
}

/* Chips compat (mêmes valeurs que .ep-cat-chip) */
.ep-compat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ep-compat-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: 20px;
  font-size: 12px;
  color: var(--ep-text-muted, #6B6B6B);
  text-decoration: none;
  transition: all var(--ep-tr-fast, 0.15s ease);
  white-space: nowrap;
}
.ep-compat-chip:hover {
  border-color: var(--ep-text, #1A1A1A);
  color: var(--ep-text, #1A1A1A);
  background: var(--ep-bg-soft, #FAFAFA);
}
.ep-compat-chip.hidden { display: none; }
.ep-compat-chip-years {
  color: var(--ep-text-subtle, #999999);
  font-size: 11px;
  margin-left: 4px;
}

/* ── Refs équivalentes ─────────────────────────────────────── */
.ep-refs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.ep-refs-list li { padding: 6px 0; }
.ep-refs-list code,
.ep-refs-list a code {
  background: var(--ep-bg-section, #F5F5F5);
  padding: 2px 8px;
  border-radius: var(--ep-radius-sm, 4px);
  font-family: 'Courier New', monospace;
  font-size: 13px;
}
.ep-refs-list a {
  color: var(--ep-text, #1A1A1A);
  text-decoration: none;
}
.ep-refs-list a:hover { text-decoration: underline; }
.ep-refs-list a code {
  border: 1px solid var(--ep-border, #E5E5E5);
  background: var(--ep-bg-soft, #FAFAFA);
}
.ep-refs-list .ref-not-clickable { color: var(--ep-text-muted, #6B6B6B); }

/* Related products */
.ep-articles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-article-card {
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius-lg, 10px);
  padding: 14px 18px;
  text-decoration: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  transition: border-color var(--ep-tr-fast, 0.15s ease),
              box-shadow var(--ep-tr-fast, 0.15s ease);
}
.ep-article-card:hover {
  border-color: var(--ep-text, #1A1A1A);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.ep-art-ref {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--ep-text-muted, #6B6B6B);
  margin-bottom: 4px;
}
.ep-art-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ep-text, #1A1A1A);
}
.ep-art-right { text-align: right; flex-shrink: 0; }
.ep-art-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--ep-text, #1A1A1A);
}
.ep-art-price small { font-size: 12px; font-weight: 600; }
.ep-art-stock {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}
.ep-art-stock.en_stock     { color: var(--ep-green-dark, #006633); }
.ep-art-stock.sur_commande { color: var(--ep-orange-dark, #854F0B); }
.ep-art-stock.nous_contacter { color: var(--ep-text-muted, #6B6B6B); }

        /* Le partial pose sa propre <section class="ep-showcase"> avec les
           marges de la home : on les neutralise dans la fiche. */
        .ep-product-reco .ep-showcase { padding: 0; margin: 0; background: transparent; border-bottom: 0; }
        /* .ep-showcase-inner garde son padding lateral (56px) : c'est la
           place des fleches, positionnees dedans par layout.css. */
        .ep-product-reco .ep-showcase-inner { max-width: none; }