/* ==========================================================
   BANDEAU FLOTTANT
   Caché au chargement.
   Apparaît après dépassement de .marius-header-main.
   ========================================================== */

.zzz-stfb-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;

  line-height: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;

  pointer-events: none;
}


/* ==========================================================
   BANDEAU VISIBLE - DESKTOP
   ========================================================== */

.zzz-stfb-bar.is-visible {
  opacity: 0.50;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


/* Pleine opacité au survol sur Desktop. */

.zzz-stfb-bar.is-visible:hover,
.zzz-stfb-bar.is-visible:focus-within {
  opacity: 1;
}


/* ==========================================================
   IMAGE DU BANDEAU
   ========================================================== */

.zzz-stfb-bar picture,
.zzz-stfb-bar__image {
  display: block;
  width: 100%;
}

.zzz-stfb-bar__image {
  height: auto;
  max-width: none;
}


/* ==========================================================
   LIEN TÉLÉPHONIQUE
   Désactivé sur Desktop.
   Activé uniquement sur Mobile.
   ========================================================== */

.zzz-stfb-bar__mobile-call {
  display: block;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}


/* ==========================================================
   BOUTON SCROLL TOP
   ========================================================== */

.zzz-stfb-scrolltop {
  --zzz-stfb-bar-height: 0px;

  position: fixed;
  right: 18px;
  bottom: calc(var(--zzz-stfb-bar-height) + 10px);
  z-index: 1021;

  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;

  place-items: center;

  border: 0;
  border-radius: 3px;

  background: #2fb5d2;
  color: #fff;

  font-size: 25px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;

  pointer-events: none;
}


.zzz-stfb-scrolltop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


.zzz-stfb-scrolltop:hover,
.zzz-stfb-scrolltop:focus-visible {
  filter: brightness(0.92);
  background: #2592a9;
}


.zzz-stfb-scrolltop:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

  /*
   * Sur Mobile :
   * aucune transparence lorsque le bandeau est visible.
   */

  .zzz-stfb-bar.is-visible,
  .zzz-stfb-bar.is-visible:hover,
  .zzz-stfb-bar.is-visible:focus-within {
    opacity: 1;
  }


  /*
   * Le bandeau devient cliquable sur Mobile.
   * Le lien tel: est défini dans le TPL.
   */

  .zzz-stfb-bar__mobile-call {
    pointer-events: auto;
    cursor: pointer;
  }


  /*
   * Bouton Scroll Top Mobile.
   */

  .zzz-stfb-scrolltop {
    right: 12px;
    bottom: calc(var(--zzz-stfb-bar-height) + 10px);

    width: 40px;
    height: 40px;
  }
}


/* ==========================================================
   ACCESSIBILITÉ
   Réduction des animations si demandée par l'utilisateur.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .zzz-stfb-bar,
  .zzz-stfb-scrolltop {
    transition: none;
  }
}