/**
 * 🚨 CORRECTION URGENTE BLOG.HTML - 19 avril 2026
 * ============================================
 * 1️⃣ Suppression des 4 images d'articles
 * 2️⃣ Texte visible (marron chocolat #5D4E37)
 * 3️⃣ Présentation professionnelle et alignée
 * 4️⃣ Palette marron/caramel/beige UNIQUEMENT
 */

/* ============================================
   1️⃣ SUPPRESSION DES IMAGES D'ARTICLES
   ============================================ */

/* Cacher TOUTES les images des articles de blog */
.blog-card .blog-card-image,
.blog-card .blog-card-image img,
.blog-card.featured .blog-card-image,
.blog-card.featured .blog-card-image img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   2️⃣ CARTES D'ARTICLES - LAYOUT PROPRE
   ============================================ */

/* Carte d'article - fond élégant et bordure */
.blog-card,
.blog-card.featured {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 2.5rem auto !important;
    padding: 2.5rem 3rem !important;
    background: #FFFEF9 !important; /* Blanc crème */
    border: 2px solid #F5F0E8 !important; /* Beige élégant */
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(93, 78, 55, 0.08) !important;
    transition: all 0.3s ease !important;
}

.blog-card:hover,
.blog-card.featured:hover {
    border-color: #C9A961 !important; /* Caramel doré */
    box-shadow: 0 6px 18px rgba(201, 169, 97, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Contenu de la carte */
.blog-card-content {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   3️⃣ TITRES D'ARTICLES - LISIBLES & ÉLÉGANTS
   ============================================ */

/* Supprimer le dégradé doré/orange - utiliser marron chocolat */
.blog-card-title,
.blog-card .blog-card-title,
.blog-card.featured .blog-card-title,
h2.blog-card-title {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #5D4E37 !important; /* Marron chocolat - VISIBLE */
    line-height: 1.4 !important;
    margin-bottom: 1.2rem !important;
    padding: 0 !important;
    text-align: left !important;
    
    /* 🚨 SUPPRIMER LE DÉGRADÉ */
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #5D4E37 !important;
    background-clip: initial !important;
}

/* ============================================
   4️⃣ TEXTE D'EXTRAIT - LISIBLE & PROFESSIONNEL
   ============================================ */

/* Texte d'extrait - marron clair lisible */
.blog-card-excerpt,
.blog-card .blog-card-excerpt,
.blog-card.featured .blog-card-excerpt,
p.blog-card-excerpt {
    font-family: 'Lora', serif !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: #6B5D4F !important; /* Marron clair - LISIBLE sur fond blanc */
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    text-align: left !important;
}

/* ============================================
   5️⃣ LIEN "LIRE L'ARTICLE" - CARAMEL DORÉ
   ============================================ */

/* Lien de lecture */
.blog-read-more,
.blog-card .blog-read-more,
.blog-card.featured .blog-read-more,
a.blog-read-more {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #C9A961 !important; /* Caramel doré */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    padding: 0.5rem 0 !important;
}

.blog-read-more:hover,
.blog-card .blog-read-more:hover,
.blog-card.featured .blog-read-more:hover,
a.blog-read-more:hover {
    color: #5D4E37 !important; /* Marron chocolat au survol */
    transform: translateX(5px) !important;
}

/* ============================================
   6️⃣ SECTION CTA - CARAMEL DORÉ (PAS DÉGRADÉ)
   ============================================ */

/* Bouton CTA - caramel doré au lieu du dégradé */
.cta-button-large,
a.cta-button-large {
    background: #C9A961 !important; /* Caramel doré UNIQUEMENT */
    background-image: none !important; /* Supprimer le dégradé */
    color: #FFFEF9 !important; /* Blanc crème */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    padding: 1rem 2.5rem !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.cta-button-large:hover,
a.cta-button-large:hover {
    background: #5D4E37 !important; /* Marron chocolat au survol */
    box-shadow: 0 6px 18px rgba(93, 78, 55, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   7️⃣ RESPONSIVE - MOBILE & TABLETTE
   ============================================ */

@media (max-width: 768px) {
    .blog-card,
    .blog-card.featured {
        max-width: 100% !important;
        padding: 2rem 1.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    .blog-card-title,
    h2.blog-card-title {
        font-size: 1.6rem !important;
    }
    
    .blog-card-excerpt,
    p.blog-card-excerpt {
        font-size: 1rem !important;
    }
    
    .cta-button-large,
    a.cta-button-large {
        font-size: 1rem !important;
        padding: 0.9rem 2rem !important;
    }
}

/* ============================================
   8️⃣ SECTION BLOG - ESPACEMENT PROPRE
   ============================================ */

.blog-section {
    padding: 4rem 2rem !important;
    background: #1a1a1a !important; /* Fond noir */
}

.blog-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ============================================
   ✅ CHECKLIST CORRECTIONS APPLIQUÉES
   ============================================ */
/*
✅ 1. Images supprimées (display: none, visibility: hidden)
✅ 2. Titres lisibles (marron chocolat #5D4E37, pas de dégradé)
✅ 3. Extraits lisibles (marron clair #6B5D4F sur fond blanc)
✅ 4. Cartes alignées et professionnelles (padding uniforme)
✅ 5. Bordures élégantes (beige #F5F0E8)
✅ 6. Hover caramel doré (#C9A961)
✅ 7. CTA caramel doré (pas de dégradé tropical)
✅ 8. Responsive mobile/tablette
✅ 9. Palette UNIQUEMENT marron/caramel/beige/blanc/noir
*/