/*
Theme Name: REM'S Crystal
Theme URI: https://github.com/remi-content-ai/rems-crystal
Author: REM'S Content AI
Author URI: https://www.meilleur-site-paris-sportifs-cameroun.com
Description: Thème ultra-léger conçu spécialement pour le plugin REM'S Content AI. Design Crystal Glass natif (pas d'override CSS contre un thème générique). Utilise la palette active du plugin (10 palettes Crystal disponibles dans Admin → Design). Header transparent, footer transparent, body avec gradient pastel, container queries, mobile-first. Les pages match, ligues, expert, bookmaker, homepage adoptent automatiquement le design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rems-crystal
Tags: blog, news, sports, betting, custom-menu, featured-images, footer-widgets, threaded-comments
*/

/* Le CSS principal vient du plugin REM'S Content AI :
   - design-system.css : tokens Crystal
   - rems-ai-widgets.css : composants widgets (cards, atomes)
   - rems-ai-pages.css : composants pages (hp-*, lg-*, ex-*, bk-*)
   - rems-ai-chrome.css : body, header, footer, menu

   Ici on ne fait QUE le minimum pour que WordPress soit content
   et corriger quelques cas que le plugin ne couvre pas. */

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container par défaut */
.rc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 769px) {
    .rc-container { padding: 0 24px; }
}

/* Header */
.rc-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4), 0 8px 24px -12px rgba(40, 55, 120, .08);
    transition: background .2s ease;
}
.rc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}
.rc-site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rc-site-logo img {
    max-height: 48px;
    width: auto;
    display: block;
}
.rc-site-title {
    margin: 0;
    font-family: var(--rg-font-display, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}
.rc-site-title a {
    color: var(--rg-t-1, #0f1530);
    text-decoration: none;
}
.rc-site-description {
    font-size: 12px;
    color: var(--rg-t-3, #6b7595);
}

/* Nav menu */
.rc-main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.rc-main-nav ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rc-main-nav a {
    display: block;
    padding: 8px 14px;
    color: var(--rg-t-2, #3a456a);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 999px;
    transition: color .2s ease, background .2s ease;
}
.rc-main-nav a:hover {
    color: var(--rg-accent, #3d4cf0);
    background: rgba(255, 255, 255, .35);
}
.rc-main-nav .current-menu-item > a,
.rc-main-nav .current_page_item > a {
    color: var(--rg-accent, #3d4cf0);
    background: rgba(255, 255, 255, .55);
    font-weight: 700;
}

/* Sub-menu (dropdown) */
.rc-main-nav .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 14px;
    box-shadow: 0 16px 40px -8px rgba(40, 55, 120, .15);
    min-width: 220px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
    flex-direction: column;
    gap: 2px;
}
.rc-main-nav .menu-item-has-children { position: relative; }
.rc-main-nav .menu-item-has-children:hover > .sub-menu,
.rc-main-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
}
.rc-main-nav .sub-menu a {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* Menu toggle (burger) */
.rc-menu-toggle {
    display: none;
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--rg-line, rgba(60,75,130,.12));
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--rg-accent, #3d4cf0);
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    gap: 6px;
}

@media (max-width: 768px) {
    .rc-menu-toggle { display: inline-flex; }
    .rc-main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(24px) saturate(160%);
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        border-bottom: 1px solid var(--rg-line, rgba(60,75,130,.12));
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }
    .rc-site-header.is-menu-open .rc-main-nav {
        max-height: 80vh;
        overflow-y: auto;
    }
    .rc-main-nav ul {
        flex-direction: column;
        gap: 2px;
    }
    .rc-main-nav a {
        width: 100%;
        text-align: left;
    }
    .rc-main-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 4px 0 4px 12px;
        margin: 0;
    }
}

/* Main content */
.rc-site-main {
    min-height: 60vh;
    padding: 24px 0 48px;
}
.rc-content {
    background: transparent;
}

/* Footer */
.rc-site-footer {
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, .6);
    padding: 36px 0 16px;
    margin-top: 36px;
    color: var(--rg-t-2, #3a456a);
    font-size: 13px;
}
.rc-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
@media (min-width: 769px) {
    .rc-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.rc-footer-col-title {
    font-family: var(--rg-font-display, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rg-t-1, #0f1530);
    margin: 0 0 12px;
}
.rc-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rc-footer-col a {
    color: var(--rg-accent, #3d4cf0);
    text-decoration: none;
    font-weight: 600;
    transition: opacity .2s ease;
}
.rc-footer-col a:hover { opacity: .8; }
.rc-footer-bottom {
    border-top: 1px solid var(--rg-line, rgba(60,75,130,.12));
    padding-top: 16px;
    text-align: center;
    color: var(--rg-t-3, #6b7595);
    font-size: 12px;
    line-height: 1.6;
}
.rc-footer-bottom strong { color: var(--rg-t-2, #3a456a); }

/* Single post / page minimal styling — laisse le contenu (qui a son propre design via shortcodes) */
.rc-entry-header {
    margin-bottom: 24px;
}
.rc-entry-title {
    font-family: var(--rg-font-display, 'Inter', sans-serif);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--rg-t-1, #0f1530);
    margin: 0;
}
/* Si le contenu démarre par un H1 (via shortcode), cacher le H1 du thème */
.rc-entry-content:has(h1) ~ .rc-entry-header,
body:has(.rems-hero__title) .rc-entry-header,
body:has(.hp-hero__h1) .rc-entry-header,
body:has(.lg-hd__h1) .rc-entry-header,
body:has(.rems-bkr-page h1) .rc-entry-header,
body:has(.rems-expert-page h1) .rc-entry-header,
body:has(.rems-homepage h1) .rc-entry-header {
    display: none;
}

/* Skip link accessibilité */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--rg-accent, #3d4cf0);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    z-index: 10000;
}
.skip-link:focus { left: 8px; }

/* Liens de pagination posts */
.rc-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
}
.rc-pagination a, .rc-pagination span {
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--rg-line, rgba(60,75,130,.12));
    text-decoration: none;
    color: var(--rg-t-2, #3a456a);
    font-weight: 700;
}
.rc-pagination .current {
    background: var(--rg-accent, #3d4cf0);
    color: var(--rg-accent-ink, #fff);
    border-color: transparent;
}