@import url('variables.css');
@import url('base.css');
@import url('typography.css');
@import url('buttons.css');
@import url('forms.css');




:root {
  /* couleur primary et ses gradients */
  --bs-primary: #F23D2E;
  --bs-primary-100: #FFE3E1;
  --bs-primary-200: #FFCDC9;
  --bs-primary-300: #F23D2E;
  --bs-primary-600: #E03122;
  --bs-primary-700: #BD2518;
  --bs-primary-800: #9C2218;

  /* couleur secondary et ses gradients */
  --bs-secondary: #00BBF9;
  --bs-secondary-50: #effaff;
  --bs-secondary-100: #def4ff;
  --bs-secondary-200: #b6ebff;
  --bs-secondary-600: #0095d4;
  --bs-secondary-700: #0077ab;
  --bs-secondary-800: #00648d;

  /* couleur tertiary et ses gradients */
  --bs-neutral: #20232b;
  --bs-neutral-200: #d0d0d1;
  --bs-neutral-300: #b0b0b0;
  --bs-neutral-400: #818182;
  --bs-neutral-600: #5d5d5d;
  --bs-neutral-950: #06080f;

  --bs-dark: #06080F;
}



.cadre {
  border: 1px solid #333;
}

#films .container {
  padding: 20px;
}

#menulist {
  height: 100%;
  text-align: center;
  z-index: 100;
  border-top: 1px solid #555;
  margin-top: 10px;
  background-color: black;
}

#menulist.visible {
  display: block;
  z-index: 200;
}

#menulist ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: fit-content;
}

#menulist ul li {
  padding: 20px 0;
}


#menulist ul li a {
  color: #5d5d5d;
  text-decoration: none;
  font-size: 16px;
  font-family: 'Bricolage grotesque', sans-serif;
}

#close {
  color: white;
  cursor: pointer;
}

#blackground {
  background-color: black;
  position: absolute;
  top: 10%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 100;
}



/* ----------- style section par section */
/* Vector 1 */
#fondDegrade {
  position: absolute;
  background: linear-gradient(to right, #00BBF9, #F23D2E);
  width: 100%;
  height: 473px;
  top: 72.34px;
  filter: blur(180px);
  border-radius: 4.88035px;
  transform: rotate(142.24deg);
  opacity: 0.33;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  z-index: 2;
}

#bandeau {
  font-family: 'Rubik', sans-serif;
  margin: 50px 0;
}

ul#rules {
  margin-top: 16px;
  margin-bottom: 16px;
  padding-left: 20px;
  color: #818182;
  list-style-type: circle;
  font-family: "Figtree", Helvetica;
  font-size: 18px;
}

@media (max-width: 1024px) {
  #fondDegrade {
    width: 90%;
  }
}

#logoText {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.navbar {
  position: sticky !important;
  top: 0;
  z-index: 50;
}

.nav-item {
  padding-right: 56px;
}

.nav-item.active a {
  color: white !important;
}

#introduction {
  margin-bottom: 64px;
  margin-top: 140px;

}

#equipe {
  padding-top: 50px;
}

@media (min-width: 1024px) {
  #introduction {
    margin-bottom: 64px;
  }

}

@media (min-width: 769px) and (max-width: 1023px) {
  #menu {
    flex: 0 0 768px;
  }

  .nav-item {
    padding-right: 0px;
  }


}


@media (max-width: 768px) {
  #menu {
    flex: 0 0 100%;
  }

  #introduction {
    margin-top: 80px;
  }

  #fondDegrade {
    width: 60%;
  }
}


/* image animée */
.img-container {
  width: 100%;
  /* Le conteneur prend 100% de la largeur de son parent */
  height: 601px;
  /* Ou une hauteur fixe pour l'image */
  overflow: hidden;
  /* Très important : masque ce qui dépasse */
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .img-container {
    height: 346px;
  }
}

#animated-image {
  /* L'image doit être plus large que son conteneur pour pouvoir bouger */
  width: 150%;
  /* Exemple : l'image est 1.5 fois plus large que le conteneur */
  height: 100%;
  /* L'image prend toute la hauteur du conteneur */
  object-fit: cover;
  /* Recadre l'image pour couvrir l'espace sans la déformer */
  /* Positionnement pour l'animation */
  position: absolute;
  top: 0;
  left: 0;
  animation: slideHorizontal 30s ease-in-out infinite alternate;

  /* Optimisations pour la fluidité */
  will-change: transform;
  /* Prépare le navigateur pour l'animation */
  backface-visibility: hidden;
  /* Évite les scintillements */
}

/* Définition des étapes de l'animation */
@keyframes slideHorizontal {
  0% {
    transform: translateX(0);
    /* Position de départ */
  }

  100% {
    transform: translateX(-30%);
    /* Déplace de 33.33% vers la gauche */
    /* Calcul : si l'image fait 150% et le conteneur 100%, 
           pour voir la partie droite, on doit déplacer de (150-100)/150 = 33.33% */
  }
}



/* margin sections */
@media (max-width: 768px) {
  .conteneurPhone {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer {
    padding-left: 16px !important;
  }

  #bandeau {
    margin-top: 40px;
    margin-bottom: 32px;
  }

  #equipe {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  #defi {
    margin-top: 20px;
    margin-bottom: 48px;
  }

  #rdzvous {
    margin-bottom: 32px;
  }

  #menu {
    max-width: 90% !important;
  }


  #films,
  #footer {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media (min-width: 768px) {


  #defi {
    margin-top: 50px;

    margin-bottom: 112px;
  }

  #rdzvous {
    margin-bottom: 112px;
  }

  #footer {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

/*------------- A propos */

#surlign {
  position: absolute;
  height: 6.99px;
  top: 100%;
  /* Ajuste la position verticale pour le surlignage */
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  transform: rotate(-1.78deg);

  /* Inside auto layout */
  /* flex: none;
order: 2;
flex-grow: 0;
z-index: 2; */

}

#surlign svg {
  width: 100%;
  /* Le SVG prend 100% de la largeur de sa div parente (#surlign) */
  height: 100%;
  /* Le SVG prend 100% de la hauteur de sa div parente (#surlign) */
  display: block;
  /* Supprime les petits espaces blancs en bas de l'SVG */
}

/* icones decoration pour grands ecrans */
#line1 {
  position: absolute;
  width: 9.68px;
  height: 0px;
  right: 33px;
  bottom: 296px;
  background: #E8F1FE;
  border-radius: 16px;
  /* Colors/neutral/0 */
  border: 2.42818px solid #FFFFFF;
  transform: matrix(-0.07, 1, 1, 0.07, 0, 0);
}

#line2 {
  position: absolute;
  width: 15.87px;
  height: 0.47px;
  right: 0px;
  bottom: 290px;
  background: #E8F1FE;
  /* Colors/neutral/0 */
  border: 2.42818px solid #FFFFFF;
  transform: matrix(-0.76, 0.65, 0.64, 0.77, 0, 0);
  border-radius: 16px;
}

#starWithLines {
  position: absolute;
  right: 0px;
  bottom: 260px;
}

#ticketsE {
  position: absolute;
  left: 20px;
  bottom: 0px;
  z-index: 2;
}

/* cartes */

#carteDefis {

  backdrop-filter: blur(9.1px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 30px;
}

#carteFilms {

  border-radius: 30px;
}

div {
  /* border: 1px solid red; */
}




@media (max-width: 768px) {

  #carteDefis,
  #carteFilms {
    flex: 1;
    /* Les cartes prennent tout l'espace disponible */
    min-width: 360px;
    /* Hauteur minimale pour éviter qu'elles soient trop petites */
  }

  #carteDefis {
    left: 0 !important;
  }

  #ticketsE {
    position: absolute;
    left: 200px;
    top: 48%;
    z-index: 2;
  }

}

@media (min-width: 1000px) {
  #aProposRight {
    /* min-height: 527px; */
    max-width: 621px;
  }

  #carteDefis,
  #carteFilms {
    height: 283px;
  }

  #carteFilms {
    position: absolute;
    bottom: 244px;
    left: 0px;
    max-width: 384px;
    max-height: 283px;
  }

  #carteDefis {
    position: absolute;
    bottom: 0px;
    z-index: 1;
    max-width: 417px;
    max-height: 283px;
    right: 20px;
  }
}

@media (max-width: 2000px) {
  #ticketsE {
    left: -80px;
  }

}

@media (max-width: 991px) {
  #ticketsE {
    display: none;
  }


}

@media (min-width: 768px) {
  #aProposRight {
    /* min-height: 527px; */
    max-width: 621px;
  }

  #carteDefis,
  #carteFilms {
    height: 283px;
  }

  #carteFilms {
    position: absolute;
    bottom: 244px;
    left: 0px;
    max-width: 384px;
    max-height: 283px;
  }

  #carteDefis {
    position: absolute;
    bottom: 0px;
    z-index: 1;
    max-width: 417px;
    max-height: 283px;
    right: 20px;
  }

}


/* ---------Infos essentielles */

#clapInfos {
  position: absolute;
  top: 25.7px;
  left: 10.72px;
  z-index: 1;
  transition: transform 0.3s ease-out;
  /* Optionnel: Point d'origine de la transformation si vous utilisez des rotations ou échelles */
  transform-origin: center center;
}

#cadreGrosClap:hover {
  #clapInfos {
    transform: translate(4px, -4px)rotate(-5deg);
  }
}

@media (min-width: 768px) {
  #btnEnvoiFilm2 {
    position: absolute;
    right: 48px;
    top: 48px;
  }
}

@media (min-width: 1200px) {
  #defisLeft {
    flex: 0 0 768px;
    max-width: 768px;
  }

  #defisRight {
    flex: 0 0 424px;
    max-width: 424px;
  }

  #films {
    padding: 114px 64px;
  }

  #equipe {
    padding: 80px 64px;
  }
}

#popCorn {
  position: absolute;
  right: 0px;
  top: 10px;
  transition: transform 0.8s ease-out;
  /* Optionnel: Point d'origine de la transformation si vous utilisez des rotations ou échelles */
  transform-origin: center center;
}

#cadrePopcorn:hover {
  #popCorn {
    transform: translate(8px, -8px)rotate(5deg);
  }
}

@media (max-width: 768px) {
  #imgProjection {
    height: 250px;
  }

}



.tagFilm {
  left: 16px;
  top: 16px;
  border-radius: 16px;
  padding: 10px;
  color: white;
  font-size: 15px;
}


/* equipe */
.tagEquipe {
  border-radius: 16px;
  padding: 10px;
  width: 90%;
  margin: auto;
  text-align: center;
}

.team {
  width: 292px;
  height: 320px;
}

#equipe .carousel-item {
  margin: 0px auto;
  float: none !important;
}

.audrey img {
  mix-blend-mode: luminosity;
}

.jonathanCitation,
.audreyCitation,
.simonCitation,
.maxCitation {
  position: absolute;
  width: 260px;
  height: 60px;
  top: 40%;
  left: 16px;
  z-index: 10;
  display: none;

}

.jonathan:hover img,
.audrey:hover img,
.simon:hover img,
.max:hover img {
  filter: blur(7px);
  transition: filter 0.3s ease;
}


.image-wrapper {
  width: 100%;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
}


/* footer */
/* #ellipseFooter {
  position: absolute;
  width: 821px;
  height: 452.32px;
  left: -297.26px;
  top: 175.5px;
  background: rgba(0, 187, 249, 0.2);
  mix-blend-mode: lighten;
  filter: blur(176.433px);
  transform: rotate(-40.66deg);
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
  border-radius: 0;
} */



#ellipseFooter {
  position: absolute;
  width: 70%;
  height: 600px;
  left: -25%;
  top: 250px;
  background: rgba(0, 187, 249, 0.15);
  mix-blend-mode: lighten;
  filter: blur(150px);
  transform: rotate(-40.66deg);
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
  border-radius: 50%;
}

#footer {
  position: relative;
  overflow: hidden;
}