<!-- *** TEMPLATE PAEC 2026 *** -->

{{#features}}
<li class="item">

	<h3 class="title-feature">{{nom_paec}}</h3>

	<p>
		<strong>Code PAEC :</strong> {{code_paec}}
	</p>
	<h4 class="rb-subtitle-feature">Contacts</h4>
	{{#contacts_html}}{{{contacts_html}}}{{/contacts_html}}

</li>
{{/features}}

<style>

:root {
	--mycolor: #000091;
}

.title-feature {
	color: var(--mycolor);
}

.contacts-paec,
.contacts-html {
	margin-top: 10px;
}

.contact-structure {
	margin-bottom: 18px;
}

.contact-structure h4 {
	color: var(--mycolor);
	margin: 0 0 4px;
	font-size: 1.05em;
}

.email-structure {
	margin-bottom: 8px;
}

.contact-personne {
	margin-left: 12px;
	margin-bottom: 8px;
	padding-left: 10px;
	border-left: 3px solid var(--mycolor);
}

.contact-personne strong {
	font-weight: bold;
}

.contact-personne a,
.email-structure a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

</style>

<script>
(function () {

	function afficherContactsHTML() {
		const composants = document.querySelectorAll(
			'[data-value="contacts_html"]'
		);

		composants.forEach(function (composant) {
			if (composant.dataset.htmlConverted === "true") {
				return;
			}

			const paragraphe = composant.querySelector("p");

			if (!paragraphe) {
				return;
			}

			let contenu = paragraphe.textContent.trim();

			/* Retire d'éventuels guillemets ajoutés autour du HTML */
			if (
				contenu.length >= 2 &&
				contenu.startsWith('"') &&
				contenu.endsWith('"')
			) {
				contenu = contenu.slice(1, -1);
			}

			composant.innerHTML = contenu;
			composant.dataset.htmlConverted = "true";
		});
	}

	/* Premier affichage */
	afficherContactsHTML();

	/* Les fiches mviewer peuvent être injectées après le chargement */
	const observateur = new MutationObserver(function () {
		afficherContactsHTML();
	});

	observateur.observe(document.body, {
		childList: true,
		subtree: true
	});

})();
</script>