meta charset="UTF-8">
  <title>Accueil TV – Gîte Melody</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #111;
      color: #f5f5f5;
      text-align: center;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    .hero {
      margin-bottom: 2rem;
    }
    .hero img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
    }
    h1 {
      font-size: 2.5rem;
      margin: 1.5rem 0 0.5rem;
    }
    p {
      font-size: 1.2rem;
      margin: 0.5rem 0 1.5rem;
    }
    .player {
      margin: 2rem 0;
    }
    audio {
      width: 100%;
      max-width: 500px;
    }
    .buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 2rem;
    }
    .btn {
      display: inline-block;
      padding: 1rem 2rem;
      font-size: 1.1rem;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      color: #111;
      background: #f5c04f;
      font-weight: 600;
    }
    .btn.secondary {
      background: #f5f5f5;
    }
  </style>


  <div class="container">
    <div class="hero">
      <!-- Remplace l’URL de l’image par une photo de ton gîte -->
      <img src="https://gite-melody.fr/wp-content/uploads/2024/10/gite-CHRISTINE-1-scaled.jpg" alt="Gîte Melody">
    </div>

    <h1>Bienvenue au Gîte Melody</h1>
    <p>Installez-vous, détendez-vous… et écoutez notre radio maison.</p>

    <div class="player">
      <h2>🎧 Radio Gîte Melody</h2>
      <!-- Remplace l’URL du flux par ton URL publique Icecast -->
      <audio controls="">
        <source src="https://radio.gite-melody.fr/radio.mp3" type="audio/mpeg">
        Votre navigateur ne supporte pas la lecture audio.
      </audio>
      <p>Cliquez sur ▶ pour lancer la radio.</p>
    </div>

    <div class="buttons">
      <!-- Lien vers ta page d’accueil classique -->
      <a href="https://gite-melody.fr" class="btn">Découvrir le gîte</a>
      <!-- Optionnel : lien vers une page “Infos pratiques” -->
      <a href="https://gite-melody.fr/contact" class="btn secondary">Infos &amp; contact</a>
    </div>
  </div>