<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Womade — Ateliers créatifs, kits DIY & retraites</title>
  <meta name="description" content="Womade : ateliers créatifs, kits DIY à la maison, retraites créatives et bons plans pour les femmes qui aiment créer." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet" />

  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --hot:    #f10560;
      --pink:   #f7acba;
      --blush:  #ffe3e9;
      --cream:  #fff7d3;
      --dark:   #830030;
      --ink:    #1a0010;
      --gray:   #888;
      --radius: 999px;
      --card-r: 20px;
      --font:   'Nunito', sans-serif;
      --serif:  'Playfair Display', serif;
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font); color: var(--ink); background: #fff; line-height: 1.6; overflow-x: hidden; }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }

    .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

    .pill {
      display: inline-block; background: var(--blush); color: var(--hot);
      font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
      padding: 5px 14px; border-radius: var(--radius); margin-bottom: 12px;
    }

    .section-title { font-family: var(--serif); font-size: clamp(26px, 4vw, 36px); color: var(--dark); line-height: 1.2; margin-bottom: 8px; }
    .section-sub { font-size: 15px; color: var(--gray); max-width: 520px; }
    .section-head { margin-bottom: 40px; }
    .section-head.center { text-align: center; }
    .section-head.center .section-sub { margin: 0 auto; }

    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: transform 0.15s, box-shadow 0.15s; }
    .btn:hover { transform: translateY(-2px); }
    .btn-hot { background: var(--hot); color: #fff; box-shadow: 0 4px 20px rgba(241,5,96,0.3); }
    .btn-hot:hover { box-shadow: 0 6px 24px rgba(241,5,96,0.4); }
    .btn-outline { background: #fff; color: var(--dark); border: 2px solid var(--pink); }
    .btn-outline:hover { background: var(--blush); }

    /* ── NAV ── */
    .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(247,172,186,0.4); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .nav-logo { font-family: var(--font); font-size: 22px; font-weight: 800; color: var(--hot); }
    .nav-logo span { background: var(--blush); padding: 4px 16px; border-radius: var(--radius); }
    .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
    .nav-links a { font-size: 14px; font-weight: 600; color: var(--dark); transition: color 0.15s; }
    .nav-links a:hover { color: var(--hot); }
    .nav-cta { background: var(--hot); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: var(--radius); border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(241,5,96,0.35); }
    .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
    .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }

    /* Conteneur photo pleine largeur */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero-bg img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
    }

    /* Placeholder hero plein écran */
    .hero-bg-placeholder {
      width: 100%; height: 100%;
      background: var(--blush);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    }
    .hero-bg-placeholder .ph-icon { font-size: 52px; }
    .hero-bg-placeholder .ph-label { font-size: 13px; font-weight: 800; color: var(--hot); text-transform: uppercase; letter-spacing: 1px; }
    .hero-bg-placeholder .ph-name { font-size: 12px; color: var(--gray); }

    /* Dégradé bas → texte lisible sur photo */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(26,0,16,0) 0%,
        rgba(26,0,16,0.15) 40%,
        rgba(26,0,16,0.72) 75%,
        rgba(26,0,16,0.88) 100%
      );
      z-index: 1;
    }

    /* Contenu texte par-dessus */
    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 60px 0 52px;
    }

    .hero-content { max-width: 680px; }

    .hero-tag { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
    .hero-tag-dot { width: 8px; height: 8px; background: var(--pink); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
    .hero-tag span { font-size: 13px; font-weight: 700; color: var(--pink); }

    .hero h1 { font-family: var(--serif); font-size: clamp(36px, 6vw, 64px); color: #fff; line-height: 1.1; margin-bottom: 16px; }
    .hero h1 em { font-style: italic; color: var(--pink); }
    .hero-desc { font-size: 16px; color: rgba(255,255,255,0.82); max-width: 480px; margin-bottom: 32px; line-height: 1.7; }
    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

    .hero-trust { display: flex; align-items: center; gap: 10px; }
    .hero-trust-avatars { display: flex; }
    .avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-left: -8px; }
    .avatar:first-child { margin-left: 0; }
    .av1 { background: var(--blush); } .av2 { background: #fce4f3; } .av3 { background: var(--cream); } .av4 { background: #e8f4fd; }
    .hero-trust-text { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 600; }
    .hero-trust-text strong { color: #fff; }

    /* Badges flottants supprimés — texte blanc sur photo suffit */

    /* Placeholder carré (ateliers, kits, blog) */
    .img-placeholder { width: 100%; height: 100%; background: var(--blush); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
    .img-ph-rect {
      width: 100%; height: 100%;
      background: var(--blush);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px;
    }
    .img-ph-rect .ph-icon { font-size: 28px; }
    .img-ph-rect .ph-label { font-size: 10px; font-weight: 800; color: var(--hot); text-transform: uppercase; letter-spacing: 0.5px; }
    .img-ph-rect .ph-name { font-size: 11px; color: var(--gray); }

    /* ── BANDEAU ── */
    .bandeau { background: var(--hot); padding: 14px 0; overflow: hidden; }
    .bandeau-track { display: flex; gap: 40px; animation: scroll-x 20s linear infinite; width: max-content; }
    .bandeau-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
    .bandeau-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.5); border-radius: 50%; }
    @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ── UNIVERS ── */
    .univers { padding: 80px 0; background: #fff; }
    .univers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
    .univers-card { border-radius: var(--card-r); padding: 32px 24px; position: relative; overflow: hidden; transition: transform 0.2s; cursor: pointer; }
    .univers-card:hover { transform: translateY(-4px); }
    .univers-card.u1 { background: var(--blush); } .univers-card.u2 { background: var(--cream); } .univers-card.u3 { background: #fce4f3; } .univers-card.u4 { background: #e8f4fd; }
    .univers-icon { font-size: 40px; margin-bottom: 16px; }
    .univers-card h3 { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
    .univers-card p { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 16px; }
    .univers-link { font-size: 13px; font-weight: 700; color: var(--hot); display: inline-flex; align-items: center; gap: 4px; }
    .univers-link::after { content: '→'; transition: transform 0.15s; }
    .univers-card:hover .univers-link::after { transform: translateX(4px); }
    .univers-num { position: absolute; top: 16px; right: 20px; font-size: 48px; font-weight: 800; color: rgba(131,0,48,0.06); line-height: 1; }

    /* ── ATELIERS ── */
    .ateliers-section { background: var(--blush); padding: 80px 0; }
    .ateliers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .atelier-card { background: #fff; border-radius: var(--card-r); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
    .atelier-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(131,0,48,0.12); }
    .atelier-thumb { height: 200px; position: relative; overflow: hidden; }
    .atelier-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .atelier-dispo { position: absolute; bottom: 10px; left: 10px; background: #fff; border-radius: var(--radius); padding: 3px 10px; font-size: 11px; font-weight: 700; color: #2d8a4e; z-index: 2; }
    .atelier-body { padding: 20px; }
    .atelier-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .atelier-tag { font-size: 11px; font-weight: 700; color: var(--hot); text-transform: uppercase; letter-spacing: 0.5px; }
    .atelier-date { font-size: 12px; color: var(--gray); }
    .atelier-body h3 { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }
    .atelier-body p { font-size: 13px; color: var(--gray); line-height: 1.5; margin-bottom: 16px; }
    .atelier-footer { display: flex; justify-content: space-between; align-items: center; }
    .atelier-prix { font-size: 20px; font-weight: 800; color: var(--hot); }
    .atelier-prix span { font-size: 12px; color: var(--gray); font-weight: 400; }
    .btn-reserver { background: var(--hot); color: #fff; border: none; border-radius: var(--radius); padding: 9px 18px; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
    .btn-reserver:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(241,5,96,0.3); }

    /* placeholder couleurs ateliers */
    .ph-disco { background: linear-gradient(135deg, #f7acba, #f10560); }
    .ph-resine { background: linear-gradient(135deg, #fff7d3, #f7acba); }
    .ph-aqua { background: linear-gradient(135deg, #e8f4fd, #b8d9f5); }

    /* ── RETRAITE + CARROUSEL ── */
    .retraite-section { background: var(--dark); padding: 80px 0; position: relative; overflow: hidden; }
    .retraite-section::before { content: '✦'; position: absolute; font-size: 200px; color: rgba(255,255,255,0.03); top: -30px; right: 60px; pointer-events: none; }
    .retraite-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
    .retraite-content .pill { background: rgba(247,172,186,0.15); color: var(--pink); }
    .retraite-content h2 { font-family: var(--serif); font-size: clamp(26px, 4vw, 40px); color: var(--cream); margin-bottom: 14px; line-height: 1.2; }
    .retraite-content h2 em { font-style: italic; color: var(--pink); }
    .retraite-content p { font-size: 15px; color: rgba(255,255,255,0.7); max-width: 480px; margin-bottom: 28px; line-height: 1.7; }
    .retraite-details { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
    .detail-chip { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(247,172,186,0.2); border-radius: var(--radius); padding: 7px 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
    .btn-retraite { background: var(--hot); color: #fff; border: none; border-radius: var(--radius); padding: 14px 28px; font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(241,5,96,0.4); transition: transform 0.15s; }
    .btn-retraite:hover { transform: translateY(-2px); }

    /* Carrousel */
    .carousel-wrap { position: relative; border-radius: 20px; overflow: hidden; }
    .carousel-track { display: flex; transition: transform 0.5s ease; }
    .carousel-slide { min-width: 100%; height: 340px; flex-shrink: 0; position: relative; }
    .carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
    .carousel-slide .img-ph-rect { height: 340px; }
    .carousel-nav { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
    .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0; }
    .carousel-dot.active { background: #fff; transform: scale(1.3); }
    .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 16px; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
    .carousel-btn:hover { background: #fff; }
    .carousel-btn.prev { left: 10px; }
    .carousel-btn.next { right: 10px; }

    /* ── BOUTIQUE ── */
    .boutique-section { background: #fff; padding: 80px 0; }
    .boutique-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
    .boutique-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .kit-card { border: 1.5px solid rgba(247,172,186,0.5); border-radius: var(--card-r); overflow: hidden; transition: transform 0.2s, border-color 0.2s; }
    .kit-card:hover { transform: translateY(-3px); border-color: var(--pink); }
    .kit-thumb { height: 160px; overflow: hidden; position: relative; }
    .kit-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .kit-body { padding: 16px; }
    .kit-body h3 { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
    .kit-body p { font-size: 12px; color: var(--gray); line-height: 1.4; margin-bottom: 12px; }
    .kit-footer { display: flex; justify-content: space-between; align-items: center; }
    .kit-prix { font-size: 18px; font-weight: 800; color: var(--hot); }
    .btn-panier { background: var(--blush); color: var(--dark); border: none; border-radius: var(--radius); padding: 7px 14px; font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
    .btn-panier:hover { background: var(--hot); color: #fff; }

    /* placeholder kits */
    .ph-kit1 { background: var(--cream); }
    .ph-kit2 { background: var(--blush); }
    .ph-kit3 { background: #fce4f3; }
    .ph-kit4 { background: #e8f4fd; }

    /* ── BLOG ── */
    .blog-section { background: var(--cream); padding: 80px 0; }
    .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .blog-card { background: #fff; border-radius: var(--card-r); overflow: hidden; transition: transform 0.2s; }
    .blog-card:hover { transform: translateY(-3px); }
    .blog-thumb { height: 180px; overflow: hidden; position: relative; }
    .blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .blog-body { padding: 18px; }
    .blog-cat { font-size: 11px; font-weight: 700; color: var(--hot); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .blog-body h3 { font-size: 15px; font-weight: 800; color: var(--dark); line-height: 1.35; margin-bottom: 10px; }
    .blog-meta { font-size: 12px; color: #aaa; }

    /* placeholder blog */
    .ph-blog1 { background: var(--blush); }
    .ph-blog2 { background: #fce4f3; }
    .ph-blog3 { background: #e8f4fd; }

    /* ── NEWSLETTER ── */
    .newsletter-section { background: var(--hot); padding: 70px 0; text-align: center; }
    .newsletter-section h2 { font-family: var(--serif); font-size: clamp(24px, 4vw, 36px); color: #fff; margin-bottom: 10px; }
    .newsletter-section p { font-size: 15px; color: rgba(255,255,255,0.8); max-width: 440px; margin: 0 auto 30px; line-height: 1.6; }
    .nl-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
    .nl-form input { flex: 1; padding: 13px 20px; border-radius: var(--radius); border: none; font-family: var(--font); font-size: 14px; outline: none; }
    .nl-form button { background: var(--dark); color: #fff; border: none; border-radius: var(--radius); padding: 13px 22px; font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; }
    .nl-reassure { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 12px; }

    /* ── FOOTER ── */
    .footer { background: var(--ink); padding: 48px 0 28px; }
    .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
    .footer-brand .footer-logo { font-size: 20px; font-weight: 800; color: var(--pink); margin-bottom: 12px; }
    .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; max-width: 240px; margin-bottom: 18px; }
    .footer-socials { display: flex; gap: 10px; }
    .social-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(247,172,186,0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--pink); cursor: pointer; transition: background 0.15s; }
    .social-icon:hover { background: rgba(241,5,96,0.3); }
    .footer-col h4 { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .footer-col ul a { font-size: 14px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
    .footer-col ul a:hover { color: var(--pink); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,0.3); flex-wrap: wrap; gap: 12px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .nav-links, .nav-cta { display: none; }
      .nav-toggle { display: flex; }
      .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--blush); padding: 20px 24px; gap: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
      .hero { min-height: 100svh; }
      .hero-inner { padding: 48px 0 40px; }
      .hero-btns { flex-direction: column; align-items: flex-start; }
      .retraite-inner { grid-template-columns: 1fr; }
      .boutique-head { flex-direction: column; align-items: flex-start; gap: 12px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .nl-form { flex-direction: column; }
    }
    @media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
  </style>
</head>
<body>

  <!-- NAV -->
  <nav class="nav">
    <div class="container">
      <div class="nav-inner">
        <a href="/" class="nav-logo"><span>womade</span></a>
        <ul class="nav-links" id="nav-links">
          <li><a href="#ateliers">Ateliers</a></li>
          <li><a href="#retraite">Retraite</a></li>
          <li><a href="#boutique">Boutique</a></li>
          <li><a href="#blog">Blog</a></li>
        </ul>
        <button class="nav-cta" onclick="document.getElementById('ateliers').scrollIntoView({behavior:'smooth'})">Je réserve ✨</button>
        <button class="nav-toggle" id="nav-toggle" aria-label="Menu"><span></span><span></span><span></span></button>
      </div>
    </div>
  </nav>

  <!-- HERO -->
  <section class="hero">

    <!-- 📸 PHOTO DE FOND — REMPLACE ICI -->
    <!-- Pour mettre ta vraie photo : remplace le div.hero-bg-placeholder par :
         <img src="images/hero.jpg" alt="Womade atelier créatif" /> -->
    <div class="hero-bg">
      <img src="images/hero.webp" alt="Atelier créatif Womade — femmes autour d'une table en train de créer" />
    </div>

    <!-- Dégradé sombre pour lisibilité du texte -->
    <div class="hero-overlay"></div>

    <!-- Texte par-dessus la photo -->
    <div class="container">
      <div class="hero-inner">
        <div class="hero-content">
          <div class="hero-tag">
            <div class="hero-tag-dot"></div>
            <span>Ateliers & kits créatifs disponibles</span>
          </div>
          <h1>Crée, explore,<br><em>vis à fond</em> ✨</h1>
          <p class="hero-desc">Kits DIY, ateliers en groupe, retraites créatives et bons plans pour les femmes qui aiment faire avec leurs mains — et passer un bon moment en le faisant.</p>
          <div class="hero-btns">
            <button class="btn btn-hot" onclick="document.getElementById('ateliers').scrollIntoView({behavior:'smooth'})">Voir les ateliers</button>
            <button class="btn btn-outline" style="background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.4)" onclick="document.getElementById('boutique').scrollIntoView({behavior:'smooth'})">Explorer les kits</button>
          </div>
          <div class="hero-trust">
            <div class="hero-trust-avatars">
              <div class="avatar av1">🌸</div><div class="avatar av2">🎨</div><div class="avatar av3">✨</div><div class="avatar av4">🌿</div>
            </div>
            <p class="hero-trust-text"><strong>+200 créatives</strong> ont déjà rejoint l'aventure</p>
          </div>
        </div>
      </div>
    </div>

  </section>

  <!-- BANDEAU -->
  <div class="bandeau" aria-hidden="true">
    <div class="bandeau-track">
      <div class="bandeau-item"><span>🎨 Ateliers créatifs</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>📦 Kits DIY</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🌿 Retraite créative</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>💡 Bons plans</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🪩 Santiags disco</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🫧 Résine</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>💿 Vinyle déco</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🌸 Aquarelle</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🎨 Ateliers créatifs</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>📦 Kits DIY</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🌿 Retraite créative</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>💡 Bons plans</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🪩 Santiags disco</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🫧 Résine</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>💿 Vinyle déco</span></div><div class="bandeau-dot"></div>
      <div class="bandeau-item"><span>🌸 Aquarelle</span></div><div class="bandeau-dot"></div>
    </div>
  </div>

  <!-- UNIVERS -->
  <section class="univers" id="univers">
    <div class="container">
      <div class="section-head center">
        <div class="pill">L'univers Womade</div>
        <h2 class="section-title">Tout ce qu'on fait avec amour</h2>
        <p class="section-sub">Un seul endroit pour créer, s'inspirer, se retrouver et repartir avec quelque chose de fait de ses mains.</p>
      </div>
      <div class="univers-grid">
        <div class="univers-card u1" onclick="document.getElementById('ateliers').scrollIntoView({behavior:'smooth'})">
          <span class="univers-num">01</span>
          <div class="univers-icon">🎨</div>
          <h3>Ateliers créatifs</h3>
          <p>Sessions DIY en petit groupe dans une ambiance chaleureuse — résine, vinyle, aquarelle, disco boots...</p>
          <span class="univers-link">Voir les ateliers</span>
        </div>
        <div class="univers-card u2" onclick="document.getElementById('boutique').scrollIntoView({behavior:'smooth'})">
          <span class="univers-num">02</span>
          <div class="univers-icon">📦</div>
          <h3>Kits à la maison</h3>
          <p>Tout le matériel sélectionné + les tutos pas à pas pour créer depuis chez toi, à ton rythme.</p>
          <span class="univers-link">Découvrir les kits</span>
        </div>
        <div class="univers-card u3" onclick="document.getElementById('retraite').scrollIntoView({behavior:'smooth'})">
          <span class="univers-num">03</span>
          <div class="univers-icon">🌿</div>
          <h3>Retraite créative</h3>
          <p>Un weekend immersif pour créer, se ressourcer et rencontrer des femmes qui partagent les mêmes envies.</p>
          <span class="univers-link">En savoir plus</span>
        </div>
        <div class="univers-card u4" onclick="document.getElementById('blog').scrollIntoView({behavior:'smooth'})">
          <span class="univers-num">04</span>
          <div class="univers-icon">💡</div>
          <h3>Bons plans & tests</h3>
          <p>Ateliers testés en vrai, adresses coups de cœur et inspirations créatives — sans filtre.</p>
          <span class="univers-link">Lire le blog</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ATELIERS -->
  <section class="ateliers-section" id="ateliers">
    <div class="container">
      <div class="section-head">
        <div class="pill">Prochains ateliers</div>
        <h2 class="section-title">Réserve ta place</h2>
        <p class="section-sub">Des sessions en petit comité pour vraiment prendre le temps de créer. Tous niveaux bienvenus.</p>
      </div>
      <div class="ateliers-grid">

        <div class="atelier-card">
          <div class="atelier-thumb">
            <img src="images/atelier-disco.jpg" alt="Atelier santiags disco Womade" style="width:100%;height:200px;object-fit:cover;" />
            <div class="atelier-dispo">3 places restantes</div>
          </div>
          <div class="atelier-body">
            <div class="atelier-meta"><span class="atelier-tag">Customisation</span><span class="atelier-date">12 juillet</span></div>
            <h3>Santiags disco ✨</h3>
            <p>Strass, miroirs et paillettes pour transformer tes boots en pièce unique.</p>
            <div class="atelier-footer">
              <div class="atelier-prix">55€ <span>/ pers.</span></div>
              <button class="btn-reserver">Réserver</button>
            </div>
          </div>
        </div>

        <div class="atelier-card">
          <div class="atelier-thumb">
            <img src="images/atelier-resine.jpg" alt="Atelier résine Womade" style="width:100%;height:200px;object-fit:cover;" />
            <div class="atelier-dispo">5 places restantes</div>
          </div>
          <div class="atelier-body">
            <div class="atelier-meta"><span class="atelier-tag">Résine</span><span class="atelier-date">19 juillet</span></div>
            <h3>Résine & inclusion</h3>
            <p>Crée tes bijoux et décos en résine époxy colorée — inclusions florales, pigments, paillettes.</p>
            <div class="atelier-footer">
              <div class="atelier-prix">48€ <span>/ pers.</span></div>
              <button class="btn-reserver">Réserver</button>
            </div>
          </div>
        </div>



      </div>
    </div>
  </section>

  <!-- RETRAITE + CARROUSEL -->
  <section class="retraite-section" id="retraite">
    <div class="container">
      <div class="retraite-inner">
        <div class="retraite-content">
          <div class="pill">Octobre 2025</div>
          <h2>La retraite créative<br><em>Womade</em></h2>
          <p>Un weekend pour créer, se retrouver et se ressourcer loin du quotidien. Ateliers, bons repas, belles rencontres — et des souvenirs qui durent.</p>
          <div class="retraite-details">
            <div class="detail-chip"><span>📅</span> 17–19 octobre 2025</div>
            <div class="detail-chip"><span>📍</span> Région parisienne</div>
            <div class="detail-chip"><span>👥</span> 10 participantes max</div>
            <div class="detail-chip"><span>✨</span> Tout inclus</div>
          </div>
          <button class="btn-retraite">Je veux ma place — 350€ →</button>
        </div>

        <!-- CARROUSEL 5 photos -->
        <div class="carousel-wrap" id="carousel">
          <div class="carousel-track" id="carousel-track">

            <!-- 📸 SLIDE 1 — REMPLACE : src="images/retraite-1.jpg" -->
            <div class="carousel-slide">
              <div class="img-ph-rect ph-blog1" style="height:340px">
                <div class="ph-icon">📸</div>
                <div class="ph-label">Photo retraite 1</div>
                <div class="ph-name">retraite-1.jpg</div>
              </div>
            </div>

            <!-- 📸 SLIDE 2 — REMPLACE : src="images/retraite-2.jpg" -->
            <div class="carousel-slide">
              <div class="img-ph-rect ph-blog2" style="height:340px">
                <div class="ph-icon">📸</div>
                <div class="ph-label">Photo retraite 2</div>
                <div class="ph-name">retraite-2.jpg</div>
              </div>
            </div>

            <!-- 📸 SLIDE 3 — REMPLACE : src="images/retraite-3.jpg" -->
            <div class="carousel-slide">
              <div class="img-ph-rect ph-resine" style="height:340px">
                <div class="ph-icon">📸</div>
                <div class="ph-label">Photo retraite 3</div>
                <div class="ph-name">retraite-3.jpg</div>
              </div>
            </div>

            <!-- 📸 SLIDE 4 — REMPLACE : src="images/retraite-4.jpg" -->
            <div class="carousel-slide">
              <div class="img-ph-rect ph-aqua" style="height:340px">
                <div class="ph-icon">📸</div>
                <div class="ph-label">Photo retraite 4</div>
                <div class="ph-name">retraite-4.jpg</div>
              </div>
            </div>

            <!-- 📸 SLIDE 5 — REMPLACE : src="images/retraite-5.jpg" -->
            <div class="carousel-slide">
              <div class="img-ph-rect ph-disco" style="height:340px">
                <div class="ph-icon">📸</div>
                <div class="ph-label">Photo retraite 5</div>
                <div class="ph-name">retraite-5.jpg</div>
              </div>
            </div>

          </div>
          <button class="carousel-btn prev" onclick="moveCarousel(-1)" aria-label="Précédent">‹</button>
          <button class="carousel-btn next" onclick="moveCarousel(1)" aria-label="Suivant">›</button>
          <div class="carousel-nav" id="carousel-nav"></div>
        </div>

      </div>
    </div>
  </section>

  <!-- BOUTIQUE -->
  <section class="boutique-section" id="boutique">
    <div class="container">
      <div class="boutique-head">
        <div>
          <div class="pill">La boutique</div>
          <h2 class="section-title">Kits créatifs à faire chez toi</h2>
          <p class="section-sub">Tout le matériel sélectionné + les instructions détaillées, livrés chez toi.</p>
        </div>
        <a href="#boutique" class="btn btn-outline">Voir tout</a>
      </div>
      <div class="boutique-grid">

        <div class="kit-card">
          <div class="kit-thumb">
            <!-- 📸 REMPLACE ICI : src="images/kit-resine.jpg" -->
            <div class="img-ph-rect ph-kit4" style="height:160px">
              <div class="ph-icon">📸</div>
              <div class="ph-label">Photo kit</div>
              <div class="ph-name">kit-resine.jpg</div>
            </div>
          </div>
          <div class="kit-body">
            <h3>Kit résine débutant</h3>
            <p>Résine époxy + moules + colorants pour tes premières créations</p>
            <div class="kit-footer"><span class="kit-prix">38€</span><button class="btn-panier">+ Panier</button></div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- BLOG -->
  <section class="blog-section" id="blog">
    <div class="container">
      <div class="section-head">
        <div class="pill">Le blog Womade</div>
        <h2 class="section-title">Bons plans, tests & inspirations</h2>
        <p class="section-sub">J'essaie pour toi, je raconte tout — sans filtre.</p>
      </div>
      <div class="blog-grid">

        <div class="blog-card">
          <div class="blog-thumb">
            <!-- 📸 REMPLACE ICI : src="images/blog-poterie.jpg" -->
            <div class="img-ph-rect ph-blog1" style="height:180px">
              <div class="ph-icon">📸</div>
              <div class="ph-label">Photo article</div>
              <div class="ph-name">blog-poterie.jpg</div>
            </div>
          </div>
          <div class="blog-body">
            <div class="blog-cat">Test atelier</div>
            <h3>J'ai testé l'atelier poterie de Marie — mon avis honnête</h3>
            <div class="blog-meta">15 juin · 4 min de lecture</div>
          </div>
        </div>

        <div class="blog-card">
          <div class="blog-thumb">
            <!-- 📸 REMPLACE ICI : src="images/blog-paris.jpg" -->
            <div class="img-ph-rect ph-blog2" style="height:180px">
              <div class="ph-icon">📸</div>
              <div class="ph-label">Photo article</div>
              <div class="ph-name">blog-paris.jpg</div>
            </div>
          </div>
          <div class="blog-body">
            <div class="blog-cat">Bons plans Paris</div>
            <h3>5 adresses créatives à Paris qu'on adore vraiment</h3>
            <div class="blog-meta">8 juin · 5 min de lecture</div>
          </div>
        </div>

        <div class="blog-card">
          <div class="blog-thumb">
            <!-- 📸 REMPLACE ICI : src="images/blog-lancer.jpg" -->
            <div class="img-ph-rect ph-blog3" style="height:180px">
              <div class="ph-icon">📸</div>
              <div class="ph-label">Photo article</div>
              <div class="ph-name">blog-lancer.jpg</div>
            </div>
          </div>
          <div class="blog-body">
            <div class="blog-cat">Inspiration</div>
            <h3>Comment lancer son premier atelier créatif sans se planter</h3>
            <div class="blog-meta">1 juin · 6 min de lecture</div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- NEWSLETTER -->
  <section class="newsletter-section">
    <div class="container">
      <h2>La newsletter Womade 💌</h2>
      <p>Bons plans, nouveaux ateliers et offres en avant-première — chaque semaine dans ta boîte mail.</p>
      <div class="nl-form">
        <input type="email" placeholder="ton@email.com" aria-label="Ton adresse email" />
        <button type="button">Je m'inscris</button>
      </div>
      <p class="nl-reassure">Pas de spam, désabonnement en un clic. Promis 🤞</p>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="container">
      <div class="footer-top">
        <div class="footer-brand">
          <div class="footer-logo">womade ✦</div>
          <p>Ateliers créatifs, kits DIY et retraites pour les femmes qui aiment créer et vivre à fond.</p>
          <div class="footer-socials">
            <a href="#" class="social-icon" aria-label="Instagram">📷</a>
            <a href="#" class="social-icon" aria-label="TikTok">🎵</a>
            <a href="#" class="social-icon" aria-label="Pinterest">📌</a>
          </div>
        </div>
        <div class="footer-col">
          <h4>Explorer</h4>
          <ul><li><a href="#ateliers">Ateliers</a></li><li><a href="#retraite">Retraite</a></li><li><a href="#boutique">Boutique</a></li><li><a href="#blog">Blog</a></li></ul>
        </div>
        <div class="footer-col">
          <h4>Infos</h4>
          <ul><li><a href="#">À propos</a></li><li><a href="#">Contact</a></li><li><a href="#">FAQ</a></li></ul>
        </div>
        <div class="footer-col">
          <h4>Légal</h4>
          <ul><li><a href="#">Mentions légales</a></li><li><a href="#">CGV</a></li><li><a href="#">Confidentialité</a></li></ul>
        </div>
      </div>
      <div class="footer-bottom">
        <span>© 2025 Womade — Tous droits réservés</span>
        <span>Fait avec 💖 et beaucoup de paillettes</span>
      </div>
    </div>
  </footer>

  <script>
    // Menu mobile
    const toggle = document.getElementById('nav-toggle');
    const links = document.getElementById('nav-links');
    toggle.addEventListener('click', () => links.classList.toggle('open'));
    links.querySelectorAll('a').forEach(a => a.addEventListener('click', () => links.classList.remove('open')));

    // Carrousel retraite
    let current = 0;
    const total = 5;
    const track = document.getElementById('carousel-track');
    const nav = document.getElementById('carousel-nav');

    // Créer les points
    for (let i = 0; i < total; i++) {
      const dot = document.createElement('button');
      dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
      dot.setAttribute('aria-label', 'Slide ' + (i + 1));
      dot.onclick = () => goTo(i);
      nav.appendChild(dot);
    }

    function goTo(n) {
      current = (n + total) % total;
      track.style.transform = 'translateX(-' + (current * 100) + '%)';
      document.querySelectorAll('.carousel-dot').forEach((d, i) => d.classList.toggle('active', i === current));
    }

    function moveCarousel(dir) { goTo(current + dir); }

    // Auto-play toutes les 4s
    setInterval(() => moveCarousel(1), 4000);
  </script>

</body>
</html>
