Загрузка...
Сетка ограничений в аккордеонах с поиском и печатью. Отображает критерии со статусами, фильтром, навигацией. Для дашбордов.
<section class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-6 pr-4 pb-6 pl-4">
<!-- Controls -->
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between print:hidden">
<div class="flex items-center gap-2">
<div class="relative">
<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 text-neutral-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
<input id="searchInput" type="text" placeholder="Rechercher un critère…" class="h-10 w-80 max-w-[90vw] rounded-md border border-neutral-200 bg-white pl-9 pr-3 text-sm text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-900/10">
</div>
<button id="clearSearch" class="hidden sm:inline-flex items-center gap-2 h-10 px-3 rounded-md border border-neutral-200 text-neutral-700 hover:bg-neutral-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x w-4 h-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
Effacer
</button>
</div>
<div class="flex items-center gap-2">
<div class="hidden sm:flex items-center gap-2 text-xs text-neutral-600">
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-emerald-500"></span> Pas de contrainte</span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-amber-500"></span> Contrainte</span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-rose-600"></span> Bloquante</span>
</div>
<button id="toggleAll" class="inline-flex items-center gap-2 h-10 px-3 rounded-md border border-neutral-200 text-neutral-700 hover:bg-neutral-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4"><path d="m6 9 6 6 6-6" class=""></path></svg>
Tout déplier
</button>
<div class="sm:hidden flex items-center gap-2">
<button id="printBtnSm" class="inline-flex items-center gap-2 h-10 px-3 rounded-md border border-neutral-200 text-neutral-700 hover:bg-neutral-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="printer" class="lucide lucide-printer w-4 h-4"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" class=""></path><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6" class=""></path><rect x="6" y="14" width="12" height="8" rx="1" class=""></rect></svg>
</button>
<button id="pdfBtnSm" class="inline-flex items-center gap-2 h-10 px-3 rounded-md bg-neutral-900 text-white hover:bg-neutral-800">
<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="download" class="lucide lucide-download w-4 h-4"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
</button>
</div>
</div>
</div>
<!-- Quick nav -->
<div class="flex flex-wrap gap-2 print:hidden mt-4 mb-2">
<a href="#grp-urbanisme" class="inline-flex items-center gap-2 rounded-full bg-white border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-50">
<span class="text-base">🏗️</span> Aménagement & urbanisme
</a>
<a href="#grp-patrimoine" class="inline-flex items-center gap-2 rounded-full bg-white border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-50">
<span class="text-base">🏛️</span> Code wallon du Patrimoine
</a>
<a href="#grp-env" class="inline-flex items-center gap-2 rounded-full bg-white border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-50">
<span class="text-base">🌱</span> Environnement & terrain
</a>
<a href="#grp-eau" class="inline-flex items-center gap-2 rounded-full bg-white border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-50">
<span class="text-base">💧</span> Code de l’eau & autres
</a>
</div>
<!-- Print header -->
<div class="hidden print:block mb-4">
<div class="flex items-start justify-between">
<div>
<h2 class="text-2xl font-semibold tracking-tight">Grille analytique des contraintes</h2>
<p class="text-sm text-neutral-600">Annexe au dossier — Généré le <span id="printDate">31 août 2025 à 16:26</span></p>
<p class="mt-2 text-[13px] text-neutral-700">
Cette grille ne doit pas être complétée par le demandeur. Elle synthétise les contraintes légales et réglementaires applicables au bien et susceptibles d’influencer la conception du projet.
</p>
</div>
<img src="https://images.unsplash.com/photo-1519985176271-adb1088fa94c?q=80&w=1200&auto=format&fit=crop" alt="Illustration" class="w-28 h-28 object-cover rounded-md border border-neutral-200" style="">
</div>
</div>
<!-- Accordions -->
<div class="space-y-6">
<!-- Group 1 -->
<details id="grp-urbanisme" class="group rounded-lg border border-neutral-200 bg-white open:shadow-sm" open="">
<summary class="flex items-center justify-between cursor-pointer select-none px-4 sm:px-5 py-4">
<div class="flex items-center gap-2">
<span class="text-xl">🏗️</span>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-900">Aménagement du territoire et urbanisme</h3>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-xs text-neutral-600">
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-emerald-500"></span><span class="count-ok">2</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-amber-500"></span><span class="count-warn">2</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-rose-600"></span><span class="count-block">0</span></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 group-open:rotate-180 transition"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
</summary>
<div class="px-3 sm:px-5 pb-4">
<ul class="space-y-3">
<!-- Item -->
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="ok" data-keywords="Schéma de développement territorial Centralité urbaine 23/04/2024">
<span class="absolute left-0 top-0 h-full w-1 bg-emerald-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Schéma de développement territorial</span>
<span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 text-[11px] font-medium">
<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-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
Pas de contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Centralité urbaine (adopté le 23/04/2024)</p>
<p class="mt-1 text-xs text-neutral-500">Réf. SDT-2024-04-23</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="warn" data-keywords="Plan de secteur Zone Habitat HUY-WAREMME">
<span class="absolute left-0 top-0 h-full w-1 bg-amber-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Plan de secteur</span>
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-medium">
<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>
Contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Zone Habitat – Plan de secteur HUY-WAREMME</p>
<p class="mt-1 text-xs text-neutral-500">Réf. PS-HUY-waremme-01</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="warn" data-keywords="Guide communal d’urbanisme RCU Amay 61003-RCU-0001-01">
<span class="absolute left-0 top-0 h-full w-1 bg-amber-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Guide communal d’urbanisme</span>
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-medium">
<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>
Contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">RCU d’Amay (61003-RCU-0001-01)</p>
<p class="mt-1 text-xs text-neutral-500">Arrêté communal du 12/05/2019</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="ok" data-keywords="Antécédents Permis 2018 extension garage">
<span class="absolute left-0 top-0 h-full w-1 bg-emerald-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Antécédents de la demande</span>
<span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 text-[11px] font-medium">
<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-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
Pas de contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Permis délivré en 2018 pour extension garage</p>
<p class="mt-1 text-xs text-neutral-500">Réf. URB-2018-EXG-0043</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
</ul>
</div>
</details>
<!-- Group 2 -->
<details id="grp-patrimoine" class="group rounded-lg border border-neutral-200 bg-white open:shadow-sm">
<summary class="flex cursor-pointer select-none sm:px-5 pt-4 pr-4 pb-4 pl-4 items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-xl">🏛️</span>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-900">Code wallon du Patrimoine</h3>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-xs text-neutral-600">
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-emerald-500"></span><span class="count-ok">0</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-amber-500"></span><span class="count-warn">1</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-rose-600"></span><span class="count-block">1</span></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 group-open:rotate-180 transition"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
</summary>
<div class="px-3 sm:px-5 pb-4">
<ul class="space-y-3">
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="block" data-keywords="Bien classé assimilé Aux Terrasses arrêté 19/01/1998">
<span class="absolute left-0 top-0 h-full w-1 bg-rose-600"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Bien classé ou assimilé</span>
<span class="inline-flex items-center gap-1 rounded-full bg-rose-50 text-rose-700 border border-rose-200 px-2 py-0.5 text-[11px] font-medium">
<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="x-octagon" class="lucide lucide-x-octagon w-3.5 h-3.5"><path d="m15 9-6 6" class=""></path><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" class=""></path><path d="m9 9 6 6" class=""></path></svg>
Bloquante
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Oui – Classement « Aux Terrasses », arrêté du 19/01/1998</p>
<p class="mt-1 text-xs text-neutral-500">Réf. CWPa-1998-0019</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="warn" data-keywords="Carte archéologique Parcelle concernée 61003-CAW-0001-01">
<span class="absolute left-0 top-0 h-full w-1 bg-amber-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Carte archéologique</span>
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-medium">
<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>
Contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Parcelle concernée (61003-CAW-0001-01)</p>
<p class="mt-1 text-xs text-neutral-500">Réf. CWPa-CA-61003-01</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
</ul>
</div>
</details>
<!-- Group 3 -->
<details id="grp-env" class="group rounded-lg border border-neutral-200 bg-white open:shadow-sm">
<summary class="flex items-center justify-between cursor-pointer select-none px-4 sm:px-5 py-4">
<div class="flex items-center gap-2">
<span class="text-xl">🌱</span>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-900">Contraintes environnementales et de terrain</h3>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-xs text-neutral-600">
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-emerald-500"></span><span class="count-ok">0</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-amber-500"></span><span class="count-warn">2</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-rose-600"></span><span class="count-block">1</span></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 group-open:rotate-180 transition"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
</summary>
<div class="px-3 sm:px-5 pb-4">
<ul class="space-y-3">
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="warn" data-keywords="Inondation zone de risque moyen">
<span class="absolute left-0 top-0 h-full w-1 bg-amber-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Inondation</span>
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-medium">
<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>
Contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Zone de risque moyen</p>
<p class="mt-1 text-xs text-neutral-500">Carte aléa 2022 — Ref. INO-MED-2022</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="block" data-keywords="Affaissements miniers minières de fer">
<span class="absolute left-0 top-0 h-full w-1 bg-rose-600"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Affaissements miniers</span>
<span class="inline-flex items-center gap-1 rounded-full bg-rose-50 text-rose-700 border border-rose-200 px-2 py-0.5 text-[11px] font-medium">
<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="x-octagon" class="lucide lucide-x-octagon w-3.5 h-3.5"><path d="m15 9-6 6" class=""></path><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" class=""></path><path d="m9 9 6 6" class=""></path></svg>
Bloquante
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Présence de minières de fer</p>
<p class="mt-1 text-xs text-neutral-500">Réf. MIN-FeR-61003</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="warn" data-keywords="Radon Classe 1b Amay">
<span class="absolute left-0 top-0 h-full w-1 bg-amber-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Radon</span>
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-medium">
<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>
Contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Classe 1b (Amay)</p>
<p class="mt-1 text-xs text-neutral-500">Carte radon 2021 — Ref. RAD-AMAY-1b</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
</ul>
</div>
</details>
<!-- Group 4 -->
<details id="grp-eau" class="group rounded-lg border border-neutral-200 bg-white open:shadow-sm">
<summary class="flex items-center justify-between cursor-pointer select-none px-4 sm:px-5 py-4">
<div class="flex items-center gap-2">
<span class="text-xl">💧</span>
<h3 class="text-lg sm:text-xl font-semibold tracking-tight text-neutral-900">Code de l’eau & Autres caractéristiques</h3>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-xs text-neutral-600">
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-emerald-500"></span><span class="count-ok">2</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-amber-500"></span><span class="count-warn">1</span></span>
<span class="inline-flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-rose-600"></span><span class="count-block">0</span></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 group-open:rotate-180 transition"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
</summary>
<div class="px-3 sm:px-5 pb-4">
<ul class="space-y-3">
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="ok" data-keywords="Plan d’assainissement PASH Meuse aval zone collective">
<span class="absolute left-0 top-0 h-full w-1 bg-emerald-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Plan d’assainissement</span>
<span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 text-[11px] font-medium">
<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-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
Pas de contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">PASH – Meuse aval – zone collective</p>
<p class="mt-1 text-xs text-neutral-500">Réf. PASH-2019-23</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="warn" data-keywords="Captages Zone de prévention rapprochée BERWM011">
<span class="absolute left-0 top-0 h-full w-1 bg-amber-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Captages</span>
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-medium">
<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>
Contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Zone de prévention rapprochée BERWM011</p>
<p class="mt-1 text-xs text-neutral-500">Réf. CAP-BERWM011</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
<li class="criterion-item rounded-md border border-neutral-200 bg-white p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 relative overflow-hidden" data-status="ok" data-keywords="Équipement du terrain Voirie équipée eau électricité">
<span class="absolute left-0 top-0 h-full w-1 bg-emerald-500"></span>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-900">Équipement du terrain</span>
<span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 text-[11px] font-medium">
<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-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
Pas de contrainte
</span>
</div>
<p class="mt-1 text-sm text-neutral-700">Voirie équipée eau + électricité</p>
<p class="mt-1 text-xs text-neutral-500">Réf. GRD/EE-2020-OK</p>
</div>
<div class="flex items-center gap-3 shrink-0">
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-neutral-700 hover:text-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="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> Voir source
</a>
</div>
</li>
</ul>
</div>
</details>
</div>
<!-- Footer note -->
<div class="mt-8 text-xs text-neutral-500">
Impression/Export conserve l’organisation par catégories. Les éléments masqués par la recherche ne sont pas imprimés.
</div>
</section>