SPEC — Refonte Graphique & UX de la Recherche Pagefind

Cycle : DOC → SPEC → CODE → TEST
Scope : Alignement complet du composant SearchModal sur le design et l’expérience utilisateur officielle de Pagefind.
Destination Spec : docs/PM/phase0-search-ui-refinement.spec.md

---

1. Analyse Comparative (Screenshots Utilisateur)

Élément	État Actuel (1 & 3)	Target Pagefind Official (2 & 4)
Typographie	Police avec empattement (serif) héritée	Police moderne sans-serif (system-ui, sans-serif)
Bouton Déclencheur (Header)	Bouton plat compact	Boîte de recherche type input avec 2 badges séparés <kbd>Ctrl</kbd> <kbd>K</kbd>
Champ de recherche Modal	Simple bordure inférieure	Champ encadré arrondi avec contour actif (focus ring bleu 2px)
Pied de Modale (Keyboard Shortcuts)	Aucun	Barre de raccourcis : <kbd>esc</kbd> close, <kbd>↓</kbd><kbd>↑</kbd> navigate, <kbd>↵</kbd> select
Navigation Clavier dans les Résultats	Aucune (souris uniquement)	Flèches Haut/Bas pour surligner un résultat, Entrée pour ouvrir la page

---

2. Spécifications Techniques (CODE)

2.1 Bouton Déclencheur dans le Header (Header.astro / SearchModal.astro)

• Boîte aux coins arrondis (8px), fond blanc/gris très clair (#f8fafc), bordure #e2e8f0.
• Icône de loupe grise à gauche.
• Texte "Search" ou "Rechercher...".
• Deux touches distinctes à droite : <kbd>Ctrl</kbd> (ou <kbd>⌘</kbd> sur Mac) et <kbd>K</kbd>.

2.2 Modale de Recherche (SearchModal.astro)

• Cadre du champ de recherche :
  • Boîte d’entrée distincte avec bordure arrondie (10px).
  • Outline bleu vif (border-color: #2563eb, box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15)) lorsqu’il est actif.
• Pied de modale (Footer Shortcuts) :
  • Bandeau inférieur séparé par une bordure fine #f1f5f9.
  • Badges clavier <kbd>esc</kbd> close, <kbd>↓</kbd><kbd>↑</kbd> navigate, <kbd>↵</kbd> select.
• Navigation au clavier :
  • ArrowDown : sélectionne l’élément suivant dans la liste des résultats.
  • ArrowUp : sélectionne l’élément précédent.
  • Enter : navigue vers le lien de l’élément sélectionné.
• Typographie Sans-serif :
  • Forcer font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif sur l’ensemble de la modale et du déclencheur.

---

3. Matrice de Validation & Critères d’Acceptation (TEST)

• Visuel Déclencheur Header : Style identique à l’image 2 de Pagefind avec 2 badges <kbd>Ctrl</kbd> <kbd>K</kbd>.
• Visuel Champ Modal : Champ encadré avec contour d’activation bleu (image 4).
• Typographie : Police sans-serif propre sur la modale et les résultats (image 4).
• Footer Raccourcis Clavier : Présence des explications esc, navigate, select en bas de la modale.
• Navigation Flèches Clavier : Navigation fluide avec ↑ / ↓ et validation par Enter.
• Contrôle des Types : npx pnpm@12.3.4 typecheck -> 0 erreurs.