Cadre 3

<div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-6">
  <div class="text-[13px] text-[#649DAD] bg-[#649DAD]/10 border-[#649DAD]/30 border rounded-md pt-3 pr-3 pb-3 pl-3">
    <div class="flex items-start gap-2">
      <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 w-4 h-4 mt-0.5"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
      <p class="">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).</p>
    </div>
  </div>

  

  

  <div class="">
    <label 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>
    <textarea id="obj-description" rows="10" class="mt-1 w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Description détaillée du projet..."></textarea>
  </div>

  <div class="">
    <div class="text-sm font-medium text-neutral-900 mb-4">Particularités de la demande (à remplir si d'application)</div>
    
    <div class="space-y-6">
      <!-- Relief du sol -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-relief" class="mt-0.5 rounded border-neutral-300">
          <span>Si le projet comporte également une modification sensible du relief du sol, précisez le cubage approximatif des terres à déplacer ainsi que l'indication de la nature des terres à enlever et, le cas échéant, la nature et l'origine des terres à amener :</span>
        </label>
        <div id="relief-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Détails sur la modification du relief..."></textarea>
        </div>
      </div>

      <!-- Enseignes -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-enseignes" class="mt-0.5 rounded border-neutral-300">
          <span>Si le projet comporte le placement d'une ou plusieurs enseignes ou dispositifs de publicité, précisez en 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 d'un bâtiment, apposées sur une vitrine, etc.).</span>
        </label>
        <div id="enseignes-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Caractéristiques des enseignes..."></textarea>
        </div>
      </div>

      <!-- Boisement -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-boisement" class="mt-0.5 rounded border-neutral-300">
          <span>Si le projet comporte des travaux de boisement, déboisement, abattage d'arbres isolés à haute tige, de haies ou allées, l'abattage ou la modification du système racinaire ou de l'aspect d'un arbre, arbuste ou haie remarquable, la modification de la végétation de toute zone dont le Gouvernement juge la protection nécessaire, 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) :</span>
        </label>
        <div id="boisement-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Détails sur les travaux de boisement/déboisement..."></textarea>
        </div>
      </div>

      <!-- Production d'énergie -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-energie" class="mt-0.5 rounded border-neutral-300">
          <span>Si le projet concerne un module de production d'énergie, précisez la puissance du module :</span>
        </label>
        <div id="energie-details" class="hidden">
          <input type="text" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Puissance du module...">
        </div>
      </div>

      <!-- Phasage -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-phasage" class="mt-0.5 rounded border-neutral-300">
          <span>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 de ce phasage ainsi que la date ou période souhaitée pour la seconde phase et les éventuelles phases ultérieures :</span>
        </label>
        <div id="phasage-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Description du phasage..."></textarea>
        </div>
      </div>

      <!-- Régularisation -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-regularisation" class="mt-0.5 rounded border-neutral-300">
          <span>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.</span>
        </label>
        <div id="regularisation-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Détails sur la régularisation..."></textarea>
        </div>
      </div>

      <!-- Durée limitée -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-duree" class="mt-0.5 rounded border-neutral-300">
          <span>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 :</span>
        </label>
        <div id="duree-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Durée et justification..."></textarea>
        </div>
      </div>

      <!-- Modification de permis -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-modification" class="mt-0.5 rounded border-neutral-300">
          <span>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é :</span>
        </label>
        <div id="modification-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Références du permis initial et modifications..."></textarea>
        </div>
      </div>

      <!-- Servitudes -->
      <div class="border rounded-md border-neutral-200 p-4">
        <label class="flex items-start gap-2 text-sm text-neutral-700 mb-3">
          <input type="checkbox" id="particularite-servitudes" class="mt-0.5 rounded border-neutral-300">
          <span>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 :</span>
        </label>
        <div id="servitudes-details" class="hidden">
          <textarea rows="3" class="w-full rounded-md border p-2.5 text-sm border-neutral-200 bg-white" placeholder="Nature des servitudes et contraintes..."></textarea>
        </div>
      </div>
    </div>
  </div>

  <div class="flex items-center justify-end gap-2">
    <button 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" id="btnC3Valider">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 w-4 h-4"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg> Valider le cadre
    </button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const checkboxes = document.querySelectorAll('[id^="particularite-"]');
      
      checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
          const detailsId = this.id.replace('particularite-', '') + '-details';
          const detailsDiv = document.getElementById(detailsId);
          
          if (this.checked) {
            detailsDiv.classList.remove('hidden');
          } else {
            detailsDiv.classList.add('hidden');
          }
        });
      });
    });
  </script>
</div>