(function () {
  console.info('[stickerconfigurator] configurator-164.js v2.1.9 — fix TDZ mesure hauteur');
  const roots = document.querySelectorAll('#sc-configurator');
  roots.forEach((item, index) => {
    if (index > 0) {
      const shell = item.closest('.sc-page-shell');
      (shell || item).remove();
    }
  });

  const fallbackConfig = {
    fonts: [
      { name: 'Arial', value: 'Arial, Helvetica, sans-serif', category: 'sans' },
      { name: 'Impact', value: 'Impact, Haettenschweiler, sans-serif', category: 'display' }
    ],
    colors: [
      { name: 'Noir', value: '#111111' },
      { name: 'Rouge', value: '#d92727' }
    ],
    materials: [
      { name: 'Vinyle brillant', value: '1', price: 0 }
    ],
    priceRules: [
      { min: 0, max: 0.1, price: 100 },
      { min: 0.11, max: 0.2, price: 100 }
    ],
    logos: [],
    options: {
      enableTextMode: true,
      enableLogoMode: false,
      enableStickerType: false,
      enableMultiline: false,
      enableStencil: true,
      enableMirror: true,
      enableInside: true,
      minWidth: 5,
      maxWidth: 300,
      minHeight: 2,
      maxHeight: 120
    }
  };

  function getGlobalConfig() {
    return window.stickerConfiguratorConfig || null;
  }

  function needsDarkContrast(color) {
    const value = String(color || '').trim();
    const normalized = value.toLowerCase();
    const shortHex = value.match(/^#([0-9a-f]{3})$/i);
    const fullHex = value.match(/^#([0-9a-f]{6})$/i);
    const rgb = value.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
    let red;
    let green;
    let blue;

    if (normalized === 'white' || normalized === 'blanc') {
      return true;
    }

    if (shortHex) {
      red = parseInt(shortHex[1][0] + shortHex[1][0], 16);
      green = parseInt(shortHex[1][1] + shortHex[1][1], 16);
      blue = parseInt(shortHex[1][2] + shortHex[1][2], 16);
    } else if (fullHex) {
      red = parseInt(fullHex[1].slice(0, 2), 16);
      green = parseInt(fullHex[1].slice(2, 4), 16);
      blue = parseInt(fullHex[1].slice(4, 6), 16);
    } else if (rgb) {
      red = Number(rgb[1]);
      green = Number(rgb[2]);
      blue = Number(rgb[3]);
    } else {
      return false;
    }

    return (red * 0.299 + green * 0.587 + blue * 0.114) >= 205;
  }

  function applyPreviewContrast(element, color) {
    if (element) {
      element.classList.toggle('sc-dark-contrast', needsDarkContrast(color));
    }
  }

  function pageLooksLikeProduct() {
    return document.body.id === 'product'
      || document.body.classList.contains('page-product')
      || !!document.querySelector('input[name="id_product"]');
  }

  function detectProductId() {
    const inputValue = Number(document.querySelector('input[name="id_product"]')?.value || 0);
    if (inputValue) {
      return inputValue;
    }

    const classMatch = document.body.className.match(/product-id-(\d+)/);
    if (classMatch) {
      return Number(classMatch[1]);
    }

    return Number(window.stickerConfiguratorProductId || 0);
  }

  function autoMountConfigurator() {
    if (!pageLooksLikeProduct()) {
      return;
    }

    const target = findConfiguratorMountTarget();

    if (!target) {
      return;
    }

    const shell = document.createElement('div');
    shell.className = 'sc-page-shell sc-page-shell-auto';
    shell.innerHTML = `
      <section class="sc-product sc-product-embedded" id="sc-configurator" data-product-id="${detectProductId()}">
        <script type="application/json" id="sc-config-data"></script>
        <div class="sc-preview-panel" aria-label="Apercu du sticker">
          <div class="sc-preview-tools">
            <span id="sc-real-size-label">Hauteur reelle : 12 cm</span>
            <button class="sc-icon-button" id="sc-zoom-out" type="button" aria-label="Reduire l apercu">-</button>
            <button class="sc-icon-button" id="sc-zoom-in" type="button" aria-label="Agrandir l apercu">+</button>
          </div>
          <div class="sc-preview-surface">
            <div class="sc-guide sc-guide-top"></div>
            <div class="sc-guide sc-guide-bottom"></div>
            <div class="sc-dimension-label" id="sc-dimension-label"><span></span></div>
            <div class="sc-sticker-shadow">
              <div id="sc-sticker-preview" class="sc-sticker-preview">Votre texte</div>
              <div id="sc-logo-preview" class="sc-logo-preview" hidden></div>
            </div>
          </div>
          <div class="sc-preview-meta">
            <span id="sc-preview-size">40 x 12 cm</span>
            <span id="sc-preview-finish">Vinyle brillant</span>
          </div>
        </div>
        <form class="sc-config-panel" id="sc-config-form" method="post">
          <input type="hidden" name="sticker_configuration" id="sc-configuration-json" value="">
          <div class="sc-product-heading">
            <p class="sc-crumb">Personnalise / Sticker</p>
            <h1>Sticker personnalise</h1>
            <div class="sc-rating" hidden><span>★★★★★</span><strong></strong><small></small></div>
          </div>
          <section class="sc-step">
            <div class="sc-step-title"><span>1</span><h2>Type de sticker</h2></div>
            <div class="sc-mode-tabs"><button type="button" class="active" data-mode="text">Texte</button><button type="button" data-mode="logo">Logo SVG</button></div>
          </section>
          <section class="sc-step sc-text-panel">
            <div class="sc-step-title"><span>2</span><h2>Texte</h2></div>
            <textarea id="sc-text-input" rows="2" maxlength="80" placeholder="Votre texte">Votre texte</textarea>
            <div class="sc-specials" aria-label="Caracteres speciaux">
              <button type="button">É</button><button type="button">È</button><button type="button">Ê</button><button type="button">Ë</button><button type="button">À</button><button type="button">Â</button><button type="button">Î</button><button type="button">Ï</button><button type="button">Ô</button><button type="button">œ</button><button type="button">#</button><button type="button">@</button><button type="button">€</button>
            </div>
            <label class="sc-check-row"><input id="sc-multiline" type="checkbox"><span>Mode multiligne</span></label>
          </section>
          <section class="sc-step sc-logo-panel" hidden><div class="sc-step-title"><span>2</span><h2>Logo</h2></div><div class="sc-logo-grid" id="sc-logo-grid"></div></section>
          <section class="sc-step sc-text-panel">
            <div class="sc-step-title"><span>3</span><h2>Police</h2></div>
            <div class="sc-font-tabs" role="tablist"><button class="active" type="button" data-filter="all">Toutes</button><button type="button" data-filter="sans">Sans-serif</button><button type="button" data-filter="serif">Serif</button><button type="button" data-filter="script">Calligraphie</button><button type="button" data-filter="display">Impact</button></div>
            <div class="sc-font-grid" id="sc-font-grid"></div>
          </section>
          <section class="sc-step">
            <div class="sc-step-title"><span>4</span><h2>Couleur et materiau</h2></div>
            <div class="sc-color-grid" id="sc-color-grid"></div>
            <div class="sc-material-grid" id="sc-material-grid"></div>
            <label class="sc-native-material-field">Materiau / finition<select id="sc-material"></select></label>
          </section>
          <section class="sc-step sc-two-cols">
            <div>
            <div class="sc-step-title"><span>5</span><h2>Taille</h2></div>
            <div class="sc-size-grid"><label>Largeur (cm)<input id="sc-width" type="number" min="5" max="300" step="0.1" value="40"></label><label>Hauteur (cm)<input id="sc-height" type="number" min="2" max="120" step="0.1" value="12"></label></div>
            <div class="sc-total-size-reminder" id="sc-total-size-reminder" aria-live="polite">Longueur totale : <strong>40 cm</strong></div>
          </div>
            <div>
              <label class="sc-check-row"><input id="sc-stencil" type="checkbox"><span>Pochoir</span></label>
              <label class="sc-check-row"><input id="sc-mirror" type="checkbox"><span>Miroir</span></label>
              <label class="sc-check-row"><input id="sc-inside" type="checkbox"><span>Collage interieur vitre</span></label>
            </div>
          </section>
          <section class="sc-step">
            <div class="sc-step-title"><span>7</span><h2>Quantite</h2></div>
            <div class="sc-qty-row"><button type="button" data-qty="1" class="active">1</button><button type="button" data-qty="2">2</button><button type="button" data-qty="3">3</button><button type="button" data-qty="5">5</button><button type="button" data-qty="10">10</button><button type="button" data-qty="15">15</button><button type="button" data-qty="20">20</button><button type="button" data-qty="30">30</button><button type="button" data-qty="50">50</button><span class="sc-qty-custom-group"><button type="button" data-qty="100">100</button><span class="sc-quantity-stepper"><button type="button" id="sc-quantity-minus" aria-label="Reduire la quantite">−</button><input id="sc-quantity" type="number" min="1" max="999" step="1" value="1" inputmode="numeric" aria-label="Quantite personnalisee"><button type="button" id="sc-quantity-plus" aria-label="Augmenter la quantite">+</button></span></span></div>
            <aside class="sc-checkout"><div><small>Prix estime</small><strong id="sc-price">0,40 €</strong></div><button type="submit">Ajouter au panier</button><div class="sc-delivery-hook" id="sc-delivery-hook"></div></aside>
          </section>
        </form>
      </section>
      <dialog id="sc-cart-dialog"><form method="dialog"><h2>Configuration prete</h2><p id="sc-cart-summary"></p><button>Fermer</button></form></dialog>
    `;
    const data = shell.querySelector('#sc-config-data');
    data.textContent = JSON.stringify(getGlobalConfig() || fallbackConfig);
    insertConfiguratorShell(shell);
  }

  function findConfiguratorMountTarget() {
    return document.querySelector('.cc-configurator-wrapper')
      || document.querySelector('.cc-preview-area')
      || document.querySelector('.tabs')
      || document.querySelector('.product-container')
      || document.querySelector('#main')
      || document.querySelector('main');
  }

  function insertConfiguratorShell(shell) {
    const themeWrapper = document.querySelector('.cc-configurator-wrapper');
    if (themeWrapper) {
      themeWrapper.replaceChildren(shell);
      return;
    }

    const themePreview = document.querySelector('.cc-preview-area');
    if (themePreview) {
      themePreview.replaceChildren(shell);
      return;
    }

    const tabs = document.querySelector('.tabs');
    if (tabs && tabs.parentElement) {
      tabs.insertAdjacentElement('beforebegin', shell);
      return;
    }

    const productContainer = document.querySelector('.product-container');
    if (productContainer && productContainer.parentElement) {
      productContainer.insertAdjacentElement('afterend', shell);
      return;
    }

    const main = document.querySelector('#main') || document.querySelector('main');
    if (main) {
      main.append(shell);
    }
  }

  function relocateConfigurator() {
    if (!pageLooksLikeProduct()) {
      return;
    }

    const currentRoot = document.querySelector('#sc-configurator');
    if (!currentRoot) {
      return;
    }

    const shell = currentRoot.closest('.sc-page-shell') || currentRoot;
    const tabs = document.querySelector('.tabs');

    if (tabs && tabs.parentElement && shell.nextElementSibling !== tabs) {
      tabs.insertAdjacentElement('beforebegin', shell);
    }
  }

  function tidyProductPageAroundConfigurator() {
    if (!pageLooksLikeProduct()) {
      return;
    }

    const quantity = document.querySelector('#quantity_wanted');
    const nativeQty = quantity ? quantity.closest('.qty') : document.querySelector('.product-quantity .qty');
    if (nativeQty) {
      nativeQty.style.display = 'none';
      nativeQty.setAttribute('data-sc-hidden-native-qty', '1');
    }

    document.querySelectorAll('.product-buybox, .product-actions, #add-to-cart-or-refresh, .product-add-to-cart, .wishlist-button-add').forEach((buyElement) => {
      buyElement.style.display = 'none';
      buyElement.setAttribute('data-sc-hidden-native-buybox', '1');
    });

    document.querySelectorAll('.product-customization, .js-product-customization').forEach((customization) => {
      customization.style.display = 'none';
      customization.setAttribute('data-sc-hidden-native-customization', '1');
    });

    document.querySelectorAll('.product-variants, .js-product-variants').forEach((variants) => {
      if (!variants.textContent.trim()) {
        variants.style.display = 'none';
        variants.setAttribute('data-sc-hidden-empty-variants', '1');
      }
    });

    document.querySelectorAll('.social-sharing').forEach((sharing) => {
      sharing.style.display = 'none';
      sharing.setAttribute('data-sc-hidden-social-sharing', '1');
    });

    document.querySelectorAll('.images-container .product-cover').forEach((cover) => {
      cover.style.display = 'none';
      cover.setAttribute('data-sc-hidden-native-cover', '1');
    });

    const reassurance = document.querySelector('.blockreassurance_product');
    const shell = document.querySelector('.sc-page-shell');
    const tabs = document.querySelector('.tabs');

    if (reassurance && shell && tabs && reassurance.nextElementSibling !== tabs) {
      reassurance.classList.add('sc-reassurance-moved');
      tabs.insertAdjacentElement('beforebegin', reassurance);
    }
  }

  function moveDeliveryBlockToCheckout() {
    const target = document.querySelector('.sc-checkout .sc-delivery-hook');
    if (!target || target.dataset.scDeliveryReady === '1') {
      return;
    }

    const candidates = Array.from(document.body.querySelectorAll('div, section, article, p, span')).filter((element) => {
      if (element.closest('.sc-checkout') || element.closest('script, style')) {
        return false;
      }

      const text = (element.textContent || '').replace(/\s+/g, ' ').trim().toLowerCase();

      return text.includes('commandez maintenant')
        && text.includes('livraison')
        && text.length < 350;
    });

    const source = candidates.sort((a, b) => {
      return (a.textContent || '').length - (b.textContent || '').length;
    })[0];

    if (!source) {
      return;
    }

    source.style.display = '';
    target.innerHTML = '';
    target.appendChild(source);
    target.dataset.scDeliveryReady = '1';
  }

  let root = document.querySelector('#sc-configurator');
  if (!root) {
    autoMountConfigurator();
    root = document.querySelector('#sc-configurator');
  }
  relocateConfigurator();
  tidyProductPageAroundConfigurator();
  moveDeliveryBlockToCheckout();
  root = document.querySelector('#sc-configurator');
  const cartPreview = document.querySelector('[data-sc-cart-preview]');

  function readConfig() {
    const globalConfig = getGlobalConfig();

    try {
      const parsed = root ? JSON.parse(root.querySelector('#sc-config-data').textContent) : globalConfig;
      return {
        fonts: parsed.fonts && parsed.fonts.length ? parsed.fonts : fallbackConfig.fonts,
        colors: parsed.colors && parsed.colors.length ? parsed.colors : fallbackConfig.colors,
        materials: parsed.materials && parsed.materials.length ? parsed.materials : fallbackConfig.materials,
        priceRules: parsed.priceRules && parsed.priceRules.length ? parsed.priceRules : fallbackConfig.priceRules,
        logos: parsed.logos && parsed.logos.length ? parsed.logos : fallbackConfig.logos,
        options: {
          enableTextMode: !parsed.options || parsed.options.enableTextMode !== false,
          enableLogoMode: !!(parsed.options && parsed.options.enableLogoMode),
          enableStickerType: !!(parsed.options && parsed.options.enableStickerType),
          enableMultiline: !!(parsed.options && parsed.options.enableMultiline),
          enableStencil: !parsed.options || parsed.options.enableStencil !== false,
          enableMirror: !parsed.options || parsed.options.enableMirror !== false,
          enableInside: !parsed.options || parsed.options.enableInside !== false
        }
      };
    } catch (error) {
      return fallbackConfig;
    }
  }

  function formatPrice(value) {
    return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value);
  }

  function renderCartPreview() {
    if (!cartPreview) {
      return;
    }

    if (cartPreview.dataset.serverConfig === '1') {
      return;
    }

    const raw = window.localStorage.getItem('stickerConfiguratorLastConfig');
    const empty = cartPreview.querySelector('.sc-cart-preview-empty');
    const content = cartPreview.querySelector('.sc-cart-preview-content');
    const art = cartPreview.querySelector('.sc-cart-preview-art');
    const summary = cartPreview.querySelector('.sc-cart-preview-summary');

    if (!raw) {
      return;
    }

    try {
      const config = JSON.parse(raw);
      empty.hidden = true;
      content.hidden = false;
      art.style.color = config.color;
      applyPreviewContrast(art, config.color);
      art.innerHTML = config.mode === 'logo' && config.logoSvg
        ? config.logoSvg
        : `<span style="font-family:${config.fontFamily};transform:${config.transform};display:inline-block;">${config.text}</span>`;
      summary.textContent = `${config.mode === 'logo' ? 'Logo SVG' : config.text} - ${config.width} x ${config.height} cm - ${config.colorName} - ${config.materialName} - ${config.quantity} ex.`;
    } catch (error) {
      window.localStorage.removeItem('stickerConfiguratorLastConfig');
    }
  }

  function getProductId() {
    const value = Number(root.getAttribute('data-product-id'));
    return Number.isFinite(value) ? value : 0;
  }

  function getProductAttributeId() {
    const input = document.querySelector('input[name="id_product_attribute"]');
    const value = Number(input ? input.value : 0);
    return Number.isFinite(value) ? value : 0;
  }

  async function saveConfiguration() {
    const productId = getProductId();
    const globalSaveUrl = typeof stickerConfiguratorSaveUrl !== 'undefined' ? stickerConfiguratorSaveUrl : '';
    const globalToken = typeof stickerConfiguratorToken !== 'undefined' ? stickerConfiguratorToken : '';
    const saveUrl = root.dataset.saveUrl
      || globalSaveUrl
      || window.stickerConfiguratorSaveUrl
      || `${window.location.origin}/module/stickerconfigurator/save`;
    const saveToken = root.dataset.saveToken || globalToken || window.stickerConfiguratorToken;

    if (!productId || !saveUrl || !hiddenConfig.value) {
      throw new Error('La configuration ne peut pas être enregistrée.');
    }

    const body = new URLSearchParams();
    body.set('token', saveToken || (window.prestashop && prestashop.static_token ? prestashop.static_token : ''));
    body.set('id_product', String(productId));
    body.set('id_product_attribute', String(getProductAttributeId()));
    body.set('configuration', hiddenConfig.value);

    const response = await window.fetch(saveUrl, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: body.toString()
    });
    const result = await response.json().catch(() => ({}));

    if (!response.ok || !result.success || !result.id_customization) {
      throw new Error(result.error || 'La configuration ne peut pas être enregistrée.');
    }

    return result;
  }

  async function addProductToCart(savedConfiguration) {
    const productId = getProductId();

    if (!productId || !window.prestashop || !prestashop.urls || !prestashop.urls.pages || !prestashop.urls.pages.cart) {
      return false;
    }

    const url = new URL(prestashop.urls.pages.cart, window.location.origin);
    url.searchParams.set('add', '1');
    url.searchParams.set('action', 'update');
    url.searchParams.set('ajax', '1');
    url.searchParams.set('id_product', String(productId));
    url.searchParams.set('id_product_attribute', String(getProductAttributeId()));
    url.searchParams.set('qty', String(savedConfiguration.quantity));
    url.searchParams.set('id_customization', String(savedConfiguration.id_customization));

    if (prestashop.static_token) {
      url.searchParams.set('token', prestashop.static_token);
    }

    const response = await window.fetch(url.toString(), {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    });

    const cartResponse = await response.clone().json().catch(() => ({}));

    if (!response.ok || cartResponse.hasError || (cartResponse.errors && cartResponse.errors.length)) {
      return false;
    }

    if (prestashop.emit) {
      prestashop.emit('updateCart', {
        reason: {
          idProduct: productId,
          linkAction: 'add-to-cart'
        },
        resp: cartResponse
      });
    }

    return true;
  }

  function fitCartPreviewVisual(visual) {
    if (!visual || visual.querySelector('svg')) {
      return;
    }

    visual.style.fontSize = '14px';
    window.requestAnimationFrame(() => {
      let size = 14;
      while (visual.scrollWidth > visual.clientWidth && size > 5) {
        size -= 1;
        visual.style.fontSize = `${size}px`;
      }
    });
  }

  function attachCartPreviewsToProductLines() {
    const staging = document.querySelector('.sc-cart-preview-staging');
    const cacheKey = 'stickerConfiguratorCartPreviews';
    let previews = staging ? Array.from(staging.querySelectorAll('[data-sc-cart-line-preview]')) : [];

    const checkoutTotalHt = staging ? staging.querySelector('.sc-checkout-total-ht') : null;
    const checkoutTotals = document.querySelector('body#checkout .cart-summary-totals');
    if (checkoutTotalHt && checkoutTotals && !checkoutTotals.querySelector('.sc-checkout-total-ht')) {
      checkoutTotalHt.hidden = false;
      checkoutTotals.insertAdjacentElement('afterbegin', checkoutTotalHt);
    }

    if (previews.length) {
      try {
        window.sessionStorage.setItem(cacheKey, JSON.stringify(previews.map((preview) => preview.outerHTML)));
      } catch (error) {
        // The server-rendered preview remains available when storage is disabled.
      }
    } else {
      try {
        const cached = JSON.parse(window.sessionStorage.getItem(cacheKey) || '[]');
        previews = cached.map((html) => {
          const template = document.createElement('template');
          template.innerHTML = html;
          return template.content.firstElementChild;
        }).filter(Boolean);
      } catch (error) {
        previews = [];
      }
    }

    const productIds = [...new Set(previews.map((preview) => preview.dataset.productId).filter((id) => /^\d+$/.test(id || '')))];
    if (productIds.length) {
      let guard = document.querySelector('#sc-cart-image-guard');
      if (!guard) {
        guard = document.createElement('style');
        guard.id = 'sc-cart-image-guard';
        document.head.append(guard);
      }
      guard.textContent = productIds.map((id) =>
        `.cart-item:has([data-id-product="${id}"]) .product-image > picture, .cart-item:has([data-id_product="${id}"]) .product-image > picture { visibility: hidden !important; }`
      ).join('\n');
    }

    previews.forEach((preview) => {
      const productId = preview.dataset.productId;
      const customizationId = preview.dataset.customizationId;
      let marker = null;

      if (customizationId && customizationId !== '0') {
        marker = document.querySelector(`.cart-item [data-id-customization="${customizationId}"], .cart-item [data-id_customization="${customizationId}"]`);
      }
      if (!marker && productId) {
        marker = document.querySelector(`.cart-item [data-id-product="${productId}"], .cart-item [data-id_product="${productId}"]`);
      }

      const row = marker ? marker.closest('.cart-item') : null;
      const checkoutMarker = !row && productId
        ? document.querySelector(`#cart-summary-product-list li.media a[href*="/${productId}-"]`)
        : null;
      const checkoutRow = checkoutMarker ? checkoutMarker.closest('li.media') : null;
      const line = row || checkoutRow;
      const target = row
        ? row.querySelector('.product-line-grid-body')
        : checkoutRow ? checkoutRow.querySelector('.media-body') : null;
      const imageTarget = row
        ? row.querySelector('.product-line-grid-left .product-image')
        : checkoutRow ? checkoutRow.querySelector('.media-left a') : null;
      const visual = preview.querySelector('.sc-cart-preview-art');
      const details = preview.querySelector('.sc-cart-preview-summary');
      const cartKey = customizationId && customizationId !== '0' ? customizationId : productId;
      const existing = line ? line.querySelector(`[data-sc-custom-cart="${cartKey}"]`) : null;

      if (line) {
        line.querySelectorAll('.customizations').forEach((customizations) => customizations.remove());
        line.querySelectorAll('a[data-target^="#product-customizations-modal-"]').forEach((link) => {
          const line = link.closest('.product-line-info');
          (line || link).remove();
        });
      }

      if (target && imageTarget && visual && details && !existing) {
        visual.classList.add('sc-cart-product-visual');
        visual.dataset.scCustomCart = cartKey;
        visual.style.fontFamily = preview.dataset.fontFamily || '';
        applyPreviewContrast(visual, preview.dataset.color || preview.dataset.colorName || visual.style.color);
        details.classList.add('sc-cart-product-summary');
        details.dataset.scCustomCart = cartKey;
        imageTarget.replaceChildren(visual);
        fitCartPreviewVisual(visual);
        target.append(details);
        if (checkoutRow) {
          checkoutRow.classList.add('sc-checkout-configured-product');
        }
        preview.remove();
      } else if (existing) {
        preview.remove();
      }
    });

    if (staging && !staging.querySelector('[data-sc-cart-line-preview]')) {
      staging.remove();
    }
  }

  renderCartPreview();
  attachCartPreviewsToProductLines();
  if (window.prestashop && prestashop.on) {
    prestashop.on('updatedCart', () => {
      window.setTimeout(attachCartPreviewsToProductLines, 0);
      window.setTimeout(attachCartPreviewsToProductLines, 50);
      window.setTimeout(attachCartPreviewsToProductLines, 300);
    });
  }
  const cartOverview = document.querySelector('.cart-overview, .cart-container');
  if (cartOverview && window.MutationObserver) {
    let cartPreviewTimer = 0;
    new MutationObserver(() => {
      window.clearTimeout(cartPreviewTimer);
      cartPreviewTimer = window.setTimeout(attachCartPreviewsToProductLines, 0);
    }).observe(cartOverview, { childList: true, subtree: true });
  }

  if (!root) {
    return;
  }

  const config = readConfig();
  const state = {
    mode: 'text',
    text: 'Votre texte',
    font: config.fonts[0].name,
    fontCategory: 'all',
    color: (config.colors.find((color) => color.name.toLowerCase() === 'noir') || config.colors[0]).value,
    colorName: (config.colors.find((color) => color.name.toLowerCase() === 'noir') || config.colors[0]).name,
    material: config.materials[0].name,
    materialMultiplier: parseMultiplier(config.materials[0].value),
    logoName: config.logos[0] ? config.logos[0].name : '',
    logoSvg: config.logos[0] ? config.logos[0].svg : '',
    width: 40,
    height: 12,
    baseWidth: 40,
    baseHeight: 12,
    quantity: 1,
    keepRatio: true,
    multiline: false,
    stencil: false,
    mirror: false,
    inside: false,
    stretchX: 100,
    rotation: 0,
    zoom: 1,
    naturalWidthCm: 40,
    offsetX: 0,
    offsetY: 0
  };
  const modeSettingKeys = [
    'text',
    'font',
    'fontCategory',
    'color',
    'colorName',
    'material',
    'materialMultiplier',
    'logoName',
    'logoSvg',
    'width',
    'height',
    'baseWidth',
    'baseHeight',
    'keepRatio',
    'multiline',
    'stencil',
    'mirror',
    'inside',
    'stretchX',
    'rotation',
    'zoom',
    'naturalWidthCm',
    'offsetX',
    'offsetY'
  ];
  const modeSettings = {
    text: {},
    logo: {}
  };

  const preview = root.querySelector('#sc-sticker-preview');
  const logoPreview = root.querySelector('#sc-logo-preview');
  const fontGrid = root.querySelector('#sc-font-grid');
  const logoGrid = root.querySelector('#sc-logo-grid');
  const colorGrid = root.querySelector('#sc-color-grid');
  const materialGrid = root.querySelector('#sc-material-grid');
  const materialSelect = root.querySelector('#sc-material');
  const textInput = root.querySelector('#sc-text-input');
  const widthInput = root.querySelector('#sc-width');
  const heightInput = root.querySelector('#sc-height');
  const quantityInput = root.querySelector('#sc-quantity');
  const quantityMinus = root.querySelector('#sc-quantity-minus');
  const quantityPlus = root.querySelector('#sc-quantity-plus');
  const stretchInput = root.querySelector('#sc-stretch-x');
  const rotationInput = root.querySelector('#sc-rotation');
  const price = root.querySelector('#sc-price');
  let measureCanvasCtx = null;
  const HEIGHT_CALIBRATION = 1.011;
  const summaryText = root.querySelector('#sc-summary-text') || document.querySelector('#sc-summary-text');
  const summarySize = root.querySelector('#sc-summary-size') || document.querySelector('#sc-summary-size');
  const summaryFont = root.querySelector('#sc-summary-font') || document.querySelector('#sc-summary-font');
  const summaryColor = root.querySelector('#sc-summary-color') || document.querySelector('#sc-summary-color');
  const summaryMaterial = root.querySelector('#sc-summary-material') || document.querySelector('#sc-summary-material');
  const summaryOptions = root.querySelector('#sc-summary-options') || document.querySelector('#sc-summary-options');
  const summaryQuantity = root.querySelector('#sc-summary-quantity') || document.querySelector('#sc-summary-quantity');
  const previewSize = root.querySelector('#sc-preview-size');
  const previewFinish = root.querySelector('#sc-preview-finish');
  const realSizeLabel = root.querySelector('#sc-real-size-label');
  const previewSurface = root.querySelector('.sc-preview-surface');
  const guideTop = root.querySelector('.sc-guide-top');
  const guideBottom = root.querySelector('.sc-guide-bottom');
  const dimensionLabel = root.querySelector('#sc-dimension-label');
  let secondaryDimensionLabel = root.querySelector('#sc-secondary-dimension-label');
  let totalDimensionLabel = root.querySelector('#sc-total-dimension-label');
  const totalSizeReminder = root.querySelector('#sc-total-size-reminder');
  const hiddenConfig = root.querySelector('#sc-configuration-json');
  const dialog = document.querySelector('#sc-cart-dialog');
  const summary = document.querySelector('#sc-cart-summary');
  let fontPickerButton = null;
  let textEditorButton = null;

  const dimensionLimits = {
    minWidth: Number(config.options.minWidth) || 5,
    maxWidth: Number(config.options.maxWidth) || 300,
    minHeight: Number(config.options.minHeight) || 2,
    maxHeight: Number(config.options.maxHeight) || 120
  };

  function copyModeSettings() {
    return modeSettingKeys.reduce((settings, key) => {
      settings[key] = state[key];
      return settings;
    }, {});
  }

  function saveCurrentModeSettings() {
    modeSettings[state.mode] = copyModeSettings();
  }

  function applyModeSettings(mode) {
    Object.assign(state, modeSettings[mode] || {});
    state.mode = mode;
    textInput.value = state.text;
    textInput.rows = state.multiline ? 4 : 2;
    syncSizeInputs();
    if (stretchInput) {
      stretchInput.value = state.stretchX;
    }
    if (rotationInput) {
      rotationInput.value = state.rotation;
    }
    materialSelect.value = state.material;

    [
      ['#sc-keep-ratio', 'keepRatio'],
      ['#sc-multiline', 'multiline'],
      ['#sc-stencil', 'stencil'],
      ['#sc-mirror', 'mirror'],
      ['#sc-inside', 'inside']
    ].forEach(([selector, key]) => {
      const input = root.querySelector(selector);
      if (input) {
        input.checked = !!state[key];
      }
    });

    if (fontPickerButton) {
      fontPickerButton.textContent = `Police : ${state.font}`;
    }
    updateTextEditorButton();
  }

  function switchMode(mode) {
    if (mode === state.mode) {
      return;
    }

    saveCurrentModeSettings();
    applyModeSettings(mode);
    closeOpenConfiguratorDialogs();
    renderFonts();
    renderLogos();
    renderColors();
    renderMaterials();
    renderMode();
    render();
  }

  modeSettings.text = copyModeSettings();
  modeSettings.logo = copyModeSettings();
  modeSettings.logo.width = modeSettings.logo.height;
  modeSettings.logo.baseWidth = modeSettings.logo.baseHeight;
  syncSizeInputs();

  function getLargeImageUrl(image) {
    return image.dataset.imageLargeSrc
      || image.dataset.largeSrc
      || image.getAttribute('data-image-large-src')
      || image.getAttribute('data-large-src')
      || image.src.replace('-small_default/', '-large_default/').replace('-home_default/', '-large_default/').replace('-medium_default/', '-large_default/');
  }

  function openProductImagePopup(image) {
    let galleryDialog = document.querySelector('#sc-gallery-dialog');
    if (!galleryDialog) {
      galleryDialog = document.createElement('dialog');
      galleryDialog.id = 'sc-gallery-dialog';
      galleryDialog.className = 'sc-gallery-dialog';
      galleryDialog.innerHTML = '<form method="dialog"><button class="sc-gallery-close" aria-label="Fermer">×</button></form><img alt="">';
      galleryDialog.addEventListener('click', (event) => {
        if (event.target === galleryDialog) {
          galleryDialog.close();
        }
      });
      document.body.append(galleryDialog);
    }

    const targetImage = galleryDialog.querySelector('img');
    targetImage.src = getLargeImageUrl(image);
    targetImage.alt = image.alt || 'Exemple de sticker';
    galleryDialog.showModal();
  }

  function installProductImageGalleryPopup() {
    document.querySelectorAll('.product-images img, .js-qv-mask img.thumb, .cc-product-thumbs .cc-thumb img, .cc-thumb img').forEach((image) => {
      if (image.dataset.scPopupReady) {
        return;
      }

      image.dataset.scPopupReady = '1';
      image.style.cursor = 'zoom-in';
      const link = image.closest('a');
      const openImage = (event) => {
        event.preventDefault();
        event.stopPropagation();
        openProductImagePopup(image);
      };
      image.addEventListener('click', openImage);
      if (link && link.dataset.scPopupReady !== '1') {
        link.dataset.scPopupReady = '1';
        link.addEventListener('click', openImage);
      }
    });
  }

  function moveLivePreviewToProductCover() {
    return;
    const previewPanel = root.querySelector('.sc-preview-panel');
    const productCover = document.querySelector('.images-container .product-cover') || document.querySelector('.product-cover');

    if (!previewPanel || !productCover || productCover.contains(previewPanel)) {
      return;
    }

    let host = productCover.querySelector('.sc-live-cover-host');
    if (!host) {
      host = document.createElement('div');
      host.className = 'sc-live-cover-host';
      productCover.append(host);
    }

    productCover.querySelectorAll(':scope > picture, :scope > img, :scope > .layer, :scope > .product-flags').forEach((element) => {
      element.classList.add('sc-product-cover-hidden');
      element.setAttribute('aria-hidden', 'true');
    });

    productCover.prepend(host);
    host.append(previewPanel);
    root.classList.add('sc-preview-extracted');
    document.body.classList.add('sc-preview-in-product-cover');
    installProductImageGalleryPopup();
  }

  function moveProductImagesUnderPreview() {
    const previewPanel = root.querySelector('.sc-preview-panel');
    const mask = document.querySelector('.images-container .js-qv-mask') || document.querySelector('.js-qv-mask');

    if (!previewPanel || !mask || previewPanel.contains(mask)) {
      return;
    }

    let examples = previewPanel.querySelector('.sc-example-images');
    if (!examples) {
      examples = document.createElement('div');
      examples.className = 'sc-example-images';
      examples.innerHTML = '<div class="sc-example-images-title">Exemples</div>';
      previewPanel.append(examples);
    }

    examples.append(mask);
    installProductImageGalleryPopup();
  }

  function moveProductTitleAboveConfigurator() {
    const title = document.querySelector('.product-detail-name');
    const productContainer = document.querySelector('.product-container');

    if (!title || !productContainer || title.dataset.scTitleMoved === '1') {
      return;
    }

    const holder = document.createElement('div');
    holder.className = 'sc-product-title-holder';
    productContainer.insertAdjacentElement('beforebegin', holder);
    holder.append(title);
    title.dataset.scTitleMoved = '1';
  }

  function stabilizeProductLayout() {
    moveProductTitleAboveConfigurator();
    relocateConfigurator();
    tidyProductPageAroundConfigurator();
    moveDeliveryBlockToCheckout();
    moveProductImagesUnderPreview();
    installProductImageGalleryPopup();
    syncProductRating();
  }

  function parseReviewNumber(text) {
    const match = String(text || '').match(/(\d+(?:[,.]\d+)?)/);
    return match ? Number(match[1].replace(',', '.')) : 0;
  }

  function findProductRating() {
    const outsideConfigurator = (element) => !root.contains(element);
    const reviewSources = [...document.querySelectorAll(
      '#product-comments-list-header, .comments-nb, .product-comments-additional-info, .product-list-reviews, .comments-note, .grade-stars, .star-content, [data-grade], [data-rating], [data-average]'
    )].filter(outsideConfigurator);

    let count = 0;
    let grade = 0;

    reviewSources.forEach((element) => {
      const text = (element.textContent || '').trim();
      const labelledText = `${text} ${element.getAttribute('aria-label') || ''} ${element.getAttribute('title') || ''}`;
      const countMatch = labelledText.match(/(\d+)\s*(avis|commentaires?|reviews?)/i);
      const gradeMatch = labelledText.match(/(\d+(?:[,.]\d+)?)\s*(?:\/|sur)\s*5/i);

      if (!count && countMatch) {
        count = Number(countMatch[1]);
      }

      if (!grade && gradeMatch) {
        grade = parseReviewNumber(gradeMatch[1]);
      }

      ['data-grade', 'data-rating', 'data-average'].forEach((attribute) => {
        if (!grade && element.hasAttribute(attribute)) {
          grade = parseReviewNumber(element.getAttribute(attribute));
        }
      });
    });

    const commentHeader = document.querySelector('#product-comments-list-header .comments-nb, #product-comments-list-header');
    if (!count && commentHeader) {
      const headerMatch = (commentHeader.textContent || '').match(/(\d+)/);
      count = headerMatch ? Number(headerMatch[1]) : 0;
    }

    if (!grade) {
      const filledStars = [...document.querySelectorAll('.grade-stars .star-on, .star-content .star-on, .grade-stars .checked, .star-content .checked')]
        .filter(outsideConfigurator).length;
      grade = filledStars > 0 ? Math.min(5, filledStars) : 0;
    }

    return { count, grade };
  }

  function syncProductRating() {
    const rating = root.querySelector('.sc-rating');

    if (!rating) {
      return;
    }

    const foundRating = findProductRating();

    if (!foundRating.count || !foundRating.grade) {
      const existingGrade = parseReviewNumber(rating.querySelector('strong')?.textContent || '');
      const existingCount = parseReviewNumber(rating.querySelector('small')?.textContent || '');

      if (!rating.hidden && existingGrade && existingCount && existingCount !== 557) {
        return;
      }

      rating.hidden = true;
      rating.setAttribute('aria-hidden', 'true');
      return;
    }

    const formattedGrade = foundRating.grade.toLocaleString('fr-FR', {
      maximumFractionDigits: 1,
      minimumFractionDigits: foundRating.grade % 1 ? 1 : 0
    });
    const reviewLabel = `${foundRating.count} avis`;

    rating.hidden = false;
    rating.removeAttribute('aria-hidden');
    rating.setAttribute('aria-label', `Note ${formattedGrade} sur 5`);
    rating.querySelector('strong').textContent = formattedGrade;
    rating.querySelector('small').textContent = reviewLabel;
  }

  function selectedFont() {
    return config.fonts.find((font) => font.name === state.font) || config.fonts[0];
  }

  function selectedFontFor(settings = state) {
    return config.fonts.find((font) => font.name === settings.font) || config.fonts[0];
  }

  function isModeAvailable(mode) {
    if (mode === 'text') {
      return config.options.enableTextMode !== false;
    }

    return mode === 'logo' && !!config.options.enableLogoMode;
  }

  function modeSnapshot(mode) {
    return mode === state.mode ? copyModeSettings() : (modeSettings[mode] || {});
  }

  function parseMultiplier(value) {
    return Number(String(value).replace(',', '.')) || 1;
  }

  function parseFontCalibration(value) {
    const calibration = Number(String(value ?? 1).replace(',', '.'));
    if (!Number.isFinite(calibration) || calibration <= 0) {
      return 1;
    }

    return calibration > 10 ? calibration / 100 : calibration;
  }

  let _fontHeightProbe = null;
  let _fontHeightCanvas = null;
  let _fontHeightRef = null;
  const _fontHeightCache = {};

  function measuredFontHeightFactor(fontFamily) {
    try {
      const sample = 'H\u00c1gjpqy';
      const size = 300;
      if (!_fontHeightProbe) {
        _fontHeightProbe = document.createElement('span');
        _fontHeightProbe.setAttribute('aria-hidden', 'true');
        _fontHeightProbe.style.cssText = 'position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap;line-height:normal;padding:0;margin:0;font-size:' + size + 'px;';
        (document.body || document.documentElement).appendChild(_fontHeightProbe);
      }
      const measureDom = function (family) {
        _fontHeightProbe.style.fontFamily = family || 'sans-serif';
        _fontHeightProbe.textContent = sample;
        const range = document.createRange();
        range.selectNodeContents(_fontHeightProbe);
        const rect = range.getBoundingClientRect();
        return rect && rect.height > 0 ? rect.height : 0;
      };
      const measureCanvas = function (family) {
        if (!_fontHeightCanvas) {
          _fontHeightCanvas = document.createElement('canvas');
        }
        const ctx = _fontHeightCanvas.getContext('2d');
        ctx.font = size + 'px ' + (family || 'sans-serif');
        const metrics = ctx.measureText(sample);
        const h = (metrics.actualBoundingBoxAscent || 0) + (metrics.actualBoundingBoxDescent || 0);
        return h > 0 ? h : 0;
      };
      const measureOne = function (family) {
        const dom = measureDom(family);
        if (dom > 0) {
          return dom;
        }
        const canvas = measureCanvas(family);
        return canvas > 0 ? canvas : size;
      };
      if (_fontHeightRef === null) {
        _fontHeightRef = measureOne('Arial, Helvetica, sans-serif');
      }
      const key = String(fontFamily || 'sans-serif');
      if (_fontHeightCache[key] === undefined) {
        const factor = measureOne(key) / (_fontHeightRef || 1);
        _fontHeightCache[key] = (isFinite(factor) && factor > 0) ? factor : 1;
      }
      return _fontHeightCache[key];
    } catch (error) {
      return 1;
    }
  }

  function fontCalibrationFor(settings = state) {
    const font = selectedFontFor(settings) || {};
    const configuredHeight = parseFontCalibration(font.heightFactor);
    const measuredHeight = measuredFontHeightFactor(font.value);
    return {
      width: parseFontCalibration(font.widthFactor),
      height: (isFinite(measuredHeight) && measuredHeight > 0 ? measuredHeight : 1) * configuredHeight
    };
  }

  function measureTextMetrics(fontFamily, text, multiline) {
    if (!measureCanvasCtx) {
      try {
        measureCanvasCtx = document.createElement('canvas').getContext('2d');
      } catch (error) {
        measureCanvasCtx = null;
      }
    }
    const content = (text && String(text).trim()) ? String(text) : 'Votre texte';
    const lines = multiline ? content.split(/\r?\n/) : [content];
    const usableLines = lines.filter((line) => line.length > 0).length ? lines.filter((line) => line.length > 0) : [content];
    if (!measureCanvasCtx) {
      const longest = usableLines.reduce((max, line) => Math.max(max, line.length), 1);
      return { width: longest * 55, height: usableLines.length * 72 };
    }
    measureCanvasCtx.font = `100px ${fontFamily}`;
    let maxWidth = 1;
    let totalHeight = 0;
    usableLines.forEach((line) => {
      const metrics = measureCanvasCtx.measureText(line || ' ');
      const width = metrics.width || 1;
      const ascent = typeof metrics.actualBoundingBoxAscent === 'number' ? metrics.actualBoundingBoxAscent : 72;
      const descent = typeof metrics.actualBoundingBoxDescent === 'number' ? metrics.actualBoundingBoxDescent : 22;
      maxWidth = Math.max(maxWidth, width);
      totalHeight += Math.max(1, ascent + descent);
    });
    if (usableLines.length > 1) {
      totalHeight += (usableLines.length - 1) * 22;
    }
    return { width: Math.max(1, maxWidth), height: Math.max(1, totalHeight) };
  }

  function measuredAspectFor(settings = state) {
    const font = selectedFontFor(settings) || {};
    const metrics = measureTextMetrics(font.value || 'sans-serif', settings.text, settings.multiline);
    const aspect = metrics.width > 0 ? metrics.height / metrics.width : 0.3;
    return aspect * HEIGHT_CALIBRATION;
  }

  function calibratedHeightCmFor(settings = state, mode = null) {
    const currentMode = mode || (settings === state ? state.mode : 'text');
    if (currentMode !== 'text') {
      return settings.height;
    }
    // Width-driven model (same as the previous version): the customer sets the WIDTH,
    // the HEIGHT is derived from the REAL rendered text proportions, so it changes with the font.
    return clampHeight(Math.max(0.1, renderedWidthCmFor(settings, currentMode) * measuredAspectFor(settings)));
  }

  function setMaterial(name, multiplier) {
    state.material = name;
    state.materialMultiplier = parseMultiplier(multiplier);
    materialSelect.value = name;
    render();
    renderMaterials();
  }

  function calculatePrice() {
    const pricing = config.pricing || {};
    const optionUnit = isFinite(Number(pricing.option)) ? Number(pricing.option) : 1.2;
    const logoUnit = isFinite(Number(pricing.logo)) ? Number(pricing.logo) : 1.5;
    const fallbackRate = isFinite(Number(pricing.fallback)) ? Number(pricing.fallback) : 0.0065;
    const minPrice = isFinite(Number(pricing.min)) ? Number(pricing.min) : 0.4;
    const area = Math.max(renderedWidthCm() * calibratedHeightCmFor(state, state.mode), 40);
    const surfaceM2 = renderedWidthCm() * calibratedHeightCmFor(state, state.mode) / 10000;
    const options = [state.stencil, state.inside].filter(Boolean).length * optionUnit;
    const logoExtra = state.mode === 'logo' ? logoUnit : 0;
    const rule = config.priceRules.find((item) => surfaceM2 + 0.0000001 >= Number(item.min) && surfaceM2 <= Number(item.max) + 0.0000001);
    const basePrice = rule ? Number(rule.price) * surfaceM2 : area * fallbackRate;
    const colorOption = config.colors.find((item) => item.name === state.colorName);
    const materialOption = config.materials.find((item) => item.name === state.material);
    const colorPrice = Math.max(0, Number(colorOption && colorOption.price) || 0);
    const materialPrice = Math.max(0, Number(materialOption && materialOption.price) || 0);
    const unit = Math.max(minPrice, basePrice * state.materialMultiplier + colorPrice + materialPrice + options + logoExtra);
    return unit * state.quantity;
  }

  function updateCheckoutSummary() {
    const activeMode = state.mode;
    const sizeText = `${formatCentimeters(renderedWidthCm())} x ${formatCentimeters(calibratedHeightCmFor(state, activeMode))} cm`;
    const fontText = activeMode === 'logo' ? (state.logoName || 'Logo SVG') : (state.font || '-');
    const optionLabels = [];

    if (state.stencil) {
      optionLabels.push('Pochoir');
    }
    if (state.inside) {
      optionLabels.push('Pose intérieure');
    }
    if (state.mirror) {
      optionLabels.push('Miroir');
    }

    if (summaryText) {
      summaryText.textContent = activeMode === 'logo' ? (state.logoName || 'Logo SVG') : (state.text || 'Votre texte');
    }
    if (summarySize) {
      summarySize.textContent = sizeText;
    }
    if (summaryFont) {
      summaryFont.textContent = fontText;
    }
    if (summaryColor) {
      summaryColor.textContent = state.colorName || '-';
    }
    if (summaryMaterial) {
      summaryMaterial.textContent = state.material || '-';
    }
    if (summaryOptions) {
      summaryOptions.textContent = optionLabels.length ? optionLabels.join(', ') : 'Aucune';
    }
    if (summaryQuantity) {
      summaryQuantity.textContent = String(state.quantity || 1);
    }
    const themeSummaryPrice = document.querySelector('#cc-summary-price');
    if (themeSummaryPrice) {
      themeSummaryPrice.textContent = formatPrice(calculatePrice());
    }
  }

  function getTransform() {
    return getTransformFor(state);
  }

  function getTransformFor(settings = state) {
    const mirror = settings.mirror ? -1 : 1;
    return `translate(${settings.offsetX || 0}px, ${settings.offsetY || 0}px) scaleX(${mirror * (settings.stretchX / 100)}) rotate(${settings.rotation}deg)`;
  }

  function formatCentimeters(value) {
    const rounded = Math.round(value * 10) / 10;
    return Number.isInteger(rounded) ? String(rounded) : rounded.toLocaleString('fr-FR', { maximumFractionDigits: 1 });
  }

  function renderedWidthCm() {
    return renderedWidthCmFor(state);
  }

  function renderedWidthCmFor(settings = state, mode = null) {
    const currentMode = mode || (settings === state ? state.mode : 'text');
    const widthFactor = currentMode === 'text' ? fontCalibrationFor(settings).width : 1;
    return Math.max(1, settings.width * (settings.stretchX / 100) * widthFactor);
  }

  function clamp(value, min, max) {
    return Math.min(max, Math.max(min, value));
  }

  function clampWidth(value) {
    return Math.round(clamp(value, dimensionLimits.minWidth, dimensionLimits.maxWidth) * 10) / 10;
  }

  function clampHeight(value) {
    return Math.round(clamp(value, dimensionLimits.minHeight, dimensionLimits.maxHeight) * 10) / 10;
  }

  function nominalWidthFromRendered(value, settings = state, mode = null) {
    const currentMode = mode || (settings === state ? state.mode : 'text');
    const widthFactor = currentMode === 'text' ? fontCalibrationFor(settings).width : 1;
    const stretchFactor = Math.max(0.01, (settings.stretchX || 100) / 100);
    return value / Math.max(0.01, widthFactor * stretchFactor);
  }

  function nominalHeightFromRendered(value, settings = state, mode = null) {
    const currentMode = mode || (settings === state ? state.mode : 'text');
    const heightFactor = currentMode === 'text' ? fontCalibrationFor(settings).height : 1;
    return value / Math.max(0.01, heightFactor);
  }

  function syncSizeInputs(force = false) {
    widthInput.min = dimensionLimits.minWidth;
    widthInput.max = dimensionLimits.maxWidth;
    heightInput.min = dimensionLimits.minHeight;
    heightInput.max = dimensionLimits.maxHeight;
    if (force || document.activeElement !== widthInput) {
      widthInput.value = roundedDimension(renderedWidthCm());
    }
    if (force || document.activeElement !== heightInput) {
      heightInput.value = roundedDimension(calibratedHeightCmFor(state, state.mode));
    }
  }

  function parseDimensionInput(input) {
    const value = Number(String(input.value).replace(',', '.'));
    return Number.isFinite(value) ? value : null;
  }

  function roundedDimension(value) {
    return Math.round(value * 10) / 10;
  }

  function commitWidthInput(clampToLimits = false) {
    const rawValue = parseDimensionInput(widthInput);

    if (rawValue === null) {
      if (clampToLimits) {
        widthInput.value = roundedDimension(renderedWidthCm());
      }
      return;
    }

    if (!clampToLimits && (rawValue < dimensionLimits.minWidth || rawValue > dimensionLimits.maxWidth)) {
      return;
    }

    const previousWidth = renderedWidthCm() || 40;
    const previousHeight = calibratedHeightCmFor(state, state.mode) || 12;
    const requestedWidth = clampToLimits ? clampWidth(rawValue) : roundedDimension(rawValue);
    state.width = nominalWidthFromRendered(requestedWidth);

    if (state.keepRatio && previousWidth) {
      const requestedHeight = clampHeight((requestedWidth * previousHeight) / previousWidth);
      state.height = nominalHeightFromRendered(requestedHeight);
      heightInput.value = requestedHeight;
    }

    if (clampToLimits) {
      widthInput.value = requestedWidth;
    }

    render();
  }

  function commitHeightInput(clampToLimits = false) {
    const rawValue = parseDimensionInput(heightInput);

    if (rawValue === null) {
      if (clampToLimits) {
        heightInput.value = roundedDimension(calibratedHeightCmFor(state, state.mode));
      }
      return;
    }

    if (!clampToLimits && (rawValue < dimensionLimits.minHeight || rawValue > dimensionLimits.maxHeight)) {
      return;
    }

    const previousWidth = renderedWidthCm() || 40;
    const previousHeight = calibratedHeightCmFor(state, state.mode) || 12;
    const requestedHeight = clampToLimits ? clampHeight(rawValue) : roundedDimension(rawValue);
    if (state.mode === 'text') {
      const aspectForHeight = measuredAspectFor(state);
      if (aspectForHeight > 0) {
        const requestedWidth = clampWidth(requestedHeight / aspectForHeight);
        state.width = nominalWidthFromRendered(requestedWidth);
        widthInput.value = requestedWidth;
      }
    } else {
      state.height = nominalHeightFromRendered(requestedHeight);
    }

    if (clampToLimits) {
      heightInput.value = requestedHeight;
    }

    render();
  }

  function ensureSecondaryDimensionLabel() {
    if (!secondaryDimensionLabel && previewSurface) {
      secondaryDimensionLabel = document.createElement('div');
      secondaryDimensionLabel.id = 'sc-secondary-dimension-label';
      secondaryDimensionLabel.className = 'sc-dimension-label sc-dimension-label-secondary';
      secondaryDimensionLabel.innerHTML = '<span></span>';
      secondaryDimensionLabel.hidden = true;
      previewSurface.append(secondaryDimensionLabel);
    }

    return secondaryDimensionLabel;
  }

  function ensureTotalDimensionLabel() {
    if (!totalDimensionLabel && previewSurface) {
      totalDimensionLabel = document.createElement('div');
      totalDimensionLabel.id = 'sc-total-dimension-label';
      totalDimensionLabel.className = 'sc-dimension-label sc-dimension-label-total';
      totalDimensionLabel.innerHTML = '<span></span>';
      totalDimensionLabel.hidden = true;
      previewSurface.append(totalDimensionLabel);
    }

    return totalDimensionLabel;
  }

  function positionDimensionLabel(label, element, settings, labelPrefix, surfaceRect, mode = null) {
    if (!label || !element || element.hidden) {
      if (label) {
        label.hidden = true;
      }
      return null;
    }

    const rect = element.getBoundingClientRect();
    const top = Math.max(10, rect.top - surfaceRect.top);
    const bottom = Math.min(surfaceRect.height - 10, rect.bottom - surfaceRect.top);
    const left = Math.max(10, rect.left - surfaceRect.left);
    const right = Math.min(surfaceRect.width - 10, rect.right - surfaceRect.left);
    const currentMode = mode || (settings === state ? state.mode : 'text');
    const measuredWidthCm = renderedWidthCmFor(settings, currentMode);
    const measuredHeightCm = calibratedHeightCmFor(settings, currentMode);

    label.hidden = false;
    label.style.top = `${Math.max(8, top - 34)}px`;
    label.style.left = `${left}px`;
    label.style.width = `${Math.max(90, right - left)}px`;
    label.querySelector('span').textContent = `${labelPrefix} ${formatCentimeters(measuredWidthCm)} x ${formatCentimeters(measuredHeightCm)} cm`;

    return { top, bottom, left, right, measuredWidthCm };
  }

  function updateTotalDimensionLabel(surfaceRect, activeMetrics) {
    const label = ensureTotalDimensionLabel();
    if (!label) {
      return;
    }

    if (!isModeAvailable('text') || !isModeAvailable('logo') || preview.hidden || logoPreview.hidden) {
      label.hidden = true;
      if (totalSizeReminder) {
        totalSizeReminder.querySelector('strong').textContent = `${formatCentimeters(renderedWidthCm())} cm`;
      }
      return;
    }

    const textRect = preview.getBoundingClientRect();
    const logoRect = logoPreview.getBoundingClientRect();
    const left = Math.max(10, Math.min(textRect.left, logoRect.left) - surfaceRect.left);
    const right = Math.min(surfaceRect.width - 10, Math.max(textRect.right, logoRect.right) - surfaceRect.left);
    const bottom = Math.min(surfaceRect.height - 10, Math.max(textRect.bottom, logoRect.bottom) - surfaceRect.top);
    const pixelsPerCm = activeMetrics.measuredWidthCm / Math.max(1, activeMetrics.right - activeMetrics.left);
    const totalWidthCm = Math.max(1, (right - left) * pixelsPerCm);
    const totalText = `${formatCentimeters(totalWidthCm)} cm`;

    label.hidden = false;
    label.style.top = `${Math.min(surfaceRect.height - 28, bottom + 18)}px`;
    label.style.left = `${left}px`;
    label.style.width = `${Math.max(120, right - left)}px`;
    label.querySelector('span').textContent = `Longueur totale ${totalText}`;

    if (totalSizeReminder) {
      totalSizeReminder.querySelector('strong').textContent = totalText;
    }
  }

  function updateDimensionGuides() {
    const activePreview = state.mode === 'logo' ? logoPreview : preview;

    if (!previewSurface || !activePreview || activePreview.hidden) {
      return;
    }

    const surfaceRect = previewSurface.getBoundingClientRect();
    const labelPrefix = isModeAvailable('text') && isModeAvailable('logo') ? (state.mode === 'logo' ? 'Logo' : 'Texte') : '';
    const activeMetrics = positionDimensionLabel(dimensionLabel, activePreview, state, labelPrefix, surfaceRect, state.mode);

    if (!activeMetrics) {
      return;
    }

    const { top, bottom, left, right, measuredWidthCm } = activeMetrics;
    state.naturalWidthCm = measuredWidthCm / Math.max(0.01, state.stretchX / 100);

    previewSurface.style.setProperty('--sc-guide-top', `${top}px`);
    previewSurface.style.setProperty('--sc-guide-bottom', `${surfaceRect.height - bottom}px`);
    previewSurface.style.setProperty('--sc-guide-left', `${left}px`);
    previewSurface.style.setProperty('--sc-guide-right', `${surfaceRect.width - right}px`);
    previewSurface.style.setProperty('--sc-dimension-top', `${Math.max(8, top - 34)}px`);

    if (guideTop && guideBottom) {
      guideTop.hidden = false;
      guideBottom.hidden = false;
    }

    previewSize.textContent = `${formatCentimeters(measuredWidthCm)} x ${formatCentimeters(calibratedHeightCmFor(state, state.mode))} cm`;

    const secondaryLabel = ensureSecondaryDimensionLabel();
    if (isModeAvailable('text') && isModeAvailable('logo')) {
      const secondaryMode = state.mode === 'logo' ? 'text' : 'logo';
      const secondaryElement = secondaryMode === 'logo' ? logoPreview : preview;
      positionDimensionLabel(secondaryLabel, secondaryElement, modeSnapshot(secondaryMode), secondaryMode === 'logo' ? 'Logo' : 'Texte', surfaceRect, secondaryMode);
    } else if (secondaryLabel) {
      secondaryLabel.hidden = true;
    }

    updateTotalDimensionLabel(surfaceRect, activeMetrics);

    syncSizeInputs();
    price.textContent = formatPrice(calculatePrice());
    updateCheckoutSummary();
    updateHiddenConfig();
  }

  function scheduleDimensionUpdate() {
    window.requestAnimationFrame(updateDimensionGuides);
  }

  function setModePosition(mode, offsetX, offsetY) {
    const settings = mode === state.mode ? state : modeSettings[mode];
    if (!settings) {
      return;
    }

    const otherMode = mode === 'text' ? 'logo' : 'text';
    const otherSettings = modeSnapshot(otherMode);
    const shouldSnapY = isModeAvailable(mode)
      && isModeAvailable(otherMode)
      && Number.isFinite(otherSettings.offsetY)
      && Math.abs(offsetY - otherSettings.offsetY) <= 14;

    settings.offsetX = Math.round(offsetX);
    settings.offsetY = Math.round(shouldSnapY ? otherSettings.offsetY : offsetY);
    if (mode === state.mode) {
      state.offsetX = settings.offsetX;
      state.offsetY = settings.offsetY;
    } else {
      modeSettings[mode] = settings;
    }
  }

  function bindPreviewDrag(element, mode) {
    if (!element) {
      return;
    }

    let drag = null;

    const startDrag = (event, point) => {
      if (!isModeAvailable(mode) || element.hidden) {
        return;
      }

      if (state.mode !== mode) {
        switchMode(mode);
      }

      const settings = modeSnapshot(mode);
      drag = {
        startX: point.clientX,
        startY: point.clientY,
        offsetX: settings.offsetX || 0,
        offsetY: settings.offsetY || 0
      };
      if (event.pointerId !== undefined) {
        element.setPointerCapture?.(event.pointerId);
      }
      element.classList.add('is-dragging');
      event.preventDefault();
    };

    const moveDrag = (event, point) => {
      if (!drag) {
        return;
      }

      setModePosition(mode, drag.offsetX + point.clientX - drag.startX, drag.offsetY + point.clientY - drag.startY);
      render();
      event.preventDefault();
    };

    const stopDrag = () => {
      drag = null;
      element.classList.remove('is-dragging');
    };

    element.addEventListener('pointerdown', (event) => startDrag(event, event));
    window.addEventListener('pointermove', (event) => moveDrag(event, event));
    window.addEventListener('pointerup', stopDrag);
    window.addEventListener('pointercancel', stopDrag);

    element.addEventListener('mousedown', (event) => startDrag(event, event));
    window.addEventListener('mousemove', (event) => moveDrag(event, event));
    window.addEventListener('mouseup', stopDrag);

    element.addEventListener('touchstart', (event) => {
      const touch = event.touches[0];
      if (touch) {
        startDrag(event, touch);
      }
    }, { passive: false });
    window.addEventListener('touchmove', (event) => {
      const touch = event.touches[0];
      if (touch) {
        moveDrag(event, touch);
      }
    }, { passive: false });
    window.addEventListener('touchend', stopDrag);
    window.addEventListener('touchcancel', stopDrag);

    element.addEventListener('dblclick', () => {
      setModePosition(mode, 0, 0);
      render();
    });
  }

  function updateHiddenConfig() {
    saveCurrentModeSettings();
    const textSettings = modeSnapshot('text');
    const logoSettings = modeSnapshot('logo');
    hiddenConfig.value = JSON.stringify({
      mode: state.mode,
      modeConfigurations: {
        text: textSettings,
        logo: logoSettings
      },
      text: state.text,
      font: state.font,
      fontFamily: selectedFontFor(state).value,
      fontWidthFactor: fontCalibrationFor(state).width,
      fontHeightFactor: fontCalibrationFor(state).height,
      color: state.color,
      colorName: state.colorName,
      materialName: state.material,
      nominalWidth: state.width,
      nominalHeight: calibratedHeightCmFor(state, state.mode) / Math.max(0.01, parseFontCalibration((selectedFontFor(state) || {}).heightFactor)),
      width: renderedWidthCm(),
      height: calibratedHeightCmFor(state, state.mode),
      quantity: state.quantity,
      stencil: state.stencil,
      mirror: state.mirror,
      inside: state.inside,
      stretchX: state.stretchX,
      rotation: state.rotation,
      offsetX: state.offsetX,
      offsetY: state.offsetY,
      logoName: state.logoName,
      logoSvg: state.logoSvg,
      transform: getTransform(),
      combined: {
        textEnabled: isModeAvailable('text'),
        logoEnabled: isModeAvailable('logo'),
        text: textSettings,
        logo: logoSettings
      },
      price: calculatePrice()
    });
  }

  function renderFonts() {
    fontGrid.innerHTML = '';
    config.fonts
      .filter((font) => state.fontCategory === 'all' || font.category === state.fontCategory)
      .forEach((font) => {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = `sc-font-card${font.name === state.font ? ' active' : ''}`;
        button.innerHTML = `<strong style="font-family:${font.value}">ABC</strong><span>${font.name}</span>`;
        button.addEventListener('click', () => {
          state.font = font.name;
          if (fontPickerButton) {
            fontPickerButton.textContent = `Police : ${font.name}`;
          }
          render();
          renderFonts();
        });
        fontGrid.append(button);
      });
  }

  function updateTextEditorButton() {
    if (!textEditorButton) {
      return;
    }

    const label = state.text.trim() || 'Votre texte';
    textEditorButton.textContent = `Texte : ${label}`;
  }

  function closeOpenConfiguratorDialogs(exceptDialog) {
    document.querySelectorAll('#sc-font-picker-dialog, #sc-text-editor-dialog').forEach((dialogElement) => {
      if (dialogElement !== exceptDialog && dialogElement.open) {
        dialogElement.close();
      }
    });
  }

  function openConfiguratorDialog(dialogElement) {
    closeOpenConfiguratorDialogs(dialogElement);
    if (!dialogElement.open) {
      dialogElement.showModal();
    }
  }

  function setupMobileFontPicker() {
    if (!window.matchMedia('(max-width: 680px)').matches || root.dataset.scFontPickerReady === '1') {
      return;
    }

    const fontStep = fontGrid.closest('.sc-step');
    const fontTabs = root.querySelector('.sc-font-tabs');
    const stepTitle = fontStep ? fontStep.querySelector('.sc-step-title') : null;

    if (!fontStep || !fontTabs || !stepTitle) {
      return;
    }

    root.dataset.scFontPickerReady = '1';
    fontPickerButton = document.createElement('button');
    fontPickerButton.type = 'button';
    fontPickerButton.className = 'sc-font-picker-button';
    fontPickerButton.textContent = `Police : ${state.font}`;
    stepTitle.insertAdjacentElement('afterend', fontPickerButton);

    const picker = document.createElement('dialog');
    picker.id = 'sc-font-picker-dialog';
    picker.className = 'sc-font-picker-dialog';
    picker.innerHTML = '<form method="dialog"><button class="sc-font-picker-close" aria-label="Fermer">x</button></form><h2>Choisir une police</h2><div class="sc-font-picker-preview" id="sc-font-picker-preview">Votre texte</div><div class="sc-font-picker-content"></div><button type="button" class="sc-font-picker-validate">Valider</button>';
    document.body.append(picker);

    const content = picker.querySelector('.sc-font-picker-content');
    content.append(fontTabs);
    content.append(fontGrid);

    fontPickerButton.addEventListener('click', () => openConfiguratorDialog(picker));
    picker.querySelector('.sc-font-picker-validate').addEventListener('click', () => picker.close());
  }

  function setupTextEditor() {
    if (root.dataset.scTextEditorReady === '1') {
      return;
    }

    const textStep = textInput.closest('.sc-step');
    const stepTitle = textStep ? textStep.querySelector('.sc-step-title') : null;

    if (!textStep || !stepTitle) {
      return;
    }

    root.dataset.scTextEditorReady = '1';
    textEditorButton = document.createElement('button');
    textEditorButton.type = 'button';
    textEditorButton.className = 'sc-text-editor-button';
    updateTextEditorButton();
    stepTitle.insertAdjacentElement('afterend', textEditorButton);

    const editor = document.createElement('dialog');
    editor.id = 'sc-text-editor-dialog';
    editor.className = 'sc-text-editor-dialog';
    editor.innerHTML = '<form method="dialog"><button class="sc-text-editor-close" aria-label="Fermer">x</button></form><h2>Modifier le texte</h2><div class="sc-text-editor-preview" id="sc-text-editor-preview">Votre texte</div><textarea class="sc-text-editor-input" rows="4" maxlength="80" placeholder="Votre texte"></textarea><button type="button" class="sc-text-editor-validate">Valider</button>';
    document.body.append(editor);

    const editorInput = editor.querySelector('.sc-text-editor-input');
    const editorPreview = editor.querySelector('#sc-text-editor-preview');

    function syncFromEditor() {
      state.text = editorInput.value;
      textInput.value = state.text;
      editorPreview.textContent = state.text.trim() || 'Votre texte';
      updateTextEditorButton();
      render();
    }

    function focusEditorInput() {
      editorInput.focus({ preventScroll: true });
      editorInput.setSelectionRange(editorInput.value.length, editorInput.value.length);
    }

    textEditorButton.addEventListener('click', () => {
      editorInput.value = state.text;
      editorPreview.textContent = state.text.trim() || 'Votre texte';
      openConfiguratorDialog(editor);
      focusEditorInput();
      window.setTimeout(focusEditorInput, 80);
    });

    editorInput.addEventListener('input', syncFromEditor);
    editorInput.addEventListener('keyup', syncFromEditor);
    editorInput.addEventListener('change', syncFromEditor);
    editorInput.addEventListener('compositionend', syncFromEditor);
    editorInput.addEventListener('paste', () => window.setTimeout(syncFromEditor, 0));
    editor.querySelector('.sc-text-editor-validate').addEventListener('click', () => editor.close());
  }

  function setupMobileEditingBehavior() {
    document.body.classList.remove('sc-config-editing');
  }

  function renderLogos() {
    logoGrid.innerHTML = '';
    if (!config.logos.length) {
      logoGrid.innerHTML = '<p class="sc-cart-preview-empty">Aucun logo SVG configuré.</p>';
      return;
    }

    config.logos.forEach((logo) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = `sc-logo-card${logo.name === state.logoName ? ' active' : ''}`;
      button.innerHTML = `${logo.svg}<span>${logo.name}</span>`;
      button.addEventListener('click', () => {
        state.logoName = logo.name;
        state.logoSvg = logo.svg;
        render();
        renderLogos();
      });
      logoGrid.append(button);
    });
  }

  function renderColors() {
    colorGrid.innerHTML = '';
    config.colors.forEach((color) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = `sc-swatch${color.value === state.color ? ' active' : ''}`;
      button.style.setProperty('--swatch', color.value);
      const colorExtra = Math.max(0, Number(color.price) || 0);
      const colorLabel = colorExtra > 0 ? `${color.name} (+${formatPrice(colorExtra)})` : color.name;
      button.title = colorLabel;
      button.setAttribute('aria-label', colorLabel);
      button.addEventListener('click', () => {
        state.color = color.value;
        state.colorName = color.name;
        render();
        renderColors();
      });
      colorGrid.append(button);
    });
  }

  function renderMaterials() {
    materialSelect.innerHTML = '';
    if (materialGrid) {
      materialGrid.innerHTML = '';
    }

    config.materials.forEach((material) => {
      const option = document.createElement('option');
      option.value = material.name;
      option.textContent = material.name;
      option.dataset.multiplier = material.value;
      materialSelect.append(option);

      if (materialGrid) {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = `sc-material-card${material.name === state.material ? ' active' : ''}`;
        const materialExtra = Math.max(0, Number(material.price) || 0);
        const extraLabel = materialExtra > 0 ? ` + ${formatPrice(materialExtra)}` : '';
        button.innerHTML = `<strong>${material.name}</strong>${extraLabel ? `<span>${extraLabel.trim()}</span>` : ''}`;
        button.addEventListener('click', () => setMaterial(material.name, material.value));
        materialGrid.append(button);
      }
    });

    materialSelect.value = state.material;
  }

  function renderMode() {
    applyFeatureVisibility();
    const isLogo = state.mode === 'logo';
    const showTextPreview = isModeAvailable('text');
    const showLogoPreview = isModeAvailable('logo');
    root.querySelectorAll('.sc-text-panel').forEach((panel) => {
      panel.hidden = isLogo;
    });
    root.querySelector('.sc-logo-panel').hidden = !isLogo;
    preview.hidden = !showTextPreview;
    logoPreview.hidden = !showLogoPreview;
    root.querySelector('.sc-sticker-shadow')?.classList.toggle('sc-combined-preview', showTextPreview && showLogoPreview);
    root.querySelectorAll('.sc-mode-tabs button').forEach((button) => {
      button.classList.toggle('active', button.dataset.mode === state.mode);
    });
  }

  function applyFeatureVisibility() {
    const allowTextMode = config.options.enableTextMode !== false;
    const allowLogoMode = !!config.options.enableLogoMode;
    const availableModes = [allowTextMode ? 'text' : null, allowLogoMode ? 'logo' : null].filter(Boolean);
    const allowStickerType = !!config.options.enableStickerType && availableModes.length > 1;
    const allowMultiline = !!config.options.enableMultiline;
    const allowedSpecials = {
      stencil: config.options.enableStencil !== false,
      mirror: config.options.enableMirror !== false,
      inside: config.options.enableInside !== false
    };
    const modeStep = root.querySelector('.sc-mode-tabs')?.closest('.sc-step');
    const multilineOption = root.querySelector('#sc-multiline')?.closest('.sc-check-row');
    const forcedMode = availableModes.includes(state.mode) ? state.mode : (availableModes[0] || 'text');

    if (modeStep) {
      modeStep.hidden = !allowStickerType;
    }

    if (!allowStickerType) {
      if (state.mode !== forcedMode) {
        saveCurrentModeSettings();
        applyModeSettings(forcedMode);
      } else {
        state.mode = forcedMode;
      }
      root.querySelectorAll('.sc-mode-tabs button').forEach((button) => {
        button.classList.toggle('active', button.dataset.mode === state.mode);
      });
    }

    root.querySelectorAll('.sc-mode-tabs button').forEach((button) => {
      button.hidden = !availableModes.includes(button.dataset.mode);
    });

    if (multilineOption) {
      multilineOption.hidden = !allowMultiline || state.mode !== 'text';
    }

    if (!allowMultiline) {
      state.multiline = false;
      const multilineInput = root.querySelector('#sc-multiline');
      if (multilineInput) {
        multilineInput.checked = false;
      }
      textInput.rows = 2;
      if (textInput.value.includes('\n')) {
        textInput.value = textInput.value.replace(/\s*\n\s*/g, ' ');
        state.text = textInput.value;
        updateTextEditorButton();
      }
    }

    [
      ['#sc-stencil', 'stencil'],
      ['#sc-mirror', 'mirror'],
      ['#sc-inside', 'inside']
    ].forEach(([selector, key]) => {
      const input = root.querySelector(selector);
      const row = input ? input.closest('.sc-check-row') : null;
      const enabled = allowedSpecials[key] !== false;
      if (row) {
        row.hidden = !enabled;
      }
      if (!enabled) {
        state[key] = false;
        if (input) {
          input.checked = false;
        }
      }
    });
  }

  function render() {
    const textSettings = modeSnapshot('text');
    const logoSettings = modeSnapshot('logo');
    const font = selectedFontFor(textSettings);
    const activeFont = selectedFontFor(state);
    const displayText = (textSettings.text || '').trim() || 'Votre texte';
    const maxFontSize = window.matchMedia('(max-width: 680px)').matches ? 40 : 96;
    const fontSize = Math.max(34, Math.min(maxFontSize, textSettings.height * (textSettings.multiline ? 4.1 : 5.3) * textSettings.zoom));
    const logoSize = Math.max(34, Math.min(maxFontSize, logoSettings.height * 5.55 * logoSettings.zoom));
    preview.textContent = displayText;
    const pickerPreview = document.querySelector('#sc-font-picker-preview');
    if (pickerPreview) {
      pickerPreview.textContent = (state.text || '').trim() || 'Votre texte';
      pickerPreview.style.fontFamily = activeFont.value;
      pickerPreview.style.color = state.color;
      applyPreviewContrast(pickerPreview, state.color);
    }
    const textEditorPreview = document.querySelector('#sc-text-editor-preview');
    if (textEditorPreview) {
      textEditorPreview.textContent = (state.text || '').trim() || 'Votre texte';
      textEditorPreview.style.fontFamily = activeFont.value;
      textEditorPreview.style.color = state.color;
      applyPreviewContrast(textEditorPreview, state.color);
    }
    preview.style.fontFamily = font.value;
    preview.style.color = textSettings.color;
    preview.style.fontSize = `${fontSize}px`;
    preview.style.setProperty('--sc-preview-font-size', `${fontSize}px`);
    preview.style.transform = getTransformFor(textSettings);
    preview.classList.toggle('sc-stencil', !!textSettings.stencil);
    preview.classList.toggle('sc-multiline', !!textSettings.multiline);

    logoPreview.innerHTML = logoSettings.logoSvg || '';
    logoPreview.style.color = logoSettings.color || state.color;
    logoPreview.style.transform = getTransformFor(logoSettings);
    logoPreview.style.width = `${logoSize}px`;
    logoPreview.style.height = `${logoSize}px`;
    previewSurface.classList.toggle(
      'sc-dark-contrast',
      (isModeAvailable('text') && needsDarkContrast(textSettings.color))
        || (isModeAvailable('logo') && needsDarkContrast(logoSettings.color || state.color))
    );
    preview.classList.toggle('is-selected-live-item', state.mode === 'text');
    logoPreview.classList.toggle('is-selected-live-item', state.mode === 'logo');

    if (isModeAvailable('text') && isModeAvailable('logo')) {
      previewSize.textContent = `Texte ${formatCentimeters(renderedWidthCmFor(textSettings, 'text'))} x ${formatCentimeters(calibratedHeightCmFor(textSettings, 'text'))} cm | Logo ${formatCentimeters(renderedWidthCmFor(logoSettings, 'logo'))} x ${formatCentimeters(calibratedHeightCmFor(logoSettings, 'logo'))} cm`;
      previewFinish.textContent = `Texte ${textSettings.material} - ${textSettings.colorName} | Logo ${logoSettings.material} - ${logoSettings.colorName}`;
    } else {
      previewSize.textContent = `${formatCentimeters(renderedWidthCm())} x ${formatCentimeters(calibratedHeightCmFor(state, state.mode))} cm`;
      previewFinish.textContent = `${state.material} - ${state.colorName}`;
    }
    realSizeLabel.textContent = `Hauteur réelle : ${formatCentimeters(calibratedHeightCmFor(state, state.mode))} cm`;
    syncSizeInputs();
    price.textContent = formatPrice(calculatePrice());
    updateCheckoutSummary();
    updateHiddenConfig();
    scheduleDimensionUpdate();
  }

  root.querySelectorAll('.sc-mode-tabs button').forEach((button) => {
    button.addEventListener('click', () => {
      if (button.hidden) {
        return;
      }

      switchMode(button.dataset.mode);
    });
  });

  root.querySelectorAll('.sc-specials button').forEach((button) => {
    button.addEventListener('click', () => {
      const start = textInput.selectionStart;
      const end = textInput.selectionEnd;
      const char = button.textContent;
      textInput.value = `${textInput.value.slice(0, start)}${char}${textInput.value.slice(end)}`;
      textInput.focus();
      textInput.selectionStart = textInput.selectionEnd = start + char.length;
      state.text = textInput.value;
      updateTextEditorButton();
      render();
    });
  });

  root.querySelectorAll('.sc-font-tabs button').forEach((button) => {
    button.addEventListener('click', () => {
      root.querySelectorAll('.sc-font-tabs button').forEach((tab) => tab.classList.remove('active'));
      button.classList.add('active');
      state.fontCategory = button.dataset.filter;
      renderFonts();
    });
  });

  root.querySelectorAll('[data-qty]').forEach((button) => {
    button.addEventListener('click', () => {
      root.querySelectorAll('[data-qty]').forEach((qty) => qty.classList.remove('active'));
      button.classList.add('active');
      state.quantity = Number(button.dataset.qty);
      quantityInput.value = state.quantity;
      render();
    });
  });

  function syncTextInput() {
    state.text = textInput.value;
    updateTextEditorButton();
    render();
  }

  root.addEventListener('input', (event) => {
    if (event.target && event.target.id === 'sc-text-input') {
      syncTextInput();
    }
  }, true);
  root.addEventListener('beforeinput', (event) => {
    if (event.target && event.target.id === 'sc-text-input') {
      window.setTimeout(syncTextInput, 0);
    }
  }, true);
  textInput.addEventListener('input', syncTextInput);
  textInput.addEventListener('keyup', syncTextInput);
  textInput.addEventListener('change', syncTextInput);
  textInput.addEventListener('blur', syncTextInput);
  textInput.addEventListener('compositionend', syncTextInput);
  textInput.addEventListener('paste', () => window.setTimeout(syncTextInput, 0));
  bindPreviewDrag(preview, 'text');
  bindPreviewDrag(logoPreview, 'logo');

  materialSelect.addEventListener('change', (event) => {
    const selected = event.target.selectedOptions[0];
    if (selected) {
      setMaterial(selected.value, selected.dataset.multiplier);
    }
  });

  widthInput.addEventListener('input', () => commitWidthInput(false));
  widthInput.addEventListener('change', () => commitWidthInput(true));
  widthInput.addEventListener('blur', () => commitWidthInput(true));

  heightInput.addEventListener('input', () => commitHeightInput(false));
  heightInput.addEventListener('change', () => commitHeightInput(true));
  heightInput.addEventListener('blur', () => commitHeightInput(true));

  quantityInput.addEventListener('input', () => {
    state.quantity = Math.max(1, Number(quantityInput.value) || 1);
    root.querySelectorAll('[data-qty]').forEach((qty) => {
      qty.classList.toggle('active', Number(qty.dataset.qty) === state.quantity);
    });
    render();
  });

  function stepQuantity(delta) {
    state.quantity = Math.min(999, Math.max(1, (Number(state.quantity) || 1) + delta));
    quantityInput.value = state.quantity;
    root.querySelectorAll('[data-qty]').forEach((qty) => {
      qty.classList.toggle('active', Number(qty.dataset.qty) === state.quantity);
    });
    render();
  }

  if (quantityMinus) {
    quantityMinus.addEventListener('click', () => stepQuantity(-1));
  }
  if (quantityPlus) {
    quantityPlus.addEventListener('click', () => stepQuantity(1));
  }

  if (stretchInput) {
    stretchInput.addEventListener('input', () => {
      state.stretchX = Number(stretchInput.value) || 100;
      render();
    });
  }

  if (rotationInput) {
    rotationInput.addEventListener('input', () => {
      state.rotation = Number(rotationInput.value) || 0;
      render();
    });
  }

  const resetRatioButton = root.querySelector('#sc-reset-ratio');
  if (resetRatioButton) {
    resetRatioButton.addEventListener('click', () => {
      state.width = clampWidth(state.baseWidth);
      state.height = clampHeight(state.baseHeight);
      state.stretchX = 100;
      state.rotation = 0;
      state.offsetX = 0;
      state.offsetY = 0;
      widthInput.value = state.width;
      heightInput.value = state.height;
      if (stretchInput) {
        stretchInput.value = state.stretchX;
      }
      if (rotationInput) {
        rotationInput.value = state.rotation;
      }
      render();
    });
  }

  [
    ['#sc-keep-ratio', 'keepRatio'],
    ['#sc-multiline', 'multiline'],
    ['#sc-stencil', 'stencil'],
    ['#sc-mirror', 'mirror'],
    ['#sc-inside', 'inside']
  ].forEach(([selector, key]) => {
    const optionInput = root.querySelector(selector);
    if (!optionInput) {
      return;
    }

    optionInput.addEventListener('change', (event) => {
      state[key] = event.target.checked;
      if (key === 'multiline') {
        textInput.rows = state.multiline ? 4 : 2;
        if (state.multiline && !textInput.value.includes('\n')) {
          textInput.value = textInput.value.replace(' ', '\n');
          state.text = textInput.value;
        }
      }
      render();
    });
  });

  root.querySelector('#sc-zoom-in').addEventListener('click', () => {
    state.zoom = Math.min(1.4, state.zoom + 0.1);
    render();
  });

  root.querySelector('#sc-zoom-out').addEventListener('click', () => {
    state.zoom = Math.max(0.7, state.zoom - 0.1);
    render();
  });

  root.querySelector('#sc-config-form').addEventListener('submit', async (event) => {
    event.preventDefault();
    updateHiddenConfig();
    window.localStorage.setItem('stickerConfiguratorLastConfig', hiddenConfig.value);
    const submitButton = event.submitter;
    if (submitButton) {
      submitButton.disabled = true;
    }

    let added = false;
    let errorMessage = '';
    try {
      const savedConfiguration = await saveConfiguration();
      added = savedConfiguration.added === true;
      if (added && window.prestashop && prestashop.emit) {
        prestashop.emit('updateCart', {
          reason: {
            idProduct: getProductId(),
            idCustomization: savedConfiguration.id_customization,
            linkAction: 'add-to-cart'
          },
          resp: savedConfiguration
        });
      }
    } catch (error) {
      errorMessage = error instanceof Error ? error.message : 'Une erreur est survenue.';
    } finally {
      if (submitButton) {
        submitButton.disabled = false;
      }
    }

    summary.textContent = `${state.quantity} sticker(s), ${formatCentimeters(renderedWidthCm())} x ${formatCentimeters(calibratedHeightCmFor(state, state.mode))} cm, ${state.mode === 'logo' ? state.logoName : `texte ${state.font}`}, ${state.colorName.toLowerCase()}, ${state.material}. Total estimé : ${formatPrice(calculatePrice())}.${added ? ' Produit ajouté au panier avec sa personnalisation.' : ` Ajout impossible. ${errorMessage}`}`;
    dialog.showModal();
  });

  stabilizeProductLayout();
  window.addEventListener('load', stabilizeProductLayout);
  window.addEventListener('load', moveDeliveryBlockToCheckout);
  [250, 800, 1600, 3000].forEach((delay) => {
    window.setTimeout(stabilizeProductLayout, delay);
    window.setTimeout(moveDeliveryBlockToCheckout, delay);
  });

  if (window.MutationObserver) {
    const observer = new MutationObserver(() => {
      window.clearTimeout(observer.scTimer);
      observer.scTimer = window.setTimeout(stabilizeProductLayout, 80);
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  renderFonts();
  setupMobileFontPicker();
  setupTextEditor();
  setupMobileEditingBehavior();
  renderLogos();
  renderColors();
  renderMaterials();
  renderMode();
  render();
  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(function () {
      _fontHeightRef = null;
      Object.keys(_fontHeightCache).forEach(function (key) {
        delete _fontHeightCache[key];
      });
      render();
    });
  }
})();
<!doctype html>
<html lang="fr">
  <head>
    
      
  <meta charset="utf-8">


  <meta http-equiv="x-ua-compatible" content="ie=edge">



  <title>Erreur 404</title>
  
    
  
  <meta name="description" content="Impossible de trouver la page">
  <meta name="keywords" content="">
      
      
  
  
    <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name" : "PrestaShop",
    "url" : "https://creativcolor.fr/"
         ,"logo": {
        "@type": "ImageObject",
        "url":"https://creativcolor.fr/img/logo-1780473434.jpg"
      }
      }
</script>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "isPartOf": {
      "@type": "WebSite",
      "url":  "https://creativcolor.fr/",
      "name": "PrestaShop"
    },
    "name": "Erreur 404",
    "url":  "https://creativcolor.fr/sitemap.xml"
  }
</script>


  
  
  
  
  
    
  

  
    <meta property="og:title" content="Erreur 404" />
    <meta property="og:description" content="Impossible de trouver la page" />
    <meta property="og:url" content="https://creativcolor.fr/sitemap.xml" />
    <meta property="og:site_name" content="PrestaShop" />
    <meta property="og:type" content="website" />    



  <meta name="viewport" content="width=device-width, initial-scale=1">



  <link rel="icon" type="image/vnd.microsoft.icon" href="https://creativcolor.fr/img/favicon.ico?1780473469">
  <link rel="shortcut icon" type="image/x-icon" href="https://creativcolor.fr/img/favicon.ico?1780473469">



    <link rel="stylesheet" href="https://creativcolor.fr/themes/classic/assets/css/theme.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://creativcolor.fr/modules/blockreassurance/views/dist/front.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://creativcolor.fr/modules/ps_socialfollow/views/css/ps_socialfollow.css" type="text/css" media="all">
  <link rel="stylesheet" href="https://creativcolor.fr/themes/creativcolor/assets/css/custom.css" type="text/css" media="all">




  

  <script type="text/javascript">
        var prestashop = {"cart":{"products":[],"totals":{"total":{"type":"total","label":"Total","amount":0,"value":"0,00\u00a0\u20ac"},"total_including_tax":{"type":"total","label":"Total TTC","amount":0,"value":"0,00\u00a0\u20ac"},"total_excluding_tax":{"type":"total","label":"Total HT :","amount":0,"value":"0,00\u00a0\u20ac"}},"subtotals":{"products":{"type":"products","label":"Sous-total","amount":0,"value":"0,00\u00a0\u20ac"},"discounts":null,"shipping":{"type":"shipping","label":"Livraison","amount":0,"value":""},"tax":null},"products_count":0,"summary_string":"0 articles","vouchers":{"allowed":0,"added":[]},"discounts":[],"minimalPurchase":0,"minimalPurchaseRequired":""},"currency":{"id":1,"name":"Euro","iso_code":"EUR","iso_code_num":"978","sign":"\u20ac"},"customer":{"lastname":null,"firstname":null,"email":null,"birthday":null,"newsletter":null,"newsletter_date_add":null,"optin":null,"website":null,"company":null,"siret":null,"ape":null,"is_logged":false,"gender":{"type":null,"name":null},"addresses":[]},"country":{"id_zone":"1","id_currency":"0","call_prefix":"33","iso_code":"FR","active":"1","contains_states":"0","need_identification_number":"0","need_zip_code":"1","zip_code_format":"NNNNN","display_tax_label":"1","name":"France","id":8},"language":{"name":"Fran\u00e7ais (French)","iso_code":"fr","locale":"fr-FR","language_code":"fr","active":"1","is_rtl":"0","date_format_lite":"d\/m\/Y","date_format_full":"d\/m\/Y H:i:s","id":1},"page":{"title":"La page que vous cherchez n'a pas \u00e9t\u00e9 trouv\u00e9e.","canonical":null,"meta":{"title":"Erreur 404","description":"Impossible de trouver la page","keywords":"","robots":"index"},"page_name":"pagenotfound","body_classes":{"lang-fr":true,"lang-rtl":false,"country-FR":true,"currency-EUR":true,"layout-both-columns":true,"page-pagenotfound":true,"tax-display-enabled":true,"page-customer-account":false},"admin_notifications":[],"password-policy":{"feedbacks":{"0":"Tr\u00e8s faible","1":"Faible","2":"Moyenne","3":"Fort","4":"Tr\u00e8s fort","Straight rows of keys are easy to guess":"Les suites de touches sur le clavier sont faciles \u00e0 deviner","Short keyboard patterns are easy to guess":"Les mod\u00e8les courts sur le clavier sont faciles \u00e0 deviner.","Use a longer keyboard pattern with more turns":"Utilisez une combinaison de touches plus longue et plus complexe.","Repeats like \"aaa\" are easy to guess":"Les r\u00e9p\u00e9titions (ex. : \"aaa\") sont faciles \u00e0 deviner.","Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\"":"Les r\u00e9p\u00e9titions (ex. : \"abcabcabc\") sont seulement un peu plus difficiles \u00e0 deviner que \"abc\".","Sequences like abc or 6543 are easy to guess":"Les s\u00e9quences (ex. : abc ou 6543) sont faciles \u00e0 deviner.","Recent years are easy to guess":"Les ann\u00e9es r\u00e9centes sont faciles \u00e0 deviner.","Dates are often easy to guess":"Les dates sont souvent faciles \u00e0 deviner.","This is a top-10 common password":"Ce mot de passe figure parmi les 10 mots de passe les plus courants.","This is a top-100 common password":"Ce mot de passe figure parmi les 100 mots de passe les plus courants.","This is a very common password":"Ceci est un mot de passe tr\u00e8s courant.","This is similar to a commonly used password":"Ce mot de passe est similaire \u00e0 un mot de passe couramment utilis\u00e9.","A word by itself is easy to guess":"Un mot seul est facile \u00e0 deviner.","Names and surnames by themselves are easy to guess":"Les noms et les surnoms seuls sont faciles \u00e0 deviner.","Common names and surnames are easy to guess":"Les noms et les pr\u00e9noms courants sont faciles \u00e0 deviner.","Use a few words, avoid common phrases":"Utilisez quelques mots, \u00e9vitez les phrases courantes.","No need for symbols, digits, or uppercase letters":"Pas besoin de symboles, de chiffres ou de majuscules.","Avoid repeated words and characters":"\u00c9viter de r\u00e9p\u00e9ter les mots et les caract\u00e8res.","Avoid sequences":"\u00c9viter les s\u00e9quences.","Avoid recent years":"\u00c9vitez les ann\u00e9es r\u00e9centes.","Avoid years that are associated with you":"\u00c9vitez les ann\u00e9es qui vous sont associ\u00e9es.","Avoid dates and years that are associated with you":"\u00c9vitez les dates et les ann\u00e9es qui vous sont associ\u00e9es.","Capitalization doesn't help very much":"Les majuscules ne sont pas tr\u00e8s utiles.","All-uppercase is almost as easy to guess as all-lowercase":"Un mot de passe tout en majuscules est presque aussi facile \u00e0 deviner qu'un mot de passe tout en minuscules.","Reversed words aren't much harder to guess":"Les mots invers\u00e9s ne sont pas beaucoup plus difficiles \u00e0 deviner.","Predictable substitutions like '@' instead of 'a' don't help very much":"Les substitutions pr\u00e9visibles comme '\"@\" au lieu de \"a\" n'aident pas beaucoup.","Add another word or two. Uncommon words are better.":"Ajoutez un autre mot ou deux. Pr\u00e9f\u00e9rez les mots peu courants."}}},"shop":{"name":"PrestaShop","logo":"https:\/\/creativcolor.fr\/img\/logo-1780473434.jpg","stores_icon":"https:\/\/creativcolor.fr\/img\/logo_stores.png","favicon":"https:\/\/creativcolor.fr\/img\/favicon.ico"},"core_js_public_path":"\/themes\/","urls":{"base_url":"https:\/\/creativcolor.fr\/","current_url":"https:\/\/creativcolor.fr\/sitemap.xml","shop_domain_url":"https:\/\/creativcolor.fr","img_ps_url":"https:\/\/creativcolor.fr\/img\/","img_cat_url":"https:\/\/creativcolor.fr\/img\/c\/","img_lang_url":"https:\/\/creativcolor.fr\/img\/l\/","img_prod_url":"https:\/\/creativcolor.fr\/img\/p\/","img_manu_url":"https:\/\/creativcolor.fr\/img\/m\/","img_sup_url":"https:\/\/creativcolor.fr\/img\/su\/","img_ship_url":"https:\/\/creativcolor.fr\/img\/s\/","img_store_url":"https:\/\/creativcolor.fr\/img\/st\/","img_col_url":"https:\/\/creativcolor.fr\/img\/co\/","img_url":"https:\/\/creativcolor.fr\/themes\/classic\/assets\/img\/","css_url":"https:\/\/creativcolor.fr\/themes\/classic\/assets\/css\/","js_url":"https:\/\/creativcolor.fr\/themes\/classic\/assets\/js\/","pic_url":"https:\/\/creativcolor.fr\/upload\/","theme_assets":"https:\/\/creativcolor.fr\/themes\/classic\/assets\/","theme_dir":"https:\/\/creativcolor.fr\/themes\/creativcolor\/","child_theme_assets":"https:\/\/creativcolor.fr\/themes\/creativcolor\/assets\/","child_img_url":"https:\/\/creativcolor.fr\/themes\/creativcolor\/assets\/img\/","child_css_url":"https:\/\/creativcolor.fr\/themes\/creativcolor\/assets\/css\/","child_js_url":"https:\/\/creativcolor.fr\/themes\/creativcolor\/assets\/js\/","pages":{"address":"https:\/\/creativcolor.fr\/adresse","addresses":"https:\/\/creativcolor.fr\/adresses","authentication":"https:\/\/creativcolor.fr\/connexion","manufacturer":"https:\/\/creativcolor.fr\/marques","cart":"https:\/\/creativcolor.fr\/panier","category":"https:\/\/creativcolor.fr\/index.php?controller=category","cms":"https:\/\/creativcolor.fr\/index.php?controller=cms","contact":"https:\/\/creativcolor.fr\/nous-contacter","discount":"https:\/\/creativcolor.fr\/reduction","guest_tracking":"https:\/\/creativcolor.fr\/suivi-commande-invite","history":"https:\/\/creativcolor.fr\/historique-commandes","identity":"https:\/\/creativcolor.fr\/identite","index":"https:\/\/creativcolor.fr\/","my_account":"https:\/\/creativcolor.fr\/mon-compte","order_confirmation":"https:\/\/creativcolor.fr\/confirmation-commande","order_detail":"https:\/\/creativcolor.fr\/index.php?controller=order-detail","order_follow":"https:\/\/creativcolor.fr\/suivi-commande","order":"https:\/\/creativcolor.fr\/commande","order_return":"https:\/\/creativcolor.fr\/index.php?controller=order-return","order_slip":"https:\/\/creativcolor.fr\/avoirs","pagenotfound":"https:\/\/creativcolor.fr\/page-introuvable","password":"https:\/\/creativcolor.fr\/recuperation-mot-de-passe","pdf_invoice":"https:\/\/creativcolor.fr\/index.php?controller=pdf-invoice","pdf_order_return":"https:\/\/creativcolor.fr\/index.php?controller=pdf-order-return","pdf_order_slip":"https:\/\/creativcolor.fr\/index.php?controller=pdf-order-slip","prices_drop":"https:\/\/creativcolor.fr\/promotions","product":"https:\/\/creativcolor.fr\/index.php?controller=product","registration":"https:\/\/creativcolor.fr\/inscription","search":"https:\/\/creativcolor.fr\/recherche","sitemap":"https:\/\/creativcolor.fr\/plan-site","stores":"https:\/\/creativcolor.fr\/magasins","supplier":"https:\/\/creativcolor.fr\/fournisseurs","new_products":"https:\/\/creativcolor.fr\/nouveaux-produits","brands":"https:\/\/creativcolor.fr\/marques","register":"https:\/\/creativcolor.fr\/inscription","order_login":"https:\/\/creativcolor.fr\/commande?login=1"},"alternative_langs":[],"actions":{"logout":"https:\/\/creativcolor.fr\/?mylogout="},"no_picture_image":{"bySize":{"small_default":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-small_default.jpg","width":98,"height":98},"cart_default":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-cart_default.jpg","width":125,"height":125},"home_default":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-home_default.jpg","width":250,"height":250},"medium_default":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-medium_default.jpg","width":452,"height":452},"large_default":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-large_default.jpg","width":800,"height":800}},"small":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-small_default.jpg","width":98,"height":98},"medium":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-home_default.jpg","width":250,"height":250},"large":{"url":"https:\/\/creativcolor.fr\/img\/p\/fr-default-large_default.jpg","width":800,"height":800},"legend":""}},"configuration":{"display_taxes_label":true,"display_prices_tax_incl":true,"is_catalog":false,"show_prices":true,"opt_in":{"partner":true},"quantity_discount":{"type":"discount","label":"Remise sur prix unitaire"},"voucher_enabled":0,"return_enabled":0},"field_required":[],"breadcrumb":{"links":[{"title":"Accueil","url":"https:\/\/creativcolor.fr\/"}],"count":1},"link":{"protocol_link":"https:\/\/","protocol_content":"https:\/\/"},"time":1782895366,"static_token":"fa923034e2ec2c55aa4e9bc0976aa0ad","token":"491312f879b16134444672481606478e","debug":false};
        var psemailsubscription_subscription = "https:\/\/creativcolor.fr\/module\/ps_emailsubscription\/subscription";
        var psr_icon_color = "#F19D76";
      </script>



  <script type="text/javascript">
    var ed_refresh_delay = 0;
    var ed_hour = 'heures';
    var ed_minute = 'minutes';
    var ed_hours = 'heures';
    var ed_minutes = 'minutes';
    var ed_and = 'et';
    var ed_refresh = 'Heure limite de ramassage dépassée, veuillez rafraîchir votre navigateur afin de calculer la nouvelle Estimation de livraison.';
    /*var ed_has_combi = ; */
    var ed_placement = 0;
    var ed_custom_sel = unescapeHTML('');
    var ed_custom_ins = '1';
    var ed_sm = 1;
    var ed_in_modal = 1;
    var ed_front_ajax_url = 'https://creativcolor.fr/module/estimateddelivery/AjaxRefresh?token=894bfd1a5e3ff3af1c42a145621a5430&ajax=1';     var front_ajax_cart_url = 'https://creativcolor.fr/module/estimateddelivery/AjaxCart?token=894bfd1a5e3ff3af1c42a145621a5430&amp;ajax=1';
    var ps_version = '17';
    var ed_display_option = 1;


    function unescapeHTML(html) {
        var doc = new DOMParser().parseFromString(html, 'text/html');
        return doc.documentElement.textContent;
    }
</script>



      <link rel="stylesheet" href="https://creativcolor.fr/themes/creativcolor/assets/css/custom-fonts.css?v=20260628-3">
      <link rel="stylesheet" href="https://creativcolor.fr/themes/creativcolor/assets/css/custom.css?v=20260628-3">
    
  </head>
  <body id="pagenotfound" class="lang-fr country-fr currency-eur layout-both-columns page-pagenotfound tax-display-enabled">
    
    <div class="cc-page">
      
        <div class="cc-promo-bar cc-promo-module-slot">
  
</div>
<header class="cc-header" id="header">
  <div class="cc-container cc-header-inner">
    <a class="cc-logo" href="https://creativcolor.fr/" aria-label="CreativColor">
              <img src="https://creativcolor.fr/img/logo-1780473434.jpg" alt="PrestaShop" loading="eager">
          </a>

    <nav class="cc-main-menu cc-prestashop-menu" id="cc-main-menu" aria-label="Menu principal">
      
      

<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    
          <ul class="top-menu" id="top-menu" data-depth="0">
                    <li class="category" id="category-2">
                          <a
                class="dropdown-item"
                href="https://creativcolor.fr/" data-depth="0"
                              >
                                                                      <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_59748" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                                Accueil
              </a>
                            <div  class="popover sub-menu js-sub-menu collapse" id="top_sub_menu_59748">
                
          <ul class="top-menu"  data-depth="1">
                    <li class="category" id="category-4">
                          <a
                class="dropdown-item dropdown-submenu"
                href="https://creativcolor.fr/4-stickers" data-depth="1"
                              >
                                Stickers
              </a>
                          </li>
                    <li class="category" id="category-5">
                          <a
                class="dropdown-item dropdown-submenu"
                href="https://creativcolor.fr/5-mugs" data-depth="1"
                              >
                                Mugs
              </a>
                          </li>
              </ul>
    
              </div>
                          </li>
                    <li class="category" id="category-4">
                          <a
                class="dropdown-item"
                href="https://creativcolor.fr/4-stickers" data-depth="0"
                              >
                                Stickers
              </a>
                          </li>
                    <li class="category" id="category-5">
                          <a
                class="dropdown-item"
                href="https://creativcolor.fr/5-mugs" data-depth="0"
                              >
                                Mugs
              </a>
                          </li>
              </ul>
    
    <div class="clearfix"></div>
</div>

    </nav>

    <div class="cc-header-actions">
      <a class="cc-icon-button cc-account-link" href="https://creativcolor.fr/mon-compte" aria-label="Compte">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M20 21a8 8 0 0 0-16 0"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
      </a>
      <a class="cc-icon-button cc-cart-link" href="https://creativcolor.fr/panier?action=show" aria-label="Panier">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <circle cx="9" cy="21" r="1"></circle>
          <circle cx="20" cy="21" r="1"></circle>
          <path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"></path>
        </svg>
		</a>
      <button class="cc-mobile-toggle" type="button" data-cc-mobile-toggle aria-controls="cc-main-menu" aria-expanded="false" aria-label="Ouvrir le menu">Menu</button>
    </div>
  </div>
</header>

<nav class="cc-global-category-nav" aria-label="Catégories et sous-catégories" data-cc-global-categories hidden>
  <div class="cc-container cc-global-category-track" data-cc-global-category-track></div>
</nav>
      

      <main class="cc-layout">
        <div class="cc-container cc-layout-grid">
          
            
<aside id="notifications">
  <div class="notifications-container container">
    
    
    
      </div>
</aside>
          

          
            

  <section id="main">

    
      
        <header class="page-header">
          <h1>
  La page que vous cherchez n&#039;a pas été trouvée.
</h1>
        </header>
      
    

    
  <section id="content" class="page-content page-not-found">
  
    
                <h4>Aucun produit disponible pour le moment</h4>
  <p>Restez à l'écoute ! D'autres produits seront affichés ici au fur et à mesure qu'ils seront ajoutés.</p>

          

    
      
    

    
      
    
  
</section>


    
      <footer class="page-footer">
        
          <!-- Footer content -->
        
      </footer>
    

  </section>


          
        </div>
      </main>

      
        <footer class="cc-footer">
  <div class="cc-container">
    <div class="cc-footer-reassurance" aria-label="Réassurance">
      <div class="cc-footer-reassurance-item"><span class="cc-reassurance-icon">24h</span><span>Livraison rapide</span></div>
      <div class="cc-footer-reassurance-item"><span class="cc-reassurance-icon">★</span><span>Qualité professionnelle</span></div>
      <div class="cc-footer-reassurance-item"><span class="cc-reassurance-icon">AA</span><span>Personnalisation facile</span></div>
      <div class="cc-footer-reassurance-item"><span class="cc-reassurance-icon">7j</span><span>Service client</span></div>
    </div>

    <div class="cc-card cc-footer-hooks">
      <div class="block_newsletter col-lg-8 col-md-12 col-sm-12" id="blockEmailSubscription_displayFooterBefore">
  <div class="row">
    <p id="block-newsletter-label" class="col-md-5 col-xs-12">Recevez nos offres spéciales</p>
    <div class="col-md-7 col-xs-12">
      <form action="https://creativcolor.fr/sitemap.xml#blockEmailSubscription_displayFooterBefore" method="post">
        <div class="row">
          <div class="col-xs-12">
            <input
              class="btn btn-primary float-xs-right hidden-xs-down"
              name="submitNewsletter"
              type="submit"
              value="S’abonner"
            >
            <input
              class="btn btn-primary float-xs-right hidden-sm-up"
              name="submitNewsletter"
              type="submit"
              value="ok"
            >
            <div class="input-wrapper">
              <input
                name="email"
                type="email"
                value=""
                placeholder="Votre adresse e-mail"
                aria-labelledby="block-newsletter-label"
                required
              >
            </div>
            <input type="hidden" name="blockHookName" value="displayFooterBefore" />
            <input type="hidden" name="action" value="0">
            <div class="clearfix"></div>
          </div>
          <div class="col-xs-12">
                              <p>Vous pouvez vous désinscrire à tout moment. Vous trouverez pour cela nos informations de contact dans les conditions d&#039;utilisation du site.</p>
                                          
                              
                        </div>
        </div>
      </form>
    </div>
  </div>
</div>

      <div class="col-md-6 links">
  <div class="row">
      <div class="col-md-6 wrapper">
      <p class="h3 hidden-sm-down">Products</p>
      <div class="title clearfix hidden-md-up" data-target="#footer_sub_menu_1" data-toggle="collapse">
        <span class="h3">Products</span>
        <span class="float-xs-right">
          <span class="navbar-toggler collapse-icons">
            <i class="material-icons add">&#xE313;</i>
            <i class="material-icons remove">&#xE316;</i>
          </span>
        </span>
      </div>
      <ul id="footer_sub_menu_1" class="collapse">
                  <li>
            <a
                id="link-product-page-prices-drop-1"
                class="cms-page-link"
                href="https://creativcolor.fr/promotions"
                title="Nos promotions"
                            >
              Promotions
            </a>
          </li>
                  <li>
            <a
                id="link-product-page-new-products-1"
                class="cms-page-link"
                href="https://creativcolor.fr/nouveaux-produits"
                title="Nos nouveaux produits"
                            >
              Nouveaux produits
            </a>
          </li>
                  <li>
            <a
                id="link-product-page-best-sales-1"
                class="cms-page-link"
                href="https://creativcolor.fr/meilleures ventes"
                title="Nos meilleures ventes"
                            >
              Meilleures ventes
            </a>
          </li>
              </ul>
    </div>
      <div class="col-md-6 wrapper">
      <p class="h3 hidden-sm-down">Our company</p>
      <div class="title clearfix hidden-md-up" data-target="#footer_sub_menu_2" data-toggle="collapse">
        <span class="h3">Our company</span>
        <span class="float-xs-right">
          <span class="navbar-toggler collapse-icons">
            <i class="material-icons add">&#xE313;</i>
            <i class="material-icons remove">&#xE316;</i>
          </span>
        </span>
      </div>
      <ul id="footer_sub_menu_2" class="collapse">
                  <li>
            <a
                id="link-cms-page-1-2"
                class="cms-page-link"
                href="https://creativcolor.fr/content/1-livraison"
                title="Nos conditions de livraison"
                            >
              Livraison
            </a>
          </li>
                  <li>
            <a
                id="link-cms-page-2-2"
                class="cms-page-link"
                href="https://creativcolor.fr/content/2-mentions-legales"
                title="Mentions légales"
                            >
              Mentions légales
            </a>
          </li>
                  <li>
            <a
                id="link-cms-page-3-2"
                class="cms-page-link"
                href="https://creativcolor.fr/content/3-conditions-utilisation"
                title="Nos conditions d&#039;utilisation"
                            >
              Conditions d&#039;utilisation
            </a>
          </li>
                  <li>
            <a
                id="link-cms-page-4-2"
                class="cms-page-link"
                href="https://creativcolor.fr/content/4-a-propos"
                title="En savoir plus sur notre entreprise"
                            >
              A propos
            </a>
          </li>
                  <li>
            <a
                id="link-cms-page-5-2"
                class="cms-page-link"
                href="https://creativcolor.fr/content/5-paiement-securise"
                title="Notre méthode de paiement sécurisé"
                            >
              Paiement sécurisé
            </a>
          </li>
                  <li>
            <a
                id="link-static-page-contact-2"
                class="cms-page-link"
                href="https://creativcolor.fr/nous-contacter"
                title="Utiliser le formulaire pour nous contacter"
                            >
              Contactez-nous
            </a>
          </li>
                  <li>
            <a
                id="link-static-page-sitemap-2"
                class="cms-page-link"
                href="https://creativcolor.fr/plan-site"
                title="Vous êtes perdu ? Trouvez ce que vous cherchez"
                            >
              Plan du site
            </a>
          </li>
                  <li>
            <a
                id="link-static-page-stores-2"
                class="cms-page-link"
                href="https://creativcolor.fr/magasins"
                title=""
                            >
              Magasins
            </a>
          </li>
              </ul>
    </div>
    </div>
</div>

      
    </div>
  </div>
</footer>
      
    </div>
    
    
        <script type="text/javascript" src="https://creativcolor.fr/themes/core.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/themes/classic/assets/js/theme.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/modules/blockreassurance/views/dist/front.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/modules/ps_emailsubscription/views/js/ps_emailsubscription.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/modules/ps_emailalerts/js/mailalerts.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/modules/estimateddelivery/views/js/ed-cart-modal.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/modules/ps_shoppingcart/ps_shoppingcart.js" ></script>
  <script type="text/javascript" src="https://creativcolor.fr/themes/creativcolor/assets/js/custom.js" ></script>


      <script src="https://creativcolor.fr/themes/creativcolor/assets/js/custom.js?v=20260628-3" defer></script>
    
  </body>
</html>