```

✨ feat(Product.php): Ajoute la liaison ManyToMany avec l'entité Options
✨ feat(Devis.php): Ajoute la propriété isNotAddCaution pour masquer la caution
♻️ refactor(.env): Met à jour les URLs de SIGN, STRIPE et CONTRAT
✨ feat(workflow.twig): Adapte le workflow et supprime l'étape de caution
✨ feat(NewDevisType.php): Ajoute un champ pour gérer

assets/admin.js

@@ -8,10 +8,12 @@ import { CrmEditor } from "./libs/CrmEditor.js";
 import { initTomSelect } from "./libs/initTomSelect.js";
 import { SearchProduct, SearchOptions } from "./libs/SearchProduct.js";
 import { SearchProductDevis, SearchOptionsDevis } from "./libs/SearchProductDevis.js";
+import { SearchOptionsProduct } from "./libs/SearchProductProduct.js";
 import { SearchProductFormule, SearchOptionsFormule } from "./libs/SearchProductFormule.js";
 import PlaningLogestics from "./libs/PlaningLogestics.js";
 import {SortableReorder} from "./libs/SortableReorder.js";
 import { StripeCommissionCalculator } from "./libs/StripeCommissionCalculator.js";
+import { ProductAddOption } from "./libs/ProductAddOption.js";
 
 // --- CONFIGURATION SENTRY ---
 Sentry.init({
@@ -34,12 +36,14 @@ const registerCustomElements = () => {
         { name: 'search-product', class: SearchProduct, extends: 'button' },
         { name: 'search-productformule', class: SearchProductFormule, extends: 'button' },
         { name: 'search-optionsformule', class: SearchOptionsFormule, extends: 'button' },
+        { name: 'search-optionsproduct', class: SearchOptionsProduct, extends: 'button' },
         { name: 'planing-logestics', class: PlaningLogestics },
         { name: 'search-options', class: SearchOptions, extends: 'button' },
         { name: 'search-productdevis', class: SearchProductDevis, extends: 'button' },
         { name: 'search-optionsdevis', class: SearchOptionsDevis, extends: 'button' },
         { name: 'crm-editor', class: CrmEditor, extends: 'textarea' },
-        { name: 'stripe-commission-calculator', class: StripeCommissionCalculator, extends: 'div' }
+        { name: 'stripe-commission-calculator', class: StripeCommissionCalculator, extends: 'div' },
+        { name: 'product-add-option', class: ProductAddOption, extends: 'button' }
     ];
 
     elements.forEach(el => {

assets/libs/ProductAddOption.js

@@ -0,0 +1,24 @@
+
+export class ProductAddOption extends HTMLButtonElement {
+    constructor() {
+        super();
+        this.addEventListener('click', this.handleClick.bind(this));
+    }
+
+    handleClick(e) {
+        e.preventDefault();
+        
+        const inputId = this.getAttribute('data-input-id');
+        const baseUrl = this.getAttribute('data-url');
+        const input = document.getElementById(inputId);
+
+        if (input && input.value) {
+            // The base URL comes from Twig path() which includes ?act=addOption
+            // We safely append the idOption parameter
+            window.location.href = `${baseUrl}&idOption=${input.value}`;
+        } else {
+            // Visual feedback could be added here (e.g., shake effect or border color)
+            alert("Veuillez sélectionner une option avant d'ajouter.");
+        }
+    }
+}

assets/libs/SearchProductProduct.js

@@ -0,0 +1,146 @@
+export class SearchOptionsProduct extends HTMLButtonElement{
+    constructor() {
+        super();
+        this.allOptions = [];
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            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="flex flex-col items-center justify-center p-12 text-slate-500">
+                <div class="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
+                <p class="text-[10px] font-black uppercase tracking-[0.2em]">Chargement des options...</p>
+            </div>
+        `;
+
+        try {
+            const response = await fetch('/crm/options/json');
+            this.allOptions = await response.json();
+            this.renderOptions(this.allOptions, container, modal);
+            setTimeout(() => searchInput.focus(), 100);
+        } catch (error) {
+            container.innerHTML = '<div class="text-rose-500 p-8 text-center text-xs font-bold uppercase">Erreur de liaison 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-[#0f172a]/90 backdrop-blur-md hidden animate-in fade-in duration-300';
+        div.innerHTML = `
+            <div class="bg-[#1e293b] border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[2.5rem] 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 shadow-[0_0_8px_#3b82f6]"></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.5" d="M6 18L18 6M6 6l12 12"/></svg>
+                        </button>
+                    </div>
+
+                    <div class="relative">
+                        <input type="text" id="modal-search-input-options" placeholder="RECHERCHER DANS LE CATALOGUE..."
+                               class="w-full bg-[#0f172a] border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all uppercase placeholder:text-slate-700 outline-none">
+                        <svg class="w-5 h-5 absolute left-4 top-4 text-slate-600" 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 border-t border-white/5">
+                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest">Appuyez sur Échap pour annuler</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-600/10 hover:border-blue-500/40 transition-all cursor-pointer group animate-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 border border-white/10 group-hover:scale-105 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-500 text-[10px] font-black uppercase tracking-tighter">PRIX HT: ${option.price}€</span>
+                    </div>
+                </div>
+                <div class="w-10 h-10 rounded-xl bg-slate-800 group-hover:bg-blue-600 flex items-center justify-center text-slate-500 group-hover:text-white transition-all shadow-lg">
+                    <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) {
+        const row = this.closest('.w-fulla');
+        if (row) {
+            const nameInput = row.querySelector('#selected-option-name');
+            const nameid = row.querySelector('#selected-option-id');
+            if(nameInput) nameInput.value = option.name;
+            if(nameid) nameid.value = option.id;
+
+            const fieldset = row.querySelector('fieldset');
+            if (fieldset) {
+                fieldset.classList.add('border-blue-500/50', 'bg-blue-600/5');
+                setTimeout(() => fieldset.classList.remove('border-blue-500/50', 'bg-blue-600/5'), 800);
+            }
+        }
+    }
+}