/**
 * Comm360 — Couches d'images en parallaxe (Parallax Image Layers — CSS FIDÈLE Osmo).
 *
 * Reprise VERBATIM de la fiche (aucun sélecteur global : pas de scoping
 * nécessaire). Les classes .parallax__* sont les classes de mise en page de la
 * démo Osmo (bloc, en-tête, visuels, calques, titre, fondu, liseré) —
 * réutilisables telles quelles pour reproduire la démo.
 *
 * Le déclencheur JS reste le wrapper [data-parallax-layers] ou la classe
 * .comm360-couches-parallaxe (aucun style imposé par cette classe) ; les
 * calques portent data-parallax-layer="1" à "4".
 */

.parallax {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.parallax__content {
  padding: 10em 1em;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative;
}

.parallax__layers {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.parallax__title {
  pointer-events: auto;
  text-align: center;
  text-transform: none;
  margin-top: 0;
  margin-bottom: .1em;
  margin-right: .075em;
  font-size: 10em;
  font-weight: 700;
  line-height: 1;
  position: relative;
}

.parallax__black-line-overflow {
  z-index: 20;
  background-color: #000;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
}

.parallax__layer-img {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 117.5%;
  position: absolute;
  top: -17.5%;
  left: 0;
}

.parallax__fade {
  z-index: 30;
  object-fit: cover;
  background-image: linear-gradient(#0000, #000);
  width: 100%;
  max-width: none;
  height: 20%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.parallax__header {
  z-index: 2;
  padding: 10em 1em;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative;
}

.parallax__visuals {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 120%;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax__layer-title {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}