@charset "utf-8";

/**
 * ================================================================
 * FICHIER : Article.css
 * EMPLACEMENT : pages/Article/
 * SHORT_DESC : Styles pour la page d'un article de blog individuel.
 * DESCRIPTION : Met en page l'article unique dans un style éditorial épuré.
 *               Optimise la lisibilité du texte (interligne, largeurs) 
 *               et stylise les éléments HTML générés par l'éditeur WYSIWYG.
 *
 * MODIFICATIONS :
 *   - 09/10/2026 06:26 : section ARTICLE_MOBILE_FIRST (Dialogue MBR n° 148 de JaxX) — hero plein écran sur téléphone,
 *                        méta compactes, paddings cumulés supprimés dans le corps ; accolade orpheline neutralisée
 *                        (le bloc @media 900px était ignoré) — A VALIDER PAR JaxX
 * ================================================================
 */

.article_public_wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    position: relative;
    z-index: 3;
}

article.single_article {
    position: relative;
    z-index: 3;
}

/* Fil d'ariane */
.article_public_wrapper .detail_header_nav {
    padding: 1rem 0;
    margin-bottom: 2rem;
}

/* Ruban mode test */
.test_mode_banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.test_mode_banner .material-symbols-outlined {
    font-size: 24px;
}

/* En-tête de l'article */
.article_header {
    text-align: center;
    margin-bottom: 3rem;
}

.article_main_title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.article_meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.85rem;
    opacity: 0.6;
}

.meta_item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta_item .material-symbols-outlined {
    font-size: 16px;
    color: var(--cyan-400);
}

/* Image de couverture principale */
.article_cover_container {
    width: 100%;
    max-height: 450px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 3.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.article_cover_hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corps de l'article (Rendu WYSIWYG) */
.article_body_content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text_primary);
    max-width: 800px;
    margin: 0 auto;
}

.article_body_content p {
    margin-top: 0;
    margin-bottom: 1.8rem;
}

.article_body_content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.2rem;
    color: var(--text_heading);
    border-bottom: 1px solid var(--border_subtle);
    padding-bottom: 8px;
}

.article_body_content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text_heading);
}

.article_body_content a {
    color: var(--cyan-accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--cyan-accent);
    transition: all 0.3s;
}

.article_body_content a:hover {
    color: var(--foreground);
    border-bottom-style: solid;
}

.article_body_content ul,
.article_body_content ol {
    margin-top: 0;
    margin-bottom: 1.8rem;
    padding-left: 25px;
}

.article_body_content li {
    margin-bottom: 8px;
}

.article_body_content blockquote {
    margin: 2.5rem 0;
    padding: 15px 25px;
    border-left: 4px solid var(--cyan-accent);
    background: var(--surface_input);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text_primary);
}

.article_body_content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 2.5rem 0;
    border: 1px solid var(--border_subtle);
}

/* Pied de l'article */
.article_footer {
    max-width: 800px;
    margin: 4rem auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--border_subtle);
}

.btn_back_news {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text_secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.btn_back_news:hover {
    color: var(--cyan-accent);
}

.btn_back_news .material-symbols-outlined {
    font-size: 18px;
}

/* Boîte CTA de conversion */
.article_cta_box {
    margin-top: 5rem;
    border-radius: 24px;
    padding: 35px;
}

.cta_box_grid {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 25px;
}

.cta_box_icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta_box_icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--cyan-400);
}

.cta_box_text h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.cta_box_text p {
    font-size: 0.95rem;
    opacity: 0.8;
    margin: 0;
    line-height: 1.5;
}

.btn_cta_box_primary
{
    background: linear-gradient(135deg, var(--cyan-500) 0%, #0891b2 100%);
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.btn_cta_box_primary:hover
{
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5);
    filter: brightness(1.1);
    color: #ffffff !important;
}

.btn_cta_box_primary .material-symbols-outlined,
.btn_cta_box_primary span
{
    font-size: 18px;
    color: #ffffff !important;
}
/* } 09/10/2026 06:26 (Claude, Dialogue MBR n° 148) : accolade orpheline neutralisée — elle annulait tout le bloc @media (max-width: 900px) ci-dessous — A VALIDER PAR JaxX */

/* Responsive */
@media (max-width: 900px) {
    .article_main_title {
        font-size: 2rem;
    }

    .article_body_content {
        font-size: 1rem;
    }

    .cta_box_grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }

    .cta_box_icon {
        margin: 0 auto;
    }

    .btn_cta_box_primary {
        width: 100%;
        justify-content: center;
    }
}

/* 09/10/2026 00:43 (Claude, Dialogue MBR n° 120 et 121 de JaxX « Blog : Titre plus petit sur mobile ») :
   titre et méta de l'article sur téléphone, valeurs données par JaxX — A VALIDER PAR JaxX */
@media (max-width: 600px)
{
    .article_main_title
    {
        font-size: 1.8rem;
        font-weight: 800;
        line-height: 1.05;
        margin-bottom: 1.5rem;
        letter-spacing: -0.5px;
    }

    .article_meta
    {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 0.85rem;
        opacity: 0.6;
    }
}

/* ====================================================================
 * STYLES DE L'ESPACE D'ADMINISTRATION SUR L'ARTICLE PUBLIC
 * ==================================================================== */

.detail_header_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.btn_admin_edit_article {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-lg, 8px);
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: var(--cyan-400, #22d3ee);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn_admin_edit_article:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--cyan-400, #22d3ee);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    transform: translateY(-1px);
}

/* ====================================================================
 * BOUTONS DE PARTAGE SOCIAL (GEO/AIO & VIRALITE)
 * ==================================================================== */

.article_share_container {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-xl, 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.article_share_container .share_title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--slate-300);
}

.share_buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.share_btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}

.share_btn svg {
    width: 18px;
    height: 18px;
}

/* Effets hover respectant les couleurs officielles des réseaux */
.share_whatsapp:hover {
    background: rgba(37, 211, 102, 0.1);
    border-color: #25D366;
    color: #25D366;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.2);
    transform: translateY(-2px);
}

.share_linkedin:hover {
    background: rgba(10, 102, 194, 0.1);
    border-color: #0a66c2;
    color: #0a66c2;
    box-shadow: 0 0 15px rgba(10, 102, 194, 0.2);
    transform: translateY(-2px);
}

.share_twitter:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.share_facebook:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: #1877f2;
    color: #1877f2;
    box-shadow: 0 0 15px rgba(24, 119, 242, 0.2);
    transform: translateY(-2px);
}

.share_copy:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--cyan-400);
    color: var(--cyan-400);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
    transform: translateY(-2px);
}

.share_copy .material-symbols-outlined {
    font-size: 18px;
}

/* Style lors de la copie du lien */
.share_copy.copied {
    background: var(--cyan-400) !important;
    border-color: var(--cyan-400) !important;
    color: var(--slate-950) !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4) !important;
}

@media (max-width: 600px) {
    .article_share_container {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 15px;
    }

    .share_buttons {
        justify-content: center;
    }
}

/* ====================================================================
 * NAVIGATION PAGINATION ENTRE ARTICLES (PRÉCÉDENT / TOUS / SUIVANT)
 * ==================================================================== */

.article_pagination_nav
{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border_subtle);
}

.article_nav_card
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-lg, 16px);
    text-decoration: none;
    min-width: 0;
    transition: all 0.3s ease;
}

.article_nav_card:not(.disabled):hover
{
    transform: translateY(-2px);
    border-color: var(--cyan-accent);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.2);
}

.article_nav_card.prev_card
{
    justify-content: flex-start;
}

.article_nav_card.next_card
{
    justify-content: flex-end;
    text-align: right;
}

.article_nav_card.disabled
{
    opacity: 0.45;
    cursor: not-allowed;
}

.nav_meta
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.nav_direction
{
    font-size: 0.76rem;
    text-transform: uppercase;
    color: var(--text_secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.nav_title
{
    font-size: 0.92rem;
    color: var(--text_heading);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.nav_arrow
{
    font-size: 20px;
    color: var(--cyan-accent);
    flex-shrink: 0;
}

.article_nav_center
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--radius-lg, 16px);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text_primary);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.article_nav_center:hover
{
    border-color: var(--cyan-accent);
    color: var(--cyan-accent);
    transform: translateY(-2px);
}

.article_nav_center .material-symbols-outlined
{
    font-size: 18px;
    color: var(--cyan-accent);
}

@media (max-width: 768px)
{
    .article_pagination_nav
    {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .article_nav_center
    {
        order: -1;
        width: 100%;
    }

    .article_nav_card.next_card
    {
        justify-content: space-between;
        text-align: left;
    }
}

/* ====================================================================
 * STYLES DES ARTICLES RÉSERVÉS AUX PARTENAIRES & PAYWALL D'ONBOARDING
 * ==================================================================== */

.partner_welcome_banner
{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: var(--radius-lg, 16px);
    background: rgba(234, 179, 8, 0.12) !important;
    border: 1px solid rgba(234, 179, 8, 0.35) !important;
    color: #eab308;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.bright_mode .partner_welcome_banner
{
    background: rgba(234, 179, 8, 0.1) !important;
    border-color: rgba(202, 138, 4, 0.4) !important;
    color: #854d0e;
}

.partner_welcome_banner .material-symbols-outlined
{
    font-size: 26px;
    color: #eab308;
}

.bright_mode .partner_welcome_banner .material-symbols-outlined
{
    color: #a16207;
}

.partner_badge_top
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: var(--radius-full, 9999px);
    color: #facc15;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.bright_mode .partner_badge_top
{
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(202, 138, 4, 0.4);
    color: #a16207;
}

.partner_badge_top .material-symbols-outlined
{
    font-size: 16px;
}

/* 09/10/2026 05:49 (Claude, Dialogue MBR n° 145) : badge cliquable qui ouvre l'encart « Espace Pro Partenaire » — A VALIDER PAR JaxX */
.partner_welcome_banner[hidden]
{
    display: none;
}

button.partner_badge_bascule
{
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

button.partner_badge_bascule:hover,
button.partner_badge_bascule[aria-expanded="true"]
{
    background: rgba(234, 179, 8, 0.25);
    border-color: rgba(234, 179, 8, 0.6);
}

/* Paywall d'accès restreint */
.article_restricted_lead
{
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text_primary);
    margin-bottom: 2.5rem;
    font-style: italic;
    opacity: 0.9;
}

.partner_locked_box
{
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08) 0%, var(--surface_card) 100%);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: var(--radius-xl, 24px);
    padding: 3.5rem 2rem;
    text-align: center;
    margin: 2rem 0 4rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.bright_mode .partner_locked_box
{
    background: linear-gradient(135deg, rgba(254, 240, 138, 0.35) 0%, #ffffff 100%);
    border-color: rgba(202, 138, 4, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.locked_icon_circle
{
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #eab308;
}

.bright_mode .locked_icon_circle
{
    background: rgba(234, 179, 8, 0.2);
    color: #a16207;
}

.locked_icon_circle .material-symbols-outlined
{
    font-size: 32px;
}

.locked_title
{
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text_heading);
    margin-bottom: 1rem;
}

.locked_desc
{
    font-size: 1.05rem;
    color: var(--text_secondary);
    max-width: 600px;
    margin: 0 auto 2.2rem;
    line-height: 1.6;
}

.locked_actions
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.btn_locked_join
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    color: #0f172a !important;
    font-weight: 800;
    font-size: 1rem;
    border-radius: var(--radius-md, 12px);
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35);
}

.btn_locked_join:hover
{
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(234, 179, 8, 0.5);
}

.btn_locked_login
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border_subtle);
    color: var(--text_heading);
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all 0.3s;
}

.bright_mode .btn_locked_login
{
    background: #ffffff;
    border-color: #cbd5e1;
}

.btn_locked_login:hover
{
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--cyan-accent);
    color: var(--cyan-accent);
}

/* ====================================================================
 * COMPOSANTS ENRICHIS POUR ARTICLES TECHNIQUES & NOUVEAUTES
 * ==================================================================== */

.pro_feature_pill
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    color: var(--cyan-400, #06b6d4);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

html.bright_mode .pro_feature_pill,
.bright_mode .pro_feature_pill
{
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.35);
    color: #0284c7;
}

.article_lead_p
{
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--text_primary, #e2e8f0);
    margin-bottom: 2rem;
    font-weight: 500;
}

.article_figure
{
    margin: 2.5rem 0;
    text-align: center;
}

.article_figure img
{
    width: 100%;
    max-width: 850px;
    border-radius: 14px;
    border: 1px solid var(--border_subtle, rgba(255,255,255,0.12));
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.article_figcaption
{
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text_secondary, #94a3b8);
    font-style: italic;
}

.article_section_title
{
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text_heading, #ffffff);
    margin: 2.5rem 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.article_section_title .material-symbols-outlined
{
    font-size: 1.8rem;
}

.article_section_title.title_cyan .material-symbols-outlined
{
    color: var(--cyan-400, #06b6d4);
}

.article_section_title.title_amber .material-symbols-outlined
{
    color: #f59e0b;
}

.audit_features_box
{
    background: var(--surface_card, rgba(15,23,42,0.6));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

html.bright_mode .audit_features_box,
.bright_mode .audit_features_box
{
    background: #ffffff;
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.08);
}

.qualifelec_features_box
{
    background: var(--surface_card, rgba(15,23,42,0.6));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

html.bright_mode .qualifelec_features_box,
.bright_mode .qualifelec_features_box
{
    background: #ffffff;
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08);
}

.audit_features_list
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.audit_features_list li
{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--text_primary, #cbd5e1);
    line-height: 1.65;
}

.audit_features_list li strong
{
    color: var(--text_heading, #ffffff);
}

.audit_features_list .icon_cyan
{
    color: var(--cyan-400, #06b6d4);
    flex-shrink: 0;
}

.audit_features_list .icon_amber
{
    color: #f59e0b;
    flex-shrink: 0;
}

.article_figures_dual
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 2.5rem 0;
}

.article_figures_dual .article_figure
{
    margin: 0;
}

.article_cards_grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 2rem 0;
}

.article_benefit_card
{
    background: var(--surface_card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border_subtle, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 1.4rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html.bright_mode .article_benefit_card,
.bright_mode .article_benefit_card
{
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
}

.article_benefit_card:hover
{
    transform: translateY(-2px);
}

.article_benefit_card .card_emoji
{
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.article_benefit_card h4
{
    color: var(--text_heading, #ffffff);
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.article_benefit_card p
{
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text_secondary, #94a3b8);
    margin: 0;
}

.article_steps_list
{
    color: var(--text_primary, #cbd5e1);
    line-height: 1.8;
    font-size: 1.05rem;
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
}

.article_steps_list li
{
    margin-bottom: 0.75rem;
}

.article_partner_thanks_box
{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(6, 182, 212, 0.06) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 14px;
    margin: 2.5rem 0;
}

html.bright_mode .article_partner_thanks_box,
.bright_mode .article_partner_thanks_box
{
    background: linear-gradient(135deg, #fffbeb 0%, #f0fdf4 100%);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08);
}

.article_partner_thanks_box .thanks_icon
{
    font-size: 2rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.article_partner_thanks_box .thanks_text
{
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text_primary, #e2e8f0);
    margin: 0;
}

.article_partner_thanks_box .thanks_link
{
    color: #f59e0b;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

html.bright_mode .article_partner_thanks_box .thanks_link,
.bright_mode .article_partner_thanks_box .thanks_link
{
    color: #d97706;
}

.article_partner_thanks_box .thanks_link:hover
{
    color: var(--cyan-400, #06b6d4);
}

.article_cta_inline_box
{
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 16px;
    padding: 2.2rem;
    text-align: center;
    margin: 3.5rem 0 1.5rem 0;
}

html.bright_mode .article_cta_inline_box,
.bright_mode .article_cta_inline_box
{
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.08);
}

.article_cta_inline_box h3
{
    color: var(--text_heading, #ffffff);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.75rem 0;
}

.article_cta_inline_box p
{
    color: var(--text_secondary, #cbd5e1);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto 1.75rem auto;
    line-height: 1.6;
}

.article_cta_inline_buttons
{
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn_article_cta_primary
{
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn_article_cta_primary:hover
{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}

.btn_article_cta_secondary
{
    background: rgba(255, 255, 255, 0.06);
    color: var(--text_heading, #ffffff) !important;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid var(--border_subtle, rgba(255, 255, 255, 0.15));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, border-color 0.2s;
}

html.bright_mode .btn_article_cta_secondary,
.bright_mode .btn_article_cta_secondary
{
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a !important;
}

.btn_article_cta_secondary:hover
{
    border-color: var(--cyan-400, #06b6d4);
}

/* ====================================================================
 * ARTICLE_MOBILE_FIRST
 * 09/10/2026 06:26 (Claude, Dialogue MBR n° 148 de JaxX « Articles blog Mobile First ») :
 * « éviter les padding inutiles, soigner la landing des articles, designer l'écran d'arrivée comme une hero section ».
 * Surcharge les règles ci-dessus sur téléphone (≤ 768 px) sans les modifier — A VALIDER PAR JaxX
 *   - HERO : couverture bord à bord en fond, badge + titre + méta superposés sur un dégradé
 *            qui se fond dans le fond de page (sombre ou clair), hauteur ≈ 74 svh (620 px au plus)
 *   - EN-TÊTE : fil d'Ariane sur une ligne (titre tronqué), bouton admin réduit à l'icône
 *   - CORPS : marge latérale unique de 16 px, encarts à 12 px, listes sans retrait cumulé,
 *             icônes en ligne, figures bord à bord, tableaux défilants
 * ==================================================================== */

@media (max-width: 768px)
{
    /* --- Conteneur : une seule marge latérale de 16 px --- */
    .article_public_wrapper
    {
        padding: 0 16px 2rem 16px;
    }

    /* --- Fil d'Ariane discret sur une ligne + bouton admin en icône --- */
    .article_public_wrapper .detail_header_nav
    {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 40px;
        padding: 6px 0;
        margin: 0;
    }

    .article_public_wrapper .detail_header_nav .breadcrumb
    {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        gap: 4px;
        margin: 0;
        font-size: 0.72rem;
    }

    .article_public_wrapper .detail_header_nav .breadcrumb a,
    .article_public_wrapper .detail_header_nav .breadcrumb .sep
    {
        flex-shrink: 0;
    }

    .article_public_wrapper .detail_header_nav .breadcrumb .active
    {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        opacity: 0.75;
    }

    .admin_edit_action
    {
        flex-shrink: 0;
    }

    .article_public_wrapper .btn_admin_edit_article
    {
        width: 34px;
        height: 34px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .btn_admin_edit_article .btn_admin_label
    {
        display: none;
    }

    .btn_admin_edit_article .material-symbols-outlined
    {
        font-size: 18px;
    }

    /* --- Rubans (mode test, Espace Pro Partenaire) compacts --- */
    .test_mode_banner,
    .partner_welcome_banner
    {
        gap: 10px;
        padding: 10px 12px;
        margin: 0 0 12px 0;
        border-radius: 12px;
        font-size: 0.85rem;
        line-height: 1.45;
    }

    .test_mode_banner .material-symbols-outlined,
    .partner_welcome_banner .material-symbols-outlined
    {
        font-size: 22px;
        flex-shrink: 0;
    }

    /* --- En-tête sans couverture : aligné à gauche, serré --- */
    .article_header
    {
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .article_main_title
    {
        font-size: clamp(1.6rem, 7.4vw, 2.1rem);
        line-height: 1.12;
        letter-spacing: -0.02em;
        margin: 0 0 12px 0;
    }

    .partner_badge_top
    {
        gap: 5px;
        padding: 4px 10px;
        margin-bottom: 10px;
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .partner_badge_top .material-symbols-outlined
    {
        font-size: 14px;
    }

    /* --- Méta compactes : icône + valeur en ligne, séparateurs « · » --- */
    .article_meta
    {
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 0;
        font-size: 0.78rem;
        line-height: 1.4;
        opacity: 0.85;
    }

    .article_meta .meta_item
    {
        gap: 4px;
        white-space: nowrap;
    }

    .article_meta .meta_item + .meta_item::before
    {
        content: '';
        width: 3px;
        height: 3px;
        margin: 0 8px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.5;
    }

    .article_meta .meta_label
    {
        display: none;
    }

    /* Une seule ligne : l'auteur (le plus long) se tronque avec « … », les autres méta restent entières */
    .article_meta
    {
        flex-wrap: nowrap;
    }

    .article_meta .meta_item
    {
        flex-shrink: 0;
    }

    .article_meta .meta_item:nth-child(2)
    {
        display: block;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .article_meta .meta_item:nth-child(2) .material-symbols-outlined
    {
        margin-right: 4px;
        vertical-align: -2px;
    }

    .article_meta .meta_item + .meta_item::before
    {
        display: inline-block;
        vertical-align: middle;
    }

    .article_meta .meta_item .material-symbols-outlined
    {
        font-size: 14px;
    }

    /* --- HERO : couverture en fond, en-tête superposé (même cellule de grille) --- */
    .single_article.has_cover
    {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .single_article.has_cover > .article_cover_container,
    .single_article.has_cover > .article_header
    {
        grid-area: 1 / 1;
        margin-left: -16px;
        margin-right: -16px;
    }

    .single_article.has_cover > .article_cover_container
    {
        position: relative;
        z-index: 0;
        width: auto;
        min-height: min(74vh, 620px);
        min-height: min(74svh, 620px);
        max-height: none;
        margin-top: 0;
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    .single_article.has_cover > .article_cover_container .article_cover_hero
    {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }

    .single_article.has_cover > .article_header
    {
        position: relative;
        z-index: 1;
        align-self: end;
        margin-top: 0;
        margin-bottom: 0;
        padding: 96px 16px 20px 16px;
        background: linear-gradient(to top, rgb(2, 6, 23) 0%, rgba(2, 6, 23, 0.92) 30%, rgba(2, 6, 23, 0.62) 62%, rgba(2, 6, 23, 0) 100%);
    }

    html.bright_mode .single_article.has_cover > .article_header
    {
        background: linear-gradient(to top, rgb(248, 250, 252) 0%, rgba(248, 250, 252, 0.94) 32%, rgba(248, 250, 252, 0.7) 64%, rgba(248, 250, 252, 0) 100%);
    }

    .single_article.has_cover .article_main_title
    {
        filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
    }

    html.bright_mode .single_article.has_cover .article_main_title
    {
        filter: drop-shadow(0 1px 8px rgba(255, 255, 255, 0.8));
    }

    .single_article.has_cover .partner_badge_top
    {
        background: rgba(15, 23, 42, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    html.bright_mode .single_article.has_cover .partner_badge_top
    {
        background: rgba(255, 251, 235, 0.92);
    }

    .single_article.has_cover .article_meta
    {
        color: var(--text_primary);
        opacity: 0.9;
    }

    /* --- Corps : texte confortable, rythme resserré --- */
    .article_body_content
    {
        font-size: 1.04rem;
        line-height: 1.68;
        overflow-wrap: break-word;
    }

    .single_article.has_cover .article_body_content
    {
        margin-top: 1rem;
    }

    .article_body_content p
    {
        margin-bottom: 1.1rem;
    }

    .article_body_content h2
    {
        font-size: 1.35rem;
        line-height: 1.25;
        margin-top: 2rem;
        margin-bottom: 0.8rem;
    }

    .article_body_content h3
    {
        font-size: 1.15rem;
        line-height: 1.3;
        margin-top: 1.6rem;
        margin-bottom: 0.6rem;
    }

    /* Listes : le thème impose li { margin-left: 2em } → retrait unique et minimal */
    .article_body_content ul,
    .article_body_content ol
    {
        padding-left: 1.15rem;
        margin-bottom: 1.2rem;
    }

    .article_body_content li
    {
        margin-left: 0;
        margin-bottom: 6px;
    }

    .article_body_content blockquote
    {
        margin: 1.5rem 0;
        padding: 10px 14px;
        border-left-width: 3px;
    }

    .article_body_content img
    {
        margin: 1.5rem 0;
        border-radius: 12px;
    }

    .article_body_content table
    {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.9rem;
    }

    .article_body_content pre
    {
        max-width: 100%;
        overflow-x: auto;
    }

    .article_body_content iframe,
    .article_body_content video
    {
        max-width: 100%;
    }

    /* --- Composants enrichis --- */
    .article_body_content .pro_feature_pill
    {
        gap: 6px;
        padding: 5px 10px;
        margin-bottom: 1rem;
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .article_body_content .pro_feature_pill .material-symbols-outlined
    {
        font-size: 15px;
    }

    .article_body_content .article_lead_p
    {
        font-size: 1.08rem;
        line-height: 1.65;
        margin-bottom: 1.25rem;
    }

    .article_body_content .article_section_title
    {
        align-items: flex-start;
        gap: 8px;
        font-size: 1.3rem;
        margin: 2rem 0 0.8rem 0;
    }

    .article_body_content .article_section_title .material-symbols-outlined
    {
        font-size: 1.35rem;
        margin-top: 0.05em;
        flex-shrink: 0;
    }

    .audit_features_box,
    .qualifelec_features_box
    {
        padding: 12px;
        margin-bottom: 1.4rem;
        border-radius: 12px;
    }

    .article_body_content .audit_features_list
    {
        padding-left: 0;
        margin: 0;
        gap: 12px;
    }

    /* Puces à icône : icône en ligne, le texte reprend toute la largeur de l'encart */
    .article_body_content .audit_features_list li
    {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .article_body_content .audit_features_list li > .material-symbols-outlined
    {
        font-size: 19px;
        margin-right: 6px;
        vertical-align: -4px;
    }

    .article_body_content .audit_features_list li > div
    {
        display: inline;
    }

    .article_body_content .article_steps_list
    {
        padding-left: 1.3rem;
        margin-bottom: 1.6rem;
        font-size: 1rem;
        line-height: 1.65;
    }

    .article_body_content .article_steps_list li
    {
        margin-left: 0;
        margin-bottom: 0.6rem;
    }

    /* Figures bord à bord (images pleine largeur d'écran) */
    .article_body_content .article_figure
    {
        margin: 1.5rem -16px;
    }

    .article_body_content .article_figure img
    {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .article_body_content .article_figcaption
    {
        padding: 0 16px;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .article_body_content .article_figures_dual
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        margin: 1.5rem -16px;
    }

    .article_body_content .article_figures_dual .article_figure
    {
        margin: 0;
    }

    /* Cartes avantages : emoji + titre sur une ligne, texte dessous */
    .article_body_content .article_cards_grid
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 1.4rem 0;
    }

    .article_body_content .article_benefit_card
    {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .article_body_content .article_benefit_card .card_emoji
    {
        margin: 0;
        font-size: 1.35rem;
        line-height: 1;
    }

    .article_body_content .article_benefit_card h4
    {
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.3;
    }

    .article_body_content .article_benefit_card p
    {
        grid-column: 1 / -1;
        margin: 6px 0 0 0;
        font-size: 0.92rem;
    }

    .article_body_content .article_partner_thanks_box
    {
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        margin: 1.5rem 0;
        border-radius: 12px;
    }

    .article_body_content .article_partner_thanks_box .thanks_icon
    {
        font-size: 1.5rem;
    }

    .article_body_content .article_partner_thanks_box .thanks_text
    {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .article_body_content .article_cta_inline_box
    {
        padding: 18px 14px;
        margin: 2rem 0 1rem 0;
        border-radius: 14px;
    }

    .article_body_content .article_cta_inline_box h3
    {
        font-size: 1.2rem;
        line-height: 1.3;
        margin-top: 0;
    }

    .article_body_content .article_cta_inline_box p
    {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .article_cta_inline_buttons
    {
        flex-direction: column;
        gap: 10px;
    }

    .article_body_content .btn_article_cta_primary,
    .article_body_content .btn_article_cta_secondary
    {
        justify-content: center;
        padding: 12px 16px;
        border-bottom: 0;
    }

    /* --- Contenu réservé (paywall) --- */
    .article_restricted_lead
    {
        font-size: 1.05rem;
        line-height: 1.65;
        margin-bottom: 1.5rem;
    }

    .partner_locked_box
    {
        padding: 1.75rem 14px;
        margin: 1.5rem 0 2rem 0;
        border-radius: 16px;
    }

    .locked_title
    {
        font-size: 1.3rem;
        line-height: 1.25;
    }

    .locked_desc
    {
        font-size: 0.98rem;
        margin-bottom: 1.5rem;
    }

    .locked_actions
    {
        flex-direction: column;
        gap: 10px;
    }

    .btn_locked_join,
    .btn_locked_login
    {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }

    /* --- Pied d'article et CTA final --- */
    .article_footer
    {
        margin-top: 2.5rem;
    }

    .article_share_container
    {
        padding: 12px;
        margin-bottom: 1.5rem;
        border-radius: 14px;
    }

    .article_pagination_nav
    {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }

    .article_nav_card
    {
        padding: 12px 14px;
    }

    .article_cta_box
    {
        margin-top: 2.5rem;
        padding: 18px 14px;
        border-radius: 16px;
    }

    .cta_box_grid
    {
        gap: 14px;
    }

    .cta_box_icon
    {
        width: 52px;
        height: 52px;
    }

    .cta_box_text h3
    {
        font-size: 1.2rem;
        line-height: 1.3;
    }
}