diff --git a/scripts/convert_docx_to_mdx.py b/scripts/convert_docx_to_mdx.py
new file mode 100755
index 0000000..6df25a2
--- /dev/null
+++ b/scripts/convert_docx_to_mdx.py
@@ -0,0 +1,241 @@
+#!/usr/bin/env python3
+import argparse
+import os
+import re
+import shutil
+import subprocess
+import sys
+from pathlib import Path
+
+try:
+    import yaml
+except ImportError:
+    print("Erreur : PyYAML n'est pas installé. Lance : pip3 install pyyaml")
+    sys.exit(1)
+
+
+EDITION = "archicrat-ia"
+STATUS = "essai_these"
+VERSION = "0.1.0"
+
+
+ORDER_MAP = {
+    "prologue": 10,
+    "chapitre-1": 20,
+    "chapitre-2": 30,
+    "chapitre-3": 40,
+    "chapitre-4": 50,
+    "chapitre-5": 60,
+    "conclusion": 70,
+}
+
+
+TITLE_MAP = {
+    "prologue": "Prologue — Fondation, finalité sociopolitique et historique",
+    "chapitre-1": "Chapitre 1 — Fondements épistémologiques et modélisation",
+    "chapitre-2": "Chapitre 2 — Archéogenèse des régimes de co-viabilité",
+    "chapitre-3": "Chapitre 3 — Philosophies du pouvoir et archicration",
+    "chapitre-4": "Chapitre 4 — Histoire archicratique des révolutions industrielles",
+    "chapitre-5": "Chapitre 5 — Tensions, co-viabilités et régulations",
+    "conclusion": "Conclusion — ArchiCraT-IA",
+}
+
+
+def slugify_name(path: Path) -> str:
+    stem = path.stem.lower().strip()
+
+    replacements = {
+        " ": "-",
+        "_": "-",
+        "—": "-",
+        "–": "-",
+        "é": "e",
+        "è": "e",
+        "ê": "e",
+        "ë": "e",
+        "à": "a",
+        "â": "a",
+        "ä": "a",
+        "î": "i",
+        "ï": "i",
+        "ô": "o",
+        "ö": "o",
+        "ù": "u",
+        "û": "u",
+        "ü": "u",
+        "ç": "c",
+        "'": "",
+        "’": "",
+    }
+
+    for old, new in replacements.items():
+        stem = stem.replace(old, new)
+
+    stem = re.sub(r"-+", "-", stem).strip("-")
+
+    # normalisations spécifiques
+    stem = stem.replace("chapitre-1-fondements-epistemologiques-et-modelisation-archicratie-version-officielle-revise", "chapitre-1")
+    stem = stem.replace("chapitre-2", "chapitre-2")
+    stem = stem.replace("chapitre-3", "chapitre-3")
+    stem = stem.replace("chapitre-4", "chapitre-4")
+    stem = stem.replace("chapitre-5", "chapitre-5")
+
+    if "prologue" in stem:
+        return "prologue"
+    if "chapitre-1" in stem:
+        return "chapitre-1"
+    if "chapitre-2" in stem:
+        return "chapitre-2"
+    if "chapitre-3" in stem:
+        return "chapitre-3"
+    if "chapitre-4" in stem:
+        return "chapitre-4"
+    if "chapitre-5" in stem:
+        return "chapitre-5"
+    if "conclusion" in stem:
+        return "conclusion"
+
+    return stem
+
+
+def extract_title_from_markdown(md_text: str) -> str | None:
+    for line in md_text.splitlines():
+        line = line.strip()
+        if not line:
+            continue
+        if line.startswith("# "):
+            return line[2:].strip()
+    return None
+
+
+def remove_first_h1(md_text: str) -> str:
+    lines = md_text.splitlines()
+    out = []
+    removed = False
+
+    for line in lines:
+        if not removed and line.strip().startswith("# "):
+            removed = True
+            continue
+        out.append(line)
+
+    text = "\n".join(out).lstrip()
+    return text
+
+
+def clean_markdown(md_text: str) -> str:
+    text = md_text.replace("\r\n", "\n").replace("\r", "\n")
+
+    # nettoyer espaces multiples
+    text = re.sub(r"\n{3,}", "\n\n", text)
+
+    # supprimer éventuels signets/artefacts de liens internes Pandoc
+    text = re.sub(r"\[\]\(#.*?\)", "", text)
+
+    # convertir astérismes parasites
+    text = re.sub(r"[ \t]+$", "", text, flags=re.MULTILINE)
+
+    return text.strip() + "\n"
+
+
+def compute_level(slug: str) -> int:
+    if slug == "prologue":
+        return 1
+    if slug.startswith("chapitre-"):
+        return 1
+    if slug == "conclusion":
+        return 1
+    return 1
+
+
+def convert_one_file(input_docx: Path, output_dir: Path, source_root: Path):
+    slug = slugify_name(input_docx)
+    output_mdx = output_dir / f"{slug}.mdx"
+
+    cmd = [
+        "pandoc",
+        str(input_docx),
+        "-f",
+        "docx",
+        "-t",
+        "gfm+smart",
+    ]
+
+    result = subprocess.run(cmd, check=True, capture_output=True, text=True)
+    md_text = result.stdout
+
+    detected_title = extract_title_from_markdown(md_text)
+    md_body = remove_first_h1(md_text)
+    md_body = clean_markdown(md_body)
+
+    title = TITLE_MAP.get(slug) or detected_title or input_docx.stem
+    order = ORDER_MAP.get(slug, 999)
+    level = compute_level(slug)
+
+    relative_source = input_docx
+    try:
+        relative_source = input_docx.relative_to(source_root)
+    except ValueError:
+        relative_source = input_docx.name
+
+    frontmatter = {
+        "title": title,
+        "edition": EDITION,
+        "status": STATUS,
+        "level": level,
+        "version": VERSION,
+        "concepts": [],
+        "links": [],
+        "order": order,
+        "summary": "",
+        "source": {
+            "kind": "docx",
+            "path": str(relative_source),
+        },
+    }
+
+    yaml_block = yaml.safe_dump(
+        frontmatter,
+        allow_unicode=True,
+        sort_keys=False,
+        default_flow_style=False,
+    ).strip()
+
+    final_text = f"---\n{yaml_block}\n---\n{md_body if md_body.startswith(chr(10)) else chr(10) + md_body}"
+    output_mdx.write_text(final_text, encoding="utf-8")
+    print(f"✅ {input_docx.name} -> {output_mdx.name}")
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Convertit un dossier DOCX en MDX avec frontmatter.")
+    parser.add_argument("input_dir", help="Dossier source contenant les DOCX")
+    parser.add_argument("output_dir", help="Dossier de sortie pour les MDX")
+    args = parser.parse_args()
+
+    input_dir = Path(args.input_dir).expanduser().resolve()
+    output_dir = Path(args.output_dir).expanduser().resolve()
+
+    if not shutil.which("pandoc"):
+        print("Erreur : pandoc n'est pas installé. Lance : brew install pandoc")
+        sys.exit(1)
+
+    if not input_dir.exists() or not input_dir.is_dir():
+        print(f"Erreur : dossier source introuvable : {input_dir}")
+        sys.exit(1)
+
+    output_dir.mkdir(parents=True, exist_ok=True)
+
+    docx_files = sorted(input_dir.glob("*.docx"))
+    if not docx_files:
+        print(f"Aucun DOCX trouvé dans : {input_dir}")
+        sys.exit(1)
+
+    for docx_file in docx_files:
+        convert_one_file(docx_file, output_dir, input_dir)
+
+    print()
+    print("Conversion DOCX -> MDX terminée.")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/scripts/convert_mdx_to_docx.py b/scripts/convert_mdx_to_docx.py
new file mode 100644
index 0000000..846d5e4
--- /dev/null
+++ b/scripts/convert_mdx_to_docx.py
@@ -0,0 +1,304 @@
+#!/usr/bin/env python3
+import argparse
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+from pathlib import Path
+import zipfile
+
+try:
+    import yaml
+except ImportError:
+    print("Erreur : PyYAML n'est pas installé. Lance : pip3 install pyyaml")
+    sys.exit(1)
+
+try:
+    from docx import Document
+except ImportError:
+    print("Erreur : python-docx n'est pas installé. Lance : pip3 install python-docx")
+    sys.exit(1)
+
+
+def split_frontmatter(text: str):
+    if not text.startswith("---\n"):
+        return {}, text
+
+    match = re.match(r"^---\n(.*?)\n---\n(.*)$", text, flags=re.DOTALL)
+    if not match:
+        return {}, text
+
+    yaml_block = match.group(1)
+    body = match.group(2)
+
+    try:
+        metadata = yaml.safe_load(yaml_block) or {}
+    except Exception as e:
+        print(f"Avertissement : frontmatter YAML illisible : {e}")
+        metadata = {}
+
+    return metadata, body
+
+
+def strip_mdx_artifacts(text: str):
+    # imports / exports MDX
+    text = re.sub(r"^\s*(import|export)\s+.+?$", "", text, flags=re.MULTILINE)
+
+    # composants autofermants : <Component />
+    text = re.sub(r"<[A-Z][A-Za-z0-9._-]*\b[^>]*\/>", "", text)
+
+    # composants bloc : <Component ...>...</Component>
+    text = re.sub(
+        r"<([A-Z][A-Za-z0-9._-]*)\b[^>]*>.*?</\1>",
+        "",
+        text,
+        flags=re.DOTALL,
+    )
+
+    # accolades seules résiduelles sur ligne
+    text = re.sub(r"^\s*{\s*}\s*$", "", text, flags=re.MULTILINE)
+
+    # lignes vides multiples
+    text = re.sub(r"\n{3,}", "\n\n", text)
+
+    return text.strip() + "\n"
+
+
+def inject_h1_from_title(metadata: dict, body: str):
+    title = metadata.get("title", "")
+    if not title:
+        return body
+
+    if re.match(r"^\s*#\s+", body):
+        return body
+
+    return f"# {title}\n\n{body.lstrip()}"
+
+
+def find_style_by_candidates(doc, candidates):
+    # Cherche d'abord par nom visible
+    for style in doc.styles:
+        for candidate in candidates:
+            if style.name == candidate:
+                return style
+
+    # Puis par style_id Word interne
+    for style in doc.styles:
+        style_id = getattr(style, "style_id", "")
+        if style_id in {"BodyText", "Heading1", "Heading2", "Heading3", "Heading4"}:
+            for candidate in candidates:
+                if candidate in {"Body Text", "Corps de texte"} and style_id == "BodyText":
+                    return style
+                if candidate in {"Heading 1", "Titre 1"} and style_id == "Heading1":
+                    return style
+                if candidate in {"Heading 2", "Titre 2"} and style_id == "Heading2":
+                    return style
+                if candidate in {"Heading 3", "Titre 3"} and style_id == "Heading3":
+                    return style
+                if candidate in {"Heading 4", "Titre 4"} and style_id == "Heading4":
+                    return style
+    return None
+
+def strip_leading_paragraph_numbers(text: str):
+    """
+    Supprime les numéros de paragraphe du type :
+    2. Texte...
+    11. Texte...
+    101. Texte...
+    sans toucher aux titres Markdown (#, ##, ###).
+    """
+    fixed_lines = []
+
+    for line in text.splitlines():
+        stripped = line.lstrip()
+
+        # Ne jamais toucher aux titres Markdown
+        if stripped.startswith("#"):
+            fixed_lines.append(line)
+            continue
+
+        # Supprime un numéro de paragraphe en début de ligne
+        line = re.sub(r"^\s*\d+\.\s+", "", line)
+        fixed_lines.append(line)
+
+    return "\n".join(fixed_lines) + "\n"
+
+def normalize_non_heading_paragraphs(docx_path: Path):
+    """
+    Force tous les paragraphes non-titres en Body Text / Corps de texte.
+    On laisse intacts les Heading 1-4.
+    """
+    doc = Document(str(docx_path))
+
+    body_style = find_style_by_candidates(doc, ["Body Text", "Corps de texte"])
+    if body_style is None:
+        print(f"Avertissement : style 'Body Text / Corps de texte' introuvable dans {docx_path.name}")
+        return
+
+    heading_names = {
+        "Heading 1", "Heading 2", "Heading 3", "Heading 4",
+        "Titre 1", "Titre 2", "Titre 3", "Titre 4",
+    }
+    heading_ids = {"Heading1", "Heading2", "Heading3", "Heading4"}
+
+    changed = 0
+
+    for para in doc.paragraphs:
+        text = para.text.strip()
+        if not text:
+            continue
+
+        current_style = para.style
+        current_name = current_style.name if current_style else ""
+        current_id = getattr(current_style, "style_id", "") if current_style else ""
+
+        if current_name in heading_names or current_id in heading_ids:
+            continue
+
+        # Tout le reste passe en Body Text
+        para.style = body_style
+        changed += 1
+
+    doc.save(str(docx_path))
+    print(f"   ↳ normalisation styles : {changed} paragraphe(s) mis en 'Body Text / Corps de texte'")
+
+def remove_word_bookmarks(docx_path: Path):
+    """
+    Supprime les bookmarks Word (signets) du DOCX.
+    Ce sont eux qui apparaissent comme crochets gris dans LibreOffice/Word
+    quand l'affichage des signets est activé.
+    """
+    with tempfile.TemporaryDirectory() as tmpdir:
+        tmpdir = Path(tmpdir)
+
+        # Dézipper le docx
+        with zipfile.ZipFile(docx_path, "r") as zin:
+            zin.extractall(tmpdir)
+
+        xml_targets = [
+            tmpdir / "word" / "document.xml",
+            tmpdir / "word" / "footnotes.xml",
+            tmpdir / "word" / "endnotes.xml",
+            tmpdir / "word" / "comments.xml",
+        ]
+
+        removed = 0
+
+        for xml_file in xml_targets:
+            if not xml_file.exists():
+                continue
+
+            text = xml_file.read_text(encoding="utf-8")
+
+            # enlever <w:bookmarkStart .../> et <w:bookmarkEnd .../>
+            text, c1 = re.subn(r"<w:bookmarkStart\b[^>]*/>", "", text)
+            text, c2 = re.subn(r"<w:bookmarkEnd\b[^>]*/>", "", text)
+
+            removed += c1 + c2
+            xml_file.write_text(text, encoding="utf-8")
+
+        # Rezipper
+        tmp_output = docx_path.with_suffix(".cleaned.docx")
+        with zipfile.ZipFile(tmp_output, "w", zipfile.ZIP_DEFLATED) as zout:
+            for file in tmpdir.rglob("*"):
+                if file.is_file():
+                    zout.write(file, file.relative_to(tmpdir))
+
+        tmp_output.replace(docx_path)
+        print(f"   ↳ suppression signets : {removed} balise(s) supprimée(s)")
+
+def convert_one_file(input_path: Path, output_path: Path, reference_doc: Path | None):
+    raw = input_path.read_text(encoding="utf-8")
+    metadata, body = split_frontmatter(raw)
+    body = strip_mdx_artifacts(body)
+    body = strip_leading_paragraph_numbers(body)
+    body = inject_h1_from_title(metadata, body)
+
+    with tempfile.NamedTemporaryFile("w", suffix=".md", delete=False, encoding="utf-8") as tmp:
+        tmp.write(body)
+        tmp_md = Path(tmp.name)
+
+    cmd = [
+        "pandoc",
+        str(tmp_md),
+        "-f",
+        "markdown",
+        "-o",
+        str(output_path),
+    ]
+
+    if reference_doc:
+        cmd.extend(["--reference-doc", str(reference_doc)])
+
+    try:
+        subprocess.run(cmd, check=True)
+    finally:
+        try:
+            tmp_md.unlink()
+        except FileNotFoundError:
+            pass
+
+    normalize_non_heading_paragraphs(output_path)
+    remove_word_bookmarks(output_path)
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Convertit des fichiers MDX en DOCX en conservant H1/H2/H3/H4 et en forçant le corps en Body Text."
+    )
+    parser.add_argument("input_dir", help="Dossier contenant les .mdx")
+    parser.add_argument(
+        "--output-dir",
+        default=str(Path.home() / "Desktop" / "archicrat-ia-docx"),
+        help="Dossier de sortie DOCX"
+    )
+    parser.add_argument(
+        "--reference-doc",
+        default=None,
+        help="DOCX modèle Word à utiliser comme reference-doc"
+    )
+
+    args = parser.parse_args()
+
+    input_dir = Path(args.input_dir)
+    output_dir = Path(args.output_dir)
+    reference_doc = Path(args.reference_doc) if args.reference_doc else None
+
+    if not shutil.which("pandoc"):
+        print("Erreur : pandoc n'est pas installé. Installe-le avec : brew install pandoc")
+        sys.exit(1)
+
+    if not input_dir.exists() or not input_dir.is_dir():
+        print(f"Erreur : dossier introuvable : {input_dir}")
+        sys.exit(1)
+
+    if reference_doc and not reference_doc.exists():
+        print(f"Erreur : reference-doc introuvable : {reference_doc}")
+        sys.exit(1)
+
+    output_dir.mkdir(parents=True, exist_ok=True)
+
+    mdx_files = sorted(input_dir.glob("*.mdx"))
+    if not mdx_files:
+        print(f"Aucun fichier .mdx trouvé dans : {input_dir}")
+        sys.exit(1)
+
+    print(f"Conversion de {len(mdx_files)} fichier(s)...")
+    print(f"Entrée  : {input_dir}")
+    print(f"Sortie  : {output_dir}")
+    if reference_doc:
+        print(f"Modèle  : {reference_doc}")
+    print()
+
+    for mdx_file in mdx_files:
+        docx_name = mdx_file.with_suffix(".docx").name
+        out_file = output_dir / docx_name
+        print(f"→ {mdx_file.name} -> {docx_name}")
+        convert_one_file(mdx_file, out_file, reference_doc)
+
+    print()
+    print("✅ Conversion terminée.")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/src/components/EditionToc.astro b/src/components/EditionToc.astro
index 975f4e3..33d84d0 100644
--- a/src/components/EditionToc.astro
+++ b/src/components/EditionToc.astro
@@ -22,43 +22,58 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
   const bt = String(b.data.title ?? b.data.term ?? slugOf(b));
   return collator.compare(at, bt);
 });
+
+const tocId = `toc-global-${collection}-${String(basePath).replace(/[^\w-]+/g, "-")}`;
 ---
 
-<nav class="toc-global" aria-label={label}>
-  <div class="toc-global__head">
-    <div class="toc-global__title">{label}</div>
-  </div>
+<nav
+  class="toc-global"
+  aria-label={label}
+  data-toc-global
+  data-toc-key={`global:${collection}:${basePath}`}
+>
+  <button
+    class="toc-global__head toc-global__toggle"
+    type="button"
+    aria-expanded="true"
+    aria-controls={tocId}
+  >
+    <span class="toc-global__title">{label}</span>
+    <span class="toc-global__chevron" aria-hidden="true">▾</span>
+  </button>
 
-  <ol class="toc-global__list">
-    {entries.map((e) => {
-      const slug = slugOf(e);
-      const active = slug === currentSlug;
+  <div class="toc-global__body-clip" id={tocId}>
+    <div class="toc-global__body">
+      <ol class="toc-global__list">
+        {entries.map((e) => {
+          const slug = slugOf(e);
+          const active = slug === currentSlug;
 
-      return (
-        <li class={`toc-item ${active ? "is-active" : ""}`}>
-          <a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
-            <span class="toc-link__row">
-              {active ? (
-                <span class="toc-active-indicator" aria-hidden="true">👉</span>
-              ) : (
-                <span class="toc-active-spacer" aria-hidden="true"></span>
-              )}
+          return (
+            <li class={`toc-item ${active ? "is-active" : ""}`}>
+              <a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
+                <span class="toc-link__row">
+                  <span class={`toc-active-mark ${active ? "is-on" : ""}`} aria-hidden="true">
+                    <span class="toc-active-mark__dot"></span>
+                  </span>
 
-              <span class="toc-link__title">{e.data.title}</span>
+                  <span class="toc-link__title">{e.data.title}</span>
 
-              {active && (
-                <span class="toc-badge" aria-label="Chapitre en cours">
-                  En cours
+                  {active && (
+                    <span class="toc-badge" aria-label="Chapitre en cours">
+                      En cours
+                    </span>
+                  )}
                 </span>
-              )}
-            </span>
 
-            {active && <span class="toc-underline" aria-hidden="true"></span>}
-          </a>
-        </li>
-      );
-    })}
-  </ol>
+                {active && <span class="toc-underline" aria-hidden="true"></span>}
+              </a>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  </div>
 </nav>
 
 <style>
@@ -69,7 +84,22 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
     background: rgba(127,127,127,0.06);
   }
 
+  .toc-global__toggle{
+    width: 100%;
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    padding: 0;
+    cursor: pointer;
+  }
+
   .toc-global__head{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
     margin-bottom: 10px;
     padding-bottom: 10px;
     border-bottom: 1px dashed rgba(127,127,127,0.25);
@@ -82,11 +112,36 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
     opacity: .88;
   }
 
+  .toc-global__chevron{
+    font-size: 12px;
+    opacity: .7;
+    transition: transform 180ms ease;
+  }
+
+  .toc-global__body-clip{
+    display: grid;
+    grid-template-rows: 1fr;
+    transition:
+      grid-template-rows 220ms ease,
+      opacity 160ms ease,
+      margin-top 220ms ease;
+  }
+
+  .toc-global__body{
+    min-height: 0;
+    overflow: hidden;
+  }
+
   .toc-global__list{
     list-style: none;
     margin: 0;
     padding: 0;
+    max-height: 44vh;
+    overflow: auto;
+    padding-right: 8px;
+    scrollbar-gutter: stable;
   }
+
   .toc-global__list li::marker{ content: ""; }
 
   .toc-item{ margin: 6px 0; }
@@ -112,13 +167,33 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
     align-items: center;
   }
 
-  .toc-active-indicator{
-    font-size: 14px;
-    line-height: 1;
+  .toc-active-mark{
+    width: 14px;
+    height: 14px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    opacity: .55;
   }
 
-  .toc-active-spacer{
-    width: 14px;
+  .toc-active-mark__dot{
+    width: 5px;
+    height: 5px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: .65;
+  }
+
+  .toc-active-mark.is-on{
+    border-color: rgba(127,127,127,0.34);
+    opacity: 1;
+  }
+
+  .toc-active-mark.is-on .toc-active-mark__dot{
+    width: 6px;
+    height: 6px;
+    opacity: 1;
   }
 
   .toc-link__title{
@@ -156,11 +231,66 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
     border-radius: 999px;
   }
 
-  .toc-global__list{
-    max-height: 44vh;
-    overflow: auto;
-    padding-right: 8px;
-    scrollbar-gutter: stable;
+  @media (max-width: 980px){
+    .toc-global{
+      padding: 10px 12px;
+      border-radius: 14px;
+    }
+
+    .toc-global__head{
+      margin-bottom: 0;
+      padding-bottom: 0;
+      border-bottom: 0;
+      min-height: 28px;
+    }
+
+    .toc-global__title{
+      font-size: 13px;
+    }
+
+    .toc-global__body-clip{
+      margin-top: 10px;
+    }
+
+    .toc-global.is-collapsed .toc-global__body-clip{
+      grid-template-rows: 0fr;
+      opacity: 0;
+      margin-top: 0;
+    }
+
+    .toc-global__body{
+      min-height: 0;
+      overflow: hidden;
+      transition: opacity 180ms ease;
+    }
+
+    .toc-global.is-collapsed .toc-global__body{
+      opacity: 0;
+    }
+
+    .toc-global.is-collapsed .toc-global__chevron{
+      transform: rotate(-90deg);
+    }
+
+    .toc-link{
+      padding: 7px 9px;
+      border-radius: 12px;
+    }
+
+    .toc-link__title{
+      font-size: 12.5px;
+      line-height: 1.22;
+    }
+
+    .toc-badge{
+      font-size: 10px;
+      padding: 2px 7px;
+    }
+
+    .toc-global__list{
+      max-height: min(42vh, 360px);
+      padding-right: 4px;
+    }
   }
 
   @media (prefers-color-scheme: dark){
@@ -168,12 +298,88 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
     .toc-link:hover{ background: rgba(255,255,255,0.06); }
     .toc-item.is-active .toc-link{ background: rgba(255,255,255,0.06); }
     .toc-badge{ background: rgba(255,255,255,0.06); }
+    .toc-active-mark.is-on{ border-color: rgba(255,255,255,0.22); }
   }
 </style>
 
 <script is:inline>
 (() => {
-  const active = document.querySelector(".toc-global .toc-item.is-active");
-  if (active) active.scrollIntoView({ block: "nearest" });
+  function init() {
+    document.querySelectorAll("[data-toc-global]").forEach((nav) => {
+      if (nav.dataset.tocReady === "1") return;
+      nav.dataset.tocReady = "1";
+
+      const toggle = nav.querySelector(".toc-global__toggle");
+      const bodyClip = nav.querySelector(".toc-global__body-clip");
+      const active = nav.querySelector(".toc-item.is-active");
+      const mq = window.matchMedia("(max-width: 980px)");
+      const key = `archicratie:${nav.dataset.tocKey || "toc-global"}`;
+
+      if (!toggle || !bodyClip) return;
+
+      const read = () => {
+        try {
+          const v = localStorage.getItem(key);
+          if (v === "open") return true;
+          if (v === "closed") return false;
+        } catch {}
+        return null;
+      };
+
+      const write = (open) => {
+        try { localStorage.setItem(key, open ? "open" : "closed"); } catch {}
+      };
+
+      const setOpen = (open, { persist = true } = {}) => {
+        const isMobile = mq.matches;
+        nav.classList.toggle("is-collapsed", isMobile && !open);
+        toggle.setAttribute("aria-expanded", open ? "true" : "false");
+        if (persist && isMobile) write(open);
+      };
+
+      const initState = () => {
+        if (!mq.matches) {
+          setOpen(true, { persist: false });
+          if (active) active.scrollIntoView({ block: "nearest" });
+          return;
+        }
+
+        const stored = read();
+        const open = stored == null ? false : stored;
+        setOpen(open, { persist: false });
+
+        if (open && active) active.scrollIntoView({ block: "nearest" });
+      };
+
+      toggle.addEventListener("click", () => {
+        const open = toggle.getAttribute("aria-expanded") !== "true";
+        setOpen(open);
+        if (open && active) active.scrollIntoView({ block: "nearest" });
+
+        if (open) {
+          window.dispatchEvent(new CustomEvent("archicratie:tocGlobalOpen"));
+        }
+      });
+
+      window.addEventListener("archicratie:tocLocalOpen", () => {
+        if (!mq.matches) return;
+        setOpen(false);
+      });
+
+      if (mq.addEventListener) {
+        mq.addEventListener("change", initState);
+      } else if (mq.addListener) {
+        mq.addListener(initState);
+      }
+
+      initState();
+    });
+  }
+
+  if (document.readyState === "loading") {
+    window.addEventListener("DOMContentLoaded", init, { once: true });
+  } else {
+    init();
+  }
 })();
 </script>
\ No newline at end of file
diff --git a/src/components/GlossaryAside.astro b/src/components/GlossaryAside.astro
index 9e2421d..8e9485c 100644
--- a/src/components/GlossaryAside.astro
+++ b/src/components/GlossaryAside.astro
@@ -49,85 +49,114 @@ const portalLinks = getGlossaryPortalLinks();
     </div>
   </div>
 
-  <section class="glossary-aside__block">
-    <h2 class="glossary-aside__heading">Portails</h2>
-    <ul class="glossary-aside__list">
-      {portalLinks.map((item) => (
-        <li><a href={item.href}>{item.label}</a></li>
-      ))}
-    </ul>
-  </section>
+  <details class="glossary-aside__block glossary-aside__disclosure" open>
+    <summary class="glossary-aside__summary">
+      <span class="glossary-aside__heading">Portails</span>
+      <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
+    </summary>
+
+    <div class="glossary-aside__panel">
+      <ul class="glossary-aside__list">
+        {portalLinks.map((item) => (
+          <li><a href={item.href}>{item.label}</a></li>
+        ))}
+      </ul>
+    </div>
+  </details>
 
   {showNoyau && (
-    <section class="glossary-aside__block">
-      <h2 class="glossary-aside__heading">Noyau archicratique</h2>
-      <ul class="glossary-aside__list">
-        {fondamentaux.map((entry) => {
-          const active = slugOfGlossaryEntry(entry) === currentSlug;
-          return (
-            <li>
-              <a
-                href={hrefOfGlossaryEntry(entry)}
-                aria-current={active ? "page" : undefined}
-                class={active ? "is-active" : undefined}
-              >
-                {entry.data.term}
-              </a>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
+    <details class="glossary-aside__block glossary-aside__disclosure" open>
+      <summary class="glossary-aside__summary">
+        <span class="glossary-aside__heading">Noyau archicratique</span>
+        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
+
+      <div class="glossary-aside__panel">
+        <ul class="glossary-aside__list">
+          {fondamentaux.map((entry) => {
+            const active = slugOfGlossaryEntry(entry) === currentSlug;
+            return (
+              <li>
+                <a
+                  href={hrefOfGlossaryEntry(entry)}
+                  aria-current={active ? "page" : undefined}
+                  class={active ? "is-active" : undefined}
+                >
+                  {entry.data.term}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </details>
   )}
 
   {showSameFamily && (
-    <section class="glossary-aside__block">
-      <h2 class="glossary-aside__heading">{sameFamilyTitle}</h2>
-      <ul class="glossary-aside__list">
-        {sameFamilyEntries.map((entry) => {
-          const active = slugOfGlossaryEntry(entry) === currentSlug;
-          return (
-            <li>
-              <a
-                href={hrefOfGlossaryEntry(entry)}
-                aria-current={active ? "page" : undefined}
-                class={active ? "is-active" : undefined}
-              >
-                {entry.data.term}
-              </a>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
+    <details class="glossary-aside__block glossary-aside__disclosure" open>
+      <summary class="glossary-aside__summary">
+        <span class="glossary-aside__heading">{sameFamilyTitle}</span>
+        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
+
+      <div class="glossary-aside__panel">
+        <ul class="glossary-aside__list">
+          {sameFamilyEntries.map((entry) => {
+            const active = slugOfGlossaryEntry(entry) === currentSlug;
+            return (
+              <li>
+                <a
+                  href={hrefOfGlossaryEntry(entry)}
+                  aria-current={active ? "page" : undefined}
+                  class={active ? "is-active" : undefined}
+                >
+                  {entry.data.term}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </details>
   )}
 
   {relationSections.length > 0 && (
-    <section class="glossary-aside__block">
-      <h2 class="glossary-aside__heading">Autour de cette fiche</h2>
+    <details class="glossary-aside__block glossary-aside__disclosure" open>
+      <summary class="glossary-aside__summary">
+        <span class="glossary-aside__heading">Autour de cette fiche</span>
+        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
 
-      {relationSections.map((section) => (
-        <>
-          <h3 class="glossary-aside__subheading">{section.title}</h3>
-          <ul class="glossary-aside__list">
-            {section.items.map((entry) => (
-              <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
-            ))}
-          </ul>
-        </>
-      ))}
-    </section>
+      <div class="glossary-aside__panel">
+        {relationSections.map((section) => (
+          <>
+            <h3 class="glossary-aside__subheading">{section.title}</h3>
+            <ul class="glossary-aside__list">
+              {section.items.map((entry) => (
+                <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
+              ))}
+            </ul>
+          </>
+        ))}
+      </div>
+    </details>
   )}
 
   {contextualTheory.length > 0 && (
-    <section class="glossary-aside__block">
-      <h2 class="glossary-aside__heading">Paysage théorique</h2>
-      <ul class="glossary-aside__list">
-        {contextualTheory.map((entry) => (
-          <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
-        ))}
-      </ul>
-    </section>
+    <details class="glossary-aside__block glossary-aside__disclosure" open>
+      <summary class="glossary-aside__summary">
+        <span class="glossary-aside__heading">Paysage théorique</span>
+        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
+
+      <div class="glossary-aside__panel">
+        <ul class="glossary-aside__list">
+          {contextualTheory.map((entry) => (
+            <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
+          ))}
+        </ul>
+      </div>
+    </details>
   )}
 </nav>
 
@@ -136,6 +165,7 @@ const portalLinks = getGlossaryPortalLinks();
     display: flex;
     flex-direction: column;
     gap: 14px;
+    min-width: 0;
   }
 
   .glossary-aside__block{
@@ -143,6 +173,7 @@ const portalLinks = getGlossaryPortalLinks();
     border-radius: 16px;
     padding: 14px;
     background: rgba(127,127,127,0.05);
+    min-width: 0;
   }
 
   .glossary-aside__block--intro{
@@ -160,10 +191,10 @@ const portalLinks = getGlossaryPortalLinks();
   }
 
   .glossary-aside__title{
-    font-size: 16px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.3;
+    font-size: 18px;
+    font-weight: 850;
+    letter-spacing: .1px;
+    line-height: 1.22;
   }
 
   .glossary-aside__pills{
@@ -183,6 +214,7 @@ const portalLinks = getGlossaryPortalLinks();
     font-size: 13px;
     line-height: 1.35;
     opacity: .92;
+    min-width: 0;
   }
 
   .glossary-aside__pill--family{
@@ -190,12 +222,54 @@ const portalLinks = getGlossaryPortalLinks();
     font-weight: 800;
   }
 
+  .glossary-aside__disclosure{
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .glossary-aside__summary{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .glossary-aside__summary::-webkit-details-marker{
+    display: none;
+  }
+
+  .glossary-aside__summary:hover{
+    background: rgba(127,127,127,0.035);
+  }
+
   .glossary-aside__heading{
-    margin: 0 0 11px;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 850;
+    line-height: 1.28;
+    opacity: .97;
+  }
+
+  .glossary-aside__chevron{
+    flex: 0 0 auto;
     font-size: 14px;
-    font-weight: 800;
-    line-height: 1.35;
-    opacity: .94;
+    line-height: 1;
+    opacity: .72;
+    transform: rotate(0deg);
+    transition: transform 160ms ease, opacity 160ms ease;
+  }
+
+  .glossary-aside__disclosure[open] .glossary-aside__chevron{
+    transform: rotate(180deg);
+    opacity: .96;
+  }
+
+  .glossary-aside__panel{
+    padding: 0 14px 14px;
   }
 
   .glossary-aside__subheading{
@@ -222,16 +296,210 @@ const portalLinks = getGlossaryPortalLinks();
     text-decoration: none;
     font-size: 14px;
     line-height: 1.4;
+    word-break: break-word;
   }
 
   .glossary-aside__list a.is-active{
     font-weight: 800;
   }
 
+  @media (max-width: 860px){
+    .glossary-aside{
+      gap: 10px;
+    }
+
+    .glossary-aside__block{
+      border-radius: 14px;
+    }
+
+    .glossary-aside__block--intro{
+      padding: 12px;
+    }
+
+    .glossary-aside__back{
+      margin-bottom: 8px;
+      font-size: 13px;
+      line-height: 1.28;
+    }
+
+    .glossary-aside__title{
+      font-size: 19px;
+      line-height: 1.18;
+    }
+
+    .glossary-aside__pills{
+      gap: 6px;
+      margin-top: 8px;
+    }
+
+    .glossary-aside__pill{
+      padding: 4px 9px;
+      font-size: 12px;
+      line-height: 1.26;
+    }
+
+    .glossary-aside__summary{
+      padding: 12px;
+    }
+
+    .glossary-aside__heading{
+      font-size: 17px;
+      line-height: 1.2;
+    }
+
+    .glossary-aside__panel{
+      padding: 0 12px 12px;
+    }
+
+    .glossary-aside__subheading{
+      margin: 10px 0 6px;
+      font-size: 11.5px;
+      line-height: 1.26;
+    }
+
+    .glossary-aside__list li{
+      margin: 5px 0;
+    }
+
+    .glossary-aside__list a{
+      font-size: 14px;
+      line-height: 1.34;
+    }
+
+    .glossary-aside__disclosure:not([open]) .glossary-aside__panel{
+      display: none;
+    }
+  }
+
+  @media (max-width: 860px){
+    .glossary-aside__disclosure{
+      background: rgba(127,127,127,0.045);
+    }
+
+    .glossary-aside__disclosure[open] .glossary-aside__summary{
+      border-bottom: 1px solid rgba(127,127,127,0.12);
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-aside{
+      gap: 8px;
+    }
+
+    .glossary-aside__block{
+      border-radius: 12px;
+    }
+
+    .glossary-aside__block--intro{
+      padding: 10px 11px;
+    }
+
+    .glossary-aside__back{
+      margin-bottom: 6px;
+      font-size: 12px;
+      line-height: 1.2;
+    }
+
+    .glossary-aside__title{
+      font-size: 16px;
+      line-height: 1.14;
+    }
+
+    .glossary-aside__pills{
+      gap: 5px;
+      margin-top: 7px;
+    }
+
+    .glossary-aside__pill{
+      padding: 3px 8px;
+      font-size: 11px;
+      line-height: 1.2;
+    }
+
+    .glossary-aside__summary{
+      padding: 10px 11px;
+    }
+
+    .glossary-aside__heading{
+      font-size: 15px;
+      line-height: 1.16;
+    }
+
+    .glossary-aside__panel{
+      padding: 0 11px 10px;
+    }
+
+    .glossary-aside__subheading{
+      margin: 8px 0 5px;
+      font-size: 11px;
+      line-height: 1.18;
+    }
+
+    .glossary-aside__list li{
+      margin: 4px 0;
+    }
+
+    .glossary-aside__list a{
+      font-size: 13px;
+      line-height: 1.28;
+    }
+  }
+
+  @media (min-width: 861px){
+    .glossary-aside__summary{
+      cursor: default;
+    }
+
+    .glossary-aside__chevron{
+      display: none;
+    }
+  }
+
   @media (prefers-color-scheme: dark){
     .glossary-aside__block,
     .glossary-aside__pill{
       background: rgba(255,255,255,0.04);
     }
+
+    .glossary-aside__summary:hover{
+      background: rgba(255,255,255,0.03);
+    }
   }
-</style>
\ No newline at end of file
+</style>
+
+<script is:inline>
+  (() => {
+    const syncMobileDisclosure = () => {
+      const mobile = window.matchMedia("(max-width: 860px)").matches;
+      const smallLandscape = window.matchMedia(
+        "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+      ).matches;
+
+      const compact = mobile || smallLandscape;
+
+      document
+        .querySelectorAll(".glossary-aside__disclosure")
+        .forEach((el, index) => {
+          if (!(el instanceof HTMLDetailsElement)) return;
+
+          if (compact) {
+            if (!el.dataset.mobileInit) {
+              el.open = index === 0;
+              el.dataset.mobileInit = "true";
+            }
+          } else {
+            el.open = true;
+          }
+        });
+    };
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", syncMobileDisclosure, { once: true });
+    } else {
+      syncMobileDisclosure();
+    }
+
+    window.addEventListener("resize", syncMobileDisclosure);
+    window.addEventListener("pageshow", syncMobileDisclosure);
+  })();
+</script>
\ No newline at end of file
diff --git a/src/components/GlossaryCardGrid.astro b/src/components/GlossaryCardGrid.astro
index 1d406e8..568b57d 100644
--- a/src/components/GlossaryCardGrid.astro
+++ b/src/components/GlossaryCardGrid.astro
@@ -32,16 +32,16 @@ const {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .glossary-card{
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    padding: 14px 16px;
+    gap: 7px;
+    padding: 13px 14px;
     border: 1px solid var(--glossary-border);
-    border-radius: 18px;
+    border-radius: 16px;
     background: var(--glossary-bg-soft);
     text-decoration: none;
     transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
@@ -60,17 +60,44 @@ const {
 
   .glossary-card strong{
     color: var(--glossary-accent);
-    font-size: 1.04rem;
-    line-height: 1.28;
+    font-size: 1.02rem;
+    line-height: 1.24;
   }
 
   .glossary-card span{
     color: inherit;
-    font-size: 1rem;
-    line-height: 1.5;
+    font-size: .98rem;
+    line-height: 1.46;
     opacity: .94;
   }
 
+  @media (max-width: 760px){
+    .glossary-cards{
+      grid-template-columns: 1fr;
+      gap: 10px;
+      margin-top: 10px;
+    }
+
+    .glossary-card{
+      gap: 6px;
+      padding: 12px 12px;
+      border-radius: 14px;
+    }
+
+    .glossary-card strong{
+      font-size: .98rem;
+    }
+
+    .glossary-card span{
+      font-size: .94rem;
+      line-height: 1.42;
+    }
+
+    .glossary-card--wide{
+      grid-column: auto;
+    }
+  }
+
   @media (prefers-color-scheme: dark){
     .glossary-card{
       background: rgba(255,255,255,0.04);
diff --git a/src/components/GlossaryEntryHero.astro b/src/components/GlossaryEntryHero.astro
index bae628f..84971b0 100644
--- a/src/components/GlossaryEntryHero.astro
+++ b/src/components/GlossaryEntryHero.astro
@@ -75,9 +75,9 @@ const hasScholarlyMeta =
     position: sticky;
     top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
     z-index: 11;
-    margin: 0 0 24px;
+    margin: 0 0 22px;
     border: 1px solid rgba(127,127,127,0.18);
-    border-radius: 28px;
+    border-radius: 24px;
     background:
       linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
       radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
@@ -97,7 +97,7 @@ const hasScholarlyMeta =
       calc(var(--entry-hero-pad-top, 18px) - 2px);
     transition: padding 180ms ease;
   }
-  
+
   .glossary-entry-head h1{
     margin: 0;
     font-size: var(--entry-hero-h1-size, clamp(2.2rem, 4vw, 3.15rem));
@@ -129,12 +129,17 @@ const hasScholarlyMeta =
       max-width 180ms ease,
       font-size 180ms ease,
       line-height 180ms ease;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
   }
 
   .glossary-entry-signals{
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 7px;
     margin: 0;
     transition: gap 180ms ease;
   }
@@ -142,13 +147,13 @@ const hasScholarlyMeta =
   .glossary-pill{
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    padding: 5px 10px;
+    gap: 5px;
+    padding: 5px 9px;
     border: 1px solid rgba(127,127,127,0.24);
     border-radius: 999px;
     background: rgba(127,127,127,0.05);
-    font-size: 13px;
-    line-height: 1.35;
+    font-size: 12.5px;
+    line-height: 1.28;
     transition:
       padding 180ms ease,
       font-size 180ms ease,
@@ -179,42 +184,67 @@ const hasScholarlyMeta =
 
   .glossary-entry-meta p{
     margin: 0;
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: 13.5px;
+    line-height: 1.45;
   }
 
   .glossary-entry-meta p + p{
     margin-top: 6px;
   }
 
-  @media (max-width: 720px){
+  @media (max-width: 860px){
+    .glossary-entry-head{
+      position: static;
+      border-radius: 18px;
+      margin-bottom: 16px;
+    }
+
+    .glossary-entry-head__title{
+      padding: 12px 12px 10px;
+    }
+
+    .glossary-entry-summary{
+      gap: 9px;
+      padding: 10px 12px 12px;
+    }
+
+    .glossary-entry-dek{
+      max-width: none;
+      -webkit-line-clamp: 3;
+    }
+
     .glossary-entry-signals{
       gap: 6px;
     }
 
     .glossary-pill{
       font-size: 12px;
+      padding: 4px 8px;
     }
   }
 
-  @media (max-width: 860px){
+  @media (max-width: 520px){
     .glossary-entry-head{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
+      border-radius: 16px;
+      margin-bottom: 14px;
     }
 
     .glossary-entry-head__title{
-      padding: 14px 14px 12px;
+      padding: 10px 10px 9px;
     }
 
     .glossary-entry-summary{
-      gap: 12px;
-      padding: 14px;
+      gap: 8px;
+      padding: 9px 10px 10px;
     }
 
     .glossary-entry-dek{
-      max-width: none;
+      -webkit-line-clamp: 2;
+    }
+
+    .glossary-pill{
+      font-size: 11.5px;
+      padding: 3px 7px;
     }
   }
 
diff --git a/src/components/GlossaryEntryStickySync.astro b/src/components/GlossaryEntryStickySync.astro
index 8eb8e27..673634d 100644
--- a/src/components/GlossaryEntryStickySync.astro
+++ b/src/components/GlossaryEntryStickySync.astro
@@ -6,6 +6,9 @@
       const hero = document.querySelector("[data-ge-hero]");
       const follow = document.getElementById("reading-follow");
       const mqMobile = window.matchMedia("(max-width: 860px)");
+      const mqSmallLandscape = window.matchMedia(
+        "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+      );
 
       if (!body || !root || !hero || !follow) return;
 
@@ -18,11 +21,26 @@
 
       body.classList.add(BODY_CLASS);
 
+      const isCompactViewport = () =>
+        mqMobile.matches || mqSmallLandscape.matches;
+
       const heroHeight = () =>
         Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
 
+      const neutralizeGlobalFollowIfCompact = () => {
+        if (!isCompactViewport()) {
+          follow.style.display = "";
+          return;
+        }
+
+        follow.classList.remove("is-on");
+        follow.setAttribute("aria-hidden", "true");
+        follow.style.display = "none";
+        root.style.setProperty("--followbar-h", "0px");
+      };
+
       const computeFollowOn = () =>
-        !mqMobile.matches &&
+        !isCompactViewport() &&
         follow.classList.contains("is-on") &&
         follow.style.display !== "none" &&
         follow.getAttribute("aria-hidden") !== "true";
@@ -39,7 +57,7 @@
       };
 
       const applyLocalStickyHeight = () => {
-        const h = mqMobile.matches ? 0 : heroHeight();
+        const h = isCompactViewport() ? 0 : heroHeight();
         if (h === lastHeight) return;
         lastHeight = h;
 
@@ -58,6 +76,7 @@
       };
 
       const syncAll = () => {
+        neutralizeGlobalFollowIfCompact();
         stripLocalSticky();
         syncFollowState();
         applyLocalStickyHeight();
@@ -98,6 +117,12 @@
         mqMobile.addListener(schedule);
       }
 
+      if (mqSmallLandscape.addEventListener) {
+        mqSmallLandscape.addEventListener("change", schedule);
+      } else if (mqSmallLandscape.addListener) {
+        mqSmallLandscape.addListener(schedule);
+      }
+
       schedule();
     };
 
@@ -114,37 +139,47 @@
     z-index: 10;
   }
 
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
-    gap: 6px;
-  }
-
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
     margin-bottom: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head h1){
+    letter-spacing: -.03em;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-summary){
-    gap: 10px;
-    padding-top: 12px;
-    padding-bottom: 10px;
+    gap: 8px;
+    padding-top: 10px;
+    padding-bottom: 8px;
+    border-top-color: rgba(127,127,127,0.10);
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     overflow: hidden;
   }
 
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
+    gap: 5px;
+  }
+
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
-    padding: 4px 8px;
-    font-size: 12px;
+    gap: 4px;
+    padding: 3px 7px;
+    font-size: 11px;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-meta){
     padding: 0;
     border-color: transparent;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){
@@ -177,9 +212,78 @@
   }
 
   @media (max-width: 860px){
+    :global(body.is-glossary-entry-page #reading-follow),
+    :global(body.is-glossary-entry-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+      visibility: hidden !important;
+    }
+
+    :global(body.is-glossary-entry-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+
     :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
-      margin-bottom: 20px;
-      border-radius: 22px;
+      margin-bottom: 18px;
+      border-radius: 20px;
+      box-shadow: none;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-summary){
+      gap: 6px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
+      display: none;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
+      gap: 5px;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
+      padding: 3px 6px;
+      font-size: 10.5px;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-entry-page #reading-follow),
+    :global(body.is-glossary-entry-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+      visibility: hidden !important;
+    }
+
+    :global(body.is-glossary-entry-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
+      margin-bottom: 14px;
+      border-radius: 16px;
+      box-shadow: none;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-summary){
+      gap: 5px;
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
+      display: none;
+    }
+
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
+      padding: 2px 6px;
+      font-size: 10px;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryHomeAside.astro b/src/components/GlossaryHomeAside.astro
index d0ba2cb..3521b9c 100644
--- a/src/components/GlossaryHomeAside.astro
+++ b/src/components/GlossaryHomeAside.astro
@@ -37,24 +37,36 @@ const {
     </div>
   </div>
 
-  <section class="glossary-home-aside__block">
-    <h2 class="glossary-home-aside__heading">Parcours du glossaire</h2>
-    <ul class="glossary-home-aside__list">
-      {portalLinks.map((item) => (
-        <li><a href={item.href}>{item.label}</a></li>
-      ))}
-    </ul>
-  </section>
+  <details class="glossary-home-aside__block glossary-home-aside__disclosure" open>
+    <summary class="glossary-home-aside__summary">
+      <span class="glossary-home-aside__heading">Parcours du glossaire</span>
+      <span class="glossary-home-aside__chevron" aria-hidden="true">▾</span>
+    </summary>
 
-  {fondamentaux.length > 0 && (
-    <section class="glossary-home-aside__block">
-      <h2 class="glossary-home-aside__heading">Noyau archicratique</h2>
+    <div class="glossary-home-aside__panel">
       <ul class="glossary-home-aside__list">
-        {fondamentaux.map((entry) => (
-          <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
+        {portalLinks.map((item) => (
+          <li><a href={item.href}>{item.label}</a></li>
         ))}
       </ul>
-    </section>
+    </div>
+  </details>
+
+  {fondamentaux.length > 0 && (
+    <details class="glossary-home-aside__block glossary-home-aside__disclosure" open>
+      <summary class="glossary-home-aside__summary">
+        <span class="glossary-home-aside__heading">Noyau archicratique</span>
+        <span class="glossary-home-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
+
+      <div class="glossary-home-aside__panel">
+        <ul class="glossary-home-aside__list">
+          {fondamentaux.map((entry) => (
+            <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
+          ))}
+        </ul>
+      </div>
+    </details>
   )}
 </nav>
 
@@ -63,6 +75,7 @@ const {
     display: flex;
     flex-direction: column;
     gap: 14px;
+    min-width: 0;
   }
 
   .glossary-home-aside__block{
@@ -70,6 +83,7 @@ const {
     border-radius: 16px;
     padding: 14px;
     background: rgba(127,127,127,0.05);
+    min-width: 0;
   }
 
   .glossary-home-aside__block--intro{
@@ -78,10 +92,10 @@ const {
   }
 
   .glossary-home-aside__title{
-    font-size: 16px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.3;
+    font-size: 18px;
+    font-weight: 850;
+    letter-spacing: .1px;
+    line-height: 1.22;
   }
 
   .glossary-home-aside__meta{
@@ -108,14 +122,57 @@ const {
     font-size: 13px;
     line-height: 1.35;
     opacity: .92;
+    min-width: 0;
+  }
+
+  .glossary-home-aside__disclosure{
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .glossary-home-aside__summary{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .glossary-home-aside__summary::-webkit-details-marker{
+    display: none;
+  }
+
+  .glossary-home-aside__summary:hover{
+    background: rgba(127,127,127,0.035);
   }
 
   .glossary-home-aside__heading{
-    margin: 0 0 11px;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 850;
+    line-height: 1.28;
+    opacity: .97;
+  }
+
+  .glossary-home-aside__chevron{
+    flex: 0 0 auto;
     font-size: 14px;
-    font-weight: 800;
-    line-height: 1.35;
-    opacity: .94;
+    line-height: 1;
+    opacity: .72;
+    transform: rotate(0deg);
+    transition: transform 160ms ease, opacity 160ms ease;
+  }
+
+  .glossary-home-aside__disclosure[open] .glossary-home-aside__chevron{
+    transform: rotate(180deg);
+    opacity: .96;
+  }
+
+  .glossary-home-aside__panel{
+    padding: 0 14px 14px;
   }
 
   .glossary-home-aside__list{
@@ -131,7 +188,148 @@ const {
   .glossary-home-aside__list a{
     text-decoration: none;
     font-size: 14px;
-    line-height: 1.4;
+    line-height: 1.42;
+    word-break: break-word;
+  }
+
+  @media (max-width: 860px){
+    .glossary-home-aside{
+      gap: 10px;
+    }
+
+    .glossary-home-aside__block{
+      border-radius: 14px;
+    }
+
+    .glossary-home-aside__block--intro{
+      padding: 12px;
+    }
+
+    .glossary-home-aside__title{
+      font-size: 19px;
+      line-height: 1.18;
+    }
+
+    .glossary-home-aside__meta{
+      margin-top: 6px;
+      font-size: 12px;
+      line-height: 1.32;
+    }
+
+    .glossary-home-aside__pills{
+      gap: 6px;
+      margin-top: 9px;
+    }
+
+    .glossary-home-aside__pill{
+      padding: 4px 9px;
+      font-size: 12px;
+      line-height: 1.28;
+    }
+
+    .glossary-home-aside__summary{
+      padding: 12px;
+    }
+
+    .glossary-home-aside__heading{
+      font-size: 17px;
+      line-height: 1.2;
+    }
+
+    .glossary-home-aside__panel{
+      padding: 0 12px 12px;
+    }
+
+    .glossary-home-aside__list li{
+      margin: 5px 0;
+    }
+
+    .glossary-home-aside__list a{
+      font-size: 14px;
+      line-height: 1.34;
+    }
+
+    .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
+      display: none;
+    }
+  }
+
+  @media (max-width: 860px){
+    .glossary-home-aside__disclosure{
+      background: rgba(127,127,127,0.045);
+    }
+
+    .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
+      border-bottom: 1px solid rgba(127,127,127,0.12);
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-home-aside{
+      gap: 8px;
+    }
+
+    .glossary-home-aside__block{
+      border-radius: 12px;
+    }
+
+    .glossary-home-aside__block--intro{
+      padding: 10px 11px;
+    }
+
+    .glossary-home-aside__title{
+      font-size: 16px;
+      line-height: 1.14;
+    }
+
+    .glossary-home-aside__meta{
+      font-size: 11px;
+      line-height: 1.26;
+      margin-top: 5px;
+    }
+
+    .glossary-home-aside__pills{
+      gap: 5px;
+      margin-top: 8px;
+    }
+
+    .glossary-home-aside__pill{
+      padding: 3px 8px;
+      font-size: 11px;
+      line-height: 1.2;
+    }
+
+    .glossary-home-aside__summary{
+      padding: 10px 11px;
+    }
+
+    .glossary-home-aside__heading{
+      font-size: 15px;
+      line-height: 1.16;
+    }
+
+    .glossary-home-aside__panel{
+      padding: 0 11px 10px;
+    }
+
+    .glossary-home-aside__list li{
+      margin: 4px 0;
+    }
+
+    .glossary-home-aside__list a{
+      font-size: 13px;
+      line-height: 1.28;
+    }
+  }
+
+  @media (min-width: 861px){
+    .glossary-home-aside__summary{
+      cursor: default;
+    }
+
+    .glossary-home-aside__chevron{
+      display: none;
+    }
   }
 
   @media (prefers-color-scheme: dark){
@@ -139,5 +337,46 @@ const {
     .glossary-home-aside__pill{
       background: rgba(255,255,255,0.04);
     }
+
+    .glossary-home-aside__summary:hover{
+      background: rgba(255,255,255,0.03);
+    }
   }
-</style>
\ No newline at end of file
+</style>
+
+<script is:inline>
+  (() => {
+    const syncMobileDisclosure = () => {
+      const mobile = window.matchMedia("(max-width: 860px)").matches;
+      const smallLandscape = window.matchMedia(
+        "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+      ).matches;
+
+      const compact = mobile || smallLandscape;
+
+      document
+        .querySelectorAll(".glossary-home-aside__disclosure")
+        .forEach((el, index) => {
+          if (!(el instanceof HTMLDetailsElement)) return;
+
+          if (compact) {
+            if (!el.dataset.mobileInit) {
+              el.open = index === 0;
+              el.dataset.mobileInit = "true";
+            }
+          } else {
+            el.open = true;
+          }
+        });
+    };
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", syncMobileDisclosure, { once: true });
+    } else {
+      syncMobileDisclosure();
+    }
+
+    window.addEventListener("resize", syncMobileDisclosure);
+    window.addEventListener("pageshow", syncMobileDisclosure);
+  })();
+</script>
\ No newline at end of file
diff --git a/src/components/GlossaryHomeHero.astro b/src/components/GlossaryHomeHero.astro
index 7f570b5..ab55582 100644
--- a/src/components/GlossaryHomeHero.astro
+++ b/src/components/GlossaryHomeHero.astro
@@ -15,7 +15,28 @@ const {
 <header class="glossary-hero" id="glossary-hero">
   <p class="glossary-kicker">{kicker}</p>
   <h1>{title}</h1>
-  <p class="glossary-intro">{intro}</p>
+
+  <div class="glossary-hero__collapsible">
+    <p
+      class="glossary-intro"
+      id="glossary-hero-intro"
+      aria-hidden="false"
+    >
+      {intro}
+    </p>
+
+    <button
+      class="glossary-hero__toggle"
+      id="glossary-hero-toggle"
+      type="button"
+      aria-controls="glossary-hero-intro"
+      aria-expanded="false"
+      hidden
+    >
+      lire la suite
+    </button>
+  </div>
+
   <h2
     class="glossary-hero-follow"
     id="glossary-hero-follow"
@@ -36,6 +57,8 @@ const {
       linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.90)),
       radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
     transition:
+      padding 220ms cubic-bezier(.22,.8,.22,1),
+      border-radius 220ms cubic-bezier(.22,.8,.22,1),
       background 300ms cubic-bezier(.22,.8,.22,1),
       border-color 300ms cubic-bezier(.22,.8,.22,1),
       box-shadow 300ms cubic-bezier(.22,.8,.22,1);
@@ -43,6 +66,8 @@ const {
     -webkit-backdrop-filter: blur(10px);
     display: grid;
     row-gap: 12px;
+    min-width: 0;
+    overflow: clip;
   }
 
   .glossary-kicker{
@@ -59,6 +84,16 @@ const {
     line-height: 1.02;
     letter-spacing: -.04em;
     font-weight: 850;
+    transition:
+      font-size 220ms cubic-bezier(.22,.8,.22,1),
+      line-height 220ms cubic-bezier(.22,.8,.22,1);
+    min-width: 0;
+  }
+
+  .glossary-hero__collapsible{
+    display: grid;
+    row-gap: 6px;
+    min-width: 0;
   }
 
   .glossary-intro{
@@ -67,13 +102,58 @@ const {
     font-size: 1.05rem;
     line-height: 1.55;
     opacity: .94;
+    min-width: 0;
+    transition:
+      font-size 220ms cubic-bezier(.22,.8,.22,1),
+      line-height 220ms cubic-bezier(.22,.8,.22,1),
+      max-height 220ms cubic-bezier(.22,.8,.22,1),
+      opacity 180ms ease;
+  }
+
+  .glossary-hero__toggle{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    min-height: 30px;
+    padding: 3px 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font-size: 12px;
+    line-height: 1.2;
+    letter-spacing: .01em;
+    opacity: .72;
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    transition:
+      opacity 120ms ease,
+      transform 120ms ease;
+  }
+
+  .glossary-hero__toggle:hover{
+    opacity: .92;
+    transform: translateY(-1px);
+  }
+
+  .glossary-hero__toggle:focus-visible{
+    outline: 2px solid rgba(0,217,255,0.24);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  .glossary-hero__toggle[hidden]{
+    display: none !important;
   }
 
   .glossary-hero-follow{
     margin: 2px 0 0;
     min-height: var(--glossary-follow-height);
-    display: flex;
-    align-items: flex-end;
+    display: block;
+    max-width: min(100%, 22ch);
     opacity: 0;
     transform: translateY(10px) scale(.985);
     filter: blur(6px);
@@ -86,6 +166,7 @@ const {
     overflow: hidden;
     text-overflow: ellipsis;
     will-change: opacity, transform, filter;
+    min-width: 0;
   }
 
   .glossary-hero-follow.is-visible{
@@ -94,10 +175,190 @@ const {
     filter: blur(0);
   }
 
+  :global(body.glossary-home-follow-on) .glossary-hero{
+    padding: 12px 14px 14px;
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
+  }
+
+  :global(body.glossary-home-follow-on) .glossary-hero h1{
+    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
+    line-height: 1.02;
+  }
+
+  :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
+    font-size: .94rem;
+    line-height: 1.34;
+    max-height: 2.7em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero__toggle{
+    display: inline-flex;
+  }
+
   @media (max-width: 760px){
     .glossary-hero{
       top: calc(var(--glossary-sticky-top) - 2px);
       padding: 12px 14px 16px;
+      border-radius: 22px;
+      row-gap: 10px;
+    }
+
+    .glossary-hero h1{
+      font-size: clamp(1.9rem, 8vw, 2.45rem);
+      line-height: 1.02;
+      letter-spacing: -.03em;
+    }
+
+    .glossary-hero__collapsible{
+      row-gap: 7px;
+    }
+
+    .glossary-intro{
+      max-width: 100%;
+      width: 100%;
+      font-size: .98rem;
+      line-height: 1.44;
+    }
+
+    :global(body.glossary-home-follow-on) .glossary-hero{
+      padding: 10px 13px 12px;
+      border-radius: 18px;
+    }
+
+    :global(body.glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(1.45rem, 6vw, 1.8rem);
+    }
+
+    :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
+      max-width: 100%;
+      width: 100%;
+      font-size: .86rem;
+      line-height: 1.24;
+      max-height: 2.48em;
+      -webkit-line-clamp: 2;
+      opacity: .9;
+    }
+
+    .glossary-hero__toggle{
+      min-height: 28px;
+      font-size: 11.5px;
+    }
+
+    .glossary-hero-follow{
+      max-width: min(100%, 24ch);
+    }
+  }
+
+  @media (max-width: 520px){
+    .glossary-hero{
+      padding: 11px 12px 14px;
+      border-radius: 20px;
+    }
+
+    .glossary-intro{
+      max-width: 100%;
+      width: 100%;
+      font-size: .94rem;
+      line-height: 1.4;
+    }
+
+    :global(body.glossary-home-follow-on) .glossary-hero{
+      padding: 9px 11px 11px;
+    }
+
+    :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
+      max-width: 100%;
+      width: 100%;
+      font-size: .84rem;
+      line-height: 1.22;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-hero{
+      padding: 10px 12px 12px;
+      border-radius: 16px;
+      row-gap: 8px;
+    }
+
+    .glossary-kicker{
+      font-size: 10px;
+      letter-spacing: .1em;
+    }
+
+    .glossary-hero h1{
+      font-size: clamp(1.35rem, 4vw, 1.8rem);
+      line-height: 1;
+    }
+
+    .glossary-intro{
+      font-size: .84rem;
+      line-height: 1.24;
+    }
+
+    :global(body.glossary-home-follow-on) .glossary-hero{
+      padding: 9px 11px 10px;
+      border-radius: 16px;
+    }
+
+    :global(body.glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(1.1rem, 3vw, 1.35rem);
+    }
+
+    :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
+      font-size: .8rem;
+      line-height: 1.18;
+      max-height: 2.36em;
+      -webkit-line-clamp: 2;
+      opacity: .88;
+    }
+
+    .glossary-hero__toggle{
+      min-height: 24px;
+      font-size: 11px;
+    }
+
+    .glossary-hero-follow{
+      max-width: min(100%, 26ch);
+    }
+  }
+
+    @media (max-width: 860px){
+    .glossary-hero{
+      position: static !important;
+      top: auto !important;
+      z-index: auto !important;
+      margin-bottom: 18px !important;
+    }
+
+    .glossary-hero-follow{
+      display: none !important;
+      min-height: 0 !important;
+      opacity: 0 !important;
+      transform: none !important;
+      filter: none !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-hero{
+      position: static !important;
+      top: auto !important;
+      z-index: auto !important;
+      margin-bottom: 14px !important;
+    }
+
+    .glossary-hero-follow{
+      display: none !important;
+      min-height: 0 !important;
+      opacity: 0 !important;
+      transform: none !important;
+      filter: none !important;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryHomeSection.astro b/src/components/GlossaryHomeSection.astro
index e48c296..3a31739 100644
--- a/src/components/GlossaryHomeSection.astro
+++ b/src/components/GlossaryHomeSection.astro
@@ -43,22 +43,22 @@ const showCta = Boolean(ctaHref && ctaLabel);
 
 <style>
   .glossary-section{
-    margin-top: 42px;
-    scroll-margin-top: calc(var(--glossary-sticky-top) + 190px);
+    margin-top: 34px;
+    scroll-margin-top: calc(var(--glossary-sticky-top) + 150px);
   }
 
   .glossary-section__head{
     display: flex;
     justify-content: space-between;
     align-items: start;
-    gap: 16px;
+    gap: 14px;
     flex-wrap: wrap;
-    margin-bottom: 14px;
+    margin-bottom: 12px;
   }
 
   .glossary-section h2{
     margin: 0;
-    font-size: clamp(2rem, 3vw, 2.55rem);
+    font-size: clamp(1.8rem, 3vw, 2.55rem);
     line-height: 1.06;
     letter-spacing: -.03em;
     font-weight: 800;
@@ -67,23 +67,23 @@ const showCta = Boolean(ctaHref && ctaLabel);
   .glossary-intro{
     margin: 0;
     max-width: 72ch;
-    font-size: 1.05rem;
-    line-height: 1.55;
+    font-size: 1rem;
+    line-height: 1.52;
     opacity: .94;
   }
 
   .glossary-section__head .glossary-intro{
-    margin-top: 10px;
+    margin-top: 8px;
   }
 
   .glossary-cta{
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 40px;
+    min-height: 38px;
     border: 1px solid var(--glossary-border-strong);
     border-radius: 999px;
-    padding: 7px 14px;
+    padding: 6px 13px;
     color: var(--glossary-accent);
     text-decoration: none;
     white-space: nowrap;
@@ -97,13 +97,37 @@ const showCta = Boolean(ctaHref && ctaLabel);
   }
 
   @media (max-width: 760px){
+    .glossary-section{
+      margin-top: 24px;
+      scroll-margin-top: calc(var(--glossary-sticky-top) + 110px);
+    }
+
     .glossary-section__head{
       flex-direction: column;
       align-items: stretch;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+
+    .glossary-section h2{
+      font-size: clamp(1.45rem, 6vw, 1.95rem);
+      line-height: 1.05;
+    }
+
+    .glossary-intro{
+      font-size: .95rem;
+      line-height: 1.42;
+    }
+
+    .glossary-section__head .glossary-intro{
+      margin-top: 6px;
     }
 
     .glossary-cta{
       width: fit-content;
+      min-height: 35px;
+      padding: 5px 12px;
+      font-size: .95rem;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalAside.astro b/src/components/GlossaryPortalAside.astro
index 1bb7693..f5897ab 100644
--- a/src/components/GlossaryPortalAside.astro
+++ b/src/components/GlossaryPortalAside.astro
@@ -65,37 +65,39 @@ const {
   .glossary-portal-aside__block{
     border: 1px solid rgba(127,127,127,0.22);
     border-radius: 16px;
-    padding: 12px;
+    padding: 14px;
     background: rgba(127,127,127,0.05);
   }
 
   .glossary-portal-aside__back{
     display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
+    margin-bottom: 10px;
+    font-size: 14px;
     font-weight: 700;
+    line-height: 1.35;
     text-decoration: none;
   }
 
   .glossary-portal-aside__title{
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 800;
     letter-spacing: .2px;
-    line-height: 1.25;
+    line-height: 1.3;
   }
 
   .glossary-portal-aside__meta{
     margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
+    font-size: 13px;
+    line-height: 1.4;
+    opacity: .8;
   }
 
   .glossary-portal-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
+    margin: 0 0 11px;
+    font-size: 14px;
     font-weight: 800;
-    opacity: .9;
+    line-height: 1.35;
+    opacity: .94;
   }
 
   .glossary-portal-aside__list{
@@ -105,13 +107,108 @@ const {
   }
 
   .glossary-portal-aside__list li{
-    margin: 6px 0;
+    margin: 7px 0;
   }
 
   .glossary-portal-aside__list a{
     text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  @media (max-width: 980px){
+    .glossary-portal-aside{
+      gap: 12px;
+    }
+
+    .glossary-portal-aside__block{
+      padding: 12px;
+      border-radius: 14px;
+    }
+  }
+
+  @media (max-width: 760px){
+    .glossary-portal-aside{
+      gap: 10px;
+    }
+
+    .glossary-portal-aside__block{
+      padding: 11px 12px;
+      border-radius: 14px;
+    }
+
+    .glossary-portal-aside__back{
+      margin-bottom: 8px;
+      font-size: 13px;
+    }
+
+    .glossary-portal-aside__title{
+      font-size: 15px;
+      line-height: 1.22;
+    }
+
+    .glossary-portal-aside__meta{
+      margin-top: 6px;
+      font-size: 12px;
+      line-height: 1.32;
+    }
+
+    .glossary-portal-aside__heading{
+      margin-bottom: 8px;
+      font-size: 13px;
+      line-height: 1.22;
+    }
+
+    .glossary-portal-aside__list li{
+      margin: 5px 0;
+    }
+
+    .glossary-portal-aside__list a{
+      font-size: 12.5px;
+      line-height: 1.3;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-portal-aside{
+      gap: 8px;
+    }
+
+    .glossary-portal-aside__block{
+      padding: 9px 10px;
+      border-radius: 12px;
+    }
+
+    .glossary-portal-aside__back{
+      margin-bottom: 6px;
+      font-size: 12px;
+    }
+
+    .glossary-portal-aside__title{
+      font-size: 14px;
+      line-height: 1.18;
+    }
+
+    .glossary-portal-aside__meta{
+      margin-top: 4px;
+      font-size: 11px;
+      line-height: 1.24;
+    }
+
+    .glossary-portal-aside__heading{
+      margin-bottom: 6px;
+      font-size: 12px;
+      line-height: 1.18;
+    }
+
+    .glossary-portal-aside__list li{
+      margin: 4px 0;
+    }
+
+    .glossary-portal-aside__list a{
+      font-size: 11.5px;
+      line-height: 1.22;
+    }
   }
 
   @media (prefers-color-scheme: dark){
diff --git a/src/components/GlossaryPortalCta.astro b/src/components/GlossaryPortalCta.astro
index 98d04fa..fb04fa9 100644
--- a/src/components/GlossaryPortalCta.astro
+++ b/src/components/GlossaryPortalCta.astro
@@ -24,64 +24,44 @@ const {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
     min-height: 40px;
-    padding: 0 14px;
-    border: 1px solid rgba(0,217,255,0.24);
+    padding: 7px 14px;
+    border: 1px solid rgba(127,127,127,0.24);
     border-radius: 999px;
-    background:
-      linear-gradient(180deg, rgba(0,217,255,0.10), rgba(0,217,255,0.04)),
-      rgba(127,127,127,0.06);
-    box-shadow:
-      inset 0 1px 0 rgba(255,255,255,0.05),
-      0 0 0 1px rgba(0,217,255,0.04);
+    background: rgba(127,127,127,0.05);
     text-decoration: none;
-    font-size: 12px;
-    font-weight: 800;
-    letter-spacing: .01em;
-    white-space: nowrap;
+    line-height: 1.2;
     transition:
       transform 120ms ease,
       background 120ms ease,
-      border-color 120ms ease,
-      box-shadow 120ms ease;
+      border-color 120ms ease;
   }
 
   .glossary-portal-cta:hover{
     transform: translateY(-1px);
-    border-color: rgba(0,217,255,0.34);
-    background:
-      linear-gradient(180deg, rgba(0,217,255,0.14), rgba(0,217,255,0.06)),
-      rgba(127,127,127,0.08);
-    box-shadow:
-      inset 0 1px 0 rgba(255,255,255,0.06),
-      0 0 0 1px rgba(0,217,255,0.08),
-      0 10px 28px rgba(0,0,0,0.18);
+    background: rgba(127,127,127,0.08);
+    border-color: rgba(0,217,255,0.18);
     text-decoration: none;
   }
 
   .glossary-portal-cta:focus-visible{
     outline: 2px solid rgba(0,217,255,0.28);
-    outline-offset: 4px;
+    outline-offset: 3px;
   }
 
-  @media (max-width: 720px){
+  @media (max-width: 760px){
     .glossary-portal-cta{
-      width: 100%;
+      min-height: 36px;
+      padding: 6px 12px;
+      font-size: 12px;
     }
   }
 
-  @media (prefers-color-scheme: dark){
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
     .glossary-portal-cta{
-      background:
-        linear-gradient(180deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)),
-        rgba(255,255,255,0.04);
-    }
-
-    .glossary-portal-cta:hover{
-      background:
-        linear-gradient(180deg, rgba(0,217,255,0.16), rgba(0,217,255,0.07)),
-        rgba(255,255,255,0.06);
+      min-height: 32px;
+      padding: 5px 10px;
+      font-size: 11px;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalGrid.astro b/src/components/GlossaryPortalGrid.astro
index b78422a..0e079db 100644
--- a/src/components/GlossaryPortalGrid.astro
+++ b/src/components/GlossaryPortalGrid.astro
@@ -36,17 +36,17 @@ const {
   .glossary-portals{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 14px;
-    margin-top: 14px;
+    gap: 12px;
+    margin-top: 12px;
   }
 
   .glossary-portal-card{
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    padding: 16px 18px;
+    gap: 7px;
+    padding: 14px 15px;
     border: 1px solid var(--glossary-border);
-    border-radius: 18px;
+    border-radius: 16px;
     background: var(--glossary-bg-soft);
     text-decoration: none;
     transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
@@ -61,24 +61,51 @@ const {
 
   .glossary-portal-card strong{
     color: var(--glossary-accent);
-    font-size: 1.08rem;
-    line-height: 1.28;
+    font-size: 1.04rem;
+    line-height: 1.24;
   }
 
   .glossary-portal-card span{
     color: inherit;
-    font-size: 1rem;
-    line-height: 1.5;
+    font-size: .98rem;
+    line-height: 1.46;
     opacity: .94;
   }
 
   .glossary-portal-card small{
     color: var(--glossary-accent);
-    font-size: .94rem;
-    line-height: 1.35;
+    font-size: .9rem;
+    line-height: 1.28;
     opacity: .9;
   }
 
+  @media (max-width: 760px){
+    .glossary-portals{
+      grid-template-columns: 1fr;
+      gap: 10px;
+      margin-top: 10px;
+    }
+
+    .glossary-portal-card{
+      padding: 12px 12px;
+      border-radius: 14px;
+      gap: 6px;
+    }
+
+    .glossary-portal-card strong{
+      font-size: .98rem;
+    }
+
+    .glossary-portal-card span{
+      font-size: .94rem;
+      line-height: 1.42;
+    }
+
+    .glossary-portal-card small{
+      font-size: .85rem;
+    }
+  }
+
   @media (prefers-color-scheme: dark){
     .glossary-portal-card{
       background: rgba(255,255,255,0.04);
diff --git a/src/components/GlossaryPortalHero.astro b/src/components/GlossaryPortalHero.astro
index eec5282..433958b 100644
--- a/src/components/GlossaryPortalHero.astro
+++ b/src/components/GlossaryPortalHero.astro
@@ -16,8 +16,8 @@ const {
   title,
   intro,
   moreParagraphs = [],
-  introMaxWidth = "72ch",
-  followIntroMaxWidth = "68ch",
+  introMaxWidth = "70ch",
+  followIntroMaxWidth = "62ch",
   moreMaxHeight = "18rem",
 } = Astro.props;
 ---
@@ -25,12 +25,13 @@ const {
 <div
   class="glossary-portal-hero glossary-page-hero"
   data-glossary-portal-hero
-  style={`--portal-hero-intro-max-w:${introMaxWidth}; --portal-hero-follow-intro-max-w:${followIntroMaxWidth}; --portal-hero-more-max-h:${moreMaxHeight};`}
+  style={`--portal-hero-intro-max-w:${introMaxWidth}; --portal-hero-follow-intro-max-w:${followIntroMaxWidth}; --portal-hero-secondary-max-h:${moreMaxHeight};`}
 >
   <p class="glossary-portal-hero__kicker">{kicker}</p>
+
   <h1>{title}</h1>
 
-  <p class="glossary-portal-hero__intro">
+  <p class="glossary-portal-hero__intro glossary-portal-hero__intro--lead">
     {intro}
   </p>
 
@@ -43,7 +44,9 @@ const {
         aria-hidden="false"
       >
         {moreParagraphs.map((paragraph) => (
-          <p class="glossary-portal-hero__intro">{paragraph}</p>
+          <p class="glossary-portal-hero__intro glossary-portal-hero__intro--more">
+            {paragraph}
+          </p>
         ))}
       </div>
 
@@ -65,93 +68,121 @@ const {
 <style>
   .glossary-portal-hero{
     position: sticky;
-    top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
-    z-index: 11;
-    margin: 0 0 24px;
-    padding: 18px 18px 20px;
+    top: var(--glossary-sticky-top);
+    z-index: 12;
+    margin-bottom: var(--portal-hero-margin-bottom, 28px);
+    padding:
+      var(--portal-hero-pad-top, 20px)
+      var(--portal-hero-pad-x, 18px)
+      var(--portal-hero-pad-bottom, 22px);
     border: 1px solid rgba(127,127,127,0.18);
     border-radius: 28px;
     background:
       linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
-      radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
+      radial-gradient(980px 260px at 18% 0%, rgba(0,217,255,0.08), transparent 60%);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     display: grid;
-    row-gap: 14px;
+    row-gap: var(--portal-hero-gap, 16px);
+    min-width: 0;
+    overflow: hidden;
     transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
+      background 280ms cubic-bezier(.22,.8,.22,1),
+      border-color 220ms cubic-bezier(.22,.8,.22,1),
+      box-shadow 220ms cubic-bezier(.22,.8,.22,1),
+      border-radius 220ms ease,
+      padding 220ms ease,
+      row-gap 220ms ease,
+      margin-bottom 220ms ease;
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.02),
+      0 10px 26px rgba(0,0,0,0.08);
   }
 
   .glossary-portal-hero__kicker{
     margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
+    font-size: var(--portal-kicker-size, 12px);
+    line-height: var(--portal-kicker-lh, 1.2);
+    letter-spacing: var(--portal-kicker-spacing, .14em);
     text-transform: uppercase;
-    opacity: .72;
+    font-weight: 650;
+    opacity: .74;
   }
 
   .glossary-portal-hero h1{
     margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
+    font-size: var(--portal-hero-h1-size, clamp(3rem, 4.8vw, 4.15rem));
+    line-height: var(--portal-hero-h1-lh, .98);
+    letter-spacing: var(--portal-hero-h1-spacing, -.045em);
     font-weight: 850;
-    transition: font-size 180ms ease;
+    text-wrap: balance;
+    transition:
+      font-size 180ms ease,
+      line-height 180ms ease,
+      letter-spacing 180ms ease;
   }
 
   .glossary-portal-hero__intro{
     margin: 0;
-    max-width: var(--portal-hero-intro-max-w);
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
+    max-width: var(--portal-hero-intro-max-w, 70ch);
+    font-size: var(--portal-hero-intro-size, 1.06rem);
+    line-height: var(--portal-hero-intro-lh, 1.6);
+    text-wrap: pretty;
     transition:
       font-size 180ms ease,
       line-height 180ms ease,
-      max-width 180ms ease;
+      max-width 180ms ease,
+      opacity 180ms ease;
   }
 
+  .glossary-portal-hero__intro--lead{ opacity: .95; }
+  .glossary-portal-hero__intro--more{ opacity: .89; }
+
   .glossary-portal-hero__collapsible{
     display: grid;
-    row-gap: 6px;
+    row-gap: 8px;
+    min-width: 0;
   }
 
   .glossary-portal-hero__more{
     display: grid;
-    row-gap: 14px;
-    max-height: var(--portal-hero-more-max-h);
+    gap: 12px;
+    max-height: var(--portal-hero-secondary-max-h, 20em);
     overflow: hidden;
-    opacity: 1;
+    opacity: var(--portal-hero-secondary-opacity, .92);
+    min-width: 0;
     transition:
       max-height 220ms ease,
       opacity 180ms ease;
   }
 
   .glossary-portal-hero__toggle{
-    display: none;
-    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: fit-content;
-    margin: 0;
-    padding: 0;
+    min-height: 34px;
+    padding: 5px 0;
     border: 0;
+    border-radius: 0;
     background: transparent;
     color: inherit;
-    font: inherit;
-    font-size: 11px;
+    font-size: 12.5px;
     line-height: 1.2;
     letter-spacing: .01em;
-    opacity: .56;
+    opacity: .72;
     cursor: pointer;
     text-decoration: underline;
-    text-underline-offset: .12em;
     text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    transition:
+      opacity 120ms ease,
+      transform 120ms ease;
   }
 
   .glossary-portal-hero__toggle:hover{
-    opacity: .84;
+    opacity: .92;
+    transform: translateY(-1px);
   }
 
   .glossary-portal-hero__toggle:focus-visible{
@@ -164,27 +195,66 @@ const {
     display: none !important;
   }
 
-  @media (max-width: 860px){
+  @media (max-width: 980px){
     .glossary-portal-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
+      border-radius: 24px;
     }
 
-    .glossary-portal-hero__intro{
-      max-width: none;
+    .glossary-portal-hero h1{
+      text-wrap: pretty;
     }
 
     .glossary-portal-hero__more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
+      gap: 10px;
+    }
+  }
+
+  @media (max-width: 860px){
+    .glossary-portal-hero{
+      position: static !important;
+      top: auto !important;
+      z-index: auto !important;
+      margin-bottom: 18px !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
     }
 
-    .glossary-portal-hero__toggle{
-      display: none !important;
+    .glossary-portal-hero h1,
+    .glossary-portal-hero__intro,
+    .glossary-portal-hero__more,
+    .glossary-portal-hero__collapsible{
+      min-width: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-portal-hero{
+      position: static !important;
+      top: auto !important;
+      z-index: auto !important;
+      margin-bottom: 14px !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
+      border-radius: 16px !important;
+    }
+
+    .glossary-portal-hero h1,
+    .glossary-portal-hero__intro,
+    .glossary-portal-hero__more,
+    .glossary-portal-hero__collapsible{
+      min-width: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-portal-hero{
+      box-shadow:
+        inset 0 1px 0 rgba(255,255,255,0.02),
+        0 14px 34px rgba(0,0,0,0.16);
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalPanel.astro b/src/components/GlossaryPortalPanel.astro
index 6a75f5d..569b035 100644
--- a/src/components/GlossaryPortalPanel.astro
+++ b/src/components/GlossaryPortalPanel.astro
@@ -38,59 +38,90 @@ const {
 <style>
   .glossary-portal-panel{
     display: grid;
-    gap: 12px;
+    gap: 10px;
   }
 
   .glossary-portal-panel--surface{
-    padding: 18px 18px 16px;
+    padding:
+      var(--portal-panel-pad-y, 16px)
+      var(--portal-panel-pad-x, 16px);
     border: 1px solid var(--glossary-border, rgba(127,127,127,0.18));
-    border-radius: 18px;
+    border-radius: var(--portal-panel-radius, 18px);
     background:
-      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
       var(--glossary-bg-soft, rgba(127,127,127,0.035));
   }
 
   .glossary-portal-panel__head{
     display: flex;
-    align-items: baseline;
+    align-items: flex-start;
     justify-content: space-between;
-    gap: 12px;
+    gap: 10px;
     flex-wrap: wrap;
   }
 
   .glossary-portal-panel__head h3{
     margin: 0;
-    font-size: 15px;
-    line-height: 1.3;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
+    font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
+    line-height: var(--portal-local-h3-lh, 1.15);
+    letter-spacing: -.02em;
   }
 
   .glossary-portal-panel__count{
     display: inline-flex;
     align-items: center;
-    min-height: 24px;
-    padding: 0 10px;
-    border: 1px solid rgba(127,127,127,0.22);
+    min-height: 26px;
+    padding: 0 9px;
+    border: 1px solid rgba(127,127,127,0.20);
     border-radius: 999px;
-    font-size: 12px;
+    background: rgba(127,127,127,0.04);
+    font-size: 11.5px;
     line-height: 1.2;
-    opacity: .78;
+    opacity: .8;
     white-space: nowrap;
   }
 
   .glossary-portal-panel__intro{
-    max-width: 78ch;
     margin: 0;
-    font-size: 14px;
-    line-height: 1.5;
-    opacity: .9;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
+    opacity: .92;
+  }
+
+  @media (max-width: 760px){
+    .glossary-portal-panel{
+      gap: 8px;
+    }
+
+    .glossary-portal-panel__head{
+      gap: 8px;
+    }
+
+    .glossary-portal-panel__count{
+      min-height: 23px;
+      padding: 0 8px;
+      font-size: 10.5px;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-portal-panel{
+      gap: 6px;
+    }
+
+    .glossary-portal-panel__head{
+      gap: 6px;
+    }
+
+    .glossary-portal-panel__count{
+      min-height: 21px;
+      padding: 0 7px;
+      font-size: 10px;
+    }
   }
 
   @media (prefers-color-scheme: dark){
     .glossary-portal-panel--surface{
-      background:
-        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
-        rgba(255,255,255,0.04);
+      background: rgba(255,255,255,0.04);
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalSection.astro b/src/components/GlossaryPortalSection.astro
index 13f67f1..efc5096 100644
--- a/src/components/GlossaryPortalSection.astro
+++ b/src/components/GlossaryPortalSection.astro
@@ -31,37 +31,113 @@ const {
 
 <style>
   .glossary-portal-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
+    margin-top: 30px;
   }
 
   .glossary-portal-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
+    margin: 0;
+    font-size: clamp(1.8rem, 3vw, 2.35rem);
+    line-height: 1.05;
+    letter-spacing: -.03em;
+    font-weight: 800;
   }
 
   .glossary-portal-section__head{
     display: flex;
-    align-items: baseline;
+    align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 10px;
-    position: static;
   }
 
   .glossary-portal-section__count{
-    font-size: 13px;
-    opacity: .72;
+    display: inline-flex;
+    align-items: center;
+    min-height: 28px;
+    padding: 0 10px;
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: 999px;
+    background: rgba(127,127,127,0.04);
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .8;
     white-space: nowrap;
   }
 
   .glossary-portal-section__intro{
-    max-width: 78ch;
     margin: 0;
-    opacity: .92;
+    max-width: 76ch;
+    font-size: var(--portal-body-size, 1rem);
+    line-height: var(--portal-body-lh, 1.55);
+    opacity: .94;
   }
 
   .glossary-portal-section--final{
-    margin-top: 42px;
+    margin-top: 34px;
+  }
+
+  @media (max-width: 980px){
+    .glossary-portal-section{
+      margin-top: 24px;
+    }
+
+    .glossary-portal-section h2{
+      font-size: clamp(1.6rem, 4.4vw, 2rem);
+      line-height: 1.04;
+    }
+  }
+
+  @media (max-width: 760px){
+    .glossary-portal-section{
+      margin-top: 20px;
+    }
+
+    .glossary-portal-section__head{
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .glossary-portal-section h2{
+      font-size: clamp(1.34rem, 6.5vw, 1.72rem);
+      line-height: 1.04;
+      letter-spacing: -.022em;
+    }
+
+    .glossary-portal-section__count{
+      min-height: 24px;
+      padding: 0 8px;
+      font-size: 11px;
+    }
+
+    .glossary-portal-section--final{
+      margin-top: 24px;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-portal-section{
+      margin-top: 16px;
+    }
+
+    .glossary-portal-section__head{
+      gap: 6px;
+      margin-bottom: 6px;
+    }
+
+    .glossary-portal-section h2{
+      font-size: clamp(1.12rem, 4.2vw, 1.34rem);
+      line-height: 1.02;
+    }
+
+    .glossary-portal-section__count{
+      min-height: 22px;
+      padding: 0 7px;
+      font-size: 10px;
+    }
+
+    .glossary-portal-section--final{
+      margin-top: 18px;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalStickySync.astro b/src/components/GlossaryPortalStickySync.astro
index b1effad..9274847 100644
--- a/src/components/GlossaryPortalStickySync.astro
+++ b/src/components/GlossaryPortalStickySync.astro
@@ -34,16 +34,24 @@ const {
       const BODY_CLASS = "is-glossary-portal-page";
       const FOLLOW_ON_CLASS = "glossary-portal-follow-on";
       const EXPANDED_CLASS = "glossary-portal-hero-expanded";
+      const CONDENSED_CLASS = "glossary-portal-hero-condensed";
+
       const mqMobile = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+      const mqSmallLandscape = window.matchMedia(
+        "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+      );
 
       let expandedAtY = null;
       let lastScrollY = window.scrollY || 0;
       let raf = 0;
+      let lastFollowOn = null;
+      let lastCondensed = null;
+      let lastHeroHeight = -1;
 
       body.classList.add(BODY_CLASS);
 
-      const heroHeight = () =>
-        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+      const isCompactViewport = () =>
+        mqMobile.matches || mqSmallLandscape.matches;
 
       const stripLocalSticky = () => {
         document.querySelectorAll(sectionHeadSelector).forEach((el) => {
@@ -52,14 +60,53 @@ const {
         });
       };
 
+      const readStickyTop = () => {
+        const raw = getComputedStyle(document.documentElement)
+          .getPropertyValue("--glossary-sticky-top")
+          .trim();
+        const n = Number.parseFloat(raw);
+        return Number.isFinite(n) ? n : 64;
+      };
+
       const computeFollowOn = () =>
-        !mqMobile.matches &&
+        !isCompactViewport() &&
         follow.classList.contains("is-on") &&
         follow.style.display !== "none" &&
         follow.getAttribute("aria-hidden") !== "true";
 
+      const computeCondensed = () => {
+        if (isCompactViewport()) return false;
+
+        const heroRect = hero.getBoundingClientRect();
+        const stickyTop = readStickyTop();
+
+        return heroRect.top <= stickyTop + 2;
+      };
+
+      const measureHeroHeight = () =>
+        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+
+      const PIN_EPS = 3;
+
+      const isHeroPinned = () => {
+        if (isCompactViewport()) return false;
+
+        const rect = hero.getBoundingClientRect();
+        const stickyTop = readStickyTop();
+        const cs = getComputedStyle(hero);
+
+        if (cs.position !== "sticky") return false;
+
+        const pinnedOnRail = Math.abs(rect.top - stickyTop) <= PIN_EPS;
+        const stillVisible = rect.bottom > stickyTop + 24;
+
+        return pinnedOnRail && stillVisible;
+      };
+
       const applyLocalStickyHeight = () => {
-        const h = mqMobile.matches ? 0 : heroHeight();
+        const h = isHeroPinned() ? measureHeroHeight() : 0;
+        if (h === lastHeroHeight) return;
+        lastHeroHeight = h;
 
         if (typeof window.__archiSetLocalStickyHeight === "function") {
           window.__archiSetLocalStickyHeight(h);
@@ -70,10 +117,26 @@ const {
 
       const syncFollowState = () => {
         const on = computeFollowOn();
-        body.classList.toggle(FOLLOW_ON_CLASS, on);
+
+        if (on !== lastFollowOn) {
+          lastFollowOn = on;
+          body.classList.toggle(FOLLOW_ON_CLASS, on);
+        }
+
         return on;
       };
 
+      const syncCondensedState = () => {
+        const condensed = computeCondensed();
+
+        if (condensed !== lastCondensed) {
+          lastCondensed = condensed;
+          body.classList.toggle(CONDENSED_CLASS, condensed);
+        }
+
+        return condensed;
+      };
+
       const collapseHero = () => {
         if (!body.classList.contains(EXPANDED_CLASS)) return;
 
@@ -116,12 +179,11 @@ const {
         schedule();
       };
 
-      const syncHeroState = () => {
-        const followOn = computeFollowOn();
+      const syncHeroState = (condensed) => {
         const expanded = body.classList.contains(EXPANDED_CLASS);
-        const collapsed = followOn && !expanded;
+        const collapsed = condensed && !expanded;
 
-        if (!followOn || mqMobile.matches) {
+        if (isCompactViewport() || !condensed) {
           body.classList.remove(EXPANDED_CLASS);
           expandedAtY = null;
 
@@ -148,12 +210,7 @@ const {
       };
 
       const maybeAutoCollapseOnScroll = () => {
-        if (mqMobile.matches) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (!computeFollowOn()) {
+        if (isCompactViewport()) {
           lastScrollY = window.scrollY || 0;
           return;
         }
@@ -181,16 +238,59 @@ const {
 
       const syncAll = () => {
         stripLocalSticky();
-        syncFollowState();
-        syncHeroState();
-        applyLocalStickyHeight();
+
+        if (isCompactViewport()) {
+          body.classList.remove(FOLLOW_ON_CLASS);
+          body.classList.remove(CONDENSED_CLASS);
+          body.classList.remove(EXPANDED_CLASS);
+
+          lastFollowOn = false;
+          lastCondensed = false;
+          expandedAtY = null;
+
+          if (heroMore) {
+            heroMore.setAttribute("aria-hidden", "false");
+          }
+
+          if (heroToggle) {
+            heroToggle.hidden = true;
+            heroToggle.setAttribute("aria-expanded", "false");
+          }
+
+          requestAnimationFrame(() => {
+            applyLocalStickyHeight();
+            try {
+              window.__archiUpdateFollow?.();
+            } catch {}
+          });
+
+          return;
+        }
+
+        const condensed = syncCondensedState();
+        syncHeroState(condensed);
+
+        requestAnimationFrame(() => {
+          applyLocalStickyHeight();
+          syncFollowState();
+          try {
+            window.__archiUpdateFollow?.();
+          } catch {}
+        });
+
+        requestAnimationFrame(() => {
+          applyLocalStickyHeight();
+          try {
+            window.__archiUpdateFollow?.();
+          } catch {}
+        });
       };
 
       const schedule = () => {
         if (raf) return;
         raf = requestAnimationFrame(() => {
           raf = 0;
-          requestAnimationFrame(syncAll);
+          syncAll();
         });
       };
 
@@ -229,6 +329,12 @@ const {
         mqMobile.addListener(schedule);
       }
 
+      if (mqSmallLandscape.addEventListener) {
+        mqSmallLandscape.addEventListener("change", schedule);
+      } else if (mqSmallLandscape.addListener) {
+        mqSmallLandscape.addListener(schedule);
+      }
+
       schedule();
     };
 
@@ -245,40 +351,63 @@ const {
     z-index: 10;
   }
 
-  :global(body.is-glossary-portal-page.glossary-portal-follow-on .glossary-portal-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  /* Le hero se condense dès qu’il devient sticky */
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed .glossary-portal-hero){
+    padding:
+      var(--portal-hero-pad-top-condensed, 14px)
+      var(--portal-hero-pad-x-condensed, 16px)
+      var(--portal-hero-pad-bottom-condensed, 16px);
+    row-gap: var(--portal-hero-gap-condensed, 10px);
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.02),
+      0 8px 20px rgba(0,0,0,0.12);
   }
 
-  :global(body.is-glossary-portal-page.glossary-portal-follow-on .glossary-portal-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed .glossary-portal-hero h1){
+    font-size: var(--portal-hero-h1-size-condensed, clamp(2.05rem, 3.15vw, 2.7rem));
+    line-height: var(--portal-hero-h1-lh-condensed, 1);
+    letter-spacing: var(--portal-hero-h1-spacing-condensed, -.04em);
   }
 
-  :global(body.is-glossary-portal-page.glossary-portal-follow-on .glossary-portal-hero__intro){
-    max-width: var(--portal-hero-follow-intro-max-w, 68ch);
-    font-size: .98rem;
-    line-height: 1.48;
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed .glossary-portal-hero__intro){
+    max-width: var(--portal-hero-follow-intro-max-w, 62ch);
+    font-size: var(--portal-hero-intro-size-condensed, .98rem);
+    line-height: var(--portal-hero-intro-lh-condensed, 1.46);
   }
 
-  :global(body.is-glossary-portal-page.glossary-portal-follow-on:not(.glossary-portal-hero-expanded) .glossary-portal-hero__more){
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed .glossary-portal-hero__kicker){
+    opacity: .68;
+  }
+
+  /* Le more se replie dès l’état condensé */
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__more){
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     pointer-events: none;
   }
 
-  :global(body.is-glossary-portal-page.glossary-portal-follow-on:not(.glossary-portal-hero-expanded) .glossary-portal-hero__toggle){
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__toggle){
     display: inline-flex;
   }
 
+  /* L’accolage hero + follow n’arrive que quand le follow est actif */
+  :global(body.is-glossary-portal-page.glossary-portal-hero-condensed.glossary-portal-follow-on .glossary-portal-hero){
+    margin-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   :global(body.is-glossary-portal-page.glossary-portal-follow-on #reading-follow .reading-follow__inner){
+    margin-top: -1px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on #reading-follow .rf-h2){
+    letter-spacing: -.02em;
+  }
+
   :global(body.is-glossary-portal-page .glossary-portal-section__head.is-sticky),
   :global(body.is-glossary-portal-page .glossary-portal-section__head[data-sticky-active="true"]){
     position: static !important;
@@ -291,4 +420,68 @@ const {
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
   }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+
+    :global(body.is-glossary-portal-page .glossary-portal-hero){
+      margin-bottom: var(--portal-hero-margin-bottom, 18px);
+      border-radius: 20px !important;
+      box-shadow: none !important;
+    }
+
+    :global(body.is-glossary-portal-page .glossary-portal-hero__more){
+      max-height: none !important;
+      opacity: 1 !important;
+      overflow: visible !important;
+      pointer-events: auto !important;
+    }
+
+    :global(body.is-glossary-portal-page .glossary-portal-hero__toggle){
+      display: none !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+
+    :global(body.is-glossary-portal-page .glossary-portal-hero){
+      margin-bottom: var(--portal-hero-margin-bottom, 12px);
+      border-radius: 16px !important;
+      box-shadow: none !important;
+    }
+
+    :global(body.is-glossary-portal-page .glossary-portal-hero__more){
+      max-height: none !important;
+      opacity: 1 !important;
+      overflow: visible !important;
+      pointer-events: auto !important;
+    }
+
+    :global(body.is-glossary-portal-page .glossary-portal-hero__toggle){
+      display: none !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/GlossaryRelationCards.astro b/src/components/GlossaryRelationCards.astro
index 5dc7a98..9c70166 100644
--- a/src/components/GlossaryRelationCards.astro
+++ b/src/components/GlossaryRelationCards.astro
@@ -36,44 +36,45 @@ const relationsHeadingId = "relations-conceptuelles";
 
 <style>
   .glossary-relations{
-    margin-top: 26px;
-    padding-top: 18px;
+    margin-top: 22px;
+    padding-top: 14px;
     border-top: 1px solid rgba(127,127,127,0.18);
   }
 
   .glossary-relations h2{
-    margin-bottom: 14px;
+    margin: 0 0 12px;
+    font-size: clamp(1.35rem, 3vw, 1.8rem);
+    line-height: 1.08;
   }
 
   .glossary-relations-grid{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 10px;
   }
 
   .glossary-relations-card{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 14px 16px;
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: 14px;
+    padding: 12px 13px;
     background: rgba(127,127,127,0.05);
   }
 
   .glossary-relations-card h3{
-    margin-top: 0;
-    margin-bottom: 10px;
-    font-size: 15px;
-    line-height: 1.35;
+    margin: 0 0 8px;
+    font-size: 14px;
+    line-height: 1.3;
   }
 
   .glossary-relations-card ul{
     margin: 0;
-    padding-left: 18px;
+    padding-left: 16px;
   }
 
   .glossary-relations-card li{
-    margin-bottom: 8px;
-    font-size: 14px;
-    line-height: 1.45;
+    margin-bottom: 7px;
+    font-size: 13.5px;
+    line-height: 1.42;
   }
 
   .glossary-relations-card li:last-child{
@@ -81,7 +82,39 @@ const relationsHeadingId = "relations-conceptuelles";
   }
 
   .glossary-relations-card span{
-    opacity: .9;
+    opacity: .88;
+  }
+
+  @media (max-width: 760px){
+    .glossary-relations{
+      margin-top: 18px;
+      padding-top: 12px;
+    }
+
+    .glossary-relations h2{
+      margin-bottom: 10px;
+      font-size: 1.3rem;
+    }
+
+    .glossary-relations-grid{
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    .glossary-relations-card{
+      padding: 11px 11px;
+      border-radius: 13px;
+    }
+
+    .glossary-relations-card h3{
+      font-size: 13px;
+      margin-bottom: 7px;
+    }
+
+    .glossary-relations-card li{
+      font-size: 13px;
+      line-height: 1.38;
+    }
   }
 
   @media (prefers-color-scheme: dark){
diff --git a/src/components/LevelToggle.astro b/src/components/LevelToggle.astro
index 212acb4..7a9df2c 100644
--- a/src/components/LevelToggle.astro
+++ b/src/components/LevelToggle.astro
@@ -68,7 +68,6 @@ const { initialLevel = 1 } = Astro.props;
     } catch {}
   }
 
-  // init : storage > initialLevel
   let start = clampLevel(initialLevel);
   try {
     const stored = localStorage.getItem(KEY);
@@ -77,13 +76,11 @@ const { initialLevel = 1 } = Astro.props;
 
   applyLevel(start, { persist: false });
 
-  // clicks
   wrap.addEventListener("click", (ev) => {
     const btn = ev.target?.closest?.("button[data-level]");
     if (!btn) return;
     ev.preventDefault();
 
-    // ✅ crucial : on capture la position AVANT le reflow lié au changement de niveau
     captureBeforeLevelSwitch();
     applyLevel(btn.dataset.level);
   });
@@ -95,6 +92,8 @@ const { initialLevel = 1 } = Astro.props;
     display: inline-flex;
     gap: 8px;
     align-items: center;
+    flex-wrap: wrap;
+    max-width: 100%;
   }
 
   .level-btn{
@@ -106,6 +105,7 @@ const { initialLevel = 1 } = Astro.props;
     cursor: pointer;
     user-select: none;
     transition: filter .12s ease, transform .12s ease, background .12s ease, border-color .12s ease;
+    white-space: nowrap;
   }
 
   .level-btn:hover{
@@ -125,4 +125,21 @@ const { initialLevel = 1 } = Astro.props;
   .level-btn:active{
     transform: translateY(1px);
   }
-</style>
+
+  @media (max-width: 980px){
+    .level-toggle{
+      gap: 6px;
+    }
+
+    .level-btn{
+      padding: 5px 9px;
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 760px){
+    .level-toggle{
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/LocalToc.astro b/src/components/LocalToc.astro
index a9f8565..80701c3 100644
--- a/src/components/LocalToc.astro
+++ b/src/components/LocalToc.astro
@@ -3,49 +3,122 @@ const { headings } = Astro.props;
 
 // H2/H3 seulement
 const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
+const tocId = `toc-local-${Math.random().toString(36).slice(2, 9)}`;
 ---
 
 {items.length > 0 && (
-  <nav class="toc-local" aria-label="Dans ce chapitre">
-    <div class="toc-local__title">Dans ce chapitre</div>
+  <nav class="toc-local" aria-label="Dans ce chapitre" data-toc-local>
+    <button
+      class="toc-local__head toc-local__toggle"
+      type="button"
+      aria-expanded="true"
+      aria-controls={tocId}
+    >
+      <span class="toc-local__title">Dans ce chapitre</span>
+      <span class="toc-local__chevron" aria-hidden="true">▾</span>
+    </button>
 
-    <ol class="toc-local__list">
-      {items.map((h) => (
-        <li
-          class={`toc-local__item d${h.depth}`}
-          data-toc-item
-          data-depth={h.depth}
-          data-id={h.slug}
-        >
-          <a href={`#${h.slug}`} data-toc-link data-slug={h.slug}>
-            {h.text}
-          </a>
-        </li>
-      ))}
-    </ol>
+    <div class="toc-local__body-clip" id={tocId}>
+      <div class="toc-local__body">
+        <ol class="toc-local__list">
+          {items.map((h) => (
+            <li
+              class={`toc-local__item d${h.depth}`}
+              data-toc-item
+              data-depth={h.depth}
+              data-id={h.slug}
+            >
+              <a href={`#${h.slug}`} data-toc-link data-slug={h.slug}>
+                <span class="toc-local__mark" aria-hidden="true"></span>
+                <span class="toc-local__text">{h.text}</span>
+              </a>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </div>
   </nav>
 )}
 
 <script is:inline>
 (() => {
   function init() {
-    const toc = document.querySelector(".toc-local");
-    if (!toc) return;
+    const toc = document.querySelector(".toc-local[data-toc-local]");
+    if (!toc || toc.dataset.tocReady === "1") return;
+    toc.dataset.tocReady = "1";
+
+    const toggle = toc.querySelector(".toc-local__toggle");
+    const bodyClip = toc.querySelector(".toc-local__body-clip");
+    const mq = window.matchMedia("(max-width: 980px)");
+    const KEY = `archicratie:toc-local:${window.location.pathname}`;
+
+    if (!toggle || !bodyClip) return;
+
+    const readState = () => {
+      try {
+        const v = localStorage.getItem(KEY);
+        if (v === "open") return true;
+        if (v === "closed") return false;
+      } catch {}
+      return null;
+    };
+
+    const writeState = (open) => {
+      try { localStorage.setItem(KEY, open ? "open" : "closed"); } catch {}
+    };
+
+    const setOpen = (open, { persist = true, emit = true } = {}) => {
+      const isMobile = mq.matches;
+      toc.classList.toggle("is-collapsed", isMobile && !open);
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+
+      if (persist && isMobile) writeState(open);
+
+      if (emit && open && isMobile) {
+        window.dispatchEvent(new CustomEvent("archicratie:tocLocalOpen"));
+      }
+    };
+
+    const initAccordion = () => {
+      if (!mq.matches) {
+        setOpen(true, { persist: false, emit: false });
+        return;
+      }
+      const stored = readState();
+      setOpen(stored == null ? true : stored, { persist: false, emit: false });
+    };
+
+    toggle.addEventListener("click", () => {
+      const next = toggle.getAttribute("aria-expanded") !== "true";
+      setOpen(next);
+    });
+
+    if (mq.addEventListener) {
+      mq.addEventListener("change", initAccordion);
+    } else if (mq.addListener) {
+      mq.addListener(initAccordion);
+    }
 
     const itemEls = Array.from(toc.querySelectorAll("[data-toc-item]"));
-    if (!itemEls.length) return;
+    if (!itemEls.length) {
+      initAccordion();
+      return;
+    }
 
     const ordered = itemEls
       .map((li) => {
         const a = li.querySelector("a[data-toc-link]");
         const id = li.getAttribute("data-id") || a?.dataset.slug || "";
         const depth = Number(li.getAttribute("data-depth") || "0");
-        const el = id ? document.getElementById(id) : null; // span.details-anchor OU h3[id]
+        const el = id ? document.getElementById(id) : null;
         return (a && id && el) ? { id, depth, li, a, el } : null;
       })
       .filter(Boolean);
 
-    if (!ordered.length) return;
+    if (!ordered.length) {
+      initAccordion();
+      return;
+    }
 
     const clear = () => {
       for (const t of ordered) {
@@ -55,14 +128,29 @@ const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
     };
 
     const openDetailsIfNeeded = (el) => {
-      const d = el?.closest?.("details");
-      if (d && !d.open) d.open = true;
+      try {
+        if (!el) return;
+
+        let d = el.closest?.("details") || null;
+
+        if (!d && el.classList?.contains("details-anchor")) {
+          const n = el.nextElementSibling;
+          if (n && n.tagName === "DETAILS") d = n;
+        }
+
+        if (!d) {
+          const s = el.closest?.("summary");
+          if (s && s.parentElement && s.parentElement.tagName === "DETAILS") d = s.parentElement;
+        }
+
+        if (d && d.tagName === "DETAILS" && !d.open) d.open = true;
+      } catch {}
     };
 
     let current = "";
 
-    const setCurrent = (id) => {
-      if (!id || id === current) return;
+    const setCurrent = (id, { autoOpen = true } = {}) => {
+      if (!id) return;
       const t = ordered.find((x) => x.id === id);
       if (!t) return;
 
@@ -74,17 +162,21 @@ const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
       t.a.setAttribute("aria-current", "true");
       t.li.classList.add("is-current");
 
-      // ✅ IMPORTANT: plus de scrollIntoView ici
-      // sinon ça scroll l'aside pendant le scroll du reading => TOC global “disparaît”.
+      if (mq.matches && autoOpen && toc.classList.contains("is-collapsed")) {
+        setOpen(true);
+      }
+
+      window.dispatchEvent(
+        new CustomEvent("archicratie:tocLocalActive", { detail: { id } })
+      );
     };
 
     const computeActive = () => {
       const visible = ordered.filter((t) => {
         const d = t.el.closest?.("details");
         if (d && !d.open) {
-          // Si l'élément est dans <summary>, il reste visible même details fermé
           const inSummary = !!t.el.closest?.("summary");
-          if (!inSummary) return false;
+          if (!inSummary && !t.el.classList?.contains("details-anchor")) return false;
         }
         return true;
       });
@@ -102,7 +194,7 @@ const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
       }
 
       if (!best) best = visible[0];
-      setCurrent(best.id);
+      if (best && best.id !== current) setCurrent(best.id, { autoOpen: true });
     };
 
     let ticking = false;
@@ -117,11 +209,14 @@ const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
 
     const syncFromHash = () => {
       const id = (location.hash || "").slice(1);
-      if (!id) { computeActive(); return; }
+      if (!id) {
+        computeActive();
+        return;
+      }
 
       const el = document.getElementById(id);
       if (el) openDetailsIfNeeded(el);
-      setCurrent(id);
+      setCurrent(id, { autoOpen: true });
     };
 
     toc.addEventListener("click", (ev) => {
@@ -133,13 +228,14 @@ const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
       const el = document.getElementById(id);
       if (el) openDetailsIfNeeded(el);
 
-      setCurrent(id);
+      setCurrent(id, { autoOpen: true });
     });
 
     window.addEventListener("scroll", onScroll, { passive: true });
     window.addEventListener("resize", onScroll);
     window.addEventListener("hashchange", syncFromHash);
 
+    initAccordion();
     syncFromHash();
     onScroll();
   }
@@ -153,30 +249,183 @@ const items = (headings || []).filter((h) => h.depth >= 2 && h.depth <= 3);
 </script>
 
 <style>
-  .toc-local{margin-top:12px;border:1px solid rgba(127,127,127,.25);border-radius:16px;padding:12px}
-  .toc-local__title{font-size:13px;opacity:.85;margin-bottom:8px}
-
-  .toc-local__list{list-style:none;margin:0;padding:0}
-  .toc-local__item::marker{content:""}
-  .toc-local__item{margin:6px 0}
-  .toc-local__item.d3{margin-left:12px;opacity:.9}
-
-  .toc-local__item.is-current > a{
-    font-weight: 750;
-    text-decoration: underline;
+  .toc-local{
+    margin-top: 12px;
+    border: 1px solid rgba(127,127,127,.25);
+    border-radius: 16px;
+    padding: 12px;
+    background: rgba(127,127,127,0.03);
   }
 
-  .toc-local a{
-    display:inline-block;
-    max-width:100%;
-    text-decoration:none;
+  .toc-local__toggle{
+    width: 100%;
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    padding: 0;
+    cursor: pointer;
   }
-  .toc-local a:hover{ text-decoration: underline; }
+
+  .toc-local__head{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+
+  .toc-local__title{
+    font-size: 13px;
+    opacity: .85;
+  }
+
+  .toc-local__chevron{
+    font-size: 12px;
+    opacity: .72;
+    transition: transform 180ms ease;
+  }
+
+  .toc-local__body-clip{
+    display: grid;
+    grid-template-rows: 1fr;
+    transition:
+      grid-template-rows 220ms ease,
+      opacity 160ms ease,
+      margin-top 220ms ease;
+  }
+
+  .toc-local__body{
+    min-height: 0;
+    overflow: hidden;
+  }
+
   .toc-local__list{
+    list-style: none;
+    margin: 0;
+    padding: 0;
     max-height: 44vh;
     overflow: auto;
     padding-right: 8px;
     scrollbar-gutter: stable;
   }
 
-</style>
+  .toc-local__item::marker{ content:""; }
+  .toc-local__item{ margin: 6px 0; }
+
+  .toc-local__item.d3{
+    margin-left: 14px;
+    opacity: .94;
+  }
+
+  .toc-local a{
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 8px;
+    align-items: start;
+    max-width: 100%;
+    text-decoration: none;
+  }
+
+  .toc-local a:hover{
+    text-decoration: none;
+  }
+
+  .toc-local__mark{
+    width: 10px;
+    height: 10px;
+    margin-top: .36em;
+    border-radius: 999px;
+    border: 1px solid rgba(127,127,127,.34);
+    background: transparent;
+    opacity: .68;
+  }
+
+  .toc-local__text{
+    line-height: 1.28;
+  }
+
+  .toc-local__item.is-current > a{
+    font-weight: 760;
+  }
+
+  .toc-local__item.is-current > a .toc-local__mark{
+    background: currentColor;
+    border-color: currentColor;
+    box-shadow: 0 0 0 3px rgba(127,127,127,.10);
+    opacity: 1;
+  }
+
+  @media (max-width: 980px){
+    .toc-local{
+      padding: 10px 12px;
+      border-radius: 14px;
+    }
+
+    .toc-local__head{
+      margin-bottom: 0;
+      min-height: 28px;
+    }
+
+    .toc-local__body-clip{
+      margin-top: 10px;
+    }
+
+    .toc-local.is-collapsed .toc-local__body-clip{
+      grid-template-rows: 0fr;
+      opacity: 0;
+      margin-top: 0;
+    }
+
+    .toc-local__body{
+      min-height: 0;
+      overflow: hidden;
+      transition: opacity 180ms ease;
+    }
+
+    .toc-local.is-collapsed .toc-local__body{
+      opacity: 0;
+    }
+
+    .toc-local.is-collapsed .toc-local__chevron{
+      transform: rotate(-90deg);
+    }
+
+    .toc-local__title{
+      font-size: 13px;
+    }
+
+    .toc-local__list{
+      max-height: min(42vh, 360px);
+      padding-right: 4px;
+    }
+
+    .toc-local__item{
+      margin: 5px 0;
+    }
+
+    .toc-local__item.d2 > a .toc-local__text{
+      font-size: 12.9px;
+      line-height: 1.24;
+      font-weight: 680;
+    }
+
+    .toc-local__item.d3{
+      margin-left: 12px;
+    }
+
+    .toc-local__item.d3 > a .toc-local__text{
+      font-size: 12.1px;
+      line-height: 1.22;
+      opacity: .95;
+    }
+
+    .toc-local__item.d3 > a .toc-local__mark{
+      width: 8px;
+      height: 8px;
+      margin-top: .42em;
+      opacity: .55;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/content/archicrat-ia/chapitre-3.mdx b/src/content/archicrat-ia/chapitre-3.mdx
index 8989598..10ddbfe 100644
--- a/src/content/archicrat-ia/chapitre-3.mdx
+++ b/src/content/archicrat-ia/chapitre-3.mdx
@@ -32,7 +32,7 @@ Cette grammaire ne vaut toutefois qu’à condition d’accepter d’être elle-
 
 ## **3.1 — Régimes des philosophies fondatrices de l’ordre —** *puissance instituante*
 
-2.  À l’orée de la philosophie politique moderne s’impose une question matricielle : qu’est-ce qui fonde l’autorité, et à quelles conditions cette fondation peut-elle rendre le vivre-ensemble politiquement viable ? Les pensées étudiées ici — Hobbes, Locke et Rousseau — répondent toutes, chacune à leur manière, à cette exigence de structuration du commun. Mais elles le font à partir d’une arcalité fondatrice : peur primordiale, droit naturel, volonté générale. Dans chaque cas, un principe supérieur vient justifier l’ordre institué en le précédant, en l’orientant et en le contraignant.
+À l’orée de la philosophie politique moderne s’impose une question matricielle : qu’est-ce qui fonde l’autorité, et à quelles conditions cette fondation peut-elle rendre le vivre-ensemble politiquement viable ? Les pensées étudiées ici — Hobbes, Locke et Rousseau — répondent toutes, chacune à leur manière, à cette exigence de structuration du commun. Mais elles le font à partir d’une arcalité fondatrice : peur primordiale, droit naturel, volonté générale. Dans chaque cas, un principe supérieur vient justifier l’ordre institué en le précédant, en l’orientant et en le contraignant.
 
 Or l’exigence archicratique ne se satisfait pas de cette extériorité du principe. Elle interroge moins ce qui fonde le pouvoir que ce qui permet de le tenir sans l’absolutiser, de le moduler sans l’abolir, et de rendre la co-viabilité collective effectivement praticable. De ce point de vue, les philosophies fondatrices sont à la fois indispensables et insuffisantes : indispensables parce qu’elles posent les cadres majeurs de la pensée politique moderne ; insuffisantes parce qu’elles confondent encore la structure de la régulation avec la seule légitimation du pouvoir.
 
diff --git a/src/content/archicrat-ia/chapitre-5.mdx b/src/content/archicrat-ia/chapitre-5.mdx
index 0b6372d..c727ee6 100644
--- a/src/content/archicrat-ia/chapitre-5.mdx
+++ b/src/content/archicrat-ia/chapitre-5.mdx
@@ -12,7 +12,7 @@ source:
   kind: docx
   path: "sources/docx/archicrat-ia/Chapitre_5—Problematiques_des_tensions_des_co-viabilites_et_des_regulations_archicratiques-version_officielle.docx"
 ---
-2.  L’époque contemporaine s’est emparée du terme soutenabilité avec une insistance telle qu’elle pourrait laisser croire à l’émergence d’une conscience enfin lucide de l’interdépendance entre systèmes naturels, économies, institutions, subjectivités, techniques et formes de vie. À première vue, le mot paraît répondre à une nécessité historique. Il semble désigner la prise en compte des limites, des vulnérabilités, des interdépendances et des irréversibilités qui traversent le monde contemporain. Pourtant, cette évidence apparente exige d’être immédiatement troublée. Car la soutenabilité ne se borne pas à nommer une alerte ; elle en organise aussi le cadrage, en reformulant les contradictions du monde dans les termes d’une mise en compatibilité administrable.
+L’époque contemporaine s’est emparée du terme soutenabilité avec une insistance telle qu’elle pourrait laisser croire à l’émergence d’une conscience enfin lucide de l’interdépendance entre systèmes naturels, économies, institutions, subjectivités, techniques et formes de vie. À première vue, le mot paraît répondre à une nécessité historique. Il semble désigner la prise en compte des limites, des vulnérabilités, des interdépendances et des irréversibilités qui traversent le monde contemporain. Pourtant, cette évidence apparente exige d’être immédiatement troublée. Car la soutenabilité ne se borne pas à nommer une alerte ; elle en organise aussi le cadrage, en reformulant les contradictions du monde dans les termes d’une mise en compatibilité administrable.
 
 Sous son apparente neutralité, le lexique de la soutenabilité reconduit ainsi une opération plus profonde : il naturalise des conflits qui devraient être rendus politiquement disputables. Il transforme des antagonismes structurels en variables de régulation. Il traduit des incompatibilités de co-viabilité en déséquilibres paramétrables. Sous le langage de la préservation, il reconduit une entreprise de neutralisation. Ce qui, dans un autre vocabulaire, apparaîtrait comme extraction, dépossession, sacrifice différentiel, hiérarchisation des vies ou capture des capacités d’agir, se trouve requalifié sous des catégories plus lisses : résilience, adaptation, transition, compensation, gouvernance, développement soutenable. Le vocabulaire change ; la conflictualité se dérobe.
 
diff --git a/src/layouts/EditionLayout.astro b/src/layouts/EditionLayout.astro
index 71a5968..a84364f 100644
--- a/src/layouts/EditionLayout.astro
+++ b/src/layouts/EditionLayout.astro
@@ -64,7 +64,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     <meta data-pagefind-meta={`status:${String(statusKey ?? statusLabel)}`} />
     <meta data-pagefind-meta={`version:${String(version ?? "")}`} />
 
-    {/* ✅ BOOT EARLY : SidePanel dépend de ces globals. */}
     <script
       is:inline
       define:vars={{
@@ -79,13 +78,11 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       }}
     >
 (() => {
-  // ✅ anti double-init (HMR / inclusion accidentelle)
   if (window.__archiBootOnce === 1) return;
   window.__archiBootOnce = 1;
 
   var __DEV__ = Boolean(IS_DEV);
 
-  // ===== Gitea globals =====
   var base = String(GITEA_BASE || "").replace(/\/+$/, "");
   var owner = String(GITEA_OWNER || "");
   var repo = String(GITEA_REPO || "");
@@ -94,24 +91,22 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     base, owner, repo
   };
 
-  // ===== optional issue bridge (same-origin proxy) =====
   var rawBridge = String(ISSUE_BRIDGE_PATH || "").trim();
   var normBridge = rawBridge
     ? (rawBridge.startsWith("/") ? rawBridge : ("/" + rawBridge.replace(/^\/+/, ""))).replace(/\/+$/, "")
     : "";
   window.__archiIssueBridge = { ready: Boolean(normBridge), path: normBridge };
 
-  // ===== whoami config =====
   var __WHOAMI_PATH__ = String(WHOAMI_PATH || "/_auth/whoami");
   var __WHOAMI_IN_DEV__ = Boolean(WHOAMI_IN_DEV);
-
-  // En dev: par défaut on SKIP (=> pas de spam 404). Override via PUBLIC_WHOAMI_IN_DEV=1.
+  var __WHOAMI_FORCE_LOCALHOST__ = Boolean(WHOAMI_FORCE_LOCALHOST);
   var SHOULD_FETCH_WHOAMI = (!__DEV__) || __WHOAMI_IN_DEV__;
 
   window.__archiFlags = Object.assign({}, window.__archiFlags, {
     dev: __DEV__,
     whoamiPath: __WHOAMI_PATH__,
     whoamiInDev: __WHOAMI_IN_DEV__,
+    whoamiForceLocalhost: __WHOAMI_FORCE_LOCALHOST__,
     whoamiFetch: SHOULD_FETCH_WHOAMI,
   });
 
@@ -129,10 +124,8 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     return Array.isArray(groups) && groups.some((x) => String(x).toLowerCase() === gg);
   }
 
-  // ===== Auth info promise (single source of truth) =====
   if (!window.__archiAuthInfoP) {
     window.__archiAuthInfoP = (async () => {
-      // ✅ dev default: skip
       if (!SHOULD_FETCH_WHOAMI) {
         return { ok: false, user: "", name: "", email: "", groups: [], raw: "" };
       }
@@ -179,22 +172,18 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     })().catch(() => ({ ok: false, user: "", name: "", email: "", groups: [], raw: "" }));
   }
 
-  // readers + editors (strict)
   if (!window.__archiCanReadP) {
     window.__archiCanReadP = window.__archiAuthInfoP.then((info) =>
       Boolean(info && info.ok && (inGroup(info.groups, READ_GROUP) || inGroup(info.groups, REQUIRED_GROUP)))
     );
   }
 
-  // editors gate for "Proposer"
   if (!window.__archiIsEditorP) {
     window.__archiIsEditorP = window.__archiAuthInfoP
-      // ✅ DEV fallback: si whoami absent/KO => Proposer autorisé (comme ton intention initiale)
       .then((info) => Boolean(inGroup(info.groups, REQUIRED_GROUP) || (__DEV__ && !(info && info.ok))))
       .catch(() => Boolean(__DEV__));
   }
 })();
-
     </script>
   </head>
 
@@ -212,7 +201,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         <span class="badge" data-badge="status"><strong>Statut</strong> : {statusLabel}</span>
         <span class="badge" data-badge="version"><strong>Version</strong> : {version}</span>
 
-        <a class="resume-btn" id="resume-btn" href="#" hidden>Reprendre la lecture</a>
+        <a class="resume-btn is-disabled" id="resume-btn" href="#" aria-disabled="true">Reprendre la lecture</a>
 
         <form class="jump-form" id="jump-form" role="search" aria-label="Aller à un paragraphe par identifiant">
           <input
@@ -264,6 +253,19 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     <ProposeModal />
 
+    <div class="mobile-para-menu" id="mobile-para-menu" hidden aria-hidden="true">
+      <div class="mobile-para-menu__inner" role="dialog" aria-label="Actions du paragraphe">
+        <div class="mobile-para-menu__meta" id="mobile-para-menu-meta"></div>
+
+        <div class="mobile-para-menu__actions">
+          <button type="button" class="mobile-para-menu__btn" id="mobile-para-copy-link">Copier le lien</button>
+          <button type="button" class="mobile-para-menu__btn" id="mobile-para-cite">Citer</button>
+          <a class="mobile-para-menu__btn mobile-para-menu__link" id="mobile-para-propose" href="#" target="_blank" rel="noopener noreferrer" hidden>Proposer</a>
+          <button type="button" class="mobile-para-menu__btn" id="mobile-para-bookmark">Marque-page</button>
+        </div>
+      </div>
+    </div>
+
     <style>
       :global(:root){
         --glossary-local-sticky-h: 0px;
@@ -273,7 +275,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         padding: var(--page-gap) 16px 48px;
       }
 
-      /* ✅ Grille robustifiée + panel plus confortable (base) */
       .page-shell{
         --aside-w: 320px;
         --reading-w: 78ch;
@@ -311,10 +312,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         scrollbar-gutter: stable;
       }
 
-      /* ✅ Mode “lecture continue” :
-        - on garde <details> pour les ancres / JS
-        - mais on supprime l’UX accordéon (summary) et on montre le vrai H2
-      */
       :global(.reading details.details-section){
         border: 0 !important;
         padding: 0 !important;
@@ -322,7 +319,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         background: transparent !important;
       }
 
-      /* summary invisible (plus de “Ouvrir la section…”) */
       :global(.reading details.details-section > summary.details-summary){
         position: absolute !important;
         left: -9999px !important;
@@ -335,12 +331,10 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         margin: 0 !important;
       }
 
-      /* pas de “gap” artificiel ajouté après le summary */
       :global(.reading details .details-body){
         margin-top: 0 !important;
       }
 
-      /* le vrai H2 redevient visible */
       :global(.reading details .details-body > h2:first-child){
         position: static !important;
         left: auto !important;
@@ -350,14 +344,12 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         white-space: normal !important;
       }
 
-
       .reading{
         grid-column: 2;
         max-width: none;
         margin: 0;
       }
 
-      /* Niveau 1 : panel OFF + lecture large */
       :global(body[data-reading-level="1"]) .page-shell{
         --panel-w: 0px;
         max-width: min(1560px, calc(100vw - 32px));
@@ -365,7 +357,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       }
       :global(body[data-reading-level="1"]) .page-panel{ display: none !important; }
 
-      /* Niveau 3 : lecture plus étroite + panel LARGE ; TOC masqué */
       :global(body[data-reading-level="3"]) .page-shell{
         --reading-w: 60ch;
         --panel-w: clamp(720px, 48vw, 940px);
@@ -382,7 +373,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       :global(body[data-reading-level="3"]) .page-aside{ display: none; }
       :global(body[data-reading-level="3"]) .reading{ grid-column: 1; }
 
-      /* Niveau 4 : TOC à gauche + panel confortable */
       :global(body[data-reading-level="4"]) .page-shell{
         --aside-w: 320px;
         --reading-w: 64ch;
@@ -406,37 +396,22 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
           max-width: 1180px;
           grid-template-columns: var(--aside-w) minmax(0, 1fr);
         }
-        .reading{ max-width: 78ch; margin: 0 auto; }
-      }
-
-      @media (max-width: 860px){
-        .page-shell{
+        .reading{
           max-width: 78ch;
-          grid-template-columns: 1fr;
+          margin: 0 auto;
+          min-width: 0;
         }
-        .page-aside{
-          position: static;
-          margin-bottom: 12px;
-        }
-        .page-aside__scroll{
-          max-height: none;
-          overflow: visible;
-          padding-right: 0;
-          padding-top: 0;
-        }
-        .reading{ max-width: 78ch; margin: 0 auto; }
       }
 
-      /* ===== para-tools layout (non destructif, surcouche) ===== */
       :global(.reading p[id^="p-"]){
         position: relative;
         padding-right: 132px;
       }
 
-      /* Glossaire : pas de rail para-tools */
       :global(body[data-edition-key="glossaire"] .reading p[id^="p-"]){
         padding-right: 0;
       }
+
       :global(.para-tools){
         position: absolute;
         right: 0;
@@ -447,6 +422,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         gap: 6px;
         z-index: 2;
       }
+
       :global(.para-id){
         border: 1px solid rgba(127,127,127,0.45);
         background: rgba(127,127,127,0.08);
@@ -457,23 +433,616 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         cursor: pointer;
         user-select: none;
       }
+
       :global(.para-tools-actions){
         display: flex;
         gap: 6px;
       }
+
       :global(.para-bookmark){
         align-self: flex-end;
       }
 
-      /* ✅ repère visuel du para "pilotant" le SidePanel */
       :global(.reading p.is-panel-current){
         background: rgba(140,140,255,0.07);
         border-radius: 12px;
       }
+
       :global(body[data-edition-key="glossaire"] .reading p.is-panel-current){
         background: transparent;
         border-radius: 0;
       }
+
+      :global(body[data-edition-key="glossaire"]) .page-shell,
+      :global(body[data-edition-key="glossaire"]) .page-aside,
+      :global(body[data-edition-key="glossaire"]) .reading{
+        min-width: 0;
+      }
+
+      /* =========================================================
+        READING-FOLLOW — recalage premium
+        ========================================================= */
+
+      :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow){
+        z-index: 10;
+      }
+
+      :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow .reading-follow__inner){
+        padding: 9px 14px 10px;
+        padding-right: 88px;
+        border: 1px solid rgba(127,127,127,.18);
+        border-top: 0;
+        border-radius: 0 0 16px 16px;
+        background: rgba(255,255,255,.88);
+        box-shadow: 0 10px 24px rgba(0,0,0,.06);
+      }
+
+      :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow .rf-h2){
+        font-size: clamp(1.02rem, 1.4vw, 1.14rem);
+        line-height: 1.16;
+        font-weight: 760;
+        letter-spacing: -.015em;
+      }
+
+      :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow .rf-h3){
+        font-size: .84rem;
+        line-height: 1.14;
+        font-weight: 650;
+        letter-spacing: -.01em;
+        opacity: .82;
+        margin-top: 2px;
+      }
+
+      :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow .rf-actions){
+        right: 10px;
+        bottom: 8px;
+      }
+
+      :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow .rf-btn){
+        width: 32px;
+        height: 28px;
+        border-radius: 9px;
+      }
+
+      @media (max-width: 980px){
+        .page{
+          padding: var(--page-gap) 10px 18px 18px;
+        }
+
+        .page-shell{
+          display: block !important;
+          width: 100% !important;
+          max-width: none !important;
+          min-width: 0 !important;
+          margin: 0 !important;
+        }
+
+        .page-aside,
+        .reading,
+        .page-panel{
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+          margin: 0 !important;
+        }
+
+        .page-panel{
+          display: none !important;
+        }
+
+        .page-aside{
+          position: static !important;
+          top: auto !important;
+          grid-column: auto !important;
+          margin: 0 0 12px 0 !important;
+        }
+
+        .page-aside__scroll{
+          max-height: none !important;
+          overflow: visible !important;
+          padding-right: 0 !important;
+          padding-top: 0 !important;
+        }
+
+        .reading{
+          grid-column: auto !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+          overflow-x: hidden !important;
+        }
+
+        article.reading > *{
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+
+        :global(.reading),
+        :global(.reading *),
+        :global(.reading details),
+        :global(.reading details *),
+        :global(.reading .details-body),
+        :global(.reading .details-body *){
+          min-width: 0 !important;
+          box-sizing: border-box;
+        }
+
+        :global(.reading p[id^="p-"]){
+          padding-right: 0 !important;
+        }
+
+        :global(.para-tools){
+          display: none !important;
+        }
+
+        :global(.reading details),
+        :global(.reading .details-body),
+        :global(.reading .details-body > *){
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+
+        :global(.reading h1),
+        :global(.reading h2),
+        :global(.reading h3),
+        :global(.reading h4),
+        :global(.reading p),
+        :global(.reading li),
+        :global(.reading blockquote),
+        :global(.reading figcaption),
+        :global(.reading .details-body h2),
+        :global(.reading .details-body h3),
+        :global(.reading .details-body h4),
+        :global(.reading .details-body p),
+        :global(.reading .details-body li),
+        :global(.reading .details-body blockquote),
+        :global(.reading .details-body figcaption){
+          max-width: 100% !important;
+          overflow-wrap: anywhere !important;
+          word-break: break-word !important;
+          hyphens: auto;
+        }
+
+        :global(.reading ul),
+        :global(.reading ol),
+        :global(.reading blockquote),
+        :global(.reading pre),
+        :global(.reading table),
+        :global(.reading figure),
+        :global(.reading img),
+        :global(.reading svg),
+        :global(.reading video),
+        :global(.reading iframe),
+        :global(.reading canvas),
+        :global(.reading .details-body ul),
+        :global(.reading .details-body ol),
+        :global(.reading .details-body blockquote),
+        :global(.reading .details-body pre),
+        :global(.reading .details-body table),
+        :global(.reading .details-body figure),
+        :global(.reading .details-body img),
+        :global(.reading .details-body svg),
+        :global(.reading .details-body video),
+        :global(.reading .details-body iframe),
+        :global(.reading .details-body canvas){
+          width: 100%;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+
+        :global(.reading img),
+        :global(.reading svg),
+        :global(.reading video),
+        :global(.reading iframe),
+        :global(.reading canvas),
+        :global(.reading .details-body img),
+        :global(.reading .details-body svg),
+        :global(.reading .details-body video),
+        :global(.reading .details-body iframe),
+        :global(.reading .details-body canvas){
+          height: auto;
+        }
+
+        :global(.reading pre),
+        :global(.reading .details-body pre){
+          overflow-x: auto !important;
+          white-space: pre-wrap !important;
+          word-break: break-word !important;
+        }
+
+        :global(.reading table),
+        :global(.reading .details-body table){
+          display: block;
+          overflow-x: auto;
+        }
+
+        :global(.reading [style*="width"]),
+        :global(.reading .details-body [style*="width"]){
+          max-width: 100% !important;
+        }
+      }
+
+      @media (prefers-color-scheme: dark){
+        :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] #reading-follow .reading-follow__inner){
+          background: rgba(0,0,0,.6);
+          box-shadow: 0 12px 24px rgba(0,0,0,.2);
+        }
+      }
+
+      .resume-btn{
+        white-space: nowrap;
+        flex: 0 0 auto;
+      }
+
+      .resume-btn.is-disabled{
+        opacity: .55;
+        cursor: not-allowed;
+        pointer-events: auto;
+      }
+
+      .resume-btn.is-disabled:hover,
+      .resume-btn.is-disabled:focus{
+        transform: none;
+      }
+
+      @media (max-width: 760px){
+        .page{
+          padding: var(--page-gap) 12px 14px 18px;
+        }
+
+        .edition-bar{
+          gap: 8px 10px;
+        }
+
+        .jump-form{
+          min-width: 0;
+          flex: 1 1 100%;
+          max-width: 100%;
+        }
+
+        .jump-input{
+          width: 100%;
+          max-width: 100%;
+        }
+
+        :global(#reading-follow){
+          left: 0;
+          right: 0;
+          width: auto;
+          max-width: none;
+        }
+
+        :global(#reading-follow .reading-follow__inner){
+          padding: 9px 12px 10px;
+          padding-right: 70px;
+          border-radius: 0 0 12px 12px;
+        }
+
+        :global(#reading-follow .rf-line){
+          display: block;
+          width: 100%;
+          text-align: left;
+          margin: 0;
+          padding: 0;
+        }
+
+        :global(#reading-follow .rf-h1){
+          font-size: 1.76rem;
+          line-height: 1.03;
+          font-weight: 800;
+          letter-spacing: -.03em;
+        }
+
+        :global(#reading-follow .rf-h2){
+          font-size: 1.06rem;
+          line-height: 1.1;
+          font-weight: 760;
+          letter-spacing: -.018em;
+          margin-top: 2px;
+        }
+
+        :global(#reading-follow .rf-h3){
+          font-size: .82rem;
+          line-height: 1.1;
+          font-weight: 650;
+          opacity: .8;
+          margin-top: 2px;
+        }
+
+        :global(#reading-follow .rf-actions){
+          right: 8px;
+          bottom: 7px;
+          gap: 6px;
+        }
+
+        :global(#reading-follow .rf-btn){
+          width: 28px;
+          height: 26px;
+          border-radius: 8px;
+          font-size: 13px;
+        }
+      }
+
+      @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+        .page{
+          padding: var(--page-gap) 8px 8px 14px;
+        }
+
+        header{
+          padding: 6px 10px;
+        }
+
+        .site-nav{
+          font-size: 11px;
+        }
+
+        .edition-bar{
+          margin-top: 5px;
+          padding-top: 5px;
+          gap: 5px 6px;
+          font-size: 11px;
+        }
+
+        .resume-btn{
+          font-size: 11px;
+          padding: 3px 8px;
+        }
+
+        .jump-form{
+          gap: 4px;
+          min-width: 0;
+          flex: 1 1 auto;
+        }
+
+        .jump-input{
+          width: min(180px, 38vw);
+          max-width: 100%;
+          padding: 2px 8px;
+          font-size: 11px;
+        }
+
+        .jump-btn{
+          padding: 2px 7px;
+          font-size: 11px;
+        }
+
+        :global(#reading-follow .reading-follow__inner){
+          padding: 3px 9px 3px;
+          padding-right: 54px;
+        }
+
+        :global(#reading-follow .rf-h1){
+          font-size: .96rem;
+        }
+
+        :global(#reading-follow .rf-h2){
+          font-size: .76rem;
+        }
+
+        :global(#reading-follow .rf-btn){
+          width: 22px;
+          height: 20px;
+          border-radius: 6px;
+          font-size: 10px;
+        }
+      }
+
+      @media (max-width: 980px){
+        :global(body[data-edition-key="glossaire"]){
+          --glossary-sticky-top: 0px !important;
+          --glossary-follow-height: 0px !important;
+          --glossary-local-sticky-h: 0px !important;
+          --followbar-h: 0px !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .page{
+          padding: var(--page-gap) 10px 18px 18px !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .page-shell{
+          display: block !important;
+          width: 100% !important;
+          max-width: none !important;
+          min-width: 0 !important;
+          margin: 0 !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .page-aside,
+        :global(body[data-edition-key="glossaire"]) .reading,
+        :global(body[data-edition-key="glossaire"]) .page-panel{
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+          margin: 0 !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .page-panel{
+          display: none !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .page-aside{
+          position: static !important;
+          top: auto !important;
+          grid-column: auto !important;
+          margin: 0 0 12px 0 !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .page-aside__scroll{
+          max-height: none !important;
+          overflow: visible !important;
+          padding: 0 !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .reading{
+          grid-column: auto !important;
+          overflow-x: clip !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) article.reading > *{
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) .glossary-hero,
+        :global(body[data-edition-key="glossaire"]) .glossary-home,
+        :global(body[data-edition-key="glossaire"]) .glossary-map,
+        :global(body[data-edition-key="glossaire"]) .glossary-map-block,
+        :global(body[data-edition-key="glossaire"]) .glossary-map-section,
+        :global(body[data-edition-key="glossaire"]) .glossary-page-hero,
+        :global(body[data-edition-key="glossaire"]) .glossary-portal-hero,
+        :global(body[data-edition-key="glossaire"]) .scene-hero{
+          position: static !important;
+          top: auto !important;
+          left: auto !important;
+          right: auto !important;
+          inset: auto !important;
+          z-index: auto !important;
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+          margin: 0 0 12px 0 !important;
+          transform: none !important;
+        }
+
+        :global(body[data-edition-key="glossaire"]) #reading-follow{
+          display: none !important;
+        }
+      }
+
+      @media (max-width: 430px){
+        .page{
+          padding: var(--page-gap) 10px 12px 16px;
+        }
+
+        :global(#reading-follow .reading-follow__inner){
+          padding: 8px 10px 9px;
+          padding-right: 62px;
+          border-radius: 0 0 10px 10px;
+        }
+
+        :global(#reading-follow .rf-h1){
+          font-size: 1.5rem;
+          line-height: 1.02;
+        }
+
+        :global(#reading-follow .rf-h2){
+          font-size: .96rem;
+          line-height: 1.07;
+          margin-top: 1px;
+        }
+
+        :global(#reading-follow .rf-h3){
+          font-size: .74rem;
+          line-height: 1.05;
+          margin-top: 1px;
+        }
+
+        :global(#reading-follow .rf-actions){
+          right: 6px;
+          bottom: 6px;
+          gap: 4px;
+        }
+
+        :global(#reading-follow .rf-btn){
+          width: 25px;
+          height: 24px;
+          border-radius: 7px;
+          font-size: 12px;
+        }
+      }
+
+            .mobile-para-menu{
+        position: fixed;
+        inset: auto 10px 10px 10px;
+        z-index: 120;
+      }
+
+      .mobile-para-menu[hidden]{
+        display: none !important;
+      }
+
+      .mobile-para-menu__inner{
+        border: 1px solid rgba(127,127,127,.24);
+        border-radius: 14px;
+        background: rgba(20,20,24,.96);
+        box-shadow: 0 18px 42px rgba(0,0,0,.34);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        padding: 10px;
+      }
+
+      .mobile-para-menu__meta{
+        font-size: 12px;
+        font-weight: 700;
+        opacity: .82;
+        margin-bottom: 8px;
+      }
+
+      .mobile-para-menu__actions{
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .mobile-para-menu__btn,
+      .mobile-para-menu__link{
+        appearance: none;
+        border: 1px solid rgba(127,127,127,.28);
+        background: rgba(255,255,255,.04);
+        color: inherit;
+        text-decoration: none;
+        border-radius: 12px;
+        padding: 10px 12px;
+        font-size: 13px;
+        font-weight: 700;
+        text-align: center;
+      }
+
+      .mobile-para-menu__btn:active,
+      .mobile-para-menu__link:active{
+        transform: translateY(1px);
+      }
+
+            .mobile-para-menu{
+        touch-action: manipulation;
+      }
+
+      .mobile-para-menu__inner{
+        max-width: 100%;
+      }
+
+      .mobile-para-menu__meta{
+        overflow-wrap: anywhere;
+        word-break: break-word;
+      }
+
+      @media (max-width: 430px){
+        .mobile-para-menu{
+          inset: auto 8px 8px 8px;
+        }
+
+        .mobile-para-menu__actions{
+          grid-template-columns: 1fr;
+        }
+
+        .mobile-para-menu__btn,
+        .mobile-para-menu__link{
+          padding: 11px 12px;
+          font-size: 13px;
+        }
+      }
+
+      @media (min-width: 981px){
+        .mobile-para-menu{
+          display: none !important;
+        }
+      }
     </style>
 
     <script is:inline>
@@ -486,6 +1055,17 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
   const PAGE_GAP = 12;
   const HYST = 4;
 
+  function isCompactFollowViewport() {
+    return (
+      window.innerWidth <= 760 ||
+      window.matchMedia("(orientation: landscape) and (max-width: 920px) and (max-height: 520px)").matches
+    );
+  }
+
+  function stickyGap() {
+    return isCompactFollowViewport() ? 0 : PAGE_GAP;
+  }
+
   const body = document.body;
   const headerEl = document.querySelector("header");
   const followEl = document.getElementById("reading-follow");
@@ -527,6 +1107,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
   function px(n){ return `${Math.max(0, Math.round(n))}px`; }
   function setRootVar(name, value) { document.documentElement.style.setProperty(name, value); }
   function headerH() { return headerEl ? headerEl.getBoundingClientRect().height : 0; }
+  function currentPageGap() { return window.innerWidth <= 760 ? 0 : PAGE_GAP; }
 
   function readPxVar(name) {
     const raw = getComputedStyle(document.documentElement)
@@ -542,22 +1123,18 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       return head ? Math.round(head.getBoundingClientRect().height) : 0;
     }
 
-    if (isGlossaryPortalMode) {
-      const hero =
-        document.querySelector(".scene-hero") ||
-        document.querySelector(".glossary-portal-hero") ||
-        document.querySelector(".glossary-page-hero");
-
-      return hero ? Math.round(hero.getBoundingClientRect().height) : 0;
-    }
-
     return 0;
   }
 
   function getLocalStickyHeight() {
     const explicit = readPxVar("--glossary-local-sticky-h");
     if (explicit > 0) return explicit;
-    return autoMeasureGlossaryLocalStickyHeight();
+
+    if (isGlossaryEntryMode) {
+      return autoMeasureGlossaryLocalStickyHeight();
+    }
+
+    return 0;
   }
 
   function syncFollowTop() {
@@ -568,7 +1145,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         ? getLocalStickyHeight()
         : 0;
 
-    followEl.style.top = px(headerH() + PAGE_GAP + localH);
+    followEl.style.top = px(headerH() + stickyGap() + localH);
   }
 
   window.__archiSetLocalStickyHeight = (n) => {
@@ -585,8 +1162,10 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
   };
 
   function syncHeaderH() {
-    setRootVar("--sticky-header-h", px(headerH()));
+    const h = headerH();
+    setRootVar("--sticky-header-h", px(h));
     setRootVar("--page-gap", px(PAGE_GAP));
+    setRootVar("--glossary-sticky-top", px(h + stickyGap()));
     syncFollowTop();
   }
 
@@ -638,7 +1217,14 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         ? getLocalStickyHeight()
         : 0;
 
-    return headerH() + PAGE_GAP + localH;
+    const followH =
+      followEl && followEl.classList.contains("is-on")
+        ? Math.round(
+            followEl.querySelector(".reading-follow__inner")?.getBoundingClientRect().height || 0
+          )
+        : 0;
+
+    return Math.max(0, Math.round(headerH() + stickyGap() + localH + followH));
   }
 
   function absTop(el) {
@@ -651,7 +1237,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     window.scrollTo({ top: Math.max(0, y), behavior });
   }
 
-  // ===== details open (robuste) + export =====
   function openDetailsIfNeeded(el) {
     try {
       if (!el) return;
@@ -697,66 +1282,270 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       highlightEl(el);
     } catch {}
   }
+  
+  let __suppressReadingClickUntil = 0;
+  let __resumeClickBound = false;
+  let __suspendAutoTrackUntil = 0;
+
+  function suspendAutoTrack(ms = 1000) {
+    __suspendAutoTrackUntil = Date.now() + Math.max(0, Number(ms) || 0);
+  }
+
+  function autoTrackSuspended() {
+    return Date.now() < __suspendAutoTrackUntil;
+  }
+
+  function getParaFromTarget(el) {
+    try {
+      if (!el) return null;
+
+      if (el.matches?.('.reading p[id^="p-"]')) return el;
+
+      const p = el.closest?.('.reading p[id^="p-"]');
+      if (p) return p;
+
+      if (el.classList?.contains("details-anchor")) {
+        const d = (el.nextElementSibling && el.nextElementSibling.tagName === "DETAILS")
+          ? el.nextElementSibling
+          : null;
+        const p2 = d ? d.querySelector('.details-body p[id^="p-"]') : null;
+        if (p2) return p2;
+      }
+
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  function getAnchorIdFromTarget(el) {
+    try {
+      if (!el || !el.id) return "";
+      return String(el.id);
+    } catch {
+      return "";
+    }
+  }
+
+  function rememberParaFromTarget(el, kind = "active") {
+    try {
+      const p = getParaFromTarget(el);
+      if (!p || !p.id) return "";
+
+      __activeParaId = p.id;
+      setCurrentPara(p.id, kind);
+      writeLastSeen(p.id);
+      updateResumeButton();
+      return p.id;
+    } catch {
+      return "";
+    }
+  }
+
+  function focusReadingTarget(el, {
+    behavior = "auto",
+    extra = 12,
+    open = true,
+    highlight = true,
+    updateHash = true,
+    hashTarget = null,
+    remember = true,
+    kind = "active",
+  } = {}) {
+    try {
+      if (!el) return false;
+
+      if (open) openDetailsIfNeeded(el);
+
+      scrollToElWithOffset(el, extra, behavior);
+
+      if (highlight) highlightFromTarget(el);
+
+      const anchorId = getAnchorIdFromTarget(hashTarget || el);
+      if (updateHash && anchorId) {
+        history.replaceState(null, "", `${window.location.pathname}#${anchorId}`);
+      }
+
+      if (remember) {
+        rememberParaFromTarget(el, kind);
+      }
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
 
   function cssEscape(s) {
     try { return (window.CSS && CSS.escape) ? CSS.escape(String(s)) : String(s).replace(/["\\]/g, "\\$&"); }
     catch { return String(s).replace(/["\\]/g, "\\$&"); }
   }
 
-  // ===== Bookmarks (pinned + auto) =====
-  const PINNED_KEY = "archicratie:bookmark:pinned";
   const LAST_KEY = `archicratie:bookmark:last:${window.location.pathname}`;
 
+  const RESUME_KEY = "archicratie:resume:explicit";
+
   function readJSON(key) {
     try { return JSON.parse(localStorage.getItem(key) || "null"); }
     catch { return null; }
   }
+
   function writeJSON(key, obj) {
     try { localStorage.setItem(key, JSON.stringify(obj)); } catch {}
   }
 
-  function updateResumeButton() {
-    const btn = document.getElementById("resume-btn");
-    if (!btn) return;
+  function normalizeBookmark(v) {
+    if (!v || typeof v !== "object") return null;
+    if (!v.anchor) return null;
 
-    const bm = readJSON(PINNED_KEY) || readJSON(LAST_KEY);
-    if (!bm || !bm.url) { btn.hidden = true; return; }
+    const path = String(v.path || window.location.pathname);
+    const url = String(v.url || `${window.location.origin}${path}#${v.anchor}`);
 
-    btn.hidden = false;
-    btn.href = bm.url;
-    btn.title = bm.title ? `Reprendre : ${bm.title}` : "Reprendre la lecture";
-
-    btn.onclick = (ev) => {
-      try {
-        const here = new URL(window.location.href);
-        here.search = "";
-
-        const target = new URL(bm.url, window.location.origin);
-        target.search = "";
-
-        if (here.pathname === target.pathname) {
-          ev.preventDefault();
-          const id = (target.hash || "").slice(1);
-          if (!id) return;
-
-          const el = document.getElementById(id);
-          if (!el) return;
-
-          openDetailsIfNeeded(el);
-          scrollToElWithOffset(el, 12, "auto");
-          highlightFromTarget(el);
-          history.replaceState(null, "", here.pathname + "#" + id);
-        }
-      } catch {}
+    return {
+      url,
+      path,
+      anchor: String(v.anchor),
+      title: String(v.title || ""),
+      version: String(v.version || ""),
+      ts: Number(v.ts || Date.now()),
+      kind: String(v.kind || "explicit-bookmark"),
     };
   }
+
+  function setResumeBookmark(payload) {
+    const normalized = normalizeBookmark(payload);
+    if (!normalized) return null;
+
+    writeJSON(RESUME_KEY, normalized);
+    return normalized;
+  }
+
+  function getResumeBookmark() {
+    return normalizeBookmark(readJSON(RESUME_KEY));
+  }
+
+  function savePinnedBookmarkFromPara(p, kind = "explicit-bookmark") {
+    if (!p || !p.id) return false;
+
+    suspendAutoTrack(1400);
+
+    const pageUrl = new URL(window.location.href);
+    pageUrl.search = "";
+    pageUrl.hash = p.id;
+
+    const payload = {
+      url: pageUrl.toString(),
+      path: pageUrl.pathname,
+      anchor: p.id,
+      title: docTitle,
+      version: docVersion,
+      ts: Date.now(),
+      kind,
+    };
+
+    const saved = setResumeBookmark(payload);
+    if (!saved) return false;
+
+    __activeParaId = p.id;
+
+    try { setCurrentPara(p.id, "bookmark"); } catch {}
+
+    updateResumeButton();
+    return true;
+  }
+
+  function performResume() {
+    const current = getResumeBookmark();
+    if (!current || !current.anchor) return false;
+
+    const here = new URL(window.location.href);
+    here.search = "";
+
+    const targetUrl = new URL(current.url, window.location.origin);
+    targetUrl.search = "";
+
+    const id = String(current.anchor || "").replace(/^#/, "").trim();
+    if (!id) return false;
+
+    if (here.pathname !== targetUrl.pathname) {
+      window.location.assign(targetUrl.toString());
+      return true;
+    }
+
+    const el = resolveReadingTargetById(id);
+    if (!el) return false;
+
+    suspendAutoTrack(1800);
+
+    focusReadingTarget(el, {
+      behavior: "auto",
+      extra: 12,
+      open: true,
+      highlight: true,
+      updateHash: true,
+      remember: false,
+      kind: "resume",
+    });
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        try {
+          __activeParaId = id;
+          setCurrentPara(id, "resume");
+          updateResumeButton();
+        } catch {}
+      });
+    });
+
+    return true;
+  }
+
+  function updateResumeButton() {
+  const btn = document.getElementById("resume-btn");
+  if (!btn) return;
+
+  const current = getResumeBookmark();
+
+  btn.hidden = false;
+  btn.setAttribute("href", "#");
+
+  if (!current) {
+    delete btn.dataset.resumeAnchor;
+    delete btn.dataset.resumePath;
+    delete btn.dataset.resumeKind;
+    btn.setAttribute("aria-disabled", "true");
+    btn.classList.add("is-disabled");
+    btn.title = "Aucun marque-page explicite enregistré";
+    return;
+  }
+
+  btn.dataset.resumeAnchor = current.anchor;
+  btn.dataset.resumePath = current.path || "";
+  btn.dataset.resumeKind = current.kind || "explicit-bookmark";
+  btn.setAttribute("aria-disabled", "false");
+  btn.classList.remove("is-disabled");
+  btn.title = `Reprendre : ${current.anchor}`;
+
+  if (!__resumeClickBound) {
+    __resumeClickBound = true;
+
+    btn.addEventListener("click", (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      if (btn.getAttribute("aria-disabled") === "true") return;
+
+      performResume();
+    }, { passive: false });
+  }
+}
+
   window.__archiUpdateResumeButton = updateResumeButton;
 
   if (window.location.search.includes("body=")) {
     history.replaceState(null, "", window.location.pathname + window.location.hash);
   }
 
-  // ===== legacy hash fallback (inchangé) =====
   safe("legacy-hash", () => {
     const h = window.location.hash || "";
     const m = h.match(/^#p-(\d+)-[0-9a-f]{8}$/i);
@@ -777,7 +1566,25 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
   updateResumeButton();
 
-  // ===== Jump (id / URL#id / extrait) =====
+  window.addEventListener("resize", () => {
+    suspendAutoTrack(1200);
+    updateResumeButton();
+    try { window.__archiUpdateFollow?.(); } catch {}
+  }, { passive: true });
+
+  window.addEventListener("orientationchange", () => {
+    suspendAutoTrack(2200);
+    updateResumeButton();
+
+    setTimeout(() => {
+      try { window.__archiUpdateFollow?.(); } catch {}
+    }, 250);
+
+    setTimeout(() => {
+      try { scheduleActive(); } catch {}
+    }, 1600);
+  });
+
   const jumpForm = document.getElementById("jump-form");
   const jumpInput = document.getElementById("jump-input");
 
@@ -803,6 +1610,19 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     return document.querySelector(`.reading [id^="${cssEscape(id)}"]`);
   }
 
+  function resolveReadingTargetById(id) {
+    const clean = String(id || "").replace(/^#/, "").trim();
+    if (!clean) return null;
+
+    return (
+      document.getElementById(clean) ||
+      findParaLocalByIdOrPrefix(clean) ||
+      document.querySelector(`.reading [id="${cssEscape(clean)}"]`) ||
+      document.querySelector(`.reading [id^="${cssEscape(clean)}"]`) ||
+      null
+    );
+  }
+
   function normalizeForSearch(s) {
     return String(s || "")
       .toLowerCase()
@@ -837,10 +1657,15 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     if (id) {
       const local = findParaLocalByIdOrPrefix(id);
       if (local) {
-        openDetailsIfNeeded(local);
-        scrollToElWithOffset(local, 12, "auto");
-        highlightFromTarget(local);
-        history.replaceState(null, "", `${window.location.pathname}#${local.id}`);
+        focusReadingTarget(local, {
+          behavior: "auto",
+          extra: 12,
+          open: true,
+          highlight: true,
+          updateHash: true,
+          remember: true,
+          kind: "jump",
+        });
         return true;
       }
 
@@ -869,10 +1694,15 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     for (const p of paras) {
       const t = normalizeForSearch(p.innerText || p.textContent || "");
       if (t.includes(q)) {
-        openDetailsIfNeeded(p);
-        scrollToElWithOffset(p, 12, "auto");
-        highlightFromTarget(p);
-        history.replaceState(null, "", `${window.location.pathname}#${p.id}`);
+        focusReadingTarget(p, {
+          behavior: "auto",
+          extra: 12,
+          open: true,
+          highlight: true,
+          updateHash: true,
+          remember: true,
+          kind: "jump",
+        });
         return true;
       }
     }
@@ -913,7 +1743,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     });
   });
 
-  // ===== Gitea globals (déjà posés par le boot head) =====
   const giteaReady = Boolean(window.__archiGitea && window.__archiGitea.ready);
 
   const quoteBlock = (s) =>
@@ -979,7 +1808,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     return issue.toString();
   }
 
-  // ===== Paragraph tools + pinned bookmark =====
   const parasAll = Array.from(document.querySelectorAll('.reading p[id^="p-"]'));
 
   function normalizeSpaces(s) {
@@ -1019,6 +1847,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       el.setAttribute("tabindex", "-1");
     } catch {}
   }
+
   function showEl(el) {
     try {
       el.hidden = false;
@@ -1117,20 +1946,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       bmBtn.textContent = "Marque-page";
 
       bmBtn.addEventListener("click", () => {
-        const pageUrl = new URL(window.location.href);
-        pageUrl.search = "";
-        pageUrl.hash = p.id;
-
-        writeJSON(PINNED_KEY, {
-          url: pageUrl.toString(),
-          path: pageUrl.pathname,
-          anchor: p.id,
-          title: docTitle,
-          version: docVersion,
-          ts: Date.now(),
-        });
-
-        updateResumeButton();
+        savePinnedBookmarkFromPara(p, "bookmark");
 
         const prev = bmBtn.textContent;
         bmBtn.textContent = "Marqué ✓";
@@ -1144,6 +1960,284 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     }
   });
 
+  safe("mobile-para-tools", () => {
+    if (isGlossaryEdition) return;
+    if (!reading) return;
+
+    const isMobileLike = () =>
+      window.innerWidth <= 980 ||
+      window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+
+    const menu = document.getElementById("mobile-para-menu");
+    const meta = document.getElementById("mobile-para-menu-meta");
+    const btnCopyLink = document.getElementById("mobile-para-copy-link");
+    const btnCite = document.getElementById("mobile-para-cite");
+    const btnPropose = document.getElementById("mobile-para-propose");
+    const btnBookmark = document.getElementById("mobile-para-bookmark");
+
+    if (!menu || !meta || !btnCopyLink || !btnCite || !btnBookmark) return;
+
+    let activePara = null;
+    let pressTimer = 0;
+    let pressStartX = 0;
+    let pressStartY = 0;
+    let pressPointerId = null;
+    let menuOpen = false;
+    let touchLongPressActive = false;
+
+    const LONG_PRESS_DELAY = 460;
+    const LONG_PRESS_MOVE_TOLERANCE = 18;
+
+    function isInteractiveTarget(node) {
+      const el = node?.closest?.(
+        'a, button, input, textarea, select, summary, label, [role="button"], [data-no-longpress], .para-tools, .mobile-para-menu'
+      );
+      return Boolean(el);
+    }
+
+    function clearPressTimer() {
+      if (pressTimer) {
+        clearTimeout(pressTimer);
+        pressTimer = 0;
+      }
+    }
+
+    function cancelLongPress() {
+      clearPressTimer();
+      pressPointerId = null;
+      touchLongPressActive = false;
+    }
+
+    function startLongPressForPara(p, x, y, pointerId = null) {
+      if (!p || !p.id) return;
+
+      activePara = p;
+      pressStartX = Number(x || 0);
+      pressStartY = Number(y || 0);
+      pressPointerId = pointerId;
+      touchLongPressActive = true;
+
+      clearPressTimer();
+      pressTimer = window.setTimeout(() => {
+        openMenuForPara(p);
+        clearPressTimer();
+        pressPointerId = null;
+        touchLongPressActive = false;
+      }, LONG_PRESS_DELAY);
+    }
+
+    function movedTooFar(x, y) {
+      const dx = Math.abs(Number(x || 0) - pressStartX);
+      const dy = Math.abs(Number(y || 0) - pressStartY);
+      return dx > LONG_PRESS_MOVE_TOLERANCE || dy > LONG_PRESS_MOVE_TOLERANCE;
+    }
+
+    function closeMenu() {
+      cancelLongPress();
+      menu.hidden = true;
+      menu.setAttribute("aria-hidden", "true");
+      menuOpen = false;
+      activePara = null;
+    }
+
+    function openMenuForPara(p) {
+      if (!p || !p.id) return;
+
+      activePara = p;
+      meta.textContent = p.id;
+
+      const propose = p.querySelector(".para-propose");
+      if (btnPropose) {
+        if (propose && propose.href) {
+          btnPropose.href = propose.href;
+          btnPropose.hidden = false;
+        } else {
+          btnPropose.hidden = true;
+          btnPropose.removeAttribute("href");
+        }
+      }
+
+      menu.hidden = false;
+      menu.setAttribute("aria-hidden", "false");
+      menuOpen = true;
+      __suppressReadingClickUntil = Date.now() + 700;
+
+      try {
+        __activeParaId = p.id;
+        setCurrentPara(p.id, "longpress");
+        updateResumeButton();
+      } catch {}
+    }
+
+    function copyParaLink(p) {
+      if (!p || !p.id) return Promise.resolve();
+      const u = new URL(window.location.href);
+      u.search = "";
+      u.hash = p.id;
+      return navigator.clipboard.writeText(u.toString());
+    }
+
+    function copyParaCitation(p) {
+      if (!p || !p.id) return Promise.resolve();
+      const pageUrl = new URL(window.location.href);
+      pageUrl.search = "";
+      pageUrl.hash = p.id;
+
+      const signature = `${docTitle}${docVersion ? ` (v${docVersion})` : ""} — ${pageUrl.toString()}`;
+      const paraTxt = getCleanParagraphText(p);
+      const payload = paraTxt ? `${paraTxt}\n\n${signature}` : signature;
+      return navigator.clipboard.writeText(payload);
+    }
+
+    function bookmarkPara(p) {
+      savePinnedBookmarkFromPara(p, "mobile-bookmark");
+    }
+
+    function handlePressStart(ev) {
+      if (!isMobileLike()) return;
+      if (ev.pointerType === "mouse") return;
+      if (isInteractiveTarget(ev.target)) return;
+
+      const p = ev.target?.closest?.('.reading p[id^="p-"]');
+      if (!p || !p.id) return;
+
+      startLongPressForPara(
+        p,
+        ev.clientX,
+        ev.clientY,
+        ev.pointerId ?? null
+      );
+    }
+
+    function handlePressMove(ev) {
+      if (!pressTimer) return;
+      if (pressPointerId != null && ev.pointerId != null && ev.pointerId !== pressPointerId) return;
+
+      if (movedTooFar(ev.clientX, ev.clientY)) {
+        cancelLongPress();
+      }
+    }
+
+    function handlePressEnd() {
+      cancelLongPress();
+    }
+
+    function handlePressEnd() {
+      clearPressTimer();
+      pressPointerId = null;
+    }
+
+    reading.addEventListener("pointerdown", handlePressStart, { passive: true });
+    reading.addEventListener("pointermove", handlePressMove, { passive: true });
+    reading.addEventListener("pointerup", handlePressEnd, { passive: true });
+    reading.addEventListener("pointercancel", handlePressEnd, { passive: true });
+    reading.addEventListener("pointerleave", handlePressEnd, { passive: true });
+
+    reading.addEventListener("touchstart", (ev) => {
+      if (!isMobileLike()) return;
+      if (isInteractiveTarget(ev.target)) return;
+
+      const touch = ev.changedTouches?.[0];
+      const p = ev.target?.closest?.('.reading p[id^="p-"]');
+      if (!touch || !p || !p.id) return;
+
+      startLongPressForPara(p, touch.clientX, touch.clientY, null);
+    }, { passive: true });
+
+    reading.addEventListener("touchmove", (ev) => {
+      if (!pressTimer) return;
+      const touch = ev.changedTouches?.[0];
+      if (!touch) return;
+
+      if (movedTooFar(touch.clientX, touch.clientY)) {
+        cancelLongPress();
+      }
+    }, { passive: true });
+
+    reading.addEventListener("touchend", () => {
+      cancelLongPress();
+    }, { passive: true });
+
+    reading.addEventListener("touchcancel", () => {
+      cancelLongPress();
+    }, { passive: true });
+
+    window.addEventListener("scroll", () => {
+      clearPressTimer();
+      if (menuOpen) closeMenu();
+    }, { passive: true });
+
+    document.addEventListener("scroll", () => {
+      clearPressTimer();
+      if (menuOpen) closeMenu();
+    }, { passive: true, capture: true });
+
+    document.addEventListener("click", (ev) => {
+      const p = ev.target?.closest?.('.reading p[id^="p-"]');
+
+      if (Date.now() < __suppressReadingClickUntil && p) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        return;
+      }
+
+      if (!menuOpen) return;
+
+      const insideMenu = ev.target?.closest?.("#mobile-para-menu");
+      if (insideMenu) return;
+
+      closeMenu();
+    }, { capture: true });
+
+    document.addEventListener("contextmenu", (ev) => {
+      if (!isMobileLike()) return;
+      const p = ev.target?.closest?.('.reading p[id^="p-"]');
+      if (!p) return;
+      ev.preventDefault();
+    });
+
+    document.addEventListener("keydown", (ev) => {
+      if (ev.key === "Escape" && menuOpen) {
+        closeMenu();
+      }
+    });
+
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) closeMenu();
+    });
+
+    window.addEventListener("pagehide", closeMenu);
+    window.addEventListener("blur", () => {
+      if (menuOpen) closeMenu();
+    });
+
+    btnCopyLink.addEventListener("click", async () => {
+      if (!activePara) return;
+      try { await copyParaLink(activePara); } catch {}
+      closeMenu();
+    });
+
+    btnCite.addEventListener("click", async () => {
+      if (!activePara) return;
+      try { await copyParaCitation(activePara); } catch {}
+      closeMenu();
+    });
+
+    btnBookmark.addEventListener("click", () => {
+      if (!activePara) return;
+      bookmarkPara(activePara);
+      closeMenu();
+    });
+
+    btnPropose?.addEventListener("click", () => {
+      closeMenu();
+    });
+
+    window.addEventListener("resize", () => {
+      if (!isMobileLike()) closeMenu();
+    });
+  });
+
   safe("propose-gate", () => {
     if (isGlossaryEdition) return;
     if (!giteaReady) return;
@@ -1153,7 +2247,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     p.then((ok) => {
       document.querySelectorAll(".para-propose").forEach((el) => {
         if (ok) showEl(el);
-        else hideEl(el); // ✅ jamais remove => antifragile
+        else hideEl(el);
       });
     }).catch((err) => {
       console.warn("[proposer] gate failed; keeping Proposer hidden", err);
@@ -1161,9 +2255,11 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     });
   });
 
-  // ===== Auto-checkpoint (sur paragraphe ACTIF, pas sur hover) =====
   let lastAuto = 0;
   function writeLastSeen(id) {
+    if (!id) return;
+    if (autoTrackSuspended()) return;
+
     const now = Date.now();
     if (now - lastAuto < 800) return;
     lastAuto = now;
@@ -1182,7 +2278,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     });
   }
 
-  // ===== Détection “para actif” : juste sous reading-follow (✅ fixe le mismatch SidePanel) =====
   let __activeParaId = "";
   let __hoverParaId = "";
   let __panelParaEl = null;
@@ -1211,7 +2306,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     if (window.__archiCurrentParaId === id && kind !== "hover") return;
 
     window.__archiCurrentParaId = id;
-    window.__archiLastParaId = id; // utile pour level switch
+    window.__archiLastParaId = id;
     markPanelCurrent(id);
     dispatchCurrentPara(id, kind);
   }
@@ -1224,7 +2319,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     const x = Math.round(rr.left + Math.min(140, rr.width * 0.45));
     const baseY = Math.round(getStickyOffsetPx() + 14);
-
     const ys = [baseY, baseY + 18, baseY + 36, baseY + 54, baseY + 72, baseY + 90, baseY + 108];
 
     for (const y of ys) {
@@ -1247,6 +2341,8 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
   }
 
   function recomputeActivePara() {
+    if (autoTrackSuspended()) return;
+
     const p = probeParaUnderFollow();
     const id = p?.id || "";
     if (!id) return;
@@ -1296,47 +2392,45 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     });
   });
 
-  /* ✅ NOUVEAU : clic paragraphe => snap sous reading-follow + SidePanel aligné */
   safe("click-para-align", () => {
     if (isGlossaryEdition) return;
     if (!reading) return;
 
     reading.addEventListener("click", (ev) => {
       try {
-        const t = ev.target;
+        if (Date.now() < __suppressReadingClickUntil) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          return;
+        }
 
-        // ne pas casser les boutons / liens / para-tools
+        const t = ev.target;
         if (t && t.closest && t.closest(".para-tools")) return;
+
         const a = t && t.closest ? t.closest("a") : null;
         if (a) return;
 
         const p = t && t.closest ? t.closest('.reading p[id^="p-"]') : null;
         if (!p || !p.id) return;
 
-        // si sélection texte en cours => ne pas snap
         const sel = window.getSelection ? window.getSelection() : null;
         if (sel && !sel.isCollapsed) return;
 
-        openDetailsIfNeeded(p);
-
-        // snap immédiat sous followbar
-        scrollToElWithOffset(p, 12, "auto");
-
-        // URL stable
-        history.replaceState(null, "", `${location.pathname}#${p.id}`);
-
-        // force la source de vérité (SidePanel suit via event archicratie:currentPara)
         __hoverParaId = "";
-        __activeParaId = p.id;
-        setCurrentPara(p.id, "click");
 
-        writeLastSeen(p.id);
-        updateResumeButton();
+        focusReadingTarget(p, {
+          behavior: "auto",
+          extra: 12,
+          open: true,
+          highlight: false,
+          updateHash: true,
+          remember: true,
+          kind: "click",
+        });
       } catch {}
-    }, { passive: true });
+    }, { passive: false });
   });
 
-  // ===== Hash handling (robuste) =====
   function resolveParaIdFromEl(el) {
     if (!el) return "";
     if (el.matches?.('.reading p[id^="p-"]')) return el.id;
@@ -1356,25 +2450,21 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       const clean = String(id || "").replace(/^#/, "").trim();
       if (!clean) return false;
 
-      const el = document.getElementById(clean);
+      const el = resolveReadingTargetById(clean);
       if (!el) return false;
 
-      openDetailsIfNeeded(el);
-      scrollToElWithOffset(el, 12, behavior);
-      highlightFromTarget(el);
-
-      history.replaceState(null, "", `${window.location.pathname}#${clean}`);
-
-      const pid = resolveParaIdFromEl(el);
-      if (pid) {
-        __activeParaId = pid;
-        setCurrentPara(pid, "hash");
-        writeLastSeen(pid);
-        updateResumeButton();
-      }
-
-      return true;
-    } catch { return false; }
+      return focusReadingTarget(el, {
+        behavior,
+        extra: 12,
+        open: true,
+        highlight: true,
+        updateHash: true,
+        remember: true,
+        kind: "hash",
+      });
+    } catch {
+      return false;
+    }
   }
 
   safe("hash-links", () => {
@@ -1387,7 +2477,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
       const id = href.slice(1);
       if (!id) return;
-      if (!document.getElementById(id)) return;
+      if (!resolveReadingTargetById(id)) return;
 
       ev.preventDefault();
       handleHashTarget(id, "smooth");
@@ -1398,7 +2488,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     });
   });
 
-  // ===== TOC local sync (inchangé) =====
   function isScrollable(el) {
     try {
       if (!el || !(el instanceof HTMLElement)) return false;
@@ -1453,26 +2542,150 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
   }
   window.__archiSyncTocLocal = syncTocLocal;
 
-  // ===== Reading-follow (H1/H2/H3 only) =====
+  safe("toc-auto-collapse-top-zone", () => {
+    const tocGlobal = document.querySelector("[data-toc-global]");
+    const tocLocal = document.querySelector("[data-toc-local]");
+    if (!tocGlobal && !tocLocal) return;
+
+    const mqCompact = window.matchMedia("(max-width: 980px)");
+    let raf = 0;
+
+    function setTocOpen(nav, open, emit = false) {
+      if (!nav) return;
+
+      const toggle = nav.querySelector('button[aria-controls]');
+      if (!toggle) return;
+
+      nav.classList.toggle("is-collapsed", !open);
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+
+      const key = nav.dataset.tocKey
+        ? `archicratie:${nav.dataset.tocKey || ""}`
+        : nav.classList.contains("toc-local")
+          ? `archicratie:toc-local:${window.location.pathname}`
+          : null;
+
+      if (key) {
+        try { localStorage.setItem(key, open ? "open" : "closed"); } catch {}
+      }
+
+      if (emit && open && nav.classList.contains("toc-local")) {
+        window.dispatchEvent(new CustomEvent("archicratie:tocLocalOpen"));
+      }
+    }
+
+    function nearTopZone() {
+      const y = window.scrollY || 0;
+      return y <= 120;
+    }
+
+    function syncAutoCollapse() {
+      const shouldOpen = nearTopZone();
+
+      // En desktop comme en mobile : TOC ouverts en haut, repliés dès qu’on quitte le haut.
+      setTocOpen(tocGlobal, shouldOpen, false);
+      setTocOpen(tocLocal, shouldOpen, false);
+    }
+
+    function schedule() {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        syncAutoCollapse();
+      });
+    }
+
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+
+    if (mqCompact.addEventListener) {
+      mqCompact.addEventListener("change", schedule);
+    } else if (mqCompact.addListener) {
+      mqCompact.addListener(schedule);
+    }
+
+    schedule();
+  });
+
+  safe("mobile-toc-collapse", () => {
+    const isMobile = () => window.innerWidth <= 760;
+
+    const bindToggle = (rootSel, headSel) => {
+      document.querySelectorAll(rootSel).forEach((box) => {
+        const head = box.querySelector(headSel);
+        if (!head) return;
+
+        if (!box.hasAttribute("data-mobile-collapsible-bound")) {
+          box.setAttribute("data-mobile-collapsible-bound", "1");
+
+          if (isMobile()) box.classList.remove("is-open");
+          else box.classList.add("is-open");
+
+          head.addEventListener("click", () => {
+            if (!isMobile()) return;
+            box.classList.toggle("is-open");
+          });
+        }
+      });
+    };
+
+    const syncOpenState = () => {
+      document
+        .querySelectorAll(".toc-global, .toc-local")
+        .forEach((box) => {
+          if (isMobile()) box.classList.remove("is-open");
+          else box.classList.add("is-open");
+        });
+    };
+
+    bindToggle(".toc-global", ".toc-global__head");
+    bindToggle(".toc-local", ".toc-local__head");
+    bindToggle(".toc-global", "[data-toc-global-head]");
+    bindToggle(".toc-local", "[data-toc-local-head]");
+
+    syncOpenState();
+    window.addEventListener("resize", syncOpenState, { passive: true });
+  });
+
   safe("reading-follow", () => {
     if (!reading || !followEl) return;
 
-    // Home du glossaire : le hero local gère déjà son propre follow.
-    // Le follow global doit s'effacer totalement.
-    if (isGlossaryHomeMode) {
+    const mqGlossaryCompact = window.matchMedia("(max-width: 860px)");
+    const mqGlossaryCompactLandscape = window.matchMedia(
+      "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+    );
+
+    const isGlossaryCompactViewport = () =>
+      isGlossaryEdition &&
+      (mqGlossaryCompact.matches || mqGlossaryCompactLandscape.matches);
+
+    function disableFollowForCompactGlossary() {
+      followEl.classList.remove("is-on");
+      followEl.setAttribute("aria-hidden", "true");
+      followEl.style.display = "none";
+
       if (rfH1) rfH1.hidden = true;
       if (rfH2) rfH2.hidden = true;
       if (rfH3) rfH3.hidden = true;
       if (btnTopChapter) btnTopChapter.hidden = true;
       if (btnTopSection) btnTopSection.hidden = true;
 
-      followEl.classList.remove("is-on");
-      followEl.setAttribute("aria-hidden", "true");
-      followEl.style.display = "none";
-
       setRootVar("--followbar-h", "0px");
-      setRootVar("--sticky-offset-px", String(Math.round(headerH() + PAGE_GAP)));
+      setRootVar("--sticky-offset-px", String(Math.round(headerH() + stickyGap())));
+
       syncGlossaryFollowState(false);
+
+      body.classList.remove("glossary-portal-follow-on");
+      body.classList.remove("glossary-portal-hero-condensed");
+      body.classList.remove("glossary-portal-hero-expanded");
+
+      document.documentElement.style.setProperty("--glossary-sticky-top", "0px");
+      document.documentElement.style.setProperty("--glossary-follow-height", "0px");
+      document.documentElement.style.setProperty("--glossary-local-sticky-h", "0px");
+    }
+
+    if (isGlossaryHomeMode || isGlossaryCompactViewport()) {
+      disableFollowForCompactGlossary();
       return;
     }
 
@@ -1496,13 +2709,21 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         return;
       }
 
-      if (h1) {
-        scrollToElWithOffset(h1, 12, behavior);
-      }
+      if (!h1) return;
+
+      focusReadingTarget(h1, {
+        behavior,
+        extra: 12,
+        open: true,
+        highlight: false,
+        updateHash: !!h1.id,
+        remember: true,
+        kind: "follow",
+      });
     }
 
     function getH2ScrollTarget(item) {
-      return item?.h2 || item?.anchor || item?.marker || null;
+      return item?.openTarget || item?.triggerEl || item?.anchor || item?.h2 || null;
     }
 
     const h2Anchors = Array.from(reading.querySelectorAll(".details-anchor[id]"))
@@ -1520,9 +2741,16 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
           || (sum?.textContent || "").trim()
           || "Section");
 
-        const marker = d || s;
-
-        return { id: s.id, anchor: s, marker, title, h2, details: d };
+        return {
+          id: s.id,
+          title,
+          anchor: s,
+          triggerEl: s,
+          openTarget: d || s,
+          scopeRoot: d || null,
+          h2,
+          details: d || null,
+        };
       })
       .filter(Boolean);
 
@@ -1530,15 +2758,18 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       .filter((h2) => !h2.closest("details.details-section"))
       .map((h2) => ({
         id: h2.id,
-        anchor: h2,
-        marker: h2,
         title: (h2.textContent || "").trim() || "Section",
+        anchor: h2,
+        triggerEl: h2,
+        openTarget: h2,
+        scopeRoot: null,
         h2,
+        details: null,
       }));
 
     const H2 = [...h2Anchors, ...h2Plain]
       .slice()
-      .sort((a, b) => absTop(a.marker) - absTop(b.marker));
+      .sort((a, b) => absTop(a.triggerEl) - absTop(b.triggerEl));
 
     const H3 = Array.from(reading.querySelectorAll("h3[id]"))
       .map((h3) => ({ id: h3.id, el: h3, title: (h3.textContent || "").trim() || "Sous-section" }));
@@ -1554,7 +2785,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
           ? getLocalStickyHeight()
           : 0;
 
-      return headerH() + PAGE_GAP + localH + (followH || 0) + HYST;
+      return headerH() + stickyGap() + localH + (followH || 0) + HYST;
     }
 
     function hasCrossedTop(el, lineY) {
@@ -1566,7 +2797,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     }
 
     function getH2DisplayEl(item) {
-      return item?.h2 || item?.marker || item?.anchor || null;
+      return item?.triggerEl || item?.anchor || item?.h2 || null;
     }
 
     function getH3DisplayEl(item) {
@@ -1577,22 +2808,19 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       if (!H2.length) return null;
 
       let cand = null;
+
       for (const t of H2) {
         const box = getH2DisplayEl(t);
-        if (hasCrossedBottom(box, lineY)) cand = t;
-        else break;
+        if (!box) continue;
+
+        if (box.getBoundingClientRect().top <= lineY + HYST) {
+          cand = t;
+        } else {
+          break;
+        }
       }
 
-      if (!cand) return null;
-
-      const down = (window.scrollY || 0) >= lastY;
-      if (!down && cand && curH2 && cand.id !== curH2.id) {
-        const box = getH2DisplayEl(cand);
-        const bottomNew = box ? box.getBoundingClientRect().bottom : Infinity;
-        if (bottomNew > lineY + (HYST * 2)) cand = curH2;
-      }
-
-      return cand;
+      return cand || H2[0] || null;
     }
 
     function isAfter(start, el) {
@@ -1613,41 +2841,74 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         return !(d && !d.open);
       });
 
-      const d2 = activeH2.details || activeH2.h2?.closest?.("details") || null;
-      let scoped = d2 ? visible.filter((t) => t.el.closest?.("details") === d2) : visible;
+      const scopeRoot = activeH2.scopeRoot || null;
+      let scoped = scopeRoot
+        ? visible.filter((t) => t.el.closest?.("details") === scopeRoot)
+        : visible;
 
       const i2 = H2.findIndex((t) => t.id === activeH2.id);
       const nextH2 = (i2 >= 0 && i2 + 1 < H2.length) ? H2[i2 + 1] : null;
 
-      const startNode = activeH2.anchor || activeH2.h2 || activeH2.marker;
-      const endNode = nextH2 ? (nextH2.anchor || nextH2.h2 || nextH2.marker) : null;
+      const startNode = activeH2.triggerEl || activeH2.anchor || activeH2.h2 || null;
+      const endNode = nextH2 ? (nextH2.triggerEl || nextH2.anchor || nextH2.h2 || null) : null;
 
       scoped = scoped.filter((t) => isAfter(startNode, t.el) && isBefore(endNode, t.el));
 
+      if (!scoped.length) return null;
+
       let cand = null;
       for (const t of scoped) {
         const box = getH3DisplayEl(t);
-        if (hasCrossedBottom(box, lineY)) cand = t;
-        else break;
+        if (!box) continue;
+        if (box.getBoundingClientRect().top <= lineY + HYST) {
+          cand = t;
+        } else {
+          break;
+        }
       }
 
-      return cand;
+      return cand || scoped[0] || null;
     }
 
     function maybeOpenActiveSection(activeH2, lineY) {
       if (!activeH2 || !activeH2.id) return;
 
-      const pre = hasCrossedTop(activeH2.marker, lineY + 140);
+      const triggerEl = activeH2.triggerEl || activeH2.anchor || null;
+      const openTarget = activeH2.openTarget || null;
+
+      if (!triggerEl || !openTarget) return;
+
+      const pre = hasCrossedTop(triggerEl, lineY + 140);
       if (!pre) return;
 
       if (activeH2.id !== lastOpenedH2) {
         lastOpenedH2 = activeH2.id;
-        openDetailsIfNeeded(activeH2.anchor || activeH2.h2 || activeH2.marker);
+        openDetailsIfNeeded(openTarget);
+      }
+    }
+
+    function maybePreopenNextSection(activeH2) {
+      if (!activeH2) return;
+
+      const i = H2.findIndex((t) => t.id === activeH2.id);
+      if (i < 0 || i + 1 >= H2.length) return;
+
+      const nextH2 = H2[i + 1];
+      const triggerEl = nextH2?.triggerEl || null;
+      const openTarget = nextH2?.openTarget || null;
+
+      if (!triggerEl || !openTarget) return;
+
+      const preloadDistance = 220;
+      const viewportBottom = window.innerHeight || document.documentElement.clientHeight || 0;
+      const top = triggerEl.getBoundingClientRect().top;
+
+      if (top <= viewportBottom + preloadDistance) {
+        openDetailsIfNeeded(openTarget);
       }
     }
 
     function renderPass(lineY) {
-      // Pour le glossaire, on évite le doublon du H1 dans la barre flottante.
       const showH1 =
         !isGlossaryEdition &&
         !!(h1 && h1.getBoundingClientRect().bottom <= (lineY - HYST));
@@ -1659,6 +2920,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
       const nextH2 = pickH2(lineY);
       maybeOpenActiveSection(nextH2, lineY);
+      maybePreopenNextSection(nextH2);
 
       const nextH3 = pickH3(lineY, nextH2);
 
@@ -1697,6 +2959,11 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     }
 
     function updateFollow() {
+      if (isGlossaryCompactViewport()) {
+        disableFollowForCompactGlossary();
+        return;
+      }
+
       followEl.style.display = "";
       syncFollowTop();
 
@@ -1723,8 +2990,10 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
           ? getLocalStickyHeight()
           : 0;
 
+      const occupiedTop = headerH() + stickyGap() + localH + followH;
+
       setRootVar("--followbar-h", px(followH));
-      setRootVar("--sticky-offset-px", String(Math.round(headerH() + PAGE_GAP + localH + followH)));
+      setRootVar("--sticky-offset-px", String(Math.round(occupiedTop)));
       syncGlossaryFollowState(followEl.classList.contains("is-on") && followH > 0);
 
       if (btnTopChapter) {
@@ -1760,9 +3029,38 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     window.addEventListener("scroll", onScroll, { passive: true });
     window.addEventListener("resize", onScroll);
 
+    const onCompactChange = () => {
+      if (isGlossaryCompactViewport()) {
+        disableFollowForCompactGlossary();
+      } else {
+        updateFollow();
+      }
+    };
+
+    if (mqGlossaryCompact.addEventListener) {
+      mqGlossaryCompact.addEventListener("change", onCompactChange);
+    } else if (mqGlossaryCompact.addListener) {
+      mqGlossaryCompact.addListener(onCompactChange);
+    }
+
+    if (mqGlossaryCompactLandscape.addEventListener) {
+      mqGlossaryCompactLandscape.addEventListener("change", onCompactChange);
+    } else if (mqGlossaryCompactLandscape.addListener) {
+      mqGlossaryCompactLandscape.addListener(onCompactChange);
+    }
+
     if (rfH1) {
       rfH1.addEventListener("click", () => {
-        if (h1) scrollToElWithOffset(h1, 12, "smooth");
+        if (!h1) return;
+        focusReadingTarget(h1, {
+          behavior: "smooth",
+          extra: 12,
+          open: true,
+          highlight: false,
+          updateHash: !!h1.id,
+          remember: true,
+          kind: "follow",
+        });
       });
     }
 
@@ -1770,20 +3068,35 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       rfH2.addEventListener("click", () => {
         if (!curH2) return;
         const target = getH2ScrollTarget(curH2);
+        const hashTarget = curH2.triggerEl || curH2.anchor || curH2.h2 || target;
         if (!target) return;
 
-        openDetailsIfNeeded(target);
-        scrollToElWithOffset(target, 12, "smooth");
-        history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
+        focusReadingTarget(target, {
+          behavior: "smooth",
+          extra: 12,
+          open: true,
+          highlight: false,
+          updateHash: true,
+          hashTarget,
+          remember: true,
+          kind: "follow",
+        });
       });
     }
 
     if (rfH3) {
       rfH3.addEventListener("click", () => {
         if (!curH3) return;
-        openDetailsIfNeeded(curH3.el);
-        scrollToElWithOffset(curH3.el, 12, "smooth");
-        history.replaceState(null, "", `${window.location.pathname}#${curH3.id}`);
+
+        focusReadingTarget(curH3.el, {
+          behavior: "smooth",
+          extra: 12,
+          open: true,
+          highlight: false,
+          updateHash: true,
+          remember: true,
+          kind: "follow",
+        });
       });
     }
 
@@ -1797,11 +3110,19 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       btnTopSection.addEventListener("click", () => {
         if (!curH2) return;
         const target = getH2ScrollTarget(curH2);
+        const hashTarget = curH2.triggerEl || curH2.anchor || curH2.h2 || target;
         if (!target) return;
 
-        openDetailsIfNeeded(target);
-        scrollToElWithOffset(target, 12, "smooth");
-        history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
+        focusReadingTarget(target, {
+          behavior: "smooth",
+          extra: 12,
+          open: true,
+          highlight: false,
+          updateHash: true,
+          hashTarget,
+          remember: true,
+          kind: "follow",
+        });
       });
     }
 
@@ -1809,79 +3130,23 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     const initialHash = (location.hash || "").slice(1);
     if (initialHash) {
-      const el = document.getElementById(initialHash);
+      const el = resolveReadingTargetById(initialHash);
       if (el) {
-        openDetailsIfNeeded(el);
         setTimeout(() => {
-          scrollToElWithOffset(el, 12, "auto");
-          highlightFromTarget(el);
+          focusReadingTarget(el, {
+            behavior: "auto",
+            extra: 12,
+            open: true,
+            highlight: true,
+            updateHash: true,
+            remember: true,
+            kind: "hash",
+          });
           scheduleActive();
         }, 0);
       }
     }
   });
-
-  // ✅ Reflow sync : resize + changement de niveau (restaure le même paragraphe)
-  function afterReflow(fn) {
-    requestAnimationFrame(() => requestAnimationFrame(fn));
-  }
-
-  safe("reflow-sync", () => {
-    window.addEventListener("resize", () => {
-      afterReflow(() => {
-        syncHeaderH(); syncReadingRect(); syncHeadingMetrics();
-        syncFollowTop();
-        try { window.__archiUpdateFollow?.(); } catch {}
-        scheduleActive();
-      });
-    });
-
-    window.addEventListener("archicratie:readingLevel", () => {
-      afterReflow(() => {
-        syncHeaderH(); syncReadingRect(); syncHeadingMetrics();
-        syncFollowTop();
-        try { window.__archiUpdateFollow?.(); } catch {}
-
-        const ctx = window.__archiLevelSwitchCtx || null;
-        const want =
-          (ctx && ctx.paraId) ||
-          window.__archiCurrentParaId ||
-          __activeParaId ||
-          window.__archiLastParaId ||
-          String(location.hash || "").replace(/^#/, "");
-
-        if (want) {
-          const el = document.getElementById(want);
-          if (el) {
-            openDetailsIfNeeded(el);
-            scrollToElWithOffset(el, 12, "auto");
-            highlightFromTarget(el);
-            history.replaceState(null, "", `${location.pathname}#${want}`);
-            __activeParaId = want;
-            setCurrentPara(want, "level");
-          } else if (ctx && Number.isFinite(ctx.scrollY)) {
-            window.scrollTo({ top: ctx.scrollY, behavior: "auto" });
-          }
-        }
-
-        scheduleActive();
-      });
-    });
-  });
-
-  // ===== Auto-unfold <details> (robuste) =====
-  safe("details-autounfold", () => {
-    if (!reading) return;
-
-    const sections = Array.from(reading.querySelectorAll("details.details-section"));
-    if (!sections.length) return;
-
-    // ✅ Lecture continue : tout ouvert, plus d’accordéon
-    for (const d of sections) d.open = true;
-
-    try { window.__archiUpdateFollow?.(); } catch {}
-    scheduleActive();
-  });
 })();
     </script>
   </body>
diff --git a/src/layouts/GlossaryLayout.astro b/src/layouts/GlossaryLayout.astro
index c12a819..ed060f4 100644
--- a/src/layouts/GlossaryLayout.astro
+++ b/src/layouts/GlossaryLayout.astro
@@ -26,6 +26,10 @@ const {
 </EditionLayout>
 
 <style is:global>
+  /* =========================================================
+     FICHES GLOSSAIRE — état normal
+     ========================================================= */
+
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
     --entry-hero-pad-top: 18px;
     --entry-hero-pad-x: 18px;
@@ -58,38 +62,82 @@ const {
     --entry-hero-meta-opacity: 0;
   }
 
+  /* =========================================================
+     PORTAILS GLOSSAIRE — socle premium desktop
+     ========================================================= */
+
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
-    --portal-hero-pad-top: 18px;
+    /* hero : état plein */
+    --portal-hero-margin-bottom: 28px;
+
+    --portal-hero-pad-top: 20px;
     --portal-hero-pad-x: 18px;
-    --portal-hero-pad-bottom: 20px;
-    --portal-hero-gap: 14px;
+    --portal-hero-pad-bottom: 22px;
+    --portal-hero-gap: 16px;
 
-    --portal-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);
+    --portal-kicker-size: 12px;
+    --portal-kicker-lh: 1.2;
+    --portal-kicker-spacing: .14em;
 
-    --portal-hero-intro-size: 1.04rem;
-    --portal-hero-intro-lh: 1.55;
-    --portal-hero-intro-maxw: 76ch;
+    --portal-hero-h1-size: clamp(3rem, 4.8vw, 4.15rem);
+    --portal-hero-h1-lh: .98;
+    --portal-hero-h1-spacing: -.045em;
 
+    --portal-hero-intro-size: 1.06rem;
+    --portal-hero-intro-lh: 1.6;
+    --portal-hero-intro-maxw: 70ch;
+
+    --portal-hero-follow-intro-max-w: 62ch;
     --portal-hero-secondary-max-h: 20em;
-    --portal-hero-secondary-opacity: .94;
-  }
-
-  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on{
-    --portal-hero-pad-top: 12px;
-    --portal-hero-pad-x: 16px;
-    --portal-hero-pad-bottom: 14px;
-    --portal-hero-gap: 8px;
-
-    --portal-hero-h1-size: clamp(1.95rem, 3.3vw, 2.6rem);
-
-    --portal-hero-intro-size: .98rem;
-    --portal-hero-intro-lh: 1.46;
-    --portal-hero-intro-maxw: 68ch;
-
-    --portal-hero-secondary-max-h: 4.6em;
-    --portal-hero-secondary-opacity: .82;
+    --portal-hero-secondary-opacity: .92;
+
+    /* hero : état condensé */
+    --portal-hero-pad-top-condensed: 14px;
+    --portal-hero-pad-x-condensed: 16px;
+    --portal-hero-pad-bottom-condensed: 16px;
+    --portal-hero-gap-condensed: 10px;
+
+    --portal-hero-h1-size-condensed: clamp(2.05rem, 3.15vw, 2.7rem);
+    --portal-hero-h1-lh-condensed: 1;
+    --portal-hero-h1-spacing-condensed: -.04em;
+
+    --portal-hero-intro-size-condensed: .98rem;
+    --portal-hero-intro-lh-condensed: 1.46;
+
+    /* rythme vertical */
+    --portal-page-pad-top: 8px;
+    --portal-page-pad-bottom: 24px;
+
+    --portal-block-gap: 20px;
+    --portal-grid-gap: 14px;
+
+    /* cartes / panels */
+    --portal-card-pad-y: 14px;
+    --portal-card-pad-x: 16px;
+    --portal-card-radius: 16px;
+
+    --portal-panel-pad-y: 16px;
+    --portal-panel-pad-x: 16px;
+    --portal-panel-radius: 18px;
+
+    --portal-focus-pad-y: 18px;
+    --portal-focus-pad-x: 20px;
+    --portal-focus-radius: 18px;
+
+    /* typo locale */
+    --portal-body-size: 1rem;
+    --portal-body-lh: 1.55;
+
+    --portal-card-title-size: 15px;
+    --portal-card-text-size: 14px;
+    --portal-card-text-lh: 1.45;
+    --portal-card-meta-size: 12px;
+
+    --portal-local-h3-size: clamp(1.35rem, 2vw, 1.7rem);
+    --portal-local-h3-lh: 1.15;
   }
 
+  /* transition commune */
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .scene-hero,
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-portal-hero,
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-page-hero{
@@ -97,18 +145,298 @@ const {
       border-radius 180ms ease,
       padding 180ms ease,
       row-gap 180ms ease,
-      margin-bottom 180ms ease;
+      margin-bottom 180ms ease,
+      box-shadow 180ms ease;
   }
 
-  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .scene-hero,
-  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .glossary-portal-hero,
-  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .glossary-page-hero{
+  /* raccord premium hero + follow */
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-portal-follow-on .scene-hero,
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-portal-follow-on .glossary-portal-hero,
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-portal-follow-on .glossary-page-hero{
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
 
-  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on #reading-follow .reading-follow__inner{
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-portal-follow-on #reading-follow .reading-follow__inner{
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    margin-top: -1px;
+  }
+
+  /* =========================================================
+     TABLETTE / INTERMÉDIAIRE
+     ========================================================= */
+
+  @media (max-width: 980px){
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
+      --portal-hero-margin-bottom: 22px;
+
+      --portal-hero-pad-top: 18px;
+      --portal-hero-pad-x: 16px;
+      --portal-hero-pad-bottom: 18px;
+      --portal-hero-gap: 14px;
+
+      --portal-hero-h1-size: clamp(2.45rem, 4.4vw, 3.25rem);
+      --portal-hero-h1-lh: .99;
+      --portal-hero-h1-spacing: -.04em;
+
+      --portal-hero-intro-size: 1rem;
+      --portal-hero-intro-lh: 1.5;
+      --portal-hero-intro-maxw: 68ch;
+
+      --portal-hero-pad-top-condensed: 13px;
+      --portal-hero-pad-x-condensed: 14px;
+      --portal-hero-pad-bottom-condensed: 14px;
+      --portal-hero-gap-condensed: 9px;
+
+      --portal-hero-h1-size-condensed: clamp(1.88rem, 3vw, 2.35rem);
+      --portal-hero-h1-lh-condensed: 1;
+      --portal-hero-intro-size-condensed: .95rem;
+      --portal-hero-intro-lh-condensed: 1.42;
+
+      --portal-page-pad-top: 6px;
+      --portal-page-pad-bottom: 20px;
+
+      --portal-block-gap: 17px;
+      --portal-grid-gap: 11px;
+
+      --portal-card-pad-y: 13px;
+      --portal-card-pad-x: 14px;
+      --portal-card-radius: 15px;
+
+      --portal-panel-pad-y: 14px;
+      --portal-panel-pad-x: 14px;
+      --portal-panel-radius: 16px;
+
+      --portal-focus-pad-y: 16px;
+      --portal-focus-pad-x: 16px;
+      --portal-focus-radius: 16px;
+
+      --portal-body-size: .96rem;
+      --portal-body-lh: 1.46;
+
+      --portal-card-title-size: 14px;
+      --portal-card-text-size: 13px;
+      --portal-card-text-lh: 1.4;
+      --portal-card-meta-size: 11.5px;
+
+      --portal-local-h3-size: clamp(1.18rem, 2.2vw, 1.42rem);
+      --portal-local-h3-lh: 1.14;
+    }
+  }
+
+  /* =========================================================
+     MOBILE
+     ========================================================= */
+
+  @media (max-width: 860px){
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
+      --entry-hero-pad-top: 12px;
+      --entry-hero-pad-x: 12px;
+      --entry-hero-pad-bottom: 12px;
+      --entry-hero-gap: 9px;
+
+      --entry-hero-h1-size: clamp(1.55rem, 7vw, 2rem);
+
+      --entry-hero-dek-size: .95rem;
+      --entry-hero-dek-lh: 1.42;
+      --entry-hero-dek-maxw: 100%;
+
+      --entry-hero-meta-max-h: 0px;
+      --entry-hero-meta-opacity: 0;
+    }
+
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"].glossary-entry-follow-on{
+      --entry-hero-pad-top: 8px;
+      --entry-hero-pad-x: 10px;
+      --entry-hero-pad-bottom: 8px;
+      --entry-hero-gap: 6px;
+
+      --entry-hero-h1-size: clamp(1.15rem, 5.2vw, 1.35rem);
+
+      --entry-hero-dek-size: .82rem;
+      --entry-hero-dek-lh: 1.25;
+      --entry-hero-dek-maxw: 100%;
+
+      --entry-hero-meta-max-h: 0px;
+      --entry-hero-meta-opacity: 0;
+    }
+  }
+
+  @media (max-width: 760px){
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
+      --portal-hero-margin-bottom: 18px;
+
+      --portal-hero-pad-top: 12px;
+      --portal-hero-pad-x: 12px;
+      --portal-hero-pad-bottom: 12px;
+      --portal-hero-gap: 8px;
+
+      --portal-kicker-size: 11px;
+      --portal-kicker-lh: 1.18;
+      --portal-kicker-spacing: .12em;
+
+      --portal-hero-h1-size: clamp(1.72rem, 7vw, 2.08rem);
+      --portal-hero-h1-lh: 1.01;
+      --portal-hero-h1-spacing: -.03em;
+
+      --portal-hero-intro-size: .95rem;
+      --portal-hero-intro-lh: 1.4;
+      --portal-hero-intro-maxw: 100%;
+      --portal-hero-follow-intro-max-w: 100%;
+
+      --portal-hero-secondary-max-h: none;
+      --portal-hero-secondary-opacity: 1;
+
+      /* valeurs condensées mobiles dédiées */
+      --portal-hero-pad-top-condensed: 10px;
+      --portal-hero-pad-x-condensed: 12px;
+      --portal-hero-pad-bottom-condensed: 10px;
+      --portal-hero-gap-condensed: 7px;
+
+      --portal-hero-h1-size-condensed: clamp(1.42rem, 5.8vw, 1.8rem);
+      --portal-hero-h1-lh-condensed: 1.02;
+      --portal-hero-h1-spacing-condensed: -.028em;
+
+      --portal-hero-intro-size-condensed: .88rem;
+      --portal-hero-intro-lh-condensed: 1.3;
+
+      --portal-page-pad-top: 4px;
+      --portal-page-pad-bottom: 16px;
+
+      --portal-block-gap: 14px;
+      --portal-grid-gap: 9px;
+
+      --portal-card-pad-y: 12px;
+      --portal-card-pad-x: 12px;
+      --portal-card-radius: 14px;
+
+      --portal-panel-pad-y: 12px;
+      --portal-panel-pad-x: 12px;
+      --portal-panel-radius: 14px;
+
+      --portal-focus-pad-y: 13px;
+      --portal-focus-pad-x: 13px;
+      --portal-focus-radius: 14px;
+
+      --portal-body-size: .9rem;
+      --portal-body-lh: 1.34;
+
+      --portal-card-title-size: 13.5px;
+      --portal-card-text-size: 12.5px;
+      --portal-card-text-lh: 1.34;
+      --portal-card-meta-size: 11px;
+
+      --portal-local-h3-size: clamp(1.02rem, 4.8vw, 1.2rem);
+      --portal-local-h3-lh: 1.12;
+    }
+  }
+
+  @media (max-width: 520px){
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
+      --entry-hero-pad-top: 10px;
+      --entry-hero-pad-x: 10px;
+      --entry-hero-pad-bottom: 10px;
+      --entry-hero-gap: 8px;
+    }
+
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"].glossary-entry-follow-on{
+      --entry-hero-pad-top: 7px;
+      --entry-hero-pad-x: 8px;
+      --entry-hero-pad-bottom: 7px;
+      --entry-hero-gap: 5px;
+    }
+
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
+      --portal-hero-margin-bottom: 16px;
+
+      --portal-hero-pad-top: 10px;
+      --portal-hero-pad-x: 10px;
+      --portal-hero-pad-bottom: 10px;
+      --portal-hero-gap: 7px;
+
+      --portal-hero-pad-top-condensed: 8px;
+      --portal-hero-pad-x-condensed: 8px;
+      --portal-hero-pad-bottom-condensed: 8px;
+      --portal-hero-gap-condensed: 5px;
+    }
+
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on #reading-follow .reading-follow__inner{
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      margin-top: -1px;
+    }
+  }
+
+  /* =========================================================
+     PAYSAGE COMPACT
+     ========================================================= */
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
+      --portal-hero-margin-bottom: 12px;
+
+      --portal-hero-pad-top: 10px;
+      --portal-hero-pad-x: 10px;
+      --portal-hero-pad-bottom: 10px;
+      --portal-hero-gap: 6px;
+
+      --portal-kicker-size: 10px;
+      --portal-kicker-lh: 1.14;
+      --portal-kicker-spacing: .1em;
+
+      --portal-hero-h1-size: clamp(1.24rem, 4vw, 1.52rem);
+      --portal-hero-h1-lh: 1.02;
+      --portal-hero-h1-spacing: -.022em;
+
+      --portal-hero-intro-size: .82rem;
+      --portal-hero-intro-lh: 1.24;
+      --portal-hero-intro-maxw: 100%;
+      --portal-hero-follow-intro-max-w: 100%;
+
+      --portal-hero-secondary-max-h: none;
+      --portal-hero-secondary-opacity: 1;
+
+      --portal-hero-pad-top-condensed: 8px;
+      --portal-hero-pad-x-condensed: 10px;
+      --portal-hero-pad-bottom-condensed: 8px;
+      --portal-hero-gap-condensed: 5px;
+
+      --portal-hero-h1-size-condensed: clamp(1.08rem, 3.4vw, 1.28rem);
+      --portal-hero-h1-lh-condensed: 1.02;
+      --portal-hero-h1-spacing-condensed: -.018em;
+
+      --portal-hero-intro-size-condensed: .76rem;
+      --portal-hero-intro-lh-condensed: 1.18;
+
+      --portal-page-pad-top: 2px;
+      --portal-page-pad-bottom: 12px;
+
+      --portal-block-gap: 10px;
+      --portal-grid-gap: 8px;
+
+      --portal-card-pad-y: 10px;
+      --portal-card-pad-x: 10px;
+      --portal-card-radius: 12px;
+
+      --portal-panel-pad-y: 10px;
+      --portal-panel-pad-x: 10px;
+      --portal-panel-radius: 12px;
+
+      --portal-focus-pad-y: 10px;
+      --portal-focus-pad-x: 10px;
+      --portal-focus-radius: 12px;
+
+      --portal-body-size: .82rem;
+      --portal-body-lh: 1.24;
+
+      --portal-card-title-size: 12.5px;
+      --portal-card-text-size: 11.5px;
+      --portal-card-text-lh: 1.24;
+      --portal-card-meta-size: 10.5px;
+
+      --portal-local-h3-size: clamp(.96rem, 3.2vw, 1.08rem);
+      --portal-local-h3-lh: 1.1;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/archicrations.astro b/src/pages/glossaire/archicrations.astro
index 26d3131..2c5f467 100644
--- a/src/pages/glossaire/archicrations.astro
+++ b/src/pages/glossaire/archicrations.astro
@@ -219,6 +219,80 @@ const prolongerLinks = [
     heroMoreId="archi-hero-more"
     heroToggleId="archi-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
@@ -278,4 +352,50 @@ const prolongerLinks = [
       background: rgba(255,255,255,0.07);
     }
   }
+
+  @media (max-width: 760px){
+    .archi-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .archi-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/concepts-fondamentaux.astro b/src/pages/glossaire/concepts-fondamentaux.astro
index ba70ed0..756376d 100644
--- a/src/pages/glossaire/concepts-fondamentaux.astro
+++ b/src/pages/glossaire/concepts-fondamentaux.astro
@@ -91,7 +91,7 @@ const pageItems = [
   { href: "#six-concepts", label: "Les six concepts cardinaux" },
   { href: "#distinctions-decisives", label: "Distinctions décisives" },
   { href: "#ordre-lecture", label: "Ordre conseillé de lecture" },
-  { href: "#prolonger-lecture", label: "Prolonger la lecture" },
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
 ];
 
 const usefulLinks = [
@@ -333,22 +333,36 @@ const prolongerLinks = [
 
 <style>
   .cf-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
+  }
+
+  .cf-page,
+  .cf-map,
+  .cf-map__stage,
+  .cf-map__roots,
+  .cf-cards,
+  .cf-comparisons,
+  .cf-steps,
+  .cf-card,
+  .cf-step{
+    min-width: 0;
   }
 
   .cf-map{
     display: grid;
     justify-items: center;
-    gap: 10px;
-    margin-top: 14px;
-    padding: 16px 18px 18px;
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 18px;
-    background: rgba(127,127,127,0.05);
+    gap: var(--portal-block-gap, 18px);
+    margin-top: 12px;
+    padding:
+      var(--portal-focus-pad-y, 18px)
+      var(--portal-focus-pad-x, 20px);
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: var(--portal-focus-radius, 18px);
+    background: rgba(127,127,127,0.04);
   }
 
   .cf-map__stage{
-    width: min(580px, 100%);
+    width: min(610px, 100%);
     display: grid;
     justify-items: center;
     gap: 10px;
@@ -357,41 +371,47 @@ const prolongerLinks = [
   .cf-map__title{
     width: 100%;
     text-align: center;
-    font-size: 1.02rem;
-    line-height: 1.25;
-    font-weight: 800;
-    letter-spacing: -.01em;
+    font-size: clamp(1rem, 1.35vw, 1.12rem);
+    line-height: 1.2;
+    font-weight: 790;
+    letter-spacing: -.012em;
     opacity: .96;
+    text-wrap: balance;
   }
 
   .cf-map__roots{
     width: 100%;
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
+    gap: var(--portal-grid-gap, 12px);
   }
 
   .cf-node{
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 48px;
+    min-height: 50px;
     padding: 10px 14px;
     border: 1px solid rgba(127,127,127,0.24);
     border-radius: 999px;
     background: rgba(127,127,127,0.05);
+    color: var(--glossary-accent, #00d9ff);
     text-decoration: none;
     text-align: center;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .05em;
-    line-height: 1.2;
-    transition: transform 120ms ease, background 120ms ease;
+    line-height: 1.18;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .cf-node:hover{
     transform: translateY(-1px);
     background: rgba(127,127,127,0.08);
+    border-color: rgba(0,217,255,0.18);
     text-decoration: none;
   }
 
@@ -401,29 +421,34 @@ const prolongerLinks = [
   }
 
   .cf-map__arrow{
-    font-size: 18px;
+    font-size: 1.45rem;
     line-height: 1;
-    opacity: .65;
+    opacity: .68;
   }
 
   .cf-cards,
   .cf-comparisons{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 12px;
-    margin-top: 14px;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--portal-grid-gap, 12px);
+    margin-top: 12px;
   }
 
   .cf-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding:
+      var(--portal-card-pad-y, 14px)
+      var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .cf-card:hover{
@@ -434,20 +459,21 @@ const prolongerLinks = [
   }
 
   .cf-card strong{
-    font-size: 15px;
-    line-height: 1.3;
+    font-size: var(--portal-card-title-size, 15px);
+    line-height: 1.26;
+    color: var(--glossary-accent, #00d9ff);
   }
 
   .cf-card span{
-    font-size: 14px;
-    line-height: 1.45;
-    opacity: .92;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
+    opacity: .93;
   }
 
   .cf-card small{
-    font-size: 12px;
-    line-height: 1.4;
-    opacity: .72;
+    font-size: var(--portal-card-meta-size, 12px);
+    line-height: 1.35;
+    opacity: .74;
   }
 
   .cf-card--text{
@@ -461,7 +487,7 @@ const prolongerLinks = [
   .cf-steps{
     display: grid;
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .cf-step{
@@ -469,9 +495,11 @@ const prolongerLinks = [
     grid-template-columns: 64px minmax(0, 1fr);
     gap: 14px;
     align-items: start;
-    padding: 14px 16px;
+    padding:
+      var(--portal-panel-pad-y, 16px)
+      var(--portal-panel-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-panel-radius, 18px);
     background: rgba(127,127,127,0.05);
   }
 
@@ -480,6 +508,7 @@ const prolongerLinks = [
     align-items: center;
     justify-content: center;
     min-height: 44px;
+    min-width: 44px;
     border: 1px solid rgba(127,127,127,0.28);
     border-radius: 999px;
     font-size: 13px;
@@ -489,29 +518,224 @@ const prolongerLinks = [
 
   .cf-step__body h3{
     margin: 0;
-    font-size: 15px;
-    line-height: 1.3;
+    font-size: var(--portal-card-title-size, 15px);
+    line-height: 1.28;
   }
 
   .cf-step__body p{
     margin: 8px 0 0;
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
-  @media (max-width: 720px){
+  @media (max-width: 980px){
+    .cf-map{
+      margin-top: 10px;
+    }
+
+    .cf-map__stage{
+      width: 100%;
+      gap: 9px;
+    }
+
+    .cf-map__title{
+      font-size: 1rem;
+      line-height: 1.18;
+    }
+
+    .cf-node{
+      min-height: 46px;
+      font-size: 12.5px;
+      line-height: 1.16;
+    }
+
+    .cf-cards,
+    .cf-comparisons{
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    }
+  }
+
+  @media (max-width: 760px){
+    .cf-page{
+      padding-top: 2px;
+    }
+
+    .cf-map{
+      gap: 12px;
+      margin-top: 10px;
+      padding: 13px 13px 14px;
+      border-radius: 14px;
+    }
+
+    .cf-map__stage{
+      gap: 7px;
+    }
+
+    .cf-map__title{
+      font-size: .9rem;
+      line-height: 1.16;
+    }
+
     .cf-map__roots{
       grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    .cf-node{
+      min-height: 40px;
+      padding: 8px 10px;
+      font-size: .83rem;
+      line-height: 1.12;
+      letter-spacing: .04em;
+    }
+
+    .cf-map__arrow{
+      font-size: 1rem;
+      opacity: .62;
+    }
+
+    .cf-cards,
+    .cf-comparisons{
+      grid-template-columns: 1fr;
+      gap: 9px;
+      margin-top: 10px;
+    }
+
+    .cf-card{
+      gap: 6px;
+      padding: 12px 12px;
+      border-radius: 14px;
+    }
+
+    .cf-card strong{
+      font-size: 13.5px;
+      line-height: 1.22;
+    }
+
+    .cf-card span{
+      font-size: 12.5px;
+      line-height: 1.34;
+    }
+
+    .cf-steps{
+      gap: 9px;
+      margin-top: 10px;
     }
 
     .cf-step{
       grid-template-columns: 1fr;
+      gap: 10px;
+      padding: 12px 12px;
+      border-radius: 14px;
     }
 
     .cf-step__num{
       width: fit-content;
-      min-width: 64px;
+      min-width: 58px;
+      min-height: 36px;
+      font-size: 12px;
+    }
+
+    .cf-step__body h3{
+      font-size: 13.5px;
+      line-height: 1.22;
+    }
+
+    .cf-step__body p{
+      margin-top: 6px;
+      font-size: 12.5px;
+      line-height: 1.34;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .cf-page{
+      padding-top: 0;
+    }
+
+    .cf-map{
+      gap: 8px;
+      margin-top: 8px;
+      padding: 10px 10px 12px;
+      border-radius: 12px;
+    }
+
+    .cf-map__stage{
+      gap: 5px;
+    }
+
+    .cf-map__title{
+      font-size: .8rem;
+      line-height: 1.12;
+    }
+
+    .cf-map__roots{
+      grid-template-columns: 1fr;
+      gap: 6px;
+    }
+
+    .cf-node{
+      min-height: 32px;
+      padding: 6px 8px;
+      font-size: .74rem;
+      line-height: 1.08;
+    }
+
+    .cf-map__arrow{
+      font-size: .92rem;
+    }
+
+    .cf-cards,
+    .cf-comparisons{
+      grid-template-columns: 1fr;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .cf-card{
+      gap: 5px;
+      padding: 9px 10px;
+      border-radius: 12px;
+    }
+
+    .cf-card strong{
+      font-size: 12.5px;
+      line-height: 1.18;
+    }
+
+    .cf-card span{
+      font-size: 11.5px;
+      line-height: 1.24;
+    }
+
+    .cf-steps{
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .cf-step{
+      grid-template-columns: 1fr;
+      gap: 8px;
+      padding: 9px 10px;
+      border-radius: 12px;
+    }
+
+    .cf-step__num{
+      min-width: 52px;
+      min-height: 30px;
+      font-size: 11px;
+    }
+
+    .cf-step__body h3{
+      font-size: 12.5px;
+      line-height: 1.18;
+    }
+
+    .cf-step__body p{
+      margin-top: 5px;
+      font-size: 11.5px;
+      line-height: 1.22;
     }
   }
 
diff --git a/src/pages/glossaire/dynamiques-archicratiques.astro b/src/pages/glossaire/dynamiques-archicratiques.astro
index b807cfa..40b7df5 100644
--- a/src/pages/glossaire/dynamiques-archicratiques.astro
+++ b/src/pages/glossaire/dynamiques-archicratiques.astro
@@ -336,11 +336,84 @@ const prolongerLinks = [
     heroMoreId="dyna-hero-more"
     heroToggleId="dyna-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
   .dyna-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
   .dyna-focus-grid{
@@ -351,9 +424,9 @@ const prolongerLinks = [
   }
 
   .dyna-focus-card{
-    padding: 18px 20px;
+    padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 18px;
+    border-radius: var(--portal-focus-radius, 18px);
     background: rgba(127,127,127,0.05);
   }
 
@@ -368,8 +441,8 @@ const prolongerLinks = [
 
   .dyna-focus-card h3{
     margin: 0 0 10px;
-    font-size: clamp(1.35rem, 2vw, 1.7rem);
-    line-height: 1.15;
+    font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
+    line-height: var(--portal-local-h3-lh, 1.15);
   }
 
   .dyna-focus-card h3 a{
@@ -410,18 +483,18 @@ const prolongerLinks = [
 
   .dyna-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .dyna-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     text-decoration: none;
     transition:
@@ -438,18 +511,18 @@ const prolongerLinks = [
   }
 
   .dyna-card strong{
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .dyna-card span{
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
   .dyna-card small{
-    font-size: 12px;
+    font-size: var(--portal-card-meta-size, 12px);
     line-height: 1.4;
     opacity: .72;
   }
@@ -478,4 +551,50 @@ const prolongerLinks = [
       background: rgba(255,255,255,0.07);
     }
   }
+
+  @media (max-width: 760px){
+    .dyna-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .dyna-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/index-complet.astro b/src/pages/glossaire/index-complet.astro
index f6ef194..a2a4649 100644
--- a/src/pages/glossaire/index-complet.astro
+++ b/src/pages/glossaire/index-complet.astro
@@ -252,6 +252,9 @@ const prolongerLinks = [
         const LETTERS_DOCKED_CLASS = "gic-letters-docked";
         const ACTIVE_CLASS = "is-active";
         const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
         const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
         const EXTRA_GAP = 12;
         const MAX_CORRECTION_PASSES = 8;
@@ -262,8 +265,30 @@ const prolongerLinks = [
 
         body.classList.add(BODY_CLASS);
 
+        const forceHideGlobalFollowOnCompactViewport = () => {
+          if (!isCompactViewport()) {
+            follow.style.display = "";
+            return;
+          }
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+          setAnchorOffset(0);
+        };
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
         const computeFollowOn = () =>
-          !mqMobile.matches &&
+          !isCompactViewport() &&
           follow.classList.contains("is-on") &&
           follow.style.display !== "none" &&
           follow.getAttribute("aria-hidden") !== "true";
@@ -475,6 +500,7 @@ const prolongerLinks = [
           if (raf) return;
           raf = requestAnimationFrame(() => {
             raf = 0;
+            forceHideGlobalFollowOnCompactViewport();
             syncFollowLettersTop();
             syncLettersDockState();
             syncActiveLetter();
@@ -507,10 +533,10 @@ const prolongerLinks = [
           document.fonts.ready.then(schedule).catch(() => {});
         }
 
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", schedule);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(schedule);
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", schedule);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(schedule);
         }
 
         if (reducedMotion.addEventListener) {
@@ -520,6 +546,7 @@ const prolongerLinks = [
         }
 
         setAnchorOffset(0);
+        forceHideGlobalFollowOnCompactViewport();
         schedule();
 
         if (window.location.hash.startsWith("#letter-")) {
@@ -543,68 +570,69 @@ const prolongerLinks = [
 <style>
   .gic-page{
     --gic-follow-letters-offset: 0px;
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
   .gic-aside-stack{
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 12px;
   }
 
   .gic-aside__block{
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
+    border-radius: 15px;
+    padding: 11px 12px;
     background: rgba(127,127,127,0.05);
   }
 
   .gic-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
+    margin: 0 0 8px;
+    font-size: 13.5px;
+    line-height: 1.25;
     font-weight: 800;
-    opacity: .9;
+    opacity: .92;
   }
 
   .gic-aside__pills{
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 5px;
   }
 
   .gic-aside__pill{
     display: inline-flex;
     align-items: center;
-    padding: 4px 9px;
+    padding: 3px 8px;
     border: 1px solid rgba(127,127,127,0.24);
     border-radius: 999px;
     background: rgba(127,127,127,0.04);
-    font-size: 12px;
-    line-height: 1.3;
+    font-size: 11.5px;
+    line-height: 1.25;
     opacity: .9;
   }
 
   .gic-aside__note{
-    margin: 10px 0 0;
-    font-size: 12px;
-    line-height: 1.45;
-    opacity: .78;
+    margin: 8px 0 0;
+    font-size: 11.5px;
+    line-height: 1.4;
+    opacity: .8;
   }
 
   .gic-letters{
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 14px;
+    gap: 7px;
+    margin-top: 12px;
   }
 
   .gic-letters a,
   .gic-follow-letters a{
-    min-width: 34px;
+    min-width: 32px;
     text-align: center;
     border: 1px solid rgba(127,127,127,0.24);
-    border-radius: 10px;
-    padding: 5px 8px;
+    border-radius: 9px;
+    padding: 4px 7px;
     text-decoration: none;
     transition:
       transform 120ms ease,
@@ -644,15 +672,15 @@ const prolongerLinks = [
     z-index: 59;
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    padding: 8px 12px 10px;
+    gap: 7px;
+    padding: 7px 10px 9px;
     border: 1px solid rgba(127,127,127,.20);
     border-top: 0;
-    border-radius: 0 0 14px 14px;
+    border-radius: 0 0 12px 12px;
     background: rgba(255,255,255,.86);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    box-shadow: 0 10px 22px rgba(0,0,0,.06);
+    box-shadow: 0 8px 18px rgba(0,0,0,.06);
     opacity: 0;
     transform: translateY(-6px);
     pointer-events: none;
@@ -673,7 +701,7 @@ const prolongerLinks = [
   .gic-groups{
     display: flex;
     flex-direction: column;
-    gap: 28px;
+    gap: 22px;
   }
 
   .gic-group{
@@ -683,18 +711,18 @@ const prolongerLinks = [
   }
 
   .gic-section{
-    margin-top: 34px;
+    margin-top: 28px;
   }
 
   .gic-section__head{
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    gap: 12px;
+    gap: 10px;
     flex-wrap: wrap;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
     scroll-margin-top: calc(
-      var(--sticky-offset-px, 96px) + 28px + var(--gic-follow-letters-offset, 0px)
+      var(--sticky-offset-px, 96px) + 24px + var(--gic-follow-letters-offset, 0px)
     );
   }
 
@@ -713,60 +741,61 @@ const prolongerLinks = [
 
   .gic-list{
     display: grid;
-    gap: 12px;
+    gap: 10px;
   }
 
   .gic-item{
     border: 1px solid rgba(127,127,127,0.20);
-    border-radius: 16px;
-    padding: 14px 16px;
+    border-radius: 15px;
+    padding: 13px 14px;
     background: rgba(127,127,127,0.04);
   }
 
   .gic-term{
     display: inline-block;
     font-weight: 800;
-    font-size: 1.04rem;
-    line-height: 1.3;
+    font-size: 1rem;
+    line-height: 1.28;
     text-decoration: none;
-    margin-bottom: 6px;
+    margin-bottom: 5px;
   }
 
   .gic-def{
-    margin: 0 0 8px;
-    line-height: 1.5;
+    margin: 0 0 7px;
+    font-size: 13.5px;
+    line-height: 1.46;
     opacity: .94;
   }
 
   .gic-meta{
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 6px;
     margin: 0;
-    font-size: 12px;
+    font-size: 11.5px;
     opacity: .78;
   }
 
   .gic-meta span{
     border: 1px solid rgba(127,127,127,0.20);
     border-radius: 999px;
-    padding: 2px 8px;
+    padding: 2px 7px;
   }
 
   .gic-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 12px;
-    margin-top: 14px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: var(--portal-grid-gap, 12px);
+    margin-top: 12px;
   }
 
   .gic-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     text-decoration: none;
     transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
@@ -780,13 +809,13 @@ const prolongerLinks = [
   }
 
   .gic-card strong{
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .gic-card span{
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
@@ -794,6 +823,160 @@ const prolongerLinks = [
     .gic-follow-letters{
       display: none !important;
     }
+
+    .gic-aside-stack{
+      gap: 10px;
+    }
+
+    .gic-aside__block{
+      border-radius: 14px;
+      padding: 10px 11px;
+    }
+
+    .gic-aside__heading{
+      margin-bottom: 7px;
+      font-size: 13px;
+    }
+
+    .gic-aside__pill{
+      padding: 3px 7px;
+      font-size: 11px;
+    }
+
+    .gic-aside__note{
+      font-size: 11px;
+      line-height: 1.34;
+    }
+
+    .gic-letters{
+      gap: 6px;
+      margin-top: 10px;
+    }
+
+    .gic-letters a{
+      min-width: 30px;
+      padding: 4px 6px;
+      border-radius: 8px;
+      font-size: 12px;
+    }
+
+    .gic-groups{
+      gap: 18px;
+    }
+
+    .gic-section{
+      margin-top: 22px;
+    }
+
+    .gic-item{
+      border-radius: 14px;
+      padding: 12px 12px;
+    }
+
+    .gic-term{
+      font-size: .96rem;
+    }
+
+    .gic-def{
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .gic-meta{
+      gap: 5px;
+      font-size: 11px;
+    }
+
+    .gic-meta span{
+      padding: 2px 6px;
+    }
+
+    .gic-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .gic-follow-letters{
+      display: none !important;
+    }
+
+    .gic-aside-stack{
+      gap: 8px;
+    }
+
+    .gic-aside__block{
+      border-radius: 13px;
+      padding: 9px 10px;
+    }
+
+    .gic-aside__heading{
+      margin-bottom: 6px;
+      font-size: 12.5px;
+    }
+
+    .gic-aside__pill{
+      padding: 2px 7px;
+      font-size: 10.5px;
+    }
+
+    .gic-aside__note{
+      font-size: 10.5px;
+      line-height: 1.3;
+    }
+
+    .gic-letters{
+      gap: 5px;
+      margin-top: 9px;
+    }
+
+    .gic-letters a{
+      min-width: 28px;
+      padding: 3px 6px;
+      border-radius: 8px;
+      font-size: 11.5px;
+    }
+
+    .gic-groups{
+      gap: 16px;
+    }
+
+    .gic-section{
+      margin-top: 18px;
+    }
+
+    .gic-section__head{
+      margin-bottom: 6px;
+    }
+
+    .gic-item{
+      border-radius: 13px;
+      padding: 10px 11px;
+    }
+
+    .gic-term{
+      font-size: .93rem;
+      margin-bottom: 4px;
+    }
+
+    .gic-def{
+      margin-bottom: 6px;
+      font-size: 12.5px;
+      line-height: 1.34;
+    }
+
+    .gic-meta{
+      gap: 4px;
+      font-size: 10.5px;
+    }
+
+    .gic-meta span{
+      padding: 1px 6px;
+    }
+
+    .gic-cards{
+      grid-template-columns: 1fr;
+    }
   }
 
   @media (prefers-color-scheme: dark){
@@ -824,4 +1007,38 @@ const prolongerLinks = [
         rgba(255,255,255,0.06);
     }
   }
+  
+  :global(body.is-index-complet-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-index-complet-page #reading-follow),
+    :global(body.is-index-complet-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-index-complet-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-index-complet-page #reading-follow),
+    :global(body.is-index-complet-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-index-complet-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/index.astro b/src/pages/glossaire/index.astro
index 7b06e1c..a18f6e9 100644
--- a/src/pages/glossaire/index.astro
+++ b/src/pages/glossaire/index.astro
@@ -286,151 +286,198 @@ const approfondirPortalItems = [
   </section>
 
   <script is:inline>
-    (() => {
-      const header = document.querySelector("header");
-      const hero = document.getElementById("glossary-hero");
-      const follow = document.getElementById("glossary-hero-follow");
-      const headings = Array.from(document.querySelectorAll("[data-follow-section]"));
+  (() => {
+    const header = document.querySelector("header");
+    const hero = document.getElementById("glossary-hero");
+    const follow = document.getElementById("glossary-hero-follow");
+    const intro = document.getElementById("glossary-hero-intro");
+    const toggle = document.getElementById("glossary-hero-toggle");
+    const headings = Array.from(document.querySelectorAll("[data-follow-section]"));
 
-      if (!header || !hero || !follow || headings.length === 0) return;
+    if (!header || !hero || !follow || !intro || !toggle || headings.length === 0) return;
 
-      let raf = 0;
-      let activeHeading = null;
-      let clearTimer = 0;
+    let raf = 0;
+    let activeHeading = null;
+    let clearTimer = 0;
 
-      function syncStickyTop() {
-        const headerHeight = header.getBoundingClientRect().height || 0;
-        document.documentElement.style.setProperty(
-          "--glossary-sticky-top",
-          `${Math.round(headerHeight + 8)}px`
-        );
-      }
+    function syncStickyTop() {
+      const headerHeight = header.getBoundingClientRect().height || 0;
+      document.documentElement.style.setProperty(
+        "--glossary-sticky-top",
+        `${Math.round(headerHeight + 8)}px`
+      );
+    }
 
-      function applyHeadingMetrics(fromEl, toEl) {
-        const cs = window.getComputedStyle(fromEl);
+    function applyHeadingMetrics(fromEl, toEl) {
+      const cs = window.getComputedStyle(fromEl);
 
-        const sourceFontSize = Number.parseFloat(cs.fontSize) || 40;
-        const sourceLineHeight =
-          Number.parseFloat(cs.lineHeight) ||
-          Math.round(sourceFontSize * 1.06 * 100) / 100;
+      const sourceFontSize = Number.parseFloat(cs.fontSize) || 40;
+      const sourceLineHeight =
+        Number.parseFloat(cs.lineHeight) ||
+        Math.round(sourceFontSize * 1.06 * 100) / 100;
 
-        const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
-        const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
+      const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
+      const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
 
-        toEl.style.fontSize = `${scaledFontSize}px`;
-        toEl.style.lineHeight = `${scaledLineHeight}px`;
-        toEl.style.fontWeight = cs.fontWeight;
-        toEl.style.letterSpacing = cs.letterSpacing;
-        toEl.style.fontFamily = cs.fontFamily;
+      toEl.style.fontSize = `${scaledFontSize}px`;
+      toEl.style.lineHeight = `${scaledLineHeight}px`;
+      toEl.style.fontWeight = cs.fontWeight;
+      toEl.style.letterSpacing = cs.letterSpacing;
+      toEl.style.fontFamily = cs.fontFamily;
 
-        document.documentElement.style.setProperty(
-          "--glossary-follow-height",
-          `${Math.ceil(scaledLineHeight)}px`
-        );
-      }
+      document.documentElement.style.setProperty(
+        "--glossary-follow-height",
+        `${Math.ceil(scaledLineHeight)}px`
+      );
+    }
 
-      function getCurrentHeading() {
-        const heroRect = hero.getBoundingClientRect();
-        let candidate = null;
+    function getCurrentHeading() {
+      const heroRect = hero.getBoundingClientRect();
+      const heroBottom = heroRect.bottom;
+      let candidate = null;
 
-        for (const heading of headings) {
-          const rect = heading.getBoundingClientRect();
-          const trigger = heroRect.bottom - Math.min(rect.height * 0.42, 18);
+      for (const heading of headings) {
+        const rect = heading.getBoundingClientRect();
+        const trigger =
+          heroBottom - Math.min(Math.max(rect.height * 0.55, 18), 34);
 
-          if (rect.top <= trigger) {
-            candidate = heading;
-          } else {
-            break;
-          }
-        }
-
-        return candidate;
-      }
-
-      function hideFollow() {
-        if (!follow.classList.contains("is-visible")) return;
-
-        follow.classList.remove("is-visible");
-        follow.setAttribute("aria-hidden", "true");
-
-        window.clearTimeout(clearTimer);
-        clearTimer = window.setTimeout(() => {
-          if (!follow.classList.contains("is-visible")) {
-            follow.textContent = "";
-          }
-        }, 260);
-      }
-
-      function showFollow(heading) {
-        const nextText = (heading.dataset.followSection || heading.textContent || "").trim();
-        if (!nextText) {
-          hideFollow();
-          return;
-        }
-
-        if (activeHeading !== heading) {
-          activeHeading = heading;
-          follow.textContent = nextText;
-          applyHeadingMetrics(heading, follow);
-        }
-
-        window.clearTimeout(clearTimer);
-
-        if (!follow.classList.contains("is-visible")) {
-          requestAnimationFrame(() => {
-            follow.classList.add("is-visible");
-            follow.setAttribute("aria-hidden", "false");
-          });
+        if (rect.top <= trigger) {
+          candidate = heading;
         } else {
+          break;
+        }
+      }
+
+      return candidate;
+    }
+
+    function hideFollow() {
+      if (!follow.classList.contains("is-visible")) return;
+
+      follow.classList.remove("is-visible");
+      follow.setAttribute("aria-hidden", "true");
+
+      window.clearTimeout(clearTimer);
+      clearTimer = window.setTimeout(() => {
+        if (!follow.classList.contains("is-visible")) {
+          follow.textContent = "";
+        }
+      }, 260);
+    }
+
+    function showFollow(heading) {
+      const nextText = (heading.dataset.followSection || heading.textContent || "").trim();
+      if (!nextText) {
+        hideFollow();
+        return;
+      }
+
+      if (activeHeading !== heading) {
+        activeHeading = heading;
+        follow.textContent = nextText;
+        applyHeadingMetrics(heading, follow);
+      }
+
+      window.clearTimeout(clearTimer);
+
+      if (!follow.classList.contains("is-visible")) {
+        requestAnimationFrame(() => {
+          follow.classList.add("is-visible");
           follow.setAttribute("aria-hidden", "false");
-        }
-      }
-
-      function updateFollow() {
-        syncStickyTop();
-
-        const active = getCurrentHeading();
-
-        if (!active) {
-          activeHeading = null;
-          hideFollow();
-          return;
-        }
-
-        const heroRect = hero.getBoundingClientRect();
-        const activeRect = active.getBoundingClientRect();
-        const showThreshold = heroRect.bottom - Math.min(activeRect.height * 0.34, 14);
-        const shouldShow = activeRect.top <= showThreshold;
-
-        if (!shouldShow) {
-          activeHeading = null;
-          hideFollow();
-          return;
-        }
-
-        showFollow(active);
-      }
-
-      function schedule() {
-        if (raf) return;
-        raf = requestAnimationFrame(() => {
-          raf = 0;
-          updateFollow();
         });
+      } else {
+        follow.setAttribute("aria-hidden", "false");
+      }
+    }
+
+    function collapseIntro() {
+      if (!document.body.classList.contains("glossary-home-follow-on")) return;
+
+      if (document.body.classList.contains("glossary-home-hero-expanded")) return;
+
+      intro.setAttribute("aria-hidden", "true");
+      toggle.hidden = false;
+      toggle.setAttribute("aria-expanded", "false");
+    }
+
+    function expandIntro() {
+      document.body.classList.add("glossary-home-hero-expanded");
+      intro.setAttribute("aria-hidden", "false");
+      toggle.hidden = true;
+      toggle.setAttribute("aria-expanded", "true");
+    }
+
+    function resetIntro() {
+      document.body.classList.remove("glossary-home-hero-expanded");
+      intro.setAttribute("aria-hidden", "false");
+      toggle.hidden = true;
+      toggle.setAttribute("aria-expanded", "false");
+    }
+
+    function updateFollow() {
+      syncStickyTop();
+
+      const heroRect = hero.getBoundingClientRect();
+      const active = getCurrentHeading();
+
+      const stickyTop =
+        parseFloat(
+          getComputedStyle(document.documentElement)
+            .getPropertyValue("--glossary-sticky-top")
+        ) || 64;
+
+      const hasStartedScrolling = (window.scrollY || window.pageYOffset || 0) > 8;
+      const heroDocked = Math.abs(heroRect.top - stickyTop) <= 6;
+      const heroOut = hasStartedScrolling && heroDocked;
+
+      document.body.classList.toggle("glossary-home-follow-on", heroOut);
+
+      if (!active) {
+        activeHeading = null;
+        hideFollow();
+        resetIntro();
+        return;
       }
 
-      window.addEventListener("scroll", schedule, { passive: true });
-      window.addEventListener("resize", schedule);
+      const activeRect = active.getBoundingClientRect();
+      const showThreshold =
+        heroRect.bottom - Math.min(Math.max(activeRect.height * 0.58, 18), 34);
 
-      if (document.fonts?.ready) {
-        document.fonts.ready.then(schedule).catch(() => {});
+      const shouldShow = heroOut && activeRect.top <= showThreshold;
+
+      if (!shouldShow) {
+        activeHeading = null;
+        hideFollow();
+        resetIntro();
+        return;
       }
 
-      schedule();
-    })();
-  </script>
+      collapseIntro();
+      showFollow(active);
+    }
 
-  <style>
+    function schedule() {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        updateFollow();
+      });
+    }
+
+    toggle.addEventListener("click", expandIntro);
+
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+
+    if (document.fonts?.ready) {
+      document.fonts.ready.then(schedule).catch(() => {});
+    }
+
+    schedule();
+  })();
+</script>
+
+    <style>
     :root{
       --glossary-accent: #00d9ff;
       --glossary-bg-soft: rgba(127,127,127,0.05);
@@ -441,22 +488,32 @@ const approfondirPortalItems = [
       --glossary-follow-height: 2.5rem;
     }
 
-    .glossary-home-shell__main,
-    .glossary-home-shell__aside{
-      grid-column: auto;
+    .glossary-home{
+      min-width: 0;
+      overflow-x: clip;
     }
 
-    .glossary-home-shell__aside-inner{
-      position: static;
+    .glossary-home > *{
+      min-width: 0;
+    }
+
+    .glossary-map-block,
+    .glossary-section,
+    .glossary-map,
+    .glossary-map__stage,
+    .glossary-map__roots,
+    .glossary-map__node{
+      min-width: 0;
     }
 
     .glossary-map-block__head h2,
     .glossary-section h2{
       margin: 0;
-      font-size: clamp(2rem, 3vw, 2.55rem);
+      font-size: clamp(1.8rem, 3vw, 2.55rem);
       line-height: 1.06;
       letter-spacing: -.03em;
       font-weight: 800;
+      text-wrap: balance;
     }
 
     .glossary-map-block{
@@ -472,6 +529,7 @@ const approfondirPortalItems = [
       font-size: 1rem;
       line-height: 1.55;
       opacity: .94;
+      text-wrap: pretty;
     }
 
     .glossary-map{
@@ -496,6 +554,7 @@ const approfondirPortalItems = [
       font-weight: 800;
       letter-spacing: -.01em;
       opacity: .96;
+      text-wrap: balance;
     }
 
     .glossary-map__roots{
@@ -520,7 +579,11 @@ const approfondirPortalItems = [
       font-size: .99rem;
       font-weight: 800;
       letter-spacing: .04em;
-      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+      line-height: 1.2;
+      transition:
+        transform 120ms ease,
+        background 120ms ease,
+        border-color 120ms ease;
     }
 
     .glossary-map__node:hover{
@@ -562,12 +625,33 @@ const approfondirPortalItems = [
     }
 
     @media (max-width: 980px){
-      .glossary-home-shell{
-        grid-template-columns: 1fr;
+      .glossary-map-block{
+        padding: 16px 16px 18px;
+        border-radius: 20px;
       }
 
-      .glossary-home-shell__aside-inner{
-        position: static;
+      .glossary-map-block__head h2,
+      .glossary-section h2{
+        font-size: clamp(1.8rem, 5vw, 2.3rem);
+        line-height: 1.04;
+      }
+
+      .glossary-map-block__head p,
+      .glossary-intro{
+        font-size: .96rem;
+        line-height: 1.44;
+      }
+
+      .glossary-home .glossary-cards,
+      .glossary-home .glossary-portals{
+        grid-template-columns: 1fr;
+        gap: 10px;
+      }
+
+      .glossary-home .glossary-card,
+      .glossary-home .glossary-portal-card{
+        padding: 13px 14px;
+        border-radius: 15px;
       }
     }
 
@@ -577,18 +661,133 @@ const approfondirPortalItems = [
         padding: 12px 14px 16px;
       }
 
-      .glossary-map__roots{
-        grid-template-columns: 1fr;
+      .glossary-map-block{
+        padding: 16px 16px 18px;
+        border-radius: 20px;
+      }
+
+      .glossary-map-block__head h2,
+      .glossary-section h2{
+        font-size: clamp(1.5rem, 7vw, 1.95rem);
+        line-height: 1.04;
+        letter-spacing: -.022em;
+      }
+
+      .glossary-map-block__head p,
+      .glossary-intro{
+        font-size: .9rem;
+        line-height: 1.34;
       }
 
       .glossary-section__head{
         flex-direction: column;
         align-items: stretch;
+        gap: 10px;
       }
 
       .glossary-cta{
         width: fit-content;
       }
+
+      .glossary-map{
+        gap: 7px;
+        margin-top: 12px;
+      }
+
+      .glossary-map__stage{
+        gap: 7px;
+        width: 100%;
+      }
+
+      .glossary-map__title{
+        font-size: .9rem;
+        line-height: 1.2;
+      }
+
+      .glossary-map__roots{
+        grid-template-columns: 1fr;
+        gap: 6px;
+      }
+
+      .glossary-map__node{
+        min-height: 38px;
+        padding: 8px 10px;
+        font-size: .84rem;
+        line-height: 1.15;
+      }
+
+      .glossary-map__arrow{
+        font-size: 1rem;
+        opacity: .62;
+      }
+    }
+
+    @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+      .glossary-map-block{
+        padding: 10px 10px 12px;
+        border-radius: 14px;
+      }
+
+      .glossary-map-block__head h2,
+      .glossary-section h2{
+        font-size: clamp(1.2rem, 3.8vw, 1.55rem);
+        line-height: 1.02;
+        text-wrap: pretty;
+      }
+
+      .glossary-map-block__head p,
+      .glossary-intro{
+        font-size: .82rem;
+        line-height: 1.24;
+      }
+
+      .glossary-section{
+        margin-top: 24px;
+      }
+
+      .glossary-section__head{
+        gap: 10px;
+        margin-bottom: 10px;
+      }
+
+      .glossary-map{
+        gap: 5px;
+        margin-top: 10px;
+      }
+
+      .glossary-map__stage{
+        gap: 5px;
+      }
+
+      .glossary-map__title{
+        font-size: .8rem;
+        line-height: 1.12;
+      }
+
+      .glossary-map__node{
+        min-height: 32px;
+        padding: 6px 8px;
+        font-size: .74rem;
+      }
+
+      .glossary-home .glossary-card,
+      .glossary-home .glossary-portal-card{
+        padding: 10px 11px;
+        border-radius: 12px;
+      }
+
+      .glossary-home .glossary-card strong,
+      .glossary-home .glossary-portal-card strong{
+        font-size: .9rem;
+        line-height: 1.2;
+      }
+
+      .glossary-home .glossary-card span,
+      .glossary-home .glossary-portal-card span,
+      .glossary-home .glossary-portal-card small{
+        font-size: .8rem;
+        line-height: 1.22;
+      }
     }
 
     @media (prefers-color-scheme: dark){
@@ -605,6 +804,112 @@ const approfondirPortalItems = [
       .glossary-cta:hover{
         background: rgba(255,255,255,0.07);
       }
+    }
+
+        /* =========================================================
+       LOT 17.A.5 — Recalage follow + densité mobile finale
+       ========================================================= */
+
+    .glossary-home{
+      min-width: 0;
+    }
+
+    .glossary-home .glossary-cards,
+    .glossary-home .glossary-portals{
+      min-width: 0;
+    }
+
+    .glossary-home .glossary-card,
+    .glossary-home .glossary-portal-card{
+      min-width: 0;
+    }
+
+    @media (max-width: 760px){
+      .glossary-section{
+        margin-top: 30px;
+        scroll-margin-top: calc(var(--glossary-sticky-top) + 108px);
+      }
+
+      .glossary-section__head{
+        gap: 10px;
+        margin-bottom: 10px;
+      }
+
+      .glossary-home .glossary-cards,
+      .glossary-home .glossary-portals{
+        gap: 9px;
+      }
+
+      .glossary-home .glossary-card,
+      .glossary-home .glossary-portal-card{
+        padding: 12px 13px;
+        border-radius: 14px;
+      }
+
+      .glossary-home .glossary-card strong,
+      .glossary-home .glossary-portal-card strong{
+        font-size: .98rem;
+        line-height: 1.2;
+      }
+
+      .glossary-home .glossary-card span,
+      .glossary-home .glossary-portal-card span{
+        font-size: .92rem;
+        line-height: 1.36;
+      }
+
+      .glossary-home .glossary-portal-card small{
+        font-size: .82rem;
+        line-height: 1.2;
+      }
+
+      .glossary-cta{
+        min-height: 36px;
+        padding: 6px 12px;
+        font-size: .92rem;
+      }
+    }
+
+    @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+      .glossary-section{
+        margin-top: 20px;
+        scroll-margin-top: calc(var(--glossary-sticky-top) + 84px);
+      }
+
+      .glossary-section__head{
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .glossary-home .glossary-cards,
+      .glossary-home .glossary-portals{
+        gap: 8px;
+      }
+
+      .glossary-home .glossary-card,
+      .glossary-home .glossary-portal-card{
+        padding: 9px 10px;
+        border-radius: 12px;
+      }
+
+      .glossary-home .glossary-card strong,
+      .glossary-home .glossary-portal-card strong{
+        font-size: .86rem;
+        line-height: 1.14;
+      }
+
+      .glossary-home .glossary-card span,
+      .glossary-home .glossary-portal-card span,
+      .glossary-home .glossary-portal-card small{
+        font-size: .76rem;
+        line-height: 1.16;
+      }
+
+      .glossary-cta{
+        min-height: 30px;
+        padding: 4px 10px;
+        font-size: .8rem;
+      }
     }
   </style>
 </GlossaryLayout>
\ No newline at end of file
diff --git a/src/pages/glossaire/paradigme-archicratique.astro b/src/pages/glossaire/paradigme-archicratique.astro
index a76ade7..07f4c07 100644
--- a/src/pages/glossaire/paradigme-archicratique.astro
+++ b/src/pages/glossaire/paradigme-archicratique.astro
@@ -663,18 +663,91 @@ const usefulLinks = [
     heroMoreId="pa-hero-more"
     heroToggleId="pa-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
   .pa-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
-  .pa-focus-card{
-    margin-top: 14px;
-    padding: 18px 20px;
+   .pa-focus-card{
+    margin-top: 12px;
+    padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 18px;
+    border-radius: var(--portal-focus-radius, 18px);
     background: rgba(127,127,127,0.05);
   }
 
@@ -689,8 +762,8 @@ const usefulLinks = [
 
   .pa-focus-card h3{
     margin: 0 0 10px;
-    font-size: clamp(1.35rem, 2vw, 1.7rem);
-    line-height: 1.15;
+    font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
+    line-height: var(--portal-local-h3-lh, 1.15);
   }
 
   .pa-focus-card h3 a{
@@ -722,14 +795,14 @@ const usefulLinks = [
   }
 
   .pa-block{
-    margin-top: 18px;
+    margin-top: 16px;
   }
 
   .pa-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 12px;
-    margin-top: 14px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: var(--portal-grid-gap, 12px);
+    margin-top: 12px;
   }
 
   .pa-card,
@@ -737,9 +810,9 @@ const usefulLinks = [
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
   }
 
@@ -757,19 +830,19 @@ const usefulLinks = [
 
   .pa-card strong,
   .pa-note-card strong{
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .pa-card span,
   .pa-note-card span{
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
   .pa-card small{
-    font-size: 12px;
+    font-size: var(--portal-card-meta-size, 12px);
     line-height: 1.4;
     opacity: .72;
   }
@@ -782,14 +855,14 @@ const usefulLinks = [
 
   .pa-theory-hub{
     display: grid;
-    gap: 12px;
-    margin-top: 14px;
-    padding: 18px 20px;
+    gap: 10px;
+    margin-top: 12px;
+    padding: 16px 18px;
     border: 1px solid rgba(127,127,127,0.20);
-    border-radius: 22px;
+    border-radius: 20px;
     background:
-      linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.04)),
-      radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.06), transparent 62%),
+      linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.035)),
+      radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.055), transparent 62%),
       rgba(127,127,127,0.04);
   }
 
@@ -797,13 +870,13 @@ const usefulLinks = [
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: 12px;
+    gap: 10px;
     flex-wrap: wrap;
   }
 
   .pa-theory-hub__head{
     display: grid;
-    gap: 6px;
+    gap: 4px;
   }
 
   .pa-theory-hub__eyebrow{
@@ -816,19 +889,19 @@ const usefulLinks = [
 
   .pa-theory-hub h3{
     margin: 0;
-    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
-    line-height: 1.2;
+    font-size: clamp(1.02rem, 1.45vw, 1.22rem);
+    line-height: 1.18;
   }
 
   .pa-theory-hub__count{
     display: inline-flex;
     align-items: center;
-    min-height: 28px;
-    padding: 0 11px;
+    min-height: 26px;
+    padding: 0 10px;
     border: 1px solid rgba(127,127,127,0.22);
     border-radius: 999px;
     background: rgba(127,127,127,0.04);
-    font-size: 12px;
+    font-size: 11.5px;
     line-height: 1.2;
     opacity: .82;
     white-space: nowrap;
@@ -836,9 +909,9 @@ const usefulLinks = [
 
   .pa-theory-hub__intro{
     margin: 0;
-    max-width: 78ch;
-    font-size: 14px;
-    line-height: 1.55;
+    max-width: 76ch;
+    font-size: 13.5px;
+    line-height: 1.5;
     opacity: .94;
   }
 
@@ -846,25 +919,25 @@ const usefulLinks = [
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
+    gap: 10px;
     flex-wrap: wrap;
   }
 
   .pa-theory-hub__chips{
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 6px;
   }
 
   .pa-chip{
     display: inline-flex;
     align-items: center;
-    min-height: 30px;
-    padding: 0 11px;
+    min-height: 28px;
+    padding: 0 10px;
     border: 1px solid rgba(127,127,127,0.22);
     border-radius: 999px;
     background: rgba(127,127,127,0.05);
-    font-size: 12px;
+    font-size: 11.5px;
     line-height: 1.2;
     opacity: .9;
     white-space: nowrap;
@@ -908,8 +981,33 @@ const usefulLinks = [
 
   @media (max-width: 720px){
     .pa-theory-hub{
-      padding: 16px;
-      border-radius: 18px;
+      gap: 8px;
+      padding: 14px;
+      border-radius: 16px;
+    }
+
+    .pa-theory-hub__top{
+      gap: 8px;
+    }
+
+    .pa-theory-hub h3{
+      font-size: 1rem;
+    }
+
+    .pa-theory-hub__intro{
+      font-size: 13px;
+      line-height: 1.44;
+    }
+
+    .pa-theory-hub__chips{
+      gap: 5px;
+    }
+
+    .pa-chip{
+      min-height: 26px;
+      padding: 0 9px;
+      font-size: 11px;
+      white-space: normal;
     }
   }
 
@@ -939,4 +1037,72 @@ const usefulLinks = [
       background: rgba(0,217,255,0.08);
     }
   }
+
+  @media (max-width: 760px){
+    .pa-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .pa-cards{
+      grid-template-columns: 1fr;
+    }
+
+    .pa-theory-hub{
+      gap: 7px;
+      padding: 12px;
+      border-radius: 14px;
+    }
+
+    .pa-theory-hub h3{
+      font-size: .96rem;
+      line-height: 1.14;
+    }
+
+    .pa-theory-hub__intro{
+      font-size: 12.5px;
+      line-height: 1.38;
+    }
+
+    .pa-chip{
+      min-height: 24px;
+      padding: 0 8px;
+      font-size: 10.5px;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/paradigmes.astro b/src/pages/glossaire/paradigmes.astro
index 5ee36d1..bb6c995 100644
--- a/src/pages/glossaire/paradigmes.astro
+++ b/src/pages/glossaire/paradigmes.astro
@@ -212,11 +212,84 @@ const prolongerLinks = [
     heroMoreId="theo-hero-more"
     heroToggleId="theo-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
   .theo-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
   .theo-overview{
@@ -248,18 +321,18 @@ const prolongerLinks = [
 
   .theo-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .theo-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     text-decoration: none;
     transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
@@ -273,18 +346,18 @@ const prolongerLinks = [
   }
 
   .theo-card strong{
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .theo-card span{
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
   .theo-card small{
-    font-size: 12px;
+    font-size: var(--portal-card-meta-size, 12px);
     line-height: 1.4;
     opacity: .72;
   }
@@ -305,4 +378,50 @@ const prolongerLinks = [
       background: rgba(255,255,255,0.07);
     }
   }
+
+  @media (max-width: 760px){
+    .theo-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .theo-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/scenes-archicratiques.astro b/src/pages/glossaire/scenes-archicratiques.astro
index d246703..bd992fc 100644
--- a/src/pages/glossaire/scenes-archicratiques.astro
+++ b/src/pages/glossaire/scenes-archicratiques.astro
@@ -314,18 +314,91 @@ const prolongerLinks = [
     heroMoreId="scene-hero-more"
     heroToggleId="scene-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
   .scene-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
   .scene-focus-card{
     margin-top: 14px;
-    padding: 18px 20px;
+    padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 18px;
+    border-radius: var(--portal-focus-radius, 18px);
     background: rgba(127,127,127,0.05);
   }
 
@@ -340,8 +413,8 @@ const prolongerLinks = [
 
   .scene-focus-card h3{
     margin: 0 0 10px;
-    font-size: clamp(1.35rem, 2vw, 1.7rem);
-    line-height: 1.15;
+    font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
+    line-height: var(--portal-local-h3-lh, 1.15);
   }
 
   .scene-focus-card h3 a{
@@ -378,18 +451,18 @@ const prolongerLinks = [
 
   .scene-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .scene-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     text-decoration: none;
     transition:
@@ -406,18 +479,18 @@ const prolongerLinks = [
   }
 
   .scene-card strong{
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .scene-card span{
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
   .scene-card small{
-    font-size: 12px;
+    font-size: var(--portal-card-meta-size, 12px);
     line-height: 1.4;
     opacity: .72;
   }
@@ -438,4 +511,50 @@ const prolongerLinks = [
       background: rgba(255,255,255,0.07);
     }
   }
+
+  @media (max-width: 760px){
+    .scene-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .scene-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/tensions-irreductibles.astro b/src/pages/glossaire/tensions-irreductibles.astro
index 6947d2d..38cbf3c 100644
--- a/src/pages/glossaire/tensions-irreductibles.astro
+++ b/src/pages/glossaire/tensions-irreductibles.astro
@@ -341,18 +341,91 @@ const prolongerLinks = [
     heroMoreId="tir-hero-more"
     heroToggleId="tir-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
   .tir-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
   .tir-note-card{
     margin-top: 14px;
-    padding: 16px 18px;
+    padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-focus-radius, 18px);
     background: rgba(127,127,127,0.05);
   }
 
@@ -426,18 +499,18 @@ const prolongerLinks = [
 
   .tir-link-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .tir-link-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     text-decoration: none;
     transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
@@ -451,18 +524,18 @@ const prolongerLinks = [
   }
 
   .tir-link-card strong{
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .tir-link-card span{
-    font-size: 14px;
-    line-height: 1.45;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.45);
     opacity: .92;
   }
 
   .tir-link-card small{
-    font-size: 12px;
+    font-size: var(--portal-card-meta-size, 12px);
     line-height: 1.4;
     opacity: .72;
   }
@@ -479,4 +552,50 @@ const prolongerLinks = [
       background: rgba(255,255,255,0.07);
     }
   }
+
+  @media (max-width: 760px){
+    .tir-link-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .tir-link-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/verbes-de-la-scene.astro b/src/pages/glossaire/verbes-de-la-scene.astro
index 237f3e3..44d8384 100644
--- a/src/pages/glossaire/verbes-de-la-scene.astro
+++ b/src/pages/glossaire/verbes-de-la-scene.astro
@@ -328,27 +328,100 @@ const prolongerLinks = [
     heroMoreId="verbs-hero-more"
     heroToggleId="verbs-hero-toggle"
   />
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !root || !follow) return;
+
+        body.classList.add("is-glossary-portal-page");
+
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompactViewport = () =>
+          mqMobile.matches || mqSmallLandscape.matches;
+
+        const disableFollow = () => {
+          if (!isCompactViewport()) return;
+
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+          follow.style.display = "none";
+          follow.innerHTML = "";
+
+          root.style.setProperty("--followbar-h", "0px");
+          root.style.setProperty(
+            "--sticky-offset-px",
+            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
+          );
+        };
+
+        const enableFollow = () => {
+          if (isCompactViewport()) return;
+          follow.style.display = "";
+        };
+
+        const sync = () => {
+          if (isCompactViewport()) {
+            disableFollow();
+          } else {
+            enableFollow();
+          }
+        };
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", sync);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(sync);
+        }
+
+        if (mqSmallLandscape.addEventListener) {
+          mqSmallLandscape.addEventListener("change", sync);
+        } else if (mqSmallLandscape.addListener) {
+          mqSmallLandscape.addListener(sync);
+        }
+
+        window.addEventListener("resize", sync);
+        window.addEventListener("pageshow", sync);
+
+        sync();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
   .verbs-page{
-    padding: 8px 0 24px;
+    padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
   }
 
   .verbs-cards{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 12px;
-    margin-top: 14px;
+    margin-top: 12px;
   }
 
   .verbs-card{
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 14px 16px;
+    padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
     border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
+    border-radius: var(--portal-card-radius, 16px);
     background: rgba(127,127,127,0.05);
     transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
   }
@@ -374,15 +447,15 @@ const prolongerLinks = [
 
   .verbs-card h3{
     margin: 0;
-    font-size: 15px;
+    font-size: var(--portal-card-title-size, 15px);
     line-height: 1.3;
   }
 
   .verbs-card__definition,
   .verbs-card__example{
     margin: 0;
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: var(--portal-card-text-size, 14px);
+    line-height: var(--portal-card-text-lh, 1.5);
     opacity: .92;
   }
 
@@ -395,4 +468,50 @@ const prolongerLinks = [
       background: rgba(255,255,255,0.07);
     }
   }
+
+  @media (max-width: 760px){
+    .verbs-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .verbs-cards{
+      grid-template-columns: 1fr;
+    }
+  }
+
+    :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  @media (max-width: 860px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page #reading-follow),
+    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+      display: none !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page){
+      --followbar-h: 0px !important;
+      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
+    }
+  }
 </style>
\ No newline at end of file