Le dictionnaire du vocabulaire de la voix

 .search-container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .search-form {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }
        
        @media (min-width: 768px) {
            .search-form {
                flex-direction: row;
                gap: 15px;
            }
        }
        
        .search-input {
            flex-grow: 1;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
            margin-bottom: 15px;
        }
        
        @media (min-width: 768px) {
            .search-input {
                margin-bottom: 0;
            }
        }
        
        .search-button {
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
         .search-button:hover {
            background-color: #1d4ed8;
        }
        
        .highlight-option {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #4b5563;
        }
        
        .highlight-checkbox {
            margin-right: 8px;
            width: 18px;
            height: 18px;
        }
        
        .results-info {
            color: #4b5563;
            font-weight: 500;
            margin-bottom: 15px;
            display: none;
        }
        
        .results-count {
            color: #2563eb;
        }
        
        .dictionary-content-container {
            background-color: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 15px;
            max-height: 60vh;
            overflow-y: auto;
        }
         .dictionary-content {
            line-height: 1.6;
        }
        
        .dictionary-entry {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .dictionary-entry:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .term {
            color: #1e40af;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 8px;
        }
        
        .definition {
            margin-bottom: 8px;
        }
        
        .highlight {
            background-color: #fef08a;
            padding: 1px 2px;
            border-radius: 2px;
        }
        
        .dictionary-footer {
            text-align: center;
            color: #6b7280;
            margin-top: 20px;
            font-size: 14px;
        }
    

 let content = originalContent;
                let count = 0;
                
                if (highlightMatches.checked) {
                    // Escape special characters in the search term for regex
                    const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const regex = new RegExp(`(${escapedSearchTerm})`, 'gi');
                    
                    content = content.replace(regex, (match) => {
                        count++;
                        return `${match}`;
                    });
                } else {
                    // Just count occurrences without highlighting
                    const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const regex = new RegExp(escapedSearchTerm, 'gi');
                    let match;
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = content;
                    const tempText = tempDiv.textContent;
                    while ((match = regex.exec(tempText)) !== null) {
                        count++;
                    }
                }
                
                dictionaryContent.innerHTML = content;
                resultCount.textContent = count;
                results.style.display = 'block';
                
                // Scroll to first match if exists
                setTimeout(() => {
                    const firstMatch = document.querySelector('.highlight');
                    if (firstMatch) {
                        firstMatch.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }, 100);
            }
            
            searchButton.addEventListener('click', performSearch);
            searchInput.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') {
                    performSearch();
                }
            });
            
            highlightMatches.addEventListener('change', function() {
                if (searchInput.value.trim() !== '') {
                    performSearch();
                }
            });
        });
    