/* ================================================================
   Deplace depuis app/views/partials/article_carousel.php (12/09/2026) — CSS inchange, ordre conserve.
   ================================================================ */
/* Bloc texte carte carrousel unifie avec les cartes categorie (05/06/2026).
   ref gras + designation + montage, N lignes fixes, troncature "...".
   Prix a gauche / stock a droite. Surcharge ciblee : ne touche pas layout.css. */
.ep-showcase .ep-piece-desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ep-text, #1A1A1A);
    /* --ep-montage-lines : pose par le partial sur <section class="ep-showcase"> (defaut 3) */
    height: calc(1.4em * var(--ep-montage-lines, 3));
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--ep-montage-lines, 3);
    -webkit-box-orient: vertical;
    margin: 0 0 8px 0;
}
.ep-showcase .ep-piece-desc .ep-piece-ref-inline { font-weight: 700; color: var(--ep-text, #1A1A1A); }
.ep-showcase .ep-piece-desc .ep-piece-sep        { color: var(--ep-text, #1A1A1A); }
.ep-showcase .ep-piece-desc .ep-piece-desig      { color: var(--ep-text, #1A1A1A); }
.ep-showcase .ep-piece-desc .ep-piece-montage    { color: var(--ep-text, #1A1A1A); }
/* Ligne prix + badge stock.
   Correctif 10/08/2026 : le badge etait en flex 0 1 auto + nowrap, donc
   compressible mais non repliable -> "SUR COMMANDE" sortait tronque en
   "SUR COMMAN" sur les vignettes etroites.
   Desormais l'espace est partage en deux : le prix garde son nowrap (un
   montant coupe serait illisible), le badge peut se replier sur deux
   lignes. min-width:0 est indispensable, sans lui un flex item refuse de
   passer sous la largeur de son contenu. */
.ep-showcase .ep-piece-priceline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: nowrap;
}
.ep-showcase .ep-piece-priceline .ep-piece-price-wrap {
    white-space: nowrap;
    /* Correctif 10/08/2026 : le prix ne cede JAMAIS.
       Avec flex 1 1 50% + min-width 0 il pouvait etre compresse sous sa
       largeur naturelle, ce qui tronquait "3 120,00 EUR TTC" en
       "3 120,00 EUR TT" quand le badge "Sur commande" occupait sa moitie.
       flex-shrink 0 + min-width auto : c'est le badge qui se replie,
       jamais le montant. Un prix coupe est un prix faux. */
    flex: 0 0 auto;
    min-width: auto;
}
/* ─── Prix carrousel : bascule HT / TTC (10/08/2026) ────────
   Meme mecanique que les cartes de listing : les deux montants sont
   dans le HTML, la classe px-* portee par .ep-showcase decide lequel
   est en gros. Sur DEUX lignes — teste sur une seule, mais au-dela de
   4 chiffres le couple prix + badge depasse la largeur de vignette.
   order inverse l'ordre visuel sans toucher au DOM. */
.ep-showcase .ep-piece-prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.px-ttc .ep-showcase .ep-piece-price-ttc,
.px-ht  .ep-showcase .ep-piece-price-ht2 {
    order: 1;
    /* clamp au lieu de 16px fixe (10/08/2026) : le passage a 2 decimales
       allonge les montants ("3 120,00 EUR TTC" au lieu de "3 120 EUR").
       Sur les viewports etroits la police descend plutot que de pousser
       le badge stock hors de la vignette. Plafond inchange a 16px. */
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 700;
    color: var(--ep-text, #1A1A1A);
    line-height: 1.2;
    white-space: nowrap;
}
.px-ttc .ep-showcase .ep-piece-price-ht2,
.px-ht  .ep-showcase .ep-piece-price-ttc {
    order: 2;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ep-text-muted, #6B6B6B);
    line-height: 1.3;
    white-space: nowrap;
}
/* Export (TVA 0%) : le HT est seul, taille principale. */
.ep-showcase .ep-piece-prices > .ep-piece-price-ht2:only-child {
    order: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--ep-text, #1A1A1A);
}
/* Badge stock (11/08/2026 — remplace la version du 10/08).
   HISTORIQUE : le libelle arrivait en une seule chaine et c'est le
   navigateur qui decidait ou replier, selon la place disponible. D'ou
   des badges a hauteur variable d'une carte a l'autre ("65 EN STOCK"
   sur une ligne, "SUR COMMANDE" sur deux), et des acrobaties CSS
   successives pour eviter les coupures au milieu d'un mot.

   MAINTENANT : le PHP fournit deux lignes distinctes (.ep-stk-l1 et
   .ep-stk-l2), empilees par un flex colonne. Le repli n'est plus une
   consequence de la largeur, c'est une decision. Consequences :
     - plus besoin de word-break / overflow-wrap : rien ne se replie
     - plus besoin de line-clamp : le nombre de lignes est fixe a 2
     - chaque ligne est en nowrap et reste d'un seul tenant
     - min-height tient la hauteur meme quand la 2e ligne est vide,
       donc tous les badges s'alignent

   CONSERVE de la version precedente :
     - clamp() : la police descend a 9,5px sur viewport etroit, max 12px
       (contre 13px dans article_grid.php, vignettes plus larges la-bas)
     - max-width 52% : le badge ne prend que la place necessaire quand le
       libelle est court, sans jamais depasser la moitie de la ligne */
.ep-showcase .ep-piece-priceline .ep-piece-stock {
    /* Le badge absorbe toute la contrainte de largeur : il se replie sur
       deux lignes et sa police descend, pendant que le prix reste intact.
       max-width 46% (etait 52%) : les montants a 4 chiffres avec
       decimales ont besoin de la place. */
    flex: 0 1 auto;
    max-width: 46%;
    min-width: 0;
    text-align: center;
    font-size: clamp(9px, 0.72vw, 12px);
    font-weight: 700;
    padding: 4px 8px;
    line-height: 1.15;
    border-radius: 12px;
    /* layout.css applique text-transform:uppercase aux badges du
       carrousel. La grille, elle, ecrit "6 en stock" en minuscules.
       Neutralise ici pour que les deux affichages soient identiques
       au caractere pres — sans toucher layout.css, partage par
       d'autres vues. */
    text-transform: none;
    /* DEUX LIGNES EXPLICITES (11/08/2026).
       Avant : une seule chaine, repliee par le navigateur selon la place
       disponible -> "65 en stock" tenait sur une ligne, "SUR COMMANDE" sur
       deux, et les cartes n'avaient pas la meme hauteur de badge.
       Desormais le PHP fournit deux lignes distinctes et le flex colonne
       les empile. Plus de line-clamp ni de word-break : il n'y a plus rien
       a replier, donc plus rien a casser au mauvais endroit.
       min-height fige la hauteur a 2 lignes meme si la 2e est vide. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(2 * 1.15em);
}
.ep-showcase .ep-piece-priceline .ep-piece-stock .ep-stk-l1,
.ep-showcase .ep-piece-priceline .ep-piece-stock .ep-stk-l2 {
    display: block;
    white-space: nowrap;   /* chaque ligne reste d'un seul tenant */
}
.ep-showcase .ep-piece-priceline .ep-piece-stock .ep-stk-l2:empty {
    display: none;
}
/* ─── Couleurs stock : ALIGNEES SUR article_grid.php (10/08/2026) ──
   Le carrousel sortait "SUR COMMANDE" en ROUGE alors que la grille
   affiche "Sur commande" en ORANGE. Le rouge signalait un probleme la
   ou il n'y en a pas : etre sur commande est une modalite de vente,
   pas une erreur. Memes variables CSS que .ep-card-stock-* pour que
   les deux affichages ne puissent plus diverger.

   Selecteur a 3 niveaux (.ep-showcase .ep-piece-priceline .ep-piece-stock.X)
   pour passer devant les regles .ep-piece-stock.X de layout.css sans
   avoir a les modifier — layout.css est partage par d'autres vues.

   L'etat "low" (< 5 unites) a disparu du helper : la quantite exacte
   le remplace avantageusement. La regle .low est conservee ici par
   securite si un appelant tiers renvoie encore cette classe. */
.ep-showcase .ep-piece-priceline .ep-piece-stock.ok {
    color: var(--ep-green-dark, #006633);
    background: var(--ep-green-light, #EAF3DE);
}
.ep-showcase .ep-piece-priceline .ep-piece-stock.out,
.ep-showcase .ep-piece-priceline .ep-piece-stock.low {
    color: var(--ep-orange-dark, #854F0B);
    background: var(--ep-orange-light, #FAEEDA);
}
.ep-showcase .ep-piece-priceline .ep-piece-stock.na {
    color: var(--ep-text-muted, #6B6B6B);
    background: var(--ep-bg-section, #F5F5F5);
}

/* ================================================================
   Deplace depuis app/views/partials/carousel_brand.php (12/09/2026) — CSS inchange, ordre conserve.
   ================================================================ */
/* ── Carrousel marque (scopé .ep-bcar) ──────────────────────── */
.ep-bcar { margin: 28px 0 8px 0; }
.ep-bcar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.ep-bcar-title {
  font-size: 1.25rem; font-weight: 700; color: #1a1a1a;
  margin: 0; text-transform: uppercase; letter-spacing: 0.02em;
}
.ep-bcar-ctrl { display: flex; gap: 8px; flex-shrink: 0; }
.ep-bcar-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #d9d4c8; background: #fff; color: #1a1a1a;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.ep-bcar-arrow:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.ep-bcar-arrow:disabled { opacity: .3; cursor: default; }
.ep-bcar-arrow:disabled:hover { background: #fff; color: #1a1a1a; border-color: #d9d4c8; }

.ep-bcar-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: 6px;
  justify-content: safe center;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ep-bcar-track::-webkit-scrollbar { height: 6px; }
.ep-bcar-track::-webkit-scrollbar-thumb { background: #d9d4c8; border-radius: 3px; }

.ep-bcar-card {
  flex: 0 0 175px; width: 175px;
  background: #fff; border: 1px solid #ece8df; border-radius: 8px;
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.ep-bcar-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.ep-bcar-img {
  width: 100%; aspect-ratio: 1/1; background: #f7f5f0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex-shrink: 0;
}
.ep-bcar-img img { width: 100%; height: 100%; object-fit: contain; }
.ep-bcar-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ep-bcar-name {
  font-size: 13px; line-height: 1.35; color: #1a1a1a; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 35px;
}
.ep-bcar-price { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ep-bcar-price-ht { font-size: 11px; font-weight: 400; color: #888; margin-left: 2px; }

@media (max-width: 768px) {
  .ep-bcar-card { flex: 0 0 145px; width: 145px; }
  .ep-bcar-title { font-size: 1.1rem; }
}