/* La Stev' — thème clair "premium familial" (même style que /documentation)
   À charger APRÈS global.css / landing.css.
   Le mode sombre suit automatiquement le réglage de l'appareil. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root, [data-theme="dark"], [data-theme="light"] {
    color-scheme: light;
    --bg: #faf8f4;
    --surface: #ffffff;
    --surface-light: #f3efe8;
    --card: #ffffff;
    --text: #1b2a32;
    --muted: #5d6b73;
    --border: #e8e3da;
    --line: #e8e3da;
    --green: #12a672;
    --green-d: #0c7d56;
    --theme: #12a672;
    --theme-rgb: 18, 166, 114;
    --green-glow: rgba(18, 166, 114, 0.28);
    --deep: #0f3b36;
    --deep2: #14564a;
    --sun: #f5b73d;
    --coral: #ef6a54;
    --sky: #e7f4ef;
    --glass-border: 1px solid #e8e3da;
    --radius: 20px;
    --r: 20px;
    --shadow-1: 0 1px 2px rgba(20,40,40,.05), 0 6px 20px rgba(20,40,40,.06);
    --shadow-2: 0 2px 4px rgba(20,40,40,.06), 0 12px 32px rgba(20,40,40,.10);
    --shadow-3: 0 18px 44px rgba(20,40,40,.16);
    --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root, [data-theme="dark"], [data-theme="light"] {
        color-scheme: dark;
        --bg: #0e1715;
        --surface: #15211e;
        --surface-light: #1b2a26;
        --card: #15211e;
        --text: #eef5f2;
        --muted: #9db3ab;
        --border: #25372f;
        --line: #25372f;
        --green: #2cc790;
        --green-d: #2cc790;
        --theme: #2cc790;
        --theme-rgb: 44, 199, 144;
        --green-glow: rgba(44, 199, 144, 0.25);
        --sky: #17302a;
        --glass-border: 1px solid #25372f;
        --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
        --shadow-2: 0 12px 32px rgba(0,0,0,.4);
        --shadow-3: 0 18px 44px rgba(0,0,0,.5);
    }
}

html { scroll-behavior: smooth; }
body {
    background: var(--bg) !important;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, .montserrat { font-family: var(--font); }
a { color: var(--green-d); }

/* ── En-tête commun ── */
#stev-global-banner {
    background: linear-gradient(90deg, var(--deep), var(--deep2)) !important;
}
#stev-global-banner a { font-family: var(--font); font-weight: 600 !important; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#stev-global-banner { height: 34px; box-sizing: border-box; }
@media (max-width: 600px) { #stev-global-banner a { font-size: .74rem !important; } }
.stev-header-spacer { background: var(--deep); }
.stev-navbar {
    background: var(--deep) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.stev-navbar .stev-nav-item { color: #fff; }
.stev-navbar .stev-nav-item:hover { color: var(--sun); }
.stev-burger span { background: #fff !important; }
.stev-nav-item, .stev-dropdown-item, .drawer-item { font-family: var(--font) !important; }
.stev-btn { border-radius: 14px !important; }
.stev-btn-primary {
    background: var(--sun) !important; color: #3a2a00 !important;
    box-shadow: 0 6px 18px rgba(245,183,61,.35) !important;
}
.stev-navbar .stev-btn-outline { border-radius: 14px !important; background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; }
.stev-drawer .drawer-header { background: var(--deep); }
.stev-dropdown-menu .stev-dropdown-item { color: var(--text); }


/* ── Boutons génériques ── */
.st-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem;
    padding: 14px 24px; border-radius: 14px; text-decoration: none;
    transition: transform .15s, box-shadow .2s, background .2s;
}
.st-btn:active { transform: scale(.97); }
.st-btn-sun { background: var(--sun); color: #3a2a00; box-shadow: 0 6px 18px rgba(245,183,61,.38); }
.st-btn-sun:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245,183,61,.45); }
.st-btn-green { background: var(--green); color: #fff; }
.st-btn-green:hover { background: var(--green-d); }
.st-btn-ghost { background: var(--card); color: var(--text); border: 1.5px solid var(--border); }
.st-btn-ghost:hover { border-color: var(--green); }
.st-btn-light { background: rgba(255,255,255,.14); color: #fff; }
.st-btn-light:hover { background: rgba(255,255,255,.24); }

/* ── Pied de page commun ── */
.st-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--muted); }
.st-footer h4 { color: var(--text); font-family: var(--font); }
.st-footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.st-footer a:hover { color: var(--green-d); }

/* ═══ Pages SEO de jeux (body.seo-game) ═══
   Les pages gardent leur couleur d'accent via --theme (violet, rouge, etc.) */
body.seo-game .stev-header-spacer { background: var(--deep); }
body.seo-game .hero {
    max-width: none !important; width: 100%; margin: 0 !important;
    padding: 34px 20px 84px !important; align-items: center !important; text-align: left !important;
    background: radial-gradient(1100px 420px at 85% -10%, rgba(18,166,114,.45), transparent 60%),
                linear-gradient(135deg, var(--deep), var(--deep2)) !important;
    overflow: hidden; margin-bottom: 0 !important; color: #fff;
}
body.seo-game .hero::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; background: rgba(245,183,61,.16); pointer-events: none; }
body.seo-game .hero-content { max-width: 1000px !important; width: 100%; padding: 0 !important; }
body.seo-game .hero-content > * { max-width: 680px; }
body.seo-game .hero > img { z-index: 0 !important; opacity: 1 !important; width: 170px !important; right: max(20px, calc(50% - 500px)) !important; top: 40px !important; filter: drop-shadow(0 14px 24px rgba(0,0,0,.35)) !important; }
body.seo-game .hero h1 { color: #fff !important; font-weight: 800 !important; letter-spacing: -.5px !important; }
body.seo-game .hero .tagline, body.seo-game .hero p { color: #d6ece5 !important; }
body.seo-game .hero .feature-list { border-left-color: var(--sun) !important; }
body.seo-game .hero .feature-list li { color: #fff !important; }
body.seo-game .hero .feature-list li span { color: var(--sun) !important; }
body.seo-game .hero-badge { background: rgba(255,255,255,.14) !important; border: 0 !important; color: #fff !important; font-weight: 700 !important; }
body.seo-game .hero-cta, body.seo-game .timeline-cta .hero-cta {
    background: var(--sun) !important; color: #3a2a00 !important; text-transform: none !important;
    border-radius: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important;
    box-shadow: 0 6px 18px rgba(245,183,61,.38) !important; animation: none !important;
}
body.seo-game .hero-cta:hover { transform: translateY(-2px); filter: none; }
body.seo-game .hero-cta-outline { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 0 !important; text-transform: none !important; border-radius: 14px !important; font-weight: 700 !important; }

body.seo-game .timeline-section { margin-top: -40px; position: relative; z-index: 2; }
body.seo-game .timeline-section > h2 { margin-top: 70px !important; }
body.seo-game .timeline-content { border-radius: 20px; box-shadow: var(--shadow-1); padding-right: 96px; }
@media (max-width: 600px) { body.seo-game .timeline-content { padding-right: 76px; } }
body.seo-game .timeline-content.theme-box { background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--theme); }
body.seo-game .theme-dot { box-shadow: 0 0 0 6px var(--bg); color: #fff; }
body.seo-game .role-card, body.seo-game .bento-item.card, body.seo-game .step-card, body.seo-game .benefit-card { border-radius: 18px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
body.seo-game h2 { color: var(--text); }
body.seo-game .bento-item h2, body.seo-game .bento-item h3 { color: #fff !important; }
body.seo-game .bento-item p { color: rgba(255,255,255,.88) !important; }
body.seo-game .page-hero { padding: 60px 20px 30px !important; }
body.seo-game .page-header {
    padding: 46px 20px 70px !important; margin: 0 0 -30px !important; text-align: center;
    background: radial-gradient(1100px 420px at 85% -10%, rgba(18,166,114,.45), transparent 60%), linear-gradient(135deg, var(--deep), var(--deep2));
}
body.seo-game .page-header h1 { color: #fff !important; font-weight: 800 !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; margin: 0 0 12px !important; }
body.seo-game .page-header h1 span { color: var(--sun) !important; -webkit-text-fill-color: var(--sun) !important; background: none !important; }
body.seo-game .page-header p { color: #d6ece5 !important; max-width: 640px; margin: 0 auto !important; }
body.seo-game .catalogue-grid { position: relative; z-index: 2; }
@media (max-width: 700px) { body.seo-game .hero > img { width: 84px !important; top: 14px !important; right: 14px !important; } }
body.seo-game .seo-grid h3, body.seo-game h3 { font-family: var(--font); }

/* FAQ dynamique */
body.seo-game .hero-content > * { margin-left: 0 !important; margin-right: 0 !important; }
body.seo-game .hero-content a[style*="padding"]:not(.hero-cta-outline) {
    background: var(--sun) !important; color: #3a2a00 !important; border-radius: 14px !important;
    padding: 15px 30px !important; font-size: 1.05rem !important; font-weight: 700 !important;
    text-transform: none !important; box-shadow: 0 6px 18px rgba(245,183,61,.38) !important; box-sizing: border-box;
}
/* Titres/paragraphes blancs écrits en dur dans les pages : lisibles sur fond clair (hors hero et cartes sombres) */
body.seo-game :not(.hero):not(.hero-content):not(.bento-item):not(.hp-pro) > h2[style*="white"],
body.seo-game :not(.hero):not(.hero-content):not(.bento-item) > h2[style*="#fff"],
body.seo-game :not(.hero):not(.hero-content):not(.bento-item) > h3[style*="color: white"],
body.seo-game :not(.hero):not(.hero-content):not(.bento-item) > h3[style*="color:#fff"] { color: var(--text) !important; }
body.seo-game :not(.hero):not(.hero-content):not(.bento-item) > p[style*="rgba(255,255,255"],
body.seo-game :not(.hero):not(.hero-content):not(.bento-item) > p[style*="rgba(255, 255, 255"] { color: var(--muted) !important; }
.dyn-faq-item { background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-1); }
.dyn-faq-q { color: var(--text) !important; }
.dyn-faq-answer p { color: var(--muted) !important; }


@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}