diff --git a/css/style.css b/css/style.css
index c6f1b0f..89b49ce 100644
--- a/css/style.css
+++ b/css/style.css
@@ -140,6 +140,101 @@ button[aria-pressed="true"] {
   color: #fff;
 }
 
+/* --- barre de filtres ----------------------------------------------------- */
+
+.filtres {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--bordure);
+  flex-shrink: 0;
+}
+
+.filtres__titre {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--texte-doux);
+  white-space: nowrap;
+}
+
+.filtres button:not(.tag) {
+  font-size: 12px;
+  padding: 3px 9px;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+/* --- tags ----------------------------------------------------------------- */
+
+/* Chaque pastille porte sa teinte dans `--teinte-tag`, calculée par hachage du
+   nom du tag (model.js). La saturation et la clarté restent fixes, elles : ce
+   sont elles qui garantissent le contraste, quelle que soit la teinte tirée. */
+.tags {
+  display: flex;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.tags--filtres,
+.tags--suggestions {
+  flex-wrap: wrap;
+  overflow: visible;
+}
+
+.tag {
+  font: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.6;
+  padding: 0 6px;
+  max-width: 84px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: hsl(var(--teinte-tag) 62% 92%);
+  color: hsl(var(--teinte-tag) 55% 27%);
+}
+
+.tags--filtres .tag,
+.tags--suggestions .tag {
+  font-size: 11px;
+  padding: 1px 9px;
+  max-width: none;
+  border-radius: 11px;
+}
+
+.tag:hover {
+  border-color: hsl(var(--teinte-tag) 45% 55%);
+}
+
+/* Un tag actif s'inverse : le fond prend la teinte pleine. Il faut donc
+   neutraliser la règle générale `button[aria-pressed="true"]`, qui repeindrait
+   toutes les pastilles de la même couleur d'accent. */
+.tag[aria-pressed="true"] {
+  background: hsl(var(--teinte-tag) 52% 38%);
+  border-color: hsl(var(--teinte-tag) 52% 38%);
+  color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tag {
+    background: hsl(var(--teinte-tag) 34% 24%);
+    color: hsl(var(--teinte-tag) 62% 76%);
+  }
+
+  .tag[aria-pressed="true"] {
+    background: hsl(var(--teinte-tag) 58% 62%);
+    border-color: hsl(var(--teinte-tag) 58% 62%);
+    color: #0f172a;
+  }
+}
+
 /* --- structure de la frise ------------------------------------------------ */
 
 /* Un seul conteneur défilant, sur les deux axes. L'en-tête et la colonne des
@@ -286,12 +381,22 @@ button[aria-pressed="true"] {
 
 .libelle-projet__nom {
   flex: 1;
+  /* Le nom cède la place aux pastilles, mais jamais entièrement : sous quatre
+     caractères il ne resterait qu'un « … » qui n'identifie plus rien. */
+  min-width: 4em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
 }
 
+/* Les pastilles rognent le nom, pas l'inverse — mais elles s'effacent à leur
+   tour plutôt que de repousser l'œil et le menu hors de la colonne. */
+.libelle-projet .tags {
+  flex: 0 1 auto;
+  max-width: 45%;
+}
+
 .libelle-projet__derive {
   font-size: 11px;
   font-weight: 500;
diff --git a/index.html b/index.html
index 89f5779..7491d7f 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,16 @@
       <p class="outils__etat" id="etat-sauvegarde" role="status" aria-live="polite"></p>
     </header>
 
+    <!--
+      Barre de filtres, masquée tant qu'aucun projet ne porte de tag : elle
+      n'apparaît que le jour où elle sert à quelque chose.
+    -->
+    <div class="filtres" id="filtres" hidden role="group" aria-label="Filtrer par tag">
+      <span class="filtres__titre">Filtrer</span>
+      <div class="tags tags--filtres" id="filtres-liste"></div>
+      <button type="button" id="effacer-filtres" hidden>Tout afficher</button>
+    </div>
+
     <!--
       Un seul conteneur défilant, découpé en grille 2×2 : l'en-tête de dates est
       collé en haut (`sticky top`), la colonne des libellés collée à gauche
@@ -46,6 +56,11 @@
       </button>
     </p>
 
+    <p class="vide" id="message-filtre" hidden>
+      Aucun projet ne porte tous les tags sélectionnés.<br />
+      <button type="button" id="effacer-filtres-vide">Tout afficher</button>
+    </p>
+
     <!-- Panneau de détail, ouvert au clic sur une phase. -->
     <aside class="panneau" id="panneau" hidden aria-label="Détail de la phase">
       <div class="panneau__entete">
@@ -117,6 +132,22 @@
           <div id="dialogue-projet-couleurs"></div>
         </fieldset>
 
+        <label>
+          Tags, séparés par des virgules
+          <input
+            type="text"
+            id="dialogue-projet-tags"
+            autocomplete="off"
+            placeholder="client, refonte"
+          />
+        </label>
+
+        <!-- Masqué tant qu'aucun tag n'existe ailleurs dans le planning. -->
+        <fieldset class="couleurs" id="dialogue-projet-suggestions-bloc" hidden>
+          <legend>Tags déjà utilisés</legend>
+          <div class="tags tags--suggestions" id="dialogue-projet-suggestions"></div>
+        </fieldset>
+
         <p class="dialogue__erreur" id="dialogue-projet-erreur" role="alert" hidden></p>
 
         <menu class="dialogue__actions">
diff --git a/js/app.js b/js/app.js
index 0babe30..60402b6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -18,16 +18,21 @@ import {
   ajouterPhase,
   aujourdhui,
   bornesPlanning,
+  cleTag,
   creerPhase,
   creerProjet,
   figerReference,
   libererReference,
+  normaliserTags,
   planningVide,
   pourEcriture,
+  projetFiltre,
   remplacerPhase,
   remplacerProjet,
   supprimerPhase,
   supprimerProjet,
+  teinteTag,
+  tousLesTags,
   validerPlanning,
   versUTC,
 } from './model.js';
@@ -41,6 +46,10 @@ const refs = {
   frise: $('frise'),
   etat: $('etat-sauvegarde'),
   messageVide: $('message-vide'),
+  messageFiltre: $('message-filtre'),
+  filtres: $('filtres'),
+  filtresListe: $('filtres-liste'),
+  effacerFiltres: $('effacer-filtres'),
   alerte: $('alerte'),
   alerteMessage: $('alerte-message'),
 };
@@ -49,6 +58,18 @@ let planning = planningVide();
 let echelle = null;
 let selection = null; // { projet, phase }
 
+/**
+ * Tags sélectionnés dans la barre de filtres. Comme la fenêtre temporelle,
+ * c'est un état de **vue** : jamais enregistré, jamais partagé.
+ *
+ * Un filtre qui survivrait au rechargement rouvrirait le planning amputé sans
+ * qu'on se souvienne pourquoi. `hidden`, lui, est bien enregistré — c'est une
+ * décision durable sur un projet, pas un coup d'œil.
+ *
+ * La sélection est conjonctive : un projet doit porter *tous* les tags cochés.
+ */
+let tagsActifs = [];
+
 /**
  * Fenêtre temporelle affichée. C'est un état de vue, jamais enregistré.
  *
@@ -83,10 +104,14 @@ const demanderProjet = creerDialogueProjet(
     titre: $('dialogue-projet-titre'),
     champNom: $('dialogue-projet-nom'),
     conteneurCouleurs: $('dialogue-projet-couleurs'),
+    champTags: $('dialogue-projet-tags'),
+    suggestionsTags: $('dialogue-projet-suggestions'),
+    blocSuggestions: $('dialogue-projet-suggestions-bloc'),
     erreur: $('dialogue-projet-erreur'),
     valider: $('dialogue-projet-ok'),
   },
-  COULEURS
+  COULEURS,
+  { normaliserTags, cleTag, teinteTag }
 );
 
 const demanderConfirmation = creerDialogueConfirmation({
@@ -142,14 +167,26 @@ const panneau = creerPanneau(
 /** Unique point d'entrée des modifications : rend puis sauvegarde. */
 function majPlanning(suivant) {
   planning = suivant;
+  // Retirer son dernier tag à un projet peut vider le filtre de sa substance :
+  // sans cet élagage, un tag que plus personne ne porte masquerait tout.
+  tagsActifs = tagsActifs.filter((tag) =>
+    planning.projects.some((projet) => projet.tags.some((pose) => cleTag(pose) === cleTag(tag)))
+  );
   dessiner();
   stockage.sauvegarder(pourEcriture(planning));
 }
 
 function dessiner() {
   const aDesProjets = planning.projects.length > 0;
-  refs.frise.hidden = !aDesProjets;
+  const retenus = planning.projects.filter((projet) => projetFiltre(projet, tagsActifs));
+
   refs.messageVide.hidden = aDesProjets;
+  // Filtrer jusqu'à ne plus rien retenir est facile avec un ET : sans ce
+  // message, la frise vide laisserait croire que les projets ont disparu.
+  refs.messageFiltre.hidden = !aDesProjets || retenus.length > 0;
+  refs.frise.hidden = !aDesProjets || retenus.length === 0;
+
+  peindreFiltres();
 
   if (!aDesProjets) {
     echelle = null;
@@ -157,7 +194,7 @@ function dessiner() {
   }
 
   elargirPourContenir();
-  echelle = rendre(refs, planning, { fenetre, selection });
+  echelle = rendre(refs, planning, { fenetre, selection, tagsActifs });
 
   // Le panneau reflète la phase telle qu'elle est après le rendu : un glisser
   // sur la frise doit se voir dans les champs.
@@ -193,8 +230,62 @@ function afficherAlerte(message) {
   // derrière elle brouillerait le diagnostic si le style venait à changer.
   refs.frise.hidden = true;
   refs.messageVide.hidden = true;
+  refs.messageFiltre.hidden = true;
+  refs.filtres.hidden = true;
 }
 
+// ---------------------------------------------------------------------------
+// Filtre par tags
+// ---------------------------------------------------------------------------
+
+/**
+ * Reconstruit la barre de filtres depuis les tags réellement employés.
+ *
+ * La liste n'est pas un référentiel à tenir à jour : elle se déduit des projets,
+ * si bien qu'un tag apparaît dès qu'on le pose et disparaît dès qu'il n'orne
+ * plus rien.
+ */
+function peindreFiltres() {
+  const tags = tousLesTags(planning);
+  refs.filtres.hidden = tags.length === 0;
+  refs.effacerFiltres.hidden = tagsActifs.length === 0;
+
+  const clesActives = new Set(tagsActifs.map(cleTag));
+  refs.filtresListe.replaceChildren(
+    ...tags.map((tag) => {
+      const bouton = document.createElement('button');
+      bouton.type = 'button';
+      bouton.className = 'tag';
+      bouton.style.setProperty('--teinte-tag', String(teinteTag(tag)));
+      bouton.textContent = tag;
+
+      const actif = clesActives.has(cleTag(tag));
+      bouton.setAttribute('aria-pressed', String(actif));
+      bouton.title = actif ? `Retirer « ${tag} » du filtre` : `N'afficher que les projets « ${tag} »`;
+      bouton.addEventListener('click', () => basculerTag(tag));
+
+      return bouton;
+    })
+  );
+}
+
+/** Ajoute le tag au filtre, ou l'en retire s'il y était déjà. */
+function basculerTag(tag) {
+  const cle = cleTag(tag);
+  const restants = tagsActifs.filter((actif) => cleTag(actif) !== cle);
+  tagsActifs =
+    restants.length === tagsActifs.length ? normaliserTags([...tagsActifs, tag]) : restants;
+  dessiner();
+}
+
+function effacerFiltres() {
+  tagsActifs = [];
+  dessiner();
+}
+
+refs.effacerFiltres.addEventListener('click', effacerFiltres);
+$('effacer-filtres-vide').addEventListener('click', effacerFiltres);
+
 // ---------------------------------------------------------------------------
 // Fenêtre temporelle et défilement sans fin
 // ---------------------------------------------------------------------------
@@ -321,6 +412,11 @@ refs.libelles.addEventListener('click', (evenement) => {
     return;
   }
 
+  if (cible.dataset.action === 'tag') {
+    basculerTag(cible.dataset.tag);
+    return;
+  }
+
   const idProjet = cible.dataset.projet;
 
   if (cible.dataset.action === 'plier') {
@@ -428,6 +524,8 @@ async function renommerProjet(projet) {
     libelleValider: 'Enregistrer',
     nom: projet.name,
     couleur: projet.color,
+    tags: projet.tags,
+    tagsConnus: tousLesTags(planning),
   });
   if (!reponse) return;
 
@@ -437,6 +535,7 @@ async function renommerProjet(projet) {
       ...p,
       name: reponse.nom,
       color: reponse.couleur,
+      tags: reponse.tags,
     }))
   );
 }
@@ -488,10 +587,18 @@ async function nouveauProjet() {
     titreTexte: 'Nouveau projet',
     libelleValider: 'Créer',
     couleur: COULEURS[planning.projects.length % COULEURS.length],
+    // Un filtre actif préremplit les tags : quand on crée un projet en ne
+    // regardant que les projets « client », c'en est presque toujours un — et
+    // sans cela le nouveau venu naîtrait invisible, hors du filtre courant.
+    tags: tagsActifs,
+    tagsConnus: tousLesTags(planning),
   });
   if (!reponse) return;
 
-  const projet = { ...creerProjet(planning, reponse.nom), color: reponse.couleur };
+  const projet = {
+    ...creerProjet(planning, reponse.nom, reponse.tags),
+    color: reponse.couleur,
+  };
   majPlanning({ ...planning, projects: [...planning.projects, projet] });
 }
 
diff --git a/js/menu.js b/js/menu.js
index fe1d501..2476fc4 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -135,11 +135,22 @@ function positionner(menu, ancre) {
 // ---------------------------------------------------------------------------
 
 /**
- * Demande le nom et la couleur d'un projet.
- * @returns {Promise<{nom: string, couleur: string} | null>} null si annulé.
+ * Demande le nom, la couleur et les tags d'un projet.
+ * @returns {Promise<{nom: string, couleur: string, tags: string[]} | null>} null si annulé.
  */
-export function creerDialogueProjet(refs, couleurs) {
-  const { dialogue, titre, champNom, conteneurCouleurs, erreur, valider } = refs;
+export function creerDialogueProjet(refs, couleurs, outilsTags) {
+  const {
+    dialogue,
+    titre,
+    champNom,
+    conteneurCouleurs,
+    champTags,
+    suggestionsTags,
+    blocSuggestions,
+    erreur,
+    valider,
+  } = refs;
+  const { normaliserTags, cleTag, teinteTag } = outilsTags;
   let choisie = couleurs[0];
 
   function peindrePalette() {
@@ -159,13 +170,59 @@ export function creerDialogueProjet(refs, couleurs) {
     }
   }
 
-  return function demander({ titreTexte, libelleValider, nom = '', couleur = couleurs[0] }) {
+  /** Tags saisis dans le champ, tels qu'ils seront enregistrés. */
+  function tagsSaisis() {
+    return normaliserTags(champTags.value.split(','));
+  }
+
+  /**
+   * Tags déjà employés ailleurs dans le planning, proposés en un clic.
+   *
+   * Sans eux, chaque projet inventerait sa propre orthographe et le filtre se
+   * remplirait de « client », « Clients » et « client final ».
+   */
+  function peindreSuggestions(tagsConnus) {
+    suggestionsTags.replaceChildren();
+    const posees = new Set(tagsSaisis().map(cleTag));
+
+    for (const tag of tagsConnus) {
+      const bouton = document.createElement('button');
+      bouton.type = 'button';
+      bouton.className = 'tag';
+      bouton.style.setProperty('--teinte-tag', String(teinteTag(tag)));
+      bouton.textContent = tag;
+      bouton.setAttribute('aria-pressed', String(posees.has(cleTag(tag))));
+      bouton.addEventListener('click', () => {
+        const restants = tagsSaisis().filter((pose) => cleTag(pose) !== cleTag(tag));
+        const suivants = restants.length === tagsSaisis().length ? [...restants, tag] : restants;
+        champTags.value = normaliserTags(suivants).join(', ');
+        peindreSuggestions(tagsConnus);
+      });
+      suggestionsTags.append(bouton);
+    }
+
+    blocSuggestions.hidden = tagsConnus.length === 0;
+  }
+
+  return function demander({
+    titreTexte,
+    libelleValider,
+    nom = '',
+    couleur = couleurs[0],
+    tags = [],
+    tagsConnus = [],
+  }) {
     titre.textContent = titreTexte;
     valider.textContent = libelleValider;
     champNom.value = nom;
+    champTags.value = tags.join(', ');
     choisie = couleur;
     erreur.hidden = true;
     peindrePalette();
+    peindreSuggestions(tagsConnus);
+
+    const rafraichirSuggestions = () => peindreSuggestions(tagsConnus);
+    champTags.addEventListener('input', rafraichirSuggestions);
 
     dialogue.showModal();
     champNom.focus();
@@ -175,11 +232,12 @@ export function creerDialogueProjet(refs, couleurs) {
       dialogue.addEventListener(
         'close',
         () => {
+          champTags.removeEventListener('input', rafraichirSuggestions);
           // `returnValue` vaut '' quand le dialogue est fermé par Échap.
           if (dialogue.returnValue !== 'ok') return resoudre(null);
           const saisi = champNom.value.trim();
           if (!saisi) return resoudre(null);
-          resoudre({ nom: saisi, couleur: choisie });
+          resoudre({ nom: saisi, couleur: choisie, tags: tagsSaisis() });
         },
         { once: true }
       );
diff --git a/js/timeline.js b/js/timeline.js
index 241c182..ac9b7c8 100644
--- a/js/timeline.js
+++ b/js/timeline.js
@@ -17,12 +17,15 @@ import {
   aujourdhui,
   bornesProjet,
   bornesReference,
+  cleTag,
   deriveProjet,
   dimancheDeLaSemaine,
   ecartJours,
   formulerDerive,
   lundiDeLaSemaine,
+  projetFiltre,
   semaineISO,
+  teinteTag,
   versUTC,
 } from './model.js';
 
@@ -89,19 +92,26 @@ export function creerEchelle(fenetre) {
 /**
  * Reconstruit toute la frise.
  *
+ * Deux tamis s'appliquent aux projets, et ils ne font pas la même chose. Le
+ * **filtre par tags** retire le projet de la vue entière, libellé compris : il
+ * répond à « je ne regarde que les projets clients ». L'**œil** (`hidden`) garde
+ * la ligne de libellé, grisée, et n'ôte que les barres : il répond à « je sais
+ * que ce projet existe, mais il encombre ma frise ».
+ *
  * @param {object} refs      éléments DOM ciblés (libelles, entete, couloirs)
  * @param {object} planning  l'état courant
- * @param {object} options   { fenetre, selection }
+ * @param {object} options   { fenetre, selection, tagsActifs }
  */
-export function rendre(refs, planning, { fenetre, selection }) {
+export function rendre(refs, planning, { fenetre, selection, tagsActifs = [] }) {
   const echelle = creerEchelle(fenetre);
-  const visibles = planning.projects.filter((projet) => !projet.hidden);
+  const retenus = planning.projects.filter((projet) => projetFiltre(projet, tagsActifs));
+  const visibles = retenus.filter((projet) => !projet.hidden);
 
   refs.entete.style.width = `${echelle.largeur}px`;
   refs.couloirs.style.width = `${echelle.largeur}px`;
 
   refs.entete.replaceChildren(...construireEntete(echelle));
-  refs.libelles.replaceChildren(...construireLibelles(planning));
+  refs.libelles.replaceChildren(...construireLibelles(retenus, tagsActifs));
   refs.couloirs.replaceChildren(
     ...construireTraits(echelle, hauteurTotale(visibles)),
     ...construireCouloirs(visibles, echelle, selection)
@@ -271,16 +281,16 @@ export function formaterDateLongue(date) {
 // Colonne des libellés
 // ---------------------------------------------------------------------------
 
-function construireLibelles(planning) {
+function construireLibelles(projets, tagsActifs) {
   const elements = [];
 
-  for (const projet of planning.projects) {
+  for (const projet of projets) {
     if (projet.hidden) {
-      elements.push(libelleProjet(projet));
+      elements.push(libelleProjet(projet, tagsActifs));
       continue;
     }
 
-    elements.push(libelleProjet(projet));
+    elements.push(libelleProjet(projet, tagsActifs));
     if (projet.collapsed) continue;
 
     for (const phase of projet.phases) {
@@ -297,7 +307,7 @@ function construireLibelles(planning) {
   return elements;
 }
 
-function libelleProjet(projet) {
+function libelleProjet(projet, tagsActifs = []) {
   const ligne = document.createElement('div');
   ligne.className = `libelle-projet${projet.hidden ? ' libelle-projet--masque' : ''}`;
   ligne.style.setProperty('--couleur-projet', projet.color);
@@ -318,9 +328,15 @@ function libelleProjet(projet) {
   const nom = document.createElement('span');
   nom.className = 'libelle-projet__nom';
   nom.textContent = projet.name;
-  nom.title = projet.name;
+  // Les pastilles rognent le nom quand la colonne se remplit : l'infobulle
+  // reste le seul endroit où les deux se lisent toujours en entier.
+  nom.title = projet.tags.length
+    ? `${projet.name}\nTags : ${projet.tags.join(', ')}`
+    : projet.name;
   ligne.append(nom);
 
+  if (projet.tags.length) ligne.append(pastillesTags(projet.tags, tagsActifs));
+
   const derive = formulerDerive(deriveProjet(projet));
   if (derive) {
     const etiquette = document.createElement('span');
@@ -358,6 +374,41 @@ function libelleProjet(projet) {
   return ligne;
 }
 
+/**
+ * Pastilles de tags d'un projet, dans sa ligne de libellé.
+ *
+ * Chaque pastille est un bouton : cliquer un tag l'ajoute au filtre, le
+ * recliquer l'en retire. C'est le geste le plus court pour passer d'un projet
+ * repéré à « montre-moi tous ceux qui lui ressemblent », sans remonter à la
+ * barre de filtres.
+ */
+function pastillesTags(tags, tagsActifs) {
+  const conteneur = document.createElement('span');
+  conteneur.className = 'tags';
+
+  // Deux projets peuvent écrire le même tag différemment (« Client », « client ») :
+  // c'est la clé, pas la graphie, qui décide s'il est actif.
+  const clesActives = new Set(tagsActifs.map(cleTag));
+
+  for (const tag of tags) {
+    const pastille = document.createElement('button');
+    pastille.type = 'button';
+    pastille.className = 'tag';
+    pastille.style.setProperty('--teinte-tag', String(teinteTag(tag)));
+    pastille.textContent = tag;
+    pastille.dataset.action = 'tag';
+    pastille.dataset.tag = tag;
+
+    const actif = clesActives.has(cleTag(tag));
+    pastille.setAttribute('aria-pressed', String(actif));
+    pastille.title = actif ? `Retirer « ${tag} » du filtre` : `Filtrer sur « ${tag} »`;
+
+    conteneur.append(pastille);
+  }
+
+  return conteneur;
+}
+
 // ---------------------------------------------------------------------------
 // Couloirs
 // ---------------------------------------------------------------------------