html, body {
    overflow-x: hidden;
  }

  


.gba {
  width: 712px;
  height: 367px;
  background: url("../../images/gba.png") no-repeat center center;
  background-size: cover;
  position: relative;
}

/* Z-INDEX ajoutés pour chaque élément */

.gba {
  z-index: 0;
}

.cross-button, .a-button, .b-button, .select-button,
.start-button, .studiomacmac {
  z-index: 2;
}

.up-button, .down-button, .left-button, .right-button {
  z-index: 3;
}

.l-button, .r-button {
  z-index: 1;
}

.l-click, .r-click {
  z-index: 4;
}

.video-wrapper {
  z-index: 10;
}

#closeVideoBtn {
  z-index: 20;
}

#startOverlay {
  z-index: 30;
}

#easterEggContainer {
  z-index: 0;
}

.meteo-button, .contact-button, .news-button, .infos-button {
  z-index: -2;
}

  /* Positionnement des éléments console */
  .meteo-button, .contact-button, .news-button, .infos-button,
  .cross-button, .r-button, .down-button, .right-button,
  .left-button, .up-button, .l-button, .b-button,
  .a-button, .select-button, .start-button, .studiomacmac {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    overflow: hidden;
    opacity: 1;
  }

.meteo-button     { width: 65px; height: 65px; background-image: url("../../images/meteo-button.png"); top: 95px; left: 270px; }
.contact-button   { width: 65px; height: 65px; background-image: url("../../images/contact-button.png"); top: 171px; left: 380px; }
.news-button      { width: 65px; height: 65px; background-image: url("../../images/news-button.png"); top: 95px; left: 380px; }
.infos-button      { width: 65px; height: 65px; background-image: url("../../images/infos-button.png"); top: 171px; left: 270px; }

.cross-button     { width: 113px; height: 113px; background-image: url("../../images/cross-button.png"); top: 94px; left: 70px; }
.r-button         { width: 118px; height: 52px; background-image: url("../../images/r-button.png"); top: 17px; left: 526px; }
.down-button      { width: 37px; height: 35px; background-image: url("../../images/down-button.png"); top: 161px; left: 108px; }
.right-button     { width: 33px; height: 37px; background-image: url("../../images/right-button.png"); top: 132px; left: 138px; }
.left-button      { width: 33px; height: 36px; background-image: url("../../images/left-button.png"); top: 133px; left: 81px; }
.up-button        { width: 37px; height: 34px; background-image: url("../../images/up-button.png"); top: 104px; left: 108px; }
.l-button         { width: 116px; height: 51px; background-image: url("../../images/l-button.png"); top: 16px; left: 70px; }
.b-button         { width: 37px; height: 37px; background-image: url("../../images/b-button.png"); top: 137px; left: 542px; }
.a-button         { width: 37px; height: 37px; background-image: url("../../images/a-button.png"); top: 115px; left: 594px; }
.select-button    { width: 14px; height: 14px; background-image: url("../../images/select-button.png"); top: 256px; left: 160px; }
.start-button     { width: 14px; height: 14px; background-image: url("../../images/start-button.png"); top: 225px; left: 160px; }
.studiomacmac     { width: 209px; height: 31px; background-image: url("../../images/studiomacmac.png"); top: 264px; left: 253px; }

button.clickable {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Vidéo */
  .video-wrapper {
  display: none; /* la vidéo est cachée au début */
  width: 290px;
  height: 182px;
  border-radius: 1.2rem;
  overflow: hidden;
  position: absolute;
  top: 75px;
  left: 210px;
  background: black;
  z-index: 10;
}

  .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  

  #videoControls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 20;
  }

  .video-wrapper:hover #videoControls {
    opacity: 1;
    pointer-events: auto;
  }

  #startOverlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    pointer-events: none;
  }

  #startOverlay button {
    background: none;
    border: none;
    cursor: pointer;
    pointer-events: auto;
  }

  #startOverlay button svg {
    width: 100px;
    height: 100px;
  }

  .icon-container {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .custom-btn:hover {
    transform: scale(1.2);
  }

  .filled-icon svg {
    fill: white !important;
    stroke: white !important;
  }

  .lucide {
    stroke: white !important;
    fill: none !important;
  }

  #progress:focus {
    outline: none;
  }

  .video-wrapper .custom-btn svg {
    width: 100%;
    height: 100%;
  }

/* Zones cliquables réduites */
.l-click, .r-click {
  width: 100px;
  height: 30px;
  top: 25px;
  position: absolute;
  z-index: 50;                      /* au-dessus des autres éléments */
}
.l-click {
  left: 80px;
}
.r-click {
  left: 548px;
}

#closeVideoBtn {
  width: 24px;
  height: 24px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 0.2s;
}
#closeVideoBtn:hover {
  transform: scale(1.1);
}

.video-wrapper .video-control-element {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

#videoTitle {
  max-width: 260px; /* largeur maximale autorisée, légèrement inférieure à 290px (la vidéo) */
  white-space: nowrap; /* reste sur une seule ligne si possible */
  overflow: hidden; /* cache le dépassement */
  text-overflow: ellipsis; /* ajoute "…" si trop long */
}

#videoTitle.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}



@keyframes shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0, -1px); }
  50%  { transform: translate(0, 1px); }
  75%  { transform: translate(0, -1px); }
  100% { transform: translate(0, 0); }
}

.gba.shake {
  animation: shake 0.2s;
}/* V5 : les quatre rubriques doivent rester au-dessus du décor et cliquables. */
.meteo-button,.contact-button,.news-button,.infos-button{z-index:5!important;pointer-events:auto!important}
.gba{z-index:25!important;position:fixed!important}

/* V14 : conserver le bouton Infos comme repère visuel, sans ouvrir de rubrique. */
.infos-button{display:block!important;visibility:visible!important;opacity:1!important}