essai

<!-- THEME PRESTASHOP METALYA - VERSION PREMIUM LUXE -->

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">

<section class="hero">
  <div class="overlay">
    <h1>METALYA</h1>
    <h2>L’art du métal recyclé</h2>
    <p>Donnez une seconde vie au métal. Offrez une œuvre unique.</p>
    <div class="cta">
      <a href="/sculptures" class="btn-primary">Découvrir les sculptures</a>
      <a href="/univers" class="btn-secondary">L’univers METALYA</a>
    </div>
  </div>
</section>

<section class="features">
  <div class="feature">✔ Pièces uniques</div>
  <div class="feature">♻ Métal recyclé</div>
  <div class="feature">🛠 Fait main en France</div>
  <div class="feature">🚚 Livraison sécurisée</div>
</section>

<section class="story">
  <div class="text">
    <h2>L’histoire de METALYA</h2>
    <p>Dans l’atelier, le métal a une âme. Outils oubliés, pièces mécaniques… transformés en œuvres uniques.</p>
    <a href="/artiste" class="btn-primary">Découvrir l’artiste</a>
  </div>
</section>

<section class="products">
  <h2>Collections en vedette</h2>
  {hook h='displayHome'}
</section>

<section class="rarity">
  <h2>Pièces uniques</h2>
  <p>Chaque sculpture est réalisée en un seul exemplaire. Une fois vendue, elle disparaît.</p>
  <a href="/sculptures" class="btn-secondary">Voir les pièces disponibles</a>
</section>

<section class="custom">
  <h2>Création sur mesure</h2>
  <p>Vous avez une idée ? Nous la transformons en œuvre.</p>
  <a href="/contact" class="btn-primary">Demander un devis</a>
</section>

<section class="newsletter">
  <h2>Recevez les nouvelles créations</h2>
  <input type="email" placeholder="Votre email">
  <button>S’inscrire</button>
</section>

<footer>
  <p>© METALYA - L’art du métal recyclé</p>
</footer>

<style>
body {
  background:#0B0B0B;
  color:white;
  font-family:'Inter', sans-serif;
  margin:0;
}

h1, h2 {
  font-family:'Playfair Display', serif;
  letter-spacing:1px;
}

.hero {
  height:100vh;
  background:url('/img/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  position:relative;
}

.hero::after {
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.6);
}

.overlay {
  position:relative;
  z-index:2;
  margin-left:10%;
  max-width:500px;
}

h1 { font-size:72px; margin:0; }

h2 { color:#C89B3C; margin-bottom:20px; }

p { opacity:0.85; line-height:1.6; }

.cta {
  margin-top:30px;
}

.btn-primary {
  background:#C89B3C;
  padding:12px 25px;
  color:black;
  text-decoration:none;
  margin-right:10px;
  transition:0.3s;
}

.btn-primary:hover {
  background:#e0b85c;
}

.btn-secondary {
  border:1px solid #C89B3C;
  padding:12px 25px;
  color:#C89B3C;
  text-decoration:none;
}

.features {
  display:flex;
  justify-content:space-around;
  padding:50px;
  background:#111;
}

.feature {
  opacity:0.8;
  transition:0.3s;
}

.feature:hover {
  opacity:1;
  transform:translateY(-5px);
}

.story, .rarity, .custom {
  padding:80px 10%;
  text-align:left;
}

.products {
  padding:80px 10%;
}

.products h2 {
  margin-bottom:40px;
}

.newsletter {
  text-align:center;
  padding:60px;
  background:#111;
}

.newsletter input {
  padding:10px;
  width:250px;
  margin-right:10px;
}

.newsletter button {
  padding:10px 20px;
  background:#C89B3C;
  border:none;
}

footer {
  text-align:center;
  padding:20px;
  background:#000;
  font-size:14px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .features { flex-direction:column; text-align:center; }
  .hero { height:80vh; }
  h1 { font-size:42px; }
}
</style>