### 2. Bloc HTML, CSS et JavaScript (Affichage)

```html
<style>
    /* ***************************************************
    *** COPIER/COLLER ICI LE BLOC <style> COMPLET ***
    *** (Identique à la version précédente)         ***
    ***************************************************
    */
        /* Réinitialisation de base pour le widget */
    .newsletter-widget,
    .newsletter-widget * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .newsletter-widget {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
        padding: 28px 32px;
        max-width: 450px;
        margin: 20px auto;
        overflow: hidden;
        border: 1px solid #e9ecef;
        /* Transition pour l'expansion */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* Style lorsque le formulaire est "étendu" */
    .newsletter-widget.expanded {
        background-color: #fcfdff;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

    .newsletter-widget h3 {
        font-size: 24px;
        font-weight: 700;
        color: #212529;
        text-align: center;
        margin-bottom: 20px;
        /* Ajout pour l'icône */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .newsletter-widget h3 svg {
        flex-shrink: 0;
        color: #5a4fcf; /* Couleur de l'icône titre */
    }

    .newsletter-form-group {
        margin-bottom: 16px;
        width: 100%;
    }

    .newsletter-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 6px;
    }

    .newsletter-input {
        width: 100%;
        padding: 12px 14px;
        font-size: 16px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .newsletter-input:focus {
        border-color: #5a4fcf; /* Couleur "pro" */
        box-shadow: 0 0 0 3px rgba(90, 79, 207, 0.15);
        outline: none;
    }
    
    .newsletter-input.other-theme-input {
        display: none;
        margin-top: 10px;
    }

    /* Conteneur pour le bouton et le lien "personnaliser" */
    .newsletter-simple-submit-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
    }

    .newsletter-btn {
        width: 100%;
        padding: 14px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        background-color: #5a4fcf; /* Couleur "pro" */
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.1s;
        /* Ajout pour l'icône */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .newsletter-btn:hover {
        background-color: #4a40b3; /* Hover "pro" */
    }

    .newsletter-btn:active {
        transform: scale(0.98);
    }
    
    .newsletter-btn svg {
        stroke-width: 2.5;
    }

    .newsletter-toggle-link {
        font-size: 14px;
        color: #5a4fcf; /* Couleur "pro" */
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
        /* Ajout pour l'icône */
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
    }

    .newsletter-toggle-link:hover {
        color: #4a40b3;
        text-decoration: underline;
    }

    /* Section avancée (cachée par défaut) */
    .newsletter-advanced-fields {
        display: none;
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Style des thématiques (checkboxes) */
    .newsletter-themes-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-theme-option {
        display: block; /* Changé pour permettre à l'input "Autre" de prendre 100% */
        background: #f8f9fa;
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        transition: background-color 0.2s, border-color 0.2s;
    }
    
    .newsletter-theme-option div {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .newsletter-theme-option:hover {
        background-color: #f1f3f5;
    }

    .newsletter-theme-option input[type="checkbox"] {
        margin-right: 10px;
        width: 18px;
        height: 18px;
        accent-color: #5a4fcf; /* Couleur "pro" */
    }

    .newsletter-theme-option label {
        font-size: 15px;
        font-weight: 500;
        color: #343a40;
        cursor: pointer;
        flex: 1; /* Permet au label de prendre la place */
    }

    /* Conteneur reCAPTCHA */
    .newsletter-recaptcha-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    
    /* Bouton de soumission avancé */
    .newsletter-advanced-submit {
        display: none; /* Caché par défaut */
        margin-top: 20px;
        text-align: center; /* Pour le lien Annuler */
    }
    
    .newsletter-cancel-link {
        display: inline-block;
        margin-top: 14px;
        font-size: 14px;
        color: #6c757d;
        text-decoration: none;
        cursor: pointer;
    }
    
    .newsletter-cancel-link:hover {
        text-decoration: underline;
    }

    /* Lien de politique de confidentialité */
    .newsletter-privacy-link {
        text-align: center;
        margin-top: 24px;
    }

    .newsletter-privacy-link a {
        font-size: 13px;
        color: #6c757d;
        text-decoration: none;
    }

    .newsletter-privacy-link a:hover {
        text-decoration: underline;
    }

    /* Messages de succès et d'erreur */
    .newsletter-message {
        padding: 12px;
        margin-bottom: 16px;
        border-radius: 8px;
        font-size: 14px;
        text-align: center;
    }
    .newsletter-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .newsletter-error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    /* Helper pour l'erreur de thème */
    #themes-error {
        color: #dc3545; 
        font-size: 13px; 
        display: none;
        margin-top: 8px;
    }
    
    
    
    .newsletter-widget,
    .newsletter-widget * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .newsletter-widget {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
        padding: 28px 32px;
        max-width: 450px;
        margin: 20px auto;
        overflow: hidden;
        border: 1px solid #e9ecef;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .newsletter-widget.expanded {
        background-color: #fcfdff;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

    .newsletter-widget h3 {
        font-size: 24px;
        font-weight: 700;
        color: #212529;
        text-align: center;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .newsletter-widget h3 svg {
        flex-shrink: 0;
        color: #5a4fcf;
    }

    .newsletter-form-group {
        margin-bottom: 16px;
        width: 100%;
    }

    .newsletter-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 6px;
    }

    .newsletter-input {
        width: 100%;
        padding: 12px 14px;
        font-size: 16px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .newsletter-input:focus {
        border-color: #5a4fcf;
        box-shadow: 0 0 0 3px rgba(90, 79, 207, 0.15);
        outline: none;
    }
    
    .newsletter-input.other-theme-input {
        display: none;
        margin-top: 10px;
    }

    .newsletter-simple-submit-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
    }

    .newsletter-btn {
        width: 100%;
        padding: 14px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        background-color: #5a4fcf;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.1s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .newsletter-btn:hover {
        background-color: #4a40b3;
    }

    .newsletter-btn:active {
        transform: scale(0.98);
    }
    
    .newsletter-btn svg {
        stroke-width: 2.5;
    }

    .newsletter-toggle-link {
        font-size: 14px;
        color: #5a4fcf;
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
    }

    .newsletter-toggle-link:hover {
        color: #4a40b3;
        text-decoration: underline;
    }

    .newsletter-advanced-fields {
        display: none;
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .newsletter-themes-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-theme-option {
        display: block;
        background: #f8f9fa;
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        transition: background-color 0.2s, border-color 0.2s;
    }
    
    .newsletter-theme-option div {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .newsletter-theme-option:hover {
        background-color: #f1f3f5;
    }

    .newsletter-theme-option input[type="checkbox"] {
        margin-right: 10px;
        width: 18px;
        height: 18px;
        accent-color: #5a4fcf;
    }

    .newsletter-theme-option label {
        font-size: 15px;
        font-weight: 500;
        color: #343a40;
        cursor: pointer;
        flex: 1;
    }

    .newsletter-recaptcha-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    
    .newsletter-advanced-submit {
        display: none;
        margin-top: 20px;
        text-align: center;
    }
    
    .newsletter-cancel-link {
        display: inline-block;
        margin-top: 14px;
        font-size: 14px;
        color: #6c757d;
        text-decoration: none;
        cursor: pointer;
    }
    
    .newsletter-cancel-link:hover {
        text-decoration: underline;
    }

    .newsletter-privacy-link {
        text-align: center;
        margin-top: 24px;
    }

    .newsletter-privacy-link a {
        font-size: 13px;
        color: #6c757d;
        text-decoration: none;
    }

    .newsletter-privacy-link a:hover {
        text-decoration: underline;
    }

    .newsletter-message {
        padding: 12px;
        margin-bottom: 16px;
        border-radius: 8px;
        font-size: 14px;
        text-align: center;
    }
    .newsletter-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .newsletter-error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    #themes-error {
        color: #dc3545; 
        font-size: 13px; 
        display: none;
        margin-top: 8px;
    }
</style>

<div class="newsletter-widget" id="newsletter-widget-container">
    <h3>
        <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="newsletter-icon-title">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
            <polyline points="22,6 12,13 2,6"></polyline>
        </svg>
        Restons en contact !
    </h3>
    <p style="text-align:center; font-size: 15px; color: #495057; margin-bottom: 24px;">
        Recevez nos actualités et nos meilleures offres directement dans votre boîte mail.
    </p>

    <div id="newsletter-status-message" class="newsletter-message" style="display:none;"></div>

    <form id="newsletter-form" novalidate>

        <input type="hidden" name="submit_newsletter_ajax" value="1">
        
        <input type="hidden" name="form_type" id="form_type_input" value="simple">
        
        <div class="newsletter-form-group">
            <label for="newsletter-email" class="newsletter-label">Votre adresse e-mail*</label>
            <input type="email" id="newsletter-email" name="email" class="newsletter-input" placeholder="exemple@domaine.com" required>
        </div>

        <div class="newsletter-advanced-fields" id="newsletter-advanced-fields">
            
            <div class="newsletter-form-group">
                <label for="newsletter-name" class="newsletter-label">Votre nom (facultatif)</label>
                <input type="text" id="newsletter-name" name="name" class="newsletter-input" placeholder="Jean Dupont">
            </div>
            
            <div class="newsletter-form-group">
                <label for="newsletter-country" class="newsletter-label">Pays (facultatif)</label>
                <input type="text" id="newsletter-country" name="country" class="newsletter-input" placeholder="France">
            </div>

            <div class="newsletter-form-group">
                <label class="newsletter-label">Vos thèmes favoris* (au moins 1)</label>
                <div class="newsletter-themes-container" id="themes-container">
                    <div class="newsletter-theme-option">
                        <div>
                            <input type="checkbox" id="theme-news" name="themes[]" value="Actualites">
                            <label for="theme-news">Toutes les actualités</label>
                        </div>
                    </div>
                    <div class="newsletter-theme-option">
                        <div>
                            <input type="checkbox" id="theme-promo" name="themes[]" value="Promotions">
                            <label for="theme-promo">Offres spéciales et promotions</label>
                        </div>
                    </div>
                    <div class="newsletter-theme-option">
                        <div>
                            <input type="checkbox" id="theme-tech" name="themes[]" value="Technologie">
                            <label for="theme-tech">Nouveautés technologiques</label>
                        </div>
                    </div>
                    <div class="newsletter-theme-option">
                        <div>
                            <input type="checkbox" id="theme-other" name="themes[]" value="Autre">
                            <label for="theme-other">Autre</label>
                        </div>
                        <input type="text" id="theme-other-text" name="theme_other_text" class="newsletter-input other-theme-input" placeholder="Veuillez préciser votre thème">
                    </div>
                </div>
                <small id="themes-error">Veuillez sélectionner au moins un thème, ou préciser "Autre".</small>
            </div>

        </div>

        <div class="newsletter-recaptcha-container">
            <div class="g-recaptcha" data-sitekey="6Le_z_crAAAAAPNqsvVi6qh9axhogCk1B7Vec4Im"></div>
        </div>

        <div class="newsletter-simple-submit-area" id="newsletter-simple-submit">
            <button type="submit" class="newsletter-btn" id="submit-btn-simple">
                S'inscrire
                <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="newsletter-icon-btn">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                    <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
            </button>
            <a href="#" class="newsletter-toggle-link" id="newsletter-toggle-advanced">
                Personnaliser mon inscription
                <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="newsletter-icon-toggle">
                    <line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line>
                    <line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line>
                    <line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line>
                    <line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line>
                    <line x1="17" y1="16" x2="23" y2="16"></line>
                </svg>
            </a>
        </div>

        <div class="newsletter-advanced-submit" id="newsletter-advanced-submit">
            <button type="submit" class="newsletter-btn" id="submit-btn-advanced">
                Confirmer mon inscription
                <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="newsletter-icon-btn">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                    <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
            </button>
            <a href="#" class="newsletter-cancel-link" id="newsletter-cancel">Annuler</a>
        </div>

        <div class="newsletter-privacy-link">
            <a href="/politique-de-confidentialite.php" target="_blank">
                Nous respectons votre vie privée. Consultez notre politique de confidentialité.
            </a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Constantes et éléments du DOM
    const form = document.getElementById('newsletter-form');
    const widget = document.getElementById('newsletter-widget-container');
    const toggleLink = document.getElementById('newsletter-toggle-advanced');
    const cancelLink = document.getElementById('newsletter-cancel');
    const advancedFields = document.getElementById('newsletter-advanced-fields');
    const simpleSubmit = document.getElementById('newsletter-simple-submit');
    const advancedSubmit = document.getElementById('newsletter-advanced-submit');
    const formTypeInput = document.getElementById('form_type_input');
    const themesCheckboxes = document.querySelectorAll('#themes-container input[type="checkbox"]');
    const otherCheckbox = document.getElementById('theme-other');
    const otherTextInput = document.getElementById('theme-other-text');
    const themesError = document.getElementById('themes-error');
    const statusMessageDiv = document.getElementById('newsletter-status-message');

    // --- Fonctions d'interface ---

    function resetAdvancedForm() {
        widget.classList.remove('expanded');
        advancedFields.style.display = 'none';
        advancedSubmit.style.display = 'none';
        themesError.style.display = 'none';
        otherTextInput.style.display = 'none';
        simpleSubmit.style.display = 'flex';
        formTypeInput.value = 'simple';
        
        // Réinitialiser les champs spécifiques aux préférences
        document.getElementById('newsletter-name').value = '';
        document.getElementById('newsletter-country').value = '';
        otherTextInput.value = '';
        themesCheckboxes.forEach(cb => cb.checked = false);
    }
    
    function showStatusMessage(message, isSuccess) {
        statusMessageDiv.textContent = message;
        statusMessageDiv.style.display = 'block';
        statusMessageDiv.className = 'newsletter-message ' + (isSuccess ? 'newsletter-success' : 'newsletter-error');
    }

    // --- Écouteurs d'interface ---

    toggleLink.addEventListener('click', function(e) {
        e.preventDefault(); 
        widget.classList.add('expanded');
        advancedFields.style.display = 'block';
        simpleSubmit.style.display = 'none';
        advancedSubmit.style.display = 'block';
        formTypeInput.value = 'advanced';
        statusMessageDiv.style.display = 'none'; // Cacher le message si on personnalise
    });
    
    cancelLink.addEventListener('click', function(e) {
        e.preventDefault();
        resetAdvancedForm();
    });

    otherCheckbox.addEventListener('change', function() {
        if (this.checked) {
            otherTextInput.style.display = 'block';
        } else {
            otherTextInput.style.display = 'none';
            otherTextInput.value = '';
        }
    });

    // --- Logique de soumission AJAX ---

    form.addEventListener('submit', function(e) {
        e.preventDefault(); // EMPÊCHE la soumission classique (qui causerait la redirection)

        // 1. Validation côté client (basique + thèmes)
        const emailInput = document.getElementById('newsletter-email');
        if (!emailInput.value || !emailInput.checkValidity()) {
            showStatusMessage("Veuillez fournir une adresse e-mail valide.", false);
            return;
        }

        if (formTypeInput.value === 'advanced') {
            const checkedThemes = Array.from(themesCheckboxes).filter(cb => cb.checked);
            let isValid = false;
            
            if (checkedThemes.length > 0) {
                if (checkedThemes.length === 1 && checkedThemes[0].id === 'theme-other' && otherTextInput.value.trim() === '') {
                    isValid = false; // 'Autre' seul, mais champ vide
                } else if (checkedThemes.length > 1 && checkedThemes.some(cb => cb.id === 'theme-other') && otherTextInput.value.trim() === '') {
                    isValid = checkedThemes.length > 1; // 'Autre' avec un autre thème, c'est OK même si 'Autre' est vide.
                } else {
                    isValid = true;
                }
            }
            
            if (!isValid) {
                themesError.style.display = 'block';
                showStatusMessage("Veuillez sélectionner au moins un thème, ou préciser 'Autre'.", false);
                return;
            } else {
                themesError.style.display = 'none';
            }
        }
        
        // 2. Préparation et envoi des données via AJAX (Fetch API)
        const formData = new FormData(form);
        const currentUrl = window.location.href; // L'URL de la page actuelle

        // Désactiver les boutons pendant le traitement pour éviter le double clic
        document.getElementById('submit-btn-simple').disabled = true;
        document.getElementById('submit-btn-advanced').disabled = true;
        showStatusMessage("Traitement en cours...", false); // Message d'attente (utilise la couleur error pour neutralité)


        fetch(currentUrl, { // Envoi au même fichier
            method: 'POST',
            body: formData
        })
        .then(response => {
            // Vérifier si c'est bien une réponse JSON (sinon c'est une erreur serveur)
            const contentType = response.headers.get("content-type");
            if (contentType && contentType.indexOf("application/json") !== -1) {
                return response.json();
            } else {
                // Si ce n'est pas du JSON, c'est une erreur PHP ou HTML non gérée (500)
                throw new Error("Réponse du serveur non conforme (HTML au lieu de JSON).");
            }
        })
        .then(data => {
            if (data.success) {
                showStatusMessage(data.message, true);
                form.reset(); 
                resetAdvancedForm();
            } else {
                // Afficher l'erreur retournée par le bloc PHP (ex: reCAPTCHA invalide)
                showStatusMessage(data.message, false);
            }
        })
        .catch(error => {
            console.error('Erreur AJAX:', error);
            showStatusMessage("Une erreur technique est survenue. Le formulaire n'a pas pu être soumis.", false);
        })
        

.finally(() => {
            // Réactiver les boutons et réinitialiser reCAPTCHA
            document.getElementById('submit-btn-simple').disabled = false;
            document.getElementById('submit-btn-advanced').disabled = false;
            if (typeof grecaptcha !== 'undefined') {
                grecaptcha.reset();
            }
        }); // Fin du .finally()
    }); // Fin de form.addEventListener('submit', ...)
}); // Fin de document.addEventListener('DOMContentLoaded', ...)
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>