/*
 * Écran d'accueil : fond flouté qui se net quand on entre, carte de bienvenue et bouton
 * « Entrer » aux cœurs (emoji, pour ne dépendre d'aucune image externe).
 */
.accueil {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: sans-serif;
}

.surprise-btn {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, .5);
  border: none;
}
.surprise-btn:hover { background: rgba(255, 255, 255, .8); }

.accueil-bg {
  position: absolute;
  inset: 0;
  background: url(../background.png) center / cover;
  filter: blur(15px);
  transform: scale(1.1);
  transition: filter 1s ease-in-out, transform 1s ease-in-out;
}
.accueil.entering .accueil-bg {
  filter: blur(0);
  transform: scale(1);
}

.accueil-main {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 16px;
  transition: opacity .5s ease-in-out;
}
.accueil.entering .accueil-main { opacity: 0; }

.intro-box {
  max-width: 600px;
  padding: 40px;
  text-align: center;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.intro-box h1 {
  margin: 0 0 15px;
  color: var(--bg-purple-dark);
  font-size: 3rem;
}
.intro-box p {
  margin: 0;
  color: #4a4a4a;
  font-size: 1.2rem;
  line-height: 1.6;
}
.intro-box .love-note {
  display: block;
  margin-top: 20px;
  color: var(--purple-primary);
  font-size: 1.4rem;
  font-weight: 700;
}

.enter-btn {
  position: relative;
  padding: 0;
  color: #fff;
  font-size: 2.5em;
  font-weight: 900;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform .2s ease;
}
.enter-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #9280a3, #9280a3);
  border-radius: 1000px;
  transform: scale(.9);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.enter-btn span {
  position: relative;
  z-index: 2;
  display: block;
  padding: .5em 1.5em;
  line-height: 1;
  transition: transform .2s ease;
}
.enter-btn span::before,
.enter-btn span::after {
  position: absolute;
  font-size: .7em;
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  transition: transform .25s cubic-bezier(.02, 1.02, .67, 1.06), opacity .2s ease;
  pointer-events: none;
}
.enter-btn span::before { content: "💖"; left: -.4em; top: -.5em; }
.enter-btn span::after { content: "💕"; right: -.3em; bottom: -.4em; }
.enter-btn:hover::before,
.enter-btn:focus-visible::before {
  background: linear-gradient(to bottom right, #34006b, #60c);
  box-shadow: 0 4px 22px -8px #b02fc4;
  transform: scale(1.05);
}
.enter-btn:hover span { transform: scale(.95); }
.enter-btn:hover span::before,
.enter-btn:hover span::after,
.enter-btn:focus-visible span::before,
.enter-btn:focus-visible span::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.enter-btn:active { transform: scale(1.05); }
.enter-btn:active::before { transform: scale(.95); }

@media (max-width: 600px) {
  .intro-box { padding: 24px 20px; }
  .intro-box h1 { font-size: 2.2rem; }
  .accueil-main { gap: 32px; }
  .enter-btn { font-size: 2em; }
}