Recherche

Le DSML propose 3 solutions adaptées selon les besoins de visibilité et le volume de contenu des sites publics.

1. Barre de recherche Hero (Option 1)

Intégrée dans la zone Hero pour attirer immédiatement l'attention (ex : page d'accueil d'un consulat ou d'un ministère).

    
HTML

<form class="ml-search-hero" action="#recherche">
  <input type="text" class="ml-search-hero-input" placeholder="Rechercher une démarche (ex : carte consulaire, passeport)…" aria-label="Rechercher">
  <button type="submit" class="ml-search-hero-btn">Rechercher</button>
</form>

2. Bouton discret & Modale de recherche (Option 2)

Un bouton discret placé dans le header qui ouvre une modale de recherche complète avec suggestions. Il supporte aussi les raccourcis clavier Ctrl+K ou /.

    
HTML

<!-- 1. Trigger button (in header) -->
<button class="ml-search-trigger" aria-label="Rechercher">
  <span>🔍</span> Rechercher <kbd class="ml-search-trigger-shortcut">/</kbd>
</button>

<!-- 2. Modal dialog -->
<dialog class="ml-modal ml-search-modal" id="ml-search-modal">
  <div class="ml-modal-header">
    <h3 class="ml-modal-title">Recherche</h3>
    <button class="ml-modal-close" aria-label="Fermer">×</button>
  </div>
  <div class="ml-modal-body">
    <div class="ml-search-modal-input-wrapper">
      <span class="ml-search-modal-icon">🔍</span>
      <input type="text" class="ml-search-modal-input" placeholder="Que recherchez-vous ?...">
    </div>
  </div>
</dialog>

3. Barre de recherche en ligne (Option 3)

Version compacte sur fond grisé avec bouton d'accentuation plein. Conçue pour s'insérer proprement dans un header ou une colonne latérale de site documentaire (inspirée de beta.gouv.fr).

    
HTML

<div class="ml-search-inline">
  <input type="text" class="ml-search-inline-input" placeholder="Rechercher..." aria-label="Rechercher">
  <button class="ml-search-inline-btn" aria-label="Lancer la recherche">
    <svg viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
  </button>
</div>