<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>❤️ Bon appétit</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #fff5f7 0%, #ffe4ec 50%, #fff0f5 100%);
      font-family: 'Georgia', serif;
      overflow: hidden;
    }

    /* Particules flottantes */
    .particles {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .particle {
      position: absolute;
      font-size: 1.2rem;
      animation: floatUp linear infinite;
      opacity: 0;
    }

    @keyframes floatUp {
      0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
      10%  { opacity: 0.7; }
      90%  { opacity: 0.5; }
      100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
    }

    /* Carte centrale */
    .card {
      position: relative;
      z-index: 1;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-radius: 32px;
      padding: 56px 64px;
      box-shadow: 0 20px 60px rgba(255, 100, 130, 0.2), 0 4px 20px rgba(0,0,0,0.06);
      text-align: center;
      max-width: 420px;
      animation: cardIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: scale(0.7) translateY(30px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* Cœur SVG animé */
    .heart-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 32px;
    }

    .heart-svg {
      width: 110px;
      height: 110px;
      animation: heartbeat 1.2s ease-in-out infinite;
      filter: drop-shadow(0 6px 18px rgba(255, 80, 100, 0.45));
    }

    @keyframes heartbeat {
      0%   { transform: scale(1); }
      14%  { transform: scale(1.18); }
      28%  { transform: scale(1); }
      42%  { transform: scale(1.12); }
      70%  { transform: scale(1); }
      100% { transform: scale(1); }
    }

    /* Texte principal */
    .main-text {
      font-size: 1.9rem;
      font-weight: bold;
      color: #d63060;
      letter-spacing: -0.3px;
      margin-bottom: 10px;
      animation: fadeIn 0.6s 0.4s both;
    }

    .sub-text {
      font-size: 1rem;
      color: #e07090;
      font-style: italic;
      animation: fadeIn 0.6s 0.7s both;
    }

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

    /* Ligne décorative */
    .divider {
      width: 48px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b8a, #ff9eb5);
      border-radius: 2px;
      margin: 20px auto;
      animation: fadeIn 0.6s 0.5s both;
    }

    /* Petite signature */
    .signature {
      margin-top: 28px;
      font-size: 0.8rem;
      color: #cca0b0;
      letter-spacing: 0.5px;
      animation: fadeIn 0.6s 1s both;
    }
  </style>
</head>
<body>

  <!-- Particules -->
  <div class="particles" id="particles"></div>

  <!-- Carte -->
  <div class="card">
    <div class="heart-wrapper">
      <svg class="heart-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="hg" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#ff4f6d"/>
            <stop offset="100%" style="stop-color:#ff8fa3"/>
          </linearGradient>
        </defs>
        <path d="M50 88 C50 88 10 62 10 36 C10 20 22 10 36 10 C43 10 50 16 50 16 C50 16 57 10 64 10 C78 10 90 20 90 36 C90 62 50 88 50 88Z"
              fill="url(#hg)"/>
      </svg>
    </div>

    <div class="main-text">Bon appétit</div>
    <div class="divider"></div>
    <div class="sub-text">petite loutre 🦦</div>

    <div class="signature">avec tout mon amour ❤️</div>
  </div>

  <script>
    // Génère des mini cœurs flottants
    const emojis = ['❤️', '🦦', '✨', '💕', '🌸', '💖'];
    const container = document.getElementById('particles');

    function spawnParticle() {
      const el = document.createElement('div');
      el.className = 'particle';
      el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
      el.style.left = Math.random() * 100 + 'vw';
      el.style.fontSize = (0.8 + Math.random() * 1.2) + 'rem';
      const dur = 6 + Math.random() * 8;
      el.style.animationDuration = dur + 's';
      el.style.animationDelay = (Math.random() * dur) + 's';
      container.appendChild(el);
      setTimeout(() => el.remove(), (dur + 2) * 1000);
    }

    // Lance les particules
    for (let i = 0; i < 18; i++) setTimeout(spawnParticle, i * 350);
    setInterval(spawnParticle, 800);
  </script>

</body>
</html>
