/* ============================================================
   ARGANE — Hero balayeuses (composant partagé)
   ------------------------------------------------------------
   Port fidèle de components/argane-bal-hero.css (maquette V3).
   Une seule image produit (rendu 3D), pas de collage d'ambiance.
   Variante utilisée ici : .bh--split (texte à gauche, produit à
   droite) — page de vue d'ensemble des balayeuses.
   ============================================================ */

.bal-hero{position:relative;background:var(--forge);color:var(--paper);overflow:hidden;}
.bal-hero .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);}

.bh-crumb .breadcrumb{margin-bottom:clamp(22px,2.6vw,34px);}
.bal-hero .breadcrumb a,.bal-hero .breadcrumb .current{color:var(--paper);}
.bal-hero .breadcrumb a:hover{color:var(--braise);}
.bal-hero .breadcrumb .sep{color:rgba(250,250,250,0.38);}

.bh-title{font-family:var(--ff-display);font-weight:500;letter-spacing:-0.035em;line-height:0.98;margin:0;font-size:clamp(40px,5.4vw,78px);text-wrap:balance;}
.bh-sub{font-family:var(--ff-body);font-weight:300;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(250,250,250,0.72);margin:clamp(20px,2.2vw,28px) 0 0;max-width:52ch;text-wrap:pretty;}
.bh-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(26px,3vw,38px);}
.bh-meta span{white-space:nowrap;font-family:var(--ff-body);font-size:11px;color:rgba(250,250,250,0.88);background:rgba(250,250,250,0.06);border:0;border-radius:8px;padding:5px 9px;}

.bh-media{margin:0;position:relative;overflow:hidden;}
.bh-media img{width:100%;height:100%;object-fit:contain;display:block;}
.bh-media.is-empty{display:flex;align-items:center;justify-content:center;background:rgba(250,250,250,0.04);border:1px dashed rgba(250,250,250,0.14);border-radius:12px;}
.bh-note{display:block;max-width:26ch;text-align:center;padding:0 20px;font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(250,250,250,0.5);}

/* ---------- Split : texte à gauche, produit à droite ---------- */
.bh--split .bal-hero-inner{display:grid;grid-template-columns:1fr 0.95fr;gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(150px,17vh,182px) clamp(72px,8vw,112px);}
.bh--split .bh-media{aspect-ratio:4/3;}

@media (max-width:1024px){
  .bh--split .bal-hero-inner{grid-template-columns:1fr;gap:clamp(30px,6vw,44px);padding-block:clamp(132px,16vh,158px) clamp(54px,8vw,72px);}
  .bh--split .bh-media{aspect-ratio:16/10;margin-right:0;order:2;}
}