* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height:1.6; color:#333; background:#f4f7f9; }

/* HEADER & NAVIGATION */
header { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color:white; 
    padding:1rem 0; 
    position:sticky; 
    top:0; 
    z-index:1000; 
    box-shadow:0 2px 10px rgba(0,0,0,0.1); 
}
nav { 
    max-width:1200px; 
    margin:0 auto; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:0 2rem; 
}
.logo { font-size:1.8rem; font-weight:bold; display:flex; align-items:center; gap:0.5rem; }
nav ul { display:flex; list-style:none; gap:2rem; }
nav ul.active { display:flex; }
.menu-toggle { display:none; font-size:1.8rem; cursor:pointer; background:none; border:none; color:white; padding:0; }
nav a { color:white; text-decoration:none; transition:opacity 0.3s; font-weight:500; }
nav a:hover { opacity:0.8; }

/* HERO SECTION */
.hero { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color:white; 
    padding:5rem 2rem; 
    text-align:center; 
}
.hero h1 { font-size:3rem; margin-bottom:1rem; animation:fadeInUp 0.8s ease; }
.hero p { font-size:1.3rem; margin-bottom:2rem; opacity:0.9; animation:fadeInUp 0.8s ease 0.2s backwards; }
.cta-button { 
    background:white; 
    color:#667eea; 
    padding:1rem 2.5rem; 
    border:none; 
    border-radius:50px; 
    font-size:1.1rem; 
    font-weight:bold; 
    cursor:pointer; 
    transition:transform 0.3s, box-shadow 0.3s; 
    text-decoration:none; 
    display:inline-block; 
}
.cta-button:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,0.2); }

/* STRUCTURE GÉNÉRALE & ESPACES PUB */
.container { max-width:1200px; margin:2rem auto; padding:0 2rem; }
.ad-space { background:#e0e0e0; color:#555; text-align:center; padding:1rem; margin:2rem 0; font-size:0.9rem; border-radius:8px; }

/* ANIMATION */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}

/* SECTION GUIDES (CATÉGORIES) */
.categories { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:3rem; }

/* RÈGLES POUR RENDRE LES CARTES CLICABLES (ajustement de la dernière étape) */
.category-link {
    text-decoration: none; 
    color: inherit; 
    display: block;
    transition: transform 0.3s, box-shadow 0.3s;
}
.category-link:hover .category-card {
    transform: translateY(-5px); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.category-card { 
    background:white; 
    padding:20px; 
    border-radius:12px; 
    box-shadow:0 4px 15px rgba(0,0,0,0.05); 
    text-align:center; 
    transition:all 0.3s; 
    height:100%; 
}
.category-card h3 { color:#667eea; margin:0.5rem 0; font-size:1.3rem; }
.category-card p { font-size:0.9rem; color:#666; }

/* SECTION ARTICLES */
.section-title { 
    font-size:2rem; 
    color:#444; 
    text-align:center; 
    margin-bottom:2rem; 
    border-bottom:3px solid #667eea; 
    padding-bottom:10px; 
    display:inline-block; 
    margin-left:50%; 
    transform:translateX(-50%); 
}
.articles-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.article-card { background:white; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.05); transition:transform 0.3s, box-shadow 0.3s; }
.article-card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.1); }
.article-image { background-color:#ccc; height:150px; } 
.article-content { padding:1.5rem; }
.article-category { background:#e6e8ff; color:#667eea; padding:0.3rem 0.8rem; border-radius:15px; font-size:0.8rem; font-weight:600; display:inline-block; margin-bottom:0.5rem; }
.article-content h3 { font-size:1.2rem; margin-bottom:0.5rem; }
.article-content p { font-size:0.9rem; color:#666; margin-bottom:1rem; }
.read-more { color:#764ba2; text-decoration:none; font-weight:bold; font-size:0.9rem; transition:color 0.3s; }
.read-more:hover { color:#667eea; }

/* SECTION NEWSLETTER/CONTACT */
.newsletter { background:#e6e8ff; padding:3rem 2rem; border-radius:12px; text-align:center; margin-top:3rem; }
.newsletter h2 { color:#444; margin-bottom:0.5rem; }
.newsletter p { color:#666; margin-bottom:1.5rem; }
.newsletter-form { display:flex; justify-content:center; gap:10px; max-width:500px; margin:0 auto; }
.newsletter-form input { padding:0.8rem 1rem; border:1px solid #ccc; border-radius:50px; flex-grow:1; font-size:1rem; }
.newsletter-form button { background:#764ba2; color:white; padding:0.8rem 1.5rem; border:none; border-radius:50px; cursor:pointer; transition:background 0.3s; font-size:1rem; }
.newsletter-form button:hover { background:#667eea; }

/* SECTION LÉGALE (ajoutée dans index.html) */
.legal-section {
    padding: 3rem 0;
    color: #555;
}
.legal-section h2 {
    font-size: 1.8rem;
    color: #444;
    margin-bottom: 1.5rem;
}
.legal-section p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.legal-section strong {
    color: #333;
}

/* FOOTER */
footer { background:#333; color:#f4f7f9; padding:3rem 2rem 1rem; }
.footer-content { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; }
.footer-section h3 { font-size:1.1rem; margin-bottom:1rem; color:#667eea; }
.footer-section p { font-size:0.9rem; color:#ccc; }
.footer-section ul { list-style:none; }
.footer-section li a { color:#ccc; text-decoration:none; font-size:0.9rem; display:block; margin-bottom:0.5rem; transition:color 0.3s; }
.footer-section li a:hover { color:white; }
.footer-bottom { text-align:center; border-top:1px solid #444; padding-top:1rem; margin-top:2rem; font-size:0.8rem; color:#aaa; }


/* ==================================== */
/* RESPONSIVE DESIGN           */
/* ==================================== */

/* Tablette (Max 1024px) */
@media (max-width: 1024px) {
    .articles-grid, .categories, .footer-content { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .hero h1 { font-size:2.5rem; }
}

/* Mobile (Max 768px) */
@media (max-width: 768px) {
    nav { padding:0 1rem; }
    
    /* Menu Hamburger (caché par défaut, actif au clic) */
    nav ul { 
        display:none; 
        flex-direction:column; 
        position:absolute; 
        top:60px; 
        left:0; 
        width:100%; 
        background: #764ba2; 
        box-shadow:0 5px 10px rgba(0,0,0,0.2); 
        padding:1rem 0; 
    }
    nav ul.active { display:flex; }
    nav ul li { width:100%; text-align:center; }
    nav ul a { padding:0.5rem 1rem; display:block; }
    .menu-toggle { display:block; }
    
    .hero { padding:3rem 1rem; }
    .hero h1 { font-size:2rem; }
    .hero p { font-size:1.1rem; }

    .container { padding:0 1rem; }
    
    /* Tous les grids passent en colonne simple */
    .articles-grid, .categories, .footer-content { 
        grid-template-columns: 1fr; 
    }
    .newsletter-form { flex-direction:column; }
    .newsletter-form input, .newsletter-form button { border-radius:8px; }
    
    .footer-content { text-align:center; }
    .footer-section { margin-bottom:1.5rem; }
}