```

✨ feat(devis): Améliore la sélection des produits et options avec modales de recherche

Supprime la relation Product->DevisLine, ajoute des composants de recherche modale pour produits/options dans les devis.
```

assets/libs/SearchProductDevis.js

@@ -0,0 +1,288 @@
+export class SearchOptionsDevis extends HTMLButtonElement {
+    constructor() {
+        super();
+        this.allOptions = [];
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', () => this.openModal());
+    }
+
+    async openModal() {
+        let modal = document.getElementById('modal-search-options');
+        if (!modal) {
+            modal = this.createModalStructure();
+            document.body.appendChild(modal);
+            this.setupSearchEvent(modal);
+        }
+
+        modal.classList.remove('hidden');
+        const container = modal.querySelector('#results-container-options');
+        const searchInput = modal.querySelector('#modal-search-input-options');
+
+        searchInput.value = '';
+        container.innerHTML = '<div class="text-white p-8 text-center animate-pulse tracking-widest text-[10px] uppercase font-black">Chargement des options...</div>';
+
+        try {
+            const response = await fetch('/crm/options/json');
+            this.allOptions = await response.json();
+            this.renderOptions(this.allOptions, container, modal);
+            searchInput.focus();
+        } catch (error) {
+            container.innerHTML = '<div class="text-red-400 p-8 text-center">Erreur catalogue options.</div>';
+        }
+    }
+
+    createModalStructure() {
+        const div = document.createElement('div');
+        div.id = 'modal-search-options';
+        div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md hidden animate-in fade-in duration-300';
+        div.innerHTML = `
+            <div class="bg-slate-900 border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[3rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
+                <div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
+                    <div class="flex justify-between items-center">
+                        <h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
+                            <span class="w-2 h-2 bg-blue-500 rounded-full mr-3 animate-pulse"></span>
+                            Sélection Option
+                        </h3>
+                        <button type="button" onclick="this.closest('#modal-search-options').classList.add('hidden')" class="p-2 text-slate-400 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                        </button>
+                    </div>
+
+                    <div class="relative">
+                        <input type="text" id="modal-search-input-options" placeholder="RECHERCHER UNE OPTION..."
+                               class="w-full bg-slate-950/50 border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-blue-500/20 focus:border-blue-500 transition-all uppercase placeholder:text-slate-600">
+                        <svg class="w-5 h-5 absolute left-4 top-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                        </svg>
+                    </div>
+                </div>
+
+                <div id="results-container-options" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>
+
+                <div class="p-4 bg-white/5 text-center">
+                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest line-clamp-1">Appuyez sur Échap pour fermer</p>
+                </div>
+            </div>
+        `;
+        return div;
+    }
+
+    setupSearchEvent(modal) {
+        const input = modal.querySelector('#modal-search-input-options');
+        const container = modal.querySelector('#results-container-options');
+
+        input.oninput = () => {
+            const query = input.value.toLowerCase().trim();
+            const filtered = this.allOptions.filter(o =>
+                o.name.toLowerCase().includes(query)
+            );
+            this.renderOptions(filtered, container, modal);
+        };
+
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') modal.classList.add('hidden');
+        });
+    }
+
+    renderOptions(options, container, modal) {
+        container.innerHTML = '';
+
+        if (options.length === 0) {
+            container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucune option trouvée</div>';
+            return;
+        }
+
+        options.forEach(option => {
+            const card = document.createElement('div');
+            card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-blue-500/10 hover:border-blue-500/40 transition-all cursor-pointer group animate-in fade-in slide-in-from-bottom-2';
+
+            const imgHtml = option.image
+                ? `<img src="${option.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg group-hover:scale-110 transition-transform" onerror="this.src='/provider/images/favicon.png'">`
+                : `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">OPT</div>`;
+
+            card.innerHTML = `
+                ${imgHtml}
+                <div class="flex-grow">
+                    <div class="text-white font-black text-xs uppercase tracking-wider mb-1">${option.name}</div>
+                    <div class="flex gap-4">
+                        <span class="text-blue-400 text-[10px] font-mono">PRIX HT: ${option.price}€</span>
+                    </div>
+                </div>
+                <div class="w-10 h-10 rounded-full bg-blue-500/0 group-hover:bg-blue-500/20 flex items-center justify-center text-blue-500 transition-all">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                </div>
+            `;
+
+            card.onclick = () => {
+                this.fillOptionLine(option);
+                modal.classList.add('hidden');
+            };
+            container.appendChild(card);
+        });
+    }
+
+    fillOptionLine(option) {
+        // On cherche la ligne parente (ajuste le sélecteur si différent de celui des produits)
+        const row = this.closest('.form-repeater__row');
+        if (row) {
+            // Mapping selon ta structure de DevisOption
+            const nameInput = row.querySelector('input[name*="[product]"]');
+            const priceInput = row.querySelector('input[name*="[price_ht]"]');
+
+            if(nameInput) nameInput.value = option.name;
+            if(priceInput) priceInput.value = option.price;
+
+            // Feedback visuel (Bleu pour les options)
+            const fieldset = row.querySelector('fieldset');
+            if (fieldset) {
+                fieldset.classList.add('border-blue-500/50', 'bg-blue-500/5');
+                setTimeout(() => fieldset.classList.remove('border-blue-500/50', 'bg-blue-500/5'), 800);
+            }
+        }
+    }
+}
+
+export class SearchProductDevis extends HTMLButtonElement {
+    constructor() {
+        super();
+        this.allProducts = []; // Stockage local pour la recherche
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', () => this.openModal());
+    }
+
+    async openModal() {
+        let modal = document.getElementById('modal-search-product');
+        if (!modal) {
+            modal = this.createModalStructure();
+            document.body.appendChild(modal);
+            this.setupSearchEvent(modal);
+        }
+
+        modal.classList.remove('hidden');
+        const container = modal.querySelector('#results-container');
+        const searchInput = modal.querySelector('#modal-search-input');
+
+        searchInput.value = ''; // Reset recherche
+        container.innerHTML = '<div class="text-white p-8 text-center animate-pulse tracking-widest text-[10px] uppercase font-black">Synchronisation catalogue...</div>';
+
+        try {
+            const response = await fetch('/crm/products/json');
+            this.allProducts = await response.json();
+            this.renderProducts(this.allProducts, container, modal);
+            searchInput.focus();
+        } catch (error) {
+            container.innerHTML = '<div class="text-red-400 p-8 text-center">Erreur catalogue.</div>';
+        }
+    }
+
+    createModalStructure() {
+        const div = document.createElement('div');
+        div.id = 'modal-search-product';
+        div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md hidden animate-in fade-in duration-300';
+        div.innerHTML = `
+            <div class="bg-slate-900 border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[3rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
+                <div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
+                    <div class="flex justify-between items-center">
+                        <h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
+                            <span class="w-2 h-2 bg-purple-500 rounded-full mr-3 animate-pulse"></span>
+                            Sélection Produit
+                        </h3>
+                        <button type="button" onclick="this.closest('#modal-search-product').classList.add('hidden')" class="p-2 text-slate-400 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                        </button>
+                    </div>
+
+                    <div class="relative">
+                        <input type="text" id="modal-search-input" placeholder="RECHERCHER UN NOM, UNE RÉFÉRENCE..."
+                               class="w-full bg-slate-950/50 border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-purple-500/20 focus:border-purple-500 transition-all uppercase placeholder:text-slate-600">
+                        <svg class="w-5 h-5 absolute left-4 top-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                        </svg>
+                    </div>
+                </div>
+
+                <div id="results-container" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>
+
+                <div class="p-4 bg-white/5 text-center">
+                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest line-clamp-1">Appuyez sur Échap pour fermer</p>
+                </div>
+            </div>
+        `;
+        return div;
+    }
+
+    setupSearchEvent(modal) {
+        const input = modal.querySelector('#modal-search-input');
+        const container = modal.querySelector('#results-container');
+
+        input.oninput = () => {
+            const query = input.value.toLowerCase().trim();
+            const filtered = this.allProducts.filter(p =>
+                p.name.toLowerCase().includes(query)
+            );
+            this.renderProducts(filtered, container, modal);
+        };
+
+        // Fermeture sur Echap
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') modal.classList.add('hidden');
+        });
+    }
+
+    renderProducts(products, container, modal) {
+        container.innerHTML = '';
+
+        if (products.length === 0) {
+            container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucun produit trouvé</div>';
+            return;
+        }
+
+        products.forEach(product => {
+            const card = document.createElement('div');
+            card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-purple-500/10 hover:border-purple-500/40 transition-all cursor-pointer group animate-in fade-in slide-in-from-bottom-2';
+
+            const imgHtml = product.image
+                ? `<img src="${product.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg group-hover:scale-110 transition-transform">`
+                : `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">IMG</div>`;
+
+            card.innerHTML = `
+                ${imgHtml}
+                <div class="flex-grow">
+                    <div class="text-white font-black text-xs uppercase tracking-wider mb-1">${product.name}</div>
+                    <div class="flex gap-4">
+                        <span class="text-purple-400 text-[10px] font-mono">1J: ${product.price1day}€</span>
+                        <span class="text-slate-500 text-[10px] font-mono">SUP: ${product.priceSup}€</span>
+                        <span class="text-amber-500/80 text-[10px] font-mono">CAUTION: ${product.caution}€</span>
+                    </div>
+                </div>
+                <div class="w-10 h-10 rounded-full bg-purple-500/0 group-hover:bg-purple-500/20 flex items-center justify-center text-purple-500 transition-all">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                </div>
+            `;
+
+            card.onclick = () => {
+                this.fillFormLine(product);
+                modal.classList.add('hidden');
+            };
+            container.appendChild(card);
+        });
+    }
+
+    fillFormLine(product) {
+        const row = this.closest('.form-repeater__row');
+        if (row) {
+            row.querySelector('input[name*="[product]"]').value = product.name;
+            row.querySelector('input[name*="[price_ht]"]').value = product.price1day;
+            row.querySelector('input[name*="[price_sup_ht]"]').value = product.priceSup;
+
+            const fieldset = row.querySelector('fieldset');
+            fieldset.classList.add('border-emerald-500/50', 'bg-emerald-500/5');
+            setTimeout(() => fieldset.classList.remove('border-emerald-500/50', 'bg-emerald-500/5'), 800);
+        }
+    }
+}
+