/* Le visuel accompagne le titre dès l'entrée mobile. Les détails restent dans
   le document, à leur taille de lecture, après la figure et l'introduction. */
@media screen and (width < 60rem) {
  .bin-hero__composition { gap:0; }
  .bin-hero__texte { display:contents; }
  .bin-hero__texte > .bin-kicker { grid-row:1; }
  .bin-hero__texte > h1 { grid-row:2; }
  .bin-hero__scene { grid-row:3; margin-bottom:var(--space-xl); }
  .bin-hero__lede { grid-row:4; }
  .bin-hero__actions { grid-row:5; margin:0 0 var(--space-xl); }
  .bin-hero__livrables { grid-row:6; margin-bottom:0; }
}

/* La figure suit aussi le titre dans le DOM : le clavier rencontre son lien
   avant les actions, comme à l'écran sur mobile. La grille restitue le bureau. */
@media screen and (width >= 60rem) {
  .bin-hero__composition { display:block; }
  .bin-hero__texte { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,1fr); grid-template-rows:1fr repeat(5,max-content) 1fr; column-gap:clamp(2rem,4vw,4rem); }
  .bin-hero__texte > :not(.bin-hero__scene) { grid-column:1; }
  .bin-hero__texte > .bin-kicker { grid-row:2; }
  .bin-hero__texte > h1 { grid-row:3; }
  .bin-hero__texte > .bin-hero__lede { grid-row:4; }
  .bin-hero__texte > .bin-hero__livrables { grid-row:5; }
  .bin-hero__texte > .bin-hero__actions { grid-row:6; }
  .bin-hero__scene { grid-column:2; grid-row:1 / -1; align-self:center; }
}
@media screen and (width >= 64rem) and (height <= 43rem) {
  .bin-hero__texte { grid-template-rows:0 repeat(5,max-content) 1fr; }
  .bin-hero__scene { align-self:start; }
}