Guide des tailles

<div class="sf-size-guide">
  <h2>Guide intelligent des tailles</h2>
  <p>Trouvez votre taille recommandée en quelques secondes.</p>

  <label>Type de produit</label>
  <select id="sfProductType">
    <option value="tshirt">T-shirt</option>
    <option value="hoodie">Hoodie / Sweat</option>
    <option value="shorts">Short</option>
    <option value="tracksuit">Ensemble</option>
  </select>

  <label>Votre taille (cm)</label>
  <input id="sfHeight" type="number" placeholder="Ex: 178">

  <label>Votre poids (kg)</label>
  <input id="sfWeight" type="number" placeholder="Ex: 75">

  <label>Votre coupe préférée</label>
  <select id="sfFit">
    <option value="regular">Normale</option>
    <option value="slim">Ajustée</option>
    <option value="oversized">Oversize</option>
  </select>

  <button onclick="sfRecommendSize()">Trouver ma taille</button>

  <div id="sfResult" class="sf-result"></div>
</div>

<style>
  .sf-size-guide {
    max-width: 520px;
    margin: 0px auto;
    border-radius: 16px;
    background: #ffffff;
    color: #111;
    font-family: inherit;
  }

  .sf-size-guide h2 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 700;
  }

  .sf-size-guide p {
    color: #666;
    margin-bottom: 22px;
  }

  .sf-size-guide label {
    display: block;
    margin: 16px 0 6px;
    font-weight: 600;
  }

  .sf-size-guide input,
  .sf-size-guide select {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
    font-size: 15px;
  }

  .sf-size-guide input:focus,
  .sf-size-guide select:focus {
    outline: none;
    border-color: #111;
  }

  .sf-size-guide button {
    width: 100%;
    margin-top: 24px;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
  }

  .sf-size-guide button:hover {
    opacity: 0.9;
  }

  .sf-result {
    margin-top: 24px;
    padding: 20px;
    border-radius: 12px;
    background: #f7f7f7;
    display: none;
    text-align: center;
  }

  .sf-result strong {
    color: #111;
    font-size: 26px;
  }
</style>

<script>
  const sfSizes = ["XS", "S", "M", "L", "XL", "XXL", "3XL"];

  function sfNextSize(size) {
    const index = sfSizes.indexOf(size);
    return sfSizes[Math.min(index + 1, sfSizes.length - 1)];
  }

  function sfPrevSize(size) {
    const index = sfSizes.indexOf(size);
    return sfSizes[Math.max(index - 1, 0)];
  }

  function sfRecommendSize() {
    const type = document.getElementById("sfProductType").value;
    const height = Number(document.getElementById("sfHeight").value);
    const weight = Number(document.getElementById("sfWeight").value);
    const fit = document.getElementById("sfFit").value;
    const result = document.getElementById("sfResult");

    if (!height || !weight) {
      result.style.display = "block";
      result.innerHTML = "Veuillez entrer votre taille et votre poids.";
      return;
    }

    let size = "M";

    if (weight < 55) size = "XS";
    else if (weight < 65) size = "S";
    else if (weight < 78) size = "M";
    else if (weight < 90) size = "L";
    else if (weight < 105) size = "XL";
    else if (weight < 120) size = "XXL";
    else size = "3XL";

    if (height > 185 && weight > 75) size = sfNextSize(size);
    if (height < 165 && weight < 70) size = sfPrevSize(size);

    if (type === "hoodie" || type === "tracksuit") {
      size = sfNextSize(size);
    }

    if (fit === "oversized") {
      size = sfNextSize(size);
    }

    if (fit === "slim") {
      size = sfPrevSize(size);
    }

    result.style.display = "block";
    result.innerHTML = `
      <p>Votre taille recommandée :</p>
      <strong>${size}</strong>
      <p style="margin-top:10px;color:#666;">
        Basé sur votre morphologie et vos préférences.
      </p>
    `;
  }
</script>