<section class="section">
    <h1>Contactez-moi</h1>
    <p>Vous avez un projet en tête ou une question? N'hésitez pas à me contacter en utilisant le formulaire ci-dessous.</p>
</section>

<section class="section contact-page">
    <form style="margin-top: 1rem;">
        <div style="margin-bottom: 1.5rem;">
            <label for="name" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Nom</label>
            <input type="text" id="name" name="name" placeholder="Votre nom" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
        </div>
        
        <div style="margin-bottom: 1.5rem;">
            <label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Email</label>
            <input type="email" id="email" name="email" placeholder="Votre adresse email" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
        </div>
        
        <div style="margin-bottom: 1.5rem;">
            <label for="subject" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Sujet</label>
            <input type="text" id="subject" name="subject" placeholder="Sujet de votre message" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
        </div>
        
        <div style="margin-bottom: 1.5rem;">
            <label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Message</label>
            <textarea id="message" name="message" rows="5" placeholder="Votre message" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; resize: vertical;"></textarea>
        </div>
        
        <button type="submit" class="btn" style="border: none; cursor: pointer;">Envoyer le message</button>
    </form>
</section>

<section class="section">
    <h2>Autres moyens de contact</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem;">
        <div style="flex: 1 1 250px;">
            <h3>Email</h3>
            <p><a href="" data-page="externe" data-id="email"></a></p>
        </div>
        <div style="flex: 1 1 250px;">
            <h3>Téléphone</h3>
            <p data-id="phone">+33 6 XX XX XX XX</p>
        </div>
        <div style="flex: 1 1 250px;">
            <h3>Réseaux sociaux</h3>
            <div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
                <a href="#" style="text-decoration: none;" data-page="externe" data-id="linkedin">LinkedIn</a>
                <a href="#" style="text-decoration: none;" data-page="externe" data-id="twitter">Twitter</a>
                <a href="#" style="text-decoration: none;" data-page="externe" data-id="github">GitHub</a>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <h2>Disponibilité</h2>
    <p>Je suis actuellement disponible pour des projets freelance à temps partiel.</p>
    <p>N'hésitez pas à me contacter pour discuter de votre projet et obtenir un devis personnalisé.</p>
</section>
