archicratie-edition/src/pages/glossaire/paradigmes.astro

---
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
import { getCollection } from "astro:content";

const entries = await getCollection("glossaire");

const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");

const paradigmes = entries
  .filter((e) => e.data.kind === "paradigme")
  .sort((a, b) => collator.compare(a.data.term, b.data.term));

const doctrines = entries
  .filter((e) => e.data.kind === "doctrine")
  .sort((a, b) => collator.compare(a.data.term, b.data.term));
---

<GlossaryLayout
  title="Paradigmes et doctrines"
  version="1.0"
>
  <Fragment slot="aside">
    <nav class="glossary-portal-aside" aria-label="Navigation des paradigmes">
      <div class="glossary-portal-aside__block">
        <a class="glossary-portal-aside__back" href="/glossaire/">← Retour au glossaire</a>
        <div class="glossary-portal-aside__title">Cartographie théorique</div>
        <div class="glossary-portal-aside__meta">
          doctrines fondatrices · paradigmes régulateurs
        </div>
      </div>

      <div class="glossary-portal-aside__block">
        <h2 class="glossary-portal-aside__heading">Dans cette page</h2>
        <ul class="glossary-portal-aside__list">
          <li><a href="#doctrines">Doctrines fondatrices</a></li>
          <li><a href="#paradigmes">Paradigmes régulateurs</a></li>
        </ul>
      </div>
    </nav>
  </Fragment>

  <h1>Cartographie théorique</h1>

  <p>
    L’archicratie ne se déploie pas dans le vide. Elle s’inscrit dans un paysage
    intellectuel plus large où se croisent des doctrines fondatrices de l’ordre
    et des paradigmes de régulation des collectifs.
  </p>

  <p>
    On appellera ici <strong>doctrines fondatrices</strong> les formulations qui
    posent un principe premier de légitimité, de souveraineté ou d’ordre
    politique. On appellera <strong>paradigmes régulateurs</strong> les cadres
    théoriques qui décrivent des modes de tenue, de conflictualité,
    d’administration, de reproduction ou de transformation des sociétés.
  </p>

  {doctrines.length > 0 && (
    <section id="doctrines" class="glossary-portal-section">
      <h2>Doctrines fondatrices</h2>
      <ul class="glossary-portal-list">
        {doctrines.map((entry) => {
          const slug = slugOf(entry);
          return (
            <li>
              <a href={`/glossaire/${slug}/`}>
                {entry.data.term}
              </a>
              <span> — {entry.data.definitionShort}</span>
              {(entry.data.mobilizedAuthors?.length > 0 || entry.data.comparisonTraditions?.length > 0) && (
                <div class="glossary-portal-meta">
                  {entry.data.mobilizedAuthors?.length > 0 && (
                    <div>
                      <strong>Auteurs mobilisés :</strong> {entry.data.mobilizedAuthors.join(" / ")}
                    </div>
                  )}
                  {entry.data.comparisonTraditions && (
                    <div>
                      <strong>Traditions de comparaison :</strong> {entry.data.comparisonTraditions.join(" / ")}
                    </div>
                  )}
                </div>
              )}
            </li>
          );
        })}
      </ul>
    </section>
  )}

  <section id="paradigmes" class="glossary-portal-section">
    <h2>Paradigmes régulateurs</h2>
    <ul class="glossary-portal-list">
      {paradigmes.map((entry) => {
        const slug = slugOf(entry);
        return (
          <li>
            <a href={`/glossaire/${slug}/`}>
              {entry.data.term}
            </a>
            <span> — {entry.data.definitionShort}</span>
            {(entry.data.mobilizedAuthors?.length > 0 || entry.data.comparisonTraditions?.length > 0) && (
              <div class="glossary-portal-meta">
                {entry.data.mobilizedAuthors?.length > 0 && (
                  <div>
                    <strong>Auteurs mobilisés :</strong> {entry.data.mobilizedAuthors.join(", ")}
                  </div>
                )}
                {entry.data.comparisonTraditions && (
                  <div>
                    <strong>Traditions de comparaison :</strong> {entry.data.comparisonTraditions}
                  </div>
                )}
              </div>
            )}
          </li>
        );
      })}
    </ul>
  </section>

  <style>
    .glossary-portal-section{
      margin-top: 30px;
      scroll-margin-top: calc(var(--sticky-offset) + 75px);
    }

    .glossary-portal-list{
      margin: 14px 0 0;
      padding-left: 18px;
    }

    .glossary-portal-list li{
      margin-bottom: 14px;
      line-height: 1.5;
    }

    .glossary-portal-meta{
      margin-top: 6px;
      padding-left: 2px;
      font-size: 14px;
      opacity: .9;
    }

    .glossary-portal-meta div + div{
      margin-top: 2px;
    }

    .glossary-portal-aside{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .glossary-portal-aside__block{
      border: 1px solid rgba(127,127,127,0.22);
      border-radius: 16px;
      padding: 12px;
      background: rgba(127,127,127,0.05);
    }

    .glossary-portal-aside__back{
      display: inline-block;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .glossary-portal-aside__title{
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .2px;
      line-height: 1.25;
    }

    .glossary-portal-aside__meta{
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.35;
      opacity: .78;
    }

    .glossary-portal-aside__heading{
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 800;
      opacity: .9;
    }

    .glossary-portal-aside__list{
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .glossary-portal-aside__list li{
      margin: 6px 0;
    }

    .glossary-portal-aside__list a{
      text-decoration: none;
      font-size: 13px;
      line-height: 1.3;
    }

    @media (prefers-color-scheme: dark){
      .glossary-portal-aside__block{
        background: rgba(255,255,255,0.04);
      }
    }
  </style>
</GlossaryLayout>