@charset "UTF-8";
/*
  theme.scss

  Ce fichier importe les différents styles nécessaires pour le thème du site.

  - animationsection : Styles pour les animations de sections
  - animationfleurs : Styles pour les animations des fleurs
  - sectionnomination : Styles pour la section de nomination
  - animationtitres : Styles pour les animations de titres
  - banniere : Styles pour la bannière
  - animationswiper : Styles pour les animations du Swiper + titre "Les Personnages"
*/
/* Définition des animations keyframes pour fadeIn */
@keyframes fadeIn {
  /* Début de l'animation */
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  /* Presque à la fin de l'animation */
  80%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Définition des animations keyframes pour fadeInverse */
@keyframes fadeInverse {
  /* Début de l'animation */
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  /* Presque à la fin de l'animation */
  80%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Propriétés communes pour les animations fadeIn et fadeInverse */
.fadeIn, .fadeInverse {
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

/* Application de l'animation fadeIn */
.fadeIn {
  animation-name: fadeIn;
}

/* Application de l'animation fadeInverse */
.fadeInverse {
  animation-name: fadeInverse;
}

/* Variables pour les animations */
/* Définition de l'animation pour faire tourner les fleurs */
@keyframes rotation-fleur {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Mixin pour l'animation */
.story h2::after {
  animation: rotation-fleur 8s linear infinite;
  width: 155px;
  height: 154px;
}
.story__article::after {
  animation: rotation-fleur 8s linear infinite;
  transform-origin: 94px 94px;
}

#studio h2::before {
  animation: rotation-fleur 8s linear infinite;
  width: 203px;
  height: 199px;
}
#studio h2::after {
  animation: rotation-fleur 8s linear infinite;
  width: 109px;
  height: 109px;
}

.site-footer ul::after {
  animation: rotation-fleur 8s linear infinite;
}
.site-footer::before, .site-footer::after {
  display: none;
}

.oscars::before {
  animation: rotation-fleur 8s linear infinite;
  width: 155px;
  height: 154px;
}
.oscars::after {
  animation: rotation-fleur 8s linear infinite;
  width: 173px;
  height: 165px;
}

/* Media query pour réduire la taille des fleurs en dessous de 768px */
@media (max-width: 768px) {
  .story h2::after {
    animation: rotation-fleur 8s linear infinite;
    width: 100px;
    height: 100px;
  }
  .story__article::after {
    transform-origin: 50px 50px;
  }
  #studio h2::before {
    animation: rotation-fleur 8s linear infinite;
    width: 130px;
    height: 130px;
  }
  #studio h2::after {
    animation: rotation-fleur 8s linear infinite;
    width: 80px;
    height: 80px;
  }
  .oscars::before {
    animation: rotation-fleur 8s linear infinite;
    width: 100px;
    height: 100px;
  }
  .oscars::after {
    animation: rotation-fleur 8s linear infinite;
    width: 110px;
    height: 110px;
  }
}
/* Styles et animations pour la section de nomination */
.oscars {
  animation: fadeInUp 1s; /* Animation pour l'apparition de la section */
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 10em;
}
@media (max-width: 1192px) {
  .oscars {
    flex-direction: column;
    align-items: center;
  }
}
.oscars h3 {
  padding: 80px 80px;
  background-image: url("../assets/images/orange_nomination_bg.png");
  line-height: normal;
  text-align: left;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1192px) {
  .oscars h3 {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .oscars h3 {
    padding: 70px 70px;
  }
}
.oscars h3 span {
  display: inline-block;
  width: 668px;
}
@media (max-width: 1192px) {
  .oscars h3 span {
    padding-left: 20px;
  }
}
@media (max-width: 768px) {
  .oscars h3 span {
    width: 320px;
    font-size: 1.5rem;
  }
}
.oscars img {
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: -48px;
  margin-left: -48px;
  width: 278px;
}
.oscars::before {
  content: url("../assets/images/Sunflower.png");
  position: absolute;
  left: 8em;
  top: 0em;
}
@media (max-width: 699.5px) {
  .oscars::before {
    display: none;
  }
}
.oscars::after {
  content: url("../assets/images/orchid.png");
  position: absolute;
  right: -4em;
  bottom: 18.5em;
}
@media (max-width: 699.5px) {
  .oscars::after {
    display: none;
  }
}

/* Styles pour l'animation des titres */
.titleFade {
  position: relative;
  top: 100px;
  opacity: 0;
  transition: top 3s, opacity 3s; /* Transition en douceur pour le déplacement et l'opacité */
}

.titleFade.animated {
  top: 0;
  opacity: 1; /* Rend le titre visible et à sa position finale */
}

.delay {
  transition-delay: 1s; /* Délai d'1 seconde pour l'animation */
}

/* Styles et animations pour la bannière */
@keyframes floating-logo {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 300px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.banner {
  background-image: url("assets/images/banner.png");
  background-size: cover;
  background-position: center;
  animation: fadeInDown 1s; /* Animation pour l'apparition de la bannière */
}
.banner__container {
  display: flex;
  justify-content: center;
  width: 100%;
}
.banner.video-loaded {
  background-image: none;
}

#logo {
  width: 45%;
  position: relative;
  animation: fadeInUp 1s, floating-logo 6s ease-in-out 1s infinite; /* Animation pour le logo */
  z-index: 2;
}

#header_video {
  position: absolute;
}
@media (max-width: 768px) {
  #header_video {
    display: none; /* Masquer la vidéo sur les écrans plus petits */
  }
}

/* Styles pour le composant Swiper */
.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  overflow: hidden;
}
.swiper-wrapper {
  position: relative !important;
  width: 160% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 500px;
  height: 500px;
  text-align: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
}
.swiper-slide h4 {
  margin-top: 10px;
}
@media (max-width: 768px) {
  .swiper {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .swiper-wrapper {
    flex-direction: column !important;
    width: 50% !important;
    left: 55px !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  .swiper-slide {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }
  .swiper-pagination, .swiper-button-next, .swiper-button-prev {
    display: none !important;
  }
}

.tittle-personnages {
  display: flex;
  text-align: left;
}

/*
Ce fichier  définit les styles pour le déplacement des nuages dans la section "place" avec un effet de parallaxe.

- #place : Contient la section avec une image de fond.
- .place--big_cloud : Style pour le gros nuage, positionné à droite et déplacé avec translateX.
- .place--little_cloud : Style pour le petit nuage, positionné à droite et déplacé avec translateX.
*/
.story #place {
  position: relative;
  background-image: url("../assets/images/Studio_Koukaki-image_place.png");
  z-index: -1;
}

#place .place--big_cloud,
#place .place--little_cloud {
  position: absolute;
  filter: blur(12px);
  -webkit-filter: blur(12px);
  -moz-filter: blur(12px);
  z-index: 2;
}

/* Définition des styles spécifiques pour chaque nuage : */
#place .place--big_cloud {
  height: 122px;
  top: 70px;
  right: -200px;
  transform: translateX(var(--posX));
}

#place .place--little_cloud {
  height: 55px;
  top: 250px;
  right: 300px;
  transform: translateX(var(--posX));
}

.nav-toggle {
  position: absolute;
  z-index: 10;
  top: 15px;
  right: 5%;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-toggle.active .l1 {
  transform: translateY(0px) rotate(45deg);
}
.nav-toggle.active .l2 {
  opacity: 0;
}
.nav-toggle.active .l3 {
  transform: translateY(0px) rotate(-45deg);
}

.main-navigation .line {
  height: 3px;
  background-color: #000;
  display: block;
  margin: auto;
  margin-block: 2px;
  width: 35px;
}
@media screen and (max-width: 700px) {
  .main-navigation ul {
    display: flex !important;
    padding-left: 350px;
  }
}
@media screen and (max-width: 600px) {
  .main-navigation ul .site-title {
    font-size: 16px;
  }
}
.main-navigation.menu-burger {
  height: 80px;
}
.main-navigation.menu-burger ul {
  display: flex;
}

.line {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: black;
  transition: transform 0.3s ease-out, opacity 0.1s ease-out;
}

.l1 {
  transform: translateY(-10px);
}

.l3 {
  transform: translateY(10px);
}

.burger.open {
  max-width: 1440px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  animation: fadeIn 1.4s ease-out 0.4s both;
}

.menu-on {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: #FFF5E9;
  color: black;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0.5s ease;
}
.menu-on ul {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.menu-on ul li {
  font-size: 65px;
  line-height: 110px;
  margin-bottom: 2rem;
}
.menu-on ul li a:hover {
  color: black;
  text-shadow: 0px 0px 14px #FF5C00;
}

.ouvrir {
  display: block;
}

.fermer {
  display: none;
}

.open .ouvrir {
  display: none;
}
.open .fermer {
  display: block;
}
.open .menu-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 0.5s ease;
}

.logo-menu {
  text-align: center;
  padding: 2rem;
  animation: floatBanner 2s ease-in-out infinite alternate;
}
.logo-menu img {
  width: 180px;
  height: auto;
  filter: drop-shadow(0px 0px 26.0937px rgba(255, 92, 0, 0.6));
}

.liste-burger li {
  margin-top: 8px;
}

.burger-menu-footer-link a {
  margin-top: 45px;
  font-size: 14px;
}

.images-menu img {
  position: absolute;
}
.images-menu img.orchidee {
  top: 5em;
  left: -5%;
  animation: rotation-fleur 10s linear infinite;
  width: 10%;
  height: auto;
}
.images-menu img.flower {
  top: 42em;
  left: 19em;
  animation: rotation-fleur 10s linear infinite;
  width: 5%;
  height: auto;
}
.images-menu img.marguerite {
  top: 13em;
  right: 19em;
  animation: rotation-fleur 10s linear infinite;
  width: 13%;
  height: auto;
}
.images-menu img.hibiscus {
  right: -300px;
  bottom: -275px;
  animation: rotation-fleur 10s linear infinite;
  height: auto;
  filter: blur(4px);
}
.images-menu img.flower-random {
  right: -35px;
  top: 30em;
  animation: rotation-fleur 10s linear infinite;
  width: 5%;
  height: auto;
}
.images-menu img.catpurple {
  top: 16em;
  left: 21em;
  animation: float 2s infinite ease-in-out;
  width: 10%;
  height: auto;
}
.images-menu img.cat-orange {
  top: 58em;
  left: 7em;
  animation: float 2.5s infinite ease-in-out;
  width: 9%;
  height: auto;
}
.images-menu img.cat-grey {
  top: 43em;
  right: 18em;
  animation: float 1.8s infinite ease-in-out;
  width: 9%;
  height: auto;
}

@keyframes float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(-5px, -5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes floatBanner {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-12px, -13px, 0);
  }
  100% {
    transform: translate3d(-15px, 10px, 0);
  }
}
@keyframes rotation-fleur {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 600px) {
  .menu-on ul li {
    font-size: 50px;
  }
}
body.burger {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

@media screen and (max-width: 850px) {
  html {
    overflow-x: hidden;
  }
}
@media (max-width: 768px) {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 2rem;
  }
}/*# sourceMappingURL=theme.css.map */