/* ╔════════════════════════════════════════════════════════════════════════╗ ║ GUILD PREMIUM — refonte COMPLÈTE de l'UI Guilde, repensée de 0. ║ ║ Même identité que le header + menu de gauche (v1177→1181) : ║ ║ violet-noir glassy + or raffiné, typographie fine, cartes en verre. ║ ║ Chargé en DERNIER → scopé `#panel-guilde` (+ #guild-create-modal pour ║ ║ la modale qui rend dans ) avec !important → gagne sur guild-v2, ║ ║ style.css, le bloc mobile ET les styles inline. On NE touche PAS au JS ║ ║ (logique IDs/online-offline fragile) : 100% reskin CSS. ║ ║ Données dynamiques préservées : var(--cc)/--c (couleur de rang), ║ ║ largeur .mg-xp-fill, couleurs de classe, podium or/argent/bronze. ║ ╚════════════════════════════════════════════════════════════════════════╝ */ #panel-guilde{ /* Palette premium guilde */ --gp-bg0:#15111d; --gp-bg1:#0d0a14; --gp-card:linear-gradient(180deg,rgba(33,27,46,.62),rgba(15,12,22,.74)); --gp-card-hi:linear-gradient(180deg,rgba(44,36,60,.7),rgba(18,14,26,.78)); --gp-line:rgba(212,167,71,.17); --gp-line-2:rgba(212,167,71,.34); --gp-gold:#ffd874; --gp-gold-2:#ffe6a8; --gp-gold-deep:#caa044; --gp-gold-br:#d4a747; --gp-grad-gold:linear-gradient(135deg,#ffe07a,#d4a040); --gp-grad-text:linear-gradient(180deg,#fff6dd,#ffd874 48%,#caa044); --gp-txt:#e9e0cb; --gp-soft:#b7ac90; --gp-mute:#8c7f60; --gp-green:#7ad88a; --gp-red:#ff8e7d; --gp-blue:#8ec6ff; --gp-purple:#cbb6f2; } /* ───────────────── BASE PANEL ───────────────── */ #panel-guilde.panel{ background:linear-gradient(180deg,var(--gp-bg0),var(--gp-bg1)) !important; } #panel-guilde .guild-page, #panel-guilde .mg-page{ background:transparent !important;border:none !important;box-shadow:none !important; /* v1210 — PLEINE LARGEUR garantie : width:100% + box-sizing battent le max-width:1400px de guild-v2.css même sur écran étroit ; le contenu (grilles auto-fit) s'étale alors sur toute la largeur (plus de colonne centrée à 1400px). */ padding:16px 26px !important;max-width:none !important;width:100% !important;margin:0 !important;box-sizing:border-box !important; } #panel-guilde ::-webkit-scrollbar{width:7px;height:7px} #panel-guilde ::-webkit-scrollbar-thumb{background:rgba(212,167,71,.26);border-radius:4px} #panel-guilde ::-webkit-scrollbar-track{background:transparent} /* ───────────────── SÉLECTEUR DE PERSO (gcs) ───────────────── */ #panel-guilde .guild-char-selector{ background:linear-gradient(180deg,rgba(26,21,34,.7),rgba(13,11,19,.8)) !important; border:1px solid var(--gp-line) !important;border-bottom:1px solid var(--gp-line) !important; border-radius:14px !important;box-shadow:0 8px 24px rgba(0,0,0,.4) !important; padding:11px 16px !important;margin-bottom:14px !important; } #panel-guilde .gcs-label{color:var(--gp-gold) !important;letter-spacing:1.4px !important} #panel-guilde .gcs-tab{ background:rgba(255,255,255,.035) !important;border:1.5px solid transparent !important; border-radius:12px !important;transition:transform .15s,border-color .15s,background .15s !important; } #panel-guilde .gcs-tab:hover{background:rgba(255,214,116,.08) !important;transform:translateY(-2px)} #panel-guilde .gcs-tab.sel{ background:linear-gradient(180deg,rgba(255,214,116,.16),rgba(0,0,0,.25)) !important; box-shadow:0 0 0 1px rgba(255,214,116,.4),0 6px 18px rgba(0,0,0,.4) !important; } #panel-guilde .gcs-tab.in-guild{border-left-color:var(--gp-purple) !important} #panel-guilde .gcs-avatar{border:2px solid rgba(255,214,116,.3) !important;background:#1a1424 !important} #panel-guilde .gcs-status{color:var(--gp-soft) !important} /* ════════════════ VUE MARKETING (sans guilde) ════════════════ */ /* Héros marketing (gh-) */ #panel-guilde .guild-hero{ background:linear-gradient(135deg,#241a36 0%,#170f24 58%,#0e0a16 100%) !important; border:1px solid var(--gp-line-2) !important;border-radius:18px !important; box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,170,.12) !important; position:relative !important;overflow:hidden !important;padding:24px 26px !important; } #panel-guilde .gh-bg{ background:radial-gradient(60% 120% at 12% 0%,rgba(255,200,90,.16),transparent 60%), radial-gradient(50% 120% at 100% 100%,rgba(150,90,230,.16),transparent 60%) !important; } #panel-guilde .gh-emblem{ font-size:46px !important;background:radial-gradient(circle at 42% 36%,rgba(255,214,116,.4),rgba(0,0,0,.25)) !important; border:2px solid rgba(255,214,116,.5) !important;border-radius:50% !important; filter:drop-shadow(0 4px 16px rgba(255,200,80,.4)) !important;width:84px !important;height:84px !important; display:flex !important;align-items:center !important;justify-content:center !important; } #panel-guilde .gh-title{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important; color:transparent !important;font-weight:900 !important;letter-spacing:.5px !important; } #panel-guilde .gh-sub{color:var(--gp-soft) !important} #panel-guilde .gh-tag{ background:rgba(255,255,255,.05) !important;border:1px solid var(--gp-line) !important; color:#d8cba8 !important;border-radius:999px !important; } #panel-guilde .gh-status-pill{ background:linear-gradient(135deg,rgba(60,200,110,.2),rgba(10,40,22,.5)) !important; border:1px solid rgba(90,220,140,.4) !important;color:#9fe9b4 !important;border-radius:999px !important; } #panel-guilde .gh-pulse{background:#6ee29a !important;box-shadow:0 0 8px #6ee29a !important} /* Onglets marketing (guild-tabs/guild-tab) — segmented premium */ #panel-guilde .guild-tabs{ background:linear-gradient(180deg,rgba(26,21,34,.66),rgba(13,11,19,.74)) !important; border:1px solid var(--gp-line) !important;border-radius:14px !important; padding:8px !important;gap:6px !important;margin:14px 0 !important; } #panel-guilde .guild-tab{ background:transparent !important;border:1px solid transparent !important;border-radius:10px !important; color:var(--gp-soft) !important;font-weight:700 !important;transition:all .16s !important; } #panel-guilde .guild-tab:hover{background:rgba(255,214,116,.07) !important;color:var(--gp-gold-2) !important} #panel-guilde .guild-tab.active{ background:var(--gp-grad-gold) !important;border-color:transparent !important;color:#231603 !important; box-shadow:0 6px 18px rgba(212,160,64,.4) !important; } /* Spotlight (gsl-) */ #panel-guilde .guild-spotlight .gsl-banner, #panel-guilde .gsl-card{ background:linear-gradient(135deg,#241a36,#140f20) !important; border:1px solid var(--gp-line-2) !important;border-radius:16px !important; box-shadow:0 14px 40px rgba(0,0,0,.5) !important;overflow:hidden !important; } #panel-guilde .gsl-banner-bg{ background:radial-gradient(60% 140% at 0% 0%,rgba(255,200,90,.18),transparent 55%), radial-gradient(60% 140% at 100% 100%,rgba(150,90,230,.18),transparent 55%) !important; } #panel-guilde .gsl-banner-emblem{filter:drop-shadow(0 4px 16px rgba(255,200,80,.45)) !important} #panel-guilde .gsl-banner-pre{color:var(--gp-gold-deep) !important;letter-spacing:3px !important} #panel-guilde .gsl-banner-h1{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important; color:transparent !important; } #panel-guilde .gsl-banner-h2{color:var(--gp-txt) !important} #panel-guilde .gsl-banner-perks span{ background:rgba(255,255,255,.05) !important;border:1px solid var(--gp-line) !important; color:#d8cba8 !important;border-radius:999px !important; } /* Cartes stats marketing (guild-stats/gsc) */ #panel-guilde .guild-stat-card{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; transition:transform .15s,border-color .15s,box-shadow .15s !important; } #panel-guilde .guild-stat-card:hover{ transform:translateY(-3px) !important;border-color:var(--gp-line-2) !important; box-shadow:0 10px 26px rgba(0,0,0,.4) !important; } #panel-guilde .gsc-num{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important; color:transparent !important; } #panel-guilde .gsc-lbl{color:var(--gp-gold-deep) !important} #panel-guilde .gsc-sub{color:var(--gp-mute) !important} /* Classement marketing (glb-) */ #panel-guilde .guild-leaderboard{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .glb-title{color:var(--gp-gold) !important} #panel-guilde .glb-row{border-bottom:1px solid rgba(255,255,255,.05) !important} #panel-guilde .glb-head{color:var(--gp-mute) !important} #panel-guilde .glb-row:not(.glb-head):hover{background:rgba(255,214,116,.05) !important} #panel-guilde .glb-empty-text{color:var(--gp-soft) !important} /* CTA création */ #panel-guilde .guild-cta-btn{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.3)) !important; border:1px solid var(--gp-line-2) !important;color:var(--gp-gold-2) !important;border-radius:12px !important; transition:transform .15s,box-shadow .15s,filter .15s !important; } #panel-guilde .guild-cta-btn.primary{ background:var(--gp-grad-gold) !important;border:none !important;color:#231603 !important; box-shadow:0 10px 26px rgba(212,160,64,.45) !important; } #panel-guilde .guild-cta-btn:hover{transform:translateY(-2px);filter:brightness(1.05)} #panel-guilde .guild-cta-btn[disabled]{opacity:.45 !important;filter:grayscale(.5) !important;transform:none !important} /* Liste des guildes à rejoindre (gls-) */ #panel-guilde .guild-list-section{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; padding:16px 18px !important;margin-top:14px !important; } #panel-guilde .gls-title{color:var(--gp-gold) !important} #panel-guilde .gls-item{ background:rgba(255,255,255,.035) !important;border:1px solid var(--gp-line) !important; border-radius:12px !important;transition:border-color .15s,background .15s !important; } #panel-guilde .gls-item:hover{border-color:var(--gp-line-2) !important;background:rgba(255,214,116,.05) !important} #panel-guilde .gls-name{color:var(--gp-txt) !important;font-weight:800 !important} #panel-guilde .gls-item small{color:var(--gp-soft) !important} #panel-guilde .gls-req-btn{ background:linear-gradient(180deg,rgba(255,214,116,.14),rgba(0,0,0,.25)) !important; border:1px solid var(--gp-line-2) !important;color:var(--gp-gold-2) !important; border-radius:9px !important;font-weight:800 !important;cursor:pointer;transition:all .15s !important; } #panel-guilde .gls-req-btn:hover:not(:disabled){background:rgba(255,214,116,.22) !important;transform:translateY(-1px)} #panel-guilde .gls-req-btn:disabled{opacity:.5 !important;cursor:not-allowed} /* Fonctionnalités (guild-feat/gf-) */ #panel-guilde .guild-feat{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; transition:transform .15s,border-color .15s,box-shadow .15s !important; } #panel-guilde .guild-feat:hover{ transform:translateY(-3px) !important;border-color:var(--gp-line-2) !important; box-shadow:0 12px 30px rgba(0,0,0,.42) !important; } #panel-guilde .gf-ico{filter:drop-shadow(0 2px 8px rgba(255,200,80,.3)) !important} #panel-guilde .gf-name{color:var(--gp-gold-2) !important} #panel-guilde .gf-desc{color:var(--gp-soft) !important} #panel-guilde .gf-cost{ background:rgba(0,0,0,.3) !important;border:1px solid var(--gp-line) !important;color:#f0c98a !important;border-radius:7px !important; } /* Roadmap (grm-) */ #panel-guilde .guild-roadmap{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .guild-roadmap h3{color:var(--gp-gold) !important;border-bottom-color:var(--gp-line) !important} #panel-guilde .grm-phase{color:var(--gp-gold-2) !important} #panel-guilde .grm-desc{color:var(--gp-soft) !important} #panel-guilde .grm-dot{ background:rgba(255,255,255,.06) !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold) !important; } #panel-guilde .grm-step.done .grm-dot{ background:linear-gradient(135deg,#6ee29a,#2f9e5c) !important;border-color:transparent !important;color:#062012 !important; } /* Hiérarchie (ghv3-) — organigramme + matrice */ #panel-guilde .ghv3{ background:linear-gradient(180deg,rgba(30,24,42,.6),rgba(14,11,21,.72)) !important; border:1px solid var(--gp-line) !important;border-radius:16px !important; box-shadow:0 12px 34px rgba(0,0,0,.42) !important; } #panel-guilde .ghv3-eyebrow{ background:rgba(255,214,116,.1) !important;border:1px solid var(--gp-line) !important;color:var(--gp-gold) !important; } #panel-guilde .ghv3-section-head{border-bottom-color:var(--gp-line) !important} #panel-guilde .ghv3-section-head h2{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } #panel-guilde .ghv3-section-head p{color:var(--gp-soft) !important} #panel-guilde .ghv3-rc-body{ background:linear-gradient(180deg,rgba(40,32,56,.55),rgba(16,12,24,.7)) !important; } #panel-guilde .ghv3-rc-icon{background:#160f22 !important} #panel-guilde .ghv3-perm-pill{ background:rgba(255,255,255,.04) !important;border:1px solid var(--gp-line) !important;color:#d8c8a8 !important; } #panel-guilde .ghv3-perm-matrix{ background:rgba(13,10,20,.6) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .ghv3-pm-head{ background:linear-gradient(180deg,rgba(255,214,116,.08),rgba(0,0,0,.2)) !important; border-bottom:1.5px solid var(--gp-line-2) !important; } #panel-guilde .ghv3-pm-row{border-bottom:1px solid rgba(255,255,255,.04) !important} #panel-guilde .ghv3-pm-row:hover{background:rgba(255,214,116,.05) !important} #panel-guilde .ghv3-pm-permcol{color:var(--gp-txt) !important} #panel-guilde .ghv3-pm-cell.is-off{ background:rgba(255,255,255,.03) !important;color:var(--gp-mute) !important;border:1px dashed rgba(255,255,255,.1) !important; } /* ════════════════ MA GUILDE — HÉROS ════════════════ */ #panel-guilde .mg-hero{ background:linear-gradient(135deg,#241a36 0%,#170f24 56%,#0e0a16 100%) !important; border:1px solid var(--gp-line-2) !important;border-radius:18px !important; box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,170,.12) !important; position:relative !important;overflow:hidden !important;padding:22px 24px !important; } #panel-guilde .mg-hero-bg{ background:radial-gradient(55% 120% at 10% 0%,rgba(255,200,90,.16),transparent 58%), radial-gradient(50% 120% at 100% 100%,rgba(150,90,230,.16),transparent 58%) !important; } #panel-guilde .mg-emblem{ width:74px !important;height:74px !important;font-size:40px !important; background:radial-gradient(circle at 42% 36%,rgba(255,214,116,.42),rgba(0,0,0,.25)) !important; border:2px solid rgba(255,214,116,.5) !important; filter:drop-shadow(0 4px 16px rgba(255,200,80,.42)) !important; } #panel-guilde .mg-name{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important; color:transparent !important;letter-spacing:.5px !important; } #panel-guilde .mg-motto{color:var(--gp-soft) !important} #panel-guilde .mg-tags span{ background:rgba(255,255,255,.05) !important;border:1px solid var(--gp-line) !important; color:#d8cba8 !important;border-radius:999px !important; } #panel-guilde .mg-level{ background:linear-gradient(180deg,rgba(44,36,60,.6),rgba(16,12,24,.72)) !important; border:1px solid var(--gp-line-2) !important;border-radius:14px !important; box-shadow:inset 0 1px 0 rgba(255,236,170,.1) !important; } #panel-guilde .mg-level-num{color:var(--gp-soft) !important} #panel-guilde .mg-level-num b{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } #panel-guilde .mg-xp-bar{ background:rgba(0,0,0,.45) !important;border:1px solid var(--gp-line) !important;border-radius:999px !important; } #panel-guilde .mg-xp-fill{ background:linear-gradient(90deg,#caa044,#ffe07a) !important; box-shadow:0 0 12px rgba(255,200,80,.45) !important;border-radius:999px !important; } #panel-guilde .mg-xp-text{color:var(--gp-soft) !important} #panel-guilde .mg-header-text-wrap{ background:rgba(255,255,255,.035) !important;border:none !important; border-left:3px solid var(--gp-gold-br) !important;border-radius:0 10px 10px 0 !important;margin-top:14px !important; } #panel-guilde .mg-header-text{color:var(--gp-gold-2) !important} #panel-guilde .mg-header-text-edit{ background:rgba(255,214,116,.16) !important;border-radius:8px !important;color:var(--gp-gold) !important;transition:all .18s !important; } #panel-guilde .mg-header-text-edit:hover{background:var(--gp-grad-gold) !important;color:#231603 !important} /* Onglets ma guilde (mg-tabs/mg-tab) — segmented premium */ #panel-guilde .mg-tabs{ background:linear-gradient(180deg,rgba(26,21,34,.66),rgba(13,11,19,.74)) !important; border:1px solid var(--gp-line) !important;border-radius:14px !important;padding:8px !important;gap:6px !important; } #panel-guilde .mg-tab{ background:transparent !important;border:1.5px solid transparent !important;border-radius:10px !important; color:var(--gp-soft) !important;font-weight:700 !important;transition:all .16s !important; } #panel-guilde .mg-tab:hover{background:rgba(255,214,116,.07) !important;color:var(--gp-gold-2) !important} #panel-guilde .mg-tab.active{ background:var(--gp-grad-gold) !important;border-color:transparent !important;color:#231603 !important; box-shadow:0 6px 18px rgba(212,160,64,.4) !important; } #panel-guilde .mg-tab-badge{ background:linear-gradient(135deg,#6ee29a,#2f9e5c) !important;color:#062012 !important; } /* Titres de section */ #panel-guilde .mg-section-title{ color:var(--gp-gold) !important;border-bottom:1px solid var(--gp-line) !important; font-weight:800 !important;letter-spacing:.4px !important; } /* Bonus (mg-bonuses/mgb) */ #panel-guilde .mg-bonus-card{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; transition:transform .15s,border-color .15s !important; } #panel-guilde .mg-bonus-card:hover{transform:translateY(-3px) !important;border-color:var(--gp-line-2) !important} #panel-guilde .mgb-num{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } #panel-guilde .mgb-lbl{color:var(--gp-soft) !important} /* Boîtes info */ #panel-guilde .mg-info{ background:rgba(255,255,255,.03) !important;border:1px solid var(--gp-line) !important; border-radius:10px !important;color:var(--gp-soft) !important; } #panel-guilde .mg-info b{color:var(--gp-gold-2) !important} /* ════════════════ MEMBRES (mghv2) ════════════════ */ #panel-guilde .mghv2-statsbar{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .mghv2-stat b{ background:var(--gp-grad-text) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } #panel-guilde .mghv2-stat span{color:var(--gp-soft) !important} #panel-guilde .mghv2-requests{ background:linear-gradient(180deg,rgba(60,110,180,.14),rgba(14,18,30,.6)) !important; border:1px solid rgba(130,180,255,.34) !important;border-radius:14px !important; } #panel-guilde .mghv2-request{ background:rgba(0,0,0,.3) !important;border:1px solid rgba(130,180,255,.22) !important;border-radius:10px !important; } #panel-guilde .mghv2-req-avatar{border:2px solid rgba(130,180,255,.45) !important;background:#141826 !important} #panel-guilde .mghv2-btn-accept{background:linear-gradient(135deg,#6ee29a,#2f9e5c) !important;color:#062012 !important} #panel-guilde .mghv2-btn-reject{background:linear-gradient(135deg,#e0604a,#8a1e18) !important;color:#fff0ec !important} #panel-guilde .mghv2-rank-section{ background:rgba(14,11,20,.55) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .mghv2-rank-head{ background:linear-gradient(180deg,rgba(255,214,116,.09),rgba(0,0,0,.18)) !important; border-bottom:1px solid var(--gp-line) !important; } #panel-guilde .mghv2-rank-head h3{color:var(--gp-gold) !important} #panel-guilde .mghv2-rank-count{ background:rgba(0,0,0,.35) !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold) !important; } #panel-guilde .mghv2-rank-perms span{ background:rgba(255,255,255,.04) !important;border:1px solid var(--gp-line) !important;color:#cdbf9e !important;border-radius:6px !important; } /* Carte membre — garde var(--cc) pour la couleur de classe/rang */ #panel-guilde .mghv2-card{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important; border-left:3px solid var(--cc,var(--gp-gold-deep)) !important;border-radius:13px !important; transition:transform .15s,box-shadow .15s !important; } #panel-guilde .mghv2-card:hover{transform:translateY(-2px) !important;box-shadow:0 10px 26px rgba(0,0,0,.4) !important} #panel-guilde .mghv2-card.is-me{ background:linear-gradient(180deg,rgba(60,150,90,.14),rgba(15,12,22,.74)) !important; border-color:rgba(110,226,154,.4) !important; } #panel-guilde .mghv2-card-avatar{border:2px solid var(--cc,rgba(255,214,116,.4)) !important;background:#160f22 !important} #panel-guilde .mghv2-card-name{color:var(--gp-txt) !important} #panel-guilde .mghv2-me-tag{background:linear-gradient(135deg,#6ee29a,#2f9e5c) !important;color:#062012 !important} #panel-guilde .mghv2-card-stats{border-top:1px solid rgba(255,255,255,.06) !important;border-bottom:1px solid rgba(255,255,255,.06) !important} #panel-guilde .mghv2-card-stat b{color:var(--gp-gold) !important} #panel-guilde .mghv2-card-stat small{color:var(--gp-mute) !important} #panel-guilde .mghv2-act-btn{ background:rgba(255,214,116,.1) !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold-2) !important; border-radius:8px !important;transition:all .15s !important; } #panel-guilde .mghv2-act-btn:hover{background:rgba(255,214,116,.2) !important;transform:translateY(-1px)} #panel-guilde .mghv2-act-kick{ background:rgba(224,96,74,.14) !important;border-color:rgba(255,140,120,.4) !important;color:var(--gp-red) !important; } #panel-guilde .mghv2-act-kick:hover{background:rgba(224,96,74,.26) !important} #panel-guilde .mghv2-card-settings{ background:rgba(0,0,0,.4) !important;border:1px solid var(--gp-line) !important;border-radius:8px !important; } #panel-guilde .mghv2-set-row label{color:var(--gp-gold-deep) !important} #panel-guilde .mghv2-set-row input[type="number"], #panel-guilde .mghv2-set-row select{ background:#120e1c !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold-2) !important;border-radius:7px !important; } #panel-guilde .mghv2-pct{color:var(--gp-gold) !important} #panel-guilde .mghv2-empty-rank{color:var(--gp-mute) !important} /* Permissions (mgms / permv3) — déjà modernes : alignement palette */ #panel-guilde .mgms-perms-section, #panel-guilde .permv3{ background:linear-gradient(180deg,rgba(30,24,42,.55),rgba(14,11,21,.7)) !important; border:1px solid var(--gp-line) !important;border-radius:12px !important; } #panel-guilde .mgms-perms-title, #panel-guilde .permv3-head h4{color:var(--gp-gold) !important} #panel-guilde .permv3-rank-tag{background:rgba(255,214,116,.12) !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold) !important} #panel-guilde .permv3-card{background:rgba(255,255,255,.025) !important;border:1px solid var(--gp-line) !important;border-radius:10px !important} #panel-guilde .permv3-card-label{color:var(--gp-txt) !important} #panel-guilde .permv3-card-desc, #panel-guilde .mgms-perms-foot{color:var(--gp-mute) !important} #panel-guilde .mgms-perm-toggle{background:rgba(255,255,255,.025) !important;border-color:var(--gp-line) !important} #panel-guilde .mgms-perm-text b{color:var(--gp-txt) !important} /* ════════════════ BOUTIQUE (mg-shop) ════════════════ */ #panel-guilde .mg-shop-head{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .mg-shop-coffre{ background:rgba(0,0,0,.35) !important;border:1px solid var(--gp-line-2) !important;border-radius:12px !important; } #panel-guilde .mg-shop-coffre-label{color:var(--gp-gold-deep) !important} #panel-guilde .mg-shop-coffre-num{color:var(--gp-gold) !important} #panel-guilde .mg-shop-active{ background:linear-gradient(180deg,rgba(60,150,90,.14),rgba(14,20,16,.6)) !important; border:1px solid rgba(110,226,154,.34) !important;border-radius:12px !important; } #panel-guilde .mg-shop-active-title{color:var(--gp-green) !important} #panel-guilde .mg-shop-active-card{background:rgba(0,0,0,.3) !important;border:1px solid rgba(110,226,154,.26) !important} #panel-guilde .mg-shop-empty{background:rgba(255,255,255,.03) !important;border:1px dashed var(--gp-line-2) !important;color:var(--gp-soft) !important} #panel-guilde .mg-shop-item{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; transition:transform .15s,border-color .15s,box-shadow .15s !important; } #panel-guilde .mg-shop-item:hover{transform:translateY(-3px) !important;border-color:var(--gp-line-2) !important;box-shadow:0 12px 30px rgba(0,0,0,.42) !important} #panel-guilde .mg-shop-item.has-active{border-color:rgba(110,226,154,.45) !important;background:linear-gradient(180deg,rgba(60,150,90,.12),rgba(15,12,22,.74)) !important} #panel-guilde .mg-shop-item-name{color:var(--gp-gold-2) !important} #panel-guilde .mg-shop-item-dur{color:var(--gp-mute) !important} #panel-guilde .mg-shop-item-desc{color:var(--gp-soft) !important} #panel-guilde .mg-shop-item-foot{border-top:1px solid rgba(255,255,255,.06) !important} #panel-guilde .mg-shop-item-cost{color:var(--gp-gold) !important} #panel-guilde .mg-shop-buy{ background:var(--gp-grad-gold) !important;color:#231603 !important;border-radius:9px !important; box-shadow:0 4px 14px rgba(212,160,64,.34) !important; } #panel-guilde .mg-shop-buy:hover{transform:translateY(-1px)} #panel-guilde .mg-shop-buy:disabled{background:rgba(80,70,60,.5) !important;color:#8a7e6a !important;box-shadow:none !important} /* ════════════════ DONS (mg-donate / mg-chest / mg-perso-pct) ════════════════ */ #panel-guilde .mg-donate-block{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important;padding:14px 16px !important; } #panel-guilde .mg-pct-hint{color:var(--gp-soft) !important} #panel-guilde .mg-perso-pct-row{ background:rgba(0,0,0,.28) !important;border:1px solid var(--gp-line) !important;border-radius:11px !important; } #panel-guilde .mg-perso-pct-stats{color:var(--gp-soft) !important} #panel-guilde .mg-perso-pct-val{color:var(--gp-gold) !important} #panel-guilde .mgm-avatar{border:1px solid rgba(255,214,116,.3) !important;background:#160f22 !important} #panel-guilde .mg-chest{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .mg-chest-num b{color:var(--gp-gold) !important} #panel-guilde .mg-chest-sub{color:var(--gp-mute) !important} #panel-guilde .mg-donate-input{ background:#120e1c !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold-2) !important;border-radius:9px !important; } #panel-guilde .mg-preset-btn{ background:rgba(255,255,255,.04) !important;border:1px solid var(--gp-line) !important;color:var(--gp-soft) !important; border-radius:8px !important;transition:all .15s !important; } #panel-guilde .mg-preset-btn:hover{background:rgba(255,214,116,.12) !important;color:var(--gp-gold-2) !important} /* ════════════════ PERCEPTEURS — page REPENSÉE (v1185) ════════════════ */ /* La page percepteur est désormais 100% auto-portée : markup `pcx-*` + CSS INJECTÉ INLINE dans `_renderGuildPerceptors` (ui.js) → garanti visible sans dépendre du cache de cette feuille. Les anciennes classes mg-perceptor / mgp-* / mg-attack-* ne sont PLUS rendues (règles retirées). Le builder de personnalisation garde ses styles `#perceptor-builder .pcb-*` ci-dessous. */ /* ════════════════ PERSONNALISATION PERCEPTEUR — builder (#perceptor-builder, rend dans ) ════════════════ */ /* Hors #panel-guilde → on n'utilise PAS les custom props --gp-* (littéraux uniquement, sauf var(--sc) inline). */ #perceptor-builder .pcb-modal-v2{ background:linear-gradient(160deg,#1c1628,#100c18) !important;border:1px solid rgba(212,167,71,.34) !important; border-radius:18px !important;box-shadow:0 24px 70px rgba(0,0,0,.7) !important; } #perceptor-builder .pcb-head-v2{ background:linear-gradient(180deg,rgba(150,90,230,.2),rgba(20,14,30,.5)) !important; border-bottom:1px solid rgba(212,167,71,.3) !important; } #perceptor-builder .pcb-head-title{ background:linear-gradient(180deg,#fff6dd,#ffd874 48%,#caa044) !important; -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } #perceptor-builder .pcb-head-sub{color:#b7ac90 !important} #perceptor-builder .pcb-close-x{ background:rgba(0,0,0,.4) !important;border:1px solid rgba(212,167,71,.3) !important;color:#ffd874 !important;border-radius:9px !important; } #perceptor-builder .pcb-close-x:hover{background:rgba(224,96,74,.3) !important;color:#ff9a86 !important;border-color:rgba(255,140,120,.5) !important} #perceptor-builder .pcb-summary{background:rgba(0,0,0,.25) !important;border-bottom:1px solid rgba(212,167,71,.18) !important} #perceptor-builder .pcb-sum-cell{ background:linear-gradient(180deg,rgba(44,36,60,.5),rgba(16,12,24,.7)) !important; border:1px solid rgba(212,167,71,.16) !important;border-radius:11px !important; } #perceptor-builder .pcb-sum-lbl{color:#b7ac90 !important} #perceptor-builder .pcb-sum-val{color:#ffe6a8 !important} #perceptor-builder .pcb-sum-bar{background:rgba(0,0,0,.5) !important} #perceptor-builder .pcb-sum-bar-fill{background:linear-gradient(90deg,#caa044,#ffe07a) !important} #perceptor-builder .pcb-cost-hint{ background:rgba(255,200,80,.06) !important;border-bottom:1px solid rgba(212,167,71,.14) !important;color:#d8c8a0 !important; } #perceptor-builder .pcb-cost-hint b{color:#ffd874 !important} #perceptor-builder .pcb-col-title{color:#ffd874 !important;border-bottom:1px solid rgba(212,167,71,.24) !important} #perceptor-builder .pcb-row-v2{ background:linear-gradient(90deg,rgba(40,32,56,.5),rgba(16,12,24,.6)) !important; border-left:3px solid var(--sc,#caa044) !important;border-radius:10px !important; } #perceptor-builder .pcb-row-v2.spell{border-left-color:#c9b6f2 !important} #perceptor-builder .pcb-row-name{color:#ffe6a8 !important} #perceptor-builder .pcb-row-val b{color:#ffe6a8 !important} #perceptor-builder .pcb-spell-stars-mini{color:#ffd874 !important} #perceptor-builder .pcb-add-mini{ background:linear-gradient(180deg,#6ee29a,#2f9e5c) !important;border:1px solid rgba(130,240,170,.5) !important; color:#062012 !important;border-radius:8px !important; } #perceptor-builder .pcb-add-mini:hover:not(:disabled){filter:brightness(1.08) !important;transform:translateY(-1px) !important} #perceptor-builder .pcb-add-mini:disabled{opacity:.32 !important;background:rgba(40,32,24,.6) !important;border-color:rgba(120,100,60,.3) !important;color:#7a6e52 !important} #perceptor-builder .pcb-buy-slot-v2{ background:linear-gradient(180deg,rgba(150,90,230,.4),rgba(60,36,100,.5)) !important; border:1px solid rgba(170,120,230,.55) !important;color:#e8d8ff !important;border-radius:11px !important; } #perceptor-builder .pcb-buy-slot-v2:disabled{opacity:.4 !important} #perceptor-builder .rm-btn-cancel{ background:rgba(255,255,255,.05) !important;border:1px solid rgba(212,167,71,.2) !important;color:#b7ac90 !important; } /* ════════════════ RAIDS (mg-raid) ════════════════ */ #panel-guilde .mg-raid-card{ background:linear-gradient(135deg,#2a1a30,#160f20) !important; border:1px solid var(--gp-line-2) !important;border-radius:16px !important; box-shadow:0 14px 38px rgba(0,0,0,.5) !important; } #panel-guilde .mg-raid-ic{filter:drop-shadow(0 3px 12px rgba(255,120,80,.4)) !important} #panel-guilde .mg-raid-name{color:var(--gp-gold-2) !important} #panel-guilde .mg-raid-stats b{color:var(--gp-gold) !important} #panel-guilde .mg-raid-locked{background:rgba(0,0,0,.35) !important;border:1px dashed var(--gp-line-2) !important;color:var(--gp-soft) !important;border-radius:10px !important} #panel-guilde .mg-raid-done{background:linear-gradient(135deg,rgba(60,150,90,.16),rgba(14,20,16,.5)) !important;border:1px solid rgba(110,226,154,.4) !important;color:var(--gp-green) !important;border-radius:10px !important} #panel-guilde .mg-raid-team-title{color:var(--gp-gold-deep) !important} #panel-guilde .mg-raid-char{ background:rgba(0,0,0,.28) !important;border:1px solid var(--gp-line) !important;border-radius:11px !important;transition:border-color .15s !important; } #panel-guilde .mg-raid-char:hover{border-color:var(--gp-line-2) !important} #panel-guilde .mg-raid-go{ background:var(--gp-grad-gold) !important;color:#231603 !important;border-radius:11px !important; box-shadow:0 8px 22px rgba(212,160,64,.42) !important; } #panel-guilde .mg-raid-go:disabled{background:rgba(80,70,60,.5) !important;color:#8a7e6a !important;box-shadow:none !important} /* ════════════════ CLASSEMENT (grx online + legacy) ════════════════ */ #panel-guilde .grx-head{color:var(--gp-txt) !important} #panel-guilde .grx-head-count{background:rgba(255,214,116,.16) !important;border:1px solid var(--gp-line-2) !important;color:var(--gp-gold) !important} #panel-guilde .grx-rank{background:rgba(20,16,28,.6) !important;border:1px solid var(--gp-line) !important;color:#cdbf9e !important} #panel-guilde .grx-emblem{background:rgba(14,11,21,.5) !important} #panel-guilde .grx-name{color:var(--gp-txt) !important} #panel-guilde .grx-lvl{color:var(--gp-gold) !important} #panel-guilde .grx-xp{color:var(--gp-soft) !important} #panel-guilde .mg-rank-row{border-radius:12px !important} /* ════════════════ PARAMÈTRES (mg-settings) ════════════════ */ #panel-guilde .mg-settings{ background:var(--gp-card) !important;border:1px solid var(--gp-line) !important;border-radius:14px !important; } #panel-guilde .mg-set-row{border-bottom:1px solid rgba(255,255,255,.05) !important} #panel-guilde .mg-set-label{color:var(--gp-soft) !important} #panel-guilde .mg-set-val{color:var(--gp-txt) !important} #panel-guilde .mg-danger-zone{ background:linear-gradient(180deg,rgba(200,64,40,.1),rgba(20,12,12,.5)) !important; border:1px solid rgba(255,120,90,.3) !important;border-radius:14px !important; } #panel-guilde .mg-danger-zone h3{color:var(--gp-red) !important} #panel-guilde .mg-set-warn{color:var(--gp-soft) !important} /* ════════════════ BOUTONS GÉNÉRIQUES (mg-btn) ════════════════ */ #panel-guilde .mg-btn{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.28)) !important; border:1px solid var(--gp-line-2) !important;color:var(--gp-gold-2) !important;border-radius:9px !important; font-weight:800 !important;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s !important; } #panel-guilde .mg-btn:hover{transform:translateY(-1px);background:rgba(255,214,116,.14) !important} #panel-guilde .mg-btn-donate{background:var(--gp-grad-gold) !important;color:#231603 !important;border:none !important;box-shadow:0 6px 18px rgba(212,160,64,.36) !important} #panel-guilde .mg-btn-collect{background:linear-gradient(135deg,#6ee29a,#2f9e5c) !important;color:#062012 !important;border:none !important} #panel-guilde .mg-btn-withdraw{color:var(--gp-soft) !important} #panel-guilde .mg-btn-remove, #panel-guilde .mg-btn-leave{background:linear-gradient(135deg,#e0604a,#8a1e18) !important;color:#fff0ec !important;border:none !important} /* États vides */ #panel-guilde .mg-empty{ background:rgba(255,255,255,.025) !important;border:1px dashed var(--gp-line-2) !important; border-radius:14px !important;color:var(--gp-soft) !important; } #panel-guilde .mge-ic{filter:drop-shadow(0 2px 10px rgba(255,200,80,.25)) !important;opacity:.9} /* ════════════════ MODALE DE CRÉATION (gc-) — rend dans ════════════════ */ #guild-create-modal .rename-modal, #guild-create-modal .gc-modal-v644{ background:linear-gradient(180deg,#1b1626,#100c18) !important; border:1px solid var(--gp-line-2,rgba(212,167,71,.34)) !important;border-radius:18px !important; box-shadow:0 24px 70px rgba(0,0,0,.7) !important; } #guild-create-modal .rm-title{ background:linear-gradient(180deg,#fff6dd,#ffd874 48%,#caa044) !important; -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } #guild-create-modal .rm-sub{color:#b7ac90 !important} #guild-create-modal .rm-portrait{ border-color:rgba(255,214,116,.5) !important; background:radial-gradient(circle at 42% 36%,rgba(255,214,116,.28),rgba(0,0,0,.3)) !important; } #guild-create-modal .rm-label{color:#ffd874 !important} #guild-create-modal .rm-input{ background:#120e1c !important;border:1px solid rgba(212,167,71,.34) !important;color:#e9e0cb !important;border-radius:10px !important; } #guild-create-modal .rm-input:focus{border-color:rgba(255,214,116,.6) !important;outline:none} #guild-create-modal .gc-emblem-btn{ background:rgba(255,255,255,.04) !important;border:1px solid rgba(212,167,71,.17) !important;border-radius:10px !important; transition:all .15s !important; } #guild-create-modal .gc-emblem-btn:hover{background:rgba(255,214,116,.12) !important;transform:translateY(-2px)} #guild-create-modal .gc-emblem-btn.sel{ background:linear-gradient(180deg,rgba(255,214,116,.22),rgba(0,0,0,.2)) !important; border-color:rgba(255,214,116,.6) !important;box-shadow:0 0 0 1px rgba(255,214,116,.4),0 0 14px rgba(255,200,80,.3) !important; } #guild-create-modal .gc-char-row{ background:rgba(255,255,255,.03) !important;border:1px solid rgba(212,167,71,.14) !important;border-radius:11px !important; } #guild-create-modal .gc-char-avatar{border:1px solid rgba(255,214,116,.3) !important;background:#160f22 !important} #guild-create-modal .gc-char-lv{color:#b7ac90 !important} #guild-create-modal .rm-btn-ok{ background:linear-gradient(135deg,#ffe07a,#d4a040) !important;color:#231603 !important;border:none !important; box-shadow:0 8px 22px rgba(212,160,64,.42) !important; } #guild-create-modal .rm-btn-cancel{ background:rgba(255,255,255,.05) !important;border:1px solid rgba(212,167,71,.2) !important;color:#b7ac90 !important; } /* ════════════════ MOBILE (≤768px) — DA premium + cibles tactiles ════════════════ */ @media (max-width:768px){ #panel-guilde .guild-page, #panel-guilde .mg-page{padding:12px 12px !important} #panel-guilde .mg-hero, #panel-guilde .guild-hero{padding:16px 16px !important;border-radius:14px !important} #panel-guilde .mg-tabs, #panel-guilde .guild-tabs{overflow-x:auto !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch} #panel-guilde .mg-tab, #panel-guilde .guild-tab{flex:0 0 auto !important;padding:9px 13px !important} }