feat: add criteria toolbar with selection controls and add-criterion input

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/Bilan.css

@@ -435,6 +435,107 @@
   color: var(--text-muted) !important;
 }
 
+.criteria-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 4px;
+  margin-bottom: 20px;
+  gap: 16px;
+}
+
+.criteria-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-text {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  transition: var(--transition);
+  border-radius: var(--radius-sm);
+  box-shadow: none;
+}
+
+.btn-text:hover {
+  color: var(--color-indigo-600);
+  background: var(--color-indigo-50);
+  transform: none;
+  box-shadow: none;
+}
+
+.toolbar-sep {
+  color: var(--border-slate-300);
+  font-size: 14px;
+  user-select: none;
+}
+
+.criteria-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbar-add-input {
+  height: 34px;
+  width: 240px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-slate-200);
+  background: #ffffff;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: var(--transition);
+  box-shadow: var(--shadow-flat);
+}
+
+.toolbar-add-input::placeholder {
+  color: var(--text-muted);
+}
+
+.toolbar-add-input:focus {
+  border-color: var(--color-indigo-500);
+  box-shadow: 0 0 0 3px rgba(98, 95, 255, 0.1);
+}
+
+.btn-toolbar-add {
+  height: 34px;
+  width: 34px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-slate-300);
+  background: #ffffff;
+  color: var(--text-secondary);
+  font-size: 20px;
+  font-weight: 300;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition);
+  box-shadow: var(--shadow-flat);
+  line-height: 1;
+  padding: 0;
+}
+
+.btn-toolbar-add:hover {
+  background: var(--color-indigo-50);
+  border-color: var(--color-indigo-500);
+  color: var(--color-indigo-600);
+  transform: none;
+  box-shadow: var(--shadow-flat);
+}
+
 .competences-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

src/components/Bilan.jsx

@@ -979,6 +979,43 @@ ${notesFormateur}`,
       </header>
 
       <main className="app-main">
+        <div className="criteria-toolbar">
+          <div className="criteria-toolbar-left">
+            <button
+              type="button"
+              className="btn-text"
+              onClick={() => handleToggleAll(true)}
+            >
+              Tout sélectionner
+            </button>
+            <span className="toolbar-sep">·</span>
+            <button
+              type="button"
+              className="btn-text"
+              onClick={() => handleToggleAll(false)}
+            >
+              Tout désélectionner
+            </button>
+          </div>
+          <div className="criteria-toolbar-right">
+            <input
+              className="toolbar-add-input"
+              placeholder="Ajouter un critère…"
+              value={newCriterion}
+              onChange={(event) => setNewCriterion(event.target.value)}
+              onKeyDown={(event) => event.key === "Enter" && handleAddCriterion()}
+            />
+            <button
+              type="button"
+              className="btn-toolbar-add"
+              onClick={handleAddCriterion}
+              title="Ajouter"
+            >
+              +
+            </button>
+          </div>
+        </div>
+
         <div className="competences-grid">
           {bucketOrder.map((bucket) => {
             const itemsInBucket = items.filter((item) => item.bucket === bucket);