{% extends 'base_dc.html.twig' %}
{% block dc %}
{% verbatim %}
<x-dc>
<helmet>
{% endverbatim %}{% if recaptcha_site_key %}<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async></script>{% endif %}{% verbatim %}
<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; } }

  /* DEVIS — conversation, composant repris tel quel */
  .devis-anim { width:100%; height:auto; display:block; }
  @keyframes devMsg   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  @keyframes devArrow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
  @keyframes devPulse { 0%,100%{opacity:.8} 50%{opacity:1} }
  @keyframes devSlide { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
  @media(prefers-reduced-motion:reduce){
    .devis-anim *{ animation:none!important; opacity:1!important; }
  }
  @keyframes devDown { 0%,100% { transform: translateY(0) } 50% { transform: translateY(7px) } }
  .dev-arrow { animation: devDown 1.8s ease-in-out infinite; }
  .dev-pill { transition: background .25s ease, color .25s ease, border-color .25s ease; cursor: pointer; }
  .dev-pill:hover { border-color: #D7DA45; color: #F0F2EA; }
  .dev-field { width: 100%; padding: 15px 18px; border-radius: 4px; border: 1px solid #327632; background: #111410; color: #FFFFFF; font-family: Manrope, system-ui, sans-serif; font-size: 15px; }
  .dev-field::placeholder { color: rgba(255,255,255,.5); }
  .dev-field:focus { outline: none; border-color: #D7DA45; }
  .dev-field.err { border-color: #D7DA45; }
  .dev-pills { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 900px) {
    .dev-hero { grid-template-columns: 1fr !important; }
    .dev-anim-col { order: -1; }
    .dev-2col { grid-template-columns: 1fr !important; }
    .dev-pills { display: grid; grid-template-columns: 1fr 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { .dev-arrow { animation: 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 -->
  <section class="hero dev-hero wrap" style="max-width: 1440px; margin: 0 auto; padding: 44px 80px 60px; min-height: 80vh; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2;">
    <div>
      <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>
        {% endverbatim %}{{ page.block('hero.eyebrow', 'Demande de devis')|raw }}{% verbatim %}
      </div>
      <h1 class="h1" style="font-family: 'Instrument Serif', serif; font-size: 58px; line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 20px; text-wrap: pretty;">{% endverbatim %}{{ page.block('hero.h1', 'Parlons de <em style="font-style: italic; color: #D7DA45;">votre projet</em>.')|raw }}{% verbatim %}</h1>
      <p style="font-size: 17px; line-height: 1.62; color: #ACB7A5; max-width: 520px; margin: 0 0 30px; text-wrap: pretty;">{% endverbatim %}{{ page.block('hero.intro', 'Trois questions, deux minutes. Réponse sous 48 heures ouvrées avec une estimation claire et un premier conseil.')|raw }}{% verbatim %}</p>
      <div style="display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 32px;">
        <sc-for list="{{ chiffres }}" as="c" hint-placeholder-count="3">
          <div style="display: flex; align-items: baseline; gap: 9px; padding-left: {{ c.pad }}; border-left: {{ c.sep }};">
            <span style="font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1; color: #D7DA45;">{{ c.n }}</span>
            <span style="font-size: 13px; color: #ACB7A5;">{{ c.label }}</span>
          </div>
        </sc-for>
      </div>
      <div style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px;">
        <sc-for list="{{ etapesHero }}" as="e" hint-placeholder-count="3">
          <div style="display: flex; align-items: center; gap: 16px;">
            <span style="width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid {{ e.color }}; color: {{ e.color }}; font-family: 'Instrument Serif', serif; font-size: 17px; display: flex; align-items: center; justify-content: center;">{{ e.n }}</span>
            <span style="font-family: Manrope, system-ui, sans-serif; font-size: 15.5px; color: #F0F2EA;">{{ e.label }}</span>
          </div>
        </sc-for>
      </div>
      <div style="display: flex; align-items: center; gap: 12px; font-family: Manrope, system-ui, sans-serif; font-size: 13px; color: #ACB7A5;">
        <svg class="dev-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#D7DA45" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5 V19"></path><path d="M6 13 L12 19 L18 13"></path></svg>
        Le formulaire est juste en dessous
      </div>
    </div>
    <div class="dev-anim-col">
      <svg class="devis-anim" viewBox="0 0 480 520" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="dvScreen"><rect x="66" y="76" width="268" height="380" rx="4"/></clipPath>
      </defs>

      <!-- ── TÉLÉPHONE ── -->
      <rect x="52" y="40" width="296" height="460" rx="28" fill="#1C4F1C" stroke="#327632" stroke-width="1"/>
      <rect x="66" y="56" width="268" height="420" rx="18" fill="#111410"/>
      <!-- Notch -->
      <rect x="142" y="56" width="80" height="16" rx="8" fill="#1C4F1C"/>
      <circle cx="206" cy="64" r="4" fill="#276327"/>
      <!-- Home bar -->
      <rect x="160" y="462" width="60" height="4" rx="2" fill="#276327"/>
      <!-- Boutons côtés -->
      <rect x="50" y="160" width="4" height="36" rx="2" fill="#276327"/>
      <rect x="50" y="204" width="4" height="36" rx="2" fill="#276327"/>
      <rect x="424" y="180" width="4" height="50" rx="2" fill="#276327"/>

      <!-- Header WhatsApp -->
      <rect x="66" y="76" width="268" height="52" fill="#1C4F1C" rx="4"/>
      <!-- Avatar SALAM -->
      <circle cx="92" cy="102" r="16" fill="#276327" stroke="#327632" stroke-width="0.8"/>
      <text x="92" y="107" text-anchor="middle" fill="#D7DA45" font-size="10" font-weight="700">S</text>
      <!-- Nom + statut -->
      <text x="114" y="98" fill="#F0F2EA" font-size="11" font-weight="600">SALAM</text>
      <circle cx="114" cy="108" r="3" fill="#79B63B"/>
      <text x="122" y="111" fill="#79B63B" font-size="9">en ligne</text>
      <!-- Icônes header -->
      <circle cx="302" cy="102" r="11" fill="none" stroke="#ACB7A5" stroke-width="1"/>
      <path d="M 297 102 Q 297 98 301 96 L 305 99 Q 308 97 311 98 Q 313 100 311 102 L 309 104 Q 310 107 308 108 L 305 106 Q 302 108 300 107 L 297 104 Z"
            fill="none" stroke="#ACB7A5" stroke-width="1" stroke-linecap="round"/>
      <circle cx="326" cy="95" r="2" fill="#ACB7A5"/>
      <circle cx="326" cy="102" r="2" fill="#ACB7A5"/>
      <circle cx="326" cy="109" r="2" fill="#ACB7A5"/>

      <!-- Zone conversation -->
      <g clip-path="url(#dvScreen)">
        <rect x="66" y="128" width="268" height="328" fill="#0C0F0C"/>

        <!-- Date -->
        <rect x="154" y="134" width="88" height="16" rx="8" fill="#1C4F1C"/>
        <text x="198" y="146" text-anchor="middle" fill="#ACB7A5" font-size="8">Aujourd'hui</text>

        <!-- Message prospect 1 -->
        <g style="animation:devMsg .4s .5s both;opacity:0">
          <rect x="76" y="158" width="198" height="44" rx="10" fill="#276327"/>
          <polygon points="76,190 88,190 76,202" fill="#276327"/>
          <text x="86" y="174" fill="#F0F2EA" font-size="10">Bonjour, je cherche à créer</text>
          <text x="86" y="188" fill="#F0F2EA" font-size="10">un site pour mon restaurant.</text>
          <text x="262" y="196" text-anchor="end" fill="#ACB7A5" font-size="8">09:14 ✓</text>
        </g>

        <!-- Dots typing SALAM -->
        <g style="animation:devMsg .3s 1.4s both;opacity:0">
          <rect x="176" y="212" width="52" height="26" rx="10" fill="#1C4F1C" stroke="#276327" stroke-width="0.5"/>
          <circle cx="192" cy="225" r="4" fill="#ACB7A5">
            <animate attributeName="cy" values="225;219;225" dur="1s" repeatCount="3" begin="1.4s" calcMode="ease"/>
          </circle>
          <circle cx="206" cy="225" r="4" fill="#ACB7A5">
            <animate attributeName="cy" values="225;219;225" dur="1s" repeatCount="3" begin="1.7s" calcMode="ease"/>
          </circle>
          <circle cx="220" cy="225" r="4" fill="#ACB7A5">
            <animate attributeName="cy" values="225;219;225" dur="1s" repeatCount="3" begin="2s" calcMode="ease"/>
          </circle>
        </g>

        <!-- Réponse SALAM 1 -->
        <g style="animation:devMsg .4s 2.8s both;opacity:0">
          <rect x="80" y="210" width="218" height="44" rx="10" fill="#1C4F1C" stroke="#276327" stroke-width="0.8"/>
          <polygon points="324,242 336,242 336,230" fill="#1C4F1C"/>
          <text x="92" y="226" fill="#F0F2EA" font-size="10">Bonjour ! Quel type de site</text>
          <text x="92" y="240" fill="#F0F2EA" font-size="10">souhaitez-vous exactement ?</text>
          <text x="290" y="248" text-anchor="end" fill="#D7DA45" font-size="8">09:14 ✓✓</text>
        </g>

        <!-- Message prospect 2 -->
        <g style="animation:devMsg .4s 3.8s both;opacity:0">
          <rect x="76" y="264" width="212" height="44" rx="10" fill="#276327"/>
          <polygon points="76,296 88,296 76,308" fill="#276327"/>
          <text x="86" y="280" fill="#F0F2EA" font-size="10">Vitrine avec les menus</text>
          <text x="86" y="294" fill="#F0F2EA" font-size="10">et un système de réservation.</text>
          <text x="280" y="302" text-anchor="end" fill="#ACB7A5" font-size="8">09:15 ✓</text>
        </g>

        <!-- Réponse SALAM finale (bulle citron) -->
        <g style="animation:devMsg .5s 5s both;opacity:0">
          <rect x="76" y="318" width="244" height="56" rx="10" fill="#D7DA45"/>
          <polygon points="326,350 338,350 338,336" fill="#D7DA45"/>
          <text x="88" y="334" fill="#111410" font-size="10" font-weight="600">Je vous rappelle sous 48h</text>
          <text x="88" y="350" fill="#111410" font-size="10">avec un devis gratuit adapté</text>
          <text x="88" y="366" fill="#111410" font-size="10">à votre projet.</text>
          <text x="312" y="368" text-anchor="end" fill="#333" font-size="8">09:15 ✓✓</text>
        </g>

        <!-- Barre saisie bas -->
        <rect x="66" y="428" width="268" height="28" fill="#1C4F1C"/>
        <rect x="74" y="434" width="192" height="16" rx="8" fill="#0C0F0C" stroke="#276327" stroke-width="0.5"/>
        <text x="84" y="446" fill="#327632" font-size="9">Message</text>
        <circle cx="322" cy="442" r="10" fill="#D7DA45"/>
        <polygon points="316,442 325,438 325,446" fill="#111410"/>
      </g>

      </svg>
    </div>
  </section>

  <!-- BLOC WHATSAPP -->
  <section class="bloc-vert" style="position: relative; z-index: 2;">
    <div class="wrap" style="max-width: 1440px; margin: 0 auto; padding: 74px 80px; text-align: center;">
      <h2 class="h2" style="font-family: 'Instrument Serif', serif; font-size: 40px; line-height: 1.1; margin: 0 0 26px;">{% endverbatim %}{{ page.block('contact.titre', 'Vous préférez échanger directement ?')|raw }}{% verbatim %}</h2>
      <a href="{% endverbatim %}{{ settings('whatsapp_url', 'https://wa.me/590690653847') }}{% verbatim %}" target="_blank" rel="noopener" style="display: inline-block; padding: 16px 30px; border-radius: 4px; background: #D7DA45; border: 1px solid #D7DA45; color: #111410; font-family: Manrope, system-ui, sans-serif; font-size: 15.5px; font-weight: 700;">{% endverbatim %}{{ page.block('contact.bouton', 'Discuter sur WhatsApp →')|raw }}{% verbatim %}</a>
      <div style="font-family: Manrope, system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; color: #C8D2C0; margin-top: 18px;">{% endverbatim %}{{ page.block('contact.note', 'Ou remplissez le formulaire ci-dessous — trois questions, deux minutes, et Maxime revient vers vous sous 48 h ouvrées.')|raw }}{% verbatim %}</div>
    </div>
  </section>

  <!-- FORMULAIRE -->
  <section class="wrap" style="max-width: 720px; margin: 0 auto; padding: 72px 80px 80px; position: relative; z-index: 2;">
    <div style="background: #1C4F1C; border: 1px solid #327632; border-radius: 10px; padding: 40px;">
      <sc-if value="{{ sent }}" hint-placeholder-val="{{ false }}">
        <div style="text-align: center; padding: 20px 0;">
          <svg width="54" height="54" viewBox="0 0 48 48" fill="none" stroke="#D7DA45" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M24 6 a18 18 0 1 0 0.01 0 Z"></path><path d="M15 24 L21.5 30.5 L33 18"></path></svg>
          <div style="font-family: 'Instrument Serif', serif; font-size: 32px; line-height: 1.18; color: #F0F2EA; margin: 22px 0 12px;">Votre demande est envoyée.</div>
          <div style="font-family: Manrope, system-ui, sans-serif; font-size: 15px; line-height: 1.66; color: #C8D2C0; max-width: 460px; margin: 0 auto 22px;">Maxime vous contacte sous 48 h ouvrées au numéro indiqué. En attendant, n'hésitez pas à consulter nos ressources.</div>
          <a href="/blog/" style="font-family: Manrope, system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #D7DA45;">→ Lire le blog</a>
        </div>
      </sc-if>

      <sc-if value="{{ formOpen }}" hint-placeholder-val="{{ true }}">
        <div>
          <!-- STEPPER -->
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 34px;">
            <sc-for list="{{ stepper }}" as="s" hint-placeholder-count="3">
              <div style="display: flex; align-items: center; gap: 10px; flex: {{ s.flex }};">
                <span style="width: 28px; height: 28px; flex: none; border-radius: 50%; background: {{ s.bg }}; border: 1px solid {{ s.border }}; color: {{ s.color }}; font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;">{{ s.n }}</span>
                <span style="flex: 1; height: 1px; background: {{ s.line }};"></span>
              </div>
            </sc-for>
          </div>

          <!-- ÉTAPE 1 -->
          <sc-if value="{{ isStep1 }}" hint-placeholder-val="{{ true }}">
            <div>
              <h2 style="font-family: 'Instrument Serif', serif; font-size: 30px; line-height: 1.16; color: #F0F2EA; margin: 0 0 10px;">{% endverbatim %}{{ page.block('etape_1.titre', 'Quels services vous intéressent ?')|raw }}{% verbatim %}</h2>
              <div style="font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin: 0 0 22px;">Vous pouvez en sélectionner plusieurs.</div>
              <div class="dev-pills">
                <sc-for list="{{ services }}" as="s" hint-placeholder-count="8">
                  <span class="dev-pill" onClick="{{ s.pick }}" style="padding: 11px 18px; border-radius: 999px; background: {{ s.bg }}; border: 1px solid {{ s.border }}; color: {{ s.color }}; font-family: Manrope, system-ui, sans-serif; font-size: 13.5px; font-weight: {{ s.weight }}; text-align: center;">{{ s.label }}</span>
                </sc-for>
              </div>
              <div style="display: flex; justify-content: flex-end; margin-top: 34px;">
                <button onClick="{{ next }}" disabled="{{ nextDisabled }}" style="padding: 15px 28px; border: none; border-radius: 4px; background: #D7DA45; color: #111410; font-family: Manrope, system-ui, sans-serif; font-size: 15px; font-weight: 700; opacity: {{ nextOpacity }}; cursor: {{ nextCursor }};">Suivant →</button>
              </div>
            </div>
          </sc-if>

          <!-- ÉTAPE 2 -->
          <sc-if value="{{ isStep2 }}" hint-placeholder-val="{{ false }}">
            <div>
              <h2 style="font-family: 'Instrument Serif', serif; font-size: 30px; line-height: 1.16; color: #F0F2EA; margin: 0 0 28px;">{% endverbatim %}{{ page.block('etape_2.titre', 'Parlez-nous de votre contexte.')|raw }}{% verbatim %}</h2>

              <h3 style="font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.2; color: #F0F2EA; margin: 0 0 18px;">{{ step2Title }}</h3>
              <div class="dev-pills">
                <sc-for list="{{ step2Options }}" as="o" hint-placeholder-count="4">
                  <span class="dev-pill" onClick="{{ o.pick }}" style="padding: 11px 18px; border-radius: 999px; background: {{ o.bg }}; border: 1px solid {{ o.border }}; color: {{ o.color }}; font-family: Manrope, system-ui, sans-serif; font-size: 13.5px; font-weight: {{ o.weight }}; text-align: center;">{{ o.label }}</span>
                </sc-for>
              </div>

              <h3 style="font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.2; color: #F0F2EA; margin: 32px 0 18px;">Votre délai idéal ?</h3>
              <div class="dev-pills">
                <sc-for list="{{ delais }}" as="d" hint-placeholder-count="3">
                  <span class="dev-pill" onClick="{{ d.pick }}" style="padding: 11px 18px; border-radius: 999px; background: {{ d.bg }}; border: 1px solid {{ d.border }}; color: {{ d.color }}; font-family: Manrope, system-ui, sans-serif; font-size: 13.5px; font-weight: {{ d.weight }}; text-align: center;">{{ d.label }}</span>
                </sc-for>
              </div>

              <div style="height: 1px; background: #327632; margin: 34px 0;"></div>

              <h3 style="font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.2; color: #F0F2EA; margin: 0 0 18px;">{% endverbatim %}{{ page.block('etape_2.coordonnees_titre', 'Vos coordonnées')|raw }}{% verbatim %}</h3>
              <div class="dev-2col" style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px;">
                <div>
                  <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">Prénom *</label>
                  <input type="text" class="dev-field" placeholder="Prénom" value="{{ prenom }}" onInput="{{ onPrenom }}">
                </div>
                <div>
                  <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">Nom</label>
                  <input type="text" class="dev-field" placeholder="Nom" value="{{ nom }}" onInput="{{ onNom }}">
                </div>
              </div>
              <div style="margin-top: 14px;">
                <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">On vous rappelle ici</label>
                <input type="tel" class="dev-field" placeholder="+590 690 00 00 00" value="{{ phone }}" onInput="{{ onPhone }}">
              </div>
              <div style="margin-top: 14px;">
                <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">Pour recevoir le devis par écrit</label>
                <input type="email" class="dev-field" placeholder="votre@email.fr" value="{{ email }}" onInput="{{ onEmail }}">
              </div>
              <sc-if value="{{ emailStarted }}" hint-placeholder-val="{{ false }}">
                <div style="margin-top: 14px;">
                  <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">Confirmez votre adresse *</label>
                  <div style="position: relative;">
                    <input type="email" class="dev-field {{ confirmCls }}" placeholder="votre@email.fr" value="{{ email2 }}" onInput="{{ onEmail2 }}">
                    <sc-if value="{{ emailMatch }}" hint-placeholder-val="{{ false }}">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#79B63B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; right: 16px; top: 50%; transform: translateY(-9px);" aria-hidden="true"><path d="M5 13 L10 18 L19 7"></path></svg>
                    </sc-if>
                  </div>
                  <sc-if value="{{ emailMismatch }}" hint-placeholder-val="{{ false }}">
                    <div style="font-family: Manrope, system-ui, sans-serif; font-size: 11px; color: #D7DA45; margin-top: 7px;">Les adresses ne correspondent pas</div>
                  </sc-if>
                </div>
              </sc-if>
              <div style="margin-top: 14px;">
                <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">Détails supplémentaires (facultatif)</label>
                <textarea rows="4" class="dev-field" placeholder="Décrivez votre projet, vos contraintes, vos inspirations..." value="{{ message }}" onInput="{{ onMessage }}"></textarea>
              </div>
              <div style="margin-top: 14px;">
                <label style="display: block; font-family: Manrope, system-ui, sans-serif; font-size: 12px; color: #ACB7A5; margin-bottom: 7px;">Joindre un brief, logo ou maquette (facultatif)</label>
                <label onDrop="{{ onDrop }}" onDragOver="{{ onDragOver }}" onDragLeave="{{ onDragLeave }}" style="display: flex; align-items: center; gap: 14px; padding: 22px; border: 1px dashed {{ dropBorder }}; border-radius: 6px; background: {{ dropBg }}; cursor: pointer;">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#D7DA45" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17 V5"></path><path d="M7 10 L12 5 L17 10"></path><path d="M5 19 H19"></path></svg>
                  <span style="font-family: Manrope, system-ui, sans-serif; font-size: 12px; line-height: 1.6; color: #ACB7A5;">Glissez vos fichiers ici ou cliquez pour parcourir — Formats acceptés : JPG, PDF, DOC, ZIP — 10 Mo max par fichier</span>
                  <input type="file" accept=".jpg,.jpeg,.gif,.doc,.docx,.pdf,.zip" multiple="" style="display: none;" onChange="{{ onFiles }}">
                </label>
                <sc-if value="{{ hasFiles }}" hint-placeholder-val="{{ false }}">
                  <div style="margin-top: 10px; display: flex; flex-direction: column; gap: 6px;">
                    <sc-for list="{{ fileList }}" as="f" hint-placeholder-count="2">
                      <div style="display: flex; align-items: center; gap: 8px; font-family: Manrope, system-ui, sans-serif; font-size: 12.5px; color: #F0F2EA;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#79B63B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2 H6 a2 2 0 0 0-2 2 v16 a2 2 0 0 0 2 2 h12 a2 2 0 0 0 2-2 V8 Z"></path><path d="M14 2 v6 h6"></path></svg>
                        <span>{{ f.name }}</span>
                        <span style="color: #ACB7A5;">{{ f.size }}</span>
                      </div>
                    </sc-for>
                  </div>
                </sc-if>
              </div>

              <div class="g-recaptcha" data-sitekey="{% endverbatim %}{{ recaptcha_site_key }}{% verbatim %}" data-size="invisible" data-action="devis"></div>
              <p style="margin: 14px 0 0; font-family: Manrope, system-ui, sans-serif; font-size: 11.5px; line-height: 1.5; color: #7E8C79;">Ce site est protégé par reCAPTCHA — <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" style="color: #ACB7A5; text-decoration: underline;">Politique de confidentialité</a> · <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer" style="color: #ACB7A5; text-decoration: underline;">Conditions d'utilisation</a></p>

              <sc-if value="{{ hasError }}" hint-placeholder-val="{{ false }}">
                <div role="alert" style="margin-top: 18px; padding: 13px 16px; border: 1px solid #D7DA45; border-radius: 6px; background: rgba(215,218,69,.08); font-family: Manrope, system-ui, sans-serif; font-size: 13.5px; color: #F0F2EA;">{{ error }}</div>
              </sc-if>

              <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 30px; flex-wrap: wrap;">
                <span onClick="{{ back }}" style="padding: 15px 26px; border-radius: 4px; border: 1px solid #327632; color: #F0F2EA; font-family: Manrope, system-ui, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer;">← Retour</span>
                <div style="text-align: right;">
                  <span onClick="{{ send }}" style="display: inline-block; padding: 18px 40px; border-radius: 6px; background: #D7DA45; color: #111410; font-family: Manrope, system-ui, sans-serif; font-size: 16.5px; font-weight: 700; opacity: {{ sendOpacity }}; cursor: {{ sendCursor }};">{{ sendLabel }}</span>
                  <div style="font-family: Manrope, system-ui, sans-serif; font-size: 11px; color: #ACB7A5; margin-top: 12px;">Réponse garantie sous 48 h ouvrées · Aucun engagement</div>
                  <div style="font-family: Manrope, system-ui, sans-serif; font-size: 10px; color: #509450; margin-top: 6px;">
                    Protégé par reCAPTCHA — <a href="https://policies.google.com/privacy" target="_blank" rel="noopener" style="color: #509450;">Confidentialité</a> · <a href="https://policies.google.com/terms" target="_blank" rel="noopener" style="color: #509450;">Conditions</a>
                  </div>
                </div>
              </div>
            </div>
          </sc-if>
        </div>
      </sc-if>
    </div>
  </section>

  <div class="rule"></div>

  <!-- FAQ COURTE -->
  <section class="wrap" style="max-width: 1440px; margin: 0 auto; padding: 90px 80px 100px; position: relative; z-index: 2;">
    <h2 class="h2" style="font-family: 'Instrument Serif', serif; font-size: 44px; line-height: 1.08; margin: 0 0 40px;">{% endverbatim %}{{ page.block('faq_section.titre', 'Questions fréquentes')|raw }}{% verbatim %}</h2>
    <div class="faq g2" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px;">
      <sc-for list="{{ faq }}" as="q" hint-placeholder-count="3">
        <details>
          <summary>
            {{ q.q }}
            <span class="arw"></span>
          </summary>
          <div class="ans">{{ q.a }}</div>
        </details>
      </sc-for>
    </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, step: 1, services: [], situation: null, delai: null, prenom: '', nom: '', phone: '', message: '', files: [], dragOver: false, email: '', email2: '', sent: false, sending: false, error: 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 st = this.state;
    const pill = (active) => ({
      bg: active ? '#D7DA45' : '#111410',
      border: active ? '#D7DA45' : '#327632',
      color: active ? '#111410' : '#ACB7A5',
      weight: active ? '600' : '500'
    });

    const SERVICES = ['Création de site', 'E-commerce', 'Application mobile', 'SEO', 'Google Ads', 'Chatbot IA', 'Automatisation IA', 'Autre'];
    const picked = st.services || [];
    const has = s => picked.indexOf(s) > -1;

    let step2Title = 'Votre budget approximatif ?';
    let step2Opts = ['Moins de 1 000 €', '1 000–3 000 €', '3 000–8 000 €', '8 000 € +'];
    if (has('Création de site') || has('E-commerce')) {
      step2Title = 'Vous avez déjà un site internet ?';
      step2Opts = ['Non', 'Oui, à refaire', 'Oui, à améliorer'];
    } else if (has('SEO')) {
      step2Title = 'Votre site est en ligne depuis…';
      step2Opts = ['Moins d\'un an', '1 à 3 ans', 'Plus de 3 ans'];
    }

    const step2Done = !!st.situation && !!st.delai;
    const emailStarted = (st.email || '').length > 0;
    const emailMatch = emailStarted && st.email === st.email2;
    const emailMismatch = emailStarted && (st.email2 || '').length > 0 && st.email !== st.email2;
    const canSend = step2Done && emailStarted && emailMatch && !st.sending;

    const RCK = {% endverbatim %}'{{ recaptcha_site_key|e('js') }}'{% verbatim %};
    const files = st.files || [];
    const fmtSize = (b) => b > 1048576 ? (b / 1048576).toFixed(1) + ' Mo' : Math.max(1, Math.round(b / 1024)) + ' Ko';

    return {
      sent: st.sent,
      formOpen: !st.sent,
      isStep1: !st.sent && st.step === 1,
      isStep2: !st.sent && st.step === 2,

      stepper: [1, 2].map(n => ({
        n: n,
        flex: n === 2 ? '0 0 auto' : '1',
        bg: st.step === n ? '#D7DA45' : (st.step > n ? '#79B63B' : '#111410'),
        border: st.step === n ? '#D7DA45' : (st.step > n ? '#79B63B' : '#327632'),
        color: st.step >= n ? '#111410' : '#ACB7A5',
        line: n === 2 ? 'transparent' : (st.step > n ? '#79B63B' : '#327632')
      })),

      services: SERVICES.map(s => Object.assign({
        label: s,
        pick: () => this.setState(prev => {
          const cur = prev.services || [];
          return { services: cur.indexOf(s) > -1 ? cur.filter(x => x !== s) : cur.concat([s]), situation: null };
        })
      }, pill(has(s)))),

      step2Title: step2Title,
      step2Options: step2Opts.map(o => Object.assign({ label: o, pick: () => this.setState({ situation: o }) }, pill(st.situation === o))),
      delais: ['Urgent (< 1 mois)', 'Flexible (1–3 mois)', 'Pas encore défini'].map(d => Object.assign({ label: d, pick: () => this.setState({ delai: d }) }, pill(st.delai === d))),

      email: st.email,
      email2: st.email2,
      emailStarted: emailStarted,
      emailMatch: emailMatch,
      emailMismatch: emailMismatch,
      confirmCls: emailMismatch ? 'err' : '',
      onEmail: e => this.setState({ email: e.target.value }),
      onEmail2: e => this.setState({ email2: e.target.value }),

      prenom: st.prenom,
      nom: st.nom,
      phone: st.phone,
      message: st.message,
      onPrenom: e => this.setState({ prenom: e.target.value }),
      onNom: e => this.setState({ nom: e.target.value }),
      onPhone: e => this.setState({ phone: e.target.value }),
      onMessage: e => this.setState({ message: e.target.value }),
      onFiles: e => this.setState({ files: Array.prototype.slice.call(e.target.files || []) }),
      onDragOver: e => { e.preventDefault(); if (!st.dragOver) this.setState({ dragOver: true }); },
      onDragLeave: e => { e.preventDefault(); if (st.dragOver) this.setState({ dragOver: false }); },
      onDrop: e => {
        e.preventDefault();
        const fs = Array.prototype.slice.call((e.dataTransfer && e.dataTransfer.files) || []);
        this.setState({ dragOver: false, files: (st.files || []).concat(fs) });
      },
      dropBorder: st.dragOver ? '#D7DA45' : '#327632',
      dropBg: st.dragOver ? '#1C4F1C' : '#111410',
      hasFiles: files.length > 0,
      fileList: files.map(f => ({ name: f.name, size: fmtSize(f.size) })),

      hasError: !!st.error,
      error: st.error || '',
      sendLabel: st.sending ? 'Envoi en cours…' : 'Envoyer ma demande',

      nextOpacity: picked.length ? '1' : '.4',
      // La chaine vide vaut faux, 'disabled' vaut vrai : c'est ainsi que
      // React lit un attribut booleen passe en texte.
      nextDisabled: picked.length ? '' : 'disabled',
      nextCursor: picked.length ? 'pointer' : 'not-allowed',
      sendOpacity: canSend ? '1' : '.4',
      sendCursor: canSend ? 'pointer' : 'not-allowed',
      next: () => {
        if (st.step === 1 && !picked.length) return;
        this.setState({ step: 2 });
      },
      back: () => this.setState({ step: Math.max(1, st.step - 1) }),
      send: () => {
        if (!canSend || st.sending || this._sending) return;
        this._sending = true;
        const fd = new FormData();
        (st.services || []).forEach(s => fd.append('services[]', s));
        fd.append('name', ((st.prenom || '') + ' ' + (st.nom || '')).trim());
        fd.append('email', st.email || '');
        fd.append('email_confirm', st.email2 || '');
        fd.append('phone', st.phone || '');
        fd.append('message', st.message || '');
        fd.append('situation', st.situation || '');
        fd.append('delai', st.delai || '');
        (st.files || []).forEach((f, i) => fd.append('file_' + i, f, f.name));
        const post = (token) => {
          fd.append('recaptcha_token', token || '');
          this.setState({ sending: true, error: null });
          fetch('/demande-de-devis/', { method: 'POST', body: fd })
            .then(r => r.json().then(d => ({ ok: r.ok, d })).catch(() => ({ ok: false, d: {} })))
            .then(({ d }) => {
              this._sending = false;
              if (d && d.status === 'sent') { this.setState({ sent: true, sending: false }); }
              else { this.setState({ sending: false, error: (d && (d.message || (d.errors && Object.values(d.errors)[0]))) || 'Une erreur est survenue. Réessayez ou appelez le +590 690 65 38 47.' }); }
            })
            .catch(() => { this._sending = false; this.setState({ sending: false, error: 'Erreur réseau. Vérifiez votre connexion et réessayez.' }); });
        };
        if (RCK && window.grecaptcha && window.grecaptcha.execute) {
          try { window.grecaptcha.ready(() => window.grecaptcha.execute(RCK, { action: 'devis' }).then(post).catch(() => post(''))); }
          catch (e) { post(''); }
        } else { post(''); }
      },

      chiffres: [
        { n: '2005', label: 'depuis', pad: '0px', sep: 'none' },
        { n: '258', label: 'projets livrés', pad: '22px', sep: '1px solid #D7DA45' },
        { n: '48h', label: 'délai', pad: '22px', sep: '1px solid #D7DA45' }
      ],

      etapesHero: [
        { n: '1', label: 'Envoyez votre demande', color: '#D7DA45' },
        { n: '2', label: 'Maxime analyse votre projet', color: '#79B63B' },
        { n: '3', label: 'Devis gratuit sous 48h ouvrés', color: '#1BA09A' }
      ],

      faq: [
        { q: 'Est-ce vraiment gratuit ?', a: 'Oui. L\'analyse de votre projet, le conseil et le devis sont gratuits et sans engagement. SALAM ne facture que si vous décidez de démarrer un projet ensemble.' },
        { q: 'Pourquoi demandez-vous mon téléphone ?', a: 'Parce que 3 minutes au téléphone permettent de comprendre votre projet bien mieux qu\'un échange d\'emails. Maxime vous rappelle directement, à l\'heure qui vous convient.' },
        { q: 'Combien de temps faut-il pour recevoir une réponse ?', a: '48 heures ouvrées maximum. En pratique, la plupart des demandes reçoivent une réponse le jour même.' }
      ],

      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 %}