:root {
  --vh: 1vh; /* Valor inicial por defecto */
  --blue: #00629d;
  --orange: #f1ae2b;
  --dark-blue: #23479c;
  --magenta: #ce0787;
}
.bg-orange {
  background-color: var(--orange);
}
.bg-dark-blue {
  background-color: var(--dark-blue);
}
.actualite-button {
  width: 215px;
  padding: 10px;
  border-radius: 50px;
  text-align: center;
  color: #fff;
}
body .wload {
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
body:not(.loading) .wload {
  visibility: visible;
  opacity: 1;
}
.hidden {
  display: none !important;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen {
  width: 100vw;
  /* height: calc(var(--vh) * 100); */
}

/* Generales */
body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: josefin-sans;
  font-weight: 400;
  font-style: normal;
  color: var(--blue);
  height: 100%;
  display: flex;
  gap: 0;
  flex-direction: column;
  /*background-image: url(../v2/img/bg.jpg);*/
  background-size: cover;
  background-attachment: fixed;
  justify-content: space-between;
  background-position: center center;
  font-size: 11.5px;
  background: linear-gradient(56deg, #91BFE9, #ffffff, #D9BFFE);
}
body::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 0;
}
img {
  max-width: 100%;
}
.menu-divider {
  height: 4px;
  width: 100%;
  background-image: url(../v2/img/divider.jpg);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
}
.remarque {
  font-size: 8px;
  padding: 5px;
}
/* Sections Page */

.disney_logo {
  display: flex;
  align-self: center;
  width: 100%;
  margin: 0 auto;
  /* flex: 1; */
  /* position: relative; */
  flex-direction: column;
  position: absolute;
}
.disney_logo img {
  width: 60%;
  margin: 0 auto -40px;
}

#sections .image {
  /* flex: 1; */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#sections .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-slogan {
  color: #fff;
  text-align: center;
  font-size: 1.6rem;
}
.no-padding {
  padding: 0;
}
#sections .top {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* height: 50%; */
  /*background-image: url(../img/home-top.png);
        background-size: 100% auto;
        background-position: top center;
        width: 100%;
        background-repeat: no-repeat;*/
  flex: none;
}
.section_menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 50px;
  position: relative;
  z-index: 2;
  min-height: 0;
  overflow: visible;
  max-height: 100%;
  /* flex: 1; */
  /* flex-grow: 1; */
}
.cse .section_menu {
    padding: 20px;
}

#sections .top img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.section_menu_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: none;
  padding: 0px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  min-height: 0vh;
  justify-content: flex-start;
  overflow: visible;
  padding-bottom: 10px;
}
.section_menu_item label {
  font-size: 1rem;
}
.section_menu_item img {
  height: auto;
}
#sections .section_menu_item img:first-child {
  max-height: 80%;
}
#sections .section_menu_item label {
  flex: 1;
  flex-grow: 1;
  overflow: visible;
  color: #00629d;
}
.section_menu.items-3 .section_menu_item:nth-child(3) {
    grid-column: 1 / span 2 !important;
    /* max-width: 50%; */
    margin: 0 calc(25% + 12.5px);
}
.note {
  scale: 0.8;
}
.ae1 {
  left: 0;
  top: 0;
}
.ae2 {
  left: 0;
  top: 0;
}
.ae3 {
  right: 0;
  bottom: 20%;
}
.ae4 {
  left: 0;
  top: 0;
}
.ae5 {
  left: 0;
  bottom: 20%;
}
.ae6 {
  left: 0;
  top: 0;
}
.ae7 {
  right: 0;
  bottom: 20%;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 10px;
  min-height: 0vh;
  overflow: visible;
  height: 100%;
  justify-content: start;
}
.page-padding {
  padding: 40px 0 20px;
}
div#amuzez,
div#info {
  justify-content: start;
}
div#amuzez {
  gap: 2%;
  margin-top: 3vh;
}
#sections .content_brand {
  /* Responsive sizing */
  width: 40.833vw; /* (294/720)*100 ≈ 40.833% of viewport */
  height: 12.5vw; /* (90/720)*100 ≈ 12.5% of viewport */
  max-width: 294px; /* Optional: Limits growth on large screens */
  max-height: 90px; /* Optional: Limits growth on large screens */

  /* Background styling */
  background-image: url("../v2/img/brand_bg.png");
  background-size: 100% 100%; /* Stretches to fill container */
  background-position: center;
  background-repeat: no-repeat;

  /* Centering the container (if needed) */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sections #brand {
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* background video */
#home_bg_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

#videoContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

#camera,
#shot {
  position: absolute;
  width: 100vw;
  height: calc(var(--vh) * 100);
  object-fit: cover;
  z-index: -1;
}

#pageContainer {
  overflow-y: hidden;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  width: auto;
  z-index: 5;
  gap: 10px;
  max-height: 100%;
  flex: 1;
  height: 100%;
  overflow-x: hidden;
}

#faceOverlay {
  position: absolute;
  display: none !important;
}

#bottom_gif {
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  max-width: 100%;
}

.back {
  z-index: 1000;
  padding: 10px;
  border-radius: 10px;
  align-self: flex-start;
  margin: 0px;
  display: none;
  text-transform: uppercase;
}

div.footer {
  background-image: url(../v2/img/footer-bg.jpg);
  background-size: cover;
  justify-items: center;
  gap: 5px !important;
  display: flex;
  flex-direction: column;
  padding: 5px;
  filter: brightness(1);
}

.partner_logo {
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 9;
  max-height: 6vh;
  padding: 5px;
  max-width: 50%;
}
.disney-copy{
    display:none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 12px;
}
.home-footer .disney-copy {
    display:flex!important;
}
.footer.home-footer {
  background: none !important;
  position: relative;
}
.home-footer .partner_logo {
  background-image: url(../v2/img/brand_bg.png) !important;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 10px 5px 5px;
  margin-bottom: -5px;
  min-width: 160px;
  min-height: 36px;
}

.partner_logo img {
  object-fit: contain;
  height: auto;
  max-height: 36px;
  max-width: 94%;
}
.selectour .partner_logo img {
  max-height: 55px;
}
.selectour .partner_logo {
  padding: 5px;
  margin-bottom:-10px;
}
.title_disney {
  position: absolute;
  width: calc(var(--vh) * 42);
  height: auto;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  top: calc(var(--vh) * -2);
  left: 50%;
  margin-left: calc(var(--vh) * -21);
}
.title_disney img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bottom_menu {
  justify-self: end;
  width: 100%;
  bottom: 0;
  padding: 0;
  font-size: 1em;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 0;
  display: none;
  z-index: 9;
}
div#bottom_menu .selected label {
  color: var(--magenta);
}
.menu-wrapper {
  gap: 2px;
  width: 98%;
  color: #253050;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.menu-item {
  /* Una fila para la imagen y otra para el texto */
  justify-items: center; /* Centra horizontalmente */
  align-items: center; /* Alinea verticalmente al inicio */
  text-align: center; /* Centra el texto dentro de cada celda */
  position: relative;
  flex-direction: column;
  display: flex;
  flex: 1;
  gap: 5px;
  height: 100%;
}
.menu-item > label {
  display: flex;
  flex-grow: 1;
  align-items: end;
  color: var(--blue);
  font-size: 0.9rem;
}
.menu-item > img {
  height: 22px;
  flex: 1;
  object-fit: contain;
  height: calc(var(--vh) * 4.5);
  visibility: hidden;
}

.menu-item:not(.selected) img {
  visibility: hidden;
}

.menu-item.selected img {
  visibility: visible;
  height: 15px;
}

#notes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#captureButton {
  position: fixed;
  top: 5vh;
  right: 2vw;
  padding: 5px 10px;
  color: white;
  background: linear-gradient(90deg, #00619a, #008cc7);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  z-index: 10;
  margin-left: -25%;
}

#captureButton:hover {
  background: linear-gradient(90deg, #00619a, #008cc7);
}

#filter .content_brand {
  display:none;
}

#filter .content_brand img {
  width: 80%;
  height: auto;
}

#filter .title {
  position: absolute;
  width: auto;
  height: calc(var(--vh) * 32);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  top: calc(var(--vh) * 5);
  left: 50%;
  transform: translate(-50%, 0);
}
#filter .title img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

div#song_image {
  height: 100%;
  display: flex;
  align-items: anchor-center;
}

div#song {
  height: 100%;
}

#song_image img {
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
}

#videoPlay {
  height: 100%;
  display: block;
  justify-content: center;
  align-items: center;
  z-index: 10;
  /* max-height: 100%; */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: auto;
  /* flex: 1; */
}

#videoPlay video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.closeVideo {
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 32px;
  padding: 5px;
  background-color: #000000;
  color: #ffffff;
  z-index: 99;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 0;
}

#volume {
  position: absolute;
  top: 5%;
  left: 5%;
  font-size: 20px;
  padding: 5px;
  background-color: red;
  color: #ffffff;
  z-index: 99;
  width: 32px;
  height: 32px;
  text-align: center;
  border-radius: 50%;
}

#volume.on {
  background-color: green;
}

#video .content_buttons {
  width: 80%;
  left: 50%;
  margin-left: -40%;
  position: absolute;
  top: calc(var(--vh) * 55);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#video .button {
  background: linear-gradient(90deg, #00619a, #008cc7);
  color: #ffffff;
  font-size: calc(var(--vh) * 2.5);
  text-align: center;
  float: left;
  clear: both;
  border-radius: 30px;
  width: 100%;
  padding: calc(var(--vh) * 2) 0;
  margin-bottom: calc(var(--vh) * 1.1);
  text-decoration: none;
}

#video .content_buttons #call {
  display: none;
}

#video .content_buttons #budget {
  display: none;
}

#video .content_buttons.v2 {
  width: 65%;
  margin-left: -32.5%;
}

#video .content_buttons.v2 .button {
  font-size: calc(var(--vh) * 2.3);
  padding: calc(var(--vh) * 1) 0;
}

#video .content_buttons.v2 #call {
  display: block;
}

#video #loading-video {
  bottom: 10px;
  left: 10%;
  width: 80%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  overflow: hidden;
  display: none;
  border: 1px solid #fff;
  position: absolute;
  justify-content: center;
}

#video #loading-bar {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  transition: width 0.2s ease;
}

#video #loading-text {
  font-size: 12px;
  padding: 4px;
}

#actualite .page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 10px;
  min-height: 100vh;
  overflow: clip;
}
#actualite .content_events {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow: hidden;
}
#actualite .content_events .event {
  width: 100%;
  height: 50%; /* Changed from auto to 50% */
  position: relative;
  left: 0;
  float: left;
  clear: both;
  border-radius: 10px;
  flex: 1;
  overflow: hidden;
}
#actualite .content_events .event .image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px !important;
}
#actualite .content_events .event img {
  /* width: 67%; */
  height: 50%;
  object-fit: contain;
}

#festival .section_menu {
  gap: 10px;
  /* height: 100%; */
  overflow: hidden;
}
div#festival {
  height: 100%;
  overflow: hidden;
}

.section_menu_item img:first-child {
  width: auto;
  max-height: 100%;
  max-width: 100%;
}
img.festival-button {
  width: calc(100vw * 250 / 720);
}
.reserver_button {
  display: none;
}
img.amuzez-button,
img.info-button {
  width: calc(100vw * 589 / 720);
  border-radius:50px;
}

.text-center {
  text-align: center;
}

div#info, div#playlist {
  gap: 20px;
  margin-top: 40px;
}
.info_title {
  font-size: 2.2rem;
  text-align: center;
  background: -webkit-linear-gradient(left, #3838c4, #c60a8a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.info_buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

div#festival {
  gap: 5px;
  font-size: 12px;
}
a#video_link {
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.note {
  position: absolute;
  overflow: visible;
  font-size: 24px;
  font-weight: bold;
  color: white;
  animation: fadeInOut 3s ease-in-out infinite;
  transform-origin: center; /* Ensure scaling and movement are centered */
  border: none;
  outline: none;
  box-shadow: none;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes moveNote {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(var(--x), var(--y));
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes rotateNote {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes scaleUpDown {
  0%,
  100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
}

#orientation-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  text-align: center;
  z-index: 9999;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  #orientation-warning {
    display: none;
  }
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
}
#filter #canvas {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
/*
@media only screen 
    and (width: 393px) 
    and (height: 852px) 
    and (-webkit-device-pixel-ratio: 3) { 
    #festival .section_menu img:first-child {
        height:12vh;    
    }
    
}
@media only screen 
    and (width: 390px) 
    and (height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { 
    #festival .section_menu img:first-child {
        height:12vh;    
    }
}
*/
.only-cse {
  display: none;
}
body.cse .only-cse {
  display: flex;
}
.only-cse-billetteries {
  display: none;
}
body.cse .only-cse-billetteries,
body.billetteries .only-cse-billetteries,
body.auchanbilletterie .only-cse-billetteries,
body.fnacspectacles .only-cse-billetteries,
body.carrefourspectacles .only-cse-billetteries
{
  display: flex;
}
.small {
  font-size: 0.85rem;
}
body.cse #sections .section_menu {
  /*grid-template-columns: repeat(1, 1fr);*/
  align-items: center;
  width: 96%;
}


.filter-brackets-container {
  position: fixed;
  top: 10%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
  overflow: hidden;
}

.filter-brackets-container video {
  width: 100%;
  height: auto;
  object-fit: cover;
}


.filter-footer-container {
  position: fixed;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 998;
  overflow: hidden;
}

.filter-footer-container video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#static-brackets{
    display:none;
}