Project Location & Land Details Form Section

<div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6"><!-- Localisation du projet --><div class="field" data-field-id="c2-localisation" data-status="warning">
    <div class="text-sm font-medium mb-3 text-neutral-900">Localisation du projet</div>
    
    <!-- Adresse du projet -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
      <div class="sm:col-span-2">
        <label class="text-[13px] text-neutral-500">Rue et numéro</label>
        <input id="loc-rue" type="text" value="Sol Paradis n° 2A" class="mt-1 w-full rounded-md border p-2.5 text- de la rue et numéro">
      </div>
      <div class="">
        <label class="text-[13px] text-neutral-500">Code postal</label>
        <input id="loc-cp" type="text" value="4190" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Code postal">
      </div>
      <div class="sm:col-span-2">
        <label class="text-[13px] text-neutral-500">Commune</label>
        <input id="loc-commune" type="text" value="Ferrières" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Nom de la commune">
      </div>
      <div class="">
        <label class="text-[13px] text-neutral-500">Province</label>
        <select id="loc-province" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
          <option value="">Sélectionner...</option>
          <option value="brabant-wallon">Brabant wallon</option>
          <option value="hainaut">Hainaut</option>
          <option value="liege" selected="">Liège</option>
          <option value="luxembourg">Luxembourg</option>
          <option value="namur">Namur</option>
        </select>
      </div>
    </div>

    <!-- Références cadastrales -->
    
  </div><!-- Parcelles: liste simple --><div class="field" data-field-id="c2-artificialisation" data-status="warning">
  <div class="flex items-center justify-between">
    <div class="text-sm font-medium text-neutral-900">Parcelles cadastrales — Liste confirmée</div>
    <button id="btnAddParcelle" class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-3.5 h-3.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg> Ajouter une parcelle
    </button>
  </div>
  <div class="mt-3 rounded-lg border overflow-hidden border-neutral-200">
    <div class="hidden sm:grid sm:grid-cols-[140px,120px,90px,150px,160px,160px,120px,100px] border-b text-[12px] bg-neutral-50 border-neutral-200 text-neutral-600">
      <div class="px-3 py-2">Commune</div>
      <div class="px-3 py-2">Division</div>
      <div class="px-3 py-2">Section</div>
      <div class="px-3 py-2">N° et exposant</div>
      <div class="px-3 py-2">Superficie cadastrée (m²)</div>
      <div class="px-3 py-2">Nature cadastrale</div>
      <div class="px-3 py-2">Propriétaire</div>
      <div class="pt-2 pr-3 pb-2 pl-3">Propriétaire</div>
    </div>
    <div id="parcellesRows" class="divide-y divide-neutral-200">
      <div class="grid grid-cols-1 sm:grid-cols-[140px,120px,90px,150px,160px,160px,120px,100px] gap-2 sm:gap-0 p-3 sm:p-0 text-[12px] bg-white border-b border-neutral-200">
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">Commune: </span>Ferrières
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">Division: </span>3
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">Section: </span>A
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">N° et exposant: </span>0685A002
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">Superficie: </span>1 220
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">Nature: </span>Constructions artificielles hors sol
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">Propriétaire: </span>Dupont Marie
        </div>
        <div class="sm:px-3 sm:py-2">
          <span class="text-neutral-500 sm:hidden">À vous ?: </span>
          <span class="inline-flex rounded-md border overflow-hidden border-neutral-200" data-toggle-group="proprietaire">
  <button class="seg-btn px-3 py-1.5 text-sm text-white bg-[#649DAD]" data-value="oui" data-state="on">Oui</button>
  <button class="seg-btn px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50" data-value="non" data-state="off">Non</button>
</span>
        </div>
      </div>
    </div>
    <div class="text-[12px] text-neutral-600 bg-neutral-50 border-neutral-200 border-t pt-2 pr-3 pb-2 pl-3">
      Non cadastré — Superficie non cadastrée (m²)
      <input id="non-cadastré" type="number" min="0" class="ml-2 w-40 rounded-md border px-2 py-1 text-[12px] border-neutral-200 bg-white">
    </div>
  </div>
  <div class="text-[12px] text-neutral-600 mt-2">
    Nature cadastrale: occupation du sol telle que documentée par l'Administration générale de la Documentation patrimoniale (SPF Finances).
  </div>
</div><!-- Pleine terre (en lecture seule, issue des polygones) --><div class="field" data-field-id="c2-pleine-terre" data-status="warning">
    <div class="text-sm font-medium mb-2 text-neutral-900">Pleine terre (valeurs issues du calcul automatique des polygones des parcelles)</div>
    <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
      <div>
        <label class="text-[13px] text-neutral-500">Superficie du terrain (a)</label>
        <input id="pt-a" type="number" min="0" readonly="" class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-neutral-50" placeholder="m²">
      </div>
      <div class="">
        <label class="text-[13px] text-neutral-500">Pleine terre existante (x)</label>
        <input id="pt-x" type="number" min="0" readonly="" class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-neutral-50" placeholder="m²">
      </div>
      <div class="">
        <label class="text-[13px] text-neutral-500">Pleine terre projetée (y)</label>
        <input id="pt-y" type="number" min="0" readonly="" class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-neutral-50" placeholder="m²">
      </div>
      <div class="">
        <label class="text-[13px] text-neutral-500">% existant (x/a)</label>
        <input id="pt-xa" type="text" readonly="" class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-neutral-50">
      </div>
      <div>
        <label class="text-[13px] text-neutral-500">% projeté (y/a)</label>
        <input id="pt-ya" type="text" readonly="" class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-neutral-50">
      </div>
    </div>
  </div><!-- Imperméabilisation --><div class="field" data-field-id="c2-imper" data-status="warning">
    <div class="text-sm font-medium text-neutral-900 mb-2">Imperméabilisation</div>
    <div class="grid grid-cols-1 gap-3">
      <div class="grid grid-cols-1 gap-3">
  <div class="overflow-x-auto">
    <table class="w-full border-collapse border border-neutral-200 text-sm">
      <thead class="bg-neutral-50">
        <tr class="">
          <th class="border border-neutral-200 px-3 py-2 text-left text-[13px] font-medium text-neutral-700">Terrain</th>
          <th class="border border-neutral-200 px-3 py-2 text-left text-[13px] font-medium text-neutral-700">Surface imperméabilisée – Situation existante (m²)</th>
          <th class="border border-neutral-200 px-3 py-2 text-left text-[13px] font-medium text-neutral-700">Surface imperméabilisée – Situation projetée (m²)</th>
          <th class="border border-neutral-200 px-3 py-2 text-left text-[13px] font-medium text-neutral-700">Imperméabilisation (m²)</th>
        </tr>
      </thead>
      <tbody class="">
        <tr class="">
          <td class="border border-neutral-200 px-3 py-2 text-[13px] text-neutral-600">Terrain</td>
          <td class="border border-neutral-200 px-3 py-2">
            <input id="im-x" type="number" min="0" class="w-full rounded-md border p-2 text-sm border-neutral-200 bg-white" placeholder="x">
          </td>
          <td class="border border-neutral-200 px-3 py-2">
            <input id="im-y" type="number" min="0" class="w-full rounded-md border p-2 text-sm border-neutral-200 bg-white" placeholder="y">
          </td>
          <td class="border border-neutral-200 px-3 py-2">
            <input id="im-diff" type="number" readonly="" class="w-full rounded-md border p-2 text-sm border-neutral-200 bg-neutral-50" placeholder="y - x">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="rounded-md border p-3 text-[12px] border-neutral-200 bg-neutral-50 text-neutral-600">
    <div class="font-medium mb-2 text-neutral-700">Définitions associées :</div>
    <div class="space-y-1">
      <div class=""> surface dédiée à un projet d'urbanisme ou d'urbanisation (SDT).</div>
      <div class=""> surface dont le sol et le sous-sol sont recouverts de manière permanente par un matériau artificiel imperméable (asphalte ou béton, par exemple) (définition adaptée du SDT).</div>
    </div>
  </div>
</div>
  </div>

  <!-- Actions cadre 2 -->
  <div class="flex items-center justify-end gap-2">
    
    <button class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm bg-neutral-900 text-white hover:bg-neutral-800" id="btnC2Valider">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 w-4 h-4"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg> Valider le cadre
    </button>
  </div>
</div></div>