✉️ Feature: Epic 5 - Formulaire de Contact (Stories 5.1-5.7)

- Formulaire HTML5 avec validation (nom, prénom, email, entreprise, catégorie, objet, message)
- Validation JavaScript côté client (FormValidator)
- Persistance localStorage des données (AppState)
- Intégration reCAPTCHA v3 avec dégradation gracieuse
- Traitement PHP sécurisé (CSRF, validation, envoi email)
- Feedback utilisateur AJAX (succès/erreur)
- Liens contact secondaires (LinkedIn, GitHub, Email protégé)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

api/contact.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Endpoint de traitement du formulaire de contact
+ * Reçoit les données en JSON, valide, vérifie reCAPTCHA, envoie l'email
+ */
+
+require_once __DIR__ . '/../includes/config.php';
+require_once __DIR__ . '/../includes/functions.php';
+
+// Démarrer la session pour le CSRF
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
+// Headers
+header('Content-Type: application/json; charset=utf-8');
+header('X-Content-Type-Options: nosniff');
+
+// Uniquement POST
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['success' => false, 'error' => 'Méthode non autorisée']);
+    exit;
+}
+
+// Récupérer les données JSON
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!$input) {
+    http_response_code(400);
+    echo json_encode(['success' => false, 'error' => 'Données invalides']);
+    exit;
+}
+
+try {
+    // 1. Valider le token CSRF
+    if (!verifyCsrfToken($input['csrf_token'] ?? '')) {
+        throw new Exception('Token de sécurité invalide. Veuillez rafraîchir la page.');
+    }
+
+    // 2. Vérifier reCAPTCHA
+    $recaptchaScore = verifyRecaptcha($input['recaptcha_token'] ?? '');
+    if ($recaptchaScore < RECAPTCHA_THRESHOLD) {
+        error_log("reCAPTCHA score trop bas: {$recaptchaScore}");
+        throw new Exception('Vérification anti-spam échouée. Veuillez réessayer.');
+    }
+
+    // 3. Valider et nettoyer les données
+    $data = validateContactData($input);
+
+    // 4. Envoyer l'email
+    $sent = sendContactEmail($data);
+
+    if (!$sent) {
+        throw new Exception('Erreur lors de l\'envoi du message. Veuillez réessayer plus tard.');
+    }
+
+    // 5. Succès
+    echo json_encode([
+        'success' => true,
+        'message' => 'Votre message a bien été envoyé ! Je vous répondrai dans les meilleurs délais.'
+    ]);
+
+} catch (Exception $e) {
+    http_response_code(400);
+    echo json_encode([
+        'success' => false,
+        'error' => $e->getMessage()
+    ]);
+}

assets/js/contact-form.js

@@ -0,0 +1,561 @@
+/**
+ * Validation du formulaire de contact
+ * JavaScript vanilla - pas de dépendances
+ */
+
+/**
+ * Service reCAPTCHA v3
+ * Gestion du token avec dégradation gracieuse
+ */
+const RecaptchaService = {
+    siteKey: null,
+
+    init() {
+        this.siteKey = window.RECAPTCHA_SITE_KEY || null;
+    },
+
+    isAvailable() {
+        return this.siteKey && typeof grecaptcha !== 'undefined';
+    },
+
+    /**
+     * Obtient un token reCAPTCHA
+     * @param {string} action - Action à valider (ex: 'contact')
+     * @returns {Promise<string>} - Token ou chaîne vide si indisponible
+     */
+    async getToken(action = 'contact') {
+        // Dégradation gracieuse si reCAPTCHA non disponible
+        if (!this.isAvailable()) {
+            console.warn('reCAPTCHA non disponible, envoi sans protection');
+            return '';
+        }
+
+        return new Promise((resolve) => {
+            grecaptcha.ready(() => {
+                grecaptcha.execute(this.siteKey, { action })
+                    .then(token => resolve(token))
+                    .catch(error => {
+                        console.error('Erreur reCAPTCHA:', error);
+                        resolve(''); // Permettre l'envoi quand même
+                    });
+            });
+        });
+    }
+};
+
+class FormValidator {
+    constructor(formId) {
+        this.form = document.getElementById(formId);
+        if (!this.form) return;
+
+        this.submitBtn = document.getElementById('submit-btn');
+        this.submitText = document.getElementById('submit-text');
+        this.submitLoading = document.getElementById('submit-loading');
+        this.fields = {};
+        this.errors = {};
+
+        this.init();
+    }
+
+    init() {
+        // Définir les règles de validation
+        this.rules = {
+            nom: {
+                required: true,
+                minLength: 2,
+                maxLength: 100,
+                message: 'Veuillez entrer votre nom (2 caractères minimum)'
+            },
+            prenom: {
+                required: true,
+                minLength: 2,
+                maxLength: 100,
+                message: 'Veuillez entrer votre prénom (2 caractères minimum)'
+            },
+            email: {
+                required: true,
+                email: true,
+                message: 'Veuillez entrer une adresse email valide'
+            },
+            categorie: {
+                required: true,
+                message: 'Veuillez sélectionner une catégorie'
+            },
+            objet: {
+                required: true,
+                minLength: 5,
+                maxLength: 200,
+                message: 'Veuillez entrer un objet (5 caractères minimum)'
+            },
+            message: {
+                required: true,
+                minLength: 20,
+                maxLength: 5000,
+                message: 'Veuillez entrer votre message (20 caractères minimum)'
+            }
+        };
+
+        // Récupérer les champs
+        Object.keys(this.rules).forEach(fieldName => {
+            this.fields[fieldName] = this.form.querySelector(`[name="${fieldName}"]`);
+        });
+
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        // Validation au blur
+        Object.keys(this.fields).forEach(fieldName => {
+            const field = this.fields[fieldName];
+            if (field) {
+                field.addEventListener('blur', () => this.validateField(fieldName));
+                field.addEventListener('input', () => {
+                    // Effacer l'erreur pendant la saisie
+                    if (this.errors[fieldName]) {
+                        this.clearError(fieldName);
+                    }
+                });
+            }
+        });
+
+        // Validation à la soumission
+        this.form.addEventListener('submit', (e) => this.handleSubmit(e));
+
+        // Compteur de caractères pour le message
+        const messageField = this.fields.message;
+        if (messageField) {
+            messageField.addEventListener('input', () => this.updateCharCount());
+        }
+
+        // Bouton reset
+        this.form.addEventListener('reset', () => {
+            setTimeout(() => {
+                this.clearAllErrors();
+                this.updateCharCount();
+            }, 10);
+        });
+    }
+
+    validateField(fieldName) {
+        const field = this.fields[fieldName];
+        const rule = this.rules[fieldName];
+
+        if (!field || !rule) return true;
+
+        const value = field.value.trim();
+        let isValid = true;
+        let errorMessage = '';
+
+        // Required
+        if (rule.required && !value) {
+            isValid = false;
+            errorMessage = rule.message;
+        }
+
+        // Min length
+        if (isValid && rule.minLength && value.length < rule.minLength) {
+            isValid = false;
+            errorMessage = rule.message;
+        }
+
+        // Max length
+        if (isValid && rule.maxLength && value.length > rule.maxLength) {
+            isValid = false;
+            errorMessage = `Maximum ${rule.maxLength} caractères`;
+        }
+
+        // Email format
+        if (isValid && rule.email && value) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(value)) {
+                isValid = false;
+                errorMessage = rule.message;
+            }
+        }
+
+        // Afficher ou masquer l'erreur
+        if (isValid) {
+            this.clearError(fieldName);
+        } else {
+            this.showError(fieldName, errorMessage);
+        }
+
+        this.errors[fieldName] = !isValid;
+        this.updateSubmitButton();
+
+        return isValid;
+    }
+
+    validateAll() {
+        let allValid = true;
+
+        Object.keys(this.rules).forEach(fieldName => {
+            if (!this.validateField(fieldName)) {
+                allValid = false;
+            }
+        });
+
+        return allValid;
+    }
+
+    showError(fieldName, message) {
+        const field = this.fields[fieldName];
+        const errorEl = this.form.querySelector(`[data-error="${fieldName}"]`);
+
+        if (field) {
+            field.classList.add('border-red-500', 'focus:ring-red-500/50', 'focus:border-red-500');
+            field.classList.remove('border-border', 'focus:ring-primary/50', 'focus:border-primary');
+            field.setAttribute('aria-invalid', 'true');
+        }
+
+        if (errorEl) {
+            errorEl.textContent = message;
+            errorEl.classList.remove('hidden');
+        }
+    }
+
+    clearError(fieldName) {
+        const field = this.fields[fieldName];
+        const errorEl = this.form.querySelector(`[data-error="${fieldName}"]`);
+
+        if (field) {
+            field.classList.remove('border-red-500', 'focus:ring-red-500/50', 'focus:border-red-500');
+            field.classList.add('border-border', 'focus:ring-primary/50', 'focus:border-primary');
+            field.removeAttribute('aria-invalid');
+        }
+
+        if (errorEl) {
+            errorEl.textContent = '';
+            errorEl.classList.add('hidden');
+        }
+
+        this.errors[fieldName] = false;
+        this.updateSubmitButton();
+    }
+
+    clearAllErrors() {
+        Object.keys(this.rules).forEach(fieldName => {
+            this.clearError(fieldName);
+        });
+    }
+
+    updateSubmitButton() {
+        const hasErrors = Object.values(this.errors).some(err => err);
+
+        if (this.submitBtn) {
+            this.submitBtn.disabled = hasErrors;
+        }
+    }
+
+    updateCharCount() {
+        const messageField = this.fields.message;
+        const countEl = document.getElementById('message-count');
+
+        if (messageField && countEl) {
+            countEl.textContent = messageField.value.length;
+        }
+    }
+
+    setLoading(isLoading) {
+        if (this.submitBtn) {
+            this.submitBtn.disabled = isLoading;
+        }
+        if (this.submitText) {
+            this.submitText.classList.toggle('hidden', isLoading);
+        }
+        if (this.submitLoading) {
+            this.submitLoading.classList.toggle('hidden', !isLoading);
+            if (isLoading) {
+                this.submitLoading.classList.add('flex');
+            } else {
+                this.submitLoading.classList.remove('flex');
+            }
+        }
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        if (!this.validateAll()) {
+            // Focus sur le premier champ en erreur
+            const firstError = Object.keys(this.errors).find(key => this.errors[key]);
+            if (firstError && this.fields[firstError]) {
+                this.fields[firstError].focus();
+            }
+            return;
+        }
+
+        // Si valide, déclencher l'envoi
+        this.form.dispatchEvent(new CustomEvent('validSubmit', {
+            detail: this.getFormData()
+        }));
+    }
+
+    getFormData() {
+        const formData = {};
+        Object.keys(this.fields).forEach(fieldName => {
+            if (this.fields[fieldName]) {
+                formData[fieldName] = this.fields[fieldName].value.trim();
+            }
+        });
+        // Ajouter le champ entreprise (optionnel)
+        const entreprise = this.form.querySelector('[name="entreprise"]');
+        if (entreprise) {
+            formData.entreprise = entreprise.value.trim();
+        }
+        // Ajouter le token CSRF
+        const csrfToken = this.form.querySelector('[name="csrf_token"]');
+        if (csrfToken) {
+            formData.csrf_token = csrfToken.value;
+        }
+        return formData;
+    }
+}
+
+/**
+ * Gestionnaire de persistance du formulaire
+ * Sauvegarde/restaure les données via localStorage
+ */
+class ContactFormPersistence {
+    constructor(formId) {
+        this.form = document.getElementById(formId);
+        if (!this.form) return;
+
+        this.debounceTimer = null;
+        this.init();
+    }
+
+    init() {
+        this.loadSavedData();
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        // Sauvegarder à chaque modification (avec debounce de 500ms)
+        this.form.addEventListener('input', () => {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => this.saveData(), 500);
+        });
+
+        // Bouton effacer
+        const clearBtn = document.getElementById('clear-form-btn');
+        if (clearBtn) {
+            clearBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.clearForm();
+            });
+        }
+
+        // Écouter l'envoi réussi (dispatché par le handler AJAX)
+        this.form.addEventListener('formSuccess', () => {
+            AppState.clearFormData();
+        });
+    }
+
+    saveData() {
+        const formData = new FormData(this.form);
+        const data = {};
+
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+
+        AppState.saveFormData(data);
+    }
+
+    loadSavedData() {
+        const savedData = AppState.getFormData();
+        if (!savedData) return;
+
+        Object.keys(savedData).forEach(key => {
+            const field = this.form.querySelector(`[name="${key}"]`);
+            if (field && savedData[key]) {
+                field.value = savedData[key];
+            }
+        });
+
+        // Mettre à jour le compteur de caractères
+        const messageField = this.form.querySelector('[name="message"]');
+        const countEl = document.getElementById('message-count');
+        if (messageField && countEl) {
+            countEl.textContent = messageField.value.length;
+        }
+    }
+
+    clearForm() {
+        // Confirmation
+        if (!confirm('Êtes-vous sûr de vouloir effacer le formulaire ?')) {
+            return;
+        }
+
+        // Vider le localStorage
+        AppState.clearFormData();
+
+        // Réinitialiser le formulaire
+        this.form.reset();
+
+        // Réinitialiser le compteur
+        const countEl = document.getElementById('message-count');
+        if (countEl) {
+            countEl.textContent = '0';
+        }
+
+        // Effacer les erreurs visuelles
+        this.form.querySelectorAll('.border-red-500').forEach(el => {
+            el.classList.remove('border-red-500', 'focus:ring-red-500/50', 'focus:border-red-500');
+            el.classList.add('border-border', 'focus:ring-primary/50', 'focus:border-primary');
+            el.removeAttribute('aria-invalid');
+        });
+        this.form.querySelectorAll('[data-error]').forEach(el => {
+            el.classList.add('hidden');
+            el.textContent = '';
+        });
+
+        // Réactiver le bouton submit
+        const submitBtn = document.getElementById('submit-btn');
+        if (submitBtn) {
+            submitBtn.disabled = false;
+        }
+    }
+}
+
+/**
+ * Gestionnaire d'envoi AJAX du formulaire
+ * Gère le loading, succès et erreurs
+ */
+class ContactFormSubmit {
+    constructor(formId) {
+        this.form = document.getElementById(formId);
+        if (!this.form) return;
+
+        this.submitBtn = document.getElementById('submit-btn');
+        this.submitText = document.getElementById('submit-text');
+        this.submitLoading = document.getElementById('submit-loading');
+        this.successMessage = document.getElementById('success-message');
+        this.errorMessage = document.getElementById('error-message');
+        this.errorText = document.getElementById('error-text');
+
+        this.isSubmitting = false;
+
+        this.init();
+    }
+
+    init() {
+        // Écouter l'événement de validation réussie
+        this.form.addEventListener('validSubmit', (e) => this.handleSubmit(e.detail));
+    }
+
+    async handleSubmit(formData) {
+        if (this.isSubmitting) return;
+
+        this.setLoadingState(true);
+        this.hideMessages();
+
+        try {
+            // Ajouter le token CSRF
+            const csrfInput = this.form.querySelector('[name="csrf_token"]');
+            if (csrfInput) {
+                formData.csrf_token = csrfInput.value;
+            }
+
+            // Obtenir le token reCAPTCHA
+            formData.recaptcha_token = await RecaptchaService.getToken('contact');
+
+            // Envoyer la requête
+            const response = await fetch('/api/contact.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify(formData)
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                this.handleSuccess(result.message);
+            } else {
+                this.handleError(result.error || 'Une erreur est survenue');
+            }
+
+        } catch (error) {
+            console.error('Erreur envoi formulaire:', error);
+            this.handleError('Impossible de contacter le serveur. Vérifiez votre connexion.');
+        } finally {
+            this.setLoadingState(false);
+        }
+    }
+
+    setLoadingState(loading) {
+        this.isSubmitting = loading;
+
+        if (this.submitBtn) {
+            this.submitBtn.disabled = loading;
+        }
+
+        if (this.submitText && this.submitLoading) {
+            if (loading) {
+                this.submitText.classList.add('hidden');
+                this.submitLoading.classList.remove('hidden');
+                this.submitLoading.classList.add('flex');
+            } else {
+                this.submitText.classList.remove('hidden');
+                this.submitLoading.classList.add('hidden');
+                this.submitLoading.classList.remove('flex');
+            }
+        }
+    }
+
+    handleSuccess(message) {
+        // Masquer le formulaire
+        this.form.classList.add('hidden');
+
+        // Afficher le message de succès
+        if (this.successMessage) {
+            this.successMessage.classList.remove('hidden');
+
+            // Scroll vers le message
+            this.successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+
+        // Vider le localStorage
+        AppState.clearFormData();
+
+        // Réinitialiser le formulaire (pour un éventuel nouvel envoi)
+        this.form.reset();
+
+        // Déclencher l'événement de succès
+        this.form.dispatchEvent(new CustomEvent('formSuccess'));
+    }
+
+    handleError(message) {
+        // Afficher le message d'erreur
+        if (this.errorMessage && this.errorText) {
+            this.errorText.textContent = message;
+            this.errorMessage.classList.remove('hidden');
+
+            // Scroll vers le message
+            this.errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+
+        // Les données sont conservées dans le formulaire pour réessayer
+    }
+
+    hideMessages() {
+        if (this.successMessage) {
+            this.successMessage.classList.add('hidden');
+        }
+        if (this.errorMessage) {
+            this.errorMessage.classList.add('hidden');
+        }
+    }
+}
+
+// Initialisation
+document.addEventListener('DOMContentLoaded', () => {
+    RecaptchaService.init();
+    window.contactFormValidator = new FormValidator('contact-form');
+    window.contactFormPersistence = new ContactFormPersistence('contact-form');
+    window.contactFormSubmit = new ContactFormSubmit('contact-form');
+});

assets/js/main.js

@@ -2,9 +2,9 @@
 // Script principal du portfolio
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('Portfolio chargé');
     initMobileMenu();
     initNavbarScroll();
+    initEmailProtection();
 });
 
 /**
@@ -85,3 +85,21 @@ function initNavbarScroll() {
         }
     }, { passive: true });
 }
+
+/**
+ * Protection de l'email contre le scraping
+ * Reconstruit l'adresse email à partir de data-attributes
+ */
+function initEmailProtection() {
+    const emailLink = document.getElementById('email-link');
+    if (!emailLink) return;
+
+    const user = emailLink.dataset.user;
+    const domain = emailLink.dataset.domain;
+
+    if (user && domain) {
+        const email = `${user}@${domain}`;
+        emailLink.href = `mailto:${email}`;
+        emailLink.title = email;
+    }
+}

assets/js/state.js

@@ -0,0 +1,76 @@
+/**
+ * Gestionnaire d'état pour le localStorage
+ * Persiste les données du formulaire de contact
+ */
+
+const AppState = {
+    STORAGE_KEY: 'portfolio_contact_form',
+
+    // Champs à ne jamais stocker (sécurité)
+    EXCLUDED_FIELDS: ['csrf_token', 'password', 'recaptcha_token'],
+
+    /**
+     * Vérifie si localStorage est disponible
+     */
+    isStorageAvailable() {
+        try {
+            const test = '__storage_test__';
+            localStorage.setItem(test, test);
+            localStorage.removeItem(test);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    },
+
+    /**
+     * Sauvegarde les données du formulaire
+     * @param {Object} data - Données du formulaire
+     */
+    saveFormData(data) {
+        if (!this.isStorageAvailable()) return;
+
+        try {
+            // Filtrer les champs exclus
+            const filteredData = {};
+            Object.keys(data).forEach(key => {
+                if (!this.EXCLUDED_FIELDS.includes(key)) {
+                    filteredData[key] = data[key];
+                }
+            });
+
+            localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filteredData));
+        } catch (e) {
+            console.warn('Impossible de sauvegarder dans localStorage:', e);
+        }
+    },
+
+    /**
+     * Charge les données sauvegardées
+     * @returns {Object|null} Données ou null si absentes
+     */
+    getFormData() {
+        if (!this.isStorageAvailable()) return null;
+
+        try {
+            const data = localStorage.getItem(this.STORAGE_KEY);
+            return data ? JSON.parse(data) : null;
+        } catch (e) {
+            console.warn('Impossible de charger depuis localStorage:', e);
+            return null;
+        }
+    },
+
+    /**
+     * Efface les données sauvegardées
+     */
+    clearFormData() {
+        if (!this.isStorageAvailable()) return;
+
+        try {
+            localStorage.removeItem(this.STORAGE_KEY);
+        } catch (e) {
+            // Silencieux
+        }
+    }
+};

data/projects.json

@@ -2,17 +2,17 @@
   "projects": [
     {
       "id": 1,
-      "title": "Site E-commerce XYZ",
-      "slug": "ecommerce-xyz",
+      "title": "Aéroclub de Saint-Dié-des-Vosges - Site association d'aéronotique",
+      "slug": "acsaintdie",
       "category": "vedette",
-      "thumbnail": "ecommerce-xyz-thumb.webp",
-      "url": "https://example.com",
-      "github": "https://github.com/user/project",
-      "technologies": ["PHP", "JavaScript", "Tailwind CSS", "MySQL"],
-      "context": "Client souhaitant moderniser sa boutique en ligne pour améliorer l'expérience utilisateur et augmenter les conversions.",
-      "solution": "Développement d'une solution e-commerce sur mesure avec panier persistant, paiement sécurisé Stripe, et interface d'administration.",
+      "thumbnail": "acsaintdie-thumb.webp",
+      "url": "https://acsaintdie.fr",
+      "github": "",
+      "technologies": ["PHP", "JavaScript", "MySQL", "Wordpress"],
+      "context": "Dans le cadre de mon alternance chez kiwi-studio, un client a souhaité une refonte complète de son site internet. Le tout en ayant la possibilité d'ajouter du contenu facilement, pour ce faire, il a choisi Wordpress.",
+      "solution": "Développement d'un thème personnalisé pour Wordpress, intégrant différents plugin custom pour la gestion de la galerie ou des différents type de post.",
       "teamwork": "Projet réalisé en collaboration avec un designer UI/UX. J'ai pris en charge l'intégration et le développement backend.",
-      "duration": "3 mois",
+      "duration": "5 mois",
       "screenshots": [
         "ecommerce-xyz-screen-1.webp",
         "ecommerce-xyz-screen-2.webp",

includes/config.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Configuration de l'application
+ * Charge les variables d'environnement depuis .env
+ */
+
+/**
+ * Charge un fichier .env et définit les variables d'environnement
+ * @param string $path Chemin vers le fichier .env
+ */
+function loadEnv(string $path): void
+{
+    if (!file_exists($path)) {
+        return;
+    }
+
+    $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+
+    foreach ($lines as $line) {
+        // Ignorer les commentaires
+        if (str_starts_with(trim($line), '#')) {
+            continue;
+        }
+
+        // Parser KEY=value
+        if (str_contains($line, '=')) {
+            [$key, $value] = explode('=', $line, 2);
+            $key = trim($key);
+            $value = trim($value);
+
+            // Supprimer les guillemets si présents
+            if (preg_match('/^["\'](.*)["\']\s*$/', $value, $matches)) {
+                $value = $matches[1];
+            }
+
+            $_ENV[$key] = $value;
+            putenv("{$key}={$value}");
+        }
+    }
+}
+
+// Charger le fichier .env
+loadEnv(__DIR__ . '/../.env');
+
+// Définir les constantes de configuration
+define('APP_ENV', $_ENV['APP_ENV'] ?? 'production');
+define('APP_DEBUG', ($_ENV['APP_DEBUG'] ?? 'false') === 'true');
+define('APP_URL', $_ENV['APP_URL'] ?? 'http://localhost');
+
+// reCAPTCHA v3
+define('RECAPTCHA_SITE_KEY', $_ENV['RECAPTCHA_SITE_KEY'] ?? '');
+define('RECAPTCHA_SECRET_KEY', $_ENV['RECAPTCHA_SECRET_KEY'] ?? '');
+define('RECAPTCHA_THRESHOLD', 0.5); // Score minimum (0.0 à 1.0)
+
+// Contact
+define('CONTACT_EMAIL', $_ENV['CONTACT_EMAIL'] ?? '');
+
+// Sécurité
+define('APP_SECRET', $_ENV['APP_SECRET'] ?? '');

includes/functions.php

@@ -224,3 +224,240 @@ function getTestimonialByProject(string $projectSlug): ?array
     }
     return null;
 }
+
+/**
+ * Génère un token CSRF et le stocke en session
+ * @return string Token CSRF
+ */
+function generateCsrfToken(): string
+{
+    if (session_status() === PHP_SESSION_NONE) {
+        session_start();
+    }
+
+    $token = bin2hex(random_bytes(32));
+    $_SESSION['csrf_token'] = $token;
+    $_SESSION['csrf_token_time'] = time();
+
+    return $token;
+}
+
+/**
+ * Vérifie la validité d'un token CSRF
+ * @param string $token Token à vérifier
+ * @param int $maxAge Durée de validité en secondes (défaut: 1 heure)
+ * @return bool True si valide
+ */
+function verifyCsrfToken(string $token, int $maxAge = 3600): bool
+{
+    if (session_status() === PHP_SESSION_NONE) {
+        session_start();
+    }
+
+    if (empty($_SESSION['csrf_token']) || empty($_SESSION['csrf_token_time'])) {
+        return false;
+    }
+
+    // Vérifier l'expiration
+    if (time() - $_SESSION['csrf_token_time'] > $maxAge) {
+        return false;
+    }
+
+    return hash_equals($_SESSION['csrf_token'], $token);
+}
+
+/**
+ * Vérifie le token reCAPTCHA v3 auprès de Google
+ * @param string $token Token reçu du client
+ * @return float Score (0.0 à 1.0), 0.3 si échec (dégradation gracieuse)
+ */
+function verifyRecaptcha(string $token): float
+{
+    // Si pas de clé secrète configurée, retourner un score acceptable
+    if (!defined('RECAPTCHA_SECRET_KEY') || empty(RECAPTCHA_SECRET_KEY)) {
+        return 0.9;
+    }
+
+    // Si pas de token, retourner un score bas mais pas bloquant
+    if (empty($token)) {
+        error_log('reCAPTCHA: token vide');
+        return 0.3;
+    }
+
+    $context = stream_context_create([
+        'http' => [
+            'method' => 'POST',
+            'header' => 'Content-Type: application/x-www-form-urlencoded',
+            'content' => http_build_query([
+                'secret' => RECAPTCHA_SECRET_KEY,
+                'response' => $token,
+                'remoteip' => $_SERVER['REMOTE_ADDR'] ?? ''
+            ]),
+            'timeout' => 10
+        ]
+    ]);
+
+    $response = @file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);
+
+    if ($response === false) {
+        error_log('reCAPTCHA: impossible de contacter Google');
+        return 0.3; // Dégradation gracieuse
+    }
+
+    $result = json_decode($response, true);
+
+    if (!($result['success'] ?? false)) {
+        error_log('reCAPTCHA: échec - ' . json_encode($result['error-codes'] ?? []));
+        return 0.0;
+    }
+
+    return (float) ($result['score'] ?? 0.0);
+}
+
+/**
+ * Valide et nettoie les données du formulaire de contact
+ * @param array $input Données brutes
+ * @return array Données nettoyées
+ * @throws Exception si validation échoue
+ */
+function validateContactData(array $input): array
+{
+    $errors = [];
+
+    // Champs requis
+    $required = ['nom', 'prenom', 'email', 'categorie', 'objet', 'message'];
+    $labels = [
+        'nom' => 'Nom',
+        'prenom' => 'Prénom',
+        'email' => 'Email',
+        'categorie' => 'Catégorie',
+        'objet' => 'Objet',
+        'message' => 'Message'
+    ];
+
+    foreach ($required as $field) {
+        if (empty(trim($input[$field] ?? ''))) {
+            $errors[] = "Le champ {$labels[$field]} est requis";
+        }
+    }
+
+    // Validation email
+    $email = trim($input['email'] ?? '');
+    if ($email && !filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $errors[] = "L'adresse email n'est pas valide";
+    }
+
+    // Validation catégorie
+    $validCategories = ['projet', 'poste', 'autre'];
+    $categorie = $input['categorie'] ?? '';
+    if ($categorie && !in_array($categorie, $validCategories)) {
+        $errors[] = "Catégorie invalide";
+    }
+
+    // Validation longueurs
+    if (strlen($input['nom'] ?? '') > 100) {
+        $errors[] = "Le nom est trop long (max 100 caractères)";
+    }
+    if (strlen($input['prenom'] ?? '') > 100) {
+        $errors[] = "Le prénom est trop long (max 100 caractères)";
+    }
+    if (strlen($input['objet'] ?? '') > 200) {
+        $errors[] = "L'objet est trop long (max 200 caractères)";
+    }
+    if (strlen($input['message'] ?? '') > 5000) {
+        $errors[] = "Le message est trop long (max 5000 caractères)";
+    }
+    if (strlen($input['entreprise'] ?? '') > 200) {
+        $errors[] = "Le nom d'entreprise est trop long (max 200 caractères)";
+    }
+
+    // Longueurs minimales
+    if (strlen(trim($input['nom'] ?? '')) > 0 && strlen(trim($input['nom'])) < 2) {
+        $errors[] = "Le nom doit contenir au moins 2 caractères";
+    }
+    if (strlen(trim($input['prenom'] ?? '')) > 0 && strlen(trim($input['prenom'])) < 2) {
+        $errors[] = "Le prénom doit contenir au moins 2 caractères";
+    }
+    if (strlen(trim($input['objet'] ?? '')) > 0 && strlen(trim($input['objet'])) < 5) {
+        $errors[] = "L'objet doit contenir au moins 5 caractères";
+    }
+    if (strlen(trim($input['message'] ?? '')) > 0 && strlen(trim($input['message'])) < 20) {
+        $errors[] = "Le message doit contenir au moins 20 caractères";
+    }
+
+    // Si erreurs, les lancer
+    if (!empty($errors)) {
+        throw new Exception(implode('. ', $errors));
+    }
+
+    // Nettoyer et retourner
+    return [
+        'nom' => htmlspecialchars(trim($input['nom']), ENT_QUOTES, 'UTF-8'),
+        'prenom' => htmlspecialchars(trim($input['prenom']), ENT_QUOTES, 'UTF-8'),
+        'email' => filter_var(trim($input['email']), FILTER_SANITIZE_EMAIL),
+        'entreprise' => htmlspecialchars(trim($input['entreprise'] ?? ''), ENT_QUOTES, 'UTF-8'),
+        'categorie' => $input['categorie'],
+        'objet' => htmlspecialchars(trim($input['objet']), ENT_QUOTES, 'UTF-8'),
+        'message' => htmlspecialchars(trim($input['message']), ENT_QUOTES, 'UTF-8'),
+        'ip' => $_SERVER['REMOTE_ADDR'] ?? 'inconnue',
+        'date' => date('d/m/Y à H:i:s'),
+    ];
+}
+
+/**
+ * Envoie l'email de contact
+ * @param array $data Données validées et nettoyées
+ * @return bool True si envoyé avec succès
+ */
+function sendContactEmail(array $data): bool
+{
+    $categorieLabels = [
+        'projet' => 'Projet freelance',
+        'poste' => 'Proposition de poste',
+        'autre' => 'Autre demande'
+    ];
+
+    $categorie = $categorieLabels[$data['categorie']] ?? 'Autre';
+    $entreprise = $data['entreprise'] ?: 'Non renseignée';
+
+    $subject = "[Portfolio] {$categorie} - {$data['objet']}";
+
+    $body = "═══════════════════════════════════════════\n";
+    $body .= "NOUVEAU MESSAGE - PORTFOLIO\n";
+    $body .= "═══════════════════════════════════════════\n\n";
+    $body .= "DE: {$data['prenom']} {$data['nom']}\n";
+    $body .= "EMAIL: {$data['email']}\n";
+    $body .= "ENTREPRISE: {$entreprise}\n";
+    $body .= "CATÉGORIE: {$categorie}\n\n";
+    $body .= "───────────────────────────────────────────\n";
+    $body .= "OBJET: {$data['objet']}\n";
+    $body .= "───────────────────────────────────────────\n\n";
+    $body .= "MESSAGE:\n\n";
+    $body .= "{$data['message']}\n\n";
+    $body .= "═══════════════════════════════════════════\n";
+    $body .= "Envoyé le {$data['date']}\n";
+    $body .= "IP: {$data['ip']}\n";
+    $body .= "═══════════════════════════════════════════";
+
+    // Vérifier que CONTACT_EMAIL est défini
+    if (!defined('CONTACT_EMAIL') || empty(CONTACT_EMAIL)) {
+        error_log('CONTACT_EMAIL non configuré');
+        return false;
+    }
+
+    $headers = implode("\r\n", [
+        'From: noreply@' . ($_SERVER['HTTP_HOST'] ?? 'localhost'),
+        'Reply-To: ' . $data['email'],
+        'Content-Type: text/plain; charset=UTF-8',
+        'X-Mailer: PHP/' . phpversion(),
+        'X-Priority: 1'
+    ]);
+
+    $result = @mail(CONTACT_EMAIL, $subject, $body, $headers);
+
+    if (!$result) {
+        error_log("Échec envoi email contact: " . json_encode($data));
+    }
+
+    return $result;
+}

index.php

@@ -3,6 +3,7 @@
  * Front Controller - Point d'entrée unique
  */
 
+require_once __DIR__ . '/includes/config.php';
 require_once __DIR__ . '/includes/functions.php';
 require_once __DIR__ . '/includes/router.php';
 

pages/contact.php

@@ -1,12 +1,15 @@
 <?php
 /**
- * Page contact
+ * Page Contact
  */
 
 $pageTitle = 'Contact';
-$pageDescription = 'Contactez-moi pour discuter de votre projet web.';
+$pageDescription = 'Contactez-moi pour discuter de votre projet web ou d\'une opportunité professionnelle.';
 $currentPage = 'contact';
 
+// Générer le token CSRF
+$csrfToken = generateCsrfToken();
+
 include_template('header', compact('pageTitle', 'pageDescription'));
 include_template('navbar', compact('currentPage'));
 ?>
@@ -14,18 +17,260 @@ include_template('navbar', compact('currentPage'));
 <main>
     <section class="section">
         <div class="container-content">
-            <div class="section-header">
-                <h1 class="section-title">Contact</h1>
-                <p class="section-subtitle">
-                    Discutons de votre projet
-                </p>
-            </div>
+            <div class="max-w-2xl mx-auto">
+                <!-- Header -->
+                <div class="text-center mb-12">
+                    <h1 class="text-3xl lg:text-display font-bold text-text-primary mb-4">Me Contacter</h1>
+                    <p class="text-xl text-text-secondary">
+                        Une question, un projet ? Parlons-en !
+                    </p>
+                </div>
 
-            <p class="text-text-secondary text-center">
-                Page en construction - Epic 5
-            </p>
+                <!-- Formulaire -->
+                <form
+                    id="contact-form"
+                    method="POST"
+                    action="/api/contact.php"
+                    class="space-y-6"
+                >
+                    <!-- Token CSRF -->
+                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken) ?>">
+
+                    <!-- Nom & Prénom (côte à côte sur desktop) -->
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <!-- Nom -->
+                        <div>
+                            <label for="nom" class="block text-sm font-medium text-text-primary mb-2">
+                                Nom <span class="text-primary">*</span>
+                            </label>
+                            <input
+                                type="text"
+                                id="nom"
+                                name="nom"
+                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
+                                required
+                                maxlength="100"
+                                autocomplete="family-name"
+                                placeholder="Dupont"
+                            >
+                            <p class="text-error text-sm mt-1 hidden" data-error="nom"></p>
+                        </div>
+
+                        <!-- Prénom -->
+                        <div>
+                            <label for="prenom" class="block text-sm font-medium text-text-primary mb-2">
+                                Prénom <span class="text-primary">*</span>
+                            </label>
+                            <input
+                                type="text"
+                                id="prenom"
+                                name="prenom"
+                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
+                                required
+                                maxlength="100"
+                                autocomplete="given-name"
+                                placeholder="Marie"
+                            >
+                            <p class="text-error text-sm mt-1 hidden" data-error="prenom"></p>
+                        </div>
+                    </div>
+
+                    <!-- Email & Entreprise -->
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <!-- Email -->
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-text-primary mb-2">
+                                Email <span class="text-primary">*</span>
+                            </label>
+                            <input
+                                type="email"
+                                id="email"
+                                name="email"
+                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
+                                required
+                                maxlength="255"
+                                autocomplete="email"
+                                placeholder="marie.dupont@example.com"
+                            >
+                            <p class="text-error text-sm mt-1 hidden" data-error="email"></p>
+                        </div>
+
+                        <!-- Entreprise (optionnel) -->
+                        <div>
+                            <label for="entreprise" class="block text-sm font-medium text-text-primary mb-2">
+                                Entreprise <span class="text-text-muted">(optionnel)</span>
+                            </label>
+                            <input
+                                type="text"
+                                id="entreprise"
+                                name="entreprise"
+                                class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
+                                maxlength="200"
+                                autocomplete="organization"
+                                placeholder="Nom de votre entreprise"
+                            >
+                        </div>
+                    </div>
+
+                    <!-- Catégorie -->
+                    <div>
+                        <label for="categorie" class="block text-sm font-medium text-text-primary mb-2">
+                            Catégorie <span class="text-primary">*</span>
+                        </label>
+                        <select
+                            id="categorie"
+                            name="categorie"
+                            class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
+                            required
+                        >
+                            <option value="" disabled selected>Sélectionnez une catégorie...</option>
+                            <option value="projet">Je souhaite parler de mon projet</option>
+                            <option value="poste">Je souhaite vous proposer un poste</option>
+                            <option value="autre">Autre</option>
+                        </select>
+                        <p class="text-error text-sm mt-1 hidden" data-error="categorie"></p>
+                    </div>
+
+                    <!-- Objet -->
+                    <div>
+                        <label for="objet" class="block text-sm font-medium text-text-primary mb-2">
+                            Objet <span class="text-primary">*</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="objet"
+                            name="objet"
+                            class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
+                            required
+                            maxlength="200"
+                            placeholder="Résumez votre demande en quelques mots"
+                        >
+                        <p class="text-error text-sm mt-1 hidden" data-error="objet"></p>
+                    </div>
+
+                    <!-- Message -->
+                    <div>
+                        <label for="message" class="block text-sm font-medium text-text-primary mb-2">
+                            Message <span class="text-primary">*</span>
+                        </label>
+                        <textarea
+                            id="message"
+                            name="message"
+                            class="w-full px-4 py-3 bg-surface-alt border border-border rounded-lg text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors resize-y min-h-[150px]"
+                            required
+                            maxlength="5000"
+                            rows="6"
+                            placeholder="Décrivez votre projet ou votre demande..."
+                        ></textarea>
+                        <p class="text-error text-sm mt-1 hidden" data-error="message"></p>
+                        <p class="text-xs text-text-muted mt-1">
+                            <span id="message-count">0</span> / 5000 caractères
+                        </p>
+                    </div>
+
+                    <!-- Boutons -->
+                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
+                        <button type="submit" id="submit-btn" class="btn-primary flex-1 justify-center">
+                            <span id="submit-text">Envoyer le message</span>
+                            <span id="submit-loading" class="hidden items-center gap-2">
+                                <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                                </svg>
+                                Envoi en cours...
+                            </span>
+                        </button>
+                        <button type="button" id="clear-form-btn" class="btn-secondary">
+                            Effacer
+                        </button>
+                    </div>
+                </form>
+
+                <!-- Message de succès (caché par défaut) -->
+                <div id="success-message" class="hidden mt-8 p-6 bg-green-500/10 border border-green-500/30 rounded-lg text-center">
+                    <svg class="w-12 h-12 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <h3 class="text-lg font-semibold text-text-primary mb-2">Message envoyé avec succès !</h3>
+                    <p class="text-text-secondary mb-4">
+                        Merci pour votre message. Je vous répondrai dans les meilleurs délais.
+                    </p>
+                    <p class="text-sm text-text-muted">
+                        Si vous ne recevez pas de réponse sous 48h, pensez à vérifier vos spams.
+                    </p>
+                </div>
+
+                <!-- Message d'erreur global (caché par défaut) -->
+                <div id="error-message" class="hidden mt-8 p-6 bg-red-500/10 border border-red-500/30 rounded-lg">
+                    <div class="flex items-start gap-4">
+                        <svg class="w-6 h-6 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <div>
+                            <h3 class="font-semibold text-red-500 mb-1">Erreur</h3>
+                            <p class="text-text-secondary" id="error-text"></p>
+                            <p class="text-sm text-text-muted mt-2">
+                                Vos données ont été conservées. Vous pouvez réessayer.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Liens secondaires -->
+                <div class="mt-16 pt-8 border-t border-border">
+                    <h2 class="text-lg font-semibold text-center text-text-primary mb-6">Retrouvez-moi aussi sur</h2>
+
+                    <div class="flex flex-wrap justify-center gap-4">
+                        <!-- LinkedIn -->
+                        <a
+                            href="https://linkedin.com/in/celian-music"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="flex items-center gap-3 px-5 py-3 bg-surface-alt rounded-lg border border-border hover:border-primary/50 transition-colors group"
+                            aria-label="Profil LinkedIn"
+                        >
+                            <svg class="w-5 h-5 text-[#0A66C2]" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                            </svg>
+                            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">LinkedIn</span>
+                        </a>
+
+                        <!-- GitHub -->
+                        <a
+                            href="https://github.com/skycel"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="flex items-center gap-3 px-5 py-3 bg-surface-alt rounded-lg border border-border hover:border-primary/50 transition-colors group"
+                            aria-label="Profil GitHub"
+                        >
+                            <svg class="w-5 h-5 text-text-primary" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">GitHub</span>
+                        </a>
+
+                        <!-- Email (protégé contre le scraping) -->
+                        <a
+                            href="#"
+                            id="email-link"
+                            class="flex items-center gap-3 px-5 py-3 bg-surface-alt rounded-lg border border-border hover:border-primary/50 transition-colors group"
+                            aria-label="Envoyer un email"
+                            data-user="music.music"
+                            data-domain="music.music"
+                        >
+                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+                            </svg>
+                            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">Email</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
 </main>
 
 <?php include_template('footer'); ?>
+
+<script src="/assets/js/state.js" defer></script>
+<script src="/assets/js/contact-form.js" defer></script>

pages/home.php

@@ -22,7 +22,7 @@ include_template('navbar', compact('currentPage'));
 
             <!-- Nom -->
             <h1 class="text-4xl sm:text-5xl lg:text-display font-bold text-text-primary mb-6 animate-fade-in animation-delay-100">
-                Prénom <span class="text-primary">NOM</span>
+                Célian <span class="text-primary">Burst</span>
             </h1>
 
             <!-- Titre -->

templates/footer.php

@@ -14,6 +14,10 @@ $currentYear = date('Y');
     </footer>
 
     <!-- Scripts -->
+    <?php if (defined('RECAPTCHA_SITE_KEY') && RECAPTCHA_SITE_KEY): ?>
+    <script>window.RECAPTCHA_SITE_KEY = '<?= htmlspecialchars(RECAPTCHA_SITE_KEY) ?>';</script>
+    <script src="https://www.google.com/recaptcha/api.js?render=<?= htmlspecialchars(RECAPTCHA_SITE_KEY) ?>" async defer></script>
+    <?php endif; ?>
     <script src="/assets/js/main.js" defer></script>
 </body>
 </html>