feat(ui): harmoniser navigation pages d’entrée et recherche

src/pages/archicrat-ia/index.astro

@@ -7,15 +7,62 @@ entries.sort((a, b) => (a.data.order ?? 9999) - (b.data.order ?? 9999));
 ---
 
 <SiteLayout title="Essai-thèse — ArchiCraT-IA">
-  <h1>Essai-thèse — ArchiCraT-IA</h1>
+  <section class="landing landing-home">
+    <header class="landing-hero">
+      <p class="landing-kicker">Corpus principal</p>
+      <h1>Essai-thèse — ArchiCraT-IA</h1>
+      <p class="landing-lead">
+        Fondements, histoire, philosophie du pouvoir, tensions et régulations
+        archicratiques.
+      </p>
+    </header>
 
-  <ul>
-    {entries.map((e) => (
-      <li>
-        <a href={`/archicrat-ia/${String(e.id).replace(/\.(md|mdx)$/i, "")}/`}>
-          {e.data.title}
-        </a>
-      </li>
-    ))}
-  </ul>
+    <section class="edition-note" aria-labelledby="note-lecteur-title">
+      <p class="landing-kicker">Note au lecteur</p>
+      <h2 id="note-lecteur-title">Statut du travail</h2>
+
+      <p>
+        Le texte que vous vous apprêtez à lire ne constitue pas une théorie close
+        ni un système achevé. Il s’agit d’un travail de longue élaboration, ayant
+        progressivement pris la forme d’une hypothèse structurée : celle d’une
+        méta-grammaire des régulations collectives, désignée ici sous le nom
+        d’archicratie.
+      </p>
+
+      <p>
+        Cette proposition vise à offrir un cadre transversal pour penser les formes
+        de constitution, de régulation et d’évolution des collectifs humains, en
+        particulier dans des contextes marqués par la complexification des dispositifs,
+        l’opacification des décisions et la transformation des scènes de conflictualité.
+      </p>
+
+      <p>
+        Elle doit donc être lue comme une architecture conceptuelle déjà cohérente
+        dans ses lignes de force, mais encore ouverte à la discussion, à la critique,
+        à l’approfondissement et à la mise à l’épreuve.
+      </p>
+
+      <p>
+        Ce texte est proposé non comme un énoncé définitif, mais comme une hypothèse
+        à éprouver : un chantier ouvert dont la viabilité dépendra aussi de sa
+        capacité à être interrogé, corrigé et repris.
+      </p>
+    </section>
+
+    <section class="landing-section">
+      <div class="landing-section__head">
+        <p class="landing-kicker">Index de l’œuvre</p>
+        <h2>Parcours de lecture</h2>
+      </div>
+
+      <div class="landing-grid">
+        {entries.map((e) => (
+          <a class="landing-card" href={`/archicrat-ia/${String(e.id).replace(/\.(md|mdx)$/i, "")}/`}>
+            <strong>{e.data.title}</strong>
+            <small>Lire ce texte →</small>
+          </a>
+        ))}
+      </div>
+    </section>
+  </section>
 </SiteLayout>

src/pages/cas-ia/index.astro

@@ -7,15 +7,68 @@ entries.sort((a, b) => (a.data.order ?? 9999) - (b.data.order ?? 9999));
 ---
 
 <SiteLayout title="Cas pratique — Gouvernance des systèmes IA">
-  <h1>Cas pratique — Gouvernance des systèmes IA</h1>
+  <section class="landing landing-home">
+    
+    <!-- HERO -->
+    <header class="landing-hero">
+      <p class="landing-kicker">Cas pratique</p>
 
-  <ul>
-    {entries.map((e) => (
-      <li>
-        <a href={`/cas-ia/${String(e.id).replace(/\.(md|mdx)$/i, "")}/`}>
-          {e.data.title}
-        </a>
-      </li>
-    ))}
-  </ul>
+      <h1>Gouvernance des systèmes IA</h1>
+
+      <p class="landing-lead">
+        Une mise à l’épreuve du paradigme archicratique à travers les systèmes
+        contemporains d’intelligence artificielle.
+      </p>
+    </header>
+
+    <!-- NOTE AU LECTEUR -->
+    <section class="edition-note" aria-labelledby="note-cas-title">
+      <p class="landing-kicker">Note au lecteur</p>
+      <h2 id="note-cas-title">Statut du cas pratique</h2>
+
+      <p>
+        Ce cas pratique ne constitue pas une application stabilisée du paradigme
+        archicratique, mais un terrain d’expérimentation destiné à en éprouver
+        la portée, les limites et les conditions d’opérabilité.
+      </p>
+
+      <p>
+        Les systèmes d’intelligence artificielle offrent un environnement
+        particulièrement exigeant : complexité technique, opacité croissante,
+        enchevêtrement d’acteurs, transformations rapides des cadres de régulation.
+      </p>
+
+      <p>
+        L’analyse proposée doit donc être lue comme une série d’épreuves
+        — détectabilité, topologie, archéogenèse, morphologie, historicité,
+        co-viabilité — visant à faire apparaître les architectures effectives
+        qui organisent ces systèmes.
+      </p>
+
+      <p>
+        Ce travail n’a pas vocation à clore l’analyse, mais à ouvrir un espace
+        d’investigation : il s’agit moins de fournir des réponses définitives
+        que de rendre visibles les tensions et les structures qui appellent
+        régulation.
+      </p>
+    </section>
+
+    <!-- INDEX -->
+    <section class="landing-section">
+      <div class="landing-section__head">
+        <p class="landing-kicker">Index du cas</p>
+        <h2>Parcours d’analyse</h2>
+      </div>
+
+      <div class="landing-grid">
+        {entries.map((e) => (
+          <a class="landing-card" href={`/cas-ia/${String(e.id).replace(/\.(md|mdx)$/i, "")}/`}>
+            <strong>{e.data.title}</strong>
+            <small>Lire ce chapitre →</small>
+          </a>
+        ))}
+      </div>
+    </section>
+
+  </section>
 </SiteLayout>

src/pages/commencer/index.astro

@@ -4,7 +4,7 @@ import DocumentDePresentation from "../../content/commencer/document-de-presenta
 ---
 
 <EditionLayout
-  title="Document de présentation"
+  title="Entrevoir l’Archicratie"
   editionLabel="Document d’entrée"
   editionKey="commencer"
   statusLabel="Présentation"
@@ -12,7 +12,20 @@ import DocumentDePresentation from "../../content/commencer/document-de-presenta
   level={1}
   version="0.1.0"
 >
-  <h1>Document de présentation</h1>
+  <h1 class="commencer-title">Entrevoir l’Archicratie...</h1>
 
   <DocumentDePresentation />
+  <nav class="landing-actions presentation-next" aria-label="Suite de lecture">
+  <a class="landing-btn landing-btn--primary" href="/archicrat-ia/">
+    Plonger dans l’essai-thèse — ArchiCraT-IA
+  </a>
+
+  <a class="landing-btn" href="/glossaire/">
+    Explorer son glossaire
+  </a>
+
+  <a class="landing-btn" href="/cas-ia/">
+    Entrer dans le cas pratique — Gouvernance IA
+  </a>
+</nav>
 </EditionLayout>

src/pages/index.astro

@@ -3,55 +3,70 @@ import SiteLayout from "../layouts/SiteLayout.astro";
 ---
 
 <SiteLayout title="Archicratie — Édition web">
+  <section class="landing landing-home" aria-labelledby="home-title">
+    <header class="landing-hero">
+      <p class="landing-kicker">Édition web expérimentale</p>
 
-  <h1>Archicratie</h1>
+      <h1 id="home-title">Archicratie</h1>
 
-  <p>
-    Ce site présente le noyau conceptuel du paradigme archicratique :
-    une théorie des architectures de régulation qui rendent possible la co-viabilité
-    des sociétés complexes.
-  </p>
+      <p class="landing-lead">
+        Une recherche indépendante sur les architectures de régulation qui rendent
+        possible la co-viabilité des sociétés complexes.
+      </p>
 
-  <hr />
+      <div class="landing-actions" aria-label="Entrées principales">
+        <a class="landing-btn landing-btn--primary" href="/commencer/">
+          Entrevoir l’archicratie
+        </a>
+        <a class="landing-btn" href="/glossaire/">
+          Explorer son glossaire
+        </a>
+      </div>
+    </header>
 
-  <h2>Document d’entrée</h2>
+    <section class="landing-section" aria-labelledby="home-paths-title">
+      <div class="landing-section__head">
+        <p class="landing-kicker">Parcours</p>
+        <h2 id="home-paths-title">Accès principaux</h2>
+      </div>
 
-  <p>
-    Le document suivant propose une première entrée dans le paradigme archicratique.
-  </p>
+      <div class="landing-grid">
+        <a class="landing-card" href="/archicrat-ia/">
+          <strong>Essai-thèse — ArchiCraT-IA</strong>
+          <span>
+            Le corpus principal : fondements, histoire, philosophie du pouvoir,
+            tensions et régulations archicratiques.
+          </span>
+          <small>Lire ArchiCraT-IA →</small>
+        </a>
 
-  <p>
-    👉 <a href="/commencer/">Lire le document de présentation</a>
-  </p>
+        <a class="landing-card" href="/cas-ia/">
+          <strong>Cas pratique — Gouvernance IA</strong>
+          <span>
+            Une mise à l’épreuve contemporaine du paradigme à travers la
+            gouvernance des systèmes d’intelligence artificielle.
+          </span>
+          <small>Explorer le cas pratique →</small>
+        </a>
 
-  <hr />
-
-  <h2>Accès principaux</h2>
-
-  <ul>
-    <li>
-      <a href="/archicrat-ia/">
-        Essai-thèse — ArchiCraT-IA
-      </a>
-    </li>
-
-    <li>
-      <a href="/cas-ia/">
-        Cas pratique — Gouvernance des systèmes IA
-      </a>
-    </li>
-
-    <li>
-      <a href="/glossaire/">
-        Glossaire archicratique
-      </a>
-    </li>
-
-    <li>
-      <a href="/recherche/">
-        Recherche dans les textes
-      </a>
-    </li>
-  </ul>
+        <a class="landing-card" href="/glossaire/">
+          <strong>Glossaire</strong>
+          <span>
+            La cartographie conceptuelle du système : notions, scènes,
+            dynamiques, tensions et méta-régimes.
+          </span>
+          <small>Entrer dans le glossaire →</small>
+        </a>
 
+        <a class="landing-card" href="/recherche/">
+          <strong>Recherche</strong>
+          <span>
+            Rechercher un terme, une notion ou un passage dans les textes de
+            l’édition web.
+          </span>
+          <small>Lancer une recherche →</small>
+        </a>
+      </div>
+    </section>
+  </section>
 </SiteLayout>

src/pages/recherche/index.astro

@@ -1,41 +1,51 @@
 ---
 import SiteLayout from "../../layouts/SiteLayout.astro";
 ---
+
 <SiteLayout title="Recherche">
-  <h1>Recherche</h1>
-  <p>Recherche plein texte (statique) dans les pages “édition-livre”.</p>
+  <section class="search-page" aria-labelledby="search-title">
+    <header class="landing-hero search-hero">
+      <p class="landing-kicker">Exploration transversale</p>
+      <h1 id="search-title">Recherche</h1>
+      <p class="landing-lead">
+        Rechercher un terme, une notion ou un passage dans les textes de l’édition web.
+      </p>
+    </header>
 
-  <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 18px;">
-    <label>
-      <span style="display:block;font-size:12px;opacity:0.85;">Terme</span>
-      <input id="q" type="search" placeholder="Ex: archicratie, régulation, inertie…" style="padding:8px 10px;min-width:280px;">
-    </label>
+    <section class="landing-section search-panel" aria-label="Formulaire de recherche">
+      <div class="search-controls">
+        <label class="search-field search-field--main">
+          <span>Terme</span>
+          <input id="q" type="search" autocomplete="off" placeholder="Ex. archicratie, régulation, inertie…" />
+        </label>
 
-    <label>
-      <span style="display:block;font-size:12px;opacity:0.85;">Édition</span>
-      <select id="edition" style="padding:8px 10px;">
-        <option value="">Toutes</option>
-        <option value="archicratie">Archicratie</option>
-        <option value="traite">Traité</option>
-        <option value="ia">Cas IA</option>
-        <option value="glossaire">Glossaire</option>
-        <option value="atlas">Atlas</option>
-      </select>
-    </label>
+        <label class="search-field">
+          <span>Édition</span>
+          <select id="edition">
+            <option value="">Toutes</option>
+            <option value="archicrat-ia">Essai-thèse</option>
+            <option value="cas-ia">Cas IA</option>
+            <option value="glossaire">Glossaire</option>
+            <option value="commencer">Commencer</option>
+          </select>
+        </label>
 
-    <label>
-      <span style="display:block;font-size:12px;opacity:0.85;">Niveau</span>
-      <select id="level" style="padding:8px 10px;">
-        <option value="">Tous</option>
-        <option value="1">1</option>
-        <option value="2">2</option>
-        <option value="3">3</option>
-      </select>
-    </label>
-  </div>
+        <label class="search-field">
+          <span>Niveau</span>
+          <select id="level">
+            <option value="">Tous</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+          </select>
+        </label>
+      </div>
 
-  <div id="status" style="margin:10px 0;opacity:0.9;"></div>
-  <ol id="results" style="padding-left:18px;"></ol>
+      <p id="status" class="search-status" aria-live="polite"></p>
+      <ol id="results" class="search-results"></ol>
+    </section>
+  </section>
 
   <script is:inline>
 (() => {
@@ -52,10 +62,10 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
     pfPromise = (async () => {
       try {
         const pagefind = await import("/pagefind/pagefind.js");
-        // init facultatif, mais accélère si on clique dans l’input
         await pagefind.init?.();
         return pagefind;
-      } catch {
+      } catch (e) {
+        console.error("[Recherche] Pagefind init failed:", e);
         return null;
       }
     })();
@@ -69,25 +79,26 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
     return Object.keys(filters).length ? filters : null;
   }
 
-  function clearResults() {
-    results.innerHTML = "";
-  }
-
   function setStatus(msg) {
     status.textContent = msg;
   }
 
+  function clearResults() {
+    results.innerHTML = "";
+  }
+
   async function runSearch() {
     const term = q.value.trim();
+
     if (!term) {
-      setStatus("Tape un terme pour chercher.");
+      setStatus("Tape un terme pour lancer une recherche.");
       clearResults();
       return;
     }
 
     const pagefind = await getPagefind();
     if (!pagefind) {
-      setStatus("Index de recherche indisponible. Fais `npm run build` puis `npm run preview`.");
+      setStatus("Index de recherche indisponible. Lance `npm run build` puis `npm run preview`.");
       clearResults();
       return;
     }
@@ -96,49 +107,56 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
     const filters = currentFilters();
     if (filters) opts.filters = filters;
 
-    setStatus("Recherche…");
+    setStatus("Recherche en cours…");
+
     const search = await pagefind.debouncedSearch(term, opts, 250);
     if (search === null) return;
 
-    const items = await Promise.all(search.results.slice(0, 20).map(r => r.data()));
-    setStatus(`${items.length} résultat(s) (sur ${search.results.length}).`);
+    const items = await Promise.all(search.results.slice(0, 24).map((r) => r.data()));
+
+    clearResults();
+
+    if (!items.length) {
+      setStatus("Aucun résultat pour cette recherche.");
+      return;
+    }
+
+    setStatus(`${items.length} résultat(s) affiché(s) sur ${search.results.length}.`);
 
-    results.innerHTML = "";
     for (const item of items) {
       const li = document.createElement("li");
-      li.style.marginBottom = "12px";
+      li.className = "search-result";
 
       const a = document.createElement("a");
+      a.className = "search-result__title";
       a.href = item.url;
       a.textContent = item.meta?.title || item.url;
 
       const meta = document.createElement("div");
-      meta.style.fontSize = "12px";
-      meta.style.opacity = "0.85";
-      const edv = item.meta?.edition ? `édition: ${item.meta.edition}` : "";
-      const lv = item.meta?.level ? `niveau: ${item.meta.level}` : "";
-      const v = item.meta?.version ? `v${item.meta.version}` : "";
-      meta.textContent = [edv, lv, v].filter(Boolean).join(" · ");
+      meta.className = "search-result__meta";
 
-      const ex = document.createElement("div");
-      ex.style.marginTop = "6px";
-      ex.innerHTML = item.excerpt || "";
+      const edition = item.meta?.edition ? `édition : ${item.meta.edition}` : "";
+      const level = item.meta?.level ? `niveau : ${item.meta.level}` : "";
+      const version = item.meta?.version ? `v${item.meta.version}` : "";
+      meta.textContent = [edition, level, version].filter(Boolean).join(" · ");
+
+      const excerpt = document.createElement("div");
+      excerpt.className = "search-result__excerpt";
+      excerpt.innerHTML = item.excerpt || "";
 
       li.appendChild(a);
       if (meta.textContent) li.appendChild(meta);
-      li.appendChild(ex);
+      li.appendChild(excerpt);
       results.appendChild(li);
     }
   }
 
-  // Précharge quand focus => UX meilleure
   q.addEventListener("focus", () => { getPagefind(); });
-
   q.addEventListener("input", runSearch);
   ed.addEventListener("change", runSearch);
   lv.addEventListener("change", runSearch);
 
-  setStatus("Tape un terme pour chercher.");
+  setStatus("Tape un terme pour lancer une recherche.");
 })();
   </script>
-</SiteLayout>
+</SiteLayout>