:root{--hbd-black:#090909;--hbd-cream:#f4ecdf;--hbd-orange:#ff5a00;--hbd-ink:#17110e;--hbd-line:#d7c6b1}
*,*::before,*::after{box-sizing:border-box}
body.hbd-cat{margin:0;background:var(--hbd-cream);color:var(--hbd-ink);font-family:Barlow,Arial,sans-serif}
.hbd-cat-hero{position:relative;isolation:isolate;min-height:625px;display:flex;align-items:center;color:#fff;padding:86px 0 94px;border-bottom:1px solid var(--hbd-orange);background-color:var(--hbd-black);background-image:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.66) 42%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.08) 100%),var(--hbd-banner-image,none);background-size:cover;background-position:center;background-repeat:no-repeat}
.hbd-cat-shell{width:min(1120px,calc(100% - 40px));margin:auto}.hbd-cat-hero .hbd-cat-shell{position:relative;z-index:1}
.hbd-cat-kicker{font:600 13px/1.2 Barlow,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--hbd-orange);margin-bottom:14px}
.hbd-cat h1,.hbd-cat h2,.hbd-cat h3{font-family:'Bebas Neue',sans-serif;margin:0;text-transform:uppercase}
.hbd-cat h1{font-size:clamp(54px,7vw,94px);line-height:.94;max-width:760px}
.hbd-cat-hero p{max-width:650px;font-size:18px;line-height:1.55;margin:26px 0 0}

.hbd-cat-main{padding:80px 0 100px}.hbd-cat-intro{max-width:760px;margin:0 auto 42px;text-align:center}.hbd-cat-intro h2{font-size:44px}.hbd-cat-intro p{font-size:17px;line-height:1.6;margin-top:14px}
.hbd-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:900px;margin:auto}
.hbd-cat-card{background:#fffaf2;border:1px solid var(--hbd-line);border-left:4px solid var(--hbd-orange);padding:24px;min-height:220px;display:flex;flex-direction:column;box-shadow:0 8px 20px rgba(40,25,10,.08)}
.hbd-cat-card .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hbd-orange);font-weight:700}.hbd-cat-card h3{font-size:29px;line-height:1.02;margin:12px 0}.hbd-cat-card p{line-height:1.5;margin:0 0 22px}.hbd-cat-card a{margin-top:auto;background:var(--hbd-orange);border:2px solid #111;color:#111;text-decoration:none;text-align:center;padding:12px 14px;font-weight:800;text-transform:uppercase}
.hbd-cat-empty{max-width:900px;margin:auto;background:#fffaf2;border:1px solid var(--hbd-line);border-left:4px solid var(--hbd-orange);padding:30px}.hbd-cat-empty h3{font-size:34px}.hbd-cat-empty p{margin:10px 0 0;line-height:1.6}
@media(max-width:800px){.hbd-cat-grid{grid-template-columns:1fr}.hbd-cat-hero{min-height:520px;padding:64px 0 70px;background-image:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.7) 60%,rgba(0,0,0,.35) 100%),var(--hbd-banner-image,none)}.hbd-cat-main{padding:55px 0 75px}}

/* V750 — photos réelles des récits et guides dans les cartes de catégories */
.hbd-cat-card-media{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  margin:-24px -24px 20px;
  width:calc(100% + 48px);
  background:#111;
  border-bottom:1px solid rgba(17,17,17,.18);
}
.hbd-cat-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media (max-width:640px){
  .hbd-cat-card-media{margin:-18px -18px 16px;width:calc(100% + 36px);}
}
/* V751 — cadrage spécifique du chapitre 3 : visage de Harley visible */
.hbd-cat-card-media img.hbd-face-focus{
  object-position:center 22%;
}

/* V768 — NOTRE HISTOIRE : 4 cartes uniformes + contenu SEO spécifique par chapitre */
.hbd-cat-grid.hbd-story-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1120px;
  align-items:stretch;
}
.hbd-story-grid .hbd-cat-card{
  height:100%;
  min-height:100%;
}
.hbd-story-grid .hbd-cat-card h3{
  min-height:2.05em;
}
.hbd-story-grid .hbd-cat-card p{
  min-height:7.5em;
}
@media(max-width:1000px){
  .hbd-cat-grid.hbd-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .hbd-cat-grid.hbd-story-grid{grid-template-columns:1fr;}
  .hbd-story-grid .hbd-cat-card h3,.hbd-story-grid .hbd-cat-card p{min-height:0;}
}


/* V778 — CARTES BLOGUE : PHOTO CLEAN / SUJET PRINCIPAL TOUJOURS VISIBLE
   RÈGLE DÉFINITIVE :
   - pas de recadrage générique destructif;
   - chaque photo reçoit son propre cadrage;
   - aucune déformation;
   - le sujet principal doit rester visible sur desktop, tablette et mobile.
*/
.hbd-cat-card-media{
  aspect-ratio:4 / 3 !important;
  background:#111;
}
.hbd-cat-card-media img{
  width:100%;
  height:100%;
  display:block;
  transform:none !important;
  filter:none !important;
}

/* Québec → Baie-Saint-Paul → La Malbaie :
   le cadre doit être rempli sans bande vide. */
.hbd-cat-card-media img.hbd-photo-bsp{
  object-fit:cover !important;
  object-position:center center !important;
}

/* La Malbaie → Sainte-Rose-du-Nord :
   photo verticale, cadrage individuel centré sur la scène utile. */
.hbd-cat-card-media img.hbd-photo-fjord{
  object-fit:cover !important;
  object-position:center 38% !important;
}

/* Clermont → Saint-Hyacinthe / Ride de Filles :
   cadrage centré et cadre entièrement rempli. */
.hbd-cat-card-media img.hbd-photo-ride{
  object-fit:cover !important;
  object-position:center center !important;
}

@media (max-width:720px){
  .hbd-cat-card-media{
    aspect-ratio:4 / 3 !important;
  }
}