/* ============================================================
   INFO.FR - Feuille mobile dediee home (<= 768px)
   Charge APRES home-bundle.css, ne touche pas le desktop.
   Refonte mobile propre : 1 colonne, titres lisibles, pas de troncature abusive.
   ============================================================ */

/* --- Cacher la barre d'onglets mobile sur desktop (DEFAUT) --- */
.mobile-cat-tabs { display: none; }

/* .mobile-menu-search { display: none } : regle deplacee vers header.php <style> global */

/* ============================================================
   BOUTON PARTAGE FLOTTANT HOME (desktop + mobile, coin bas-droit)
   ============================================================ */
.home-share-floating {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 9500;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.home-share-floating > * { pointer-events: auto; }
.home-share-floating .hsf-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0056B3;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,86,179,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
}
.home-share-floating .hsf-toggle:hover { background: #003D82; transform: translateY(-2px); }
.home-share-floating .hsf-list {
    list-style: none;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.home-share-floating.hsf-open .hsf-list {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.home-share-floating .hsf-list li { margin: 0; padding: 0; }
.home-share-floating .hsf-list .hsf-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F5F7FA;
    color: #0056B3;
    border: 1px solid #CBDEEF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, transform 0.12s;
    padding: 0;
}
.home-share-floating .hsf-list .hsf-btn:hover {
    background: #0056B3;
    color: #fff;
    transform: scale(1.06);
}
.home-share-floating .hsf-list .hsf-copy.hsf-copied {
    background: #2E7D32;
    color: #fff;
    border-color: #2E7D32;
}
.home-share-floating .hsf-list .hsf-fb:hover { background: #1877F2; border-color: #1877F2; }
.home-share-floating .hsf-list .hsf-x:hover { background: #000; border-color: #000; }
.home-share-floating .hsf-list .hsf-wa:hover { background: #25D366; border-color: #25D366; }
.home-share-floating .hsf-list .hsf-mail:hover { background: #6B7280; border-color: #6B7280; }

/* Mobile : plus compact, au-dessus du cookie banner */
@media (max-width: 768px) {
    .home-share-floating {
        right: 14px;
        bottom: 14px;
    }
    .home-share-floating .hsf-toggle {
        width: 46px;
        height: 46px;
    }
    .home-share-floating .hsf-list .hsf-btn {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================
   REGLES GLOBALES (desktop + mobile) demandees par user
   ============================================================ */

/* Les plus lus : rangs 1-5 tous en bleu pur, pas de degrade */
.popular-item .popular-rank,
.popular-item:nth-child(1) .popular-rank,
.popular-item:nth-child(2) .popular-rank,
.popular-item:nth-child(3) .popular-rank,
.popular-item:nth-child(4) .popular-rank,
.popular-item:nth-child(5) .popular-rank {
    color: #0056B3 !important;
}

@media (max-width: 768px) {

    /* ============================================================
       HEADER FIXE OPAQUE - plus aucun contenu ne passe par-dessus
       (ecrase le position:sticky de header.php qui pouvait etre
       neutralise par un ancetre avec contain/transform)
       ============================================================ */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #E3F2FD !important;
        z-index: 10000 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #CBDEEF !important;
    }
    /* .header-main + .logo-img + .region-btn + .search-container : toutes
       les regles mobile sont dans header.php <style> @media (max-width:768px). */

    /* Compense la hauteur du header fixe + tabs bar (header ~71 avec bouton compte + gap 2 + tabs 46 + gap 2 = 121). top tabs = 72. */
    body {
        padding-top: 117px;
        overflow-x: hidden;
    }
    html { overflow-x: hidden; }

    /* Menu mobile deroulant - sa position top doit suivre header + tabs */
    .menu-wrapper { top: 71px !important; z-index: 10001 !important; }

    /* .mobile-menu-search : regles deplacees vers header.php <style> (global)
       pour eviter le bug de rendu visible sur pages non-home. */

    /* ============================================================
       BARRE D'ONGLETS MOBILE (style Google News)
       Fixe sous le header, scroll horizontal, tap = saut a la section
       ============================================================ */
    .site-header { min-height: 70px !important; box-sizing: border-box !important; }
    .mobile-cat-tabs {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #ffffff;
        border-bottom: 1px solid #E0E0E0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        height: 46px;
        padding: 0 16px;           /* padding sur le wrapper fixe - survit au scroll horizontal */
        box-sizing: border-box;
    }
    .mobile-cat-tabs .mct-scroll {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 0;            /* plus de padding lateral ici : tout est sur .mobile-cat-tabs */
        height: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-cat-tabs .mct-scroll::-webkit-scrollbar { display: none; }
    .mobile-cat-tabs .mct-tab {
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 30px !important;
        padding: 0 14px !important;
        font-size: 13.5px;
        line-height: 1 !important;
        font-weight: 600;
        color: #4a4a4a;
        text-decoration: none;
        border-radius: 16px;
        background: transparent;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
        box-sizing: border-box;
    }
    .mobile-cat-tabs .mct-tab:active {
        background: #EEF3F9;
    }
    .mobile-cat-tabs .mct-tab.mct-active {
        background: #0056B3;
        color: #ffffff;
    }

    /* Offset d'ancrage pour que le scroll vers section ne passe pas
       sous le header + tabs fixes */
    #section-une,
    #section-sports,
    #section-economie,
    #section-faits-divers,
    #section-monde,
    #section-politique,
    #section-culture,
    #homepage {
        scroll-margin-top: 110px;
    }

    /* --- Container : respire un peu --- */
    .container { padding: 0 12px; }

    /* --- Live ticker : masque sur mobile (demande user, trop bruyant sur petit ecran) --- */
    .live-ticker { display: none !important; }

    /* ============================================================
       HERO : force 1 colonne empilee. La photo touche la barre onglets.
       ============================================================ */
    .hero-section { margin: 0 !important; }
    .hero-grid-new {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 0 24px !important;
        align-items: stretch !important;
    }
    /* La 1re photo du hero touche directement la ligne basse du header/tabs */
    .hero-section .hero-main-new,
    .hero-section .hero-main-v2 {
        margin-top: 0 !important;
    }
    /* Reduit le padding haut du conteneur principal sur mobile */
    main#homepage > .container { padding-top: 0 !important; }

    /* --- Hero main (grande carte) --- */
    .hero-main-new,
    .hero-main-v2 {
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
        background: white;
    }
    .hero-main-v2 .hero-image-wrapper {
        aspect-ratio: 16 / 9;
        height: auto;
        width: 100%;
        flex: none;
    }
    .hero-image-new {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .hero-content-overlay,
    .hero-main-v2 .hero-content-overlay {
        padding: 14px 16px !important;
    }
    .hero-main-v2 .hero-content-overlay .hero-title-new,
    .hero-title-new {
        font-size: 20px !important;
        line-height: 1.22 !important;
        margin-bottom: 0 !important;
    }
    .hero-main-v2 .hero-below {
        padding: 14px 16px 18px !important;
        gap: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .hero-main-v2 .hero-chapo,
    .hero-chapo {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        color: #2a2a2a !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .hero-main-v2 .hero-below-meta,
    .hero-below-meta {
        font-size: 12px !important;
        gap: 4px 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #F0F0F0 !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    .hero-below-sep { display: none !important; }
    .hero-below-meta .card-byline-avatar { width: 24px !important; height: 24px !important; }
    .hero-below-meta .card-byline-name { font-weight: 600; color: #1a1a1a; }
    .hero-below-time,
    .hero-below-reading {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #6b7280;
    }
    .hero-below-time::before { content: "·"; color: #cfcfcf; margin-right: 4px; }
    .hero-below-reading::before { content: "·"; color: #cfcfcf; margin-right: 4px; }

    /* ============================================================
       HERO SECONDARY : 4 cartes empilees, image a droite, titre a gauche
       (ecrase les !important de tier_s_cards.css)
       ============================================================ */
    .hero-secondary-new {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: white !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .hero-secondary-new .secondary-card-new {
        flex: 0 0 auto !important;
        display: block !important;
        border-bottom: 1px solid #F0F0F0 !important;
        background: white !important;
    }
    .hero-secondary-new .secondary-card-new:last-child {
        border-bottom: none !important;
    }
    .hero-secondary-new .secondary-link-new {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        flex: none !important;
    }
    .hero-secondary-new .secondary-image-wrapper {
        width: 96px !important;
        min-width: 96px !important;
        height: 96px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 2px !important;
        order: 2 !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        background: #F5F7FA !important;
    }
    .hero-secondary-new .secondary-image-new {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }
    .hero-secondary-new .secondary-content-new {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        justify-content: flex-start !important;
    }
    .hero-secondary-new .secondary-badges-row {
        margin-bottom: 2px !important;
    }
    .hero-secondary-new .category-badge-small {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
    }
    .hero-secondary-new .secondary-title-new {
        font-size: 14.5px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word;
    }
    .hero-secondary-new .secondary-meta-new {
        font-size: 11px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        color: #6b7280 !important;
        align-items: center !important;
        margin-top: 2px !important;
    }
    .hero-secondary-new .secondary-author {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-width: 0;
        max-width: 100%;
    }
    .hero-secondary-new .secondary-author-avatar {
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }
    .hero-secondary-new .secondary-author-name {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: #2a2a2a !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px;
    }
    .hero-secondary-new .secondary-meta-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        white-space: nowrap;
    }
    .hero-secondary-new .secondary-meta-item svg {
        width: 11px;
        height: 11px;
        opacity: 0.7;
    }

    /* ============================================================
       SECTION HEADERS : plus compactes
       ============================================================ */
    .section-header {
        padding: 12px 0 6px !important;
        margin-bottom: 10px !important;
        gap: 8px;
    }
    .section-title {
        font-size: 17px !important;
        padding-bottom: 5px !important;
    }
    .see-all { font-size: 12px !important; white-space: nowrap; }
    .category-block {
        margin-bottom: 26px !important;
        padding-top: 16px !important;
    }
    .hero-section + * { margin-top: 0 !important; }

    /* ============================================================
       LATEST NEWS GRID : liste verticale, image a droite
       (affine le mobile existant)
       ============================================================ */
    .main-with-sidebar {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .articles-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: white !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    .grid-article,
    .grid-article-featured {
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #F0F0F0 !important;
        grid-column: auto !important;
        border: none !important;
        border-bottom: 1px solid #F0F0F0 !important;
    }
    .grid-article:last-child { border-bottom: none !important; }
    .grid-article .grid-link,
    .grid-article-featured .grid-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        grid-template-columns: none !important;
    }
    .grid-article .grid-image-wrapper,
    .grid-article-featured .grid-image-wrapper {
        width: 96px !important;
        min-width: 96px !important;
        height: 96px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 2px !important;
        order: 2 !important;
        border-radius: 8px !important;
        background: #F5F7FA !important;
    }
    .grid-article .grid-image-new,
    .grid-article-featured .grid-image-new {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .grid-article .grid-content,
    .grid-article-featured .grid-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        order: 1 !important;
    }
    .grid-title,
    .grid-article-featured .grid-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 4px 0 !important;
        font-family: inherit !important;
        -webkit-line-clamp: 3 !important;
    }
    .grid-excerpt { display: none !important; }
    .grid-meta {
        font-size: 11px !important;
        gap: 8px !important;
        color: #7A8B9A;
        flex-wrap: wrap !important;
    }
    .grid-meta span:nth-of-type(n+3) { display: none; }

    /* Load more button */
    .grid-loadmore-wrap { padding: 14px 0; text-align: center; }
    .grid-loadmore-btn {
        width: 100%;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* ============================================================
       SIDEBAR : empilee sous main, ad cachee
       ============================================================ */
    .sidebar-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        position: static !important;
    }
    .sidebar-ad { display: none !important; }
    .sidebar-widget {
        padding: 16px !important;
        border-radius: 10px !important;
    }
    .sidebar-widget-title {
        font-size: 15px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }
    .popular-rank { font-size: 22px !important; min-width: 26px !important; }
    .popular-title { font-size: 13px !important; }
    .popular-meta { font-size: 10.5px !important; }
    /* A NE PAS MANQUER - aligne sur le format des Dernieres Actus */
    .widget-mustread { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
    .widget-mustread > .sidebar-widget-title {
        font-size: 15px !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        background: white;
        border-bottom: 1px solid #E8ECF0;
        border-radius: 10px 10px 0 0;
    }
    .mustread-list {
        background: white !important;
        border-radius: 0 0 10px 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        gap: 0 !important;
    }
    .mustread-item {
        padding: 12px 14px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        border-bottom: 1px solid #F0F0F0 !important;
        border-radius: 0 !important;
        background: white !important;
        align-items: flex-start !important;
    }
    .mustread-item:last-child { border-bottom: none !important; }
    .mustread-thumb {
        width: 96px !important;
        min-width: 96px !important;
        height: 96px !important;
        aspect-ratio: 1/1 !important;
        padding: 2px !important;
        order: 2 !important;
        border-radius: 8px !important;
        background: #F5F7FA !important;
    }
    .mustread-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .mustread-content {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    .mustread-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #111 !important;
        -webkit-line-clamp: 3 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .mustread-cat {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
        background: #EEF3F9 !important;
        color: #0056B3 !important;
        border-radius: 3px !important;
        display: inline-block !important;
        width: fit-content !important;
        letter-spacing: 0.02em !important;
    }

    /* ============================================================
       SPORTS : main empile + smalls en liste
       ============================================================ */
    .sports-grid-new { gap: 0 !important; }
    .sport-card-main {
        border-radius: 10px 10px 0 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        margin-bottom: 0 !important;
    }
    .sport-card-main .sport-link {
        display: block !important;
        grid-template-columns: none !important;
    }
    .sport-card-main .sport-image-wrapper-main {
        aspect-ratio: 16 / 9;
        padding: 0 !important;
    }
    .sport-card-main .sport-image-main {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    .sport-card-main .sport-content-main {
        padding: 14px 16px !important;
    }
    .sport-card-main .sport-title-main {
        font-size: 17px !important;
        font-family: 'Merriweather', Georgia, serif !important;
        line-height: 1.25 !important;
    }
    .sport-card-main .sport-excerpt {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 13.5px !important;
    }
    .sport-small-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: white !important;
        border-radius: 0 0 10px 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    .sport-card-small {
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #F0F0F0 !important;
    }
    .sport-card-small:last-child { border-bottom: none !important; }
    .sport-link-small {
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 12px 14px !important;
        gap: 12px !important;
    }
    .sport-thumb-small {
        width: 96px !important;
        min-width: 96px !important;
        height: 96px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 2px !important;
        order: 2 !important;
        border-radius: 8px !important;
    }
    .sport-thumb-small .sport-img-small {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sport-content-small {
        order: 1 !important;
        padding: 0 !important;
        flex: 1 1 auto !important;
    }
    .sport-title-small {
        font-size: 14.5px !important;
        -webkit-line-clamp: 3 !important;
    }

    /* ============================================================
       DUAL SECTIONS : empilees
       ============================================================ */
    .dual-sections {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 26px !important;
    }
    .dual-list {
        border-radius: 10px !important;
    }
    .dual-item-featured .dual-link { padding: 12px 14px 14px !important; }
    .dual-image { border-radius: 8px !important; margin-bottom: 10px !important; }
    .dual-item:not(.dual-item-featured) .dual-link {
        padding: 10px 14px !important;
        gap: 12px !important;
    }
    .dual-thumb {
        width: 80px !important;
        min-width: 80px !important;
        height: 80px !important;
        aspect-ratio: 1 / 1 !important;
    }
    .dual-title { font-size: 14px !important; -webkit-line-clamp: 3 !important; }
    .dual-item-featured .dual-title {
        font-size: 16px !important;
        font-family: 'Merriweather', Georgia, serif !important;
    }
    .dual-time { font-size: 11px !important; }

    /* ============================================================
       PUB : reduite, centree
       ============================================================ */
    .home-ad-break { margin: 14px auto !important; }

    /* ============================================================
       CULTURE : carrousel natif, petites cards
       ============================================================ */
    .culture-carousel { padding: 0 !important; }
    .carousel-btn { display: none !important; }
    .culture-scroll {
        gap: 12px !important;
        padding: 4px 2px 10px !important;
        margin: 0 !important;
    }
    .culture-scroll-card {
        min-width: 200px !important;
        max-width: 200px !important;
    }
    .culture-scroll-title { font-size: 13.5px !important; }

    /* Comment nous travaillons : centrer titre + padding compact */
    .eeat-method-section {
        margin: 22px 0 !important;
        padding: 24px 16px !important;
        border-radius: 10px !important;
    }
    .eeat-method-section .eeat-method-kicker,
    .eeat-method-section .section-title,
    .eeat-method-section h2 {
        text-align: center !important;
        display: block !important;
    }
    .eeat-method-section .eeat-method-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .eeat-method-section .eeat-method-stat strong {
        font-size: 26px !important;
    }

    /* Nos journalistes cette semaine : padding mobile */
    .eeat-journalists-section {
        margin: 22px 0 !important;
        padding: 20px 14px !important;
        border-radius: 10px !important;
    }

    /* Plus lus / Mis a jour / Il y a un an : padding mobile */
    .eeat-triple-section {
        margin: 22px 0 !important;
        padding: 20px 14px !important;
        border-radius: 10px !important;
    }

    /* ============================================================
       HOROSCOPE mobile : 12 signes empiles verticalement, chaque carte
       avec symbole + nom + extrait + note. Lecture lineaire.
       ============================================================ */
    .horoscope-section {
        background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%) !important;
        padding: 20px 14px 24px !important;
        border-radius: 12px !important;
        margin-bottom: 26px !important;
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }
    .horoscope-section .section-title { color: #fff !important; }
    .horoscope-section .see-all { color: #FFD700 !important; }
    .horoscope-section .section-header {
        margin-bottom: 14px !important;
        padding: 0 !important;
    }
    .horoscope-section .section-title { font-size: 17px !important; }
    .horoscope-grid-new {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 10px !important;
    }
    /* Compound selector (0,2,0) pour battre la regle .horoscope-card-new.horoscope-card-enriched du bundle */
    .horoscope-card-new.horoscope-card-enriched {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 14px 16px !important;
        min-height: 0 !important;
        background: #FFFFFF !important;
        border: 1px solid #EAE3D4 !important;
        border-left: 4px solid var(--sign-color) !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        gap: 0 !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 10px 0 !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-symbol {
        font-size: 26px !important;
        line-height: 1 !important;
        color: var(--sign-color) !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1A1A1A !important;
        letter-spacing: 0.02em !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-extrait {
        display: block !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: #111 !important;
        font-weight: 500 !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        border: none !important;    /* plus de lignes grises inutiles */
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: horizontal !important;
        flex: none !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-foot {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 10px 0 0 0 !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-stars {
        font-size: 13px !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
        color: var(--sign-color) !important;
    }
    .horoscope-card-new.horoscope-card-enriched .horoscope-chance {
        position: static !important;
        font-size: 11px !important;
        padding: 3px 9px !important;
        background: #FFF !important;
        color: #1A1A1A !important;
        border: 1.5px solid var(--sign-color) !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    /* ============================================================
       BLOCS MODULAIRES : laisser respirer
       ============================================================ */
    .modular-block,
    .home-recap-section,
    .vitrine-section,
    .home-dossiers-section,
    .eeat-journalists-section,
    .eeat-method-section,
    .eeat-triple-section,
    .home-dept-section {
        margin-bottom: 22px;
    }
}

/* ============================================================
   PETIT MOBILE (<= 480px) : ajustements serres
   ============================================================ */
@media (max-width: 480px) {
    .container { padding: 0 10px; }

    .hero-main-v2 .hero-content-overlay .hero-title-new,
    .hero-title-new { font-size: 18px !important; }
    .hero-main-v2 .hero-below { padding: 12px 14px 14px !important; }
    .hero-main-v2 .hero-chapo { font-size: 13.5px !important; }

    .hero-secondary-new .secondary-image-wrapper {
        width: 84px !important;
        min-width: 84px !important;
        height: 84px !important;
    }
    .hero-secondary-new .secondary-title-new { font-size: 14px !important; }
    .hero-secondary-new .secondary-author-name { max-width: 100px; }

    .grid-article .grid-image-wrapper,
    .grid-article-featured .grid-image-wrapper,
    .sport-thumb-small {
        width: 84px !important;
        min-width: 84px !important;
        height: 84px !important;
    }
    .grid-title { font-size: 14px !important; }

    .sport-card-main .sport-title-main { font-size: 16px !important; }
    .sport-title-small { font-size: 14px !important; }

    .dual-thumb {
        width: 72px !important;
        min-width: 72px !important;
        height: 72px !important;
    }

    .culture-scroll-card {
        min-width: 180px !important;
        max-width: 180px !important;
    }

    .horoscope-grid-new {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================================
   FIX DESKTOP (>= 769px) : secondary cards du hero — eviter
   que le 3e item meta (temps de lecture) soit coupe par overflow.
   Laisse la card s'adapter verticalement et la meta row wrapper
   sur 2 lignes si necessaire. NE TOUCHE PAS AU MOBILE.
   ============================================================ */
@media (min-width: 769px) {
    /* La card ne clippe plus son contenu */
    .hero-secondary-new .secondary-card-new {
        overflow: visible !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    /* Contenu : empile en haut (pas space-between qui peut causer gap vide), gap propre */
    .hero-secondary-new .secondary-content-new {
        padding: 12px 14px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    /* Badge en haut visible, petit margin-bottom */
    .hero-secondary-new .secondary-badges-row {
        margin-bottom: 6px !important;
    }
    /* Titre : 2 lignes max sur desktop pour laisser place aux 3 metas */
    .hero-secondary-new .secondary-title-new {
        -webkit-line-clamp: 2 !important;
        margin: 0 0 6px !important;
    }
    /* Meta row : wrap autorise, visible, avec row-gap pour 2e ligne */
    .hero-secondary-new .secondary-meta-new {
        flex-wrap: wrap !important;
        overflow: visible !important;
        white-space: normal !important;
        row-gap: 4px !important;
        column-gap: 10px !important;
    }
    /* Author : peut wrapper son nom si trop long mais reste sur la meme ligne ideallement */
    .hero-secondary-new .secondary-author {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* Meta items time/reading : jamais coupes */
    .hero-secondary-new .secondary-meta-item {
        flex-shrink: 0 !important;
    }
}