/* Style du titre fixe */
.fixed-header {
  position: fixed;
  top: 0;
  left: 10px; /* Décalage à gauche */
  right: 10px; /* Décalage à droite */
  background-color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  z-index: 1000;
  border-radius: 10px; /* Coins arrondis */
}

/* Style du contenu principal */
.content {
  margin-top: 80px; /* Ajusté pour éviter le chevauchement avec l'en-tête */
  margin-bottom: 80px; /* Ajusté pour éviter le chevauchement avec le pied de page */
  padding: 20px;
}

/* Style de la barre de navigation */
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 10px; /* Décalage à gauche */
  right: 10px; /* Décalage à droite */
  background-color: white;
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: flex;
  justify-content: space-around;
  z-index: 1000;
  border-radius: 10px; /* Coins arrondis */
  height: 60px; /* Ajustez cette valeur selon la hauteur de votre barre de navigation */
}

/* Boutons de navigation */
.footer-button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  flex: 1;
  margin: 0 5px;
}

.footer-button:hover {
  background-color: #0056b3;
}

.fade-in {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ✅ Splash overlay */
/* --- SPLASH SCREEN --- */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 9999;
  background-color: #f5e8d0; /* La couleur de fond autour de l'image */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out;
}

/* 1. Style par défaut (Mobiles / iPhone) */
/* On garde l'image en plein écran pour l'effet immersif */
#splash img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit tout l'écran, peut rogner les bords */
  object-position: center;
}

/* 2. Style Ordinateur (Écrans plus larges que 1024px) */
/* Ici, on change la stratégie : on n'étire plus l'image */
@media (min-width: 1024px) {
  #splash img {
    width: auto; /* On respecte la largeur réelle de l'image */
    height: auto; /* On respecte la hauteur réelle */
    max-width: 500px; /* On empêche l'image de devenir géante */
    max-height: 80vh; /* On garde une marge en haut et en bas */

    object-fit: contain; /* On affiche l'image ENTIÈRE sans couper */

    /* Optionnel : un peu de style pour faire "carte" */
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}

#splash.hide {
  opacity: 0;
  pointer-events: none;
}

/* --- ETAT DE L'APP --- */

/* Etat initial : transparent et légèrement décalé */
.hidden-app {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Etat final : visible */
.visible-app {
  opacity: 1;
  transform: scale(1);
}