Comprehensive Building Permit Application Form

<section class="space-y-4">
            <!-- Cadre 1 — Demandeur -->
            <details class="group open:shadow-sm bg-white border-neutral-200 border rounded-lg" open="">
              <summary class="cursor-pointer select-none">
  <div class="flex items-center justify-between px-4 py-3">
    <div class="flex items-center gap-3">
      <div class="text-sm font-semibold tracking-tight style=" font-family:="" 'public="" sans',="" system-ui,="" -apple-system,="" segoe="" ui,="" roboto,="" arial,="" sans-serif;"="">Cadre 1 — Demandeur</div>
      <span class="inline-flex items-center gap-1.5 field-status-badge text-xs font-medium text-[#649DAD] bg-[#649DAD]/10 border-[#649DAD]/30 border rounded-full pt-1 pr-2.5 pb-1 pl-2.5" data-status-badge="warning">À compléter<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="alert-triangle" class="lucide lucide-alert-triangle w-3.5 h-3.5"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg></span>
    </div>
    <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="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
  </div>
  <script>
    // Pre-fill architect data and add UI functionality
    document.addEventListener('DOMContentLoaded', function() {
      // Pre-fill architect fields
      const fillArchitectData = (data) => {
        document.getElementById('arch-nom').value = data.nom || '';
        document.getElementById('arch-prenom').value = data.prenom || '';
        document.getElementById('arch-denom').value = data.denom || '';
        document.getElementById('arch-forme').value = data.forme || '';
        document.getElementById('arch-bce').value = data.bce || '';
        document.getElementById('arch-attest').value = data.attest || '';
        document.getElementById('arch-rue').value = data.rue || '';
        document.getElementById('arch-num').value = data.num || '';
        document.getElementById('arch-cp').value = data.cp || '';
        document.getElementById('arch-commune').value = data.commune || '';
        document.getElementById('arch-pays').value = data.pays || '';
        document.getElementById('arch-tel').value = data.tel || '';
        document.getElementById('arch-mail').value = data.mail || '';
      };

      // Default architect data
      const defaultArchitect = {
        nom: 'Dupont',
        prenom: 'Marie',
        denom: 'ArchiDesign SRL',
        forme: 'SRL',
        bce: '0765.321.987',
        attest: '2025/BE-AR/4587',
        rue: 'Rue des Lilas',
        num: '14 / bte 2',
        cp: '4000',
        commune: 'Liège',
        pays: 'Belgique',
        tel: '+32 4 223 45 67',
        mail: 'marie.dupont@archidesign.be'
      };

      // Available architects
      const architects = [
        defaultArchitect,
        {
          nom: 'Martin',
          prenom: 'Paul',
          denom: 'ArchiDesign SRL',
          forme: 'SRL',
          bce: '0765.321.987',
          attest: '2025/BE-AR/4588',
          rue: 'Rue des Lilas',
          num: '14 / bte 2',
          cp: '4000',
          commune: 'Liège',
          pays: 'Belgique',
          tel: '+32 4 223 45 68',
          mail: 'paul.martin@archidesign.be'
        },
        {
          nom: 'Bernard',
          prenom: 'Sophie',
          denom: 'ArchiDesign SRL',
          forme: 'SRL',
          bce: '0765.321.987',
          attest: '2025/BE-AR/4589',
          rue: 'Rue des Lilas',
          num: '14 / bte 2',
          cp: '4000',
          commune: 'Liège',
          pays: 'Belgique',
          tel: '+32 4 223 45 69',
          mail: 'sophie.bernard@archidesign.be'
        }
      ];

      // Fill with default data
      fillArchitectData(defaultArchitect);

      // Make "Type de demandeur" bold
      const demandeurLabel = document.querySelector('div[data-toggle-group="demandeur-type"]')?.previousElementSibling;
      if (demandeurLabel && demandeurLabel.textContent === 'Type de demandeur') {
        demandeurLabel.style.fontWeight = '600';
      }

      // Make "Architecte" bold and add dropdown + edit button
      const architecteSection = document.querySelector('[data-field-id="c1-architecte"]');
      if (architecteSection) {
        const architecteLabel = architecteSection.querySelector('.text-[13px].text-neutral-500.mb-2');
        if (architecteLabel && architecteLabel.textContent === 'Architecte') {
          architecteLabel.style.fontWeight = '600';
          
          // Create container for dropdown and edit button
          const controlsContainer = document.createElement('div');
          controlsContainer.className = 'flex items-center gap-2 mb-3';
          
          // Create dropdown
          const dropdown = document.createElement('select');
          dropdown.className = 'rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm';
          dropdown.innerHTML = architects.map((arch, i) => 
            `<option value="${i}">${arch.prenom} ${arch.nom}</option>`
          ).join('');
          
          // Create edit button
          const editButton = document.createElement('button');
          editButton.type = 'button';
          editButton.className = 'inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50';
          editButton.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-edit"><path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1"></path><path d="m20.385 6.585-2.97-2.97a2 2 0 0 0-2.83 0l-6.54 6.54a2 2 0 0 0-.58 1.41L7 15l3.41-.46a2 2 0 0 0 1.41-.58l6.54-6.54a2 2 0 0 0 0-2.83z"></path></svg>
            Éditer
          `;
          
          // Event handlers
          dropdown.addEventListener('change', function() {
            const selectedArchitect = architects[parseInt(this.value)];
            fillArchitectData(selectedArchitect);
          });
          
          editButton.addEventListener('click', function() {
            alert('Fonctionnalité d\'édition des coordonnées - Interface à développer');
          });
          
          controlsContainer.appendChild(dropdown);
          controlsContainer.appendChild(editButton);
          
          // Insert after the label
          architecteLabel.parentNode.insertBefore(controlsContainer, architecteLabel.nextSibling);
        }
      }
    });
  </script>
</summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6">
                  <!-- Personne physique / morale -->
                  <div class="field" data-field-id="c1-demandeur" data-status="warning">
                    <div class="mb-2 text-[13px] text-neutral-500" style="font-weight: 600;">Type de demandeur</div>
                    <div class="inline-flex rounded-md border overflow-hidden border-neutral-200" data-toggle-group="demandeur-type">
                      <button class="seg-btn px-3 py-1.5 text-sm text-white bg-[#649DAD]" data-value="physique" data-state="on">Personne physique</button>
                      <button class="seg-btn px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50" data-value="morale" data-state="off">Personne morale</button>
                    </div>

                    <!-- Personne physique -->
                    <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3" data-when="demandeur-type:physique">
                      <div class="">
                        <label class="text-[13px] text-neutral-500">Nom</label>
                        <input id="pf-nom" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div class="">
                        <label class="text-[13px] text-neutral-500">Prénom</label>
                        <input id="pf-prenom" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">N° national</label>
                        <input id="pf-nn" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div class="sm:col-span-2">
                        <label class="text-[13px] text-neutral-500">Rue</label>
                        <input id="pf-rue" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div class="">
                        <label class="text-[13px] text-neutral-500">n° / boîte</label>
                        <input id="pf-num" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="n° — boîte">
                      </div>
                      <div class="">
                        <label class="text-[13px] text-neutral-500">Code postal</label>
                        <input id="pf-cp" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div class="">
                        <label class="text-[13px] text-neutral-500">Commune</label>
                        <input id="pf-commune" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div class="">
                        <label class="text-[13px] text-neutral-500">Pays</label>
                        <input id="pf-pays" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" value="Belgique">
                      </div>
                      <div class="">
                        <label class="text-[13px] text-neutral-500">Téléphone</label>
                        <input id="pf-tel" data-subfield="" data-validate="tel" type="tel" class="w-full text-sm bg-white border-neutral-200 border rounded-md mt-1 pt-2.5 pr-2.5 pb-2.5 pl-2.5">
                        <div class="mt-1 text-[12px] text-neutral-500 hidden" id="pf-tel-help">Format attendu: +32 4xx xx xx xx ou 0x xx xx xx xx</div>
                      </div>
                      <div class="sm:col-span-2">
                        <label class="text-[13px] text-neutral-500">Courriel</label>
                        <input id="pf-mail" data-subfield="" data-validate="email" type="email" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        <div class="mt-1 text-[12px] text-neutral-500 hidden" id="pf-mail-help">Exemple: nom@domaine.tld</div>
                      </div>
                    </div>

                    <!-- Personne morale -->
                    <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3 hidden" data-when="demandeur-type:morale" hidden="">
                      <div>
                        <label class="text-[13px] text-neutral-500">Dénomination sociale</label>
                        <input id="pm-denom" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">Forme juridique</label>
                        <input id="pm-forme" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="ASBL, SA, SRL...">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">Numéro BCE</label>
                        <input id="pm-bce" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div class="sm:col-span-2">
                        <label class="text-[13px] text-neutral-500">Rue</label>
                        <input id="pm-rue" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">n° / boîte</label>
                        <input id="pm-num" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="n° — boîte">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">Code postal</label>
                        <input id="pm-cp" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">Commune</label>
                        <input id="pm-commune" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">Pays</label>
                        <input id="pm-pays" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" value="Belgique">
                      </div>
                      <div>
                        <label class="text-[13px] text-neutral-500">Téléphone</label>
                        <input id="pm-tel" data-subfield="" data-validate="tel" type="tel" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        <div class="mt-1 text-[12px] text-neutral-500 hidden" id="pm-tel-help">Format attendu: +32 4xx xx xx xx ou 0x xx xx xx xx</div>
                      </div>
                      <div class="sm:col-span-2">
                        <label class="text-[13px] text-neutral-500">Courriel</label>
                        <input id="pm-mail" data-subfield="" data-validate="email" type="email" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        <div class="mt-1 text-[12px] text-neutral-500 hidden" id="pm-mail-help">Exemple: nom@domaine.tld</div>
                      </div>
                      <div class="sm:col-span-3 grid grid-cols-1 sm:grid-cols-4 gap-3 pt-2 border-t border-neutral-200">
                        <div class="sm:col-span-4 text-[13px] text-neutral-500">Personne de contact</div>
                        <div>
                          <label class="text-[13px] text-neutral-500">Nom</label>
                          <input id="pc-nom" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        </div>
                        <div>
                          <label class="text-[13px] text-neutral-500">Prénom</label>
                          <input id="pc-prenom" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        </div>
                        <div>
                          <label class="text-[13px] text-neutral-500">Qualité</label>
                          <input id="pc-qualite" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        </div>
                        <div>
                          <label class="text-[13px] text-neutral-500">Téléphone</label>
                          <input id="pc-tel" data-subfield="" data-validate="tel" type="tel" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        </div>
                        <div class="sm:col-span-4">
                          <label class="text-[13px] text-neutral-500">Courriel</label>
                          <input id="pc-mail" data-subfield="" data-validate="email" type="email" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Architecte -->
                  <div class="field" data-field-id="c1-architecte" data-status="warning">
  <div class="text-[13px] text-neutral-500 mb-2 font-semibold">Architecte</div>
  
  <!-- Dropdown and Edit Button Controls -->
  <div class="flex items-center gap-2 mb-3">
    <select class="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm" onchange="fillArchitectData(this.value)">
      <option value="0">Marie Dupont</option>
      <option value="1">Paul Martin</option>
      <option value="2">Sophie Bernard</option>
    </select>
    <button type="button" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50" onclick="alert('Fonctionnalité d\'édition des coordonnées - Interface à développer')">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" class=""></path><path d="m20.385 6.585-2.97-2.97a2 2 0 0 0-2.83 0l-6.54 6.54a2 2 0 0 0-.58 1.41L7 15l3.41-.46a2 2 0 0 0 1.41-.58l6.54-6.54a2 2 0 0 0 0-2.83z" class=""></path></svg>
      Éditer
    </button>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
    
    
    
    
    
    <div class="">
      <label class="text-[13px] text-neutral-500">N° attestation Ordre</label>
      <input id="arch-attest" data-subfield="" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="n° d'attestation" value="2025/BE-AR/4587">
    </div>
    
    
    
    
    
    
    
    
  </div><div class="flex gap-2 pt-6 items-center justify-end">
    <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" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg> Valider le cadre
    </button>
  </div>

  <script>
    function fillArchitectData(index) {
      const architects = [
        {
          nom: 'Dupont', prenom: 'Marie', denom: 'ArchiDesign SRL', forme: 'SRL', 
          bce: '0765.321.987', attest: '2025/BE-AR/4587', rue: 'Rue des Lilas', 
          num: '14 / bte 2', cp: '4000', commune: 'Liège', pays: 'Belgique', 
          tel: '+32 4 223 45 67', mail: 'marie.dupont@archidesign.be'
        },
        {
          nom: 'Martin', prenom: 'Paul', denom: 'ArchiDesign SRL', forme: 'SRL', 
          bce: '0765.321.987', attest: '2025/BE-AR/4588', rue: 'Rue des Lilas', 
          num: '14 / bte 2', cp: '4000', commune: 'Liège', pays: 'Belgique', 
          tel: '+32 4 223 45 68', mail: 'paul.martin@archidesign.be'
        },
        {
          nom: 'Bernard', prenom: 'Sophie', denom: 'ArchiDesign SRL', forme: 'SRL', 
          bce: '0765.321.987', attest: '2025/BE-AR/4589', rue: 'Rue des Lilas', 
          num: '14 / bte 2', cp: '4000', commune: 'Liège', pays: 'Belgique', 
          tel: '+32 4 223 45 69', mail: 'sophie.bernard@archidesign.be'
        }
      ];
      
      const arch = architects[index];
      document.getElementById('arch-nom').value = arch.nom;
      document.getElementById('arch-prenom').value = arch.prenom;
      document.getElementById('arch-denom').value = arch.denom;
      document.getElementById('arch-forme').value = arch.forme;
      document.getElementById('arch-bce').value = arch.bce;
      document.getElementById('arch-attest').value = arch.attest;
      document.getElementById('arch-rue').value = arch.rue;
      document.getElementById('arch-num').value = arch.num;
      document.getElementById('arch-cp').value = arch.cp;
      document.getElementById('arch-commune').value = arch.commune;
      document.getElementById('arch-pays').value = arch.pays;
      document.getElementById('arch-tel').value = arch.tel;
      document.getElementById('arch-mail').value = arch.mail;
    }
  </script>
</div>
                </div>
              </div>
            </details>

            <!-- Cadre 2 — Localisation / Optimisation spatiale -->
            <details id="cadre-2" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex items-center justify-between px-4 py-3">
                  <div class="flex items-center gap-3">
                    <div class="text-sm font-semibold tracking-tight text-neutral-900" style="font-family: 'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;">Cadre 2 — Localisation du projet / Optimisation spatiale</div>
                    <span class="inline-flex items-center gap-1.5 field-status-badge text-xs font-medium text-[#649DAD] bg-[#649DAD]/10 border-[#649DAD]/30 border rounded-full pt-1 pr-2.5 pb-1 pl-2.5">À compléter<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="alert-triangle" class="lucide lucide-alert-triangle w-3.5 h-3.5"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg></span><span class="inline-flex items-center gap-1.5 field-status-badge text-xs font-medium text-[#649DAD] bg-[#649DAD]/10 border-[#649DAD]/30 border rounded-full pt-1 pr-2.5 pb-1 pl-2.5">
                      <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="alert-triangle" class="lucide lucide-alert-triangle w-3.5 h-3.5"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg> À vérifier
                    </span>
                  </div>
                  <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="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-top border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6"><!-- Localisation du projet --><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-sm border-neutral-200 bg-white" placeholder="Nom 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</div>
      <button id="btnAddParcelle" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-2.5 pb-1.5 pl-2.5 items-center">Modifier 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="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">À 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 text-neutral-900 mb-2">
      <span class="inline-flex items-center gap-1.5">Calcul des superficies de pleine terre<span class="relative inline-flex items-center group" tabindex="0" aria-label="Informations sur la surface en pleine terre">
          <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" class="lucide lucide-info hover:text-neutral-700 cursor-pointer w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(64, 64, 64);">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="M12 16v-4" class=""></path>
            <path d="M12 8h.01" class=""></path>
          </svg>
          <span role="tooltip" class="pointer-events-none absolute left-1/2 top-full mt-2 -translate-x-1/2 z-10 hidden group-hover:block group-focus-within:block w-80 max-w-[90vw] whitespace-normal rounded-md border border-neutral-200 bg-neutral-50 p-3 text-[12px] leading-6 text-neutral-800 shadow-sm">
            <span class="font-semibold text-neutral-900">Surface en pleine terre :</span> Calculez la superficie reprenant les surfaces sans minéralisation telles que gravier, allées pavées, trottoirs pavés, parkings, terrains imperméabilisés, routes, …
          </span>
        </span></span>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
      <div class="">
        <label class="text-[13px] text-neutral-500">Superficie du terrain (a)</label>
        <input id="pt-a" type="number" min="0" readonly="" class="w-full text-sm bg-neutral-50 border-neutral-200 border rounded-md mt-1 pt-2 pr-2 pb-2 pl-2" 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="w-full text-sm bg-neutral-50 border-neutral-200 border rounded-md mt-1 pt-2 pr-2 pb-2 pl-2" 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="w-full text-sm bg-neutral-50 border-neutral-200 border rounded-md mt-1 pt-2 pr-2 pb-2 pl-2">
      </div>
      <div class="">
        <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"><span class="inline-flex items-center gap-1.5">Calcul des surfaces imperméabilisées<span class="relative inline-flex items-center group" tabindex="0" aria-label="Informations sur les surfaces imperméabilisées"><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="info" class="lucide lucide-info hover:text-neutral-700 cursor-pointer w-[16px] h-[16px]"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 16v-4" class=""></path><path d="M12 8h.01" class=""></path></svg><span role="tooltip" class="pointer-events-none absolute left-1/2 top-full mt-2 -translate-x-1/2 z-10 hidden group-hover:block group-focus-within:block w-80 max-w-[90vw] whitespace-normal rounded-md border border-neutral-200 bg-neutral-50 p-3 text-[12px] leading-6 text-neutral-800 shadow-sm">Surface recouverte de manière permanente par un matériau artificiel imperméable tel que asphalte ou béton.</span></span></span></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>
    </div>
  </div>
  <!-- Actions cadre 2 -->
  <div class="flex gap-2 pt-6 items-center justify-end">
    <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" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg> Valider le cadre
    </button>
  </div>
</div>

  <!-- Optimisation spatiale -->
  <div class="field" data-field-id="c2-optim" data-status="warning">
    
    
    
    
  </div>

  <script>
    // Patch the malformed "Rue et numéro" input and wire address to header
    document.addEventListener('DOMContentLoaded', () => {
      const locRue = document.getElementById('loc-rue');
      if (locRue) {
        locRue.className = 'mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white';
        if (!locRue.placeholder) locRue.placeholder = 'Nom de la rue et numéro';
      }
      const updateHeaderAddress = () => {
        const rue = document.getElementById('loc-rue')?.value?.trim();
        const cp = document.getElementById('loc-cp')?.value?.trim();
        const com = document.getElementById('loc-commune')?.value?.trim();
        const header = document.getElementById('headerAddress');
        if (header) header.textContent = [rue, [cp, com].filter(Boolean).join(' ')].filter(Boolean).join(', ') || '—';
      };
      ['loc-rue','loc-cp','loc-commune'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.addEventListener('input', updateHeaderAddress);
      });
      updateHeaderAddress();

      // Parcelle: ajout dynamique
      document.getElementById('btnAddParcel')?.addEventListener('click', () => {
        const tpl = document.createElement('div');
        tpl.className = 'grid grid-cols-1 sm:grid-cols-5 gap-2';
        tpl.innerHTML = `
          <div><label class="text-[12px] text-neutral-500">Division</label><input class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-white"></div>
          <div><label class="text-[12px] text-neutral-500">Section</label><input class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-white"></div>
          <div><label class="text-[12px] text-neutral-500">Numéro</label><input class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-white"></div>
          <div><label class="text-[12px] text-neutral-500">Sous-numéro</label><input class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-white"></div>
          <div class="flex items-end gap-2">
            <div class="flex-1">
              <label class="text-[12px] text-neutral-500">Surface (m²)</label>
              <input class="mt-1 w-full rounded-md border p-2 text-sm border-neutral-200 bg-white">
            </div>
            <button type="button" class="mb-0.5 inline-flex items-center justify-center rounded-md border border-neutral-200 bg-white hover:bg-neutral-50 p-2 text-neutral-600 remove-parcel" title="Supprimer">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
            </button>
          </div>
        `;
        document.getElementById('parcelList')?.appendChild(tpl);
      });

      document.getElementById('parcelList')?.addEventListener('click', (e) => {
        const btn = e.target.closest('.remove-parcel');
        if (btn) {
          const row = btn.closest('.grid');
          row?.remove();
        }
      });
    });
  </script>
</div>
              </div>
            </details>

            <!-- Cadre 3 — Objet de la demande -->
            <details id="cadre-3" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex pt-3 pr-4 pb-3 pl-4 items-center justify-between">
                  <div class="flex items-center gap-3">
                    <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 3 — Objet de la demande</div>
                    <span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium border-[#649DAD]/30 bg-[#649DAD]/10 text-[#649DAD]">
                      À compléter
                    </span>
                  </div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6">
  

  <div class="">
    <label for="textarea-description" class="text-[13px] text-neutral-500">Description succincte du projet</label>
    <div class="text-[12px] text-neutral-600 mt-1 mb-2">Décrivez l'entièreté du projet et le but des travaux : précisez l'activité accueillie, existante et/ou projetée, dans les bâtiments ou sur le terrain, les éventuelles démolitions, transformations, les nouvelles constructions ou installations, création de logements, aménagement des abords, etc.</div>
    <div class="space-y-2">
      <textarea id="textarea-description" rows="10" class="w-full focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors text-sm bg-white border-neutral-200 border rounded-md pt-2.5 pr-2.5 pb-2.5 pl-2.5" placeholder="Précisez l'objet du projet en quelques mots, puis détaillez les affectations et surfaces. Ces informations permettent d'orienter l'instruction (publicité, incidences, avis consultatifs)."></textarea>
      <div class="flex items-center justify-end">
        <button onclick="toggleAiHelper('description')" class="inline-flex gap-1.5 hover:bg-neutral-100 transition-colors text-sm text-neutral-600 rounded-md pt-2 pr-3 pb-2 pl-3 items-center" title="Ouvrir les suggestions IA">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(82, 82, 82);">
            <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
            <path d="M5 3v4" class=""></path>
            <path d="M19 17v4" class=""></path>
            <path d="M3 5h4" class=""></path>
            <path d="M17 19h4" class=""></path>
          </svg>
          Aide IA
        </button>
      </div>
      <div id="ai-helper-description" class="space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3 hidden" style="max-height: 0px; opacity: 0; transition: max-height 0.3s ease-out, opacity 0.3s ease-out;">
        <select onchange="applyAiPrompt('description')" id="ai-prompt-select-description" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
          <option value="" selected="" disabled="">Suggestions de prompts...</option>
          <option value="Générer une première version de la description du projet.">Générer une première version</option>
          <option value="Lister les contraintes potentielles liées au projet.">Lister les contraintes</option>
          <option value="Simplifier la rédaction de la description actuelle.">Simplifier la rédaction</option>
          <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l’orthographe</option>
        </select>
        <textarea id="ai-prompt-input-description" placeholder="Décrivez ce que vous voulez que l’IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
        <div class="flex items-center justify-between">
          <button id="ai-regenerate-btn-description" onclick="generateAiContent('description')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw">
              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
              <path d="M21 3v5h-5" class=""></path>
              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
              <path d="M3 21v-5h5" class=""></path>
            </svg>
            Régénérer
          </button>
          <div class="flex items-center gap-2 ml-auto">
            <button onclick="saveToLibrary('description')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library">
                <path d="m16 6 4 14" class=""></path>
                <path d="M12 6v14" class=""></path>
                <path d="M8 8v12" class=""></path>
                <path d="M4 4v16" class=""></path>
              </svg>
              Enregistrer
            </button>
            <button onclick="generateAiContent('description')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">
              Générer
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="">
    <div class="text-sm font-medium text-neutral-900 mb-4">Cochez les caractéristiques de votre projet </div>
    <div class="space-y-3">
      <!-- Accordion Items -->
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 cursor-pointer hover:bg-neutral-50/50 transition-colors pt-4 pr-4 pb-4 pl-4" for="particularite-relief">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-relief" class="sr-only peer" onchange="toggleSection('relief')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="inline-flex items-center gap-1.5 text-sm font-medium text-neutral-700">Modification sensible du relief du sol<span class="relative inline-flex items-center group" tabindex="0" aria-label="Informations sur la modification sensible du relief du sol">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info hover:text-neutral-700 cursor-pointer w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(64, 64, 64);">
    <circle cx="12" cy="12" r="10" class=""></circle>
    <path d="M12 16v-4" class=""></path>
    <path d="M12 8h.01" class=""></path>
  </svg>
  <span role="tooltip" class="pointer-events-none absolute left-1/2 top-full mt-2 -translate-x-1/2 z-10 hidden group-hover:block group-focus-within:block w-80 max-w-[90vw] whitespace-normal rounded-md border border-neutral-200 bg-neutral-50 p-3 text-[12px] leading-6 text-neutral-800 shadow-sm">
    <span class="font-semibold text-neutral-900">Modification sensible du relief du sol :</span> Une modification est sensible si une des conditions suivantes est rencontrées : les remblais ou déblais font plus de 40m³, hauteur modifiée sur plus de 50cm par rapport au niveau naturel, située à moins de 2m de la limite mitoyenne, sur un axe de concentration naturel des eaux de ruissellement, dans une zone d'aléa d'inondation, modifie le système de drainage d'une wateringue, dans un site de conservation de la nature, de grand intérêt biologique ou dans une zone naturelle, modifie le relief des berges d'un cours d'eau.
  </span>
</span></span>
          </div>
          <button type="button" onclick="toggleExpand('relief', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-relief" class="transition-transform duration-200 w-[16px] h-[16px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(115, 115, 115);">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-relief" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Précisez le cubage des terres déplacées. Indiquez la nature des terres évacuées et/ou la nature et origine des terres amenées.</div>
            <div class="space-y-2">
              <textarea id="textarea-relief" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Décrivez les modifications du relief, le cubage des terres..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('relief')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles">
                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
                    <path d="M5 3v4" class=""></path>
                    <path d="M19 17v4" class=""></path>
                    <path d="M3 5h4" class=""></path>
                    <path d="M17 19h4" class=""></path>
                  </svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-relief" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('relief')" id="ai-prompt-select-relief" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description des modifications du relief.">Générer une première version</option>
                  <option value="Simplifier la description technique.">Simplifier la rédaction</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-relief" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-relief" onclick="generateAiContent('relief')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw">
                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
                      <path d="M21 3v5h-5" class=""></path>
                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
                      <path d="M3 21v-5h5" class=""></path>
                    </svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('relief')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library">
                        <path d="m16 6 4 14" class=""></path>
                        <path d="M12 6v14" class=""></path>
                        <path d="M8 8v12" class=""></path>
                        <path d="M4 4v16" class=""></path>
                      </svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('relief')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Other accordion items follow the same pattern -->
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 p-4 cursor-pointer hover:bg-neutral-50/50 transition-colors" for="particularite-enseignes">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-enseignes" class="sr-only peer" onchange="toggleSection('enseignes')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Enseignes et dispositifs de publicité</span>
          </div>
          <button type="button" onclick="toggleExpand('enseignes', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-enseignes" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-enseignes" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Précisez les caractéristiques (nombre, formes et dimensions, matériaux et tonalité, spécificités : lumineuse, éclairage, lettrage ou logo, etc.) ainsi que leur localisation (au sol, sur poteau ou totem, perpendiculaire ou parallèle à la façade, apposées sur une vitrine, etc.).</div>
            <div class="space-y-2">
              <textarea id="textarea-enseignes" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Décrivez les enseignes : nombre, dimensions, matériaux..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('enseignes')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles">
                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
                    <path d="M5 3v4" class=""></path>
                    <path d="M19 17v4" class=""></path>
                    <path d="M3 5h4" class=""></path>
                    <path d="M17 19h4" class=""></path>
                  </svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-enseignes" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('enseignes')" id="ai-prompt-select-enseignes" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description technique pour une enseigne lumineuse.">Générer une description</option>
                  <option value="Lister les points de conformité à vérifier pour une enseigne.">Lister les contraintes</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-enseignes" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-enseignes" onclick="generateAiContent('enseignes')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw">
                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
                      <path d="M21 3v5h-5" class=""></path>
                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
                      <path d="M3 21v-5h5" class=""></path>
                    </svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('enseignes')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library">
                        <path d="m16 6 4 14" class=""></path>
                        <path d="M12 6v14" class=""></path>
                        <path d="M8 8v12" class=""></path>
                        <path d="M4 4v16" class=""></path>
                      </svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('enseignes')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 p-4 cursor-pointer hover:bg-neutral-50/50 transition-colors" for="particularite-boisement">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-boisement" class="sr-only peer" onchange="toggleSection('boisement')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Boisement / Déboisement / Abattage</span>
          </div>
          <button type="button" onclick="toggleExpand('boisement', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-boisement" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-boisement" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Présentez les actes et travaux projetés (nature de la végétation, nombre d'arbres, âge supposé), le but poursuivi par les travaux, la période envisagée des travaux ainsi que les éventuelles mesures de replantation après les travaux (essence et nombre).</div>
            <div class="space-y-2">
              <textarea id="textarea-boisement" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Détaillez les travaux de boisement/déboisement..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('boisement')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles">
                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
                    <path d="M5 3v4" class=""></path>
                    <path d="M19 17v4" class=""></path>
                    <path d="M3 5h4" class=""></path>
                    <path d="M17 19h4" class=""></path>
                  </svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-boisement" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('boisement')" id="ai-prompt-select-boisement" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description des travaux d'abattage et de replantation prévus.">Générer une description</option>
                  <option value="Proposer des essences d'arbres locales pour la replantation.">Proposer des essences</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-boisement" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-boisement" onclick="generateAiContent('boisement')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw">
                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
                      <path d="M21 3v5h-5" class=""></path>
                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
                      <path d="M3 21v-5h5" class=""></path>
                    </svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library">
                        <path d="m16 6 4 14" class=""></path>
                        <path d="M12 6v14" class=""></path>
                        <path d="M8 8v12" class=""></path>
                        <path d="M4 4v16" class=""></path>
                      </svg> Enregistrer
                    
                    <button onclick="generateAiContent('boisement')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 p-4 cursor-pointer hover:bg-neutral-50/50 transition-colors" for="particularite-energie">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-energie" class="sr-only peer" onchange="toggleSection('energie')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Module de production d'énergie</span>
          </div>
          <button type="button" onclick="toggleExpand('energie', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-energie" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-energie" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Si le projet concerne un module de production d'énergie, précisez la puissance du module :</div>
            <div class="space-y-2">
              <textarea id="textarea-energie" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Précisez la puissance du module..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('energie')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path><path d="M5 3v4" class=""></path><path d="M19 17v4" class=""></path><path d="M3 5h4" class=""></path><path d="M17 19h4" class=""></path></svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-energie" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('energie')" id="ai-prompt-select-energie" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description de la puissance du module.">Générer une description</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-energie" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-energie" onclick="generateAiContent('energie')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M3 21v-5h5" class=""></path></svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('energie')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('energie')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 cursor-pointer hover:bg-neutral-50/50 transition-colors pt-4 pr-4 pb-4 pl-4" for="particularite-phases">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-phases" class="sr-only peer" onchange="toggleSection('phases')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Mise en œuvre par phases</span>
          </div>
          <button type="button" onclick="toggleExpand('phases', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-phases" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-phases" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Si la mise en œuvre du projet est souhaitée par phases (si vous souhaitez notamment que la date de péremption de votre permis soit alignée sur ces phases), précisez la description du phasage ainsi que la date ou période souhaitée pour la seconde phase et les éventuelles phases ultérieures :</div>
            <div class="space-y-2">
              <textarea id="textarea-phases" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Décrivez le phasage, les dates..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('phases')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path><path d="M5 3v4" class=""></path><path d="M19 17v4" class=""></path><path d="M3 5h4" class=""></path><path d="M17 19h4" class=""></path></svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-phases" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('phases')" id="ai-prompt-select-phases" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description de phasage pour un projet de construction.">Générer une description</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-phases" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-phases" onclick="generateAiContent('phases')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.3 16" class=""></path><path d="M3 21v-5h5" class=""></path></svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('phases')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library"><path d="m16 6 4 1-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors" class="">Générer</path></svg></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 p-4 cursor-pointer hover:bg-neutral-50/50 transition-colors" for="particularite-regularisation">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-regularisation" class="sr-only peer" onchange="toggleSection('regularisation')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Régularisation de travaux</span>
          </div>
          <button type="button" onclick="toggleExpand('regularisation', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-regularisation" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-regularisation" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Si le projet concerne une régularisation de travaux effectués sans permis ou non conformément au permis délivré, décrivez les actes et travaux dont la régularisation est demandée et précisez les éléments probants permettant de démontrer la date de leur réalisation.</div>
            <div class="space-y-2">
              <textarea id="textarea-regularisation" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Décrivez les travaux à régulariser..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('regularisation')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path><path d="M5 3v4" class=""></path><path d="M19 17v4" class=""></path><path d="M3 5h4" class=""></path><path d="M17 19h4" class=""></path></svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-regularisation" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('regularisation')" id="ai-prompt-select-regularisation" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description des travaux à régulariser.">Générer une description</option>
                  <option value="Lister les types d'éléments probants possibles.">Lister les preuves</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-regularisation" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-regularisation" onclick="generateAiContent('regularisation')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M3 21v-5h5" class=""></path></svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('regularisation')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('regularisation')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 p-4 cursor-pointer hover:bg-neutral-50/50 transition-colors" for="particularite-limitee">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-limitee" class="sr-only peer" onchange="toggleSection('limitee')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Permis à durée limitée</span>
          </div>
          <button type="button" onclick="toggleExpand('limitee', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-limitee" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-limitee" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Si la demande vise un permis d'urbanisme à durée limitée au sens de l'article D.IV.80 du CoDT, précisez et justifiez-en la durée :</div>
            <div class="space-y-2">
              <textarea id="textarea-limitee" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Précisez et justifiez la durée..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('limitee')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path><path d="M5 3v4" class=""></path><path d="M19 17v4" class=""></path><path d="M3 5h4" class=""></path><path d="M17 19h4" class=""></path></svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-limitee" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('limitee')" id="ai-prompt-select-limitee" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une justification pour un permis à durée limitée.">Générer une justification</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-limitee" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-limitee" onclick="generateAiContent('limitee')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M3 21v-5h5" class=""></path></svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('limitee')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('limitee')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 cursor-pointer hover:bg-neutral-50/50 transition-colors pt-4 pr-4 pb-4 pl-4" for="particularite-modification">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-modification" class="sr-only peer" onchange="toggleSection('modification')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Modification d'un permis existant</span>
          </div>
          <button type="button" onclick="toggleExpand('modification', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-modification" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-modification" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Si la demande vise une modification d'un permis d'urbanisme délivré en application de l'article D.IV.96/1 du CoDT, précisez la date de délivrance et les références du permis initial dont la modification est sollicitée. Décrivez les actes et travaux en lien avec la modification projetée, la situation existante correspondant à la situation autorisée dans le permis initialement délivré :</div>
            <div class="space-y-2">
              <textarea id="textarea-modification" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Décrivez la modification du permis..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('modification')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path><path d="M5 3v4" class=""></path><path d="M19 17v4" class=""></path><path d="M3 5h4" class=""></path><path d="M17 19h4" class=""></path></svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-modification" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('modification')" id="ai-prompt-select-modification" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description de la modification d'un permis.">Générer une description</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-modification" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-modification" onclick="generateAiContent('modification')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M3 21v-5h5" class=""></path></svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('modification')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('modification')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
        <label class="flex items-center justify-between gap-3 cursor-pointer hover:bg-neutral-50/50 transition-colors pt-4 pr-4 pb-4 pl-4" for="particularite-servitudes">
          <div class="flex items-center gap-3">
            <div class="relative flex-shrink-0">
              <input type="checkbox" id="particularite-servitudes" class="sr-only peer" onchange="toggleSection('servitudes')">
              <div class="w-5 h-5 peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20 transition-all duration-200 flex bg-white border-neutral-300 border-2 rounded items-center justify-center">
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path>
                </svg>
              </div>
            </div>
            <span class="text-sm font-medium text-neutral-700">Servitudes et autres droits</span>
          </div>
          <button type="button" onclick="toggleExpand('servitudes', event)" class="p-1 hover:bg-neutral-100 rounded-full transition-colors" aria-label="Déplier">
            <svg id="chevron-servitudes" class="w-4 h-4 text-neutral-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </button>
        </label>
        <div id="content-servitudes" class="hidden overflow-hidden">
          <div class="border-t border-neutral-200 px-4 pt-3 pb-4">
            <div class="text-sm text-neutral-600 mb-3 p-3 bg-neutral-50 rounded-md border border-neutral-200">Si le projet a pour effet d'éteindre ou de modifier des servitudes et autres droits, précisez-en la nature (servitude de passage, de vue, etc.) et les contraintes induites par le projet :</div>
            <div class="space-y-2">
              <textarea id="textarea-servitudes" rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="Décrivez les servitudes concernées..."></textarea>
              <div class="flex items-center justify-end">
                <button onclick="toggleAiHelper('servitudes')" class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors" title="Ouvrir les suggestions IA">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path><path d="M5 3v4" class=""></path><path d="M19 17v4" class=""></path><path d="M3 5h4" class=""></path><path d="M17 19h4" class=""></path></svg> Aide IA
                </button>
              </div>
              <div id="ai-helper-servitudes" class="hidden space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                <select onchange="applyAiPrompt('servitudes')" id="ai-prompt-select-servitudes" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
                  <option value="" selected="" disabled="">Suggestions de prompts...</option>
                  <option value="Générer une description d'une servitude de passage.">Générer une description</option>
                  <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l'orthographe</option>
                </select>
                <textarea id="ai-prompt-input-servitudes" placeholder="Décrivez ce que vous voulez que l'IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
                <div class="flex items-center justify-between">
                  <button id="ai-regenerate-btn-servitudes" onclick="generateAiContent('servitudes')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M3 21v-5h5" class=""></path></svg> Régénérer
                  </button>
                  <div class="flex items-center gap-2 ml-auto">
                    <button onclick="saveToLibrary('servitudes')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg> Enregistrer
                    </button>
                    <button onclick="generateAiContent('servitudes')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">Générer</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function toggleSection(sectionId) {
      const content = document.getElementById('content-' + sectionId);
      const chevron = document.getElementById('chevron-' + sectionId);
      const isHidden = content.classList.contains('hidden');

      if (isHidden) {
        content.classList.remove('hidden');
        content.style.height = 'auto';
        const height = content.offsetHeight + 'px';
        content.style.height = '0px';
        setTimeout(() => {
          content.style.transition = 'height 0.3s ease-out';
          content.style.height = height;
          chevron.style.transform = 'rotate(180deg)';
        }, 10);
        setTimeout(() => {
          content.style.height = 'auto';
        }, 310);
      } else {
        content.style.height = content.offsetHeight + 'px';
        content.style.transition = 'height 0.3s ease-out';
        setTimeout(() => {
          content.style.height = '0px';
          chevron.style.transform = 'rotate(0deg)';
        }, 10);
        setTimeout(() => {
          content.classList.add('hidden');
        }, 310);
      }
    }

    function toggleExpand(sectionId, event) {
      event.preventDefault();
      event.stopPropagation();
      toggleSection(sectionId);
    }

    function createToast(message) {
      const toast = document.createElement('div');
      toast.className = 'fixed bottom-5 right-5 bg-neutral-900 text-white text-sm py-2 px-4 rounded-md shadow-lg flex items-center gap-2 z-50';
      toast.style.fontFamily = "'Public Sans', sans-serif";
      toast.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-circle-2"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
        <span>${message}</span>
      `;
      document.body.appendChild(toast);
      setTimeout(() => {
        toast.style.transition = 'opacity 0.3s ease';
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
      }, 3000);
    }

    function toggleAiHelper(id) {
      const helper = document.getElementById(`ai-helper-${id}`);
      if (!helper) return;
      const isHidden = helper.classList.contains('hidden');
      if (isHidden) {
        helper.classList.remove('hidden');
        helper.style.maxHeight = '0';
        helper.style.opacity = '0';
        helper.style.transition = 'max-height 0.3s ease-out, opacity 0.3s ease-out';
        setTimeout(() => {
            helper.style.maxHeight = '500px';
            helper.style.opacity = '1';
        }, 10);
      } else {
        helper.style.maxHeight = '0';
        helper.style.opacity = '0';
        setTimeout(() => {
            helper.classList.add('hidden');
        }, 300);
      }
    }

    function applyAiPrompt(id) {
      const select = document.getElementById(`ai-prompt-select-${id}`);
      const input = document.getElementById(`ai-prompt-input-${id}`);
      if (select.value && input) {
        input.value = select.value;
      }
    }

    function generateAiContent(id) {
      const mainField = document.getElementById(`textarea-${id}`) || document.getElementById(`input-${id}`);
      const aiPrompt = document.getElementById(`ai-prompt-input-${id}`);
      const regenerateBtn = document.getElementById(`ai-regenerate-btn-${id}`);

      if (!mainField) return;

      mainField.value = `Contenu généré par l'IA basé sur la demande : "${aiPrompt.value || 'génération de base'}". Ce texte est un exemple et peut être modifié.`;
      alert("Contenu généré et inséré dans le champ.");

      if (regenerateBtn) {
        regenerateBtn.classList.remove('hidden');
      }
    }

    function saveToLibrary(id) {
      const mainField = document.getElementById(`textarea-${id}`) || document.getElementById(`input-${id}`);
      if (!mainField) return;

      const content = mainField.value;
      if (content.trim()) {
        console.log("Saving to library:", content); // Placeholder for actual save logic
        createToast("Texte enregistré dans votre bibliothèque");
      } else {
        alert("Le champ est vide, rien à enregistrer.");
      }
    }
    
    // Ensure chevrons point down on load
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('[id^="chevron-"]').forEach(chevron => {
        const sectionId = chevron.id.replace('chevron-', '');
        const content = document.getElementById('content-' + sectionId);
        if (content && !content.classList.contains('hidden')) {
          chevron.style.transform = 'rotate(180deg)';
        }
      });
    });
  </script>
<div class="flex gap-2 pt-6 items-center justify-end">
    <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" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg> Valider le cadre
    </button>
  </div></div>
              </div>
            </details>

            <!-- Cadre 4 — Parti architectural -->
            <details id="cadre-4" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
  <div class="flex pt-3 pr-4 pb-3 pl-4 items-center justify-between">
    <div class="flex items-center gap-3">
      <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 4 — Parti architectural</div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" class=""></path></svg>
  </div>
  <script>
    (function(s){
      try {
        const d = s && s.closest('details');
        if (d && !d.hasAttribute('open')) d.setAttribute('open','');
      } catch(e){}
    })(document.currentScript && document.currentScript.parentElement);
  </script>
</summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6">
                  
                  
                  <div class="">
    <label for="textarea-description" class="text-[13px] text-neutral-500">Options d’aménagement et parti architectural du projet</label>
    <div class="text-[12px] text-neutral-600 mt-1 mb-2">Présenter le projet dans ses paramètres essentiels et significatifs : le choix d’une implantation, d’une composition architecturale, d’un gabarit, de matériaux, l’aménagement de ses abords et son équipement, l’habitabilité, etc. en rapport avec un contexte urbanistique identifié et au regard des contraintes légales et réglementaires qui pèsent sur le bien.</div>
    <div class="space-y-2">
      <textarea id="textarea-description" rows="10" class="w-full focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors text-sm bg-white border-neutral-200 border rounded-md pt-2.5 pr-2.5 pb-2.5 pl-2.5" placeholder="Description détaillée du projet..."></textarea>
      <div class="flex items-center justify-end">
        <button onclick="toggleAiHelper('description')" class="inline-flex gap-1.5 hover:bg-neutral-100 transition-colors text-sm text-neutral-600 rounded-md pt-2 pr-3 pb-2 pl-3 items-center" title="Ouvrir les suggestions IA">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(82, 82, 82);">
            <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
            <path d="M5 3v4" class=""></path>
            <path d="M19 17v4" class=""></path>
            <path d="M3 5h4" class=""></path>
            <path d="M17 19h4" class=""></path>
          </svg>
          Aide IA
        </button>
      </div>
      <div id="ai-helper-description" class="space-y-3 rounded-md border border-neutral-200 bg-neutral-50/60 p-3 hidden" style="max-height: 0px; opacity: 0; transition: max-height 0.3s ease-out, opacity 0.3s ease-out;">
        <select onchange="applyAiPrompt('description')" id="ai-prompt-select-description" class="w-full rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-600 focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors">
          <option value="" selected="" disabled="">Suggestions de prompts...</option>
          <option value="Générer une première version de la description du projet.">Générer une première version</option>
          <option value="Lister les contraintes potentielles liées au projet.">Lister les contraintes</option>
          <option value="Simplifier la rédaction de la description actuelle.">Simplifier la rédaction</option>
          <option value="Vérifier et corriger l'orthographe et la grammaire.">Vérifier l’orthographe</option>
        </select>
        <textarea id="ai-prompt-input-description" placeholder="Décrivez ce que vous voulez que l’IA fasse..." rows="2" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors"></textarea>
        <div class="flex items-center justify-between">
          <button id="ai-regenerate-btn-description" onclick="generateAiContent('description')" class="hidden inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw">
              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
              <path d="M21 3v5h-5" class=""></path>
              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
              <path d="M3 21v-5h5" class=""></path>
            </svg>
            Régénérer
          </button>
          <div class="flex items-center gap-2 ml-auto">
            <button onclick="saveToLibrary('description')" class="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library">
                <path d="m16 6 4 14" class=""></path>
                <path d="M12 6v14" class=""></path>
                <path d="M8 8v12" class=""></path>
                <path d="M4 4v16" class=""></path>
              </svg>
              Enregistrer
            </button>
            <button onclick="generateAiContent('description')" class="inline-flex items-center gap-1.5 rounded-md border border-transparent bg-[#649DAD] px-3 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-colors">
              Générer
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
                </div>
              </div>
            </details>

            <!-- Cadre 5 — Dérogations / Écarts -->
            <details id="cadre-5" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
  <div class="flex items-center justify-between px-4 py-3">
    <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 5 — Dérogations / Écarts</div>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
  </div>
  <script>
    (function(s){
      try {
        const ensureAllOpen = () => {
          document.querySelectorAll('details').forEach(d => d.setAttribute('open',''));
        };
        // Open any details already parsed
        ensureAllOpen();
        // Ensure all details are open after DOM fully parsed
        document.addEventListener('DOMContentLoaded', ensureAllOpen);
        // Ensure the current section is open immediately
        const d = s && s.closest('details');
        if (d) d.setAttribute('open','');
      } catch(e){}
    })(document.currentScript && document.currentScript.parentElement);
  </script>
</summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-4">
  <!-- Bandeau d’info -->
  <div class="rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
    <div class="flex items-start justify-between gap-3">
      <div class="flex items-start gap-2 text-[13px] text-neutral-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mt-0.5 text-neutral-600" viewBox="0 0 24 24" fillnone"="" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 16v-4" class=""></path><path d="M12 8h.01" class=""></path></svg>
        <p class="">La réglementation applicable est reprise dans la Grille analytique (Annexe). Lisez-la avant de compléter les justifications.</p>
      </div>
      <div class="flex items-center gap-2">
        <a href="#annexe-grille" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50">
          Voir l’annexe
        </a>
        <button type="button" id="btnOpenGuide" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50" title="Ouvrir le guide des articles">
          Ouvrir le guide des articles (D.IV.5, D.IV.6–D.IV.11, D.IV.13)
        </button>
      </div>
    </div>
  </div>

  <!-- Liste repliée (mots-clés) -->
  <div class="space-y-2">
    <!-- Dérogation -->
    <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
      <label class="flex items-center justify-between gap-3 cursor-pointer hover:bg-neutral-50/50 transition-colors pt-3 pr-4 pb-3 pl-4" for="chk-derog" aria-controls="content-derog" aria-expanded="true" id="toggle-derog">
        <div class="flex items-center gap-3">
          <div class="relative flex-shrink-0">
            <input type="checkbox" id="chk-derog" class="sr-only">
            <div class="w-5 h-5 transition-all duration-200 flex bg-white border-2 rounded items-center justify-center bg-[#649DAD] border-[#649DAD]" aria-hidden="true" id="chk-derog-ui">
              <svg class="transition-opacity opacity-100 w-[12px] h-[12px]" id="chk-derog-icon" fill="currentColor" viewBox="0 0 20 20" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(255, 255, 255);">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
              </svg>
            </div>
          </div>
          <span class="text-sm font-medium text-neutral-700">Dérogation au plan de secteur / normes du guide régional</span>
        </div>
        <button type="button" class="p-1 rounded-full hover:bg-neutral-100 transition-colors" aria-label="Déplier la section Dérogations" id="btn-derog-chevron">
          <svg id="chev-derog" class="w-4 h-4 text-neutral-500 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(180deg);"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
      </label>
      <div id="content-derog" class="overflow-hidden">
        <div class="border-t border-neutral-200 px-4 pt-3 pb-4 space-y-3">
          <div class="text-[13px] text-neutral-600 rounded-md border border-neutral-200 bg-neutral-50 p-3">
            « Lisez attentivement la grille et, le cas échéant, complétez les éléments ci-dessous uniquement si une dérogation est sollicitée. »
          </div>

          <div class="space-y-3">
            <div class="space-y-2">
              <label class="text-[13px] text-neutral-500">Énumérer la ou les dérogations sollicitées</label>
              <textarea rows="3" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="« Exemple : dépassement du gabarit R+1 ou affectation en zone d’habitat »"></textarea>
            </div>

            <div class="space-y-2">
              <label class="text-[13px] text-neutral-500">Motiver le respect des conditions (articles D.IV.6 à D.IV.11)</label>
              <textarea rows="3" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="« Décrivez pourquoi le projet répond à l’une des hypothèses de dérogation prévues par le CoDT… »"></textarea>
            </div>

            <div class="space-y-2">
              <label class="text-[13px] text-neutral-500">Motiver le respect de l’article D.IV.13</label>
              <textarea rows="4" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="« Expliquez en quoi le projet respecte les conditions de l’article D.IV.13 (cohérence urbanistique, insertion paysagère, etc.) »"></textarea>
            </div>

            <button onclick="toggleAiHelper('description')" class="flex ml-auto gap-1.5 hover:bg-neutral-100 transition-colors text-sm text-neutral-600 rounded-md pt-2 pr-3 pb-2 pl-3 items-center" title="Ouvrir les suggestions IA">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(82, 82, 82);">
            <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
            <path d="M5 3v4" class=""></path>
            <path d="M19 17v4" class=""></path>
            <path d="M3 5h4" class=""></path>
            <path d="M17 19h4" class=""></path>
          </svg>
          Aide IA
        </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Écart -->
    <div class="border rounded-lg border-neutral-200 bg-white overflow-hidden">
      <label class="flex items-center justify-between gap-3 cursor-pointer hover:bg-neutral-50/50 transition-colors pt-3 pr-4 pb-3 pl-4" for="chk-ecart" aria-controls="content-ecart" aria-expanded="true" id="toggle-ecart">
        <div class="flex items-center gap-3">
          <div class="relative flex-shrink-0">
            <input type="checkbox" id="chk-ecart" class="sr-only">
            <div class="w-5 h-5 transition-all duration-200 flex bg-white border-2 rounded items-center justify-center bg-[#649DAD] border-[#649DAD]" aria-hidden="true" id="chk-ecart-ui">
              <svg class="w-3 h-3 text-white transition-opacity opacity-100" id="chk-ecart-icon" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
              </svg>
            </div>
          </div>
          <span class="text-sm font-medium text-neutral-700">Écart à un schéma / carte d’affectation / guide / permis d’urbanisation</span>
        </div>
        <button type="button" class="p-1 rounded-full hover:bg-neutral-100 transition-colors" aria-label="Déplier la section Écarts" id="btn-ecart-chevron">
          <svg id="chev-ecart" class="w-4 h-4 text-neutral-500 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transform: rotate(180deg);"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
      </label>
      <div id="content-ecart" class="overflow-hidden">
        <div class="border-t border-neutral-200 px-4 pt-3 pb-4 space-y-3">
          <div class="text-[13px] text-neutral-600 rounded-md border border-neutral-200 bg-neutral-50 p-3">
            « Lisez attentivement la grille et, le cas échéant, complétez les éléments ci-dessous uniquement si un ou plusieurs écarts sont sollicités. »
          </div>

          <div class="space-y-3">
            <div class="space-y-2">
              <label class="text-[13px] text-neutral-500">Énumérer le ou les écarts sollicités</label>
              <textarea rows="3" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="« Exemple : recul de façade différent du schéma communal, alignement non conforme au guide… »"></textarea>
            </div>

            <div class="space-y-2">
              <label class="text-[13px] text-neutral-500">Motiver le respect de l’article D.IV.5</label>
              <textarea rows="3" class="mt-1 w-full rounded-md border p-2.5 text border-neutral-200 bg-white focus:border-[#649DAD] focus:ring-1 focus:ring-[#649DAD]/50 transition-colors" placeholder="« Justifiez en quoi l’écart reste compatible avec les objectifs fixés par l’article D.IV.5 »"></textarea>
            </div>

            <div class="flex items-start justify-between gap-2 flex-wrap">
              <div class="inline-flex items-center gap-1.5 text-[12px] text-neutral-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5V4.6a2 2 0 0 1 2-2h8.6a2 2 0 0 1 2 2v.9" class=""></path><path d="M8 2.6v4a2 2 0 0 0 2 2h4.6" class=""></path><path d="M16 22H6a2 2 0 0 1-2-2v-1h14v1a2 2 0 0 1-2 2Z" class=""></path></svg>
                <span>Article applicable → <span class="font-medium text-neutral-700">D.IV.5</span></span>
              </div>
            </div>
          </div>
            
        </div>
      </div>
    </div>
  </div>

  <!-- Résumé & Contrôles -->
  <div class="rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
    <div class="flex items-center justify-between gap-3 flex-wrap">
      <div class="flex items-center gap-2 flex-wrap">
        <span id="sum-derog-badge" class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium border-neutral-200 bg-white text-neutral-700">Dérogations: ⚠️</span>
        <span id="sum-ecart-badge" class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium border-neutral-200 bg-white text-neutral-700">Écarts: ⚠️</span>
      </div>
      <div class="text-[12px] text-neutral-600">Assurez-vous que vos justifications répondent aux conditions légales du CoDT.</div>
    </div>
  </div>

  <script>
    (function () {
      const sections = [
        { key: 'derog', labelId: 'toggle-derog', chkId: 'chk-derog', chevronId: 'chev-derog', btnChevronId: 'btn-derog-chevron', contentId: 'content-derog', textId: 'derog-text', counterId: 'derog-counter', statusId: 'status-derog', sumBadgeId: 'sum-derog-badge', min: 300, chkUiId: 'chk-derog-ui', chkIconId: 'chk-derog-icon' },
        { key: 'ecart', labelId: 'toggle-ecart', chkId: 'chk-ecart', chevronId: 'chev-ecart', btnChevronId: 'btn-ecart-chevron', contentId: 'content-ecart', textId: 'ecart-text', counterId: 'ecart-counter', statusId: 'status-ecart', sumBadgeId: 'sum-ecart-badge', min: 300, chkUiId: 'chk-ecart-ui', chkIconId: 'chk-ecart-icon' }
      ];

      function setExpanded(sec, expand) {
        const label = document.getElementById(sec.labelId);
        const content = document.getElementById(sec.contentId);
        const chevron = document.getElementById(sec.chevronId);
        const chk = document.getElementById(sec.chkId);
        label?.setAttribute('aria-expanded', String(expand));
        chk && (chk.checked = expand);
        if (content) content.classList.toggle('hidden', !expand);
        if (chevron) chevron.style.transform = expand ? 'rotate(180deg)' : 'rotate(0deg)';
        // custom checkbox UI color
        const box = document.getElementById(sec.chkUiId);
        const icon = document.getElementById(sec.chkIconId);
        if (box) {
          box.classList.toggle('bg-[#649DAD]', expand);
          box.classList.toggle('border-[#649DAD]', expand);
          box.classList.toggle('border-neutral-300', !expand);
        }
        if (icon) {
          icon.classList.toggle('opacity-100', expand);
          icon.classList.toggle('opacity-0', !expand);
        }
      }

      function wireToggle(sec) {
        const label = document.getElementById(sec.labelId);
        const chk = document.getElementById(sec.chkId);
        const btnChev = document.getElementById(sec.btnChevronId);
        label?.addEventListener('click', (e) => {
          if ((e.target instanceof HTMLElement) && (e.target.closest('button') || e.target.closest('input'))) return;
          const expanded = label.getAttribute('aria-expanded') === 'true';
          setExpanded(sec, !expanded);
        });
        chk?.addEventListener('change', () => setExpanded(sec, chk.checked));
        btnChev?.addEventListener('click', (e) => {
          e.preventDefault();
          e.stopPropagation();
          const expanded = label.getAttribute('aria-expanded') === 'true';
          setExpanded(sec, !expanded);
        });
      }

      function updateSection(sec) {
        const ta = document.getElementById(sec.textId);
        const counter = document.getElementById(sec.counterId);
        const status = document.getElementById(sec.statusId);
        const sumBadge = document.getElementById(sec.sumBadgeId);
        const len = (ta?.value || '').trim().length;
        if (counter) {
          counter.textContent = `${len}/${sec.min}`;
          counter.classList.toggle('text-red-600', len < sec.min);
          counter.classList.toggle('text-neutral-500', len >= sec.min);
        }
        const ok = len >= sec.min;
        const baseStatusClasses = 'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium';
        if (status) {
          status.textContent = ok ? 'Complet' : 'Incomplet';
          status.className = ok ? `${baseStatusClasses} bg-[#10B981] text-white` : `${baseStatusClasses} bg-neutral-900 text-white`;
        }
        if (sumBadge) {
          sumBadge.textContent = (sec.key === 'derog' ? 'Dérogations: ' : 'Écarts: ') + (ok ? '✅' : '⚠️');
        }
      }

      // Wire sections
      sections.forEach(sec => {
        wireToggle(sec);
        const ta = document.getElementById(sec.textId);
        ta?.addEventListener('input', () => updateSection(sec));
        // initial (leave collapsed until checkbox is checked)
        updateSection(sec);
      });

      // Guide des articles
      document.getElementById('btnOpenGuide')?.addEventListener('click', () => {
        alert("Guide des articles:\n- D.IV.5: Écart à schéma/carte/guide/permis\n- D.IV.6 à D.IV.11: Hypothèses de dérogation au plan de secteur\n- D.IV.13: Dérogation au plan de secteur ou normes du guide régional");
      });
    })();
  </script>
</div>
              </div>
            </details>

            <!-- Cadre 6 — Documents à joindre -->
            <details id="cadre-6" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex pt-3 pr-4 pb-3 pl-4 items-center justify-between">
                  <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 6 — Documents à joindre</div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-4">
  <!-- Sections: Documents à joindre -->
  <!-- Section: Obligatoires -->
  <div class="space-y-3">
    <div class="text-sm font-semibold tracking-tight text-neutral-900">Documents obligatoires pour toute demande</div>

    <!-- Row: Formulaire de demande (pré-coché, inclus) -->
    <div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="included" data-copies="4" data-attached="true">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-formulaire" type="checkbox" class="sr-only peer" checked="">
            <div class="w-5 h-5 border-2 border-[#649DAD] bg-[#649DAD] rounded flex items-center justify-center transition-all peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <div class="flex flex-col">
            <label for="doc-formulaire" class="cursor-pointer text-sm font-medium text-neutral-900">Le présent formulaire de demande de permis</label>
            <div class="mt-1 inline-flex items-center gap-1 text-[12px] text-neutral-600">
              <span class="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] border-[#649DAD]/30 bg-[#649DAD]/10 text-[#649DAD]">✔ Pré-coché</span>
            </div>
          </div>
        </div>
        <div class="text-[13px] text-neutral-600">Précise les types d’actes et travaux envisagés. Signé par le demandeur et, sauf dispense, par un architecte.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="inline-flex items-center gap-1.5 text-[12px] text-[#10B981]">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
            Inclus
          </div>
          
        </div>
      </div>
    </div>

    <!-- Row: Reportage photo (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-photos" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-photos" class="cursor-pointer text-sm font-medium text-neutral-900">Un reportage photographique</label>
        </div>
        <div class="text-[13px] text-neutral-600">Photos en couleurs : 2 vues front de voirie + vis-à-vis, 3 vues limites/parcelles, 3 vues éloignées avec indication de l’implantation.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="create" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg>
              Créer
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Plans (Uploader) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Les plans (voir cadre 7)</label>
        </div>
        <div class="text-[13px] text-neutral-600">Plans requis selon le type d’actes et travaux.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Notice/Etude incidences (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-incidences" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-incidences" class="cursor-pointer text-sm font-medium text-neutral-900">Une notice d’évaluation des incidences / étude d’incidences</label>
        </div>
        <div class="text-[13px] text-neutral-600">Document requis par le Code de l’environnement.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="create" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg>
              Créer
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Décret SOLS (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="3" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-sols" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-sols" class="cursor-pointer text-sm font-medium text-neutral-900">Formulaire « Décret SOLS »</label>
        </div>
        <div class="text-[13px] text-neutral-600">Vérifier les données dans la BDES. Joindre formulaire et annexes si requis.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">3 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="create" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg>
              Créer
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: PEB (Uploader) -->
    <div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="2" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-peb" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-peb" class="cursor-pointer text-sm font-medium text-neutral-900">Formulaire PEB</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si applicable. Mentionner la référence du dossier PEB.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Statbel (Créer) -->
    <div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="create" data-copies="2" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-statbel" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-statbel" class="cursor-pointer text-sm font-medium text-neutral-900">Formulaire statistique SPF Économie (Statbel)</label>
        </div>
        <div class="text-[13px] text-neutral-600">Modèle I (habitation) ou Modèle II (autres). Pas requis si pas de bâtiment.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="create" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg>
              Créer
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Section: Patrimoine -->
  <div class="space-y-3">
    <div class="text-sm font-semibold tracking-tight text-neutral-900">Documents spécifiques (Code wallon du Patrimoine)</div>

    <div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="2" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-peb" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-peb" class="cursor-pointer text-sm font-medium text-neutral-900">Autorisation patrimoniale valide</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si le projet porte sur un bien classé ou assimilé (liste de sauvegarde, effets du classement) Référence : </div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div><div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="2" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-peb" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-peb" class="cursor-pointer text-sm font-medium text-neutral-900">Avis archéologique préalable</label>
        </div>
        <div class="text-[13px] text-neutral-600">Pour projet ≥ 1 hectare (Code wallon du Patrimoine). Joindre avis ou preuve de demande</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div></div><div class="space-y-3">
    <div class="text-sm font-semibold text-neutral-900 tracking-tight">Documents spécifiques requis par la législation relative à la conservation de la nature (si d’application)</div>

    <!-- Row: Formulaire de demande (pré-coché, inclus) -->
    

    <!-- Row: Reportage photo (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-photos" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-photos" class="cursor-pointer text-sm font-medium text-neutral-900">Évaluation appropriée des incidences</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si le projet impacte des espèces protégées ou un site Natura 2000</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">3 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="create" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 7 5-5 5 5" class=""></path><path d="M12 2v20" class=""></path><path d="M5 17l5 5 5-5" class=""></path></svg>
              Créer
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Plans (Uploader) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Demande de dérogation aux mesures de protection de la nature</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si atteinte possible à des espèces protégées ou habitats. À obtenir auprès du DNF (SPW). Doit être délivrée avant l’autorisation du permis</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">3 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Notice/Etude incidences (Créer) -->
    

    <!-- Row: Décret SOLS (Créer) -->
    

    <!-- Row: PEB (Uploader) -->
    

    <!-- Row: Statbel (Créer) -->
    
  </div><div class="space-y-3">
    <div class="text-sm font-semibold text-neutral-900 tracking-tight">Documents spécifiques relatifs à la voirie communale ou régionale (si d’application)</div>

    <!-- Row: Formulaire de demande (pré-coché, inclus) -->
    

    <!-- Row: Reportage photo (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-photos" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-photos" class="cursor-pointer text-sm font-medium text-neutral-900">Dossier voirie (communale/régionale)</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si création, modification ou suppression de voirie(s) communale(s)</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Plans (Uploader) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Note démontrant la qualité des aménagements cyclables</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si projet de voirie régionale (réalisation, réfection, aménagement)</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">3 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Notice/Etude incidences (Créer) -->
    

    <!-- Row: Décret SOLS (Créer) -->
    

    <!-- Row: PEB (Uploader) -->
    

    <!-- Row: Statbel (Créer) -->
    
  </div><div class="space-y-3">
    <div class="text-sm font-semibold text-neutral-900 tracking-tight">Documents spécifiques relatifs aux Risques Naturels (si d’application)</div>

    <!-- Row: Formulaire de demande (pré-coché, inclus) -->
    

    <!-- Row: Reportage photo (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-photos" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-photos" class="cursor-pointer text-sm font-medium text-neutral-900">Document démontrant l’absence d’aggravation en zone inondable (faible ou moyenne)</label>
        </div>
        <div class="text-[13px] text-neutral-600">Joindre les pièces techniques (circulaire constructibilité en zone inondable)</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Plans (Uploader) -->
    <div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Document démontrant faisabilité en zone inondable élevée</label>
        </div>
        <div class="text-[13px] text-neutral-600">Doit prouver que le projet est faisable, n’aggrave pas la situation et limite la vulnérabilité. Joindre les éléments techniques du référentiel « constructions et aménagements en zone inondable »</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div><div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Document démontrant que le projet n’aggrave pas la situation en zone déjà inondée</label>
        </div>
        <div class="text-[13px] text-neutral-600"></div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div><div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex gap-3 items-start">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Document démontrant absence d’obstacle aux servitudes d’écoulement</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si site concerné par servitude d’écoulement. Doit inclure mesures de limitation de la vulnérabilité.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div><div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Mesures en matière de lutte contre le radon</label>
        </div>
        <div class="text-[13px] text-neutral-600">Prévoir mesures techniques actives et passives (zones à risque définies par l’AFCN)</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Notice/Etude incidences (Créer) -->
    

    <!-- Row: Décret SOLS (Créer) -->
    

    <!-- Row: PEB (Uploader) -->
    

    <!-- Row: Statbel (Créer) -->
    
  </div><div class="space-y-3">
    <div class="text-sm font-semibold text-neutral-900 tracking-tight">Documents spécifiques requis relatifs au Code de l’eau</div>

    <!-- Row: Formulaire de demande (pré-coché, inclus) -->
    

    <!-- Row: Reportage photo (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-photos" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-photos" class="cursor-pointer text-sm font-medium text-neutral-900">Rapport technique d’infiltration</label>
        </div>
        <div class="text-[13px] text-neutral-600">Démontrer la capacité d’infiltration des eaux pluviales ou usées épurées (Code de l’Eau). Référentiel SPW-TLPE à respecter</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">4 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Plans (Uploader) -->
    

    <!-- Row: Notice/Etude incidences (Créer) -->
    

    <!-- Row: Décret SOLS (Créer) -->
    

    <!-- Row: PEB (Uploader) -->
    

    <!-- Row: Statbel (Créer) -->
    
  </div><div class="space-y-3">
    <div class="text-sm font-semibold text-neutral-900 tracking-tight">Autres documents spécifiques (si d’application)</div>

    <!-- Row: Formulaire de demande (pré-coché, inclus) -->
    

    <!-- Row: Reportage photo (Créer) -->
    <div class="doc-row rounded-md border border-neutral-200 bg-white p-3" data-type="create" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-photos" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-photos" class="cursor-pointer text-sm font-medium text-neutral-900">Procès-verbal de réunion de projet (art. D.IV.31 CoDT)</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si une réunion de projet a eu lieu. PV non décisionnel</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Plans (Uploader) -->
    <div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Note de calcul relative à l’éclairage naturel</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si création d’un ou plusieurs logements dans une construction existante</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div><div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex gap-3 items-start">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Formulaire acoustique</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si soumis aux normes acoustiques (zones B, C, D – aéroports Liège-Bierset et Charleroi). Document RU/ACQ</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">3 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div><div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="4" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-plans" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" class=""></path></svg>
            </div>
          </div>
          <label for="doc-plans" class="cursor-pointer text-sm font-medium text-neutral-900">Étude d’opportunité préalable à extension réseau de gaz</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si projet porte sur : - Constructions publiques collectives - Nouveaux parcs d’activités - Rénovation par quartiers ou logements publics - Travaux de voiries soumis à coordination</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 V3" class=""></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Row: Notice/Etude incidences (Créer) -->
    

    <!-- Row: Décret SOLS (Créer) -->
    

    <!-- Row: PEB (Uploader) -->
    

    <!-- Row: Statbel (Créer) -->
    
  </div></div>
              </div>
            </details>

            <!-- Cadre 7 — Plans à fournir -->
            <details id="cadre-7" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex items-center justify-between px-4 py-3">
                  <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 7 — Plans à fournir</div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-4">
                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
  <!-- Section 1 — Plans requis pour toute demande -->
  <div class="bg-white border-neutral-200 border rounded-md sm:col-span-2">
    <div class="flex border-neutral-200 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
      <div class="text-sm font-semibold tracking-tight text-neutral-900">Plans requis pour toute demande</div>
      <div class="text-[12px] text-neutral-500">Cochez et joignez les plans</div>
    </div>
    <div class="overflow-x-auto pt-2 pr-2 pb-2 pl-2">
      <table class="w-full border-collapse text-sm">
        <thead class="text-neutral-700 bg-neutral-50">
          <tr class="">
            <th class="text-left px-3 py-2 text13px] font-medium">Plan</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Échelle</th>
            <th class="text-[13px] font-medium text-left pt-2 pr-3 pb-2 pl-3">Caractéristiques minimales</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Exemplaires</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Action</th>
          </tr>
        </thead>
        <tbody id="plans-required-rows" class="align-top">
          <!-- Plan de situation -->
          <tr data-row="" data-section="required" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer" checked="">
                  <span class="w-5 h-5 border-2 border-[#649DAD] bg-[#649DAD] rounded flex items-center justify-center peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-[12px] h-[12px]" viewBox="0 0 20 20" fill="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(255, 255, 255);">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="flex flex-col">
                  <span class="text-sm font-medium text-neutral-900">Plan de situation du bien</span>
                  <span class="mt-0.5 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] border-[#649DAD]/30 bg-[#649DAD]/10 text-[#649DAD]">Requis</span>
                </span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/10.000 ou 1/5.000</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Orientation</li>
                <li class="">Voies de desserte et leur dénomination (rayon 500 m)</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-">4</td>
            <td class="px-3 py-2">
              <div class="flex gap-2 items-center">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">Supprimer</button>
                
              </div>
            </td>
          </tr>
          <!-- Plan du contexte urbanistique et paysager -->
          <tr data-row="" data-section="required" class="">
            <td class="px-3 py2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer" checked="">
                  <span class="w-5 h-5 border-2 border-[#649DAD] bg-[#649DAD] rounded flex items-center justify-center peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="flex flex-col">
                  <span class="text-sm font-medium text-neutral-900">Plan du contexte urbanistique et paysager</span>
                  <span class="mt-0.5 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] border-[#649DAD]/30 bg-[#649DAD]/10 text-[#649DAD]">Requis</span>
                </span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/1.000 ou 1/500</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li class="">Orientation, voirie et statut juridique</li>
                <li class="">Constructions existantes (50 m), relief, végétation</li>
                <li class="">Arbres/haies remarquables, éléments marquants (cours d’eau...)</li>
                <li class="">Indication des prises de vue photo</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">4</td>
            <td class="px-3 py-2">
              <div class="flex gap-2 items-center">
                <input type="file" class="hidden">
                
                
              <div class="flex gap-2 items-center">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">Supprimer</button>
                
              </div></div>
            </td>
          </tr>
          <!-- Plan d’implantation -->
          <tr data-row="" data-section="required" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer" checked="">
                  <span class="w-5 h-5 border-2 border-[#649DAD] bg-[#649DAD] rounded flex items-center justify-center peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-[12px] h-[12px]" viewBox="0 0 20 20" fill="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(255, 255, 255);">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="flex flex-col">
                  <span class="text-sm font-medium text-neutral-900">Plan d’implantation</span>
                  <span class="mt-0.5 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] border-[#649DAD]/30 bg-[#649DAD]/10 text-[#649DAD]">Requis</span>
                </span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li class="">Limites, courbes de niveau, coupes long./transv.</li>
                <li class="">Existants/projetés, servitudes, infrastructures</li>
                <li class="">Aménagement projeté (reculs, clôtures, parkings)</li>
                <li class="">Végétation à maintenir/abattre + replantations</li>
                <li>Repère domaine public, équipements voirie, Code de l’Eau</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">4</td>
            <td class="px-3 py-2">
              <div class="flex gap-2 items-center">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">Supprimer</button>
                
              </div>
            </td>
          </tr>
          <!-- Plan de visualisation du projet -->
          <tr data-row="" data-section="required" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer" checked="">
                  <span class="w-5 h-5 border-2 border-[#649DAD] bg-[#649DAD] rounded flex items-center justify-center peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-[12px] h-[12px]" viewBox="0 0 20 20" fill="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(255, 255, 255);">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="flex flex-col">
                  <span class="text-sm font-medium text-neutral-900">Plan de visualisation du projet</span>
                  <span class="mt-0.5 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] border-[#649DAD]/30 bg-[#649DAD]/10 text-[#649DAD]">Requis</span>
                </span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/100 ou 1/50</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li class="">Plans de niveaux (L x H x P, affectations)</li>
                <li class="">Nb/surface de logements, élévations</li>
                <li>Légende matériaux/toitures</li>
                <li class="">Coupes cotées (rez, sol exist./projeté, contiguïtés)</li>
                <li class="">Composition parois/toitures, conduits fumée/ventilation</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">4</td>
            <td class="px-3 py-2">
              <div class="flex gap-2 items-center">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex gap-1.5 hover:bg-neutral-50 text-xs text-neutral-700 bg-white border-neutral-200 border rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">Supprimer</button>
                
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Section 2 — Plans complémentaires -->
  

  <!-- Résumé et actions globales -->
  <div class="bg-white border-neutral-200 border rounded-md sm:col-span-2 w-full">
    
    <div class="flex border-neutral-200 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
      <div class="text-sm font-semibold text-neutral-900 tracking-tight">Plans complémentaires (si d’application)</div>
      <div class="text-[12px] text-neutral-500">Ajoutez uniquement si nécessaire</div>
    </div><div class="overflow-x-auto p-0 w-full" style="width: 100%;">
      <table class="w-full border-collapse text-sm">
        <thead class="bg-neutral-50 text-neutral-700">
          <tr class="">
            <th class="text-[13px] font-medium text-left pt-2 pr-3 pb-2 pl-3">Plan</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Échelle</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Caractéristiques minimales</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Exemplaires</th>
            <th class="text-left px-3 py-2 text-[13px] font-medium">Action</th>
          </tr>
        </thead>
        <tbody id="plans-optional-rows" class="align-top">
          <!-- Voirie -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Modification, création ou suppression de voirie</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/200 ou 1/1.000 (profils), 1/100 ou 1/50 (transversaux)</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li class="">Plan, profils en long</li>
                <li>Coupe-type avec matériaux</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0  1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Constructions groupées -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Constructions groupées d’habitations</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li class="">Plan d’implantation avec limites des futurs lots</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Modification sensible du relief -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text font-medium text-neutral-900">Modification sensible du relief du sol</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Relief existant/projeté (courbes 0,50 m)</li>
                <li>Déblais/remblais, gestion des abords</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Enseignes -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1414l- 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Placement d’enseignes ou dispositifs de publicité</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/50 ou 1/20</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Plan, élévation, matériaux/tonalité</li>
                </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Dépôt -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Utilisation d’un terrain pour dépôt (véhicules, matériaux, déchets)</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Implantation, superficie/hauteur</li>
                <li>Nature des matériaux, clôture</li>
                <li>Situation après enlèvement, gestion des abords</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Installations mobiles -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 10 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Utilisation d’un terrain pour installations mobiles</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Superficie, implantation</li>
                <li>Genre/nombre, clôture éventuelle</li>
                <li>Gestion des abords</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
 </button>
                <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Boisement / déboisement -->
          <tr data-row="" data-section="optional" class="">
            <td class="px-3 py-2">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Boisement, déboisement, culture de sapins de Noël</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Situation et superficie</li>
                <li class="">Essences</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 55" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Abattage d’arbres / haies -->
          <tr data-row="" data-section="optional" class="">
            <td class="pt-2 pr-3 pb-2 pl-3">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" ="sr-only="" peer"="">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Abattage d’arbres isolés, haies, allées, végétation remarquable</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
              <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li>Arbres/haies à maintenir/abattre (essences)</li>
                <li>Identification (genre/espèce, circonf., âge, répartition)</li>
                <li class="">Situation après abattage + plantations compensatoires</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
 <div class="text-[12px] text-neutral-500" data-status="">—</div>
              </div>
            </td>
          </tr>
          <!-- Défrichement -->
          <tr data-row="" data-section="optional" class="">
            <td class="pt-2 pr-3 pb-2 pl-3">
              <label class="flex items-start gap-2 cursor-pointer">
                <span class="relative mt-0.5">
                  <input type="checkbox" class="sr-only peer">
                  <span class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 4 9.293L8 13.293l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd" class=""></path>
                    </svg>
                  </span>
                </span>
                <span class="text-sm font-medium text-neutral-900">Défrichement ou modification de végétation</span>
              </label>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">1/500 ou 1/200</td>
            <td class="px-3 py-2">
 <ul class="text-[12px] text-neutral-600 list-disc pl-4 space-y-0.5">
                <li class="">Situation/superficie</li>
                <li>Nature de la végétation</li>
                <li class="">Situation après modification</li>
              </ul>
            </td>
            <td class="px-3 py-2 text-[13px] text-neutral-700">Selon cas</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <input type="file" class="hidden">
                <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 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" class="w-3.5 h-3.5" box="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10l5-5 5 5" class=""></path><path d="M12 15V3" class=""></path></svg>
                  Uploader
                </button>
                <div class="text-[12px] text-neutral-500" data="">—</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><div class="sm:col-span-2 bg-neutral-50/60 border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3">
    <div class="flex items-center justify-between gap-3 flex-wrap">
      <div class="flex items-center gap-2 flex-wrap text-[12px] text-neutral-700">
        <span>Plans requis: <span id="count-required" class="font-medium text-neutral-900">4</span></span>
        <span>• Plans fournis: <span id="count-provided" class="font-medium text-neutral-900">0</span></span>
        <span class="">• Manquants: <span id="count-missing" class="font-medium text-neutral-900">4</span></span>
      </div>
      <div class="flex items-center gap-2">
        <button id="btnPlansExport" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z" class=""></path><path d="M14 2v6h6" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
          Exporter la liste (PDF)
        </button>
        <button id="btnPlansZip" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="5" x="2" y="3" rx="1" class=""></rect><path d="M4 8v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" class=""></path><path d="M10 12h4" class=""></path></svg>
          Télécharger les plans (ZIP)
        </button>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.getElementById('aura-emezkohyg');
      if (!root) return;

      function updateCounts() {
        const reqRows = root.querySelectorAll('tr[data-section="required"]');
        const providedAll = root.querySelectorAll('tr[data-uploaded="true"]');
        const providedReq = root.querySelectorAll('tr[data-section="required"][data-uploaded="true"]');
        const cReq = root.querySelector('#count-required');
        const cProv = root.querySelector('#count-provided');
        const cMiss = root.querySelector('#count-missing');
        if (cReq) cReq.textContent = reqRows.length.toString();
        if (cProv) cProv.textContent = providedAll.length.toString();
        if (cMiss) cMiss.textContent = Math.max(0, reqRows.length - providedReq.length).toString();
      }

      root.addEventListener('click', (e) => {
        const btn = e.target.closest('button[data-action="upload"]');
        if (!btn) return;
        const row = btn.closest('tr[data-row]');
        const input = row?.querySelector('input[type="file"]');
        input && input.click();
      });

      root.addEventListener('change', (e) => {
        const input = e.target;
        if (!(input instanceof HTMLInputElement)) return;
        if (input.type !== '') return;
        const row = input.closest('tr[data-row]');
        const status = row?.querySelector('[data-status]');
        if (!row || !status) return;
        if (input.files && input.files.length) {
          row.dataset.uploaded = 'true';
          status.textContent = input.files.length === 1 ? input.files[0].name : `${input.files.length} fichiers`;
          status.classList.remove('text-neutral-500');
          status.classList.add('text-[#10B981]');
        } else {
          row.dataset.uploaded = 'false';
          status.textContent = '—';
          status.classList.add('text-neutral-500');
          status.classList.remove('text-[#10B981]');
        }
        updateCounts();
      });

      root.querySelector('#btnPlansExport')?.addEventListener('click', () => {
        window.print();
      });

      root.querySelector('#btnPlansZip')?.addEventListener('click', () => {
        const files = Array.from(root.querySelectorAll('input[type="file"]')).flatMap(i => Array.from(i.files || []));
        if (!files.length) {
          alert('Aucun plan joint pour le moment.');
          return;
        }
        alert(`${files.length} plan(s) prêt(s) pour l’export ZIP (démo).`);
      });

      updateCounts();
    })();
  </script>
</div>
                </div>
              </div>
            </details>

            <!-- Cadre 8 — Données personnelles -->
            <details id="cadre-8" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex items-center justify-between px-4 py-3">
                  <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 8 — Données personnelles</div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-4">
                  <div class="text-[13px] text-neutral-700 bg-neutral-50/60 border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3">Les traitements de données à caractère personnel ont un caractère réglementaire.
Conformément à la réglementation en matière de protection des données et au Code du développement territorial (CoDT), les données à caractère personnel ne seront utilisées par la Direction générale opérationnelle de l’Aménagement du territoire, du Logement, du Patrimoine et de l’Énergie du Service public de Wallonie, si la demande est introduite auprès d’un fonctionnaire délégué, ou par la commune auprès de laquelle la demande a été introduite si la demande est introduite auprès d’une commune, qu’en vue d’assurer le suivi de votre dossier.
Ces données ne seront communiquées qu’aux autorités, instances, commissions et services prévus dans le CoDT, et particulièrement son Livre IV, aux fins d’utilisation dans le cadre des finalités également détaillées dans le CoDT. Le SPW ou la commune peut également communiquer vos données à caractère personnel à des tiers si la loi l’y oblige ou si le SPW ou la commune estime de bonne foi qu’une telle divulgation est nécessaire pour se conformer à une procédure légale ou pour les besoins d’une procédure judiciaire.
Ces données ne seront ni vendues ni utilisées à des fins de marketing.
Elles seront conservées aussi longtemps que le permis ou le certificat d’urbanisme est valide. Pour les permis ou certificats d’urbanisme périmés, les données électroniques seront conservées sous une forme minimisant leur traitement au SPW ou à la commune de savoir qu’un permis ou certificat d’urbanisme vous a été attribué et qu’il est périmé.
Si la demande est introduite auprès d’un fonctionnaire délégué :
 Vous pouvez gratuitement rectifier vos données, vous opposer ou en limiter le traitement auprès du fonctionnaire délégué.
Sur demande via un formulaire disponible sur l’ABC des démarches du Portail de la Wallonie, vous pouvez gratuitement avoir accès à vos données ou obtenir de l’information sur un traitement qui vous concerne. Le Délégué à la protection des données du Service public de Wallonie en assurera le suivi.
 Toute correspondance est à adresser à dpo@spw.wallonie.be ou au Directeur Général du SPW – TLPE, rue des Brigades d’Irlande, 1 à 5100 Jambes.
Pour plus d’informations sur la protection des données à caractère personnel au SPW, rendez-vous sur l’ABC des démarches du Portail de la Wallonie.

Si la demande est introduite auprès d’une commune :
 Vous pouvez gratuitement rectifier vos données, vous opposer ou en limiter le traitement auprès de la commune.
Vous pouvez gratuitement avoir accès à vos données ou obtenir de l’information sur un traitement qui vous concerne en contactant le responsable du traitement – le Délégué à la protection des données (ou Data Protection Officer – DPO) – de la commune auprès de laquelle la demande a été introduite.
Enfin, si dans le mois de votre demande, vous n’avez aucune réaction du SPW lorsque la demande a été introduite auprès d’un fonctionnaire délégué, ou de la commune lorsque la demande a été introduite auprès d’une commune, vous pouvez introduire une réclamation soit directement à l’Autorité de protection des données (APD) : https://www.autoriteprotectiondonnees.be/ ou contacter l’Autorité de protection des données pour introduire une réclamation à l’adresse suivante : 35, Rue de la Presse à 1000 Bruxelles ou via l’adresse courriel : contact@apd-gba.be</div>
                  <label class="inline-flex items-center gap-2 text-sm"><input id="consent-traitement" type="checkbox" class="h-4 w-4 text-[#649DAD] border-neutral-300 rounded">Je confirme avoir pris connaissance des informations relatives à l’utilisation des données personnelles.</label>
                  
                </div>
              </div>
            </details>

            <!-- Cadre 9 — Signatures -->
            <details id="cadre-9" class="group rounded-lg border open:shadow-sm border-neutral-200 bg-white" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex items-center justify-between px-4 py-3">
                  <div class="text-sm font-semibold tracking-tight text-neutral-900">Cadre 9 — Signatures</div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6">
                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div class="">
                      <div class="text-[13px] text-neutral-500 mb-2">Demandeur</div>
                      <div class="rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                        <canvas id="sign-demandeur" class="w-full h-40 bg-white rounded-md border border-neutral-200" width="1014" height="320"></canvas>
                        <div class="mt-2 flex items-center justify-end gap-2">
                          <button type="button" data-clear="sign-demandeur" class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs border-neutral-200 bg-white hover:bg-neutral-50">Effacer</button>
                          <button type="button" data-save="sign-demandeur" class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800">Enregistrer</button>
                        </div>
                      </div>
                    </div>
                    <div class="">
                      <div class="text-[13px] text-neutral-500 mb-2">Architecte</div>
                      <div class="rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
                        <canvas id="sign-archi" class="w-full h-40 bg-white rounded-md border border-neutral-200" width="1014" height="320"></canvas>
                        <div class="mt-2 flex items-center justify-end gap-2">
                          <button type="button" data-clear="sign-archi" class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs border-neutral-200 bg-white hover:bg-neutral-50">Effacer</button>
                          <button type="button" data-save="sign-archi" class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800">Enregistrer</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="">
                      <label class="text-[13px] text-neutral-500">Fait à</label>
                      <input id="sign-lieu" type="text" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                    </div>
                    <div class="">
                      <label class="text-[13px] text-neutral-500">Le</label>
                      <input id="sign-date" type="date" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white">
                    </div>
                    
                  </div>
                  <script>
                    // Simple signature pad
                    document.addEventListener('DOMContentLoaded', () => {
                      function initPad(id) {
                        const canvas = document.getElementById(id);
                        if (!canvas) return;
                        const ctx = canvas.getContext('2d');
                        let drawing = false, last = null;

                        const getPos = (e) => {
                          const r = canvas.getBoundingClientRect();
                          const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
                          const y = (e.touches ? e.touches[0].clientY : e.clientY) - r.top;
                          return {x, y};
                        };

                        const start = (e) => { drawing = true; last = getPos(e); e.preventDefault(); };
                        const move = (e) => {
                          if (!drawing) return;
                          const p = getPos(e);
                          ctx.lineWidth = 2;
                          ctx.lineCap = 'round';
                          ctx.strokeStyle = '#111827';
                          ctx.beginPath();
                          ctx.moveTo(last.x, last.y);
                          ctx.lineTo(p.x, p.y);
                          ctx.stroke();
                          last = p;
                          e.preventDefault();
                        };
                        const end = () => { drawing = false; };

                        canvas.addEventListener('mousedown', start);
                        canvas.addEventListener('mousemove', move);
                        window.addEventListener('mouseup', end);
                        canvas.addEventListener('touchstart', start, {passive:false});
                        canvas.addEventListener('touchmove', move, {passive:false});
                        canvas.addEventListener('touchend', end);

                        document.querySelector(`[data-clear="${id}"]`)?.addEventListener('click', () => {
                          ctx.clearRect(0,0,canvas.width, canvas.height);
                        });
                        document.querySelector(`[data-save="${id}"]`)?.addEventListener('click', () => {
                          const data = canvas.toDataURL('image/png');
                          console.log('Signature', id, data.slice(0,32) + '...');
                          alert('Signature sauvegardée.');
                        });

                        // Scale canvas for crisp lines
                        const scale = window.devicePixelRatio || 1;
                        const resize = () => {
                          const rect = canvas.getBoundingClientRect();
                          canvas.width = rect.width * scale;
                          canvas.height = rect.height * scale;
                          ctx.scale(scale, scale);
                          ctx.clearRect(0,0,canvas.width, canvas.height);
                        };
                        resize(); window.addEventListener('resize', resize);
                      }
                      initPad('sign-demandeur');
                      initPad('sign-archi');

                      document.getElementById('btnGeneratePdf')?.addEventListener('click', () => {
                        window.print();
                      });
                    });
                  </script>
                </div>
              </div>
            </details>

            <!-- Annexe — Grille analytique -->
            <details class="group open:shadow-sm bg-white border-neutral-200 border rounded-lg" open="">
              <summary class="cursor-pointer select-none">
                <div class="flex items-center justify-between px-4 py-3">
                  <div class="text-sm font-semibold tracking-tight text-neutral-900">Annexe — Grille analytique</div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </div>
              </summary>
              <div class="border-t border-neutral-200">
                <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-4">
  <!-- Skip link -->
  <a href="#ga-content-start" class="sr-only focus:not-sr-only focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900 inline-block text-[13px] text-neutral-700 bg-neutral-100 rounded px-3 py-1">Aller au contenu</a>

  <!-- Header bar -->
  <div class="flex items-center justify-between gap-3 print:hidden">
    <h2 class="text-[20px] sm:text-[22px] leading-tight font-semibold tracking-tight text-neutral-900">Annexe — Grille analytique des contraintes</h2>
    <a href="#etude-de-faisabilite" role="button" aria-label="Ouvrir l’Étude de faisabilité" class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium bg-neutral-900 text-white hover:bg-neutral-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
      <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="file-text" class="lucide lucide-file-text w-4 h-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
      Ouvrir l’Étude de faisabilité
      <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="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
    </a>
  </div>

  <!-- Notice -->
  <div class="rounded-md border border-neutral-200 bg-neutral-50/60 p-3">
    <div class="flex items-start gap-2 text-[13px]">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#B45309" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="alert-triangle" class="lucide lucide-alert-triangle w-4 h-4 mt-0.5 text-[#B45309]"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg>
      <p class="text-neutral-800">⚠️ Cette grille ne doit pas être complétée par le demandeur. Elle synthétise les contraintes légales et réglementaires applicables susceptibles d’influencer la conception du projet.</p>
    </div>
  </div>

  <!-- Navigation aids -->
  <div class="grid grid-cols-1 sm:grid-cols-[260px,1fr] gap-4">
    <!-- TOC + Search -->
    <aside class="space-y-3">
      <div class="print:hidden">
        <label for="ga-search" class="text-[13px] text-neutral-500">Rechercher dans la grille…</label>
        <div class="mt-1 relative">
          <input id="ga-search" type="search" placeholder="Mots-clés, expressions…" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white pr-9 focus:outline-none focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900/10" aria-label="Rechercher dans la grille">
          <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="search" class="lucide lucide-search w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
        </div>
      </div>

      <nav aria-label="Sommaire de la grille" class="print:hidden">
        <div class="text-[13px] text-neutral-500 mb-1">Sommaire</div>
        <ul class="space-y-1">
          <li class=""><a href="#amenagement" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#amenagement"><span class="">Aménagement du territoire et urbanisme</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">A</span></a></li>
          <li class=""><a href="#antecedents" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#antecedents"><span>Antécédents de la demande</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">B</span></a></li>
          <li class=""><a href="#patrimoine" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#patrimoine"><span>Code wallon duimoine</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">C</span></a></li>
          <li class=""><a href="#contraintes-env" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#contraintes-env"><span class="">Contraintes environnementales et de terrain</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">D</span></a></li>
          <li><a href="#conservation-nature" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#conservation-nature" aria-current="true"><span>Conservation de la Nature</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">E</span></a></li>
          <li><a href="#code-eau" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#code-eau"><span>Code de l’eau</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">F</span></a></li>
          <li><a href="#equipement" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#equipement"><span>Équipement du terrain</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">G</span></a></li>
          <li><a href="#autres" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#autres"><span>Autres caractéristiques du bien</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">H</span></a></li>
          <li><a href="#mention-reglementaire" class="group flex items-center justify-between rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" data-toc-link="#mention-reglementaire"><span>Mention réglementaire finale</span><span class="text-[11px] text-neutral-400 group-hover:text-neutral-500">I</span></a></li>
        </ul>
      </nav>
    </aside>

    <!-- Content -->
    <div class="space-y-6" id="ga-content-start">
      <!-- Controls -->
      <div class="flex items-center justify-end gap-2 print:hidden">
        <button type="button" id="btn-collapse-all" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-2 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
          Tout plier
        </button>
        <button type="button" id="btn-expand-all" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-2 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900">
          Tout déplier
        </button>
      </div>

      <!-- Section A -->
      <section id="amenagement" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Aménagement du territoire et urbanisme</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#amenagement" aria-label="Copier le lien vers Aménagement du territoire et urbanisme">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="" class="">Outils d’aménagement du territoire et d’urbanisme</li>
          <li data-filter-item="">Schéma de développement territorial si application de l’article D.II.16 du CoDT</li>
          <li data-filter-item="">Plan de secteur</li>
          <li data-filter-item="" class="">Carte d’affectation des sols dans le cadre d’une ZEC/ZER</li>
          <li data-filter-item="">Schéma de développement pluricommunal</li>
          <li data-filter-item="" class="">Schéma de développement communal</li>
          <li data-filter-item="">Schéma d’orientation local</li>
          <li data-filter-item="">Guide régional d’urbanisme : RGBPmr – RGBPZu – RGBSR – RGUEDP – RUQAC</li>
          <li data-filter-item="">Guide communal d’urbanisme</li>
          <li data-filter-item="">Permis d’urbanisation</li>
          <li data-filter-item="">Bien comportant un arbre – arbuste – une haie remarquable</li>
          <li data-filter-item="">Bien soumis à la taxation des bénéfices résultant de la planification</li>
          <li data-filter-item="">Site à réaménager, site de réhabilitation paysagère et environnementale, périmètre de remembrement urbain, de rénovation urbaine, de revitalisation urbaine, zone d’initiative privilégiée</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section B -->
      <section id="antecedents" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Antécédents de la demande</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#antecedents" aria-label="Copier le lien vers Antécédents de la demande">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="">Intro (phrase explicative)</li>
          <li data-filter-item="">Permis d’urbanisme déjà délivrés pour le terrain</li>
          <li data-filter-item="">Certificat d’urbanisme n°2</li>
          <li data-filter-item="">Autres permis relatifs au bien (urbanisation, autorisation de classe 3, environnement, unique, implantation commerciale, intégrée, …)</li>
          <li data-filter-item="" class="">Procès-verbal de constat d’une infraction urbanistique</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section C -->
      <section id="patrimoine" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Code wallon du Patrimoine</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#patrimoine" aria-label="Copier le lien vers Code wallon du Patrimoine">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="">Bien classé ou bien assimilé (inscription sur la liste de sauvegarde ou soumis provisoirement aux effets du classement)</li>
          <li data-filter-item="">Bien situé dans une zone de protection d’un bien classé</li>
          <li data-filter-item="">Bien classé inscrit sur la liste du patrimoine exceptionnel de Wallonie</li>
          <li data-filter-item="">Bien inscrit sur la liste du patrimoine mondial ou situé dans une zone tampon</li>
          <li data-filter-item="">Bien à l’inventaire régional du patrimoine – bien pastillé</li>
          <li data-filter-item="">Bien situé dans le périmètre de la carte archéologique</li>
          <li data-filter-item="">Grand projet au sens du COPAT</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section D -->
      <section id="contraintes-env" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Contraintes environnementales et de terrain</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#contraintes-env" aria-label="Copier le lien vers Contraintes environnementales et de terrain">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="">Risques naturels ou contraintes géotechniques majeurs</li>
          <li data-filter-item="">L’inondation : très faible – faible – moyen – élevé – zone ayant été inondée</li>
          <li data-filter-item="">Risques d’accident majeur (SEVESO)</li>
          <li data-filter-item="">Création – modification d’un établissement SEVESO</li>
          <li data-filter-item="">Suite (contraintes)</li>
          <li data-filter-item="">Le ruissellement concentré : Très faible – faible – moyen – élevé – zone d’incertitude</li>
          <li data-filter-item="">L’éboulement d’une paroi rocheuse</li>
          <li data-filter-item="" class="">Le glissement de terrain</li>
          <li data-filter-item="">Le karst</li>
          <li data-filter-item="">Les affaissements miniers</li>
          <li data-filter-item="">Le risque sismique</li>
          <li data-filter-item="">Autre risque …</li>
          <li data-filter-item="">Localisation susceptible d’accroître le risque d’accident majeur… (SEVESO existant)</li>
          <li data-filter-item="">Présence d’un cours d’eau navigable / non navigable de 1ère – 2ème – 3ème catégorie – sans catégorie</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section E -->
      <section id="conservation-nature" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Conservation de la Nature</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#conservation-nature" aria-label="Copier le lien vers Conservation de la Nature">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <div class="text-sm leading-6 text-neutral-800">
          Bien situé dans/à proximité de :
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="">Site Natura 2000 proposé ou arrêté</li>
          <li data-filter-item="">Réserve naturelle domaniale/agréée</li>
          <li data-filter-item="">Cavité souterraine d’intérêt scientifique</li>
          <li data-filter-item="">Zone humide d’intérêt biologique</li>
          <li data-filter-item="">Réserve forestière</li>
          <li data-filter-item="">Site de grand intérêt biologique (SGIB)</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section F -->
      <section id="code-eau" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Code de l’eau</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#code-eau" aria-label="Copier le lien vers Code de l’eau">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="">Épuration des eaux usées et gestion des eaux pluviales</li>
          <li data-filter-item="" class="">Bien situé dans le périmètre du PCGE ou du PASH…</li>
          <li data-filter-item="">Captage</li>
          <li data-filter-item="" class="">Zone de prévention rapprochée / éloignée / forfaitaire autour de captage d’eau souterraine</li>
          <li data-filter-item="" class="">Zone de surveillance relative aux captages d’eaux potabilisables</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section G -->
      <section id="equipement" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Équipement du terrain</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#equipement" aria-label="Copier le lien vers Équipement du terrain">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <p class="text-sm leading-6 text-neutral-800" data-acc-body="" data-filter-item="">Terrain disposant d’un accès à une voirie suffisamment équipée en eau, en électricité, pourvue d’un revêtement solide et d’une largeur suffisante, compte tenu de la situation des lieux.</p>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section H -->
      <section id="autres" class="space-y-2">
        <div class="group flex items-center justify-between">
          <h3 class="text-[18px] leading-tight font-semibold tracking-tight text-neutral-900">Autres caractéristiques du bien</h3>
          <button type="button" class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity inline-flex items-center gap-1 text-[12px] text-neutral-600 hover:text-neutral-900 focus:outline-none" data-anchor="#autres" aria-label="Copier le lien vers Autres caractéristiques du bien">
            <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="link-2" class="lucide lucide-link-2 w-4 h-4"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
            <span>#</span>
          </button>
        </div>
        <ul class="list-disc pl-6 space-y-1.5 text-sm leading-6 text-neutral-800" data-acc-body="">
          <li data-filter-item="" class="">Périmètre de reconnaissance économique</li>
          <li data-filter-item="" class="">Décret SOL – BDES : zone pêche – zone lavande – sans couleur</li>
          <li data-filter-item="">Situé le long d’une voirie régionale – autoroute</li>
          <li data-filter-item="" class="">Situé le long d’une voie de chemin de fer</li>
          <li data-filter-item="">Situé le long d’un RAVeL</li>
          <li data-filter-item="" class="">Situé dans un périmètre d’intérêt paysager (ADESA)</li>
          <li data-filter-item="" class="">Présence d’une ligne haute-tension – canalisation</li>
          <li data-filter-item="" class="">Zone de bruit de l’aéroport de Liège-Bierset ou de Charleroi-Bruxelles Sud : PDLT A / B / C / D</li>
          <li data-filter-item="" class="">Bien repris dans le plan relatif à l’habitat permanent</li>
          <li data-filter-item="" class="">Critères de salubrité pour les logements du Code wallon de l’habitation durable</li>
        </ul>
        <div class="hidden text-[12px] text-neutral-500" data-empty="">Aucun résultat dans cette section.</div>
      </section>

      <!-- Section I -->
      <section id="mention-reglementaire" class="space-y-2">
        
        <div class="border-t border-neutral-200 pt-3">
          
        </div>
      </section>
    </div>
  </div>

  <!-- Floating top button -->
  <button type="button" id="btn-top-frame" class="fixed right-5 bottom-5 z-40 print:hidden inline-flex items-center gap-1.5 rounded-md border px-3 py-2 text-sm border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900" aria-label="Haut du cadre">
    <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="chevron-up" class="lucide lucide-chevron-up w-4 h-4"><path d="m18 15-6-6-6 6" class=""></path></svg>
    Haut du cadre
  </button>

  <!-- Scripts -->
  <script>
    (function () {
      const root = document.getElementById('aura-emezm28x6');
      if (!root) return;

      // Anchor copy
      root.querySelectorAll('[data-anchor]').forEach(btn => {
        btn.addEventListener('click', () => {
          const id = btn.getAttribute('data-anchor');
          if (!id) return;
          const url = location.origin + location.pathname + id;
          try {
            navigator.clipboard?.writeText(url);
            btn.classList.add('text-neutral-900');
            setTimeout(() => btn.classList.remove('text-neutral-900'), 900);
          } catch(e){
            // Fallback: update hash
            location.hash = id.substring(1);
          }
        });
      });

      // Collapse/Expand controls
      const collapseAll = root.querySelector('#btn-collapse-all');
      const expandAll = root.querySelector('#btn-expand-all');
      const bodies = Array.from(root.querySelectorAll('[data-acc-body]'));

      collapseAll?.addEventListener('click', () => {
        bodies.forEach(b => b.classList.add('hidden'));
      });
      expandAll?.addEventListener('click', () => {
        bodies.forEach(b => b.classList.remove('hidden'));
      });

      // Search filter
      const q = root.querySelector('#ga-search');
      function normalize(s){ return (s||'').toString().toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu,''); }
      function filter() {
        const term = normalize(q.value);
        const sections = root.querySelectorAll('section');
        sections.forEach(sec => {
          const items = sec.querySelectorAll('[data-filter-item]');
          let visibleCount = 0;
          items.forEach(it => {
            const show = !term || normalize(it.textContent).includes(term);
            it.classList.toggle('hidden', !show);
            if (show) visibleCount++;
          });
          const empty = sec.querySelector('[data-empty]');
          if (empty) empty.classList.toggle('hidden', visibleCount !== 0);
        });
      }
      q?.addEventListener('input', filter);

      // TOC active state
      const tocLinks = Array.from(root.querySelectorAll('[data-toc-link]'));
      const map = new Map(tocLinks.map(a => [a.getAttribute('data-toc-link'), a]));
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          const id = '#' + entry.target.id;
          const link = map.get(id);
          if (!link) return;
          if (entry.isIntersecting) {
            tocLinks.forEach(l => l.removeAttribute('aria-current'));
            link.setAttribute('aria-current','true');
          }
        });
      }, { rootMargin: '-40% 0px -55% 0px', threshold: 0.01 });
      root.querySelectorAll('section[id]').forEach(sec => observer.observe(sec));

      // Floating top button
      const topBtn = root.querySelector('#btn-top-frame');
      const showThreshold = 800;
      function onScroll() {
        const y = window.scrollY || document.documentElement.scrollTop;
        if (y > showThreshold) {
          topBtn?.classList.remove('hidden');
        } else {
          topBtn?.classList.add('hidden');
        }
      }
      window.addEventListener('scroll', onScroll, { passive: true });
      topBtn?.addEventListener('click', () => {
        const y = root.getBoundingClientRect().top + window.scrollY - 16;
        window.scrollTo({ top: y, behavior: 'smooth' });
      });

      // Initialize
      filter();
      onScroll();
    })();
  </script>
</div>
              </div>
            </details>
          </section>