/* ==================================================================== *
 * Page Réalisations (realisations.html), chargée après
 * hoummi-branches.css et hoummi-sections.css.
 * ==================================================================== */

/* --- Héros : un carrousel de vues de projets sous le texte -----------
 * Le mécanisme et les commandes sont ceux du héros particuliers
 * (.hm-carrousel, js/hoummi-carrousel.js) ; ici le carrousel occupe
 * tout le fond du bandeau noir, sous le dégradé et le texte. */

.hm-rz__carrousel {
  position: absolute;
  inset: 0;
}

.hm-rz__carrousel .hm-carrousel__vue { object-position: center; }

/* Le dégradé et le texte passent au-dessus des photos sans capter les
   clics : les flèches et les puces restent utilisables. */
.hm-rz__tete .hm-rz__voile { pointer-events: none; }
.hm-rz__tete .hm-wrap { position: relative; pointer-events: none; }
.hm-rz__tete .hm-wrap a { pointer-events: auto; }

/* --- Postes de secours, tiers-lieux : une rangée qui défile de côté --
 * Le bouton « Faire défiler » vient de hoummi-defile.js ([data-hm-defile]). */

.hm-rz-rangee {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.hm-rz-rangee > .hm-carte {
  flex: 0 0 clamp(280px, 40vw, 520px);
  scroll-snap-align: start;
}