/* ========================================================= */
/* 🌙 LIGHT / DARK MODE — TOGGLE BUTTON + TRANSITION OVERLAY */
/* (EXTRAIT BOUTON-ONLY — rien d’autre)                       */
/* ========================================================= */


/* ----------------------------- */
/* 1) TOGGLE WRAPPER + CURSOR    */
/* ----------------------------- */

.moon-container {
  display: inline-block;
  text-align: left;
}

/* Curseur : 1 règle pour tout le widget */
.moon-container,
.moon-container * {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}


/* ----------------------------- */
/* 2) TOGGLE IMAGES (DESKTOP/MOBILE) */
/* ----------------------------- */

#toggleImage,
#toggleImagePortrait {
  width: 160px;
  height: 160px;
}


/* ----------------------------- */
/* 3) TOGGLE TEXT (DESKTOP/MOBILE) */
/* ----------------------------- */

#modeText,
#modeTextPortrait {
  margin-top: 0;
  font-size: 12px;
  transition: opacity 1s ease;
}


/* ----------------------------- */
/* 4) BUTTON STATE SWAP (LIGHT/DARK) */
/* ----------------------------- */
/* Light mode : le bouton propose de passer en dark */
body.light-mode .gif {
  content: url('../assets/BUTTON_dark.webp');
}
body.light-mode .gif:hover {
  content: url('../assets/BUTTON_rotating_moon.webp');
}

/* Dark mode : le bouton propose de passer en light */
body.dark-mode .gif {
  content: url('../assets/BUTTON_light.webp');
}
body.dark-mode .gif:hover {
  content: url('../assets/BUTTON_rotating_moon.webp');
}

/* Optionnel : état pressé (si tu veux une réaction au clic) */
body.dark-mode .gif:active {
  content: url('../assets/BUTTON_dark.webp');
}


/* ----------------------------- */
/* 5) PAGE TRANSITION (FADE OUT) */
/* ----------------------------- */

body.transition-active {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}


/* ----------------------------- */
/* 6) FULLSCREEN OVERLAY IMAGE   */
/* ----------------------------- */

#full-screen-image {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
}

/* Visible uniquement pendant la transition */
body.transition-active #full-screen-image {
  opacity: 1;
}