<!doctype html>
<html lang="fr" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Store Header</title>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="/_sdk/element_sdk.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&amp;display=swap" rel="stylesheet">
  <style>
    * { font-family: 'Poppins', sans-serif; }
  </style>
  <style>body { box-sizing: border-box; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full">
  <div id="app-wrapper" class="w-full h-full">
   <header id="main-header" class="w-full bg-slate-900 text-white">
    <div class="max-w-7xl mx-auto px-4 py-3">
     <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-2 sm:justify-between"><!-- Rating Section -->
      <div class="flex items-center gap-2"><span id="rating-label" class="text-sm font-medium text-slate-300">Avis de la boutique</span>
       <div class="flex items-center gap-1.5 bg-slate-800 px-3 py-1.5 rounded-full">
        <div id="stars-container" class="flex items-center gap-0.5"><!-- 5 étoiles vertes -->
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
        </div><span id="rating-value" class="text-sm font-semibold text-white">4.88/5</span>
       </div>
      </div><!-- Phone Section -->
      <div class="flex items-center gap-2">
       <div class="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 transition-colors px-4 py-1.5 rounded-full cursor-pointer">
        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
        </svg><span id="phone-label" class="text-sm font-medium text-white">Service client</span> <span id="phone-number" class="text-sm font-semibold text-white">+33 (9) 63 58 96 50</span>
       </div>
      </div>
     </div>
    </div>
   </header>
  </div>
  <script>
    const defaultConfig = {
      rating_label: "Avis de la boutique",
      rating_value: "4.88/5",
      phone_label: "Service client",
      phone_number: "+33 (9) 63 58 96 50",
      background_color: "#0f172a",
      accent_color: "#059669",
      text_color: "#ffffff",
      secondary_text_color: "#cbd5e1",
      star_color: "#34d399"
    };

    async function onConfigChange(config) {
      document.getElementById('rating-label').textContent = config.rating_label || defaultConfig.rating_label;
      document.getElementById('rating-value').textContent = config.rating_value || defaultConfig.rating_value;
      document.getElementById('phone-label').textContent = config.phone_label || defaultConfig.phone_label;
      document.getElementById('phone-number').textContent = config.phone_number || defaultConfig.phone_number;

      const header = document.getElementById('main-header');
      header.style.backgroundColor = config.background_color || defaultConfig.background_color;

      const ratingLabel = document.getElementById('rating-label');
      ratingLabel.style.color = config.secondary_text_color || defaultConfig.secondary_text_color;

      const phoneBtn = document.querySelector('.bg-emerald-600');
      if (phoneBtn) {
        phoneBtn.style.backgroundColor = config.accent_color || defaultConfig.accent_color;
      }

      const stars = document.querySelectorAll('#stars-container svg');
      stars.forEach(star => {
        star.style.color = config.star_color || defaultConfig.star_color;
      });
    }

    function mapToCapabilities(config) {
      return {
        recolorables: [
          {
            get: () => config.background_color || defaultConfig.background_color,
            set: (value) => { config.background_color = value; window.elementSdk.setConfig({ background_color: value }); }
          },
          {
            get: () => config.accent_color || defaultConfig.accent_color,
            set: (value) => { config.accent_color = value; window.elementSdk.setConfig({ accent_color: value }); }
          },
          {
            get: () => config.text_color || defaultConfig.text_color,
            set: (value) => { config.text_color = value; window.elementSdk.setConfig({ text_color: value }); }
          },
          {
            get: () => config.secondary_text_color || defaultConfig.secondary_text_color,
            set: (value) => { config.secondary_text_color = value; window.elementSdk.setConfig({ secondary_text_color: value }); }
          },
          {
            get: () => config.star_color || defaultConfig.star_color,
            set: (value) => { config.star_color = value; window.elementSdk.setConfig({ star_color: value }); }
          }
        ],
        borderables: [],
        fontEditable: undefined,
        fontSizeable: undefined
      };
    }

    function mapToEditPanelValues(config) {
      return new Map([
        ["rating_label", config.rating_label || defaultConfig.rating_label],
        ["rating_value", config.rating_value || defaultConfig.rating_value],
        ["phone_label", config.phone_label || defaultConfig.phone_label],
        ["phone_number", config.phone_number || defaultConfig.phone_number]
      ]);
    }

    if (window.elementSdk) {
      window.elementSdk.init({
        defaultConfig,
        onConfigChange,
        mapToCapabilities,
        mapToEditPanelValues
      });
    }
  </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9cdfc24f6520ee4c',t:'MTc3MTEwNTU5NC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>!doctype html>
<html lang="fr" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Store Header</title>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="/_sdk/element_sdk.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&amp;display=swap" rel="stylesheet">
  <style>
    * { font-family: 'Poppins', sans-serif; }
  </style>
  <style>body { box-sizing: border-box; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full">
  <div id="app-wrapper" class="w-full h-full">
   <header id="main-header" class="w-full bg-slate-900 text-white">
    <div class="max-w-7xl mx-auto px-4 py-3">
     <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-2 sm:justify-between"><!-- Rating Section -->
      <div class="flex items-center gap-2"><span id="rating-label" class="text-sm font-medium text-slate-300">Avis de la boutique</span>
       <div class="flex items-center gap-1.5 bg-slate-800 px-3 py-1.5 rounded-full">
        <div id="stars-container" class="flex items-center gap-0.5"><!-- 5 étoiles vertes -->
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
        </div><span id="rating-value" class="text-sm font-semibold text-white">4.88/5</span>
       </div>
      </div><!-- Phone Section -->
      <div class="flex items-center gap-2">
       <div class="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 transition-colors px-4 py-1.5 rounded-full cursor-pointer">
        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
        </svg><span id="phone-label" class="text-sm font-medium text-white">Service client</span> <span id="phone-number" class="text-sm font-semibold text-white">+33 (9) 63 58 96 50</span>
       </div>
      </div>
     </div>
    </div>
   </header>
  </div>
  <script>
    const defaultConfig = {
      rating_label: "Avis de la boutique",
      rating_value: "4.88/5",
      phone_label: "Service client",
      phone_number: "+33 (9) 63 58 96 50",
      background_color: "#0f172a",
      accent_color: "#059669",
      text_color: "#ffffff",
      secondary_text_color: "#cbd5e1",
      star_color: "#34d399"
    };

    async function onConfigChange(config) {
      document.getElementById('rating-label').textContent = config.rating_label || defaultConfig.rating_label;
      document.getElementById('rating-value').textContent = config.rating_value || defaultConfig.rating_value;
      document.getElementById('phone-label').textContent = config.phone_label || defaultConfig.phone_label;
      document.getElementById('phone-number').textContent = config.phone_number || defaultConfig.phone_number;

      const header = document.getElementById('main-header');
      header.style.backgroundColor = config.background_color || defaultConfig.background_color;

      const ratingLabel = document.getElementById('rating-label');
      ratingLabel.style.color = config.secondary_text_color || defaultConfig.secondary_text_color;

      const phoneBtn = document.querySelector('.bg-emerald-600');
      if (phoneBtn) {
        phoneBtn.style.backgroundColor = config.accent_color || defaultConfig.accent_color;
      }

      const stars = document.querySelectorAll('#stars-container svg');
      stars.forEach(star => {
        star.style.color = config.star_color || defaultConfig.star_color;
      });
    }

    function mapToCapabilities(config) {
      return {
        recolorables: [
          {
            get: () => config.background_color || defaultConfig.background_color,
            set: (value) => { config.background_color = value; window.elementSdk.setConfig({ background_color: value }); }
          },
          {
            get: () => config.accent_color || defaultConfig.accent_color,
            set: (value) => { config.accent_color = value; window.elementSdk.setConfig({ accent_color: value }); }
          },
          {
            get: () => config.text_color || defaultConfig.text_color,
            set: (value) => { config.text_color = value; window.elementSdk.setConfig({ text_color: value }); }
          },
          {
            get: () => config.secondary_text_color || defaultConfig.secondary_text_color,
            set: (value) => { config.secondary_text_color = value; window.elementSdk.setConfig({ secondary_text_color: value }); }
          },
          {
            get: () => config.star_color || defaultConfig.star_color,
            set: (value) => { config.star_color = value; window.elementSdk.setConfig({ star_color: value }); }
          }
        ],
        borderables: [],
        fontEditable: undefined,
        fontSizeable: undefined
      };
    }

    function mapToEditPanelValues(config) {
      return new Map([
        ["rating_label", config.rating_label || defaultConfig.rating_label],
        ["rating_value", config.rating_value || defaultConfig.rating_value],
        ["phone_label", config.phone_label || defaultConfig.phone_label],
        ["phone_number", config.phone_number || defaultConfig.phone_number]
      ]);
    }

    if (window.elementSdk) {
      window.elementSdk.init({
        defaultConfig,
        onConfigChange,
        mapToCapabilities,
        mapToEditPanelValues
      });
    }
  </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9cdfc24f6520ee4c',t:'MTc3MTEwNTU5NC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>