/* 
Theme Name: Hello Eliophot Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team & Eliophot
Author: Eliophot
Author URI: https://www.eliophot.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready, Eliophot
*/

html {
  scroll-behavior: smooth !important;
}

/* HERO + INTRODUCTION - ECRAN 1 */
#hero-animation .sun {
  opacity: 0;
  transform-origin: center;
}

#hero-animation .text .elementor-icon {
  clip-path: polygon(0 0, 20% 0, 20% 100%, 0% 100%);
}

#hero-animation .text {
  opacity: 0;
  max-width: fit-content !important;
}

#hero-animation .subtext {
  opacity: 0;
}

@media screen and (min-width: 1025px) {
  #hero-animation {
    position: sticky !important;
    top: 0;
  }
  #hero-animation .text {
    position: relative;
    left: 91%;
  }
}

@media screen and (max-width: 1024px) {
  #hero-animation .text {
    transform: scale(1.5);
  }

  #ecran-1 {
    overflow: hidden;
  }
}

#ecran-introduction .introduction-img img {
  opacity: 0;
  aspect-ratio: 370/530;
}

#ecran-introduction .part-mid .first-image img {
  aspect-ratio: 370/530;
}

#ecran-introduction .part-mid {
  max-width: 408px;
}

@media screen and (min-width: 1025px) {
  #ecran-introduction .introduction-ecran-journee,
  #ecran-introduction .introduction-ecran-soiree {
    opacity: 0;
  }
}

@media screen and (max-width: 1024px) {
  #ecran-introduction .sun-1 {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -125%);
  }

  #ecran-introduction {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%);
  }
}

/* ECRAN 2 - CHEZ CLODE */
#ecran-2 .separator {
  height: 200px;
}

/* ECRAN 3 - EN JOURNEE / EN SOIREE */
.hover-anim .ecran-1,
.hover-anim .ecran-2 {
  transition: all 0.15s;
}

@media screen and (min-width: 1024px) {
  .hover-anim .ecran-2 {
    opacity: 0;
    visibility: hidden;
  }

  .hover-anim:hover .ecran-2 {
    opacity: 1;
    visibility: visible;
  }

  .hover-anim:hover .ecran-1 {
    opacity: 0;
    visibility: hidden;
  }

  .hover-anim .ecran-2 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-45%);
  }
}

#ecran-4 .separator {
  height: 300px;
}

/* MAP */
#ecran-3 .separator {
  height: 240px;
}

/* ECRAN 5 - GAGES DE QUALITES */
#ecran-5 .item-img {
  aspect-ratio: 333 / 411;
}

#ecran-5 .item-1,
#ecran-5 .item-2 {
  max-width: 333px;
}

/* ECRAN 7 - INSTAGRAM */
#ecran-7 .separator {
  height: 240px;
}