/* ==============================================================
   REM'S CONTENT AI — CHROME v4.5.2
   ──────────────────────────────────────────────────────────────
   Stylise le body, header, footer et menu du SITE WordPress
   pour les harmoniser avec la palette Crystal active.

   PRINCIPE (vu sur le canvas Claude Design) :
   - Body / extérieur des cards = COULEUR pastel pleine du thème
   - Cards = blanc translucide (PLUS CLAIR que l'extérieur)
   - Header & Footer = se fondent dans le body (transparent / blur)
   ============================================================== */

/* ────────────────────────────────────────────────────────────
   1. BODY — gradient pastel Crystal full-bleed (la couleur va
   jusqu'au bord de l'écran, et le header/footer "boivent" ce fond).

   v4.5.4 : overflow-x: hidden pour bloquer le scroll horizontal
   parasite (les carousels avec margin négatif). background-attachment
   fixed retiré (cause des bugs iOS Safari).
   ──────────────────────────────────────────────────────────── */
html,
body {
    background:
        radial-gradient(120% 80% at 80% 0%, var(--rg-bg-grad-1) 0%, transparent 60%),
        radial-gradient(110% 70% at 0% 100%, var(--rg-bg-grad-2) 0%, transparent 60%),
        linear-gradient(180deg, var(--rg-bg-base-1) 0%, var(--rg-bg-base-2) 100%) !important;
    color: var(--rg-t-1) !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}
body {
    /* Le gradient reste fixe via une astuce sans background-attachment (compatible iOS) */
    min-height: 100vh;
}
/* Containers principaux : forcer respect du viewport */
.rc-container,
.rc-site-main,
.site-content,
.content-area,
main,
article,
.entry-content,
.rems-page-host,
.rems-page,
.rems-homepage {
    max-width: 100% !important;
    overflow-x: clip;
}

/* Wrappers de contenu — transparents pour laisser le body colorer */
.site,
#page,
#main,
.site-content,
.content-area,
.entry-content,
main[role="main"],
main,
article,
.post,
.page,
.elementor-section,
.elementor-container,
.entry-content > *,
.wp-block-group {
    background: transparent !important;
}

/* ────────────────────────────────────────────────────────────
   2. SITE HEADER — verre fondu, pas de box visible
   On laisse une légère transparence + blur pour la lisibilité,
   mais on évite le rectangle blanc trop net.

   Note v4.5.3 : si le thème rems-crystal est actif, le header
   utilise `.lay-header` (pas `.site-header`) — rems-ai-layout.css
   gère ce cas. Ces règles ciblent les thèmes tiers (Astra, GP, etc.)
   qui utilisent les classes WP standards.
   ──────────────────────────────────────────────────────────── */
.site-header,
header.site-header,
header[role="banner"],
#masthead,
.header-main,
.main-header,
.site-header-section,
.l-header,
.elementor-location-header,
#header,
.header-wrap,
.ast-primary-header-bar,
body > header,
.theme-header,
.fl-page-header,
.gp-header {
    background: rgba(255, 255, 255, .35) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    border: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4), 0 8px 24px -12px rgba(40, 55, 120, .08) !important;
    color: var(--rg-t-1) !important;
}

/* Wrappers internes du header — TRANSPARENTS pour pas créer de "box" */
.site-header *,
header.site-header *,
.l-header *,
.ast-primary-header-bar * {
    background-color: transparent !important;
}
/* Sauf les éléments explicitement stylés */
.site-header .menu-toggle,
.site-header .button,
.site-header .ast-button,
.site-header .wp-block-button,
.site-header img,
.site-header svg,
.site-header [class*="rems-"],
.site-header [class*="hp-"],
.site-header [class*="p-btn"] {
    background-color: revert !important;
}

/* Menu : pointer-events explicit pour s'assurer que c'est cliquable */
.site-header,
.site-header *,
.main-navigation,
.main-navigation *,
.menu,
.menu *,
nav,
nav *,
.sub-menu,
.sub-menu * {
    pointer-events: auto !important;
}

/* Plus de Z-index conflict potentiel */
.site-header { position: relative; z-index: 100; }

/* Logo / titre du site */
.site-title,
.site-title a,
.site-branding .site-title,
.site-branding .site-title a,
header .site-title,
header .site-title a,
.custom-logo-link {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display);
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none !important;
}
.site-description,
.site-branding .site-description {
    color: var(--rg-t-3) !important;
}

/* ────────────────────────────────────────────────────────────
   3. NAV MENU — accent au hover, current en accent
   ──────────────────────────────────────────────────────────── */
.main-navigation a,
.menu-item a,
.menu a,
nav a:not([class*="rems-"]):not([class*="hp-"]):not([class*="lg-"]):not([class*="ex-"]):not([class*="bk-"]):not([class*="p-btn"]),
#site-navigation a,
.primary-menu a,
.nav-menu a,
.main-header-menu a,
.navigation a {
    color: var(--rg-t-2) !important;
    transition: color .2s ease, background .2s ease;
    text-decoration: none;
    font-weight: 600;
}
.main-navigation a:hover,
.menu-item a:hover,
.menu a:hover,
nav a:not([class*="rems-"]):not([class*="hp-"]):not([class*="lg-"]):not([class*="ex-"]):not([class*="bk-"]):not([class*="p-btn"]):hover,
#site-navigation a:hover,
.primary-menu a:hover,
.nav-menu a:hover,
.main-header-menu a:hover {
    color: var(--rg-accent) !important;
}
.current-menu-item > a,
.current_page_item > a,
.menu-item.current-menu-item > a,
.menu-item.current_page_item > a {
    color: var(--rg-accent) !important;
    font-weight: 700;
}

/* Mobile menu toggle (burger) */
.menu-toggle,
.mobile-menu-toggle,
button.menu-toggle,
.ast-mobile-menu-buttons,
.gp-mobile-menu-control {
    color: var(--rg-accent) !important;
    border-color: transparent !important;
    background: rgba(255, 255, 255, .65) !important;
}

/* Sub-menus / dropdowns */
.sub-menu,
.children,
.menu-item .sub-menu {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: var(--rg-r-md);
    box-shadow: 0 16px 40px -8px rgba(40, 55, 120, .15) !important;
}

/* ────────────────────────────────────────────────────────────
   4. SITE FOOTER — transparent, se fond dans le body
   On garde une bordure haut subtile et l'accent sur les liens.
   ──────────────────────────────────────────────────────────── */
.site-footer,
footer.site-footer,
footer[role="contentinfo"],
#colophon,
.footer-main,
.main-footer,
.l-footer,
.elementor-location-footer,
#footer,
body > footer,
.fl-page-footer-wrap,
.gp-footer {
    background: rgba(255, 255, 255, .35) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    color: var(--rg-t-2) !important;
    border-top: 1px solid rgba(255, 255, 255, .6) !important;
}

/* Texte dans le footer : couleur de texte normale */
.site-footer,
.site-footer p,
.site-footer span:not([class*="rems-"]):not([class*="p-"]),
footer.site-footer,
footer.site-footer p,
#colophon,
#colophon p,
.footer-main,
.footer-main p {
    color: var(--rg-t-2) !important;
}

/* Liens du footer : accent */
.site-footer a:not([class*="rems-"]):not([class*="p-btn"]),
footer.site-footer a:not([class*="rems-"]):not([class*="p-btn"]),
footer[role="contentinfo"] a:not([class*="rems-"]):not([class*="p-btn"]),
#colophon a:not([class*="rems-"]):not([class*="p-btn"]),
.footer-main a:not([class*="rems-"]):not([class*="p-btn"]),
.main-footer a:not([class*="rems-"]):not([class*="p-btn"]) {
    color: var(--rg-accent) !important;
    text-decoration: none;
    font-weight: 600;
    transition: opacity .2s ease;
}
.site-footer a:hover,
footer.site-footer a:hover,
footer[role="contentinfo"] a:hover,
#colophon a:hover,
.footer-main a:hover {
    opacity: .8;
}

/* Headings du footer */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
footer.site-footer h1, footer.site-footer h2, footer.site-footer h3, footer.site-footer h4,
.footer-main h1, .footer-main h2, .footer-main h3, .footer-main h4,
#colophon h1, #colophon h2, #colophon h3, #colophon h4 {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display);
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Widget titles dans le footer */
.site-footer .widget-title,
.footer-widgets .widget-title,
#colophon .widget-title {
    color: var(--rg-t-1) !important;
    border-bottom: 1px solid var(--rg-line) !important;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* Copyright bar */
.site-info,
.footer-bottom,
.copyright,
.footer-credits,
.footer-attribution {
    color: var(--rg-t-3) !important;
    font-size: 12px;
}

/* ────────────────────────────────────────────────────────────
   5. CONTENU — full-bleed sur mobile
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-content,
    .content-area,
    main[role="main"],
    .entry-content,
    main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .rems-page-host {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .site-content,
    .content-area,
    main[role="main"] {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ────────────────────────────────────────────────────────────
   6. LIENS dans le contenu — accent
   ──────────────────────────────────────────────────────────── */
.entry-content a:not(.p-btn):not([class*="rems-"]):not([class*="hp-"]):not([class*="lg-"]):not([class*="ex-"]):not([class*="bk-"]):not(.button) {
    color: var(--rg-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity .15s ease;
}
.entry-content a:not(.p-btn):not([class*="rems-"]):not([class*="hp-"]):not([class*="lg-"]):not([class*="ex-"]):not([class*="bk-"]):not(.button):hover {
    opacity: .8;
}

/* ────────────────────────────────────────────────────────────
   7. BOUTONS standards WP / theme — accent
   ──────────────────────────────────────────────────────────── */
.entry-content button:not([class*="rems-"]):not([class*="p-btn"]),
.entry-content input[type="submit"],
.entry-content input[type="button"],
.wp-block-button__link,
.button:not([class*="rems-"]):not([class*="p-btn"]) {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    border: none !important;
    border-radius: var(--rg-r-sm) !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    transition: opacity .2s ease;
}
.entry-content button:not([class*="rems-"]):not([class*="p-btn"]):hover,
.entry-content input[type="submit"]:hover,
.wp-block-button__link:hover,
.button:not([class*="rems-"]):not([class*="p-btn"]):hover {
    opacity: .9;
}

/* ────────────────────────────────────────────────────────────
   8. HEADINGS WP standards (H1 H2 H3)
   ──────────────────────────────────────────────────────────── */
.entry-content h1,
.entry-content h2:not([class*="rems-"]):not([class*="hp-"]):not([class*="lg-"]):not([class*="ex-"]):not([class*="bk-"]),
.entry-content h3:not([class*="rems-"]):not([class*="hp-"]):not([class*="lg-"]):not([class*="ex-"]):not([class*="bk-"]) {
    font-family: var(--rg-font-display);
    color: var(--rg-t-1);
    letter-spacing: -.02em;
    font-weight: 800;
}

/* ────────────────────────────────────────────────────────────
   8bis. CACHER le H1 auto du thème quand Crystal a déjà un H1
   (évite le double H1 mauvais SEO). Utilise :has() (browsers modernes).

   v4.5.5 : selectors étendus pour couvrir TOUS les heroes Crystal
   (match, ligue, bookmaker, expert, homepage, archives, cup).
   ──────────────────────────────────────────────────────────── */
body:has(.rems-hero__title),
body:has(.hp-hero__h1),
body:has(.lg-hd__h1),
body:has(.rems-league-header h1),
body:has(.rems-bkr-page h1),
body:has(.rems-bkr-header h1),
body:has(.rems-expert-page h1),
body:has(.rems-expert-hero h1),
body:has(.rems-expert-name),
body:has(.rems-homepage h1),
body:has(.rems-hp-hero h1),
body:has(.rems-hp-hero-h1),
body:has(.rems-cup-bracket-widget h1),
body:has(.rc-entry-content h1) {
    /* On cache les H1 du thème dans tous les wrappers possibles */
}

body:has(.rems-hero__title) .entry-title,
body:has(.rems-hero__title) .page-title,
body:has(.rems-hero__title) header.entry-header,
body:has(.rems-hero__title) .post-header,
body:has(.rems-hero__title) .ast-archive-title,
body:has(.rems-hero__title) .rc-entry-header,

body:has(.hp-hero__h1) .entry-title,
body:has(.hp-hero__h1) .page-title,
body:has(.hp-hero__h1) header.entry-header,
body:has(.hp-hero__h1) .post-header,
body:has(.hp-hero__h1) .rc-entry-header,

body:has(.lg-hd__h1) .entry-title,
body:has(.lg-hd__h1) .page-title,
body:has(.lg-hd__h1) header.entry-header,
body:has(.lg-hd__h1) .rc-entry-header,

body:has(.rems-league-header) .entry-title,
body:has(.rems-league-header) .page-title,
body:has(.rems-league-header) header.entry-header,
body:has(.rems-league-header) .rc-entry-header,

body:has(.rems-bkr-page) .entry-title,
body:has(.rems-bkr-page) .page-title,
body:has(.rems-bkr-page) header.entry-header,
body:has(.rems-bkr-page) .rc-entry-header,

body:has(.rems-expert-page) .entry-title,
body:has(.rems-expert-page) .page-title,
body:has(.rems-expert-page) header.entry-header,
body:has(.rems-expert-page) .rc-entry-header,

body:has(.rems-homepage) .entry-title,
body:has(.rems-homepage) .page-title,
body:has(.rems-homepage) header.entry-header,
body:has(.rems-homepage) .rc-entry-header,

body:has(.rems-hp-hero) .entry-title,
body:has(.rems-hp-hero) .page-title,
body:has(.rems-hp-hero) header.entry-header,
body:has(.rems-hp-hero) .rc-entry-header,

/* Cup pages */
body:has(.rems-cup-bracket-widget) .entry-title,
body:has(.rems-cup-bracket-widget) .page-title,
body:has(.rems-cup-bracket-widget) .rc-entry-header,

/* Pages de match — match-header.php met un H1 dans rems-match-header-premium */
body:has(.rems-match-header-premium) .entry-title,
body:has(.rems-match-header-premium) .page-title,
body:has(.rems-match-header-premium) header.entry-header,
body:has(.rems-match-header-premium) .rc-entry-header {
    display: none !important;
}

/* Featured image / thumbnail aussi */
body:has(.rems-hero__title) .post-thumbnail,
body:has(.lg-hd__h1) .post-thumbnail,
body:has(.hp-hero__h1) .post-thumbnail,
body:has(.rems-league-header) .post-thumbnail,
body:has(.rems-bkr-page) .post-thumbnail,
body:has(.rems-expert-page) .post-thumbnail,
body:has(.rems-match-header-premium) .post-thumbnail {
    display: none !important;
}

/* FALLBACK pour navigateurs sans :has() (Firefox <121, vieux Safari) :
   on cache TOUJOURS le H1 du thème quand on est dans rc-site-main avec un shortcode */
.rc-site-main .entry-title,
.rc-site-main .rc-entry-header {
    /* Le thème devrait NE PAS afficher .rc-entry-header si shortcode contient H1 */
    /* On garde par défaut, le :has() ci-dessus prend le dessus si supporté */
}

/* ────────────────────────────────────────────────────────────
   9. Reduce motion
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html, body { background-attachment: scroll !important; }
    .site-header,
    .site-footer,
    .sub-menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ────────────────────────────────────────────────────────────
   10. KILLERS LEGACY — corrections de styles parasites
   ──────────────────────────────────────────────────────────── */

/* Tuer le footer custom dark navy de homepage.css */
.rems-custom-footer {
    background: rgba(255, 255, 255, .35) !important;
    color: var(--rg-t-2) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-top: 1px solid var(--rg-line) !important;
    border-image: none !important;
    padding: 36px 24px 12px !important;
}
.rems-custom-footer * {
    color: var(--rg-t-2) !important;
}
.rems-custom-footer h1, .rems-custom-footer h2, .rems-custom-footer h3, .rems-custom-footer h4,
.rems-custom-footer .rems-footer-col-title,
.rems-custom-footer strong {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display) !important;
}
.rems-custom-footer a:not([class*="rems-pred"]):not([class*="p-btn"]) {
    color: var(--rg-accent) !important;
    text-decoration: none !important;
}
.rems-custom-footer a:hover {
    opacity: .8;
}
.rems-custom-footer .rems-footer-bottom,
.rems-custom-footer .rems-footer-credits {
    color: var(--rg-t-3) !important;
    border-top-color: var(--rg-line) !important;
}

/* v4.5.7 — Stratégie cards UNIFIÉE :
   TOUS les `.rems-widget` (homepage ET autres pages) = Crystal card glass.
   Les ITEMS à l'intérieur (matches, experts, bookmakers...) sont FLAT
   (pas de nested cards). Évite la double-box.

   Comme la page match (Stats offensives) : UNE card avec WidgetHead +
   contenu flat à l'intérieur. */

/* CARDS — TOUS les .rems-widget */
.rems-page-host .rems-widget,
.rc-site-main .rems-widget {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-md) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 8px 28px -6px rgba(40, 55, 120, .12),
        0 2px 8px rgba(40, 55, 120, .04) !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
    overflow: hidden;
}
@media (max-width: 768px) {
    .rems-page-host .rems-widget,
    .rc-site-main .rems-widget {
        padding: 14px !important;
        backdrop-filter: blur(12px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
    }
}

/* Pas de bordure parasite ::before sur AUCUN widget */
.rems-widget::before,
.rems-widget::after {
    display: none !important;
    content: none !important;
}

/* Header interne (NON-homepage) : bandeau avec bordure bottom dans la card */
.rems-page-host:not(.rems-homepage-host) .rems-widget > .rems-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rg-line) !important;
    margin: -18px -18px 14px !important;
    padding: 14px 18px !important;
    box-shadow: none !important;
}
@media (max-width: 768px) {
    .rems-page-host:not(.rems-homepage-host) .rems-widget > .rems-header {
        margin: -14px -14px 12px !important;
        padding: 12px 14px !important;
    }
}
.rems-page-host:not(.rems-homepage-host) .rems-widget > .rems-header .rems-title {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    font-size: 16px !important;
    margin: 0 !important;
}
.rems-page-host:not(.rems-homepage-host) .rems-widget > .rems-header .rems-subtitle {
    color: var(--rg-t-3) !important;
    font-size: 12px !important;
    margin: 4px 0 0 !important;
}
.rems-page-host:not(.rems-homepage-host) .rems-widget > .rems-content {
    padding: 0 !important;
}

/* HOMEPAGE — items FLAT à l'intérieur de la card section
   (pas de glass-on-glass, juste une légère séparation) */

/* Match grid : 1 col mobile / 2-3 cols desktop */
.rems-homepage .rems-mg,
.rems-homepage .rems-league-matches-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 769px) {
    .rems-homepage .rems-mg,
    .rems-homepage .rems-league-matches-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1100px) {
    .rems-homepage .rems-mg,
    .rems-homepage .rems-league-matches-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Match items homepage : FLAT, pas de nested card.
   Juste un contour subtil pour séparer chaque match. */
.rems-homepage .rems-mg-card,
.rems-homepage .rems-league-match-card {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-sm) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 12px !important;
    transition: border-color .2s ease;
}
.rems-homepage .rems-mg-card:hover,
.rems-homepage .rems-league-match-card:hover {
    border-color: var(--rg-accent) !important;
    transform: none;
}

/* Tabs homepage : style pill clean */
.rems-homepage .rems-hp-tabs {
    background: rgba(255, 255, 255, .65) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-pill) !important;
    padding: 4px !important;
    margin-bottom: 14px;
    backdrop-filter: blur(12px);
    overflow-x: auto;
    scrollbar-width: none;
}
.rems-homepage .rems-hp-tabs::-webkit-scrollbar { display: none; }
.rems-homepage .rems-hp-tab {
    background: transparent !important;
    border: none !important;
    border-radius: var(--rg-r-pill) !important;
    color: var(--rg-t-3) !important;
    padding: 8px 14px !important;
    font-weight: 700 !important;
    font-family: var(--rg-font-display) !important;
    transition: color .2s ease, background .2s ease;
}
.rems-homepage .rems-hp-tab.active {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
}
.rems-homepage .rems-hp-tab-name {
    color: inherit !important;
    font-family: inherit !important;
}

/* "Voir le pronostic" link bottom of section */
.rems-homepage .rems-hp-see-more {
    text-align: center;
    margin-top: 14px;
}
.rems-homepage .rems-hp-see-more a {
    display: inline-block;
    color: var(--rg-accent) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-family: var(--rg-font-display) !important;
    padding: 10px 20px;
    border-radius: var(--rg-r-pill);
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--rg-line);
    transition: border-color .2s ease;
}
.rems-homepage .rems-hp-see-more a:hover {
    border-color: var(--rg-accent) !important;
}

/* "Comment ça marche" — 3 steps, items sur le fond, pas de card chacun */
.rems-homepage .rems-hp-hiw {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 769px) {
    .rems-homepage .rems-hp-hiw {
        grid-template-columns: repeat(3, 1fr);
    }
}
.rems-homepage .rems-hp-hiw-step {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-sm) !important;
    padding: 18px !important;
    text-align: center;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.rems-homepage .rems-hp-hiw-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.rems-homepage .rems-hp-hiw-num {
    display: inline-block;
    width: 28px; height: 28px;
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    border-radius: 50%;
    font-weight: 800;
    line-height: 28px;
    margin-bottom: 8px;
}
.rems-homepage .rems-hp-hiw-title {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display) !important;
    font-size: 15px !important;
    margin: 0 0 6px !important;
}
.rems-homepage .rems-hp-hiw-desc {
    color: var(--rg-t-2) !important;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Comp grid (championnats / coupes) sur homepage */
.rems-homepage .rems-hp-comp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 480px) {
    .rems-homepage .rems-hp-comp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
    .rems-homepage .rems-hp-comp-grid { grid-template-columns: repeat(4, 1fr); }
}
.rems-homepage .rems-hp-section-sub {
    color: var(--rg-t-3) !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    margin: 18px 0 10px !important;
    font-family: var(--rg-font-display) !important;
}

/* FAQ section — alignée avec les autres */
.rems-homepage .hp-faq,
.hp-faq {
    max-width: none !important;
    margin: 0 !important;
}
.rems-homepage .hp-faq + .p-secthd,
.rems-homepage .p-secthd {
    text-align: left;
    margin-bottom: 14px;
}

/* Sections homepage : pas de line top entre sections */
.rems-widget + .rems-widget,
.rems-hp-hero + .rems-widget,
section + .rems-widget {
    margin-top: 14px !important;
    border-top: none !important;
}
/* Header de widget legacy — pas de border bottom violette */
.rems-widget .rems-header,
.rems-hp-hero,
.rems-bkr-page .rems-bkr-header {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* La barre indigo en haut des sections (homepage.css ligne X) */
.rems-widget--matches::before,
.rems-widget--standings::before,
.rems-widget--experts::before,
.rems-widget--bk::before,
.rems-widget--bk-detail::before,
.rems-widget--faq::before,
.rems-widget--final-cta::before,
.rems-widget--nav::before,
.rems-widget--hiw::before,
.rems-widget::before {
    display: none !important;
    content: none !important;
}

/* Standing cards homepage : bordure left violette → discret */
.rems-st-zone-cl,
.rems-st-zone-el,
.rems-st-zone-rel {
    border-left: none !important;
}
.rems-st-zone-cl td:first-child {
    box-shadow: inset 3px 0 0 var(--rg-win) !important;
}
.rems-st-zone-el td:first-child {
    box-shadow: inset 3px 0 0 var(--rg-info) !important;
}
.rems-st-zone-rel td:first-child {
    box-shadow: inset 3px 0 0 var(--rg-loss) !important;
}

/* Bouton "Voir le classement complet" → pill style Crystal */
.rems-st-expand-btn {
    background: rgba(255, 255, 255, .8) !important;
    color: var(--rg-accent) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-pill) !important;
    padding: 10px 22px !important;
    font-weight: 800 !important;
    font-family: var(--rg-font-display) !important;
    transition: border-color .2s ease;
}
.rems-st-expand-btn:hover {
    border-color: var(--rg-accent) !important;
}

/* Bouton "Pronostic [Ligue]" footer link → minimal */
.rems-st-league-link a {
    color: var(--rg-accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    font-weight: 700 !important;
    font-family: var(--rg-font-display) !important;
}

/* Cards experts homepage : FLAT (dans la card section) */
.rems-hp-expert-card {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-sm) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 14px !important;
    transition: border-color .2s ease;
}
.rems-hp-expert-card:hover {
    border-color: var(--rg-accent) !important;
}
.rems-hp-expert-name,
.rems-hp-expert-spec {
    color: var(--rg-accent) !important;
    font-family: var(--rg-font-display) !important;
}
.rems-hp-expert-bio {
    color: var(--rg-t-2) !important;
}
.rems-hp-expert-link,
.rems-hp-expert-count {
    color: var(--rg-accent) !important;
    font-weight: 700 !important;
}

/* Bookmaker cards homepage : FLAT (dans la card section) */
.rems-hp-bk-card {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-sm) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 14px !important;
}
.rems-hp-bk-card--leader {
    border-color: var(--rg-accent) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, .75) !important;
}
.rems-hp-bk-badge {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
}
.rems-hp-bk-bonus {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    padding: 6px 12px !important;
    border-radius: var(--rg-r-pill) !important;
    font-weight: 800 !important;
    display: inline-block;
}
.rems-hp-bk-cta {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    border-radius: var(--rg-r-sm) !important;
    padding: 10px 18px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px var(--rg-accent-glow) !important;
}

/* Comp grid (championnats / coupes) sur homepage : FLAT */
.rems-hp-comp-card {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-sm) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: border-color .2s ease;
    padding: 12px !important;
}
.rems-hp-comp-card:hover {
    border-color: var(--rg-accent) !important;
    transform: none;
}
.rems-hp-comp-card--cup {
    border-left: 3px solid var(--rg-accent-soft) !important;
}
.rems-hp-comp-name {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display) !important;
    font-weight: 700 !important;
}
.rems-hp-comp-badge {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    border-radius: var(--rg-r-pill) !important;
}
.rems-hp-section-sub {
    color: var(--rg-t-3) !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-family: var(--rg-font-display) !important;
}

/* Standings table homepage — harmoniser avec Crystal */
.rems-standings-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--rg-r-md) !important;
    border: 1px solid var(--rg-line) !important;
    background: rgba(255, 255, 255, .65) !important;
    backdrop-filter: blur(12px);
}
.rems-standings-table {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rems-standings-table thead th {
    background: var(--rg-surface-3) !important;
    color: var(--rg-t-3) !important;
    font-family: var(--rg-font-display) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 10px 6px !important;
    border-bottom: 1px solid var(--rg-line) !important;
    text-align: center !important;
}
.rems-standings-table tbody td {
    color: var(--rg-t-2) !important;
    padding: 10px 6px !important;
    border-bottom: 1px solid var(--rg-line) !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}
.rems-standings-table tbody tr:last-child td {
    border-bottom: none !important;
}
.rems-standings-table tbody td.rems-st-team {
    text-align: left !important;
    color: var(--rg-t-1) !important;
    font-weight: 700 !important;
    font-family: var(--rg-font-display) !important;
}
.rems-standings-table tbody td.rems-st-pts {
    color: var(--rg-t-1) !important;
    font-weight: 800 !important;
}
.rems-standings-table tbody td.rems-st-pos {
    color: var(--rg-t-3) !important;
    font-weight: 700 !important;
}
.rems-standings-table tbody td.rems-st-pos strong {
    color: var(--rg-t-1) !important;
}
.rems-st-team-logo {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    margin-right: 6px;
    vertical-align: middle;
}

/* Mobile : table plus compacte */
@media (max-width: 768px) {
    .rems-standings-table { font-size: 11px !important; }
    .rems-standings-table thead th,
    .rems-standings-table tbody td { padding: 7px 4px !important; }
    .rems-st-team-logo { width: 14px !important; height: 14px !important; }
    /* Cacher colonnes V/N/D pour gagner de l'espace */
    .rems-standings-table thead th:nth-child(4),
    .rems-standings-table thead th:nth-child(5),
    .rems-standings-table thead th:nth-child(6),
    .rems-standings-table tbody td:nth-child(4),
    .rems-standings-table tbody td:nth-child(5),
    .rems-standings-table tbody td:nth-child(6) {
        display: none;
    }
}

/* Match grid homepage : si ancien rendu en cards verticales */
.rems-mg,
.rems-mg-card,
.rems-league-matches-grid {
    background: transparent !important;
}
.rems-mg-card,
.rems-league-match-card {
    background: rgba(255, 255, 255, .8) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-md) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(40, 55, 120, .04) !important;
    transition: border-color .2s ease;
}
.rems-mg-card:hover,
.rems-league-match-card:hover {
    border-color: var(--rg-accent) !important;
}
.rems-mg-team-name,
.rems-league-match-team-name {
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-display) !important;
}
.rems-mg-cta-btn,
.rems-league-match-cta a {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    border-radius: var(--rg-r-sm) !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-family: var(--rg-font-display) !important;
}
.rems-mg-cta-pending,
.rems-league-match-cta button.disabled {
    background: var(--rg-surface-2) !important;
    color: var(--rg-t-3) !important;
    border-radius: var(--rg-r-sm) !important;
    padding: 10px 16px !important;
}
.rems-mg-odd,
.rems-league-match-odd {
    background: var(--rg-surface-2) !important;
    border: 1px solid var(--rg-line) !important;
    color: var(--rg-t-1) !important;
    font-family: var(--rg-font-num) !important;
}
.rems-mg-odd.is-fav,
.rems-league-match-odd.is-favorite {
    background: var(--rg-accent) !important;
    color: var(--rg-accent-ink) !important;
    border-color: transparent !important;
}
.rems-mg-proba-bar,
.rems-proba-bar {
    background: var(--rg-surface-2) !important;
    border-radius: var(--rg-r-pill) !important;
    overflow: hidden;
    height: 6px !important;
}
.rems-mg-proba-home,
.rems-proba-segment.home { background: var(--rg-team-a) !important; }
.rems-mg-proba-draw,
.rems-proba-segment.draw { background: var(--rg-draw) !important; }
.rems-mg-proba-away,
.rems-proba-segment.away { background: var(--rg-team-b) !important; }

/* H2 des sections homepage : pure typo, pas de bordure parasite */
.rems-widget .rems-title,
.rems-hp-hero h1,
.rems-hp-section-title,
.rems-bkr-page h1,
.rems-league-header h1 {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* ────────────────────────────────────────────────────────────
   v4.5.4 — FIX OVERFLOW MOBILE
   Carrousels : empêcher la marge négative de pousser le parent
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Carrousels match : pas de break-out négatif */
    .hp-mc__row,
    .rems-mc__row {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-wrap: wrap;
        overflow-x: visible !important;
    }
    .hp-mc__card {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    /* Tableaux longs : scroll horizontal interne uniquement */
    .rems-standings-wrap,
    .rems-standings__table-wrap {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    /* Grilles avec colonnes fixes : 1 colonne sur mobile */
    .hp-st__grid,
    .hp-ex__row,
    .hp-bk__grid,
    .lg-co__grid,
    .lg-tr__grid,
    .lg-hd__kpis {
        grid-template-columns: 1fr !important;
    }
    .hp-ex__row,
    .hp-bk__grid {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Page hero / hero h1 : compact mobile */
    .hp-hero {
        padding: 18px 14px !important;
        margin: 0 !important;
    }
    .hp-hero__h1 { font-size: 22px !important; line-height: 1.15 !important; }
    .hp-hero__sub { font-size: 13px !important; }
    .hp-hero__kpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

    /* Header / Footer : padding mobile compact */
    .lay-header__inner { padding: 10px 12px !important; }
    .lay-footer__top { padding: 24px 14px !important; }

    /* Contenu principal mobile : padding ULTRA-REDUIT pour cards full-bleed */
    .rc-container,
    .site-content,
    .content-area,
    main[role="main"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .rc-site-main {
        padding: 8px 0 24px !important;
    }
    /* Pas de margin double avec article/post wrappers */
    .rc-site-main > article,
    .rc-site-main > .post,
    .rc-site-main > .page,
    .entry-content {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    /* Réduire margin-bottom des widgets (espacement entre cards) */
    .rems-page-host .rems-widget,
    .rc-site-main .rems-widget {
        margin-bottom: 8px !important;
        padding: 12px !important;
    }
    /* Header de widget : padding réduit aussi */
    .rems-page-host:not(.rems-homepage-host) .rems-widget > .rems-header {
        margin: -12px -12px 10px !important;
        padding: 10px 12px !important;
    }
}

@media (max-width: 480px) {
    /* Encore plus compact sur petit mobile */
    .rc-container { padding-left: 4px !important; padding-right: 4px !important; }
    .rems-page-host .rems-widget,
    .rc-site-main .rems-widget {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .hp-hero { padding: 16px 12px !important; }
    .hp-hero__h1 { font-size: 20px !important; }
}

/* ────────────────────────────────────────────────────────────
   v4.5.9 — Tables sur mobile : pas de scroll, on cache les
   colonnes secondaires pour rentrer dans le viewport.
   ──────────────────────────────────────────────────────────── */
.rems-projection-table {
    width: 100%;
    table-layout: auto;
}

@media (max-width: 768px) {
    /* Course au titre / Bottom 5 : ne montrer que Pos / Équipe / Pts actuels / Pts finaux */
    .rems-projection-table {
        font-size: 12px;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .rems-projection-table th,
    .rems-projection-table td {
        padding: 9px 4px !important;
    }
    /* Cacher colonne "Moy" (4e) */
    .rems-projection-table th:nth-child(4),
    .rems-projection-table td:nth-child(4) {
        display: none;
    }
    /* Cacher colonne "Position/Évol" (6e) */
    .rems-projection-table th:nth-child(6),
    .rems-projection-table td:nth-child(6) {
        display: none;
    }
    /* Position cell (1ère col) compact */
    .rems-projection-table .pos-cell {
        font-weight: 800;
        text-align: center;
        width: 28px;
    }
    /* Team cell : logo + name */
    .rems-projection-table .team-cell {
        text-align: left !important;
    }
    .rems-projection-table .team-cell .team-logo {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px;
        vertical-align: middle;
    }
    /* Data cells centrées */
    .rems-projection-table .data-cell {
        text-align: center;
        font-weight: 700;
    }
    /* Le wrapper pas de scroll horizontal */
    .rems-projection-panel,
    .rems-projection-section {
        overflow-x: visible !important;
        max-width: 100%;
    }

    /* Trends / Form guide : même approche */
    .rems-trends-premium table,
    .rems-form-guide-premium table {
        font-size: 12px;
        max-width: 100%;
        width: 100%;
    }
    .rems-trends-premium table th:nth-child(n+5),
    .rems-trends-premium table td:nth-child(n+5),
    .rems-form-guide-premium table th:nth-child(n+5),
    .rems-form-guide-premium table td:nth-child(n+5) {
        display: none;
    }
}

/* Petit indice mobile pour signaler que des colonnes sont cachées */
@media (max-width: 768px) {
    .rems-projection-section::after {
        content: "↓ Données complètes sur PC";
        display: block;
        font-size: 10px;
        color: var(--rg-t-3);
        text-align: center;
        margin-top: 8px;
        opacity: .7;
    }
}

/* ────────────────────────────────────────────────────────────
   v4.5.11 — League Betting Trends : BTTS + Top attaques +
   Top défenses en GRILLE 3 colonnes côte à côte sur PC
   ──────────────────────────────────────────────────────────── */
.rems-trends-premium .rems-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Wrapper qui contient les 3 sections (BTTS + Attaques + Défenses) */
.rems-trends-three-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
}
@media (min-width: 900px) {
    .rems-trends-three-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Auto-wrap CSS : on prend les 3 derniers blocs (BTTS, attack, defense)
   qui sont des frères et on les met en grille */
.rems-trends-premium > .rems-content > div[style*="margin-top:28px"],
.rems-trends-premium > .rems-content > .rems-attack-defense-grid {
    /* Force le grid flow */
}

/* Plus simple : cibler les 3 sections directement via leurs styles inline */
@media (min-width: 900px) {
    .rems-trends-premium .rems-attack-defense-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    /* Pour mettre BTTS à côté de attack/defense, on transforme le parent
       en grid avec 3 colonnes. Le BTTS prend 1 col, attack-defense-grid les 2 autres */
    .rems-trends-premium .rems-content > div[style*="margin-top:28px"] {
        grid-column: 1;
        margin-top: 0 !important;
    }
    .rems-trends-premium .rems-content > .rems-attack-defense-grid {
        grid-template-columns: 1fr !important;
        grid-column: 2 / 4;
        display: grid !important;
        gap: 14px !important;
    }
    /* Wrapper grid 3 cols */
    .rems-trends-premium .rems-content {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px !important;
        align-items: start;
    }
    /* Headers stay full width */
    .rems-trends-premium .rems-header,
    .rems-trends-premium .rems-trends-tabs,
    .rems-trends-premium .rems-trends-panel {
        grid-column: 1 / -1;
    }
    /* Reset margin-top des cards inline */
    .rems-trends-premium .rems-content > div[style*="margin-top:28px"] {
        margin-top: 0 !important;
    }
    /* Padding card uniforme */
    .rems-trends-premium .rems-content > div,
    .rems-trends-premium .rems-attack-defense-grid > div {
        padding: 16px !important;
    }
}

/* Items dans ces 3 cards : un peu compact pour rentrer */
.rems-trends-premium .rems-trends-bar-row {
    gap: 8px !important;
    padding: 6px 0 !important;
}
.rems-trends-premium .rems-trends-bar-row .team-name {
    font-size: 12px !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rems-trends-premium .rems-trends-bar-row .bar-track {
    width: 56px !important;
}
.rems-trends-premium .rems-trends-bar-row .bar-value {
    font-size: 12px !important;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
}

/* Anti-overflow universel : tout enfant immédiat de page-host respecte 100% */
.rems-page-host > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────────
   11. RESET du chrome legacy quand le thème rems-crystal est actif
   (qui a son propre .lay-header / .lay-footer / .layM-footer)
   ──────────────────────────────────────────────────────────── */
body:has(.lay-header) .site-header,
body:has(.lay-header) header.site-header,
body:has(.lay-header) header[role="banner"]:not(.lay-header),
body:has(.lay-header) #masthead,
body:has(.lay-footer) .site-footer,
body:has(.lay-footer) footer.site-footer,
body:has(.lay-footer) footer[role="contentinfo"]:not(.lay-footer):not(.layM-footer),
body:has(.lay-footer) #colophon,
body:has(.lay-footer) .rems-custom-footer {
    /* Ne pas appliquer les règles legacy de ce fichier — le thème custom gère */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}