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

/* =============================================
   MISE EN 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: white;
  /* transition pour l'effet fondu */
  transition: background 0.8s ease-in-out;
}

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

header,
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96%;            /* largeur fluide */
  max-width: 1234px;     /* limite sur grands écrans */
  margin: 9px auto;     /* marge tout autour + centrage horizontal */
  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;
}

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; /* espace réservé dès le départ */
  transition: 0.9s ease-in-out;
  color: rgb(1,2,3);
  border: 1px solid transparent;
  border-radius: 7px;
}
.main-link:hover {
  color: yellow;
  background-color: rgba(1, 2, 3, 0.5);
  border: 1px solid orange;
}

/* =============================================
   É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;
}