/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 270:0 Unexpected "<"
Line 292:12 Unexpected "{"
Line 292:21 Expected ":"
Line 292:49 Unexpected "<"
Line 293:5 Unexpected "{"
Line 293:14 Expected ":"
Line 294:2 Unexpected "<"
Line 322:5 Expected identifier but found "%"
Line 323:6 Unexpected "<"
... and 98 more hidden warnings

**/
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── ANNONCE BAR ── */
.announce-bar {
  background: #1a1a2e;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex-wrap: wrap;
}
.announce-deal { display: flex; align-items: center; gap: 8px; }
.announce-timer { display: flex; align-items: center; gap: 6px; }
.timer-block { background: #2d2d4e; border-radius: 6px; padding: 4px 8px; text-align: center; min-width: 44px; }
.timer-num { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; display: block; }
.timer-label { font-size: 9px; color: #aaa; letter-spacing: 1px; text-transform: uppercase; }
.timer-sep { font-size: 18px; font-weight: 800; color: #c6a45c; }

/* ── TRUST BAR ── */
.trust-bar {
  background: #f8f6f2;
  border-bottom: 1px solid #eee;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 6px; }

/* ── PAGE ── */
.product-page { font-family: 'Georgia', serif; background: #fff; max-width: 800px; margin: 0 auto; }

/* ── IMAGES ── */
.product-images { position: relative; background: #f5f0e8; border-radius: 0 0 20px 20px; overflow: hidden; margin-bottom: 0; }
.main-image { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.main-image-placeholder { width: 100%; aspect-ratio: 4/5; background: linear-gradient(135deg, #e8e0d4 0%, #d4c9b8 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.main-image-placeholder span { font-size: 13px; color: #999; letter-spacing: 1px; }
.thumbnails { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; background: #f5f0e8; }
.thumb { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; background: #e8e0d4; }
.thumb.active { border-color: #c6a45c; }
.badge-pill {
  position: absolute; top: 16px; left: 16px;
  background: #fff; border: 1.5px solid #e8e0d4;
  border-radius: 100px; padding: 6px 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: #c6a45c; text-transform: uppercase;
}

/* ── INFO ── */
.product-info { padding: 28px 16px 20px; }
.product-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #c6a45c; text-transform: uppercase; margin-bottom: 10px; font-family: Arial, sans-serif; }
.product-title { font-size: 32px; font-weight: 800; color: #111; margin-bottom: 6px; line-height: 1.15; }
.product-title em { color: #c6a45c; font-style: italic; }
.product-tagline { font-size: 15px; color: #777; margin-bottom: 20px; line-height: 1.6; font-family: Arial, sans-serif; }
.rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: Arial, sans-serif; }
.stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.rating-text { font-size: 13px; color: #888; }
.rating-text strong { color: #333; }
.price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; font-family: Arial, sans-serif; }
.price-new { font-size: 36px; font-weight: 800; color: #111; }
.price-old { font-size: 20px; color: #bbb; text-decoration: line-through; }
.price-save { background: #fef3e2; color: #c6a45c; border: 1px solid #c6a45c; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; }

/* ── CHECKLIST ── */
.checklist { list-style: none; margin-bottom: 28px; font-family: Arial, sans-serif; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #333; margin-bottom: 10px; line-height: 1.5; }
.check-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ── CTA ── */
.cta-wrap { padding: 0 0 4px; }
.add-to-cart-btn {
  display: block; width: 100%;
  background: #111; color: white;
  text-align: center; padding: 20px;
  border-radius: 14px; font-size: 17px; font-weight: 700;
  border: none; cursor: pointer;
  font-family: Arial, sans-serif; letter-spacing: 0.5px;
  transition: background 0.2s;
  margin-bottom: 10px;
}
.add-to-cart-btn:hover { background: #333; }
.add-to-cart-btn:disabled { background: #888; cursor: not-allowed; }
.secondary-btn {
  display: block; width: 100%;
  background: white; color: #111;
  text-align: center; padding: 16px;
  border-radius: 14px; font-size: 15px; font-weight: 600;
  border: 1.5px solid #e0d8cc; cursor: pointer;
  font-family: Arial, sans-serif;
  transition: background 0.2s;
  margin-bottom: 20px;
}
.secondary-btn:hover { background: #f8f6f2; }

/* ── GARANTIES ── */
.guarantees { display: flex; gap: 0; margin-bottom: 24px; border: 1px solid #f0ece4; border-radius: 14px; overflow: hidden; font-family: Arial, sans-serif; }
.guarantee-item { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12px; font-weight: 600; color: #555; padding: 14px 10px; border-right: 1px solid #f0ece4; }
.guarantee-item:last-child { border-right: none; }
.guarantee-icon { font-size: 18px; flex-shrink: 0; }

/* ── COUNTDOWN ── */
.countdown-box { margin: 0 0 20px; text-align: center; padding: 16px; background: #faf8f4; border-radius: 14px; font-family: Arial, sans-serif; }
.countdown-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #c6a45c; text-transform: uppercase; margin-bottom: 8px; }
.countdown-timer-row { font-size: 14px; font-weight: 700; color: #111; }
.countdown-timer-row span { color: #c6a45c; font-size: 20px; }

/* ── SECTION TITRE ── */
.section-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #c6a45c; text-transform: uppercase; margin-bottom: 8px; font-family: Arial, sans-serif; }
.section-title { font-size: 26px; font-weight: 800; color: #111; margin-bottom: 6px; line-height: 1.2; }
.section-title em { color: #c6a45c; font-style: italic; }
.section-sub { font-size: 13px; color: #999; margin-bottom: 20px; font-family: Arial, sans-serif; }

/* ── FEATURES ── */
.features-section { padding: 36px 16px; background: #faf8f4; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature-card { background: white; border-radius: 14px; padding: 20px 16px; border: 1px solid #f0ece4; }
.feature-icon { font-size: 28px; margin-bottom: 10px; }
.feature-name { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 6px; font-family: Arial, sans-serif; }
.feature-desc { font-size: 12px; color: #888; line-height: 1.5; font-family: Arial, sans-serif; }

/* ── INSTALLATION ── */
.install-section { padding: 36px 16px; background: #fff; }
.install-steps { display: flex; flex-direction: column; gap: 0; }
.install-step { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid #f0ece4; font-family: Arial, sans-serif; }
.install-step:last-child { border-bottom: none; }
.step-num { width: 40px; height: 40px; background: #111; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
.step-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 4px; }
.step-desc { font-size: 13px; color: #888; line-height: 1.5; }

/* ── SPECS ── */
.specs-section { padding: 36px 16px; background: #faf8f4; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e8e0d4; border-radius: 14px; overflow: hidden; }
.spec-item { background: white; padding: 16px; }
.spec-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #c6a45c; text-transform: uppercase; margin-bottom: 4px; font-family: Arial, sans-serif; }
.spec-value { font-size: 14px; font-weight: 700; color: #111; font-family: Arial, sans-serif; }

/* ── PHOTOS PRODUIT ── */
.photo-section { background: #fff; }
.photo-section img { width: 100%; display: block; object-fit: cover; }
.photo-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, #f0ece4 0%, #e4ddd2 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.photo-placeholder span { font-size: 12px; color: #bbb; letter-spacing: 1px; font-family: Arial, sans-serif; }

/* ── VIDÉOS ── */
.vid-section { padding: 36px 16px 32px; background: #0e0e0e; }
.vid-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #c6a45c; margin-bottom: 10px; text-transform: uppercase; font-family: Arial, sans-serif; }
.vid-title { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 6px; line-height: 1.2; font-family: Arial, sans-serif; }
.vid-title em { color: #c6a45c; font-style: italic; }
.vid-subtitle { font-size: 13px; color: #888; margin-bottom: 24px; font-family: Arial, sans-serif; }
.vid-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.vid-scroll::-webkit-scrollbar { display: none; }
.vid-card { flex-shrink: 0; width: 185px; scroll-snap-align: start; }
.vid-player-wrap { position: relative; width: 185px; height: 290px; border-radius: 16px; overflow: hidden; background: #1a1a1a; }
.vid-player { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.38); cursor: pointer; border-radius: 16px; transition: background 0.2s; }
.vid-play-btn svg { width: 48px; height: 48px; opacity: 0.92; }
.vid-play-btn.playing { background: transparent; }
.vid-play-btn.playing svg { display: none; }
.vid-card-name { font-size: 13px; font-weight: 700; color: #fff; margin-top: 10px; font-family: Arial, sans-serif; }
.vid-card-label { font-size: 11px; color: #888; margin-top: 2px; font-family: Arial, sans-serif; }

/* ── STATS GRID ── */
.stats-section { padding: 36px 16px; background: #faf8f4; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2a2a2a; border-radius: 14px; overflow: hidden; margin: 20px 0; }
.stats-grid-item { background: #1a1a1a; padding: 24px 16px; text-align: center; }
.stats-grid-num { font-size: 36px; font-weight: 800; color: #c6a45c; line-height: 1; margin-bottom: 6px; font-family: Arial, sans-serif; }
.stats-grid-label { font-size: 12px; color: #aaa; line-height: 1.4; font-family: Arial, sans-serif; }
.stats-grid-sublabel { font-size: 11px; color: #666; margin-top: 4px; font-family: Arial, sans-serif; }
.stat-row { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-top: 1px solid #eae5dc; }
.stat-row:last-of-type { border-bottom: 1px solid #eae5dc; }
.stat-circle { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.stat-circle svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.stat-circle-bg { fill: none; stroke: #e8e0d4; stroke-width: 6; }
.stat-circle-fill { fill: none; stroke: #c6a45c; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 220; }
.stat-circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; font-weight: 800; color: #111; font-family: Arial, sans-serif; }
.stat-info-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 4px; font-family: Arial, sans-serif; }
.stat-info-sub { font-size: 13px; color: #999; font-family: Arial, sans-serif; }
.stats-disclaimer { margin-top: 16px; font-size: 12px; color: #bbb; font-family: Arial, sans-serif; }

/* ── AVIS ── */
.reviews-section { padding: 36px 16px; background: #fff; }
.reviews-header { margin-bottom: 20px; }
.reviews-big-row { display: flex; align-items: center; gap: 16px; padding: 20px; background: #faf8f4; border-radius: 16px; margin-bottom: 20px; }
.reviews-score { font-size: 52px; font-weight: 800; color: #111; line-height: 1; font-family: Arial, sans-serif; }
.reviews-score-right { flex: 1; }
.reviews-stars-big { font-size: 22px; color: #f5a623; letter-spacing: 2px; margin-bottom: 4px; }
.reviews-count-text { font-size: 13px; color: #888; font-family: Arial, sans-serif; }
.review-card { border: 1px solid #f0ece4; border-radius: 16px; padding: 18px; margin-bottom: 14px; background: #fdfaf5; }
.review-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; background: #e8dfc8; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #c6a45c; flex-shrink: 0; font-family: Arial, sans-serif; }
.review-name { font-size: 14px; font-weight: 700; color: #111; font-family: Arial, sans-serif; }
.review-meta { font-size: 11px; color: #bbb; margin-top: 2px; font-family: Arial, sans-serif; }
.review-stars { font-size: 13px; color: #f5a623; margin-bottom: 8px; }
.review-text { font-size: 14px; color: #444; line-height: 1.6; font-family: Arial, sans-serif; }
.review-verified { font-size: 11px; color: #00b67a; margin-top: 8px; font-weight: 600; font-family: Arial, sans-serif; }
.reviews-load-more { display: block; width: 100%; padding: 14px; background: white; border: 1.5px solid #c6a45c; border-radius: 12px; color: #c6a45c; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: all 0.2s; font-family: Arial, sans-serif; }
.reviews-load-more:hover { background: #c6a45c; color: white; }

/* ── FAQ ── */
.faq-section { padding: 0 16px 36px; background: #faf8f4; }
.faq-section-title { font-size: 22px; font-weight: 800; color: #111; margin-bottom: 20px; padding-top: 36px; }
.faq-item { border-top: 1px solid #e8e0d4; padding: 18px 0; cursor: pointer; }
.faq-item:last-child { border-bottom: 1px solid #e8e0d4; }
.faq-question { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; color: #111; font-family: Arial, sans-serif; }
.faq-icon { font-size: 22px; color: #c6a45c; transition: transform 0.3s; flex-shrink: 0; margin-left: 8px; }
.faq-answer { font-size: 14px; color: #666; line-height: 1.7; margin-top: 10px; display: none; font-family: Arial, sans-serif; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── STICKY CTA ── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #111; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; z-index: 999;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.sticky-cta-price { color: white; font-size: 18px; font-weight: 800; font-family: Arial, sans-serif; }
.sticky-cta-price small { font-size: 12px; color: #888; text-decoration: line-through; display: block; font-weight: 400; }
.sticky-cta-btn { background: #c6a45c; color: #111; border: none; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: Arial, sans-serif; white-space: nowrap; }
.sticky-cta-btn:hover { background: #b8935a; }

/* ── OVERLAY PANIER ── */
.cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; align-items: flex-end; justify-content: center; }
.cart-overlay.show { display: flex; }
.cart-modal { background: white; border-radius: 20px 20px 0 0; padding: 28px 20px 50px; width: 100%; max-width: 800px; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cart-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cart-modal-check { width: 44px; height: 44px; background: #4caf50; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; color: white; }
.cart-modal-title { font-size: 20px; font-weight: 800; color: #111; font-family: Arial, sans-serif; }
.cart-modal-sub { font-size: 14px; color: #888; margin-top: 2px; font-family: Arial, sans-serif; }
.cart-modal-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #f0ece4; font-size: 15px; font-family: Arial, sans-serif; }
.cart-modal-item:last-child { border-bottom: none; }
.cart-modal-item-name { color: #111; font-weight: 600; }
.cart-modal-item-price { color: #111; font-weight: 700; }
.cart-modal-total { display: flex; justify-content: space-between; padding: 16px 0 20px; font-size: 18px; font-weight: 800; color: #111; border-top: 2px solid #111; font-family: Arial, sans-serif; }
.cart-modal-btn-checkout { display: block; width: 100%; padding: 18px; background: #111; color: white; border: none; border-radius: 14px; font-size: 17px; font-weight: 700; cursor: pointer; margin-bottom: 10px; font-family: Arial, sans-serif; }
.cart-modal-btn-checkout:hover { background: #333; }
.cart-modal-btn-continue { display: block; width: 100%; padding: 14px; background: white; color: #111; border: 1.5px solid #e0d8cc; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; font-family: Arial, sans-serif; }

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  .specs-grid { grid-template-columns: 1fr 1fr; }
}
</style>

<!-- OVERLAY PANIER -->
<div class="cart-overlay" id="cartOverlay">
  <div class="cart-modal">
    <div class="cart-modal-header">
      <div class="cart-modal-check">✓</div>
      <div>
        <div class="cart-modal-title">Ajouté au panier !</div>
        <div class="cart-modal-sub" id="cartModalSub">1 produit ajouté</div>
      </div>
    </div>
    <div id="cartModalItems"></div>
    <div class="cart-modal-total" id="cartModalTotal"></div>
    <button class="cart-modal-btn-checkout" onclick="window.location.href='/cart'">Passer au paiement →</button>
    <button class="cart-modal-btn-continue" onclick="closeCartOverlay()">Continuer mes achats</button>
  </div>
</div>

<!-- STICKY CTA -->
<div class="sticky-cta" id="stickyCta">
  <div class="sticky-cta-price">
    <small>{{ product.compare_at_price | money }}</small>
    {{ product.price | money }}
  </div>
  <button class="sticky-cta-btn" onclick="addToCart()">COMMANDER HELIX™ →</button>
</div>

<!-- ANNOUNCE BAR -->
<div class="announce-bar">
  <div class="announce-deal">✨ Offre limitée — Se termine dans</div>
  <div class="announce-timer">
    <div class="timer-block"><span class="timer-num" id="timerD">00</span><span class="timer-label">JOURS</span></div>
    <span class="timer-sep">:</span>
    <div class="timer-block"><span class="timer-num" id="timerH">00</span><span class="timer-label">HRS</span></div>
    <span class="timer-sep">:</span>
    <div class="timer-block"><span class="timer-num" id="timerM">00</span><span class="timer-label">MIN</span></div>
    <span class="timer-sep">:</span>
    <div class="timer-block"><span class="timer-num" id="timerS">00</span><span class="timer-label">SEC</span></div>
  </div>
</div>

<!-- TRUST BAR -->
<div class="trust-bar">
  <div class="trust-item">🚚 <span>Livraison gratuite dès 50€</span></div>
  <div class="trust-item">⭐ <span><strong>4,8/5</strong> · 2 400+ avis</span></div>
</div>

<div class="product-page">

  <!-- IMAGES -->
  <div class="product-images">
    {% if product.featured_image %}
      <img class="main-image" id="mainImage" src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}">
    {% else %}
      <div class="main-image-placeholder" id="mainImage">
        <span style="font-size:48px;">💡</span>
        <span>PHOTO PRODUIT</span>
      </div>
    {% endif %}
    <div class="badge-pill">🏆 N°1 VENTILATEUR E27 · 2025</div>
    <div class="thumbnails" id="thumbnailsRow">
      {% for image in product.images %}
        <img class="thumb {% if forloop.first %}active{% endif %}"
          src="{{ image | image_url: width: 200 }}"
          onclick="selectImage(this, '{{ image | image_url: width: 800 }}')">
      {% endfor %}
    </div>
  </div>

  <!-- INFO PRINCIPALE -->
  <div class="product-info">
    <div class="product-eyebrow">Ventilateur LED · Installation E27</div>
    <h1 class="product-title">HELIX™ — <em>Lumière & fraîcheur</em><br>en quelques secondes.</h1>
    <p class="product-tagline">Le seul ventilateur de plafond qui se visse sur une douille E27 standard. Éclairage LED réglable + ventilation ajustable, sans travaux.</p>

    <div class="rating-row">
      <span class="stars">★★★★★</span>
      <span class="rating-text"><strong>4,8</strong> · 2 400+ avis vérifiés</span>
    </div>

    <div class="price-row">
      <span class="price-new" id="mainPriceNew">{{ product.price | money }}</span>
      {% if product.compare_at_price > product.price %}
        <span class="price-old">{{ product.compare_at_price | money }}</span>
        <span class="price-save">-{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}%</span>
      {% endif %}
    </div>

    <ul class="checklist">
      <li>
        <svg class="check-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#111"/><path d="M7 12l3.5 3.5L17 8" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Se visse sur toute douille E27 standard — aucun outil requis
      </li>
      <li>
        <svg class="check-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#111"/><path d="M7 12l3.5 3.5L17 8" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Éclairage LED 3 températures : 3000K / 4500K / 6500K
      </li>
      <li>
        <svg class="check-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#111"/><path d="M7 12l3.5 3.5L17 8" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Télécommande incluse — vitesse & luminosité réglables
      </li>
      <li>
        <svg class="check-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#111"/><path d="M7 12l3.5 3.5L17 8" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Puissance 40W · Diamètre 520mm · Pales amovibles
      </li>
      <li>
        <svg class="check-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#111"/><path d="M7 12l3.5 3.5L17 8" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Garantie 30 jours satisfait ou remboursé
      </li>
    </ul>

    <div class="cta-wrap">
      <button class="add-to-cart-btn" id="addToCartBtn" onclick="addToCart()">
        🛒 Commander HELIX™ — {{ product.price | money }}
      </button>
      <button class="secondary-btn" onclick="window.location.href='#reviews'">Voir les 2 400+ avis →</button>
    </div>

    <div class="guarantees">
      <div class="guarantee-item"><span class="guarantee-icon">🚚</span><span>Livraison<br>7–10 jours</span></div>
      <div class="guarantee-item"><span class="guarantee-icon">🛡️</span><span>Garantie<br>30 jours</span></div>
      <div class="guarantee-item"><span class="guarantee-icon">🔒</span><span>Paiement<br>sécurisé</span></div>
    </div>

    <div class="countdown-box">
      <div class="countdown-label">⚡ Offre limitée — commandez dans</div>
      <div class="countdown-timer-row">DANS <span id="countdown"></span></div>
    </div>
  </div>

  <!-- PHOTO 1 -->
  <div class="photo-section">
    {% if product.images[1] %}
      <img src="{{ product.images[1] | image_url: width: 800 }}" alt="HELIX en situation" loading="lazy">
    {% else %}
      <div class="photo-placeholder">
        <span style="font-size:40px;">📸</span>
        <span>PHOTO PRODUIT EN SITUATION</span>
      </div>
    {% endif %}
  </div>

  <!-- FEATURES -->
  <div class="features-section">
    <div class="section-label">Pourquoi HELIX™</div>
    <h2 class="section-title">2-en-1 : <em>lumière & air frais</em><br>dans un seul appareil.</h2>
    <p class="section-sub">Conçu pour s'intégrer partout sans travaux.</p>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">💡</div>
        <div class="feature-name">LED Réglable</div>
        <div class="feature-desc">3 températures de couleur + intensité ajustable via télécommande.</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">🌀</div>
        <div class="feature-name">Ventilation</div>
        <div class="feature-desc">Plusieurs vitesses pour adapter le flux d'air selon votre confort.</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">🔧</div>
        <div class="feature-name">E27 Standard</div>
        <div class="feature-desc">Se visse directement sur votre douille. Aucun câblage requis.</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">📡</div>
        <div class="feature-name">Télécommande</div>
        <div class="feature-desc">Contrôle total depuis votre canapé ou votre lit.</div>
      </div>
    </div>
  </div>

  <!-- PHOTO 2 -->
  <div class="photo-section">
    {% if product.images[2] %}
      <img src="{{ product.images[2] | image_url: width: 800 }}" alt="HELIX installation" loading="lazy">
    {% else %}
      <div class="photo-placeholder">
        <span style="font-size:40px;">📸</span>
        <span>PHOTO INSTALLATION E27</span>
      </div>
    {% endif %}
  </div>

  <!-- INSTALLATION -->
  <div class="install-section">
    <div class="section-label">Installation</div>
    <h2 class="section-title">Prêt en <em>4 étapes</em><br>sans aucun outil.</h2>
    <div class="install-steps">
      <div class="install-step">
        <div class="step-num">1</div>
        <div>
          <div class="step-title">Vissez HELIX™ sur votre douille E27</div>
          <div class="step-desc">Compatible avec toutes les douilles E27 standard. Aucune modification électrique.</div>
        </div>
      </div>
      <div class="install-step">
        <div class="step-num">2</div>
        <div>
          <div class="step-title">Dépliez et fixez les 5 pales</div>
          <div class="step-desc">Les pales s'enclenchent facilement en quelques secondes.</div>
        </div>
      </div>
      <div class="install-step">
        <div class="step-num">3</div>
        <div>
          <div class="step-title">Utilisez la télécommande</div>
          <div class="step-desc">Réglez la vitesse, la luminosité et la température de couleur.</div>
        </div>
      </div>
      <div class="install-step">
        <div class="step-num">4</div>
        <div>
          <div class="step-title">Profitez immédiatement</div>
          <div class="step-desc">Lumière et ventilation opérationnelles dès la mise sous tension.</div>
        </div>
      </div>
    </div>
  </div>

  <!-- PHOTO 3 -->
  <div class="photo-section">
    {% if product.images[3] %}
      <img src="{{ product.images[3] | image_url: width: 800 }}" alt="HELIX télécommande" loading="lazy">
    {% else %}
      <div class="photo-placeholder">
        <span style="font-size:40px;">📸</span>
        <span>PHOTO TÉLÉCOMMANDE / DÉTAILS</span>
      </div>
    {% endif %}
  </div>

  <!-- SPECS -->
  <div class="specs-section">
    <div class="section-label">Fiche technique</div>
    <h2 class="section-title">Caractéristiques<br><em>techniques.</em></h2>
    <div class="specs-grid" style="margin-top:20px;">
      <div class="spec-item"><div class="spec-label">Puissance</div><div class="spec-value">40W</div></div>
      <div class="spec-item"><div class="spec-label">Douille</div><div class="spec-value">E27 standard</div></div>
      <div class="spec-item"><div class="spec-label">Diamètre</div><div class="spec-value">520 mm</div></div>
      <div class="spec-item"><div class="spec-label">Hauteur</div><div class="spec-value">185 mm</div></div>
      <div class="spec-item"><div class="spec-label">Températures</div><div class="spec-value">3000K / 4500K / 6500K</div></div>
      <div class="spec-item"><div class="spec-label">Tension</div><div class="spec-value">AC 85–265V</div></div>
      <div class="spec-item"><div class="spec-label">Pales</div><div class="spec-value">5 amovibles</div></div>
      <div class="spec-item"><div class="spec-label">Usage</div><div class="spec-value">Intérieur uniquement</div></div>
    </div>
  </div>

  <!-- VIDÉOS -->
  <div class="vid-section" id="videoSection">
    <div class="vid-eyebrow">VRAIS CLIENTS · VRAIS RÉSULTATS</div>
    <h2 class="vid-title">Ils en parlent <em>mieux que nous.</em></h2>
    <p class="vid-subtitle">2 400+ clients vérifiés. Avis authentiques.</p>
    <div class="vid-scroll" id="vidScroll">
      <!-- Les URLs vidéo seront à remplacer par les vôtres -->
      <div class="vid-card">
        <div class="vid-player-wrap">
          <div style="width:100%;height:100%;background:#1a1a2e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;">
            <span style="font-size:32px;">🎬</span>
            <span style="font-size:11px;color:#666;font-family:Arial;">VIDÉO CLIENT</span>
          </div>
        </div>
        <div class="vid-card-name">Thomas M.</div>
        <div class="vid-card-label">Installation en 2 min</div>
      </div>
      <div class="vid-card">
        <div class="vid-player-wrap">
          <div style="width:100%;height:100%;background:#1a1a2e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;">
            <span style="font-size:32px;">🎬</span>
            <span style="font-size:11px;color:#666;font-family:Arial;">VIDÉO CLIENT</span>
          </div>
        </div>
        <div class="vid-card-name">Sarah K.</div>
        <div class="vid-card-label">Parfait pour ma chambre</div>
      </div>
      <div class="vid-card">
        <div class="vid-player-wrap">
          <div style="width:100%;height:100%;background:#1a1a2e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;">
            <span style="font-size:32px;">🎬</span>
            <span style="font-size:11px;color:#666;font-family:Arial;">VIDÉO CLIENT</span>
          </div>
        </div>
        <div class="vid-card-name">Marc D.</div>
        <div class="vid-card-label">Mon avis honnête</div>
      </div>
    </div>
  </div>

  <!-- STATS -->
  <div class="stats-section">
    <div class="section-label">CE QUE DISENT NOS CLIENTS</div>
    <h2 class="section-title">Des chiffres qui<br><em>parlent d'eux-mêmes.</em></h2>
    <p class="section-sub">Basé sur 2 400+ avis clients vérifiés.</p>
    <div class="stats-grid">
      <div class="stats-grid-item"><div class="stats-grid-num">94%</div><div class="stats-grid-label">Installation réussie</div><div class="stats-grid-sublabel">en moins de 5 min</div></div>
      <div class="stats-grid-item"><div class="stats-grid-num">4,8★</div><div class="stats-grid-label">Note moyenne</div><div class="stats-grid-sublabel">2 400+ avis</div></div>
      <div class="stats-grid-item"><div class="stats-grid-num">92%</div><div class="stats-grid-label">Le recommandent</div><div class="stats-grid-sublabel">à un proche</div></div>
      <div class="stats-grid-item"><div class="stats-grid-num">3×</div><div class="stats-grid-label">Économies</div><div class="stats-grid-sublabel">vs ventilateur classique</div></div>
    </div>
    <div style="margin-top:24px;">
      <div class="stat-row">
        <div class="stat-circle"><svg viewBox="0 0 80 80"><circle class="stat-circle-bg" cx="40" cy="40" r="35"/><circle class="stat-circle-fill" cx="40" cy="40" r="35" style="stroke-dasharray:220;stroke-dashoffset:13"/></svg><div class="stat-circle-text">94%</div></div>
        <div class="stat-info"><div class="stat-info-title">Installation réussie sans aide</div><div class="stat-info-sub">Clients ayant installé seuls en moins de 5 minutes</div></div>
      </div>
      <div class="stat-row">
        <div class="stat-circle"><svg viewBox="0 0 80 80"><circle class="stat-circle-bg" cx="40" cy="40" r="35"/><circle class="stat-circle-fill" cx="40" cy="40" r="35" style="stroke-dasharray:220;stroke-dashoffset:18"/></svg><div class="stat-circle-text">92%</div></div>
        <div class="stat-info"><div class="stat-info-title">Le recommanderaient à un proche</div><div class="stat-info-sub">Basé sur 2 400+ avis vérifiés</div></div>
      </div>
      <div class="stat-row">
        <div class="stat-circle"><svg viewBox="0 0 80 80"><circle class="stat-circle-bg" cx="40" cy="40" r="35"/><circle class="stat-circle-fill" cx="40" cy="40" r="35" style="stroke-dasharray:220;stroke-dashoffset:26"/></svg><div class="stat-circle-text">88%</div></div>
        <div class="stat-info"><div class="stat-info-title">Satisfaits de l'éclairage LED</div><div class="stat-info-sub">Clients appréciant les 3 températures de couleur</div></div>
      </div>
    </div>
    <div class="stats-disclaimer">* Basé sur les avis clients vérifiés. Résultats individuels peuvent varier.</div>
  </div>

  <!-- AVIS -->
  <div class="reviews-section" id="reviews">
    <div class="section-label">Avis clients</div>
    <h2 class="section-title">Ce que disent<br><em>nos clients.</em></h2>
    <div class="reviews-big-row">
      <div class="reviews-score">4,8</div>
      <div class="reviews-score-right">
        <div class="reviews-stars-big">★★★★★</div>
        <div class="reviews-count-text">2 400+ avis vérifiés</div>
      </div>
    </div>
    <div id="reviewsList"></div>
    <button class="reviews-load-more" id="loadMoreBtn" onclick="loadMoreReviews()">Voir plus d'avis</button>
  </div>

  <!-- FAQ -->
  <div class="faq-section">
    <div class="faq-section-title">Questions fréquentes</div>
    <div id="faqItems"></div>
  </div>

</div>

<script>

const BASE_ID = {{ product.selected_or_first_available_variant.id }};

// ── AVIS ──
const reviews = [
  { name:'Thomas M.', avatar:'T', rating:5, text:'Installation en 2 minutes chrono. J\'avais des doutes mais vraiment c\'est aussi simple que de visser une ampoule. La télécommande fonctionne parfaitement et l\'éclairage est de qualité.' },
  { name:'Sarah K.', avatar:'S', rating:5, text:'Parfait pour ma chambre. Le ventilateur est silencieux et la lumière chaude crée une belle ambiance. Je recommande à 100%.' },
  { name:'Marc D.', avatar:'M', rating:4, text:'Très bon produit. La lumière froide est idéale pour travailler. Seul bémol : la notice pourrait être plus claire mais finalement c\'est intuitif.' },
  { name:'Julie P.', avatar:'J', rating:5, text:'Enfin une solution pratique ! J\'avais une vieille douille dans mon salon et maintenant j\'ai un ventilateur + lumière LED. Génial.' },
  { name:'Karim B.', avatar:'K', rating:5, text:'Le rapport qualité/prix est excellent. Ça fait maintenant 3 mois que je l\'utilise quotidiennement sans aucun problème.' },
  { name:'Émilie R.', avatar:'E', rating:4, text:'Très satisfaite de l\'achat. La livraison était rapide et le produit correspond exactement à la description.' }
];

let reviewsShown = 3;

function renderReviews() {
  const stars = r => '★'.repeat(Math.floor(r)) + (r%1?'½':'') + '☆'.repeat(5-Math.ceil(r));
  document.getElementById('reviewsList').innerHTML = reviews.slice(0,reviewsShown).map(r=>`
    <div class="review-card">
      <div class="review-card-top">
        <div class="review-avatar">${r.avatar}</div>
        <div><div class="review-name">${r.name}</div><div class="review-meta">Achat vérifié</div></div>
      </div>
      <div class="review-stars">${'★'.repeat(r.rating)}</div>
      <div class="review-text">${r.text}</div>
      <div class="review-verified">✓ Achat vérifié</div>
    </div>`).join('');
  document.getElementById('loadMoreBtn').style.display = reviewsShown>=reviews.length?'none':'block';
}
function loadMoreReviews() { reviewsShown+=3; renderReviews(); }

// ── FAQ ──
const faqs = [
  {q:'Sur quelles douilles HELIX™ est-il compatible ?', a:'HELIX™ est compatible avec toutes les douilles E27 standard. C\'est le type de douille le plus répandu en Europe.'},
  {q:'L\'installation nécessite-t-elle un électricien ?', a:'Non. Aucun câblage ni outil spécifique requis. Vous vissez simplement HELIX™ sur votre douille E27 comme une ampoule.'},
  {q:'La télécommande est-elle incluse ?', a:'Oui, une télécommande est incluse dans le colis et permet de contrôler la vitesse du ventilateur, la luminosité et la température de couleur.'},
  {q:'HELIX™ est-il silencieux ?', a:'Oui, HELIX™ a été conçu pour fonctionner silencieusement. La vitesse minimale est quasiment inaudible.'},
  {q:'Livraison & Délais', a:'Livraison gratuite dès 50€. Expédition sous 24h. Réception en 7 à 10 jours ouvrés.'},
  {q:'Politique de retour', a:'30 jours pour retourner le produit. Remboursement intégral garanti sans justification.'}
];

document.getElementById('faqItems').innerHTML = faqs.map(f=>`
  <div class="faq-item" onclick="this.classList.toggle('open')">
    <div class="faq-question">${f.q}<span class="faq-icon">+</span></div>
    <div class="faq-answer">${f.a}</div>
  </div>`).join('');

// ── PANIER ──
async function addToCart() {
  const btn = document.getElementById('addToCartBtn');
  btn.textContent = '⏳ Ajout en cours...';
  btn.disabled = true;
  try {
    await fetch('/cart/add.js', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ id: BASE_ID, quantity: 1 })
    });
    const price = '{{ product.price | money }}';
    document.getElementById('cartModalItems').innerHTML = `
      <div class="cart-modal-item">
        <span class="cart-modal-item-name">HELIX™ ×1</span>
        <span style="font-weight:700;">${price}</span>
      </div>`;
    document.getElementById('cartModalTotal').innerHTML = `<span>Total</span><span>${price}</span>`;
    document.getElementById('cartOverlay').classList.add('show');
  } catch(e) {
    alert('Une erreur est survenue. Veuillez réessayer.');
  }
  btn.disabled = false;
  btn.textContent = '🛒 Commander HELIX™ — {{ product.price | money }}';
}

function closeCartOverlay() {
  document.getElementById('cartOverlay').classList.remove('show');
}
document.getElementById('cartOverlay').addEventListener('click', function(e){
  if(e.target===this) closeCartOverlay();
});

// ── IMAGE ──
function selectImage(thumb, src) {
  document.getElementById('mainImage').src = src;
  document.querySelectorAll('.thumb').forEach(t=>t.classList.remove('active'));
  thumb.classList.add('active');
}

// ── COUNTDOWN ──
function updateCountdown() {
  const now = new Date(), deadline = new Date();
  deadline.setHours(23,59,59,0);
  let diff = Math.max(0, Math.floor((deadline-now)/1000));
  const h = Math.floor(diff/3600), m = Math.floor((diff%3600)/60), s = diff%60;
  document.getElementById('countdown').textContent =
    String(h).padStart(2,'0')+'H '+String(m).padStart(2,'0')+'MIN '+String(s).padStart(2,'0')+'SEC';
}
setInterval(updateCountdown, 1000);
updateCountdown();

// ── ANNOUNCE BAR TIMER ──
(function() {
  const end = new Date();
  end.setDate(end.getDate() + 3);
  end.setHours(4, 0, 37, 0);
  function tick() {
    const diff = Math.max(0, Math.floor((end - new Date()) / 1000));
    const d = Math.floor(diff/86400), h = Math.floor((diff%86400)/3600);
    const m = Math.floor((diff%3600)/60), s = diff%60;
    document.getElementById('timerD').textContent = String(d).padStart(2,'0');
    document.getElementById('timerH').textContent = String(h).padStart(2,'0');
    document.getElementById('timerM').textContent = String(m).padStart(2,'0');
    document.getElementById('timerS').textContent = String(s).padStart(2,'0');
  }
  setInterval(tick, 1000);
  tick();
})();

// ── STICKY CTA ──
window.addEventListener('scroll', function() {
  const btn = document.getElementById('addToCartBtn');
  const sticky = document.getElementById('stickyCta');
  if (!btn || !sticky) return;
  const rect = btn.getBoundingClientRect();
  sticky.style.display = rect.bottom < 0 ? 'flex' : 'none';
});
document.getElementById('stickyCta').style.display = 'none';

// ── INIT ──
renderReviews();

</script>

{% schema %}
{
  "name": "HELIX Product",
  "settings": []
}
{% endschema %}