body {
  background-image: url('rose.jpg');
  background-size: cover;          
  background-position: center;     
  background-attachment: fixed;    
  font-family: 'Georgia', serif;
  color: #333; /* Texte général plus sombre pour être lisible sur le parchemin */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

/* LA BOÎTE PARCHEMIN */
.boite-connexion {
  /* On utilise une image de vieux papier texture trouvée sur internet */
  background-image: url('fond.jpg');
  background-size: cover;
  padding: 40px;
  border-radius: 5px; /* Les vieux parchemins n'ont pas les bords parfaits */
  text-align: center;
  /* Une ombre marron/noire pour donner un effet d'épaisseur au papier */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0,0,0,0.2); 
  border: 1px solid #d2b48c;
  width: 550px;       /* On lui donne une largeur de rectangle */
  height: 300px;      /* On lui donne une hauteur fixe */
  /* Ces 4 lignes servent à centrer parfaitement tout le texte et le bouton dans le rectangle */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* LE TITRE EN MOUNTAINS OF CHRISTMAS ET VIOLET MANGANÈSE */
.titre-magique {
  font-family: 'Mountains of Christmas', cursive;
  font-weight: 700;
  color: #461e53; /* Le fameux Violet de Manganèse */
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.texte-parchemin {
  color: #2b1d0c; /* Marron foncé brûlé pour aller avec le parchemin */
  font-weight: bold;
}

/* LE CHAMP DE TEXTE */
input[type="password"] {
  width: 80%;
  padding: 12px;
  margin: 20px 0;
  border: 2px solid #461e53;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.6); /* Fond blanc cassé transparent */
  color: #461e53;
  text-align: center;
  font-size: 1rem;
  outline: none;
  transition: 0.3s;
}

/* Ton idée : s'illumine en rose ! */
input[type="password"]:focus {
  border-color: #ff00ff;
  box-shadow: 0 0 15px #ff00ff;
  background-color: white;
}

/* LE BOUTON */
button {
  background: linear-gradient(45deg, #461e53, #8a2be2); /* Dégradé violet manganèse et violet magique */
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-family: 'Mountains of Christmas', cursive;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: 0.3s;
}

button:hover {
  transform: scale(1.05);
}

/* STYLE DES PETITES ÉTOILES ANIMÉES */
/* --- LA GRANDE TEMPÊTE D'ÉTOILES --- */

.etoile {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  font-size: 14px;
  color: #fff;
  /* Elles brillent intensément en rose et violet */
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #8a2be2; 
}

/* Quand la souris survole la zone du bouton, l'animation se lance */
#boutonConteneur:hover .etoile {
  animation: grandeExplosion 1.2s ease-out forwards;
}

/* On donne des directions (X et Y) et des vitesses (delay) uniques pour chaque étoile */
.etoile:nth-child(1)  { top: 50%; left: 50%; --x: -100px; --y: -80px;  animation-delay: 0s; }
.etoile:nth-child(2)  { top: 50%; left: 50%; --x: 120px;  --y: -90px;  animation-delay: 0.1s; }
.etoile:nth-child(3)  { top: 50%; left: 50%; --x: -130px; --y: 40px;   animation-delay: 0.05s; }
.etoile:nth-child(4)  { top: 50%; left: 50%; --x: 140px;  --y: 30px;   animation-delay: 0.15s; }
.etoile:nth-child(5)  { top: 50%; left: 50%; --x: 0px;    --y: -120px; animation-delay: 0.2s; }
.etoile:nth-child(6)  { top: 50%; left: 50%; --x: -20px;  --y: 110px;  animation-delay: 0.08s; }
.etoile:nth-child(7)  { top: 50%; left: 50%; --x: -70px;  --y: 90px;   animation-delay: 0.25s; }
.etoile:nth-child(8)  { top: 50%; left: 50%; --x: 80px;   --y: 100px;  animation-delay: 0.12s; }
.etoile:nth-child(9)  { top: 50%; left: 50%; --x: -150px; --y: -10px;  animation-delay: 0.03s; }
.etoile:nth-child(10) { top: 50%; left: 50%; --x: 160px;  --y: 5px;    animation-delay: 0.18s; }
.etoile:nth-child(11) { top: 50%; left: 50%; --x: -50px;  --y: -130px; animation-delay: 0.22s; }
.etoile:nth-child(12) { top: 50%; left: 50%; --x: 60px;   --y: -120px; animation-delay: 0.05s; }
.etoile:nth-child(13) { top: 50%; left: 50%; --x: -90px;  --y: -40px;  animation-delay: 0.14s; }
.etoile:nth-child(14) { top: 50%; left: 50%; --x: 95px;   --y: -50px;  animation-delay: 0.27s; }
.etoile:nth-child(15) { top: 50%; left: 50%; --x: -110px; --y: 70px;   animation-delay: 0.11s; }
.etoile:nth-child(16) { top: 50%; left: 50%; --x: 115px;  --y: 75px;   animation-delay: 0.02s; }
.etoile:nth-child(17) { top: 50%; left: 50%; --x: -30px;  --y: -70px;  animation-delay: 0.19s; }
.etoile:nth-child(18) { top: 50%; left: 50%; --x: 35px;   --y: -65px;  animation-delay: 0.07s; }
.etoile:nth-child(19) { top: 50%; left: 50%; --x: -40px;  --y: 50px;   animation-delay: 0.24s; }
.etoile:nth-child(20) { top: 50%; left: 50%; --x: 45px;   --y: 45px;   animation-delay: 0.13s; }
/* Les dernières s'envolent encore plus loin ! */
.etoile:nth-child(21) { top: 50%; left: 50%; --x: -180px; --y: -100px; animation-delay: 0.1s; }
.etoile:nth-child(22) { top: 50%; left: 50%; --x: 190px;  --y: -110px; animation-delay: 0.15s; }
.etoile:nth-child(23) { top: 50%; left: 50%; --x: -200px; --y: 80px;  animation-delay: 0.25s; }
.etoile:nth-child(24) { top: 50%; left: 50%; --x: 210px;  --y: 90px;   animation-delay: 0.05s; }
.etoile:nth-child(25) { top: 50%; left: 50%; --x: -100px; --y: 130px;  animation-delay: 0.3s; }
.etoile:nth-child(26) { top: 50%; left: 50%; --x: 110px;  --y: 140px;  animation-delay: 0.22s; }
.etoile:nth-child(27) { top: 50%; left: 50%; --x: -160px; --y: -50px;  animation-delay: 0.08s; }
.etoile:nth-child(28) { top: 50%; left: 50%; --x: 170px;  --y: -60px;  animation-delay: 0.17s; }
.etoile:nth-child(29) { top: 50%; left: 50%; --x: 0px;    --y: 160px;  animation-delay: 0.12s; }
.etoile:nth-child(30) { top: 50%; left: 50%; --x: 0px;    --y: -160px; animation-delay: 0.28s; }

/* L'animation d'éjection */
@keyframes grandeExplosion {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  15% {
    opacity: 1; /* Elles s'allument d'un coup */
  }
  100% {
    /* Elles s'éparpillent selon leurs coordonnées et grandissent avant de s'éteindre */
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.6);
    opacity: 0;
  }
}