COMPOSANTS

Sidebar filtres

Structure de la sidebar filtres

La sidebar filtres accompagne toujours une liste ou une grille. Largeur fixe w-64, toujours visible sur desktop.

<aside class="w-64 flex-shrink-0 bg-base-100 border border-base-200 rounded-box p-4 shadow-sm">
  <!-- Section: Fournisseur -->
  <div class="mb-5">
    <h3 class="text-xs font-accent font-bold text-base-content/40 uppercase tracking-wider mb-2">
      Fournisseur
    </h3>
    <div class="space-y-1.5">
      <label class="flex items-center gap-2 cursor-pointer text-sm hover:text-mc-navy">
        <input type="checkbox" class="checkbox checkbox-primary checkbox-xs">
        <span class="flex-1">Stanley/Stella</span>
        <span class="badge badge-ghost badge-xs">284</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer text-sm hover:text-mc-navy">
        <input type="checkbox" class="checkbox checkbox-primary checkbox-xs" checked>
        <span class="flex-1">B&C Collection</span>
        <span class="badge badge-ghost badge-xs">147</span>
      </label>
    </div>
  </div>

  <!-- Section: Couleur (swatches) -->
  <div class="mb-5">
    <h3 class="text-xs font-accent font-bold text-base-content/40 uppercase tracking-wider mb-2">
      Couleur
    </h3>
    <div class="flex flex-wrap gap-2">
      <label class="cursor-pointer" title="Noir (156)">
        <input type="checkbox" class="sr-only peer">
        <span class="block w-6 h-6 rounded-full border-2 border-base-300 peer-checked:border-primary
                     peer-checked:ring-2 peer-checked:ring-primary/40 transition-all"
              style="background-color: #1a1a1a;"></span>
      </label>
    </div>
  </div>

  <!-- Actions -->
  <div class="flex gap-2 mt-6 pt-4 border-t border-base-200">
    <button class="btn btn-primary btn-sm flex-1">Appliquer</button>
    <a href="#" class="btn btn-ghost btn-sm">Effacer</a>
  </div>
</aside>

Filtre par plage (min / max)

Pour les valeurs numériques continues (quantité, prix). Deux champs côte à côte reliés par un séparateur visuel.

Quantité minimum

à 
<div class="mb-5">
  <h3 class="text-xs font-accent font-bold text-base-content/40 uppercase tracking-wider mb-2">
    Quantité minimum
  </h3>
  <div class="flex items-center gap-2">
    <input type="number" class="input input-bordered input-sm w-20" placeholder="0" min="0">
    <span class="text-xs text-base-content/40">à</span>
    <input type="number" class="input input-bordered input-sm w-20" placeholder="500" min="0">
  </div>
</div>

Filtres actifs (tags visibles)

Afficher les filtres sélectionnés au-dessus des résultats pour que l'utilisateur sache ce qui est actif. Chaque tag est supprimable individuellement.

Filtres actifs : Stanley/Stella Noir Tout effacer 
<div class="flex flex-wrap gap-2 mb-4">
  <span class="text-xs text-base-content/50 font-accent font-bold uppercase">Filtres actifs :</span>
  <span class="badge badge-primary gap-1">
    Stanley/Stella
    <button class="hover:opacity-70 ml-0.5">×</button>
  </span>
  <span class="badge badge-primary gap-1">
    Noir
    <button class="hover:opacity-70 ml-0.5">×</button>
  </span>
  <a href="#" class="badge badge-ghost text-xs">Tout effacer</a>
</div>
✓ Toujours afficher le nombre de résultats par filtre (badge-ghost badge-xs).
✓ Boutons : "Appliquer" (btn-primary) + "Effacer" (btn-ghost).
✗ Ne jamais filtrer en temps réel sans bouton de confirmation — trop de requêtes.
✗ Ne pas masquer la sidebar sur desktop — elle doit toujours être visible dans les vues catalogue.