:root {
    
}

h1 {color: var(--color-orange);}

.cta {background: var(--color-orange);}

/* Voir ce lien pour générer le filter : https://codepen.io/sosuke/pen/Pjoqqp */
#bloc-plan > img {filter: invert(58%) sepia(38%) saturate(745%) hue-rotate(333deg) brightness(92%) contrast(90%);}

#home-header-svg text {fill: var(--color-orange);}

#home-header::after {
  content: '';
  background: url('../img/header-halloween.png') no-repeat center bottom / contain;
  width: 100vw;
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100vh;
  transform: translateX(-50%);
  max-width: 1280px;
}

.bg-mascotte-home {
  background-image: url('../img/mascotte-halloween.png');
}

#bloc-prix > .container::before {background-image: url('../img/bg-citrouille.jpg');}

#bloc-home .abs-bottom-right {display: none;}

#home #abs-bg-chapeau {
    top: 1.5%;
    left: 16%;
}

main {
    background: url('../img/bg-toile.png') no-repeat left var(--nav-height);
    background-attachment: fixed;
}

.araignee {
    width: 10%;
    aspect-ratio: calc(76/269);
    max-width: 76px;
    max-height: 270px;
    background: url('../img/bg-araignee.png') no-repeat top center / contain;
    position: fixed;
    top: 15%;
    left: 5%;
    animation: spider-down 5s ease-in-out alternate infinite;
}

.bat {
    position: fixed;
    max-width: 325px;
    max-height: 423px;
    background: url('../img/bg-chauve-souris.png') no-repeat center/contain;
    animation: move-x 8s linear infinite, wave-y 2s ease-in-out infinite;
    width: 100%;
    height: 30%;
}

@keyframes spider-down {
    0%   { top: -30%; }
    40%  { top: 10%; }
    75%  { top: 5%; }
    100% { top: 15%; }
}

@keyframes move-x {
    from {
        left: -200px;
        bottom: 0;
    }
    to {
        left: calc(100vw + 200px);
        bottom: calc(90vh + 200px);
    }
}

@keyframes wave-y {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-60px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(60px); }
    100% { transform: translateY(0); }
}

#bloc-evenement .abs-bottom-left {display: none;}

@media screen and (max-width: 767px) {
    main {
        background-position: top left;
        background-size: 60%;
    }
    
    @keyframes spider-down {
        0%   { top: -30%; }
        40%  { top: 0%; }
        75%  { top: -10%; }
        100% { top: 5%; }
    }
}

@media screen and (min-width: 2000px) {
    main {
        background: url('../img/bg-toile.png') no-repeat left var(--nav-height), url('../img/bg-chapeau-sorciere.jpg?v2') no-repeat right center / 20%;
        background-attachment: fixed;
    }
}

@media screen and (max-width: 2300px) {
    #home #abs-bg-chapeau {display: none;}
}