{% extends 'base_dc.html.twig' %}
{% block dc %}
{% verbatim %}
<x-dc>
<helmet>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  html, body { margin: 0; padding: 0; background: #111410; }
  * { box-sizing: border-box; }
  a { color: #D7DA45; text-decoration: none; }
  a:hover { color: #F0F2EA; }
  @keyframes salamIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* EFFET 14 — le bouton qui se remplit */
  .btn { position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease, border-color .3s ease; }
  .btn::before { content: ""; position: absolute; inset: 0; background: #D7DA45; transform: translateX(-101%); transition: transform .42s cubic-bezier(.4,0,.2,1); z-index: -1; }
  .btn:hover::before { transform: translateX(0); }
  .btn:hover { color: #111410; border-color: #D7DA45; }

  /* EFFET 6 — le filet qui balaie */
  .rule { height: 2px; background: #327632; position: relative; overflow: hidden; }
  .rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #D7DA45, #79B63B, #D7DA45, transparent); transform: translateX(-100%); }
  .rule.is-on::after { animation: ruleSweep 1.1s cubic-bezier(.3,0,.2,1) both; }
  @keyframes ruleSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  /* EFFET 8 — le halo qui suit le curseur */
  .spot { position: relative; }
  .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(215,218,69,.16), rgba(215,218,69,0) 68%); }
  .spot:hover::after { opacity: 1; }

  /* EFFET 2 — la capture qui défile dans le cadre */
  .mk-w { overflow: hidden; }
  .mk-i { transition: transform 2.4s cubic-bezier(.22,.61,.36,1); will-change: transform; }
  .mk:hover .mk-i { transform: translateY(-52%); }
  .mk .bar{ background:#D7DA45 }
  .mk .url{ color:#111410; font-weight:600 }
  .mk .dot{ background:#8F9420 }
  h2 em{ font-style:normal; color:#D7DA45 }

  /* EFFET 13 — la FAQ en accordéon */
  .faq details { border-bottom: 1px solid #327632; }
  .faq summary { position: relative; list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 22px;
    padding: 24px 0; font-family: 'Instrument Serif', serif; font-size: 23px; line-height: 1.25; color: #F0F2EA; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: #D7DA45; }
  .faq .arw { flex: none; width: 9px; height: 9px; border-right: 2px solid #D7DA45; border-bottom: 2px solid #D7DA45; transform: rotate(45deg); transition: transform .3s ease; }
  .faq details[open] .arw { transform: rotate(-135deg); }
  .faq details[open] summary::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, #D7DA45, #79B63B, #D7DA45); transform-origin: left; animation: faqLine .4s cubic-bezier(.3,0,.2,1) both; }
  @keyframes faqLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .faq .ans { font-size: 15.5px; line-height: 1.65; color: #ACB7A5; padding: 0 40px 26px 0; animation: msgIn .35s ease both; }

  /* ICÔNES DES CARTES PROJET — code fourni, repris tel quel */
  .ico{ width:96px; height:96px; fill:none; stroke:#D7DA45;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
  .ico .plein{ fill:#D7DA45; stroke:none }
  .ico [pathLength]{ stroke-dasharray:1; stroke-dashoffset:0 }
  .carte-projet:hover .ico [pathLength]{ animation:tracer .85s ease both }
  .carte-projet:hover .ico [pathLength]:nth-child(2){ animation-delay:.10s }
  .carte-projet:hover .ico [pathLength]:nth-child(3){ animation-delay:.20s }
  .carte-projet:hover .ico [pathLength]:nth-child(4){ animation-delay:.30s }
  @keyframes tracer{ from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
  .ico .plein{ transform-origin:center; transform-box:fill-box }
  .carte-projet:hover .ico .plein{ animation:poser .4s ease .34s both }
  @keyframes poser{ from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
  .carte-projet{ transition: transform .4s cubic-bezier(.22,.61,.36,1), border-color .4s ease }
  .carte-projet:hover{ transform: translateY(-5px); border-color:#D7DA45 }
  @media(prefers-reduced-motion:reduce){
    .carte-projet:hover .ico [pathLength],
    .carte-projet:hover .ico .plein{ animation:none }
    .carte-projet{ transition:none }
  }

  .g2 > .h2::after{
    content:"";
    display:block;
    width:56px;
    height:2px;
    background:#D7DA45;
    margin-top:30px;
  }
  @media(max-width:860px){ .g2 > .h2::after{ margin-top:22px } }

  /* BLOG */
  .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }
  .bcard { transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease; }
  .bcard:hover { transform: translateY(-4px); border-color: #D7DA45; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
  .bcard .more { color: #ACB7A5; transition: color .3s ease; }
  .bcard:hover .more { color: #D7DA45; }
  .pill { transition: background .3s ease, color .3s ease, border-color .3s ease; }
  .pill:hover { border-color: #D7DA45; color: #F0F2EA; }
  .filters { display: flex; gap: 10px; flex-wrap: wrap; }
  @media (max-width: 700px) { .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } }
  .art h2 { font-family: 'Instrument Serif', serif; font-size: 26px; line-height: 1.2; color: #F0F2EA; margin: 48px 0 16px; }
  .art h3 { font-family: Manrope, system-ui, sans-serif; font-size: 18px; font-weight: 600; color: #D7DA45; margin: 32px 0 12px; }
  .art p { font-family: Manrope, system-ui, sans-serif; font-size: 16px; line-height: 1.75; color: #F0F2EA; margin: 0 0 18px; text-wrap: pretty; }
  .art ul { margin: 0 0 20px; padding-left: 20px; color: #ACB7A5; font-size: 16px; line-height: 1.75; }
  .art ul li::marker { color: #D7DA45; }
  .art blockquote { margin: 28px 0; padding: 22px 26px; border-left: 3px solid #D7DA45; background: #1C4F1C; font-style: italic; color: #F0F2EA; font-size: 17px; line-height: 1.7; }
  .art a { color: #D7DA45; text-decoration: none; }
  .art a:hover { text-decoration: underline; }
  .art code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; background: #1C4F1C; color: #D7DA45; padding: 2px 6px; border-radius: 3px; }
  .art figure { margin: 28px 0; }
  .art figcaption { font-family: Manrope, system-ui, sans-serif; font-size: 12.5px; color: #ACB7A5; margin-top: 10px; }
  .toc a { color: #ACB7A5; text-decoration: none; transition: color .3s ease; }
  .toc a:hover, .toc a.is-on { color: #D7DA45; }
  @media (min-width: 1101px) { .toc-wrap { position: sticky; top: 130px; } }
  @media (max-width: 1100px) { .art-layout { grid-template-columns: 1fr !important; } .toc-wrap { position: static; } }

  /* RÉALISATIONS */
  .mk-w { overflow: hidden; }
  .mk-i { transition: transform 2.4s cubic-bezier(.22,.61,.36,1); will-change: transform; }
  .mk:hover .mk-i { transform: translateY(-52%); }
  .carte-projet { transition: transform .4s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .4s ease; }
  .carte-projet:hover { transform: translateY(-5px); border-color: #D7DA45; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
  @media (prefers-reduced-motion: reduce) { .mk-i, .carte-projet { transition: none } }

  /* MENU MOBILE — barre et panneau sous 900 px */
  .m-bar { display: none; }
  @media (max-width: 900px) {
    .d-bar { display: none !important; }
    .m-bar { display: flex !important; width: 100vw; max-width: 100vw; position: sticky; left: 0; }
    .page { min-width: 0 !important; }
    .wrap { padding-left: 20px !important; padding-right: 20px !important; }
    .g2, .g3, .g4, .g8 { grid-template-columns: 1fr !important; }
    .col-r { margin-right: 0 !important; }
    .hero { min-height: 0 !important; }
    .h1 { font-size: 44px !important; }
    .h2 { font-size: 34px !important; }
    .pad-y { padding-top: 56px !important; padding-bottom: 56px !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rule.is-on::after, .faq .ans, .faq details[open] summary::after { animation: none; }
    .mk-i, .btn::before { transition: none; }
  }

  /* TEXTURE DES BLOCS VERTS — code fourni, repris tel quel */
  .bloc-vert{
    position:relative;
    background-color:#1C4F1C;
    background-image:linear-gradient(180deg,
      rgba(255,255,255,.07), transparent 55%, rgba(0,0,0,.20));
    overflow:hidden;
  }
  .bloc-vert::before,
  .bloc-vert::after{
    content:"";
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg,
      transparent, #D7DA45, #79B63B, #1BA09A, transparent);
    background-size:220% 100%;
    background-position:220% 0;
    background-repeat:no-repeat;
  }
  .bloc-vert::before{ top:0 }
  .bloc-vert::after { bottom:0 }
  .bloc-vert.on::before{ animation:sweep 1.5s ease-out forwards }
  .bloc-vert.on::after { animation:sweep 1.5s ease-out .18s forwards }
  @keyframes sweep{ to{ background-position:-20% 0 } }
  @media(prefers-reduced-motion:reduce){
    .bloc-vert::before,.bloc-vert::after{
      background-position:50% 0; background-size:100% 100%; animation:none }
  }
  .bloc-vert.no-top::before{ display:none }

</style>
</helmet>
<div class="page" style="background: #111410; color: #F0F2EA; font-family: Manrope, system-ui, sans-serif; max-width: 100vw; overflow-x: hidden; position: relative;">
  <div style="position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5; background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27140%27%20height=%27140%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.85%27%20numOctaves=%273%27/%3E%3CfeColorMatrix%20type=%27saturate%27%20values=%270%27/%3E%3C/filter%3E%3Crect%20width=%27140%27%20height=%27140%27%20filter=%27url%28%23n%29%27%20opacity=%270.32%27/%3E%3C/svg%3E);"></div>

  <div aria-hidden="true" style="position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(240,242,234,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(240,242,234,0.05) 1px, transparent 1px); background-size: 80px 80px; background-position: center top;"></div>

  <!-- EN-TÊTE + MÉGA-MENU -->
  {% endverbatim %}{% include 'components/site-header.html.twig' %}{% verbatim %}

  <!-- HERO MINIMAL -->
  <section class="wrap" style="max-width: 1440px; margin: 0 auto; padding: 56px 80px 40px; position: relative; z-index: 2;">
    <div style="display: inline-flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #D7DA45; margin-bottom: 24px;">
      <span style="width: 34px; height: 2px; background: #D7DA45;"></span>
      Réalisations
    </div>
    <h1 class="h1" style="font-family: 'Instrument Serif', serif; font-size: 52px; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 18px; max-width: 900px; text-wrap: pretty;">{% endverbatim %}{{ page.block('hero.h1', '258 projets livrés <em style="font-style: italic; color: #D7DA45;">en Guadeloupe</em>.')|raw }}{% verbatim %}</h1>
    <p style="font-size: 17.5px; line-height: 1.62; color: #ACB7A5; max-width: 680px; margin: 0; text-wrap: pretty;">{% endverbatim %}{{ page.block('hero.intro', 'Sites vitrines, e-commerce, applications, chatbots, automatisations — des projets concrets pour des entreprises guadeloupéennes depuis 2005.')|raw }}{% verbatim %}</p>
  </section>

  <!-- FILTRES -->
  <section class="wrap" style="max-width: 1440px; margin: 0 auto; padding: 12px 80px 34px; position: relative; z-index: 2;">
    <div class="filters">
      <sc-for list="{{ cats }}" as="c" hint-placeholder-count="7">
        <button type="button" class="pill" onClick="{{ c.pick }}" aria-pressed="{{ c.pressed }}" style="flex: none; padding: 9px 18px; border-radius: 999px; background: {{ c.bg }}; border: 1px solid {{ c.border }}; color: {{ c.color }}; font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; appearance: none;">{{ c.label }}</button>
      </sc-for>
    </div>
  </section>

  <!-- GRILLE -->
  <section class="wrap" style="max-width: 1440px; margin: 0 auto; padding: 0 80px 80px; position: relative; z-index: 2;">
    <div class="blog-grid">
      <sc-for list="{{ projets }}" as="p" hint-placeholder-count="17">
        <sc-if value="{{ p.url }}">
          <a href="{{ p.url }}" target="_blank" rel="noopener noreferrer" class="carte-projet" style="display: flex; flex-direction: column; background: #111410; border: 1px solid #327632; border-radius: 10px; overflow: hidden; text-decoration: none; cursor: pointer;">
            <div class="mk mk-w" style="position: relative; aspect-ratio: 16 / 9; background: #1C4F1C;">
              <img class="mk-i" src="{{ p.img }}" srcset="{{ p.srcset }}" sizes="(max-width: 900px) 100vw, 460px" alt="{{ p.alt }}" loading="lazy" decoding="async" style="width: 100%; display: block;">
              <div style="position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 5px;">
                <sc-for list="{{ p.tags }}" as="t" hint-placeholder-count="2">
                  <span style="padding: 3px 8px; border-radius: 4px; background: #1C4F1C; border: 1px solid #327632; color: #D7DA45; font-family: Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap;">{{ t }}</span>
                </sc-for>
              </div>
            </div>
            <div style="padding: 20px 22px 24px;">
              <div style="font-family: 'Instrument Serif', serif; font-size: 16px; line-height: 1.3; color: #F0F2EA;">{{ p.name }}</div>
              <div style="font-family: Manrope, system-ui, sans-serif; font-size: 12px; line-height: 1.5; color: #ACB7A5; margin-top: 6px;">{{ p.sector }}</div>
            </div>
          </a>
        </sc-if>
        <sc-if value="{{ !p.url }}">
          <div class="carte-projet" style="display: flex; flex-direction: column; background: #111410; border: 1px solid #327632; border-radius: 10px; overflow: hidden;">
            <div class="mk mk-w" style="position: relative; aspect-ratio: 16 / 9; background: #1C4F1C;">
              <img class="mk-i" src="{{ p.img }}" srcset="{{ p.srcset }}" sizes="(max-width: 900px) 100vw, 460px" alt="{{ p.alt }}" loading="lazy" decoding="async" style="width: 100%; display: block;">
              <div style="position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 5px;">
                <sc-for list="{{ p.tags }}" as="t" hint-placeholder-count="2">
                  <span style="padding: 3px 8px; border-radius: 4px; background: #1C4F1C; border: 1px solid #327632; color: #D7DA45; font-family: Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap;">{{ t }}</span>
                </sc-for>
              </div>
            </div>
            <div style="padding: 20px 22px 24px;">
              <div style="font-family: 'Instrument Serif', serif; font-size: 16px; line-height: 1.3; color: #F0F2EA;">{{ p.name }}</div>
              <div style="font-family: Manrope, system-ui, sans-serif; font-size: 12px; line-height: 1.5; color: #ACB7A5; margin-top: 6px;">{{ p.sector }}</div>
            </div>
          </div>
        </sc-if>
      </sc-for>
    </div>
  </section>

  <!-- CTA FINAL -->
  <section class="bloc-vert" style="position: relative; z-index: 2;">
    <div class="wrap" style="max-width: 1440px; margin: 0 auto; padding: 80px; text-align: center;">
      <h2 class="h2" style="font-family: 'Instrument Serif', serif; font-size: 44px; line-height: 1.1; margin: 0 0 28px;">{% endverbatim %}{{ page.block('cta.title', 'Votre projet sera le prochain.')|raw }}{% verbatim %}</h2>
      <a href="/demande-de-devis/" class="btn" style="display: inline-block; padding: 17px 32px; border-radius: 4px; background: #D7DA45; color: #111410; font-family: Manrope, system-ui, sans-serif; font-size: 16px; font-weight: 700;">{% endverbatim %}{{ page.block('cta.btn1_label', 'Demander un devis gratuit') }}{% verbatim %}</a>
    </div>
  </section>

  {% endverbatim %}{% include 'components/site-footer.html.twig' %}{% verbatim %}

  <sc-if value="{{ mobileOpen }}" hint-placeholder-val="{{ false }}">
    <div class="m-panel" style="position: fixed; inset: 0; z-index: 80; background: #111410; animation: salamIn .24s ease both; display: flex; flex-direction: column; padding: 16px;">
      <div style="flex: none; display: flex; align-items: center; justify-content: space-between; height: 52px;">
        <div style="font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #D7DA45;">Navigation</div>
        <button onClick="{{ toggleMobile }}" aria-label="Fermer" style="width: 46px; height: 46px; position: relative; background: none; border: 0; cursor: pointer;">
          <span style="position: absolute; left: 12px; top: 22px; width: 22px; height: 2px; background: #D7DA45; transform: rotate(45deg);"></span>
          <span style="position: absolute; left: 12px; top: 22px; width: 22px; height: 2px; background: #D7DA45; transform: rotate(-45deg);"></span>
        </button>
      </div>
      <div style="flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 11px; overflow-y: auto;">
        <sc-for list="{{ megaGroups }}" as="g" hint-placeholder-count="3">
          <div style="flex: 1 1 auto; background: #1C4F1C; border: 1px solid #327632; border-radius: 12px; padding: 16px 16px 12px; display: flex; flex-direction: column;">
            <div style="font-family: 'Instrument Serif', serif; font-size: 26px; margin-bottom: 10px;">{{ g.title }}</div>
            <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;">
              <sc-for list="{{ g.items }}" as="it" hint-placeholder-count="3">
                <a href="{{ it.href }}" style="min-height: 44px; display: flex; align-items: center; padding: 0 13px; border: 1px solid #327632; border-radius: 999px; background: #1C4F1C; font-size: 13.5px; color: #F0F2EA;" style-hover="color: #D7DA45;">{{ it.name }}</a>
              </sc-for>
            </div>
          </div>
        </sc-for>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
          <sc-for list="{{ mobileSimple }}" as="s" hint-placeholder-count="4">
            <a href="{{ s.href }}" style="min-height: 56px; display: flex; align-items: center; padding: 0 16px; border: 1px solid #327632; border-radius: 12px; font-family: 'Instrument Serif', serif; font-size: 21px; color: #F0F2EA;" style-hover="color: #D7DA45;">{{ s.label }}</a>
          </sc-for>
        </div>
        <div style="display: flex; gap: 10px;">
          <a href="/demande-de-devis/" style="flex: 1; height: 52px; border-radius: 4px; background: #D7DA45; color: #111410; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center;" style-hover="color: #111410;">Demander un devis</a>
          <a href="tel:{% endverbatim %}{{ settings('contact_phone', '+590 690 65 38 47')|replace({' ': ''}) }}{% verbatim %}" aria-label="Appeler le +590 690 65 38 47" style="width: 52px; height: 52px; flex: none; border: 1px solid #327632; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
            <svg width="20" height="20" 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>
        </div>
      </div>
    </div>
  </sc-if>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;megaMenuOpen&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Révision&quot;},&quot;mobileMenuOpen&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Révision&quot;}}">
class Component extends DCLogic {
  state = { mega: null, mobile: null, cat: null };

  get megaOpen() { return this.state.mega ?? this.props.megaMenuOpen ?? false; }

  componentDidMount() {
    this._move = e => {
      const el = e.target.closest ? e.target.closest('.spot') : null;
      if (!el) return;
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      el.style.setProperty('--my', (e.clientY - r.top) + 'px');
    };
    document.addEventListener('pointermove', this._move, { passive: true });

    // Balayage des filets à l'entrée dans le champ — script fourni
    this._blocIo = new IntersectionObserver(entries => entries.forEach(e => {
      if (!e.isIntersecting) return;
      e.target.classList.remove('on');
      void e.target.offsetWidth;
      e.target.classList.add('on');
    }), { threshold: .25 });
    document.querySelectorAll('.bloc-vert').forEach(n => this._blocIo.observe(n));


    let queued = false;
    const check = () => {
      queued = false;
      const h = window.innerHeight;
      document.querySelectorAll('.rule').forEach(el => {
        const r = el.getBoundingClientRect();
        el.classList.toggle('is-on', r.top < h * 0.85 && r.bottom > h * 0.15);
      });
    };
    this._check = () => { if (!queued) { queued = true; requestAnimationFrame(check); } };
    window.addEventListener('scroll', this._check, { passive: true });
    window.addEventListener('resize', this._check);
    check();
    this._t1 = setTimeout(check, 400);
    this._t2 = setTimeout(check, 1400);
  }

  componentWillUnmount() {
    if (this._blocIo) this._blocIo.disconnect();
    if (this._move) document.removeEventListener('pointermove', this._move);
    if (this._check) {
      window.removeEventListener('scroll', this._check);
      window.removeEventListener('resize', this._check);
    }
    clearTimeout(this._t1);
    clearTimeout(this._t2);
  }

  renderVals() {
    const cats = {% endverbatim %}{{ cats|json_encode|raw }}{% verbatim %};
    const projets = {% endverbatim %}{{ projets|json_encode|raw }}{% verbatim %};
    // La première pastille est « Tous » et ne filtre rien. Les suivantes sont
    // les catégories réellement portées par les projets : aucune ne peut vider
    // la grille.
    const active = this.state.cat ?? cats[0];

    return {
      cats: cats.map(c => ({
        label: c,
        pressed: c === active ? 'true' : 'false',
        bg: c === active ? '#D7DA45' : '#1C4F1C',
        border: c === active ? '#D7DA45' : '#327632',
        color: c === active ? '#111410' : '#ACB7A5',
        pick: () => this.setState({ cat: c })
      })),

      // Une réalisation apparaît sous chacune de ses étiquettes.
      projets: active === cats[0]
        ? projets
        : projets.filter(p => (p.tags || []).indexOf(active) !== -1),

      megaOpen: this.megaOpen,
      openMega: () => { clearTimeout(this._megaTimer); this.setState({ mega: true }); },
      // Fermeture différée : laisse traverser l'espace entre le bouton et le panneau.
      closeMega: () => { clearTimeout(this._megaTimer); this._megaTimer = setTimeout(() => this.setState({ mega: false }), 250); },
      toggleMega: () => { clearTimeout(this._megaTimer); this.setState({ mega: !this.megaOpen }); },

      mobileOpen: this.state.mobile ?? this.props.mobileMenuOpen ?? false,
      toggleMobile: () => this.setState(s => ({ mobile: !(s.mobile ?? this.props.mobileMenuOpen ?? false) })),
      mobileSimple: [
        { label: 'Réalisations', href: "/nos-realisations/" },
        { label: 'Blog', href: "/blog/" }
      ],

      megaGroups: [
        { kicker: 'Résultat 01', title: 'Être crédible', items: [
          { name: 'Création de site', desc: 'Un site clair et rapide, qui donne envie de vous contacter.', href: "/creation-site-internet-guadeloupe/" },
          { name: 'Infographie', desc: 'Logo, supports, mise en page : une image cohérente partout.', href: "/infographie-en-guadeloupe/" },
          { name: 'Photographie', desc: 'Vos locaux, votre équipe, vos produits, photographiés sur place.', href: "/photographe-professionnel-guadeloupe/" }
        ]},
        { kicker: 'Résultat 02', title: 'Être trouvé', items: [
          { name: 'Référencement SEO', desc: 'Apparaître quand on cherche votre métier, dans votre commune.', href: "/referencement-seo-guadeloupe/" },
          { name: 'Google Ads', desc: 'Des campagnes ciblées quand il faut des résultats tout de suite.', href: "/referencement-google-adwords-guadeloupe/" },
          { name: 'Référencement local', desc: 'La fiche Google qui amène les appels et les visites.', href: "/referencement-local-guadeloupe/" }
        ]},
        { kicker: 'Résultat 03', title: 'Gagner du temps', items: [
          { name: 'Automatisation IA', desc: 'Ce qui se répète chaque semaine part en automatique.', href: "/automatisation-ia-guadeloupe/" },
          { name: 'Chatbot IA', desc: 'Répondre aux questions courantes 24h/24, dans votre ton.', href: "/creation-chatbot-ia-guadeloupe/" },
          { name: 'Financement Chèque TIC', desc: "Jusqu'à 80 % pris en charge", pill: 'Gratuit', href: "/financement-numerique-guadeloupe/" }
        ]}
      ],

      footerCols: [
        { title: 'Services', links: ['Création de site', 'Référencement SEO', 'Google Ads', 'Automatisation IA', 'Chatbot IA', 'Photographie'] },
        { title: 'Agence', links: ['Qui sommes-nous', 'Méthode', 'Réalisations', 'Blog'] }
      ]
    };
  }
}
</script>
{% endverbatim %}
{% endblock %}