/* =============================================
   RÉINITIALISATION
   ============================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =============================================
   MISE À PAGE GLOBALE
   ============================================= */
body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url('./IMAGES/FondEcranTerre.jpg') no-repeat center center fixed;
  background-size: cover;
  color: rgba(1, 2, 3); /* texte noir par défaut */
  transition: background 0.8s ease-in-out, color 0.8s ease-in-out;
}

body.fond-terre {
  background: url('./IMAGES/FondEcranAndromeda.png') no-repeat center center fixed;
  background-size: cover;
  color: white; /* texte devient blanc */
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4vh;
}

/* =============================================
   LIENS PRINCIPAUX & ICÔNES
   ============================================= */
.main-link {
  text-decoration: none;
  cursor: alias;
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 8px 12px;
  transition: color 0.9s ease-in-out, background-color 0.9s ease-in-out, border-color 0.9s ease-in-out;
  color: inherit; /* hérite la couleur du body */
  border: 1px solid transparent;
  border-radius: 7px;
}

/* Hover normal (fond Terre = texte noir → jaune au survol) */
body:not(.fond-terre) .main-link:hover {
  color: yellow;
  background-color: rgba(1, 2, 3, 0.5);
  border: 1px solid orange;
}

/* Hover quand le fond a changé (fond Andromeda) */
body.fond-terre .main-link:hover {
  color: white;
}

/* =============================================
   HEADER & FOOTER
   ============================================= */
header,
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96%;
  max-width: 1234px;
  margin: 9px auto;
  padding: 22px;
  background-color: rgba(1, 2, 3, 0.5);
  border: 1px solid white;
  border-radius: 9px;
  transition: 0.9s ease-in-out;
}

header:hover,
footer:hover {
  border: 1px solid #008FF0;
}

/* =============================================
   ÉTOILE PURE CSS (ÉtoileCiel)
   ============================================= */
.star {
  width: 33px;
  height: 33px;
  display: inline-block;
  background: rgba(1, 2, 3);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  border-radius: 10%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease-in-out, background 0.4s ease-in-out;
}

.hover-image-EtoileCiel:hover .star {
  background: white;
  transform: rotate(180deg);
}

/* =============================================
   ICÔNES INTERACTIVES
   ============================================= */
.hover-image-EtoileCiel,
.hover-image-LogIN,
.hover-image-EtoileDeMer,
.hover-image-Globe {
  position: relative;
  width: 3rem;
  height: 3rem;
  border: 3px solid rgba(1, 2, 3);
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 0 5px 3px white;
  transition: 0.4s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-image-Globe {
  border-radius: 50%;
  background-color: rgba(1, 2, 3);
  box-shadow: 0 0 5px 3px #008FF0;
}

/* =============================================
   EFFETS AU SURVOL (ICÔNES)
   ============================================= */
.hover-image-LogIN:hover,
.hover-image-EtoileDeMer:hover {
  border-radius: 3px;
  box-shadow: 0 0 5px 3px #008FF0;
  background-color: #008FF0;
}

.hover-image-EtoileCiel:hover {
  border-radius: 50%;
  box-shadow: 0 0 5px 3px yellow;
  background-color: rgba(1, 2, 3);
}

.hover-image-LogIN:hover {
  border-radius: 50%;
  box-shadow: 0 0 5px 3px orangered;
  transform: rotate(-360deg);
}

.hover-image-EtoileDeMer:hover {
  border-radius: 50%;
  box-shadow: 0 0 5px 3px green;
  transform: rotate(360deg);
}

.hover-image-Globe:hover {
  border: 3px solid green;
}

/* =============================================
   DATE & HEURE (INTERACTIVITÉ)
   ============================================= */
#date,
.heure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: white;
  transition: 0.4s ease-in-out;
  text-decoration: none;
  cursor: default;
}

#date:hover {
  color: orangered;
  padding: 22px 12px;
}

.heure:hover {
  color: yellow;
}

#dayOfWeek {
  margin-bottom: 13px;
}

#dayOfWeek:hover {
  color: green;
}