Turn Compte/Type filters into hover dropdowns, add a clear button to each filter

A native <select multiple> can't collapse to a single-line trigger and
open as an overlay on hover -- it's either an always-open multi-row
list box or a single-value dropdown, not both. Replaced with a custom
dropdown: a trigger showing the current selection ("Tous" / "Maud,
Ouidade"), and a checkbox list shown on hover via a plain CSS :hover
rule (no open/close state needed). Checkboxes instead of ctrl/shift+click,
but same result -- several comptes/types at once -- with a more
discoverable interaction (no keyboard modifier to know about).

Also added a "✕ Effacer ce filtre" button next to Compte/Client/Type/
Année, shown only once that filter is active. Directly addresses the
Client filter specifically being painful to clear (select the text,
delete, press enter) -- one click now.

web/modules/custom/figli_compta_ledger/css/home.css

@@ -58,13 +58,79 @@ html.gin--dark-mode #figli-home-app {
   border-radius: 4px;
 }
 
-/* Compte/Type filters: <select multiple> so ctrl/shift+click can select
-   several values, rendered as a short scrollable list (size="4") rather
-   than the single-line native default -- needs an explicit width, since
-   a multi-row select sizes to its widest option's natural width
-   otherwise, unlike a single-line select's fixed line box. */
-#figli-home-app .figli-toolbar select[multiple] {
+/* Each filter control + its "✕ effacer" button, side by side. */
+#figli-home-app .figli-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+#figli-home-app .figli-filter-clear {
+  background: transparent;
+  border: none;
+  color: var(--figli-text-light);
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1;
+  padding: 0.15rem;
+}
+#figli-home-app .figli-filter-clear:hover {
+  color: var(--figli-error);
+}
+
+/* Compte/Type filters: a native <select multiple> can't collapse to a
+   single-line trigger and expand as an overlay -- it's either a
+   single-line dropdown, or an always-open multi-row list box. Custom
+   dropdown instead: a trigger showing the current selection, and a
+   checkbox list overlay shown on hover (pure CSS, no open/close state
+   needed) -- checkboxes rather than ctrl/shift+click, but same result
+   (several comptes/types at once) with an even more discoverable
+   interaction (no keyboard modifier to know about).*/
+#figli-home-app .figli-multiselect {
+  position: relative;
+}
+#figli-home-app .figli-multiselect-trigger {
+  font-size: 0.85rem;
+  padding: 0.2rem 0.4rem;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
   width: 9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+#figli-home-app .figli-multiselect-arrow {
+  float: right;
+  color: var(--figli-text-light);
+}
+#figli-home-app .figli-multiselect-panel {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  min-width: 100%;
+  white-space: nowrap;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
+  padding: 0.3rem 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+#figli-home-app .figli-multiselect:hover .figli-multiselect-panel {
+  display: block;
+}
+#figli-home-app .figli-multiselect-option {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding: 0.15rem 0;
 }
 
 #figli-home-app .figli-client-input {

web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig

@@ -20,29 +20,51 @@
     {% verbatim %}
 
     <label>Compte
-      <select v-model="filterCompte" multiple size="4" title="Ctrl/Cmd+clic ou Maj+clic pour plusieurs comptes">
-        <option v-for="c in allComptes" :key="c" :value="c">{{ c }}</option>
-      </select>
+      <span class="figli-filter-row">
+        <div class="figli-multiselect">
+          <div class="figli-multiselect-trigger">{{ filterCompte.length ? filterCompte.join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
+          <div class="figli-multiselect-panel">
+            <label v-for="c in allComptes" :key="c" class="figli-multiselect-option">
+              <input type="checkbox" :value="c" v-model="filterCompte" /> {{ c }}
+            </label>
+          </div>
+        </div>
+        <button v-if="filterCompte.length" type="button" class="figli-filter-clear" @click="filterCompte = []" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Client
+      <span class="figli-filter-row">
         <input type="text" v-model.lazy="filterClient" list="figli-client-datalist" placeholder="Tous" autocomplete="off" class="figli-client-input" />
         <datalist id="figli-client-datalist">
           <option v-for="c in allClientsList" :key="c" :value="c"></option>
         </datalist>
+        <button v-if="filterClient" type="button" class="figli-filter-clear" @click="filterClient = ''" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Type
-      <select v-model="filterType" multiple size="4" title="Ctrl/Cmd+clic ou Maj+clic pour plusieurs types">
-        <option v-for="t in allTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
-      </select>
+      <span class="figli-filter-row">
+        <div class="figli-multiselect">
+          <div class="figli-multiselect-trigger">{{ filterType.length ? filterType.map(typeLabel).join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
+          <div class="figli-multiselect-panel">
+            <label v-for="t in allTypes" :key="t.value" class="figli-multiselect-option">
+              <input type="checkbox" :value="t.value" v-model="filterType" /> {{ t.label }}
+            </label>
+          </div>
+        </div>
+        <button v-if="filterType.length" type="button" class="figli-filter-clear" @click="filterType = []" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Année
+      <span class="figli-filter-row">
         <select v-model="filterYear">
           <option value="">Toutes</option>
           <option v-for="y in allYearsList" :key="y" :value="y">{{ y }}</option>
         </select>
+        <button v-if="filterYear" type="button" class="figli-filter-clear" @click="filterYear = ''" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Aller à