feat: css custom by pages

[5][DONE]

p/assets/main-nav/app.js

@@ -1,8 +1,38 @@
 (() => {
   const main = document.getElementById("app-main");
+  const pageStyleSelectors = "[data-page-style='true']";
 
   const links = Array.from(document.querySelectorAll("[data-route]"));
 
+  function clearInjectedPageStyles() {
+    document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove());
+  }
+
+  function injectPageStyles(parsedDocument, sourceUrl) {
+    clearInjectedPageStyles();
+
+    const head = parsedDocument.head;
+    if (!head) {
+      return;
+    }
+
+    const styleNodes = Array.from(head.querySelectorAll("link[rel='stylesheet'], style"));
+
+    styleNodes.forEach((node) => {
+      const clonedNode = node.cloneNode(true);
+      clonedNode.setAttribute("data-page-style", "true");
+
+      if (clonedNode.tagName === "LINK") {
+        const href = clonedNode.getAttribute("href");
+        if (href) {
+          clonedNode.href = new URL(href, sourceUrl).toString();
+        }
+      }
+
+      document.head.appendChild(clonedNode);
+    });
+  }
+
   function normalizeRoute(value) {
     const raw = (value ?? "").toString().trim().toLowerCase();
     if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
@@ -86,6 +116,7 @@
 
     const html = await response.text();
     const parsed = new DOMParser().parseFromString(html, "text/html");
+    injectPageStyles(parsed, response.url);
     const injected = parsed.querySelector("[data-page-content]") ?? parsed.body;
     main.innerHTML = injected.innerHTML.trim();
   }