/*
Theme Name: BrightHub
Theme URI: http://brighthub.casethemes.net
Author: Case-Themes
Author URI: https://casethemes.net/
Description: BrightHub is a sleek WordPress theme crafted for SaaS and tech startups. It comes with beautifully designed homepage layouts, versatile inner pages, and feature-focused sections to showcase your product, pricing, and customer success stories. Fully responsive and easily customizable, BrightHub ensures your site looks stunning on any device. Launch your next SaaS project with BrightHub and have all the essentials you need in one powerful theme.
Version: 1.0.4
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: brighthub
Tags: saas, startup, business, consulting, consultant, agency, company, advertising, corporate, finance, financial, multipurpose, accountant, marketing, software, modern
Requires at least: 5.8 or Higher
Requires PHP: 7.4 or Higher
Tested up to: 6.4.1

Copyright (c) 2025 Case-Themes. All rights reserved.
This theme is licensed under the GPL-2.0+ license.
*/


/* =========================================
   STYLE MY SUPPLIER PROFILE v8 (CORRIGE)
   ========================================= */

/* --- CONFIGURATION GLOBALE --- */
.seo-article-content {
    font-family: 'Inter', Helvetica, Arial, sans-serif !important;
    color: #374151 !important;
    line-height: 1.8 !important;
}

/* --- 1. CIBLAGE SPÉCIFIQUE : Image de Mise en Avant --- */
body.single-post img.wp-post-image, 
body.single-post .featured-image img,
body.single-post .post-thumbnail img {
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    margin: 30px auto 60px auto !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
}

/* --- 2. Liens Hypertextes --- */
.seo-article-content p a, 
.seo-article-content li a {
    color: #2F9BE5 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(47, 155, 229, 0.4) !important;
    text-underline-offset: 4px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.seo-article-content p a:hover,
.seo-article-content li a:hover {
    color: #1a8ad4 !important;
    text-decoration-color: #2F9BE5 !important;
    background-color: rgba(47, 155, 229, 0.08) !important;
}

/* --- 3. Images insérées DANS l'article --- */
.seo-article-content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 50px auto 60px auto !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
}

/* --- 4. Titres H2 & H3 --- */
.seo-article-content h2 {
    color: #111827 !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    margin-top: 80px !important;
    margin-bottom: 30px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}
.seo-article-content h3 {
    color: #1F2937 !important;
    font-size: 1.6rem !important;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
}

/* --- 5. FAQ (Style Cartes Flottantes) --- */
.seo-article-content details {
    background-color: #FFFFFF !important;
    border: 1px solid #F3F4F6 !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}
.seo-article-content details:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    border-color: #2F9BE5 !important;
}
.seo-article-content summary {
    display: block !important; /* <-- LA LIGNE MAGIQUE POUR CHROME */
    padding: 25px 70px 25px 30px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #111827 !important;
    background-color: #FFFFFF !important;
    position: relative !important;
    list-style: none !important;
    outline: none !important;
}

/* On sépare ces deux règles pour la compatibilité Chrome/Safari */
.seo-article-content summary::-webkit-details-marker {
    display: none !important;
}
.seo-article-content summary::marker {
    display: none !important;
}

/* Le bouton + / - */
.seo-article-content summary::after {
    content: '+' !important;
    position: absolute !important;
    right: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #2F9BE5 !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
}
.seo-article-content details[open] summary::after {
    content: '-' !important;
    transform: translateY(-50%) rotate(180deg) !important;
}
.seo-article-content details[open] summary {
    color: #2F9BE5 !important;
    border-bottom: 1px solid #F3F4F6 !important;
}
.seo-article-content .faq-content {
    padding: 30px !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #4B5563 !important;
    background-color: #fff !important;
}

/* --- 6. Boutons CTA --- */
.seo-article-content .cta-container {
    text-align: center !important;
    margin: 60px 0 !important;
}
.seo-article-content .cta-button {
    text-decoration: none !important;
    display: inline-block !important;
    background-color: #2F9BE5 !important;
    color: #ffffff !important;
    padding: 18px 45px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(47, 155, 229, 0.3) !important;
    transition: all 0.3s ease !important;
}
.seo-article-content .cta-button:hover {
    transform: translateY(-3px) !important;
    background-color: #1a8ad4 !important;
    box-shadow: 0 15px 30px rgba(47, 155, 229, 0.4) !important;
    color: #ffffff !important;
}

/* --- 7. Encadré "L'Essentiel" --- */
.seo-article-content .box-essentiel {
    background-color: #F0F9FF !important;
    border: 2px solid #2F9BE5 !important;
    border-radius: 16px !important;
    padding: 35px !important;
    margin: 50px 0 !important;
    box-shadow: 0 10px 20px rgba(47, 155, 229, 0.05) !important;
}
.seo-article-content .box-essentiel h3 {
    margin-top: 0 !important;
    color: #2F9BE5 !important;
    text-transform: none !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* --- 8. Tableau --- */
.seo-article-content .table-container {
    overflow-x: auto !important;
    margin: 50px 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    border: 1px solid #E5E7EB !important;
}
.seo-article-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 1rem !important;
}
.seo-article-content th {
    background-color: #1F2937 !important;
    color: white !important;
    padding: 20px !important;
    text-align: left !important;
    font-weight: 600 !important;
    border: none !important;
}
.seo-article-content td {
    border-bottom: 1px solid #F3F4F6 !important;
    padding: 20px !important;
    text-align: left !important;
    color: #374151 !important;
    background-color: #fff !important;
}
.seo-article-content tr:last-child td {
    border-bottom: none !important;
}
.seo-article-content tr:nth-child(even) td {
    background-color: #F9FAFB !important;
}

/* --- 9. Sommaire --- */
.seo-article-content .sommaire-box {
    background-color: #FFFFFF !important;
    padding: 40px !important;
    border-radius: 20px !important;
    border: 1px solid #F3F4F6 !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08) !important;
    margin: 50px 0 !important;
}
.seo-article-content .sommaire-titre {
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    color: #111827 !important;
}
.seo-article-content .sommaire-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.seo-article-content .sommaire-box a {
    text-decoration: none !important;
    border: none !important;
    display: block !important;
    padding: 10px 15px !important;
    color: #4B5563 !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    background-color: #F9FAFB !important;
    margin-bottom: 8px !important;
}
.seo-article-content .sommaire-box a:hover {
    color: #2F9BE5 !important;
    background-color: #F0F9FF !important;
    padding-left: 20px !important;
}

/* --- 10. Listes à puces --- */
.seo-article-content ul.custom-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 30px 0 !important;
}
.seo-article-content ul.custom-list li {
    position: relative !important;
    padding-left: 40px !important;
    margin-bottom: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
}
.seo-article-content ul.custom-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 26px !important;
    width: 26px !important;
    background-color: #E0F2FE !important;
    color: #2F9BE5 !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 26px !important;
    font-weight: bold !important;
    font-size: 14px !important;
}