PD-232 — Plan d'implémentation¶

src/
├── content/
│   ├── config.ts             # Schéma Zod des collections
│   └── faq/
│       ├── fr/
│       │   ├── security/
│       │   │   ├── 01-acces-documents.md
│       │   │   └── 02-zero-knowledge.md
│       │   ├── legal/
│       │   │   └── 01-valeur-legale.md
│       │   └── ...
│       └── en/
│           ├── security/
│           │   ├── 01-document-access.md
│           │   └── 02-zero-knowledge.md
│           └── ...
├── pages/
│   ├── fr/
│   │   └── faq.astro         # Page FAQ FR
│   └── en/
│       └── faq.astro         # Page FAQ EN
└── components/
    └── FAQSection.astro      # Composant accordéon FAQ

Build Astro
    │
    ▼
getCollection('faq')
    │
    ├── Lit tous les fichiers src/content/faq/**/*.md
    ├── Valide frontmatter avec Zod
    ├── Parse Markdown → HTML
    └── Retourne collection typée
    │
    ▼
Rendu page FAQ
    │
    ├── Groupe par catégorie
    ├── Trie par order
    └── Génère <details> HTML

1. Créer fichier src/content/faq/fr/category/XX-slug.md
2. Remplir frontmatter (question, category, order, lang)
3. Rédiger réponse en Markdown
4. Commit + Push
5. Build régénère la FAQ

---
// src/pages/fr/faq.astro
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import FAQSection from '../../components/FAQSection.astro';
import { faqPageSchema } from '../../seo/schemas/faq';

const lang = 'fr';

// Récupérer toutes les FAQ françaises
const allFaq = await getCollection('faq', ({ data }) => data.lang === lang);

// Grouper par catégorie
const categories = {
  security: { title: "Sécurité & Confidentialité", icon: "🔐", items: [] },
  legal: { title: "Valeur probatoire & conformité", icon: "⚖️", items: [] },
  business: { title: "Entreprises & Professionnels", icon: "🏢", items: [] },
  usage: { title: "Fonctionnement & Utilisation", icon: "👤", items: [] },
  apps: { title: "Applications & Plateformes", icon: "📱", items: [] },
  transfer: { title: "Transfert & partage", icon: "🔄", items: [] },
  data: { title: "Données & Portabilité", icon: "💾", items: [] },
  misc: { title: "Divers", icon: "🧠", items: [] }
};

// Remplir et trier
for (const entry of allFaq) {
  const cat = entry.data.category;
  if (categories[cat]) {
    categories[cat].items.push(entry);
  }
}

for (const cat of Object.values(categories)) {
  cat.items.sort((a, b) => a.data.order - b.data.order);
}

// JSON-LD FAQPage
const jsonLd = faqPageSchema(allFaq);
---

<BaseLayout
  title="FAQ — Questions fréquentes | ProbatioVault"
  description="Toutes les réponses à vos questions sur ProbatioVault"
  ogImage="/og/faq-fr.png"
  jsonLd={jsonLd}
>
  <main id="main-content">
    <h1>Questions fréquentes</h1>

    {Object.entries(categories)
      .filter(([_, cat]) => cat.items.length > 0)
      .map(([key, category]) => (
        <FAQSection
          id={key}
          title={category.title}
          icon={category.icon}
          items={category.items}
        />
      ))}
  </main>
</BaseLayout>

---
// src/components/FAQSection.astro
interface Props {
  id: string;
  title: string;
  icon: string;
  items: any[];
}

const { id, title, icon, items } = Astro.props;
---

<section class="faq-category" id={id}>
  <h2>
    <span class="icon" aria-hidden="true">{icon}</span>
    {title}
  </h2>

  <div class="faq-list">
    {items.map(async (entry) => {
      const { Content } = await entry.render();
      return (
        <details class="faq-item">
          <summary>
            <span class="question">{entry.data.question}</span>
          </summary>
          <div class="answer">
            <Content />
          </div>
        </details>
      );
    })}
  </div>
</section>

<style>
  .faq-item {
    border-bottom: 1px solid var(--color-gris-clair);
    padding: var(--space-md) 0;
  }

  summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  .answer {
    padding-top: var(--space-sm);
    color: var(--color-text-secondary);
  }
</style>