All Prompts
All Prompts
editortextareatailwindresponsiveinteractivecopypopoverstickycard
Responsive Document Editor with Reference & Risk Sidebar
Адаптивный редактор текста с боковой панелью рисков, ссылками, автосохранением и счетчиком символов. Интерактивный UI на Tailwind CSS.
Prompt
<main class="max-w-[1280px] mr-auto ml-auto pt-6 pr-6 pb-6 pl-6">
<div class="grid grid-cols-12 gap-6">
<!-- Colonne gauche: Document (scroll) -->
<section class="col-span-12 lg:col-span-8 lg:h-[calc(100vh-48px)] overflow-y-auto pr-1"
aria-label="Document - Cadre 5">
<article class="border border-gray-200 rounded-xl p-6 bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.02)]">
<header class="mb-4">
<h3 class="text-2xl tracking-tight font-semibold text-slate-900">Cadre 5 — Dérogations / écarts</h3>
<!-- Références - version large (monoligne) -->
<p class="hidden md:block mt-3 text-[15px] leading-6 text-slate-700 whitespace-nowrap overflow-hidden">
<span class="font-semibold text-slate-900">Dérogation</span> :
<span class="">D.IV.6–11</span>
<a href="#" target="_blank" rel="noopener noreferrer"
class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer"
aria-label="Ouvrir l’article D.IV.6–11 dans un nouvel onglet"
data-tooltip="Ouvrir l’article dans un nouvel onglet"
style="position: relative;">🔗<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span></a>
<button type="button" class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer" aria-label="Copier l’extrait pertinent D.IV.6–11" data-tooltip="Copier l’extrait pertinent" data-snippet="Dérogation D.IV.6–11 — Extrait type: Les dérogations sont admises si la motivation démontre l’intérêt public et la compatibilité avec les objectifs du CoDT." style="position: relative;">📋<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span></button>
,
<span>D.IV.13</span>
<a href="#" target="_blank" rel="noopener noreferrer"
class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer"
aria-label="Ouvrir l’article D.IV.13 dans un nouvel onglet"
data-tooltip="Ouvrir l’article dans un nouvel onglet"
style="position: relative;">🔗<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span></a>
<button type="button" class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer" aria-label="Copier l’extrait pertinent D.IV.13" data-tooltip="Copier l’extrait pertinent" data-snippet="Dérogation D.IV.13 — Extrait type: Conditions de recevabilité et de motivation détaillées pour l’octroi d’une dérogation." style="position: relative;">📋<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span></button>
<span class="mx-2 select-none text-slate-400">·</span>
<span class="font-semibold text-slate-900">Écart</span> :
<span>D.IV.5</span>
<a href="#" target="_blank" rel="noopener noreferrer"
class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer"
aria-label="Ouvrir l’article D.IV.5 dans un nouvel onglet"
data-tooltip="Ouvrir l’article dans un nouvel onglet"
style="position: relative;">🔗<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span></a>
<button type="button" class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer" aria-label="Copier l’extrait pertinent D.IV.5" data-tooltip="Copier l’extrait pertinent" data-snippet="Écart D.IV.5 — Extrait type: Un écart peut être accordé lorsque la finalité et la qualité urbanistique sont maintenues." style="position: relative;">📋<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span></button>
<span class="mx-2 select-none text-slate-400">·</span>
<span class="font-semibold text-slate-900">Local</span> :
<span class="">Guide communal [Commune]</span>
<a href="#" target="_blank" rel="noopener noreferrer"
class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer"
aria-label="Ouvrir le Guide communal [Commune] dans un nouvel onglet"
data-tooltip="Ouvrir l’article dans un nouvel onglet"
style="position: relative;">🔗<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Ouvrir l’article dans un nouvel onglet</span></a>
<button type="button" class="align-middle hover:underline decoration-slate-400 underline-offset-2 cursor-pointer" aria-label="Copier l’extrait pertinent du Guide communal [Commune]" data-tooltip="Copier l’extrait pertinent" data-snippet="Guide communal [Commune] — Extrait type: Recommandations locales pour l’intégration paysagère et la gestion de l’eau." style="position: relative;">📋<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span><span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 text-white text-xs px-2 py-1 opacity-0 transition-opacity shadow">Copier l’extrait pertinent</span></button>
</p>
<p class="hidden md:block mt-1 text-[13px] leading-5 text-slate-500">
Astuce: vous pouvez coller les extraits copiés dans l’outil IA de votre choix. Aucune intégration IA n’est
fournie dans l’interface.
</p>
<!-- Références - version compacte (≤767px), troncature + popover -->
<div class="md:hidden mt-3">
<div class="flex items-center gap-2">
<p class="text-[15px] leading-6 text-slate-700 truncate">
<span class="font-semibold text-slate-900">Dérogation</span> : D.IV.6–11, D.IV.13 ·
<span class="font-semibold text-slate-900">Écart</span> : D.IV.5 ·
<span class="font-semibold text-slate-900">Local</span> : Guide communal [Commune]
</p>
<button id="refsMoreBtn" type="button" class="shrink-0 text-slate-600 hover:text-slate-900 hover:underline underline-offset-2 text-sm px-2 py-1 rounded-md ring-1 ring-slate-200" aria-haspopup="dialog" aria-expanded="false" aria-controls="refsPopover">
+1
</button>
</div>
<!-- Popover -->
<div id="refsPopover" role="dialog" aria-modal="false" aria-label="Références"
class="hidden mt-2 w-full rounded-lg border border-slate-200 bg-white shadow-lg p-3">
<ul class="space-y-2 text-[15px]">
<li class="flex items-center justify-between gap-3">
<span><span class="font-semibold">Dérogation</span> : D.IV.6–11</span>
<span class="flex items-center gap-2">
<a href="#" target="_blank" rel="noopener noreferrer" class="hover:underline underline-offset-2" aria-label="Ouvrir D.IV.6–11">🔗</a>
<button type="button" aria-label="Copier D.IV.6–11" data-snippet="Dérogation D.IV.6–11 — Extrait type: Les dérogations sont admises si la motivation démontre l’intérêt public et la compatibilité avec les objectifs du CoDT." class="hover:underline underline-offset-2 cursor-pointer">📋</button>
</span>
</li>
<li class="flex items-center justify-between gap-3">
<span><span class="font-semibold">Dérogation</span> : D.IV.13</span>
<span class="flex items-center gap-2">
<a href="#" target="_blank" rel="noopener noreferrer" class="hover:underline underline-offset-2" aria-label="Ouvrir D.IV.13">🔗</a>
<button type="button" aria-label="Copier D.IV.13" data-snippet="Dérogation D.IV.13 — Extrait type: Conditions de recevabilité et de motivation détaillées pour l’octroi d’une dérogation." class="hover:underline underline-offset-2 cursor-pointer">📋</button>
</span>
</li>
<li class="flex items-center justify-between gap-3">
<span><span class="font-semibold">Écart</span> : D.IV.5</span>
<span class="flex items-center gap-2">
<a href="#" target="_blank" rel="noopener noreferrer" class="hover:underline underline-offset-2" aria-label="Ouvrir D.IV.5">🔗</a>
<button type="button" aria-label="Copier D.IV.5" data-snippet="Écart D.IV.5 — Extrait type: Un écart peut être accordé lorsque la finalité et la qualité urbanistique sont maintenues." class="hover:underline underline-offset-2 cursor-pointer">📋</button>
</span>
</li>
<li class="flex items-center justify-between gap-3">
<span><span class="font-semibold">Local</span> : Guide communal [Commune]</span>
<span class="flex items-center gap-2">
<a href="#" target="_blank" rel="noopener noreferrer" class="hover:underline underline-offset-2" aria-label="Ouvrir Guide communal [Commune]">🔗</a>
<button type="button" aria-label="Copier Guide communal [Commune]" data-snippet="Guide communal [Commune] — Extrait type: Recommandations locales pour l’intégration paysagère et la gestion de l’eau." class="hover:underline underline-offset-2 cursor-pointer">📋</button>
</span>
</li>
</ul>
<p class="mt-2 text-[13px] text-slate-500">
Astuce: collez les extraits copiés dans l’outil IA de votre choix (aucune intégration IA dans l’UI).
</p>
</div>
</div>
</header>
<!-- Zone de saisie -->
<div class="mt-2">
<label for="cadre5" class="sr-only">Saisir le contenu du Cadre 5</label>
<textarea id="cadre5" name="cadre5" class="w-full focus:border-slate-400 focus:ring-2 focus:ring-slate-200 outline-none text-[15px] leading-6 placeholder-slate-400 resize-none text-slate-900 border-slate-300 border rounded-lg pt-4 pr-4 pb-4 pl-4" rows="6" placeholder="Astuce : tapez “/” pour insérer un élément des Risques (cartes, captages, radon…). Vous pouvez aussi coller des extraits de règlement ici. Aucune intégration IA n’est fournie dans l’interface." aria-describedby="cadre5-help" style="height: 176px;"></textarea>
<p id="cadre5-error" class="mt-2 hidden text-sm text-red-600">Texte requis</p>
<!-- Footer (optionnel) -->
<div class="mt-3 flex items-center justify-between text-sm text-slate-500">
<div class="flex items-center 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="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="clock" class="lucide lucide-clock w-4 h-4 text-slate-400">
<path d="M12 6v6l4 2" class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
<span id="draftState" class="">Brouillon sauvegardé • 12:41</span>
</div>
<div class="text-[13px] text-slate-500">
<span id="charCount">0 caractère</span>
</div>
</div>
<p id="cadre5-help" class="sr-only">Utilisez Ctrl ou ⌘ + Entrée pour sauvegarder. Le texte doit être
renseigné.</p>
</div>
</article>
<!-- Espace pour simuler contenu long afin de tester le scroll -->
<div class="h-24"></div>
</section>
<!-- Colonne droite: Risques (sticky) -->
<aside class="col-span-12 lg:col-span-4">
<div class="lg:sticky lg:top-6">
<!-- Liste des risques -->
<div id="riskListContainer" class="">
<ul class="space-y-4" aria-label="Risques (WoM)">
<!-- 🔴 Inondations & ruissellement (0) -->
<li class="">
<button type="button" class="risk-card group w-full text-left rounded-2xl border-2 border-red-500 bg-red-50/50 p-4 shadow-sm hover:bg-red-50 transition-colors focus:outline-none focus:ring-2 focus:ring-red-200 filter saturate-0 opacity-60" data-risk="red" aria-expanded="false" aria-label="Inondations & ruissellement — ouvrir le détail">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="size-2.5 rounded-full bg-red-500 inline-block"></span>
<span class="text-[15px] font-medium text-slate-900">Inondations & ruissellement</span>
</div>
<span class="text-[13px] text-slate-700" aria-live="polite">• <span class="risk-count" data-risk-count="red">0</span></span>
</div>
</button>
</li>
<!-- 🟠 Imperméabilisation des sols -->
<li class="">
<button type="button" class="risk-card group w-full text-left rounded-2xl border-2 border-amber-500 bg-amber-50/50 p-4 shadow-sm hover:bg-amber-50 transition-colors focus:outline-none focus:ring-2 focus:ring-amber-200" data-risk="orange" aria-expanded="false" aria-label="Imperméabilisation des sols — ouvrir le détail">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="size-2.5 rounded-full bg-amber-500 inline-block"></span>
<span class="text-[15px] font-medium text-slate-900">Imperméabilisation des sols</span>
</div>
<span class="text-[13px] text-slate-700" aria-live="polite">• <span class="risk-count" data-risk-count="orange">3</span></span>
</div>
</button>
</li>
<!-- 🟡 Assainissement & eaux usées -->
<li class="">
<button type="button" class="risk-card group w-full text-left rounded-2xl border-2 border-amber-400 bg-amber-50/40 p-4 shadow-sm hover:bg-amber-50 transition-colors focus:outline-none focus:ring-2 focus:ring-amber-200" data-risk="yellow" aria-expanded="false" aria-label="Assainissement & eaux usées — ouvrir le détail">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="size-2.5 rounded-full bg-amber-400 inline-block"></span>
<span class="text-[15px] font-medium text-slate-900">Assainissement & eaux usées</span>
</div>
<span class="text-[13px] text-slate-700" aria-live="polite">• <span class="risk-count" data-risk-count="yellow">3</span></span>
</div>
</button>
</li>
<!-- 🟢 Contraintes milieu (sites, arbres) -->
<li class="">
<button type="button" class="risk-card group w-full text-left rounded-2xl border-2 border-green-500 bg-green-50/50 p-4 shadow-sm hover:bg-green-50 transition-colors focus:outline-none focus:ring-2 focus:ring-green-200" data-risk="green" aria-expanded="false" aria-label="Contraintes milieu (sites, arbres) — ouvrir le détail">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="size-2.5 rounded-full bg-green-500 inline-block"></span>
<span class="text-[15px] font-medium text-slate-900">Contraintes milieu (sites, arbres)</span>
</div>
<span class="text-[13px] text-slate-700" aria-live="polite">• <span class="risk-count" data-risk-count="green">5</span></span>
</div>
</button>
</li>
<!-- 🔵 Insertion paysagère -->
<li class="">
<button type="button" class="risk-card group w-full text-left rounded-2xl border-2 border-blue-500 bg-blue-50/50 p-4 shadow-sm hover:bg-blue-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-200" data-risk="blue" aria-expanded="false" aria-label="Insertion paysagère — ouvrir le détail">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="size-2.5 rounded-full bg-blue-500 inline-block"></span>
<span class="text-[15px] font-medium text-slate-900">Insertion paysagère</span>
</div>
<span class="text-[13px] text-slate-700" aria-live="polite">• <span class="risk-count" data-risk-count="blue">1</span></span>
</div>
</button>
</li>
</ul>
</div>
<!-- Détails d’un risque (inline, ancré) -->
<div id="riskDetailsContainer" class="hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
<!-- Header -->
<div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
<div class="flex items-center gap-2">
<button id="riskBackBtn" type="button" class="inline-flex items-center gap-1.5 text-[14.5px] text-slate-700 hover:text-slate-900 hover:underline underline-offset-2">
← Tous les risques
</button>
</div>
<div class="flex items-center gap-3">
<span id="detailsCount" class="text-[13px] text-slate-600">0</span>
</div>
</div>
<!-- Titre + pastille -->
<div class="px-4 pt-3 pb-2">
<div class="flex items-center gap-2">
<span id="detailsDot" class="size-2.5 rounded-full bg-slate-400 inline-block"></span>
<h4 id="detailsTitle" class="text-[15px] font-medium tracking-tight text-slate-900">Risque</h4>
</div>
</div>
<!-- Liste d’items -->
<div class="px-4 pb-3 border-b border-slate-200">
<ul id="detailsList" class="space-y-2"></ul>
</div>
<!-- Zone carte + actions -->
<div class="p-4">
<div id="embedHeader" class="mb-2">
<div class="text-[14.5px] text-slate-900" id="embedTitle">—</div>
<div class="text-[12.5px] text-slate-500" id="embedSource">—</div>
</div>
<div class="rounded-lg border border-slate-200 overflow-hidden bg-slate-50">
<div class="bg-white">
<div class="relative">
<img id="embedImage" src="" alt="" class="w-full h-auto block select-none" draggable="true">
<iframe id="embedIframe" src="" class="hidden w-full aspect-video"></iframe>
</div>
</div>
<div class="flex items-center justify-between px-2.5 py-2 bg-white border-t border-slate-200">
<div class="flex items-center gap-1.5">
<button id="actionInsert" type="button" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[13px] text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-200">
⇥ <span>Insérer dans le texte</span>
</button>
<button id="actionCopyRef" type="button" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[13px] text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-200">
📋 <span>Copier la référence</span>
</button>
</div>
<div class="relative">
<button id="actionMore" type="button" class="w-8 h-8 inline-flex items-center justify-center rounded-md hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-200" aria-haspopup="menu" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal w-4 h-4 text-slate-700"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
<div id="moreMenu"
class="hidden absolute right-0 mt-1 w-48 rounded-md border border-slate-200 bg-white shadow-lg p-1">
<a id="openSourceLink" href="#" target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-2 py-1.5 rounded-md text-[13px] text-slate-700 hover:bg-slate-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="external-link" class="lucide lucide-external-link w-4 h-4">
<path d="M15 3h6v6" class=""></path>
<path d="M10 14 21 3" class=""></path>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" class=""></path>
</svg> Ouvrir la source
</a>
<a id="openMapLink" href="#" target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-2 py-1.5 rounded-md text-[13px] text-slate-700 hover:bg-slate-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="map" class="lucide lucide-map w-4 h-4">
<path
d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"
class=""></path>
<path d="M15 5.764v15" class=""></path>
<path d="M9 3.236v15" class=""></path>
</svg> Ouvrir la carte
</a>
</div>
</div>
</div>
</div>
<p class="mt-2 text-[12.5px] text-slate-500">Astuce : vous pouvez glisser-déposer l’aperçu de la carte vers
le champ texte pour l’insérer.</p>
</div>
</div>
</div>
</aside>
</div>
</main>