.hero{background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),url('/images/home-hero.jpg') center/cover no-repeat var(--color-brand);color:#fff;position:relative;overflow:hidden;min-height:480px;display:flex;align-items:center}
.hero-shapes{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.hero-shapes svg{position:absolute;opacity:0.06}
.hero-shapes .shape-1{top:15%;left:8%;transform:rotate(15deg)}
.hero-shapes .shape-2{bottom:10%;right:12%;transform:rotate(-25deg)}
.hero-shapes .shape-3{top:25%;right:25%;transform:rotate(45deg)}
.hero-shapes .shape-4{bottom:20%;left:30%;transform:rotate(-10deg)}
.hero-content{position:relative;z-index:2;text-align:center;padding:80px 24px;max-width:720px;margin:0 auto}
.hero h1{color:#fff;font-size:42px;letter-spacing:-0.5px;margin-bottom:20px}
.hero-desc{font-size:18px;color:#bbb;margin-bottom:32px}
.hero-desc p{color:#bbb}
.hero-content .btn-cta{font-size:16px;padding:16px 40px}
.hero-content .btn-cta:hover{background:#e64a19;color:#fff}
.intro{position:relative;overflow:hidden;padding:60px 0;background:var(--bg-white)}
.intro-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.intro-bg svg{position:absolute;opacity:0.04}
.intro-bg .intro-shape-1{top:20px;right:60px;transform:rotate(30deg)}
.intro-bg .intro-shape-2{bottom:30px;left:80px;transform:rotate(-20deg)}
.intro-text{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}
.intro-text p{font-size:17px;color:#555;line-height:1.7}
.articles-section{padding:60px 0;background:var(--bg-light)}
.articles-section .section-title{text-align:center;margin-bottom:40px}
.articles-section .section-title h2{font-size:28px;margin-bottom:8px}
.section-subtitle{text-align:center;color:var(--text-muted);font-size:15px;margin:-30px 0 40px}
.articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.article-card{background:#fff;border-radius:8px;overflow:hidden;transition:box-shadow 0.2s;display:flex;flex-direction:column}
.article-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.article-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;border-radius:10px}
.article-card.featured .card-image{height:100%;min-height:320px}
.article-card.featured .card-body{padding:32px;display:flex;flex-direction:column;justify-content:center}
.article-card.featured .card-title h3{font-size:24px}
.card-image{height:200px;overflow:hidden;background:#e8e8e8}
.card-image img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.card-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px;color:var(--text-muted)}
.card-meta .card-cat{font-weight:700;color:var(--color-brand);text-transform:none}
.card-title h3{font-size:18px;margin-bottom:8px}
.card-title h3 a{color:var(--color-brand);text-decoration:none;transition:color 0.2s}
.card-title h3 a:hover{color:#444;text-decoration:none}
.card-excerpt{font-size:14px;color:#666;line-height:1.6;margin-bottom:0}
.read-time{font-size:12px;color:#aaa;margin-top:auto;padding-top:12px}
.categories-section{position:relative;overflow:hidden;padding:60px 0;background:var(--bg-white);clip-path:polygon(0 40px,100% 0,100% calc(100% - 40px),0 100%)}
.categories-section .section-inner{padding:40px 0}
.categories-section .section-title{text-align:center;margin-bottom:40px}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.category-card{background:var(--bg-light);border:1px solid var(--border);padding:28px 24px;border-radius:8px;text-align:center;transition:border-color 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;align-items:center}
.category-card:hover{border-color:#aaa;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.cat-icon{width:48px;height:48px;margin-bottom:16px}
.cat-icon svg{width:100%;height:100%}
.category-card h4{font-size:17px;margin-bottom:8px}
.category-card p{font-size:14px;color:#666;margin:0;line-height:1.5}
.calculator-section{position:relative;overflow:hidden;padding:60px 0;background:var(--bg-light);clip-path:polygon(0 30px,100% 0,100% 100%,0 calc(100% - 30px))}
.calculator-section .section-title{text-align:center;margin-bottom:36px}
.calculator-section .section-title h2{font-size:26px}
.calculator-section .section-title p{color:var(--text-muted);font-size:15px;margin-top:6px}
.calc-container{background:#fff;border-radius:10px;padding:32px;max-width:900px;margin:0 auto;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.calc-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px}
.calc-field label{display:block;font-size:13px;font-weight:700;color:#555;margin-bottom:6px}
.calc-field input,.calc-field select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:15px;font-family:var(--font-main);background:#fff;color:#333}
.calc-field input:focus,.calc-field select:focus{outline:none;border-color:var(--color-brand)}
.calc-btn{text-align:center;margin-bottom:24px}
.calc-btn .btn-cta{padding:12px 36px;font-size:14px}
.calc-results{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:20px;border-top:1px solid var(--border)}
.calc-result{background:var(--bg-light);padding:16px;border-radius:8px;text-align:center}
.calc-result .result-value{font-size:24px;font-weight:700;color:var(--color-brand);display:block;margin-bottom:4px}
.calc-result .result-label{font-size:13px;color:var(--text-muted)}
.calc-note{text-align:center;margin-top:16px;font-size:13px;color:var(--text-muted)}
.newsletter-section{padding:60px 0;background:var(--color-brand);color:#fff;text-align:center}
.newsletter-section h2{color:#fff;margin-bottom:8px;font-size:26px}
.newsletter-desc{color:#999;font-size:15px;margin-bottom:28px}
.newsletter-form{display:flex;gap:12px;max-width:480px;margin:0 auto}
.newsletter-form input{flex:1;padding:12px 16px;border:1px solid #444;border-radius:6px;background:#111;color:#fff;font-size:15px;font-family:var(--font-main)}
.newsletter-form input::placeholder{color:#666}
.newsletter-form input:focus{outline:none;border-color:var(--color-cta)}
.newsletter-form .btn-cta{padding:12px 24px;font-size:14px;white-space:nowrap}
.newsletter-note{font-size:12px;color:#666;margin-top:12px}
.disclaimer-home{text-align:center;padding:16px 24px;font-size:13px;color:var(--text-muted);background:var(--bg-light);border-top:1px solid var(--border);line-height:1.6}
@media(max-width:768px){
.hero{min-height:360px}
.hero-content{padding:50px 16px}
.hero h1{font-size:28px}
.hero-desc{font-size:16px}
.hero-shapes .shape-3,.hero-shapes .shape-4{display:none}
.article-card.featured{grid-template-columns:1fr}
.article-card.featured .card-image{min-height:200px;height:200px}
.article-card.featured .card-title h3{font-size:20px}
.articles-grid{grid-template-columns:1fr;gap:20px}
.calc-form{grid-template-columns:1fr}
.calc-results{grid-template-columns:1fr}
.categories-section{clip-path:polygon(0 20px,100% 0,100% calc(100% - 20px),0 100%)}
.calculator-section{clip-path:polygon(0 15px,100% 0,100% 100%,0 calc(100% - 15px))}
.newsletter-form{flex-direction:column}
.intro-text p{font-size:16px}
}
=== FICHIER: includes/header.php ===
<?php
$hdr_brand = isset($brand_color) ? $brand_color : '#000000';
?>
<style>
.site-header{background:<?php echo $hdr_brand; ?>;padding:0;position:relative;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:14px 24px}
.logo img{height:38px;display:block}
.menu-toggle{display:none}
.menu-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:101;position:relative}
.menu-burger span{display:block;width:24px;height:2px;background:#fff;transition:transform 0.3s}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.main-nav ul li a{color:#ccc;text-decoration:none;font-size:14px;font-weight:400;transition:color 0.2s}
.main-nav ul li a:hover{color:#fff;text-decoration:none}
@media(max-width:768px){
.menu-burger{display:flex}
.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:<?php echo $hdr_brand; ?>;padding:16px 24px;border-top:1px solid #222;z-index:99}
.main-nav ul{flex-direction:column;gap:0}
.main-nav ul li a{display:block;padding:12px 0;font-size:15px;color:#ddd}
.main-nav ul li a:hover{color:#fff}
.menu-toggle:checked~.main-nav{display:block}
.menu-toggle:checked~.menu-burger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle:checked~.menu-burger span:nth-child(2){opacity:0}
.menu-toggle:checked~.menu-burger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}
</style>
<header class="site-header">
<div class="header-inner">
<a href="/" class="logo" aria-label="Retour à l'accueil">
<img src="/images/logo.svg" alt="ED Cappella Auto" width="160" height="38">
</a>
<input type="checkbox" id="menu-toggle" class="menu-toggle" hidden>
<label for="menu-toggle" class="menu-burger" aria-label="Ouvrir le menu">
<span></span><span></span><span></span>
</label>
<nav class="main-nav" aria-label="Navigation principale">
<ul>
<li><a href="/tests-essais">Tests & Essais</a></li>
<li><a href="/chroniques-mecanique">Mécanique</a></li>
<li><a href="/dossiers-2-roues">2 Roues</a></li>
<li><a href="/guides-administratifs">Administratif</a></li>
<li><a href="/actus-scoops">Actus Auto</a></li>
</ul>
</nav>
</div>
</header>
=== FICHIER: includes/footer.php ===
<?php
$ftr_brand = isset($brand_color) ? $brand_color : '#000000';
?>
<footer class="site-footer" style="background:<?php echo $ftr_brand; ?>;color:#ccc;padding:48px 0 24px">
<div style="max-width:1200px;margin:0 auto;padding:0 24px">
<div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px">
<div>
<p style="color:#fff;font-weight:700;font-size:16px;margin-bottom:12px">ED Cappella Auto</p>
<p style="font-size:14px;line-height:1.7;color:#999;margin:0">Mon blog personnel où je partage ma passion pour l'univers automobile. Voitures, motos, mécanique, utilitaires et toute l'actualité auto. Un espace sincère, écrit par un passionné, pour les passionnés.</p>
</div>
<div>
<p style="color:#fff;font-weight:700;font-size:14px;margin-bottom:12px">Rubriques</p>
<ul style="list-style:none;margin:0;padding:0">
<li style="margin-bottom:8px"><a href="/tests-essais" style="color:#999;text-decoration:none;font-size:14px">Tests & Essais</a></li>
<li style="margin-bottom:8px"><a href="/chroniques-mecanique" style="color:#999;text-decoration:none;font-size:14px">Chroniques Mécanique</a></li>
<li style="margin-bottom:8px"><a href="/dossiers-2-roues" style="color:#999;text-decoration:none;font-size:14px">Dossiers 2 Roues</a></li>
<li style="margin-bottom:8px"><a href="/guides-administratifs" style="color:#999;text-decoration:none;font-size:14px">Guides Administratifs</a></li>
<li style="margin-bottom:8px"><a href="/actus-scoops" style="color:#999;text-decoration:none;font-size:14px">Actus & Scoops</a></li>
</ul>
</div>
<div>
<p style="color:#fff;font-weight:700;font-size:14px;margin-bottom:12px">Informations</p>
<ul style="list-style:none;margin:0;padding:0">
<li style="margin-bottom:8px"><a href="/mentions-legales" style="color:#999;text-decoration:none;font-size:14px">Mentions légales</a></li>
<li style="margin-bottom:8px"><a href="/politique-de-confidentialite" style="color:#999;text-decoration:none;font-size:14px">Politique de confidentialité</a></li>
<li style="margin-bottom:8px"><a href="/cgu" style="color:#999;text-decoration:none;font-size:14px">CGU</a></li>
<li style="margin-bottom:8px"><a href="/contact" style="color:#999;text-decoration:none;font-size:14px">Contact</a></li>
</ul>
</div>
</div>
<div style="border-top:1px solid #222;padding-top:20px;text-align:center">
<p style="font-size:13px;color:#666;margin:0 0 8px">&copy; 2026 ED Cappella Auto - Tous droits réservés</p>
<p style="font-size:12px;color:#555;margin:0">Blog personnel d'information. Les contenus publiés ne constituent en aucun cas un conseil professionnel. Pour toute question technique ou administrative, consultez un professionnel qualifié.</p>
</div>
</div>
</footer>
=== FICHIER: index.php ===
<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/siteconfig.php';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Actualités Auto - Tests, Mécanique, 2 Roues et Guides | ED Cappella Auto</title>
<meta name="description" content="Découvrez mes derniers articles sur l'univers automobile : tests routiers, chroniques mécanique, dossiers 2 roues, guides administratifs et toute l'actualité auto 2026.">
<link rel="canonical" href="<?= $site_url ?>/">
<meta property="og:url" content="<?= $site_url ?>/">
<meta property="og:type" content="website">
<meta property="og:title" content="Actualités Auto - Tests, Mécanique, 2 Roues et Guides | ED Cappella Auto">
<meta property="og:description" content="Découvrez mes derniers articles sur l'univers automobile : tests routiers, chroniques mécanique, dossiers 2 roues, guides administratifs et toute l'actualité auto 2026.">
<meta property="og:image" content="<?= $site_url ?>/images/og-home.jpg">
<meta property="og:site_name" content="ED Cappella Auto">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Actualités Auto - Tests, Mécanique, 2 Roues et Guides | ED Cappella Auto">
<meta name="twitter:description" content="Découvrez mes derniers articles sur l'univers automobile : tests routiers, chroniques mécanique, dossiers 2 roues, guides administratifs et toute l'actualité auto 2026.">
<meta name="twitter:image" content="<?= $site_url ?>/images/og-home.jpg">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'; ?>

<main>
<section class="hero" aria-label="Bienvenue">
<div class="hero-shapes" aria-hidden="true">
<svg class="shape-1" width="200" height="200" viewBox="0 0 200 200" fill="none"><rect x="20" y="20" width="160" height="160" stroke="#fff" stroke-width="1.5" rx="4"/></svg>
<svg class="shape-2" width="160" height="160" viewBox="0 0 160 160" fill="none"><circle cx="80" cy="80" r="70" stroke="#fff" stroke-width="1.5"/><circle cx="80" cy="80" r="40" stroke="#fff" stroke-width="1"/><line x1="80" y1="10" x2="80" y2="150" stroke="#fff" stroke-width="1"/><line x1="10" y1="80" x2="150" y2="80" stroke="#fff" stroke-width="1"/></svg>
<svg class="shape-3" width="80" height="80" viewBox="0 0 80 80" fill="none"><circle cx="40" cy="40" r="28" stroke="#fff" stroke-width="1.5"/><circle cx="40" cy="40" r="10" stroke="#fff" stroke-width="1"/><rect x="37" y="6" width="6" height="12" rx="2" fill="#fff"/><rect x="37" y="62" width="6" height="12" rx="2" fill="#fff"/><rect x="6" y="37" width="12" height="6" rx="2" fill="#fff"/><rect x="62" y="37" width="12" height="6" rx="2" fill="#fff"/><rect x="16" y="13" width="6" height="11" rx="2" fill="#fff" transform="rotate(45 19 18)"/><rect x="55" y="50" width="6" height="11" rx="2" fill="#fff" transform="rotate(45 58 55)"/></svg>
<svg class="shape-4" width="120" height="120" viewBox="0 0 120 120" fill="none"><polygon points="10,110 60,10 110,110" stroke="#fff" stroke-width="1.5" fill="none"/><polygon points="30,90 60,30 90,90" stroke="#fff" stroke-width="1" fill="none"/></svg>
</div>
<div class="hero-content">
<h1>Actualités Auto et Passions sur Quatre Roues</h1>
<div class="hero-desc">
<p>Je partage ici mes coups de coeur, mes analyses et mes découvertes dans l'univers automobile. De la mécanique aux scoops, chaque article est écrit avec la passion d'un vrai amateur.</p>
</div>
<a href="#articles-recents" class="btn-cta">Découvrir mes articles</a>
</div>
</section>

<section class="intro" aria-label="Présentation">
<div class="intro-bg" aria-hidden="true">
<svg class="intro-shape-1" width="100" height="100" viewBox="0 0 100 100" fill="none"><circle cx="50" cy="50" r="40" stroke="#000" stroke-width="1"/><circle cx="50" cy="50" r="20" stroke="#000" stroke-width="0.5"/><line x1="50" y1="5" x2="50" y2="95" stroke="#000" stroke-width="0.5"/><line x1="5" y1="50" x2="95" y2="50" stroke="#000" stroke-width="0.5"/></svg>
<svg class="intro-shape-2" width="80" height="80" viewBox="0 0 80 80" fill="none"><rect x="10" y="10" width="60" height="60" stroke="#000" stroke-width="1" rx="3" transform="rotate(20 40 40)"/></svg>
</div>
<div class="container intro-text">
<p>Bienvenue sur mon blog automobile. Je suis un passionné de voitures, de motos et de tout ce qui touche au monde de l'automobile. Ici, je vous propose mes retours d'expérience sur les derniers modèles testés, mes tutoriels mécanique pour entretenir votre véhicule, des dossiers complets sur les 2 roues, et des guides pratiques pour naviguer dans la jungle administrative auto. Chaque article est rédigé avec soin, par un amateur éclairé, pour des lecteurs curieux.</p>
</div>
</section>

<section class="articles-section" id="articles-recents" aria-label="Articles récents">
<div class="container">
<div class="section-title">
<h2>Mes derniers articles</h2>
</div>
<p class="section-subtitle">Retrouvez mes coups de coeur, analyses et tutoriels les plus récents</p>
<div class="articles-grid">

<article class="article-card featured">
<div class="card-image">
<img src="/images/tests-renault-scenic-e-tech.jpg" alt="Renault Scenic E-Tech électrique sur route de montagne" width="600" height="320">
</div>
<div class="card-body">
<div class="card-meta">
<span class="card-cat">Tests & Essais</span>
<span>12 juin 2026</span>
<span class="read-time">8 min de lecture</span>
</div>
<div class="card-title">
<h3><a href="/tests-essais/renault-scenic-e-tech">Renault Scenic E-Tech : mon avis complet après 500 km au volant</a></h3>
</div>
<p class="card-excerpt">J'ai pris le nouveau Scenic E-Tech pour un road trip de 500 km à travers le Massif Central. Confort, autonomie, comportement routier, je vous livre un retour honnête et détaillé sur ce SUV électrique familial.</p>
</div>
</article>

<article class="article-card">
<div class="card-image">
<img src="/images/entretien-courroie-distribution.jpg" alt="Mécanicien remplaçant une courroie de distribution sur moteur" width="400" height="200">
</div>
<div class="card-body">
<div class="card-meta">
<span class="card-cat">Mécanique</span>
<span>8 juin 2026</span>
<span class="read-time">6 min de lecture</span>
</div>
<div class="card-title">
<h3><a href="/chroniques-mecanique/courroie-distribution">Courroie de distribution : quand et pourquoi la remplacer</a></h3>
</div>
<p class="card-excerpt">La courroie de distribution est un élément critique de votre moteur. Voici comment reconnaître les signes d'usure et les délais à respecter pour éviter la casse moteur.</p>
</div>
</article>

<article class="article-card">
<div class="card-image">
<img src="/images/yamaha-mt-09-2026.jpg" alt="Yamaha MT-09 2026 sur route côtière" width="400" height="200">
</div>
<div class="card-body">
<div class="card-meta">
<span class="card-cat">2 Roues</span>
<span>5 juin 2026</span>
<span class="read-time">7 min de lecture</span>
</div>
<div class="card-title">
<h3><a href="/dossiers-2-roues/yamaha-mt-09-2026">Yamaha MT-09 2026 : roadster agressif ou machine de tous les jours</a></h3>
</div>
<p class="card-excerpt">Le triple cylindre de la MT-09 fait toujours autant sensation. J'ai testé la version 2026 sur route et sur circuit pour vous dire si elle tient ses promesses au quotidien.</p>
</div>
</article>

<article class="article-card">
<div class="card-image">
<img src="/images/demenagement-utilitaire.jpg" alt="Fourgon utilitaire chargé pour un déménagement" width="400" height="200">
</div>
<div class="card-body">
<div class="card-meta">
<span class="card-cat">Utilitaires</span>
<span>1 juin 2026</span>
<span class="read-time">5 min de lecture</span>
</div>
<div class="card-title">
<h3><a href="/tutos-entretien/renault-master-entretien">Renault Master : le guide d'entretien complet pour prolonger sa durée de vie</a></h3>
</div>
<p class="card-excerpt">Le Master est un incontournable des pros. Voici toutes mes astuces pour un entretien rigoureux qui évitera les pannes coûteuses et les arrêts imprévus sur la route.</p>
</div>
</article>

<article class="article-card">
<div class="card-image">
<img src="/images/changement-carte-grise.jpg" alt="Dossier administratif carte grise sur un bureau" width="400" height="200">
</div>
<div class="card-body">
<div class="card-meta">
<span class="card-cat">Administratif</span>
<span>28 mai 2026</span>
<span class="read-time">4 min de lecture</span>
</div>
<div class="card-title">
<h3><a href="/guides-administratifs/carte-grise-2026">Carte grise en 2026 : démarches, délais et pièges à éviter</a></h3>
</div>
<p class="card-excerpt">Changer de propriétaire, faire une mutation ou obtenir un duplicata, les démarches ont évolué. Je vous explique tout ce qu'il faut savoir pour ne pas perdre de temps ni d'argent.</p>
</div>
</article>

<article class="article-card">
<div class="card-image">
<img src="/images/porsche-cayenne-2026.jpg" alt="Porsche Cayenne 2026 sur route sinueuse" width="400" height="200">
</div>
<div class="card-body">
<div class="card-meta">
<span class="card-cat">Actus Auto</span>
<span>24 mai 2026</span>
<span class="read-time">5 min de lecture</span>
</div>
<div class="card-title">
<h3><a href="/actus-scoops/porsche-cayenne-2026">Porsche Cayenne 2026 : premières images et ce qu'on sait déjà</a></h3>
</div>
<p class="card-excerpt">Porsche vient de dévoiler les premières images officielles du futur Cayenne. Design repensé, motorisations hybrides de nouvelle génération, on fait le point sur les infos disponibles.</p>
</div>
</article>

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

<section class="categories-section" aria-label="Rubriques">
<div class="container">
<div class="section-title">
<h2>Mes rubriques</h2>
</div>
<div class="categories-grid">

<div class="category-card">
<div class="cat-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="10,24 30,24"/>
<polyline points="26,16 34,24 26,32"/>
<line x1="18" y1="10" x2="18" y2="38"/>
</svg>
</div>
<h4>Tests & Essais Routiers</h4>
<p>Retours détaillés après des centaines de kilomètres au volant des derniers modèles. Confort, performance, autonomie, je vous dis tout.</p>
</div>

<div class="category-card">
<div class="cat-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="24" cy="24" r="14"/>
<circle cx="24" cy="24" r="5"/>
<rect x="22" y="5" width="4" height="8" rx="1.5" fill="#000" stroke="none"/>
<rect x="22" y="35" width="4" height="8" rx="1.5" fill="#000" stroke="none"/>
<rect x="5" y="22" width="8" height="4" rx="1.5" fill="#000" stroke="none"/>
<rect x="35" y="22" width="8" height="4" rx="1.5" fill="#000" stroke="none"/>
</svg>
</div>
<h4>Chroniques Mécanique</h4>
<p>Tutoriels et explications pour comprendre votre moteur, repérer l'usure et réaliser l'entretien courant en toute confiance.</p>
</div>

<div class="category-card">
<div class="cat-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="15" cy="34" r="8"/>
<circle cx="33" cy="34" r="8"/>
<path d="M23,34 C23,24 27,18 33,16 L35,12"/>
<circle cx="35" cy="12" r="2.5"/>
<path d="M15,34 L15,20 L25,20"/>
</svg>
</div>
<h4>Dossiers 2 Roues</h4>
<p>Motos, scooters et cyclomoteurs : guides d'achat, comparatifs, entretien et retours d'expérience sur les machines du moment.</p>
</div>

<div class="category-card">
<div class="cat-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="10" y="6" width="28" height="36" rx="3"/>
<line x1="17" y1="16" x2="31" y2="16"/>
<line x1="17" y1="22" x2="31" y2="22"/>
<line x1="17" y1="28" x2="27" y2="28"/>
<line x1="17" y1="34" x2="24" y2="34"/>
</svg>
</div>
<h4>Guides Administratifs</h4>
<p>Carte grise, contrôle technique, assurance, homologation : tout comprendre des démarches administratives liées au véhicule.</p>
</div>

<div class="category-card">
<div class="cat-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="24" cy="24" r="16"/>
<circle cx="24" cy="24" r="4" fill="#000" stroke="none"/>
<line x1="24" y1="24" x2="34" y2="12" stroke-width="2.5"/>
<line x1="10" y1="42" x2="22" y2="42" stroke-width="3"/>
</svg>
</div>
<h4>Actus & Scoops Automobiles</h4>
<p>Les dernières nouvelles du monde auto : nouveautés, concepts, rappels et tendances du marché en 2026.</p>
</div>

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

<section class="calculator-section" aria-label="Calculateur de coût carburant">
<div class="container">
<div class="section-title">
<h2>Calculateur de coût carburant</h2>
<p>Estimez le coût de vos trajets en fonction de votre consommation et du prix du carburant</p>
</div>
<div class="calc-container">
<div class="calc-form">
<div class="calc-field">
<label for="calc-distance">Distance parcourue (km)</label>
<input type="number" id="calc-distance" value="500" min="1" step="1">
</div>
<div class="calc-field">
<label for="calc-conso">Consommation (L/100 km)</label>
<input type="number" id="calc-conso" value="6.5" min="0.1" step="0.1">
</div>
<div class="calc-field">
<label for="calc-prix">Prix du litre (EUR)</label>
<input type="number" id="calc-prix" value="1.85" min="0.01" step="0.01">
</div>
</div>
<div class="calc-btn">
<button class="btn-cta" onclick="calculerCarburant()">Calculer le coût</button>
</div>
<div class="calc-results">
<div class="calc-result">
<span class="result-value" id="result-litres">32.5 L</span>
<span class="result-label">Litres nécessaires</span>
</div>
<div class="calc-result">
<span class="result-value" id="result-cout">60.13 EUR</span>
<span class="result-label">Coût total estimé</span>
</div>
</div>
<p class="calc-note">Résultat indicatif. Les consommations réelles varient selon le style de conduite, le véhicule et les conditions routières.</p>
</div>
</div>
</section>

<section class="newsletter-section" aria-label="Newsletter">
<div class="container">
<h2>Restez informé</h2>
<p class="newsletter-desc">Recevez mes derniers articles et coups de coeur directement dans votre boîte mail</p>
<form class="newsletter-form" action="/newsletter-log.php" method="POST" aria-label="Inscription à la newsletter">
<input type="email" name="email" placeholder="Votre adresse email" required aria-label="Adresse email">
<button type="submit" class="btn-cta">S'inscrire</button>
</form>
<p class="newsletter-note">Pas de spam. Désinscription en un clic. Vos données restent confidentielles.</p>
</div>
</section>

<div class="disclaimer-home">
<p>Blog personnel d'information. Les contenus publiés ne constituent en aucun cas un conseil professionnel. Pour toute question technique ou administrative, consultez un professionnel qualifié.</p>
</div>

</main>

<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'; ?>
<script src="js/home.js"></script>
</body>
</html>
=== FICHIER: js/home.js ===
function calculerCarburant(){
var d=parseFloat(document.getElementById('calc-distance').value)||0;
var c=parseFloat(document.getElementById('calc-conso').value)||0;
var p=parseFloat(document.getElementById('calc-prix').value)||0;
var litres=(d*c)/100;
var cout=litres*p;
document.getElementById('result-litres').textContent=litres.toFixed(1)+' L';
document.getElementById('result-cout').textContent=cout.toFixed(2)+' EUR';
}
document.querySelectorAll('a[href^="#"]').forEach(function(a){
a.addEventListener('click',function(e){
var t=document.querySelector(this.getAttribute('href'));
if(t){e.preventDefault();t.scrollIntoView({behavior:'smooth',block:'start'});}
});
});
=== FIN FICHIER ===

/* ===== RESPONSIVE (auto-repair) ===== */
@media(max-width:1024px){
.articles-grid{grid-template-columns:1fr 1fr}
.article-card.featured{grid-template-columns:1fr 1fr}
.calc-container{padding:24px}
.calc-form{grid-template-columns:1fr 1fr 1fr}
.categories-grid{grid-template-columns:repeat(2,1fr)}
.hero h1{font-size:36px}
.hero-content{max-width:600px;padding:60px 24px}
}
@media(max-width:768px){
html{overflow-x:hidden}
body{overflow-x:hidden}
.hero{min-height:360px}
.hero-content{padding:50px 16px}
.hero h1{font-size:28px}
.hero-desc{font-size:16px}
.hero-shapes .shape-3,.hero-shapes .shape-4{display:none}
.article-card.featured{grid-template-columns:1fr}
.article-card.featured .card-image{min-height:200px;height:200px}
.article-card.featured .card-title h3{font-size:20px}
.article-card.featured .card-body{padding:20px}
.articles-grid{grid-template-columns:1fr;gap:20px}
.calc-form{grid-template-columns:1fr}
.calc-results{grid-template-columns:1fr}
.categories-grid{grid-template-columns:1fr}
.category-card{padding:20px 16px}
.categories-section{clip-path:polygon(0 20px,100% 0,100% calc(100% - 20px),0 100%)}
.calculator-section{clip-path:polygon(0 15px,100% 0,100% 100%,0 calc(100% - 15px))}
.calc-container{padding:20px}
.newsletter-form{flex-direction:column}
.newsletter-form input,.newsletter-form .btn-cta{width:100%}
.intro-text p{font-size:16px}
.card-meta{flex-wrap:wrap;gap:6px}
.section-title h2{font-size:24px}
.calculator-section .section-title h2{font-size:22px}
.newsletter-section h2{font-size:22px}
.disclaimer-home{padding:12px 16px}
}
@media(max-width:480px){
.hero{min-height:280px}
.hero-content{padding:40px 12px}
.hero h1{font-size:22px;letter-spacing:0}
.hero-desc{font-size:14px}
.hero-content .btn-cta{font-size:14px;padding:14px 28px}
.hero-shapes .shape-1,.hero-shapes .shape-2{opacity:0.03}
.articles-section{padding:40px 0}
.categories-section{padding:40px 0}
.calculator-section{padding:40px 0}
.calc-container{padding:16px}
.calc-field input,.calc-field select{font-size:14px;padding:8px 10px}
.calc-result .result-value{font-size:20px}
.calc-btn .btn-cta{padding:10px 24px;font-size:13px}
.section-title h2{font-size:20px}
.section-subtitle{font-size:14px}
.newsletter-section{padding:40px 0}
.newsletter-section h2{font-size:20px}
.newsletter-desc{font-size:14px}
.newsletter-form input{font-size:14px;padding:10px 12px}
.newsletter-form .btn-cta{font-size:13px;padding:10px 18px}
.newsletter-note{font-size:11px}
.article-card.featured .card-title h3{font-size:18px}
.card-title h3{font-size:16px}
.card-body{padding:16px}
.card-excerpt{font-size:13px}
.card-meta{font-size:12px}
.category-card{padding:16px 12px}
.category-card h4{font-size:15px}
.category-card p{font-size:13px}
.cat-icon{width:40px;height:40px}
.intro-text p{font-size:15px}
.disclaimer-home{font-size:12px;padding:10px 12px}
}