/* ═══════════════════════════════════════════════════════════════════════════
   ASap FC — La suite « Animations d'événement » de l'accueil : des CLIPS des
   habillages RÉELS.                                   Réécrit le 23/08/2026.

   Ce que ça remplace : la version du 21/08 reproduisait quatre bandeaux en
   HTML/CSS (écussons remplacés par des initiales, police du Cahier remplacée
   par une serif de système, pas de cascade des compositions). C'était honnête
   — « reproductions, pas les overlays eux-mêmes » — mais c'était une copie.
   Les clips d'aujourd'hui sont les overlays de app/public/, filmés image par
   image sur le jeu de démo, avec les vrais écussons : ce qu'on montre est ce
   qui tourne (scripts/preparer-clips-site.mjs). L'ancienne feuille est gardée
   dans site/_to_delete/anims-habillages.LEGACY-2026-08-23.css.bak.

   Retour de Silva du 23/08 au soir : sur le catalogue, carton et remplacement
   ne se voient pas (teinte de papier sur le Cahier, halo sur le Mur) — ce
   n'est pas un bon choix pour ILLUSTRER ces deux faits. Les deux cas
   reprennent les clips du sur-mesure (thème LDC) avec un renvoi vers sa page ;
   but et compositions restent sur le Bento.

   Les jetons (--hb-etiq, --hb-etiq-encre, --hb-legende, --hb-texte) sont
   posés par la section `.anims` de index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la grille ─────────────────────────────────────────────────────────────
   Deux bandeaux larges (but, carton) sur toute la largeur ; deux panneaux
   hauts (compositions, remplacement) côte à côte. Dans chaque cas : l'étiquette
   et la légende à gauche, le clip à droite — on lit d'abord le fait, on
   regarde ensuite. */
.hb-suite{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 28px; margin-top:34px }
.hb-cas{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; align-items:center }
.hb-cas.large{ grid-column:1 / -1 }
.hb-meta .q{
  display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:19px; letter-spacing:.08em; text-transform:uppercase; padding:1px 9px;
  background:var(--hb-etiq,#e8ff3a); color:var(--hb-etiq-encre,#141804);
}
.hb-meta .h{ margin-top:9px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
             letter-spacing:.13em; text-transform:uppercase; color:var(--hb-legende,#8a93a6) }
.hb-meta .t{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--hb-texte,#a9b3c4) }
/* Le renvoi vers la page sur mesure (23/08 au soir) : un lien, pas un
   bouton — on est dans une légende. */
.hb-meta .hb-lien{ display:inline-block; margin-top:10px; font-family:'IBM Plex Mono',monospace;
                   font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                   color:var(--hb-lien,#0b1329); text-decoration:none; border-bottom:2px solid var(--hb-etiq,#e8ff3a) }
.hb-meta .hb-lien:hover{ background:var(--hb-etiq,#e8ff3a); color:var(--hb-etiq-encre,#141804) }

/* ── le cadre d'un clip ────────────────────────────────────────────────────
   Le fond du produit derrière le clip : si le navigateur laisse une bande en
   attendant la première image, elle est de la couleur de l'overlay. */
.hb-clip{
  position:relative; overflow:hidden; border-radius:10px; background:#0d1017;
  box-shadow:0 18px 50px rgba(11,19,41,.18); line-height:0;
}
.hb-clip video{ display:block; width:100%; height:auto }

@media(max-width:820px){
  .hb-suite{ grid-template-columns:1fr }
  .hb-cas{ grid-template-columns:1fr; gap:10px }
}