/* ============================================================
   RALLUMONS LES ÉTOILES
   MENU PRINCIPAL + SOUS-MENU
   ============================================================ */

 .fade-in {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    display: block !important;
  }
  .fade-out {
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
    display: none !important;
  }
  .fade-in.active {
    opacity: 1;
  }


/* ============================================================
   LOGO
   ============================================================ */

#rle-menu-logo {
  display: block;
  cursor: pointer;
}


/* ============================================================
   POPUP D'INDICATION "MENU"
   ============================================================ */

.logo {
  position: relative;
}


#rle-menu-hint {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  z-index: 1000;
  padding: 7px 11px;

  background: rgba(0, 0, 0, .88);
  color: #fff;

  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 5px;

  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 1;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transition: opacity .25s ease, visibility .25s ease;
}


#rle-menu-hint.is-visible {
  opacity: 1;
  visibility: visible;
}


#rle-menu-hint::before {
  content: "";

  position: absolute;

  top: 50%;
  left: -5px;

  width: 9px;
  height: 9px;

  background: rgba(0, 0, 0, .88);
  border-left: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transform: translateY(-50%) rotate(45deg);
}


/* ============================================================
   OVERLAY GLOBAL
   ============================================================ */

#rle-menu {
  position: fixed;

  inset: 0;

  z-index: 2147483000;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  background: rgba(0, 0, 0, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}


#rle-menu.is-open {
  opacity: .95;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.5s ease, visibility 0s linear 0s;
}


/* ============================================================
   CONTENEURS
   ============================================================ */

#rle-menu-primary,
#rle-menu-secondary {
  position: absolute;
  inset: 0;

  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}


/* ============================================================
   MENU PRINCIPAL
   ============================================================ */

#rle-menu-primary {
  display: flex;
}

#rle-menu.is-open:not(.is-secondary) #rle-menu-primary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.5s ease, visibility 0s linear 0s;
}


#rle-menu-primary > img {
  display: block;

  width: min(974px, 96vw);

  height: auto;

  max-height: 94dvh;

  object-fit: contain;

  /*
   * Transparence demandée.
   */

  opacity: 0.81;

  transition:
    opacity .25s ease;
}


/*
 * L'image devient légèrement plus visible
 * lorsqu'une zone est survolée.
 */


/* ============================================================
   SOUS-MENU
   ============================================================ */

#rle-menu-secondary {
  display: flex;
}


#rle-menu-secondary > img {
  display: block;
  width: min(441px, 100vw);
  height: auto;
  max-height: 94dvh;
  object-fit: contain;
  opacity: 1;
  transition: opacity .25s ease;
}



/* ============================================================
   BASCULE MENU PRINCIPAL / SOUS-MENU
   ============================================================ */

#rle-menu.is-secondary #rle-menu-primary {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


#rle-menu.is-secondary #rle-menu-secondary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.5s ease, visibility 0s linear 0s;
}


/* ============================================================
   CONTENEUR TECHNIQUE DE LA MAP
   La map est utilisée par le JS comme source de coordonnées.
   Elle ne doit pas créer de mise en page.
   ============================================================ */

#rle-menu-secondary-map {
  display: none;
}


/* ============================================================
   COUCHE DES ZONES CLIQUABLES
   ============================================================ */

.rle-menu-hotspots {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  pointer-events: none;
}


/* ============================================================
   ZONE CLIQUABLE
   ============================================================ */

.rle-menu-hotspot {
  position: absolute;
  display: block !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .035);
  outline: none;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rle-menu-hotspot.is-circle { border-radius: 50%; }


/* ============================================================
   SURVOL ZONE
   ============================================================ */

.rle-menu-hotspot:hover,
.rle-menu-hotspot:focus-visible {
  background:
    rgba(255, 255, 255, .16);

  border-color:
    rgba(255, 255, 255, .90);

  box-shadow:
    0 0 10px rgba(255, 255, 255, .70),
    0 0 22px rgba(255, 255, 255, .25),
    inset 0 0 12px rgba(255, 255, 255, .15);

  transform:
    scale(1.08);
}


/* ============================================================
   CLIC
   ============================================================ */

.rle-menu-hotspot:active {
  transform: scale(.96);
  background: rgba(255, 255, 255, .30);
}


/* ============================================================
   LABELS
   ============================================================ */

.rle-menu-label {
  position: absolute;
  z-index: 30;
  display: block;
  padding: 5px 9px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .88);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: .92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: opacity .2s ease, background .2s ease, border-color .2s ease;
  transform-origin : center;
}

.rle-menu-label:hover { transform:scale(1.12); opacity: 1;}



/* ============================================================
   SOUS-MENU : LABELS
   ============================================================ */

#rle-menu-secondary .rle-menu-label {
  font-size: 19px;
  padding: 4px 8px;
}


/* ============================================================
   BOUTON FERMER
   ============================================================ */

#rle-menu-close {
  position: absolute;

  top: 18px;
  right: 20px;

  z-index: 100;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255, 255, 255, .25);

  border-radius: 50%;

  background:
    rgba(0, 0, 0, .45);

  color: #fff;

  font-size: 30px;
  line-height: 1;

  cursor: pointer;

  transition: background .2s ease, transform .2s ease;
}


#rle-menu-close:hover {
  background: rgba(255, 255, 255, .28);
  transform: scale(1.28);
}


/* ============================================================
   BOUTON RETOUR
   ============================================================ */

#rle-menu-back {
  position: absolute;

  top: 18px;
  left: 20px;

  z-index: 100;

  display: none;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);

  color: #fff;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;

  transition: background .2s ease, transform .2s ease;
}


#rle-menu.is-secondary #rle-menu-back {
  display: flex;
}


#rle-menu-back:hover {
  background:
    rgba(255, 255, 255, .18);

  transform:
    scale(1.08);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

  #rle-menu-primary > img {
    width: 98vw;
  }


  #rle-menu-secondary > img {
    width: 98vw;
  }


  #rle-menu-close {
    top: 10px;
    right: 10px;
  }


  #rle-menu-back {
    top: 10px;
    left: 10px;
  }


  #rle-menu-hint {
    top: calc(100% + 12px);
    left: 50%;

    transform: translateX(-50%);
  }


  #rle-menu-hint::before {
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }


  .rle-menu-label {
    font-size: 19px;
    padding: 4px 7px;
  }

}


/* ============================================================
   RÉDUCTION DES ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  #rle-menu-primary > img,
  #rle-menu-secondary > img,
  .rle-menu-hotspot,
  .rle-menu-label,
  #rle-menu-close,
  #rle-menu-back,
  #rle-menu-hint {
    transition: none;
  }

}


/* ============================================================
   MENU DYNAMIQUE — IMAGE + ZONES CLIQUABLES + LABELS
   ============================================================ */

/*
 * Les conteneurs restent des calques plein écran afin de permettre
 * la transition du menu. Le JS positionne ensuite les hotspots et
 * les labels par rapport aux dimensions RÉELLES de l'image affichée.
 */
#rle-menu-primary,
#rle-menu-secondary {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;
  overflow: visible;

  background: transparent;
  border: 0;
  border-radius: 0;
}


/* ============================================================
   IMAGES DE FOND
   ============================================================ */

#rle-menu-primary > img,
#rle-menu-secondary > img {
  display: block;

  position: relative;
  z-index: 0;

  width: min(974px, 96vw);
  height: auto;
  max-width: 96vw;
  max-height: 94dvh;

  object-fit: contain;

  margin: 0;
  padding: 0;

  opacity: 0.81;
  transition: opacity .2s ease;
}


/* Le sous-menu utilise la même base 900x800 que le menu principal. */
#rle-menu-secondary > img {
  width: min(900px, 96vw);
}


/* Les maps natives ne servent que de source de coordonnées. */
#rle-menu-primary > map,
#rle-menu-secondary > map,
#rle-menuP,
#rle-menuS {
  display: none !important;
}


/* ============================================================
   COUCHE DES HOTSPOTS
   ============================================================ */

.rle-menu-hotspots {
  position: absolute;

  /*
   * Le JS remplace ces valeurs par la position exacte de l'image
   * dans le conteneur. Elles servent uniquement de valeur initiale.
   */
  left: 0;
  top: 0;
  width: 0;
  height: 0;

  z-index: 20;

  margin: 0;
  padding: 0;

  pointer-events: none;
}


/* ============================================================
   ZONE CLIQUABLE
   ============================================================ */

.rle-menu-hotspot {
  position: absolute;

  display: block !important;

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  border: 0;
  outline: none;
  border-radius: 4px;

  background: transparent;

  appearance: none;
  cursor: pointer;

  pointer-events: auto;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /*
   * IMPORTANT :
   * aucun transform ici. Un transform sur le hotspot décalait
   * visuellement sa géométrie par rapport au label.
   */
}

.rle-menu-hotspot.is-circle {
  border-radius: 50%;
}


/* ============================================================
   SURVOL ZONE
   ============================================================ */

.rle-menu-hotspot:hover,
.rle-menu-hotspot:focus-visible {
  background: rgba(255, 255, 255, .10);

  outline: 1px solid rgba(255, 255, 255, .55);

  box-shadow:
    0 0 10px rgba(255, 255, 255, .45),
    0 0 22px rgba(255, 255, 255, .18),
    inset 0 0 12px rgba(255, 255, 255, .10);
}

.rle-menu-hotspot:active {
  background: rgba(255, 255, 255, .18);
}


/* ============================================================
   LABELS DYNAMIQUES
   ============================================================ */

/*
 * Le label est centré exactement sur le centre de la <area>.
 * Le JS exprime left/top en pourcentage du calque qui épouse exactement
 * l'image. Les coordonnées de la map restent donc dans le même repère.
 */
#rle-menu-primary .rle-menu-label,
#rle-menu-secondary .rle-menu-label {
  position: absolute;

  z-index: 30;

  display: block !important;

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  width: max-content;
  max-width: none;

  background: transparent;
  border: 0;
  box-shadow: none;

  color: #fff;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;

  line-height: 1;

  text-align: center;
  white-space: nowrap;

  pointer-events: none;

  /*
   * Le point de positionnement est le centre du texte.
   * Cela évite le décalage vertical introduit par les anciens
   * padding/line-height.
   */
  transform: translate(-50%, -50%);

  /*
   * Ombre nette et symétrique autour du texte.
   */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 0 5px rgba(0, 0, 0, .95);

  opacity: 1;

  transition: opacity .2s ease;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

  #rle-menu-primary > img,
  #rle-menu-secondary > img {
    width: 98vw;
    max-width: 98vw;
  }

  #rle-menu-close {
    top: 10px;
    right: 10px;
  }

  #rle-menu-back {
    top: 10px;
    left: 10px;
  }

  #rle-menu-hint {
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
  }

  #rle-menu-hint::before {
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

}


/* ============================================================
   RÉDUCTION DES ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #rle-menu-primary > img,
  #rle-menu-secondary > img,
  .rle-menu-hotspot,
  .rle-menu-label,
  #rle-menu-close,
  #rle-menu-back,
  #rle-menu-hint {
    transition: none;
  }
}


/* ============================================================
   ÉLÉMENTS CRÉÉS DYNAMIQUEMENT
   ============================================================ */

#rle-menu-primary-image,
#rle-menu-secondary-image {
  position: relative;
  z-index: 0;
}

#rle-menuP,
#rle-menuS {
  display: none !important;
}

/* ============================================================
   NAVIGATION DEPUIS LE SOUS-MENU
   Fade-out de l'ensemble du menu avant changement de page
   ============================================================ */

#rle-menu.is-open.is-navigating {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .5s ease,
    visibility 0s linear .5s;
}