/**
 * ###############  Header  ##################
 */

 /* #masthead::after {
  content: "Lieu associatif à Crest";
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 50px;
  right: 30%;
  color: #fff;
 } */

 #masthead {
  background-image:url(../../../../uploads/2026/06/hydre_titre_bandeau.png), url(../../../../uploads/2026/06/fond_bandeau_hydre_v2.jpg);
 }

 /* Logo */

   .site-logo {
    transition: left 0.5s, width 0.5s, transform 0.5s;
    transform-origin: center center;
    z-index: 1000;
  }

 @media (min-width: 769px) {
   #masthead {
    height: 15.625vw;
    max-height: 277px;
    background-position: right bottom, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    max-width: 100%;
  }

 /* Logo */

  .site-logo {
    width: 18.49vw;
    max-width: 100%;
    position: relative;
    /* left: 0; */
  }

  .site-logo.small-desktop-logo {
    position: fixed;
    transform: translateY(20px);
    width: 106px;
    left: 7%;
  }

  .site-logo.large-desktop-logo {
    transform: translateY(0);
  }

 }

@media (max-width: 768px) {
   #masthead {
    height: 330px;
    background-position: center bottom, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 585px, auto;
    max-width: 100%;
  }

 /* Logo */

  .site-logo {
    max-width: 210px;
    padding-top: 60px;
    position: fixed;
  }

  .site-logo.small-mobile-logo {
    position: fixed;
    z-index: 1000;
    transform:  translateY(-100px) scale(0.35);
  }

  .site-logo.large-mobile-logo {
    transform: translateY(0) scale(1) ;
  }

}

@media (min-width: 769px) and (max-width: 1128px) {
  .site-logo {
    transition: none;
  }

  .site-logo,
  .site-logo.small-desktop-logo,
  .site-logo.large-desktop-logo {
    width: 18.49vw;
    max-width: 100%;
    position: relative;
    left: 0;
  }

}