/* ========================================= */
/* 0. Bases et Variables (Couleurs Typical Solution) */
/* ========================================= */
:root {
    --color-primary: #007bff; /* Bleu Moyen/Ciel (Confiance, Clarté) */
    --color-secondary: #ffc107; /* Jaune/Orange (Action, Lumière) */
    --color-cta-red: #ea646d; /* Couleur Corail/Rouge pour certains CTA */
    --color-dark: #343a40; 
    --color-footer-bg: #222222; /* Fond très sombre pour le footer */
    --color-footer-text: #cccccc; /* Texte gris clair pour le footer */
    --color-text-dark: #121212; 
    --color-text-light: #4a4a4a; 
    --color-white: #ffffff;
    --color-light-bg: #f8f9fa; /* Fond gris très clair (cartes, blog) */
    
    /* --- NOUVELLE VARIABLE INTRODUITE --- */
    --color-soft-light-bg: #f4f6f9; /* Fond très pâle pour alterner avec le blanc */

    /* Couleur du fond Hero (utilise la nouvelle variable pour l'homogénéité) */
    --color-hero-soft-bg: var(--color-soft-light-bg); 
    
    --font-family: 'Inter', sans-serif; 

    /* Couleurs de fond des Cartes Étapes */
    --card-bg-1: #fff8f5; 
    --card-bg-2: #fef5f7; 
    --card-bg-3: #f5f8ff; 
    --card-bg-4: #f4fff7; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    scroll-behavior: smooth; 
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Typographie */
h1 {
    font-size: 2.8em; 
    font-weight: 800; 
    color: var(--color-dark); 
}

h2 {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text-dark);
}

h2.section-title {
    text-align: center;
    margin-bottom: 40px;
}

h3 {
    font-size: 1.4em;
    font-weight: 700; 
    color: var(--color-text-dark);
    margin-bottom: 0.3em;
}

p {
    color: var(--color-text-light);
}

/* Bouton CTA - Style Distinctif */
.cta-button {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;
    text-align: center;
    border: none;
    cursor: pointer;
}

/* --- DÉBUT MODIFICATION UI/UX : CTA PRINCIPAL (Rouge/Corail) pour un meilleur impact --- */
.primary-cta {
    background-color: var(--color-cta-red) !important; 
    color: var(--color-white) !important; 
}
.primary-cta:hover {
    background-color: #d1575f !important; 
    transform: translateY(-2px);
}
/* --- FIN MODIFICATION UI/UX : CTA PRINCIPAL --- */


/* CTA secondaire par défaut (Jaune) */
.cta-button:hover {
    background-color: #ffda6a; 
    transform: translateY(-2px);
}

/* Style de bouton pour la section Pillars */
.secondary-cta-inverted {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.secondary-cta-inverted:hover {
    background-color: #0060c0;
}


/* ========================================= */
/* 1. HEADER & NAVIGATION */
/* ========================================= */
.main-header {
    background-color: var(--color-white);
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo image seule */
.logo {
    text-decoration: none;
    font-weight: 800;
    color: var(--color-text-dark);
    display: flex; 
    align-items: center;
}

.logo.logo-img-only {
    font-size: 0; 
    height: auto;
}
.logo.logo-img-only .logo-icon {
    width: 200px; 
    height: auto;
    display: block;
    margin-right: 0; 
}


.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li a {
    text-decoration: none;
    color: var(--color-text-dark);
    padding: 10px 15px;
    transition: color 0.3s;
    font-weight: 500;
}

.main-nav li a:hover {
    color: var(--color-primary);
}

.menu-toggle {
    display: none;
}


/* ========================================= */
/* 2. SECTION HÉRO (HERO) - NOUVEAU STYLE DEUX COLONNES */
/* ========================================= */
.hero-section {
    /* MODIFICATION UI : Utilisation de la variable de fond doux */
    background-color: var(--color-hero-soft-bg) !important; 
    background: none !important;
    padding: 100px 0;
    color: var(--color-text-dark); 
}

.hero-content-new {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    gap: 40px;
}

.hero-text-content {
    flex: 1;
    max-width: 50%;
    text-align: left; 
    padding: 20px 0;
}

.hero-image-container {
    flex: 1;
    max-width: 50%;
    text-align: center;
}

.hero-image-container img {
    max-width: 100%;
    height: auto;
}

/* Stylisation du texte (Similaire à l'exemple fourni) */
.hero-main-title {
    font-size: 3.5em; 
    font-weight: 800;
    color: var(--color-dark); /* Titre sombre sur fond clair */
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-subtitle-new {
    font-size: 1.25em;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

/* Stylisation du bouton CTA dans le Hero (utilise .primary-cta) */
.hero-cta-new {
    text-transform: uppercase;
    font-size: 1.1em;
    padding: 15px 30px;
    letter-spacing: 1px;
}


/* ========================================= */
/* NOUVELLE SECTION (1) : PILIERS/FONDATIONS */
/* ========================================= */
.pillars-section {
    padding: 80px 0;
    /* MODIFICATION UI : Couleur blanche pour contraster avec le Hero */
    background-color: var(--color-white);
}

.pillar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.pillar-text {
    flex: 1;
    max-width: 50%;
}
.pillar-text h2 {
    color: var(--color-primary);
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 15px;
}
.pillar-text p {
    margin-bottom: 15px;
}

.pillar-image {
    flex: 1;
    text-align: right;
    max-width: 50%;
}
.pillar-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* ========================================= */
/* 3. SECTION PROBLÈME/PREUVE */
/* ========================================= */
.probleme-section {
    padding: 60px 0;
    text-align: center;
    /* MODIFICATION UI : Couleur de fond douce (pour alterner) */
    background-color: var(--color-soft-light-bg);
}

.problem-list {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 30px;
}

/* --- DÉBUT MODIFICATION UI/UX : CARTE PROBLÈME AMÉLIORÉE pour la lisibilité et l'impact --- */
.problem-card {
    flex: 1;
    max-width: 300px;
    padding: 25px; /* Augmenter le padding */
    border-radius: 8px; /* Coins arrondis */
    background-color: var(--color-white); /* Fond blanc pour faire ressortir */
    border-left: 5px solid var(--color-secondary); /* Augmenter la bordure pour l'impact */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Petite ombre */
    transition: transform 0.3s;
    text-align: left;
}
.problem-card:hover {
    transform: translateY(-3px);
}
/* --- FIN MODIFICATION UI/UX : CARTE PROBLÈME AMÉLIORÉE --- */

.problem-card i {
    font-size: 2em;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.problem-card h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
}


/* ========================================= */
/* D. SECTION ÉTAPES TYPIQUES (CARTES INTERACTIVES) */
/* ========================================= */
.etapes-section {
    padding: 80px 0;
    /* MODIFICATION UI : Couleur blanche (pour faire ressortir les cartes colorées) */
    background-color: var(--color-white); 
}

.feature-cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    margin-top: 40px;
}

.feature-card {
    padding: 30px;
    border-radius: 12px;
    height: 100%;
    background-color: var(--color-white); 
    
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; 
    cursor: pointer; 
}
.feature-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); 
}

.card-icon-placeholder {
    height: 120px; 
    margin-bottom: 20px;
}
.card-icon-placeholder img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card h3 {
    font-size: 1.3em; 
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 5px; 
    line-height: 1.2;
}

.feature-card p {
    font-size: 0.9em; 
    color: var(--color-text-light);
    margin-bottom: 15px; 
    line-height: 1.4;
}

.cta-link {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.95em;
    transition: color 0.3s;
    margin-top: 5px; 
}
.cta-link:hover {
    text-decoration: underline;
}

/* Couleurs de Fond des Cartes Étapes (inchangées) */
.card-style-1 { background-color: var(--card-bg-1); }
.card-style-2 { background-color: var(--card-bg-2); }
.card-style-3 { background-color: var(--card-bg-3); }
.card-style-4 { background-color: var(--card-bg-4); }


/* ========================================= */
/* E. SECTION SOLUTIONS ESSENTIELLES */
/* ========================================= */
.solutions-section {
    padding: 80px 0;
    /* MODIFICATION UI : Couleur gris très clair (pour alterner) */
    background-color: var(--color-light-bg); 
}

.solutions-title {
    text-align: center;
    margin-bottom: 20px;
}

.solutions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.solutions-subtitle {
    font-size: 1.1em;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-right: 20px;
    max-width: 70%;
}

/* Flèches de navigation */
.solutions-nav {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.arrow-button {
    background: none;
    border: 1px solid #ccc;
    color: var(--color-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}
.arrow-button:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary);
}
.arrow-button i {
    font-size: 0.8em;
}

/* Grille des cartes de solutions (Défilement horizontal) */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(300px, 1fr)); 
    gap: 20px;
    overflow-x: scroll; 
    scroll-snap-type: x mandatory; 
    padding-bottom: 20px; 
}
.solutions-grid::-webkit-scrollbar { display: none; }
.solutions-grid { -ms-overflow-style: none; scrollbar-width: none; }


.solution-card {
    background-color: var(--color-white); /* Les cartes sont blanches sur fond gris clair */
    padding: 25px;
    border-radius: 8px;
    scroll-snap-align: start;
    min-width: 300px; 
}

.solution-icon-container {
    height: 60px;
    margin-bottom: 10px;
}
.solution-icon-container i {
    font-size: 2.2em;
    color: var(--color-primary);
}
.solution-icon-container .icon-domain {
    color: var(--color-secondary);
    margin-left: 5px;
}

.solution-card h3 {
    font-size: 1.25em;
    font-weight: 700;
    margin-bottom: 10px;
}

.solution-description {
    font-size: 0.9em;
    color: var(--color-text-light);
    margin-bottom: 15px;
    min-height: 70px; 
}

/* Styles des Tags (Puces) */
.solution-tags {
    margin-bottom: 20px;
}
.tag {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
    text-transform: uppercase;
}
/* Définitions des couleurs des tags */
.tag-foundation { background-color: #e6f7ff; color: #007bff; }
.tag-musthave { background-color: #fff4e6; color: #ff9900; }
.tag-marketing { background-color: #e6ffe6; color: #38a169; }
.tag-pro { background-color: #f5e6ff; color: #9333ea; }
.tag-security { background-color: #ffe6e6; color: #dc3545; }
.tag-privacy { background-color: #e6f7ff; color: #007bff; }
.tag-ecommerce { background-color: #ffe6f5; color: #e83e8c; }
.tag-platform { background-color: #e6e6e6; color: #6c757d; }
.tag-growth { background-color: #fce4ec; color: #e91e63; }
.tag-seo { background-color: #e0f7fa; color: #00bcd4; }


.read-more-link {
    font-size: 1em;
    color: var(--color-primary);
    font-weight: 500;
    transition: color 0.3s;
}
.read-more-link:hover {
    text-decoration: underline;
}


/* ========================================= */
/* NOUVELLE SECTION (2) : CTA VIDÉO */
/* ========================================= */
.media-cta-section {
    padding: 100px 0;
    /* MODIFICATION UI : Garder le fond sombre pour l'impact final */
    background-color: var(--color-dark); 
    color: var(--color-white);
}

.media-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.media-text {
    flex: 1;
    max-width: 45%;
}
.media-text h2 {
    color: var(--color-secondary);
    font-size: 2.5em;
    margin-bottom: 20px;
}
.media-text p {
    color: var(--color-light-bg);
    margin-bottom: 30px;
}
/* Le CTA dans cette section est géré par .primary-cta */
.media-text .cta-button {
    background-color: var(--color-primary); /* Style écrasé par .primary-cta */
    color: var(--color-white);
}
.media-text .cta-button:hover {
    background-color: #0060c0; /* Style écrasé par .primary-cta:hover */
}


.media-video-container {
    flex: 1;
    max-width: 55%;
    position: relative;
    padding-bottom: 31.5%; 
    height: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
}

#video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================= */
/* 4. FOOTER AMÉLIORÉ (version améliorée) */
/* ========================================= */
.main-footer-enhanced {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 60px 0 20px;
    font-family: var(--font-family); /* Assurez-vous que cette variable est définie ailleurs */
}

/* Grille corrigée pour 4 colonnes (ajout d'une colonne sociale) */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
}

/* Responsive : Empiler les colonnes sur mobile */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Une colonne sur mobile */
        gap: 20px;
    }
}

.footer-col h3 {
    color: var(--color-white);
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.footer-col h4 {
    color: var(--color-white);
    font-size: 1em;
    font-weight: 600;
    margin: 20px 0 10px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col li {
    margin-bottom: 8px;
}

/* Séparateur sémantique */
.footer-separator {
    border: none;
    border-top: 1px solid #555;
    margin: 15px 0;
    height: 1px;
}

.footer-col a {
    color: var(--color-footer-text);
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease, transform 0.2s ease; /* Animation subtile */
}

.footer-col a:hover {
    color: var(--color-primary);
    transform: translateX(5px); /* Effet de glissement */
}

/* Accessibilité : Styles pour le focus */
.footer-col a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Liens sociaux avec icônes */
.social-links li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Formulaire de newsletter */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.newsletter-form input {
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

.newsletter-form input:focus {
    outline: 2px solid var(--color-primary);
}

.newsletter-form button {
    padding: 8px 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.newsletter-form button:hover {
    background-color: var(--color-primary-hover); /* Assurez-vous que cette variable est définie */
}

.newsletter-form button:focus {
    outline: 2px solid var(--color-white);
}

.footer-bottom {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-baseline {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Logo corrigé */
.footer-logo-icon {
    width: 150px;
    height: auto;
}

/* Texte de baseline en paragraphe pour la sémantique */
.footer-baseline .baseline-text {
    color: var(--color-footer-text);
    font-size: 0.9em;
    line-height: 1.4;
    max-width: 450px;
}

.footer-copyright p {
    color: var(--color-footer-text);
    font-size: 0.85em;
}


/* ========================================= */
/* 6. STYLES DE LA PAGE BLOG (blogs.php) (inchangés) */
/* ========================================= */

.blog-header-section {
    background-color: var(--color-light-bg);
    padding: 60px 0 40px;
    text-align: center;
}

.blog-main-title {
    font-size: 2.5em;
    font-weight: 800;
    color: var(--color-text-dark);
}

.blog-subtitle-header {
    font-size: 1.1em;
    color: var(--color-text-light);
    margin-top: 10px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.blog-content-section {
    padding: 60px 0;
}

.blog-grid-container {
    display: grid;
    grid-template-columns: 2.5fr 1fr; 
    gap: 40px;
}

.article-card-list {
    display: flex;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
}

.article-image-container {
    flex-shrink: 0;
    width: 250px;
    height: 160px;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 25px;
}
.article-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}
.article-card-list:hover .article-image-container img {
    transform: scale(1.05); 
}

.article-info {
    flex-grow: 1;
}

.article-info h2 {
    font-size: 1.5em;
    margin-bottom: 8px;
}
.article-info h2 a {
    color: var(--color-text-dark);
    text-decoration: none;
}
.article-info h2 a:hover {
    color: var(--color-primary);
}

.article-category {
    font-size: 0.85em;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
    background-color: var(--card-bg-1);
    color: var(--color-text-dark);
}

.article-meta {
    display: block;
    font-size: 0.85em;
    color: var(--color-text-light);
    margin-top: 5px;
}

/* Pagination */
.pagination {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}
.pagination a {
    text-decoration: none;
    color: var(--color-text-light);
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 0 5px;
    transition: all 0.3s;
}
.pagination a:hover, .pagination .current-page {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}


/* Style de la Barre Latérale (SIDEBAR) */
.blog-sidebar {
    padding: 0;
}

.sidebar-block {
    background-color: var(--color-light-bg);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.sidebar-block h3 {
    font-size: 1.3em;
    color: var(--color-text-dark);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 5px;
}

/* Sidebar CTA */
.cta-sidebar .cta-button {
    width: 100%;
    margin-top: 10px;
}

/* Sidebar Catégories */
.categories-sidebar ul {
    list-style: none;
    padding: 0;
}
.categories-sidebar li a {
    display: block;
    color: var(--color-text-light);
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    text-decoration: none;
}
.categories-sidebar li a:hover {
    color: var(--color-primary);
}


/* ========================================= */
/* 7. STYLES DE LA PAGE ARTICLE (article.php) (inchangés) */
/* ========================================= */

.article-page-section {
    padding: 60px 0;
}

.article-grid-container {
    grid-template-columns: 2.5fr 1fr; 
    gap: 40px;
}

.main-article-column {
    line-height: 1.7; 
}

/* En-tête de l'article */
.article-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.article-main-title {
    font-size: 2.8em;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-top: 5px;
}

.article-intro-text {
    font-size: 1.2em;
    color: var(--color-text-light);
    margin: 15px 0;
}

.article-meta-info span {
    font-size: 0.9em;
    color: var(--color-text-light);
    margin: 0 10px;
}

/* Image de couverture */
.article-cover-image {
    margin: 30px 0;
    border-radius: 12px;
    overflow: hidden;
}
.article-cover-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.article-cover-image figcaption {
    font-size: 0.8em;
    color: var(--color-text-light);
    text-align: center;
    padding: 10px 0;
}

/* Contenu de l'article */
.article-content h2 {
    font-size: 1.8em;
    margin-top: 40px;
    margin-bottom: 15px;
    border-left: 4px solid var(--color-secondary); 
    padding-left: 15px;
    color: var(--color-text-dark);
}

.article-content h3 {
    font-size: 1.4em;
    margin-top: 30px;
    margin-bottom: 10px;
}

.article-content p {
    margin-bottom: 20px;
}

/* Tableau récapitulatif d'affiliation (Clé pour la conversion) */
.affiliate-recap-table {
    margin: 40px 0;
    padding: 20px;
    background-color: var(--card-bg-3); 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.recap-title {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.affiliate-recap-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
}
.affiliate-recap-table th, .affiliate-recap-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #eee;
}
.affiliate-recap-table th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
}
.table-cta {
    font-size: 0.9em;
    padding: 8px 12px;
}
.transparency-note {
    font-size: 0.8em;
    text-align: center;
    color: #cc0000;
    margin-top: 10px;
}

/* CTA au milieu de l'article */
.mid-article-cta {
    background-color: var(--card-bg-2); 
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    margin: 30px 0;
}
.mid-article-cta p {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 15px;
}

/* Sidebar d'article */
.article-sidebar {
    padding-top: 10px;
}

.table-of-contents h3 {
    border-bottom: none;
    text-transform: uppercase;
}
.table-of-contents nav ul {
    list-style: none;
}
.table-of-contents nav ul a {
    display: block;
    padding: 8px 0;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.95em;
    border-left: 2px solid #ddd;
    padding-left: 10px;
    margin-bottom: 5px;
}
.table-of-contents nav ul a:hover {
    font-weight: 700;
    border-left-color: var(--color-primary);
}

.recommendation-sidebar {
    background-color: var(--card-bg-4);
    text-align: center;
}
.recommendation-sidebar h3 {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text-dark);
}
.recommendation-sidebar .cta-button {
    width: 100%;
    margin-top: 15px;
}

.related-products-sidebar ul {
    list-style: none;
}
.related-products-sidebar a {
    color: var(--color-text-dark);
    display: block;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    text-decoration: none;
}
.related-products-sidebar a:hover {
    color: var(--color-primary);
}


/* Amélioration de l'esthétique du contenu */
.article-content p {
    margin-bottom: 25px; /* Plus d'espace pour la lisibilité */
    font-size: 1.05em;
    color: var(--color-text-light);
}
.article-content ul, .article-content ol {
    margin: 15px 0 25px 25px;
    line-height: 1.8;
}
.article-content a:not(.cta-button) {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Icones dans les méta-informations */
.article-meta-info i {
    color: var(--color-primary);
    margin-right: 5px;
}
.article-meta-info span {
    font-weight: 500;
}

/* Bloc CTA Affiliation Amélioré */
.affiliate-box {
    padding: 30px;
    margin: 40px 0;
    border: 2px solid var(--color-secondary); /* Bordure d'action */
    border-radius: 10px;
    background-color: #fff9ed; /* Fond très clair et accueillant */
    text-align: center;
}
.affiliate-box .affiliate-title {
    color: var(--color-dark);
    font-size: 1.6em;
    margin-bottom: 10px;
}
.affiliate-box p {
    font-size: 1.1em;
    color: var(--color-text-dark);
    margin-bottom: 20px;
}
.transparency-note-inline {
    display: block;
    margin-top: 10px;
    font-size: 0.85em;
    color: #cc0000;
    font-style: italic;
}


/* Tableau récapitulatif : Style amélioré */
.affiliate-recap-table th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    border: none;
}
.affiliate-recap-table tr:nth-child(even) {
    background-color: var(--color-light-bg); /* Zebra striping */
}
.affiliate-recap-table td {
    vertical-align: middle;
}

/* SIDEBAR : Rendre le Sommaire Fixe (UI/UX) */
.sticky-toc {
    position: sticky;
    top: 100px; /* Commence sous le header */
    transition: top 0.3s;
}

/* CTA de la Sidebar : Rendre très visible */
.cta-important {
    background-color: var(--color-secondary) !important; 
}
.cta-important h3 {
    color: var(--color-dark);
    border-bottom-color: var(--color-dark);
}
.cta-important p {
    color: var(--color-text-dark);
}
.cta-important .cta-button {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}
.cta-important .cta-button:hover {
    background-color: #0060c0 !important;
}


/* ========================================= */
/* 5. MEDIA QUERIES (CONSOLIDÉES) (inchangés) */
/* ========================================= */

/* Tablette / Petits Écrans (Max 1024px) */
@media (max-width: 1024px) {
    /* ------------------ GLOBAL LAYOUT ------------------ */
    .hero-content-new, .pillar-content, .media-cta-content {
        flex-direction: column; 
        text-align: center;
    }
    .hero-text-content, .hero-image-container, .pillar-text, .pillar-image, .media-text, .media-video-container {
        max-width: 100%;
        flex: none;
    }
    .pillar-image, .media-video-container {
        order: -1; 
    }
    .media-video-container {
        padding-bottom: 56.25%; 
        width: 100%;
    }

    .feature-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .solutions-grid {
        grid-template-columns: repeat(5, minmax(300px, 1fr)); 
    }

    /* Footer Tablette */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); 
        row-gap: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    /* ------------------ ARTICLE PAGE (article.php) ------------------ */
    .article-grid-container {
        grid-template-columns: 1fr; /* Passage à une seule colonne */
        gap: 30px; 
    }
    .article-sidebar {
        order: -1; /* Sidebar en haut sur mobile/tablette */
        margin-bottom: 20px;
        padding: 0;
    }
    .sticky-toc {
        position: static; /* Désactiver l'effet sticky sur mobile */
        top: auto;
    }
    .article-main-title {
        font-size: 2.2em;
    }

    /* Gestion des tableaux trop larges sur les petits écrans */
    .affiliate-recap-table table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
    .affiliate-recap-table th, .affiliate-recap-table td {
        min-width: 120px; /* Assurer que les colonnes restent lisibles */
    }

    /* Blog List */
    .blog-grid-container {
        grid-template-columns: 1fr; 
    }
    .article-card-list {
        flex-direction: column;
    }
    .article-image-container {
        width: 100%;
        height: 200px;
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* Téléphones Mobiles (Max 768px) */
@media (max-width: 768px) {
    /* Header/Navigation Mobile */
    .header-content {
        flex-wrap: wrap;
    }
    .main-nav {
        width: 100%;
        order: 3; 
        display: none;
        flex-direction: column;
        text-align: center;
        margin-top: 10px;
    }
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-dark);
        font-size: 1.8em;
        cursor: pointer;
    }

    .problem-list {
        flex-direction: column;
        align-items: center;
    }
    .feature-cards-container {
        grid-template-columns: 1fr;
    }
    
    .solutions-grid {
        grid-template-columns: repeat(5, minmax(80vw, 1fr)); 
    }
    
    .footer-grid {
        grid-template-columns: 1fr; 
    }

    /* Ajustement des polices pour les très petits écrans */
    .article-main-title {
        font-size: 2em;
    }
    .article-content h2 {
        font-size: 1.6em;
    }
}