/* ==============================================================
   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).
   ──────────────────────────────────────────────────────────── */
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;
    background-attachment: fixed !important;
    color: var(--rg-t-1) !important;
}

/* 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.
   ──────────────────────────────────────────────────────────── */
.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).
   ──────────────────────────────────────────────────────────── */
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(.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(.lg-hd__h1) .entry-title,
body:has(.lg-hd__h1) .page-title,
body:has(.lg-hd__h1) header.entry-header,
body:has(.rems-league-header h1) .entry-title,
body:has(.rems-league-header h1) .page-title,
body:has(.rems-league-header h1) header.entry-header,
body:has(.rems-bkr-page h1) .entry-title,
body:has(.rems-bkr-page h1) .page-title,
body:has(.rems-bkr-page h1) header.entry-header,
body:has(.rems-expert-page h1) .entry-title,
body:has(.rems-expert-page h1) .page-title,
body:has(.rems-expert-page h1) header.entry-header,
body:has(.rems-homepage h1) .entry-title,
body:has(.rems-homepage h1) .page-title,
body:has(.rems-homepage h1) header.entry-header {
    display: none !important;
}

/* Aussi cacher le breadcrumbs / featured image si elle prend trop de place sur ces pages */
body:has(.rems-hero__title) .post-thumbnail,
body:has(.lg-hd__h1) .post-thumbnail,
body:has(.hp-hero__h1) .post-thumbnail {
    display: none !important;
}

/* ────────────────────────────────────────────────────────────
   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;
}

/* Tuer les bordures violettes parasites en haut des sections widget */
.rems-widget {
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
.rems-widget::before,
.rems-widget::after {
    display: none !important;
}

/* 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 : enlever shadow legacy + harmoniser */
.rems-hp-expert-card {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-md) !important;
    box-shadow: 0 2px 12px rgba(40, 55, 120, .04) !important;
    backdrop-filter: blur(12px);
    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 : harmoniser */
.rems-hp-bk-card {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-md) !important;
    box-shadow: 0 2px 12px rgba(40, 55, 120, .04) !important;
}
.rems-hp-bk-card--leader {
    border-color: var(--rg-accent) !important;
    box-shadow: 0 8px 28px var(--rg-accent-glow) !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 */
.rems-hp-comp-card {
    background: rgba(255, 255, 255, .8) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-r-md) !important;
    box-shadow: 0 2px 8px rgba(40, 55, 120, .04) !important;
    transition: border-color .2s ease, transform .15s ease;
}
.rems-hp-comp-card:hover {
    border-color: var(--rg-accent) !important;
    transform: translateY(-2px);
}
.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 */
.rems-standings-table {
    background: rgba(255, 255, 255, .65) !important;
    border-radius: var(--rg-r-md) !important;
    overflow: hidden;
    border: 1px solid var(--rg-line) !important;
}
.rems-standings-table th {
    background: var(--rg-surface-3) !important;
    color: var(--rg-t-3) !important;
    font-family: var(--rg-font-display) !important;
}
.rems-standings-table td {
    color: var(--rg-t-2) !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;
}