/* ============================================================================
   LE ZAAP — pages par jeu, fiches serveurs et pages d'information
   Aligne ces pages autonomes sur la refonte, avec un thème par jeu
   (html[data-lz-jeu] posé par mu-plugins/lezaap-landing.php).
   ========================================================================== */
:root:root {
    --j1: #ff7a1a; --j2: #7fd34e; --j1-clair: #ffb26b;
    --j-fond: #100e0c; --j-carte: #181512; --j-carte-2: #1d1915;
    --j-icone: none;
    --lz-bg: var(--j-fond); --lz-card: var(--j-carte); --lz-line: #2c2722; --lz-text: #f6efe5; --lz-muted: #ab9f90; --lz-accent: var(--j1);
    --p-bg: var(--j-fond); --p-panel: var(--j-carte); --p-line: #2c2722; --p-text: #f6efe5; --p-muted: #ab9f90; --p-accent: var(--j1);
}
:root:root[data-lz-jeu="retro"] {
    --j1: #f2a23a; --j2: #d4643a; --j1-clair: #ffd28f;
    --j-fond: #120d08; --j-carte: #1b140d; --j-carte-2: #221910;
    --j-icone: url("/wp-content/plugins/xixou-social/assets/icons/games/retro.svg");
}
:root:root[data-lz-jeu="dofus"] {
    --j1: #ff7a1a; --j2: #7fd34e; --j1-clair: #ffb26b;
    --j-icone: url("/wp-content/plugins/xixou-social/assets/icons/games/dofus3.svg");
}
:root:root[data-lz-jeu="touch"] {
    --j1: #2fc4d6; --j2: #ff9a3c; --j1-clair: #9be9f2;
    --j-fond: #0b1012; --j-carte: #121a1d; --j-carte-2: #162125;
    --j-icone: url("/wp-content/plugins/xixou-social/assets/icons/games/touch.svg");
}
:root:root[data-lz-jeu="wakfu"] {
    --j1: #2cc3a8; --j2: #a3d65c; --j1-clair: #9cf0dc;
    --j-fond: #0a1110; --j-carte: #111b19; --j-carte-2: #15221f;
    --j-icone: url("/wp-content/plugins/xixou-social/assets/icons/games/wakfu.svg");
}
:root:root:is([data-lz-jeu="touch"], [data-lz-jeu="wakfu"]) { --lz-line: #23302f; --p-line: #23302f; --lz-muted: #9fb0ad; --p-muted: #9fb0ad; }

/* ---------- fond, typographie ---------- */
html { background: var(--j-fond) !important; }
html body {
    background:
        radial-gradient(1000px 560px at 85% -12%, color-mix(in srgb, var(--j1) 20%, transparent), transparent 68%),
        radial-gradient(800px 600px at -10% 40%, color-mix(in srgb, var(--j2) 9%, transparent), transparent 70%),
        var(--j-fond) !important;
    background-attachment: fixed !important;
    font-family: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
/* grille très légère en filigrane */
html body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(900px 600px at 70% 0%, #000, transparent 75%); mask-image: radial-gradient(900px 600px at 70% 0%, #000, transparent 75%);
}
html body :is(.lz-page, .lz-info) { position: relative; z-index: 1; }
html body :is(h1, h2, h3, summary) { font-family: -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -.02em; }
html body a { color: var(--j1); }

/* ---------- en-tête : logo « Z », barre vitrée collante ---------- */
html body :is(.lz-nav, .lz-info-nav) {
    position: sticky; top: 12px; z-index: 5; flex-wrap: nowrap;
    padding: 10px 10px 10px 14px; border-radius: 18px;
    background: color-mix(in srgb, var(--j-carte) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8);
}
html body :is(.lz-brand, .lz-info-brand) { white-space: nowrap; flex-shrink: 0; font-size: 19px !important; }
html body :is(.lz-brand, .lz-info-brand) img { content: url("/wp-content/lezaap-refonte/lz-logo.svg"); width: 38px !important; height: 38px !important; border-radius: 11px; }

/* ---------- boutons ---------- */
html body :is(.lz-cta, .lz-info-cta, .lz-contact button, .lz-auth-actions a:first-child) {
    background: linear-gradient(135deg, var(--j1-clair) -30%, var(--j1) 45%, color-mix(in srgb, var(--j1) 75%, #000) 120%) !important;
    color: #0d0905 !important; border: 0 !important; white-space: nowrap; font-weight: 800 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 28px -12px color-mix(in srgb, var(--j1) 90%, transparent);
    transition: transform .15s, filter .15s, box-shadow .15s;
}
html body :is(.lz-cta, .lz-info-cta, .lz-contact button):hover { filter: brightness(1.07); transform: translateY(-1px); text-decoration: none; }
html body .lz-secondary { border-radius: 14px !important; border-color: rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .04); color: var(--lz-text) !important; }
html body .lz-secondary:hover { border-color: var(--j1) !important; text-decoration: none; }

/* ---------- héros : grande icône du jeu en halo ---------- */
html body .lz-hero { position: relative; max-width: none !important; padding: 18px 0 8px; }
html[data-lz-jeu] body .lz-hero::after {
    content: ""; position: absolute; right: -10px; top: -30px; width: 340px; height: 340px; z-index: -1; pointer-events: none;
    background: var(--j-icone) center / 62% no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--j1) 28%, transparent), transparent);
    opacity: .9; filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--j1) 40%, transparent));
}
html body :is(.lz-hero h1, .lz-info h1) {
    background: linear-gradient(100deg, #fffaf2 25%, var(--j1-clair) 70%, var(--j1));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -.04em !important; max-width: 760px;
}
html body :is(.lz-eyebrow, .lz-info-kicker, .lz-server-kicker) {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    color: var(--j1-clair) !important; background: color-mix(in srgb, var(--j1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--j1) 30%, transparent);
    font-size: 11.5px !important; letter-spacing: .12em !important;
}
html body :is(.lz-eyebrow, .lz-info-kicker)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--j1); box-shadow: 0 0 10px var(--j1); }
html body .lz-hero p { max-width: 640px; }

/* ---------- cartes vitrées à liseré en dégradé ---------- */
html body :is(.lz-card, .lz-faq, .lz-server-hero, .lz-ankama-status, .lz-info-card, .lz-contact-grid > a) {
    border: 1px solid transparent !important; border-radius: 22px !important;
    background:
        linear-gradient(180deg, var(--j-carte-2), var(--j-carte)) padding-box,
        linear-gradient(140deg, color-mix(in srgb, var(--j1) 60%, transparent), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .05) 62%, color-mix(in srgb, var(--j2) 40%, transparent)) border-box !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 50px -30px rgba(0, 0, 0, .95) !important;
}
html body .lz-card { position: relative; overflow: hidden; transition: transform .2s; }
html body .lz-card:hover { transform: translateY(-3px); }
html body .lz-grid .lz-card::before {
    content: ""; display: block; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 13px;
    box-shadow: 0 10px 24px -10px var(--j1);
}
html body .lz-grid .lz-card:nth-child(1)::before { background: var(--j1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23120a03' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18 14.6c2 .8 3.2 2.6 3.6 5.4'/%3E%3C/svg%3E") center / 22px no-repeat; }
html body .lz-grid .lz-card:nth-child(2)::before { background: var(--j1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23120a03' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E") center / 22px no-repeat; }
html body .lz-grid .lz-card:nth-child(3)::before { background: var(--j1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23120a03' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 8a4.3 4.3 0 0 1 7.5 2.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / 22px no-repeat; }
html body .lz-card a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--j1-clair) !important; }

/* ---------- fiche serveur ---------- */
html body .lz-server-hero { padding: 28px 30px !important; }
html body .lz-server-hero::after { border-color: color-mix(in srgb, var(--j1) 14%, transparent) !important; box-shadow: 0 0 0 26px color-mix(in srgb, var(--j1) 4%, transparent) !important; }
html body .lz-server-game { border-color: color-mix(in srgb, var(--j1) 35%, transparent) !important; background: color-mix(in srgb, var(--j1) 12%, transparent) !important; color: var(--j1-clair) !important; }
html body :is(.lz-server-metrics div, .lz-ankama-server, .lz-ankama-status-list article) { border-color: rgba(255, 255, 255, .07) !important; background: rgba(255, 255, 255, .03) !important; border-radius: 14px !important; }
html body .lz-server-quicklinks a { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--lz-text) !important; }
html body .lz-server-quicklinks a:hover { border-color: var(--j1); text-decoration: none; }

/* ---------- liste des serveurs : cartes ---------- */
html body .lz-servers h2, html body .lz-info-section > h2 { display: flex; align-items: center; gap: 12px; }
html body .lz-servers h2::after, html body .lz-info-section > h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--j1) 50%, transparent), transparent); }
html body .lz-server-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px !important; }
html body :is(.lz-server-list a, .lz-server-list a.lz-server-link, .lz-server) {
    border-radius: 16px !important; background: linear-gradient(180deg, var(--j-carte-2), var(--j-carte)) !important; border: 1px solid rgba(255, 255, 255, .07) !important;
    transition: transform .15s, border-color .15s;
}
html body :is(.lz-server-list a, .lz-server-list a.lz-server-link):hover { border-color: var(--j1) !important; transform: translateY(-2px); text-decoration: none; }

/* ---------- FAQ en accordéon ---------- */
html body .lz-faq details { padding: 16px 0 !important; border-top-color: rgba(255, 255, 255, .07) !important; }
html body .lz-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
html body .lz-faq summary::-webkit-details-marker { display: none; }
html body .lz-faq summary::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
    background: color-mix(in srgb, var(--j1) 14%, transparent); color: var(--j1-clair); font-size: 18px; font-weight: 700; transition: transform .2s;
}
html body .lz-faq details[open] summary::after { transform: rotate(45deg); }

/* ---------- états des serveurs Ankama ---------- */
html body :is(.lz-ankama-status-dot, .lz-ankama-server i, .lz-live-dot) { background: #6fd66a; }
html body .is-alert :is(.lz-ankama-status-dot, i) { background: #ffad55; }

/* ---------- liens de bas de page ---------- */
html body .lz-links { gap: 8px !important; border-top-color: rgba(255, 255, 255, .07) !important; }
html body .lz-links a { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); color: #e2d8ca; }
html body .lz-links a:hover { border-color: var(--j1); color: var(--j1-clair); text-decoration: none; }
html body :is(.lz-footer, .lz-info-footer) { border-top-color: rgba(255, 255, 255, .07) !important; }
html body .lz-info-footer a:hover { color: var(--j1); }
/* sections masquées dans le menu (mode essentiel) : pas de lien vers elles */
html body :is(.lz-links, .lz-server-quicklinks) a:is([href*="xs_view=market"], [href*="xs_view=artisans"], [href*="xs_view=events"], [href*="xs_view=challenges"]) { display: none !important; }

/* ---------- pages d'information ---------- */
html body .lz-info-notice { border-color: color-mix(in srgb, var(--j1) 28%, transparent) !important; background: color-mix(in srgb, var(--j1) 7%, transparent) !important; border-radius: 14px !important; }
html body .lz-legal { gap: 6px !important; }
html body .lz-legal h2 { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06); }
html body :is(.lz-contact input, .lz-contact select, .lz-contact textarea, .lz-deletion input[type=text]) { background-color: rgba(0, 0, 0, .35) !important; border-color: rgba(255, 255, 255, .1) !important; border-radius: 13px !important; font-size: 15px !important; }
html body :is(.lz-contact input, .lz-contact select, .lz-contact textarea):focus { border-color: var(--j1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--j1) 18%, transparent) !important; }
html body .lz-contact select {
    appearance: none; -webkit-appearance: none; padding-right: 40px !important; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffb26b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 15px center !important;
}
html body .lz-contact label { font-size: 13px !important; }
html body .lz-cancel-button { border-color: var(--j1) !important; background: color-mix(in srgb, var(--j1) 10%, transparent) !important; color: var(--j1) !important; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    html body :is(.lz-page, .lz-info) { padding: 12px 14px 48px !important; }
    html body :is(.lz-nav, .lz-info-nav) { margin-bottom: 34px !important; top: 8px; gap: 10px; }
    html body :is(.lz-cta, .lz-info-cta) { padding: 10px 14px !important; font-size: 14px; }
    html[data-lz-jeu] body .lz-hero::after { width: 110px; height: 110px; right: -14px; top: -34px; opacity: .3; }
    html body .lz-actions > a { flex: 1 1 auto; justify-content: center; }
    html body .lz-server-hero { padding: 22px 18px !important; }
}