/* ============================================================
   Guild Manager — Landing page
   Toutes les règles préfixées #gmh pour battre OceanWP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Nunito:wght@300;400;500;600&display=swap');

/* ── Base scoped ─────────────────────────────────────────── */
#gmh {
    --gld:   #d4a847;
    --gldl:  #f0c96a;
    --gldd:  #9a7320;
    --glgw:  rgba(212,168,71,.18);
    --bg:    #080b12;
    --bgc:   #0e1420;
    --bgc2:  #111827;
    --bdr:   rgba(255,255,255,.08);
    --bdrg:  rgba(212,168,71,.28);
    --txt:   #c8d0e0;
    --dim:   #5c6880;
    --wht:   #e8edf5;
    --rd:    14px;
    --rds:   8px;

    background: var(--bg) !important;
    color: var(--txt) !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    display: block !important;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

/* Reset agressif — neutralise OceanWP dans #gmh */
#gmh *, #gmh *::before, #gmh *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    list-style: none !important;
    text-decoration: none !important;
    outline: none !important;
}

/* ── Éléments qui ont besoin de récupérer leurs styles ───── */
#gmh section { display: block !important; }
#gmh em      { font-style: normal !important; color: var(--gld) !important; }
#gmh svg     { display: inline-block !important; flex-shrink: 0 !important; }

/* ── Wrapper centré ──────────────────────────────────────── */
#gmh .gmh-wrap {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 0 48px !important;
    width: 100% !important;
}

/* ══ BOUTONS ════════════════════════════════════════════════ */
#gmh .gmh-btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 30px !important;
    background: var(--gld) !important;
    color: #07090e !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--gmh-fs-btn) !important;
    letter-spacing: .02em !important;
    border-radius: var(--rds) !important;
    cursor: pointer !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
    box-shadow: 0 4px 24px rgba(212,168,71,.35) !important;
    white-space: nowrap !important;
    border: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
#gmh .gmh-btn-gold:hover {
    background: var(--gldl) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 36px rgba(212,168,71,.5) !important;
}
#gmh .gmh-btn-gold.sm { padding: 12px 22px !important; font-size: 14px !important; }
#gmh .gmh-btn-gold.lg { padding: 18px 36px !important; font-size: 16px !important; }

#gmh .gmh-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    background: transparent !important;
    color: var(--txt) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--gmh-fs-btn) !important;
    border: 1.5px solid var(--bdr) !important;
    border-radius: var(--rds) !important;
    cursor: pointer !important;
    transition: border-color .2s, color .2s, background .2s !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
#gmh .gmh-btn-outline:hover {
    border-color: var(--gld) !important;
    color: var(--gld) !important;
    background: var(--glgw) !important;
}
#gmh .gmh-btn-outline.sm { padding: 11px 20px !important; font-size: 14px !important; }
#gmh .gmh-btn-outline.lg { padding: 16px 34px !important; font-size: 16px !important; }

/* ══ HERO ═══════════════════════════════════════════════════ */
#gmh .gmh-hero {
    position: relative !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 120px 24px 110px !important;
    overflow: hidden !important;
    background: var(--bg) !important;
}

#gmh .gmh-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
#gmh .gmh-noise {
    position: absolute !important;
    inset: 0 !important;
    opacity: .4 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E") !important;
    background-size: 200px !important;
}
#gmh .gmh-blob {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(110px) !important;
    pointer-events: none !important;
}
#gmh .gmh-blob-1 {
    width: 800px !important; height: 600px !important;
    background: radial-gradient(ellipse, rgba(212,168,71,.13) 0%, transparent 65%) !important;
    top: -200px !important; right: -250px !important;
}
#gmh .gmh-blob-2 {
    width: 600px !important; height: 500px !important;
    background: radial-gradient(ellipse, rgba(88,101,242,.09) 0%, transparent 65%) !important;
    bottom: -150px !important; left: -200px !important;
}
#gmh .gmh-grid {
    position: absolute !important;
    inset: 0 !important;
    background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, black 20%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, black 20%, transparent 100%) !important;
}

#gmh .gmh-hero .gmh-wrap { position: relative !important; z-index: 1 !important; padding: 0 48px !important; }

#gmh .gmh-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--dim) !important;
    margin-bottom: 32px !important;
}
#gmh .gmh-pulse {
    width: 9px !important; height: 9px !important;
    border-radius: 50% !important;
    background: var(--gld) !important;
    animation: gmh-ping 2.2s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes gmh-ping {
    0%   { box-shadow: 0 0 0 0 rgba(212,168,71,.7); }
    70%  { box-shadow: 0 0 0 12px rgba(212,168,71,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,168,71,0); }
}

#gmh .gmh-h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(2rem, 7vw, var(--gmh-fs-hero-title)) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    color: var(--wht) !important;
    margin-bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -.02em !important;
}
#gmh .gmh-h1-sub {
    color: var(--gld) !important;
    font-size: clamp(1.4rem, 5.5vw, var(--gmh-fs-hero-sub)) !important;
    font-weight: 900 !important;
    display: block !important;
}

#gmh .gmh-lead {
    font-size: clamp(0.9rem, 2vw, var(--gmh-fs-hero-lead)) !important;
    color: var(--dim) !important;
    max-width: 540px !important;
    margin: 0 auto 44px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}

#gmh .gmh-cta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 72px !important;
}

/* Stats bar */
#gmh .gmh-stats-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: var(--bgc) !important;
    border: 1px solid var(--bdr) !important;
    border-radius: 999px !important;
    padding: 20px 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
#gmh .gmh-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 36px !important;
}
#gmh .gmh-stat-item strong {
    font-family: 'Outfit', sans-serif !important;
    font-size: var(--gmh-fs-stats-num) !important;
    font-weight: 800 !important;
    color: var(--gld) !important;
    line-height: 1 !important;
    display: block !important;
}
#gmh .gmh-stat-item span {
    font-family: 'Outfit', sans-serif !important;
    font-size: var(--gmh-fs-stats-label) !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--dim) !important;
    display: block !important;
}
#gmh .gmh-stat-sep {
    width: 1px !important;
    height: 42px !important;
    background: var(--bdr) !important;
    flex-shrink: 0 !important;
}

/* ══ FEATURES ════════════════════════════════════════════════ */
#gmh .gmh-features {
    padding: 110px 0 !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--bdr) !important;
}

#gmh .gmh-section-top { text-align: center !important; margin-bottom: 0 !important; }

#gmh .gmh-tag {
    display: inline-block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--gld) !important;
    margin-bottom: 18px !important;
}

#gmh .gmh-h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(1.4rem, 4vw, var(--gmh-fs-section-h2)) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--wht) !important;
    margin-bottom: 60px !important;
    letter-spacing: -.01em !important;
}

#gmh .gmh-feat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
}

#gmh .gmh-card {
    background: var(--bgc) !important;
    border: 1px solid var(--bdr) !important;
    border-radius: var(--rd) !important;
    padding: 36px 30px !important;
    transition: border-color .22s, transform .22s, box-shadow .22s !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;

    /* Animation scroll */
    opacity: 0 !important;
    transform: translateY(22px) !important;
}
#gmh .gmh-card.gmh-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
#gmh .gmh-card:hover {
    border-color: var(--bdrg) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 56px rgba(0,0,0,.45) !important;
}
#gmh .gmh-card.accent {
    border-color: var(--bdrg) !important;
    background: linear-gradient(145deg, var(--bgc) 55%, rgba(212,168,71,.06)) !important;
}

#gmh .gmh-card-icon {
    font-size: var(--gmh-fs-card-icon) !important;
    margin-bottom: 18px !important;
    display: block !important;
    line-height: 1 !important;
}
#gmh .gmh-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: var(--gmh-fs-card-h3) !important;
    font-weight: 700 !important;
    color: var(--wht) !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}
#gmh .gmh-card p {
    font-size: var(--gmh-fs-card-p) !important;
    color: var(--dim) !important;
    line-height: 1.75 !important;
    margin-bottom: 24px !important;
}
#gmh .gmh-card ul li {
    font-size: var(--gmh-fs-card-li) !important;
    color: var(--dim) !important;
    padding: 9px 0 9px 24px !important;
    position: relative !important;
    border-bottom: 1px solid var(--bdr) !important;
    line-height: 1.5 !important;
}
#gmh .gmh-card ul li:last-child { border-bottom: none !important; }
#gmh .gmh-card ul li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    color: var(--gld) !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
}

/* ══ PARCOURS ════════════════════════════════════════════════ */
#gmh .gmh-paths {
    padding: 110px 0 !important;
    background: var(--bgc) !important;
    border-top: 1px solid var(--bdr) !important;
    border-bottom: 1px solid var(--bdr) !important;
}

#gmh .gmh-paths-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}

#gmh .gmh-path-card {
    background: var(--bg) !important;
    border: 1px solid var(--bdr) !important;
    border-radius: var(--rd) !important;
    padding: 44px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;

    opacity: 0 !important;
    transform: translateY(22px) !important;
    transition: opacity .55s ease, transform .55s ease !important;
}
#gmh .gmh-path-card.gmh-in { opacity: 1 !important; transform: translateY(0) !important; }
#gmh .gmh-path-chef {
    border-color: var(--bdrg) !important;
    background: linear-gradient(145deg, var(--bgc2) 60%, rgba(212,168,71,.05)) !important;
}

#gmh .gmh-path-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

#gmh .gmh-path-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--gld) !important;
    border: 1px solid var(--bdrg) !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    align-self: flex-start !important;
    background: transparent !important;
}
#gmh .gmh-path-pill.dim {
    color: var(--dim) !important;
    border-color: var(--bdr) !important;
}

#gmh .gmh-path-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: var(--gmh-fs-path-h3) !important;
    font-weight: 800 !important;
    color: var(--wht) !important;
    line-height: 1.25 !important;
}

#gmh .gmh-path-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    counter-reset: steps !important;
    flex: 1 !important;
}
#gmh .gmh-path-steps li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    font-size: var(--gmh-fs-path-step) !important;
    color: var(--txt) !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--bdr) !important;
    counter-increment: steps !important;
    line-height: 1.55 !important;
    list-style: none !important;
}
#gmh .gmh-path-steps li:last-child { border-bottom: none !important; }
#gmh .gmh-path-steps li::before {
    content: counter(steps) !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: var(--bgc) !important;
    border: 1.5px solid var(--bdrg) !important;
    color: var(--gld) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
}
#gmh .gmh-path-membre .gmh-path-steps li::before {
    border-color: var(--bdr) !important;
    color: var(--dim) !important;
}

/* ══ CTA FINAL ══════════════════════════════════════════════ */
#gmh .gmh-cta-final {
    padding: 110px 0 !important;
    background: var(--bg) !important;
}

#gmh .gmh-cta-box {
    position: relative !important;
    overflow: hidden !important;
    background: var(--bgc) !important;
    border: 1px solid var(--bdrg) !important;
    border-radius: 20px !important;
    padding: 90px 60px !important;
    text-align: center !important;
}
#gmh .gmh-cta-glow {
    position: absolute !important;
    top: -100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 700px !important;
    height: 350px !important;
    background: radial-gradient(ellipse, rgba(212,168,71,.1) 0%, transparent 65%) !important;
    pointer-events: none !important;
}
#gmh .gmh-cta-box h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(1.4rem, 4vw, var(--gmh-fs-cta-h2)) !important;
    font-weight: 800 !important;
    color: var(--wht) !important;
    margin-bottom: 16px !important;
    position: relative !important;
    letter-spacing: -.01em !important;
    line-height: 1.2 !important;
}
#gmh .gmh-cta-box p {
    font-size: var(--gmh-fs-cta-p) !important;
    color: var(--dim) !important;
    max-width: 460px !important;
    margin: 0 auto 44px !important;
    line-height: 1.75 !important;
    position: relative !important;
}
#gmh .gmh-cta-btns {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    position: relative !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
    #gmh .gmh-feat-grid  { grid-template-columns: 1fr 1fr !important; }
    #gmh .gmh-paths-grid { grid-template-columns: 1fr !important; }
    #gmh .gmh-stat-item  { padding: 0 24px !important; }
}
@media (max-width: 640px) {
    #gmh .gmh-feat-grid  { grid-template-columns: 1fr !important; }
    #gmh .gmh-wrap       { padding: 0 20px !important; }
    #gmh .gmh-features, #gmh .gmh-paths, #gmh .gmh-cta-final { padding: 70px 0 !important; }
    #gmh .gmh-cta-box    { padding: 52px 24px !important; }
    #gmh .gmh-path-card  { padding: 32px 24px !important; }
    #gmh .gmh-stats-bar  { flex-direction: column !important; gap: 20px !important; padding: 28px 40px !important; border-radius: 20px !important; }
    #gmh .gmh-stat-sep   { width: 80px !important; height: 1px !important; }
}