Synchronise les contenus glossaire et ajoute les scripts de conversion DOCX/MDX

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>
+</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>