<?php
/**
 * Template Name: Page d'accueil
 * Description: Template personnalisé pour la page d'accueil avec design sur mesure
 * 
 * @package Astra Child
 */

// Désactiver le header et footer WordPress par défaut
remove_action('astra_header', 'astra_header_markup');
remove_action('astra_footer', 'astra_footer_markup');
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO META TAGS -->
    <title>Aides Travaux Occitanie : MaPrimeAdapt' & MaPrimeRénov' | Expert Indépendant</title>
    <meta name="description" content="Expert aides travaux en Occitanie : MaPrimeAdapt', MaPrimeRénov', CEE. Accompagnement complet de A à Z pour financer vos travaux d'autonomie et de rénovation énergétique. Basés à Toulouse.">
    <meta name="keywords" content="aides travaux, MaPrimeAdapt, MaPrimeRénov, CEE, Occitanie, Toulouse, rénovation énergétique, adaptation logement">
    
    <!-- OPEN GRAPH -->
    <meta property="og:title" content="Aides-Travaux.fr | Expert Aides & Travaux Occitanie">
    <meta property="og:description" content="Obtenez jusqu'à 70% d'aides pour vos travaux d'autonomie et de rénovation énergétique. Accompagnement expert en Occitanie.">
    <meta property="og:image" content="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/og-image.jpg'); ?>">
    <meta property="og:url" content="<?php echo esc_url(home_url('/')); ?>">
    <meta property="og:type" content="website">
    
    <!-- FAVICON -->
    <?php if (has_site_icon()) : ?>
        <link rel="icon" href="<?php echo esc_url(get_site_icon_url()); ?>">
    <?php endif; ?>
    
    <!-- DESIGN SYSTEM -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        navy: '#1B263B',
                        atsgreen: '#5A9C26',
                        lightgray: '#F3F4F6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    
    <style>
        .elementor-widget-html { overflow: hidden; }
        html { scroll-behavior: smooth; }
        
        .skip-to-content {
            position: absolute;
            top: -40px;
            left: 0;
            background: #5A9C26;
            color: white;
            padding: 8px 16px;
            text-decoration: none;
            z-index: 100;
            border-radius: 0 0 4px 0;
        }
        .skip-to-content:focus { top: 0; }
        
        .card-zoom:hover img { transform: scale(1.05); }
        .card-zoom img { transition: transform 0.7s ease; }
        
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .mobile-menu.open { max-height: 500px; }
        
        img[loading="lazy"] {
            opacity: 0;
            transition: opacity 0.3s;
        }
        img[loading="lazy"].loaded { opacity: 1; }
    </style>
    
    <?php wp_head(); ?>
</head>

<body <?php body_class('text-slate-800 antialiased font-sans bg-white'); ?>>
<?php wp_body_open(); ?>

    <!-- SKIP TO CONTENT -->
    <a href="#main-content" class="skip-to-content">Aller au contenu principal</a>

    <!-- ================================================================== -->
    <!-- NAVIGATION -->
    <!-- ================================================================== -->
    <nav class="bg-white shadow-md fixed w-full z-50 top-0 left-0" role="navigation" aria-label="Navigation principale">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20 items-center">
                
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center gap-3">
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="flex items-center gap-3 no-underline" aria-label="Retour à l'accueil">
                        <div class="h-10 w-10 bg-navy rounded-lg flex items-center justify-center text-white relative">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                                <path d="m9 12 2 2 4-4"/>
                            </svg>
                            <div class="absolute -bottom-1 -right-1 bg-atsgreen rounded-full p-0.5 border-2 border-white">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                        </div>
                        <span class="font-bold text-xl text-navy tracking-tight">aides-travaux<span class="text-atsgreen">.fr</span></span>
                    </a>
                </div>

                <!-- Menu Desktop -->
                <div class="hidden md:flex space-x-8">
                    <a href="<?php echo esc_url(home_url('/maprimeadapt/')); ?>" class="text-slate-600 hover:text-navy font-medium transition no-underline">MaPrimeAdapt'</a>
                    <a href="<?php echo esc_url(home_url('/maprimerenov/')); ?>" class="text-slate-600 hover:text-navy font-medium transition no-underline">MaPrimeRénov'</a>
                    <a href="<?php echo esc_url(home_url('/travaux/')); ?>" class="text-slate-600 hover:text-navy font-medium transition no-underline">Travaux Éligibles</a>
                </div>

                <!-- CTA Header Desktop -->
                <div class="hidden md:flex">
                    <a href="<?php echo esc_url(home_url('/formulaire-complet/')); ?>" 
                       class="bg-atsgreen hover:bg-green-700 text-white px-6 py-3 rounded-md font-semibold transition shadow-lg flex items-center gap-2 no-underline transform hover:scale-105 duration-200"
                       aria-label="Estimer mes aides aux travaux">
                        <span>Estimer mes aides</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <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>
                    </a>
                </div>
                
                <!-- Burger Menu Mobile -->
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-btn" 
                            class="text-slate-600 hover:text-navy focus:outline-none focus:ring-2 focus:ring-atsgreen rounded-md p-2"
                            aria-expanded="false"
                            aria-controls="mobile-menu"
                            aria-label="Ouvrir le menu de navigation">
                        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Menu Mobile -->
            <div id="mobile-menu" class="mobile-menu md:hidden bg-white border-t border-slate-100">
                <nav class="flex flex-col p-4 space-y-4">
                    <a href="<?php echo esc_url(home_url('/maprimeadapt/')); ?>" class="text-slate-600 hover:text-navy font-medium py-2 border-b border-slate-100">MaPrimeAdapt'</a>
                    <a href="<?php echo esc_url(home_url('/maprimerenov/')); ?>" class="text-slate-600 hover:text-navy font-medium py-2 border-b border-slate-100">MaPrimeRénov'</a>
                    <a href="<?php echo esc_url(home_url('/travaux/')); ?>" class="text-slate-600 hover:text-navy font-medium py-2 border-b border-slate-100">Travaux Éligibles</a>
                    <a href="<?php echo esc_url(home_url('/formulaire-complet/')); ?>" class="bg-atsgreen text-white px-6 py-3 rounded-md font-semibold text-center mt-2">Estimer mes aides</a>
                </nav>
            </div>
        </div>
    </nav>

    <!-- ================================================================== -->
    <!-- HERO SECTION -->
    <!-- ================================================================== -->
    <header class="relative bg-navy pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <img src="https://images.unsplash.com/photo-1581578731117-104f2a41272c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80&fm=webp" 
                 alt="Couple senior heureux dans leur logement rénové avec aides travaux" 
                 class="w-full h-full object-cover"
                 loading="eager">
        </div>
        
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
            
            <span class="inline-block bg-navy/50 border border-slate-600 text-slate-200 px-4 py-1.5 rounded-full text-sm font-medium mb-6 backdrop-blur-sm">
                🛡️ Expert Aides & Travaux Indépendant
            </span>
            
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
                Aides Travaux Occitanie :<br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-atsgreen to-green-300">MaPrimeAdapt' & MaPrimeRénov'</span>
            </h1>
            
            <p class="text-xl text-slate-300 mb-10 max-w-2xl mx-auto leading-relaxed">
                Obtenez jusqu'à <strong class="text-white">70% d'aides</strong> pour vos travaux d'autonomie et de rénovation énergétique. 
                Expert indépendant basé à Toulouse, nous montons vos dossiers de A à Z.
            </p>
            
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="<?php echo esc_url(home_url('/prise-de-contact/')); ?>" 
                   class="bg-atsgreen hover:bg-green-700 text-white text-lg px-8 py-4 rounded-lg font-bold transition shadow-xl transform hover:-translate-y-1 no-underline inline-block text-center">
                    J'ai un projet de travaux
                </a>
                <a href="<?php echo esc_url(home_url('/guide-complet-aides-2026/')); ?>" 
                   class="bg-white hover:bg-slate-100 text-navy text-lg px-8 py-4 rounded-lg font-bold transition shadow-xl flex items-center justify-center gap-2 no-underline inline-flex">
                    Voir le montant des aides 2026
                </a>
            </div>

            <div class="mt-12 pt-8 border-t border-slate-700/50 flex flex-wrap justify-center gap-8 opacity-70 grayscale hover:grayscale-0 transition duration-500">
                <div class="text-white font-semibold text-sm flex items-center gap-2">
                    <div class="w-6 h-6 bg-slate-500 rounded-full"></div> MaPrimeAdapt'
                </div>
                <div class="text-white font-semibold text-sm flex items-center gap-2">
                    <div class="w-6 h-6 bg-slate-500 rounded-full"></div> France Rénov'
                </div>
                <div class="text-white font-semibold text-sm flex items-center gap-2">
                    <div class="w-6 h-6 bg-slate-500 rounded-full"></div> CEE Certifiés
                </div>
            </div>
        </div>
    </header>

    <!-- ================================================================== -->
    <!-- CONTENU PRINCIPAL -->
    <!-- ================================================================== -->
    <main id="main-content">

        <!-- POURQUOI SECTION -->
        <section class="py-20 bg-lightgray">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl font-bold text-navy mb-4">Pourquoi passer par un tiers de confiance ?</h2>
                    <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                        En France, 30% des demandes d'<strong>aides aux travaux</strong> sont rejetées pour cause de dossier incomplet ou mal orienté.
                    </p>
                </div>

                <div class="grid md:grid-cols-3 gap-8">
                    <!-- Carte 1 -->
                    <article class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-atsgreen relative overflow-hidden group hover:shadow-2xl transition duration-300">
                        <div class="bg-atsgreen w-16 h-16 rounded-full flex items-center justify-center mb-6 text-white shadow-md group-hover:scale-110 transition duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <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>
                        </div>
                        <h3 class="text-xl font-bold text-navy mb-3">Conformité Garantie</h3>
                        <p class="text-slate-600 leading-relaxed">
                            Nous vérifions chaque pièce pour sécuriser vos <strong>aides travaux</strong> avant l'envoi. 
                            Résultat : un dossier validé du premier coup.
                        </p>
                    </article>
                    
                    <!-- Carte 2 -->
                    <article class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-atsgreen relative overflow-hidden group hover:shadow-2xl transition duration-300">
                        <div class="bg-atsgreen w-16 h-16 rounded-full flex items-center justify-center mb-6 text-white shadow-md group-hover:scale-110 transition duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-navy mb-3">Maximisation des Aides</h3>
                        <p class="text-slate-600 leading-relaxed">
                            MaPrimeAdapt' + MPR + CEE... Nous cumulons tous les dispositifs d'aides pour réduire votre reste à charge au minimum.
                        </p>
                    </article>
                    
                    <!-- Carte 3 -->
                    <article class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-atsgreen relative overflow-hidden group hover:shadow-2xl transition duration-300">
                        <div class="bg-atsgreen w-16 h-16 rounded-full flex items-center justify-center mb-6 text-white shadow-md group-hover:scale-110 transition duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-navy mb-3">Zéro démarche pour vous</h3>
                        <p class="text-slate-600 leading-relaxed">
                            De la création du compte ANAH jusqu'au versement bancaire, nous gérons toute l'interface administrative.
                        </p>
                    </article>
                </div>
            </div>
        </section>

        <!-- SERVICES SECTION -->
        <section id="services" class="py-20 bg-white">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <span class="text-atsgreen font-extrabold tracking-widest uppercase text-base md:text-lg block mb-3">
                        Nos expertises en aides travaux
                    </span>
                    <h2 class="text-3xl md:text-4xl font-bold text-navy">Quel est votre projet ?</h2>
                </div>

                <!-- Service 1: Autonomie -->
                <div class="flex flex-col md:flex-row items-center bg-white rounded-2xl shadow-xl overflow-hidden mb-16 border border-slate-100 group hover:shadow-2xl transition duration-300">
                    <div class="md:w-1/2 h-64 md:h-96 relative overflow-hidden card-zoom">
                        <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80&fm=webp" 
                             alt="Salle de bain senior adaptée avec douche sécurisée - MaPrimeAdapt'" 
                             class="w-full h-full object-cover"
                             loading="lazy">
                        <div class="absolute top-4 left-4 bg-white px-3 py-1 rounded-md text-sm font-bold text-navy shadow-sm border-l-4 border-atsgreen">
                            MaPrimeAdapt'
                        </div>
                    </div>
                    <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold text-navy mb-4">Bien vieillir chez soi</h3>
                        <p class="text-slate-600 mb-6 text-lg leading-relaxed">
                            Vous souhaitez remplacer une baignoire par une douche sécurisée, installer un monte-escalier ou aménager votre rez-de-chaussée ? 
                            <br><span class="font-semibold text-navy">L'aide peut couvrir jusqu'à 70% des travaux.</span>
                        </p>
                        <ul class="space-y-3 mb-8">
                            <li class="flex items-center text-slate-700">
                                <svg class="w-5 h-5 text-atsgreen mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Diagnostic autonomie inclus
                            </li>
                            <li class="flex items-center text-slate-700">
                                <svg class="w-5 h-5 text-atsgreen mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Dossier prioritaire + de 70 ans
                            </li>
                            <li class="flex items-center text-slate-700">
                                <svg class="w-5 h-5 text-atsgreen mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Expérience et réactivité
                            </li>
                        </ul>
                        <a href="<?php echo esc_url(home_url('/maprimeadapt/')); ?>" 
                           class="text-atsgreen font-bold text-lg hover:text-green-700 flex items-center group/link no-underline transition-colors">
                            Découvrir notre accompagnement Autonomie
                            <svg class="w-5 h-5 ml-2 transform group-hover/link:translate-x-1 transition duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Service 2: Energie -->
                <div class="flex flex-col md:flex-row-reverse items-center bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-100 group hover:shadow-2xl transition duration-300">
                    <div class="md:w-1/2 h-64 md:h-96 relative overflow-hidden card-zoom">
                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/maprimerenov-aides-travaux.jpg'); ?>" 
                             alt="Installation pompe à chaleur et isolation thermique - MaPrimeRénov'" 
                             class="w-full h-full object-cover"
                             loading="lazy">
                        <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-md text-sm font-bold text-navy shadow-sm border-r-4 border-atsgreen">
                            MaPrimeRénov' + CEE
                        </div>
                    </div>
                    <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold text-navy mb-4">Réduire sa facture d'énergie</h3>
                        <p class="text-slate-600 mb-6 text-lg leading-relaxed">
                            Pompe à chaleur, isolation, fenêtres... Nous optimisons le cumul de la prime de l'État et des primes CEE pour financer votre transition énergétique.
                        </p>
                        <ul class="space-y-3 mb-8">
                            <li class="flex items-center text-slate-700">
                                <svg class="w-5 h-5 text-atsgreen mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Gestion des primes CEE
                            </li>
                            <li class="flex items-center text-slate-700">
                                <svg class="w-5 h-5 text-atsgreen mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Vérification des devis artisans RGE
                            </li>
                        </ul>
                        <a href="<?php echo esc_url(home_url('/maprimerenov/')); ?>" 
                           class="text-atsgreen font-bold text-lg hover:text-green-700 flex items-center group/link no-underline transition-colors">
                            Voir les aides à la rénovation
                            <svg class="w-5 h-5 ml-2 transform group-hover/link:translate-x-1 transition duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- CONFIANCE & LOCALE SECTION -->
        <section class="py-20 bg-navy text-white relative overflow-hidden">
            <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 30px 30px;"></div>
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="flex flex-col md:flex-row items-center justify-between gap-12">
                    <div class="md:w-3/5">
                        <h2 class="text-3xl font-bold mb-6 leading-tight text-white">
                            Un accompagnement de proximité en Occitanie
                        </h2>
                        
                        <p class="text-white text-lg font-medium mb-8 leading-relaxed drop-shadow-md">
                            Contrairement aux plateformes téléphoniques impersonnelles, nos experts, 
                            <strong>basés à Toulouse et rayonnant en Occitanie</strong>, se déplacent chez vous pour réaliser 
                            le diagnostic technique et vérifier la faisabilité de vos <strong>aides aux travaux</strong>.
                        </p>
                        
                        <div class="flex flex-wrap gap-4">
                            <span class="bg-white/20 px-4 py-2 rounded-full text-sm font-bold border border-white/40">📍 Haute-Garonne (31)</span>
                            <span class="bg-white/20 px-4 py-2 rounded-full text-sm font-bold border border-white/40">📍 Ariège (09)</span>
                            <span class="bg-white/20 px-4 py-2 rounded-full text-sm font-bold border border-white/40">📍 Aude (11)</span>
                        </div>
                    </div>
                    
                    <div class="md:w-2/5 bg-white text-navy p-8 rounded-xl shadow-2xl">
                        <div class="flex items-center mb-6 border-b border-slate-100 pb-6">
                            <img src="https://ui-avatars.com/api/?name=Expert+Local&background=1B263B&color=fff&size=128&font-size=0.4" 
                                 alt="Expert aides travaux Occitanie" 
                                 class="w-16 h-16 rounded-full mr-4 border-2 border-atsgreen p-0.5"
                                 loading="lazy">
                            <div>
                                <p class="font-bold text-lg leading-tight">L'expert local</p>
                                <p class="text-atsgreen text-sm font-semibold">Responsable Secteur Occitanie</p>
                            </div>
                        </div>
                        <p class="italic text-slate-600 mb-8 text-base">
                            "Mon objectif est simple : que vous ayez l'esprit tranquille pour vos travaux. 
                            Je m'occupe de toute la bataille administrative à votre place."
                        </p>
                        <a href="<?php echo esc_url(home_url('/estimation/')); ?>" 
                           class="block w-full bg-atsgreen hover:bg-green-700 text-white font-bold py-3.5 px-4 rounded-lg transition shadow-lg text-center no-underline">
                            Prendre RDV (Devis Gratuit)
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- TRAVAUX ÉLIGIBLES -->
        <section class="py-20 bg-gray-50">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-navy mb-6">Travaux Éligibles & Conseils</h2>
                    
                    <p class="text-slate-600 max-w-4xl mx-auto text-lg mb-4 leading-relaxed">
                        Notre expertise s'appuie sur deux piliers complémentaires : rendre le logement plus confortable et adapté, 
                        et améliorer sa performance énergétique pour réduire les consommations.
                    </p>
                </div>

                <div class="grid md:grid-cols-3 gap-8">
                    
                    <!-- Article 1 -->
                    <article class="bg-white rounded-lg shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                        <div class="h-48 bg-slate-200 relative overflow-hidden card-zoom">
                            <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/prix-monte-escalier.jpg'); ?>" 
                                 alt="Monte-escalier pour personne à mobilité réduite" 
                                 class="w-full h-full object-cover"
                                 loading="lazy">
                            <div class="absolute top-4 left-4 bg-atsgreen text-white text-xs font-bold px-2 py-1 rounded uppercase">
                                Autonomie
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="font-bold text-lg text-navy mb-3">
                                Monte-escalier : quel prix et quelles aides en 2026 ?
                            </h3>
                            <a href="<?php echo esc_url(home_url('/travaux/')); ?>" 
                               class="text-slate-600 text-sm font-medium flex items-center group/link">
                                Lire l'article 
                                <svg class="w-4 h-4 ml-1 transform group-hover/link:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </a>
                        </div>
                    </article>
                    
                    <!-- Article 2 -->
                    <article class="bg-white rounded-lg shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                        <div class="h-48 bg-slate-200 relative overflow-hidden card-zoom">
                            <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/remplacer-chaudiere-fioul.jpg'); ?>" 
                                 alt="Installation pompe à chaleur" 
                                 class="w-full h-full object-cover"
                                 loading="lazy">
                            <div class="absolute top-4 left-4 bg-navy text-white text-xs font-bold px-2 py-1 rounded uppercase">
                                Chauffage
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="font-bold text-lg text-navy mb-3">
                                Remplacer sa chaudière fioul : le guide complet
                            </h3>
                            <a href="<?php echo esc_url(home_url('/travaux/')); ?>" 
                               class="text-slate-600 text-sm font-medium flex items-center group/link">
                                Lire l'article 
                                <svg class="w-4 h-4 ml-1 transform group-hover/link:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </a>
                        </div>
                    </article>
                    
                    <!-- Article 3 -->
                    <article class="bg-white rounded-lg shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                        <div class="h-48 bg-slate-200 relative overflow-hidden card-zoom">
                            <img src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=800&q=80&fm=webp" 
                                 alt="Dossier administratif MaPrimeRénov'" 
                                 class="w-full h-full object-cover"
                                 loading="lazy">
                            <div class="absolute top-4 left-4 bg-slate-500 text-white text-xs font-bold px-2 py-1 rounded uppercase">
                                Administratif
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="font-bold text-lg text-navy mb-3">
                                Les 5 erreurs qui bloquent un dossier MaPrimeRénov'
                            </h3>
                            <a href="<?php echo esc_url(home_url('/travaux/')); ?>" 
                               class="text-slate-600 text-sm font-medium flex items-center group/link">
                                Lire l'article 
                                <svg class="w-4 h-4 ml-1 transform group-hover/link:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </a>
                        </div>
                    </article>

                </div>
            </div>
        </section>

    </main>

    <!-- ================================================================== -->
    <!-- FOOTER WORDPRESS -->
    <!-- ================================================================== -->
    <?php get_footer(); ?>

    <!-- Scripts JavaScript -->
    <script>
        // Menu mobile
        document.addEventListener('DOMContentLoaded', function() {
            const burgerBtn = document.getElementById('mobile-menu-btn');
            const mobileMenu = document.getElementById('mobile-menu');
            
            if (burgerBtn && mobileMenu) {
                burgerBtn.addEventListener('click', function() {
                    mobileMenu.classList.toggle('open');
                    const isOpen = mobileMenu.classList.contains('open');
                    burgerBtn.setAttribute('aria-expanded', isOpen);
                    
                    const svg = burgerBtn.querySelector('svg');
                    if (isOpen) {
                        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />';
                    } else {
                        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />';
                    }
                });
            }
        });
        
        // Lazy loading images
        if ('loading' in HTMLImageElement.prototype) {
            const images = document.querySelectorAll('img[loading="lazy"]');
            images.forEach(img => {
                img.addEventListener('load', function() {
                    this.classList.add('loaded');
                });
            });
        } else {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src || img.src;
                        img.classList.add('loaded');
                        observer.unobserve(img);
                    }
                });
            });
            
            document.querySelectorAll('img[loading="lazy"]').forEach(img => {
                imageObserver.observe(img);
            });
        }
        
        console.log('✅ Page d\'accueil chargée avec footer WordPress unifié');
    </script>

    <?php wp_footer(); ?>
</body>
</html>
