/**
 * Comm360 — Titre collant au défilement (Sticky Title Scroll Effect — CSS
 * FIDÈLE Osmo).
 *
 * Reprise verbatim de la fiche ; seule adaptation : l'alias Comm360
 * .comm360-titre-collant est reconnu en plus de la classe/attribut Osmo
 * d'origine sur la section englobante (les deux reconnus).
 *
 * Les classes .sticky-title-* sont les classes de mise en page de la démo
 * Osmo (section haute de 350vh, conteneur collant plein écran, titres
 * centrés empilés via is--stacked) — réutilisables telles quelles pour
 * reproduire la démo. Le fond en dégradé et la hauteur de 350vh viennent de
 * la fiche : surchargez-les librement (la hauteur définit la durée du
 * défilement ; aucun parent ne doit porter overflow: hidden, sinon le
 * position: sticky ne fonctionne pas).
 */

/* Section englobante — alias Comm360 reconnu en plus de la classe Osmo. */
.sticky-title-wrapper,
.comm360-titre-collant {
  background-image: linear-gradient(#000, #777);
  width: 100%;
  height: 350vh;
  position: relative;
}

.sticky-title-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-left: 1.5em;
  padding-right: 1.5em;
  display: flex;
  position: sticky;
  top: 0;
}

.sticky-title-inner {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.sticky-title-el {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

.sticky-title-el.is--stacked {
  visibility: hidden;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .sticky-title-el {
    font-size: 3.5em;
  }
}