{# Header + méga-menu partagés (P2-c). Coordonnées câblées en P2-e. #}{%- verbatim -%}
<header style="position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(17,20,16,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid #327632;">
    <div class="m-bar" style="height: 74px; padding: 0 20px; align-items: center; justify-content: space-between; gap: 16px;">
      <a href="/" aria-label="SALAM — accueil" style="display: flex; align-items: center; gap: 12px; color: #F0F2EA;" style-hover="color: #F0F2EA;">
        <img src="/images/symbole-salam-140.webp" alt="" style="width: 40px; height: 40px; display: block;">
        <span style="display: block; font-family: Jost, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: 0.17em; line-height: 1; color: #F0F2EA;">SALAM</span>
      </a>
      <div style="display: flex; align-items: center; gap: 6px;">
        <a href="tel:{% endverbatim %}{{ settings('contact_phone', '+590 690 65 38 47')|replace({' ': ''}) }}{% verbatim %}" aria-label="Appeler le {% endverbatim %}{{ settings('contact_phone', '+590 690 65 38 47') }}{% verbatim %}" style="width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;">
          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#D7DA45" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 21A12.5 12.5 0 0 1 3 8.5V6a1.5 1.5 0 0 1 1.5-1.5h2.2a1 1 0 0 1 1 .82l.6 3a1 1 0 0 1-.5 1.05l-1.4.75a10 10 0 0 0 5.2 5.2l.75-1.4a1 1 0 0 1 1.05-.5l3 .6a1 1 0 0 1 .82 1v2.2A1.5 1.5 0 0 1 17 21z"></path></svg>
        </a>
        <button onClick="{{ toggleMobile }}" aria-label="Ouvrir le menu" style="width: 46px; height: 46px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 12px; background: none; border: 0; cursor: pointer;">
          <span style="background: #F0F2EA; border-radius: 2px;"></span>
          <span style="background: #F0F2EA; border-radius: 2px;"></span>
          <span style="background: #F0F2EA; border-radius: 2px;"></span>
          <span style="background: #D7DA45; border-radius: 2px;"></span>
        </button>
      </div>
    </div>
    <div class="d-bar wrap" style="max-width: 1440px; margin: 0 auto; padding: 0 80px; height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 48px;">
      <a href="/" aria-label="SALAM — accueil" style="display: flex; align-items: center; gap: 18px; color: #F0F2EA;" style-hover="color: #F0F2EA;">
        <img src="/images/symbole-salam-140.webp" alt="" style="width: 70px; height: 70px; display: block;">
        <span style="display: block;">
          <span style="display: block; font-family: Jost, sans-serif; font-size: 34px; font-weight: 400; letter-spacing: 0.17em; line-height: 1; color: #F0F2EA;">SALAM</span>
          <span style="display: block; font-family: Jost, sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.05em; color: #FFFFFF; margin-top: 7px;">agence digitale en Guadeloupe</span>
        </span>
      </a>
      <nav style="display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 500;">
        <div onMouseEnter="{{ openMega }}" onMouseLeave="{{ closeMega }}" style="position: relative; display: flex; align-items: center;">
          <button onClick="{{ toggleMega }}" style="display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 40px 0; color: #D7DA45; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer;">
            Services
            <span style="display: block; width: 6px; height: 6px; border-right: 1.5px solid #D7DA45; border-bottom: 1.5px solid #D7DA45; transform: rotate(45deg) translateY(-2px);"></span>
          </button>
          <sc-if value="{{ megaOpen }}" hint-placeholder-val="{{ true }}">
            <div style="position: absolute; top: 100%; left: -240px; width: 1020px; background: #1C4F1C; border: 1px solid #327632; border-radius: 8px; overflow: hidden; animation: salamIn .18s ease both;">
              <div style="height: 2px; background: linear-gradient(90deg, #D7DA45, #79B63B, #D7DA45);"></div>
              <div style="display: grid; grid-template-columns: repeat(3, 1fr);">
                <sc-for list="{{ megaGroups }}" as="g" hint-placeholder-count="3">
                  <div style="padding: 36px 38px 40px; border-right: 1px solid #327632;">
                    <div style="font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #D7DA45; margin-bottom: 16px;">{{ g.kicker }}</div>
                    <div style="font-family: 'Instrument Serif', serif; font-size: 30px; line-height: 1.1; margin-bottom: 24px;">{{ g.title }}</div>
                    <div style="display: flex; flex-direction: column; gap: 2px;">
                      <sc-for list="{{ g.items }}" as="it" hint-placeholder-count="4">
                        <a href="{{ it.href }}" style="display: block; padding: 13px 0; border-top: 1px solid #327632; color: #F0F2EA;" style-hover="color: #D7DA45;">
                          <div style="display: flex; align-items: center; gap: 9px; margin-bottom: 4px;">
                            <span style="font-family: 'Instrument Serif', serif; font-size: 20px;">{{ it.name }}</span>
                            <sc-if value="{{ it.pill }}" hint-placeholder-val="{{ false }}">
                              <span style="padding: 3px 9px; border-radius: 999px; background: #D7DA45; color: #111410; font-family: Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;">{{ it.pill }}</span>
                            </sc-if>
                          </div>
                          <div style="font-size: 13.5px; line-height: 1.55; color: #ACB7A5; max-width: 252px;">{{ it.desc }}</div>
                        </a>
                      </sc-for>
                    </div>
                  </div>
                </sc-for>
              </div>
              <div style="display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 38px; border-top: 1px solid #327632; background: #1C4F1C;">
                <div style="font-size: 14px; color: #C8D2C0;">Vous ne savez pas par quoi commencer ? On regarde votre situation ensemble, sans engagement.</div>
                <a href="{% endverbatim %}{{ header_cta_href|default('/demande-de-devis/') }}{% verbatim %}" style="font-size: 14px; font-weight: 700; color: #D7DA45;">{% endverbatim %}{{ header_cta_label|default('Demander un devis') }}{% verbatim %} →</a>
              </div>
            </div>
          </sc-if>
        </div>
        <a href="/nos-realisations/" style="color: #F0F2EA;" style-hover="color: #D7DA45;">Réalisations</a>
        <a href="/blog/" style="color: #F0F2EA;" style-hover="color: #D7DA45;">Blog</a>
      </nav>

      <div style="display: flex; align-items: center; gap: 22px;">
        <a href="tel:{% endverbatim %}{{ settings('contact_phone', '+590 690 65 38 47')|replace({' ': ''}) }}{% verbatim %}" style="display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: #F0F2EA;" style-hover="color: #D7DA45;">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#D7DA45" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: none;">
            <path d="M4.2 2.9h2.6l1.3 3.2-1.6 1.1a8.6 8.6 0 0 0 4.3 4.3l1.1-1.6 3.2 1.3v2.6a1.3 1.3 0 0 1-1.4 1.3C8.4 15 5 11.6 2.9 4.3a1.3 1.3 0 0 1 1.3-1.4Z"></path>
            <path d="M13.4 4.2a4 4 0 0 1 2.4 2.4M12.9 1.6a6.9 6.9 0 0 1 4.5 4.5"></path>
          </svg>
          {% endverbatim %}{{ settings('contact_phone', '+590 690 65 38 47') }}{% verbatim %}
        </a>
        <a href="{% endverbatim %}{{ header_cta_href|default('/demande-de-devis/') }}{% verbatim %}" class="btn" style="padding: 14px 24px; border-radius: 4px; background: #D7DA45; color: #111410; font-size: 14.5px; font-weight: 700;">{% endverbatim %}{{ header_cta_label|default('Demander un devis') }}{% verbatim %}</a>
      </div>
    </div>
  </header>
{%- endverbatim -%}