/* ============================================================================= DAYZ-RSS — Template client V2 (vitrine) Design system unique, sombre tactique. Prefixe .s2-* (zero conflit avec site.css) Accent pilote par --accent (configurable par client via client_sites.accent_color) ============================================================================= */ .s2 *, .s2 *::before, .s2 *::after { box-sizing: border-box; } .s2 { --bg: #08090c; --bg-soft: #0e1014; --panel: #14161c; --panel-2: #181b22; --panel-hover: #1d212a; --line: #23262f; --line-soft: #2d313c; --txt: #f4f5f7; --txt-2: #aeb2bd; --txt-3: #6b7080; --gold: #ffb628; --silver: #c5ccd6; --bronze: #cd7f43; --green: #28d17c; --red: #ff3b46; /* --accent / --accent-hover injectes par le (fallback ici) */ --accent: #ff0000; --accent-hover: #d10000; --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-line: color-mix(in srgb, var(--accent) 38%, transparent); --radius: 14px; --radius-sm: 10px; --shadow: 0 8px 30px rgba(0,0,0,.45); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; margin: 0; background: var(--bg); color: var(--txt); font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } .s2 a { color: inherit; text-decoration: none; } .s2 img { max-width: 100%; display: block; } /* Fond ambiance : halo accent discret en haut */ .s2::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 420px at 78% -8%, var(--accent-soft), transparent 60%), radial-gradient(700px 380px at 8% 0%, rgba(40,46,60,.5), transparent 65%); } .s2 > * { position: relative; z-index: 1; } /* ============ TOP NAV ============ */ .s2-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.5rem; padding: 0 clamp(1rem, 3vw, 2.5rem); height: 66px; background: rgba(10,11,14,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .s2-brand { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.05rem; letter-spacing: .3px; flex-shrink: 0; } .s2-brand img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; } .s2-brand .ph { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 900; font-size: .85rem; } .s2-brand b { background: linear-gradient(90deg, #fff, var(--txt-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .s2-links { display: flex; align-items: center; gap: .15rem; margin-left: .5rem; flex: 1; overflow: visible; } .s2-link { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 9px; color: var(--txt-2); font-size: .9rem; font-weight: 600; white-space: nowrap; transition: .15s; } .s2-link svg { width: 17px; height: 17px; opacity: .8; } .s2-link:hover { color: var(--txt); background: var(--panel); } .s2-link.active { color: #fff; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); } .s2-link.active svg { opacity: 1; color: var(--accent); } .s2-nav-right { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } .s2-online { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; letter-spacing: .4px; color: var(--txt-2); } .s2-online .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: s2pulse 2s infinite; } @keyframes s2pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } .s2-online b { color: var(--txt); } .s2-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 9px; font-weight: 700; font-size: .88rem; cursor: pointer; border: 1px solid transparent; transition: .15s; white-space: nowrap; } .s2-btn svg { width: 15px; height: 15px; } .s2-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 16px var(--accent-soft); } .s2-btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .s2-btn-ghost { background: var(--panel); color: var(--txt); border-color: var(--line); } .s2-btn-ghost:hover { background: var(--panel-hover); border-color: var(--line-soft); } .s2-btn-danger { background: #dc2626; color: #fff; box-shadow: 0 4px 16px rgba(220,38,38,.28); } .s2-btn-danger:hover { background: #b91c1c; transform: translateY(-1px); } .s2-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; } .s2-avatar { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line-soft); padding: 0; background: none; cursor: pointer; display: block; transition: border-color .15s; } .s2-avatar:hover { border-color: var(--accent); } .s2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Menu déroulant utilisateur (avatar) */ .s2-usermenu { position: relative; } .s2-usermenu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 100; background: var(--panel, #14161c); border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; padding: .35rem; box-shadow: 0 12px 32px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; } .s2-usermenu.open .s2-usermenu-pop { opacity: 1; visibility: visible; transform: translateY(0); } .s2-usermenu-head { font-size: .72rem; color: var(--txt-3, #8a8f98); text-transform: uppercase; letter-spacing: .03em; padding: .5rem .65rem .35rem; font-weight: 700; } .s2-usermenu-pop a { display: flex; align-items: center; gap: .6rem; padding: .6rem .65rem; border-radius: 8px; color: var(--txt, #fff); text-decoration: none; font-size: .88rem; font-weight: 500; transition: background .12s; } .s2-usermenu-pop a:hover { background: rgba(255,255,255,.06); } .s2-usermenu-pop a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; } .s2-usermenu-admin { color: var(--accent) !important; } .s2-usermenu-admin svg { opacity: 1; } .s2-usermenu-logout { color: #ef4444 !important; border-top: 1px solid var(--line, rgba(255,255,255,.08)); margin-top: .25rem; padding-top: .6rem; } .s2-burger { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: .3rem; } /* ============ CONTAINER ============ */ .s2-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 3vw, 2rem) 4rem; } .s2-section { margin-top: 1.6rem; } /* ============ HERO ============ */ .s2-hero { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); padding: clamp(2rem, 5vw, 3.6rem); display: flex; align-items: center; gap: 2rem; min-height: 320px; } .s2-hero-bg { position: absolute; inset: 0; z-index: 0; } .s2-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; } .s2-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, var(--panel) 32%, color-mix(in srgb, var(--panel) 55%, transparent) 65%, transparent); } .s2-hero-in { position: relative; z-index: 1; flex: 1; max-width: 640px; } .s2-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 1.1rem; } .s2-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: s2pulse 2s infinite; } .s2-hero h1 { margin: 0 0 .7rem; font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 900; line-height: 1.02; letter-spacing: -1px; } .s2-hero-sub { margin: 0 0 1.4rem; color: var(--txt-2); font-size: 1.05rem; max-width: 540px; } .s2-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; } .s2-tag { padding: .35rem .8rem; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: .76rem; font-weight: 700; letter-spacing: .5px; color: var(--txt-2); text-transform: uppercase; } .s2-tag.xbox { color: #6ee787; border-color: rgba(110,231,135,.3); } .s2-tag.ps { color: #6ca0ff; border-color: rgba(108,160,255,.3); } .s2-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; } .s2-hero-emblem { position: relative; z-index: 1; width: clamp(120px, 18vw, 200px); height: auto; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); } /* ============ STATS RAIL ============ */ .s2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.4rem; } .s2-stat { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: .15s; } .s2-stat:hover { border-color: var(--line-soft); transform: translateY(-2px); } .s2-stat .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--col, var(--accent-soft)); flex-shrink: 0; } .s2-stat .ic svg { width: 21px; height: 21px; } .s2-stat .v { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1; } .s2-stat .l { font-size: .76rem; color: var(--txt-3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: .25rem; } /* ============ TICKER ============ */ .s2-ticker { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .s2-ticker-lbl { display: flex; align-items: center; gap: .45rem; padding: .8rem 1.1rem; background: var(--accent); color: #fff; font-weight: 800; font-size: .76rem; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; } .s2-ticker-lbl .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; } .s2-ticker-scroll { overflow: hidden; flex: 1; } .s2-ticker-track { display: inline-flex; gap: 2rem; padding-right: 2rem; white-space: nowrap; animation: s2marquee 38s linear infinite; } .s2-ticker:hover .s2-ticker-track { animation-play-state: paused; } @keyframes s2marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .s2-ticker-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--txt-2); } .s2-ticker-item .killer { color: var(--txt); font-weight: 700; } .s2-ticker-item .arrow { color: var(--accent); } .s2-ticker-item .weapon { font-family: var(--mono); font-size: .72rem; color: var(--txt-3); background: var(--panel-2); padding: .1rem .4rem; border-radius: 5px; } /* ============ ME CARD ============ */ .s2-me { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding: 1.2rem 1.4rem; background: linear-gradient(100deg, var(--accent-soft), var(--panel) 55%); border: 1px solid var(--accent-line); border-radius: var(--radius); flex-wrap: wrap; } .s2-me-av { width: 54px; height: 54px; border-radius: 13px; background: var(--accent); display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; color: #fff; } .s2-me-info h4 { margin: 0; font-size: 1.1rem; } .s2-me-info p { margin: .15rem 0 0; color: var(--txt-2); font-size: .85rem; } .s2-me-stats { display: flex; gap: 1.6rem; margin-left: auto; } .s2-me-stats .v { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; } .s2-me-stats .l { font-size: .7rem; color: var(--txt-3); text-transform: uppercase; letter-spacing: .5px; } .s2-me-cta { padding: .6rem 1.1rem; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid var(--line-soft); font-weight: 700; font-size: .85rem; } .s2-me-cta:hover { background: rgba(255,255,255,.14); } /* ============ GRID ============ */ .s2-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr; gap: 1rem; margin-top: 1.4rem; align-items: start; } .s2-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .s2-card-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .s2-card-title { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .95rem; } .s2-card-title svg { width: 18px; height: 18px; color: var(--accent); } .s2-card-action { font-size: .8rem; color: var(--txt-3); font-weight: 600; } .s2-card-action:hover { color: var(--accent); } .s2-card-body { padding: 1.1rem 1.2rem; } /* PODIUM */ .s2-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; align-items: end; padding: 1.4rem 1.2rem .4rem; } .s2-pod-col { display: flex; flex-direction: column; align-items: center; text-align: center; } .s2-pod-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; color: #0a0a0a; margin-bottom: .5rem; } .s2-pod-av.gold { background: linear-gradient(145deg,#ffd564,#e8a200); box-shadow: 0 0 22px rgba(255,182,40,.4); width: 62px; height: 62px; } .s2-pod-av.silver { background: linear-gradient(145deg,#e6ebf2,#aab2bf); } .s2-pod-av.bronze { background: linear-gradient(145deg,#e3a06a,#b06a35); } .s2-pod-col .name { font-weight: 700; font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-pod-col .name:hover { color: var(--accent); } .s2-pod-col .kills { font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: .82rem; margin: .1rem 0 .5rem; } .s2-pod-bar { width: 100%; border-radius: 8px 8px 0 0; display: grid; place-items: center; font-weight: 900; font-family: var(--mono); color: rgba(255,255,255,.65); background: var(--panel-2); } .s2-pod-bar.p1 { height: 78px; background: linear-gradient(180deg, color-mix(in srgb,var(--gold) 28%,var(--panel-2)), var(--panel-2)); } .s2-pod-bar.p2 { height: 56px; } .s2-pod-bar.p3 { height: 42px; } .s2-pod-rest { padding: .4rem .6rem 1rem; } .s2-pod-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: 9px; } .s2-pod-row:hover { background: var(--panel-2); } .s2-pod-row .rank { font-family: var(--mono); color: var(--txt-3); font-weight: 700; width: 22px; } .s2-pod-row .name { flex: 1; font-weight: 600; font-size: .88rem; } .s2-pod-row .kills { font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: .82rem; } /* FEED */ .s2-feed { display: flex; flex-direction: column; } .s2-feed-item { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); } .s2-feed-item:last-child { border-bottom: 0; } .s2-feed-ic { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb,var(--red) 14%,transparent); display: grid; place-items: center; flex-shrink: 0; } .s2-feed-ic svg { width: 17px; height: 17px; color: var(--red); } .s2-feed-body { flex: 1; min-width: 0; } .s2-feed-body p { margin: 0; font-size: .88rem; } .s2-feed-body .killer { font-weight: 700; } .s2-feed-body .dim { color: var(--txt-3); } .s2-feed-meta { display: flex; gap: .5rem; margin-top: .2rem; font-size: .72rem; color: var(--txt-3); font-family: var(--mono); } .s2-feed-weapon { color: var(--txt-2); } .s2-feed-time { font-size: .72rem; color: var(--txt-3); white-space: nowrap; } /* ONLINE + QUICK */ .s2-col3 { display: flex; flex-direction: column; gap: 1rem; } .s2-online-list { display: flex; flex-direction: column; max-height: 290px; overflow-y: auto; } .s2-on-item { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.2rem; border-bottom: 1px solid var(--line); } .s2-on-item:last-child { border-bottom: 0; } .s2-on-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .88rem; } .s2-on-name .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .s2-on-time { font-family: var(--mono); font-size: .74rem; color: var(--txt-3); } .s2-empty { padding: 1.6rem 1.2rem; text-align: center; color: var(--txt-3); font-size: .85rem; } .s2-quick { padding: .4rem 1.2rem 1rem; } .s2-quick-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); } .s2-quick-row:last-child { border-bottom: 0; } .s2-quick-row .lbl { color: var(--txt-2); font-size: .85rem; } .s2-quick-row .val { font-family: var(--mono); font-weight: 700; } /* CTA CARDS */ .s2-cta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.4rem; } .s2-cta { display: flex; align-items: center; gap: 1rem; padding: 1.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: .15s; } .s2-cta:hover { border-color: var(--accent-line); transform: translateY(-3px); background: var(--panel-hover); } .s2-cta .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; flex-shrink: 0; } .s2-cta .ico svg { width: 23px; height: 23px; color: var(--accent); } .s2-cta h4 { margin: 0 0 .15rem; font-size: .98rem; } .s2-cta p { margin: 0; color: var(--txt-3); font-size: .8rem; line-height: 1.45; } /* FOOTER */ .s2-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2rem clamp(1rem,3vw,2rem); text-align: center; color: var(--txt-3); font-size: .82rem; } .s2-footer a { color: var(--txt-2); font-weight: 600; } .s2-footer a:hover { color: var(--accent); } .s2-foot-socials { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.1rem; } .s2-foot-socials a { width: 38px; height: 38px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; color: var(--txt-2); transition: .15s; } .s2-foot-socials a:hover { background: var(--accent-soft); border-color: var(--accent-line); color: #fff; transform: translateY(-2px); } .s2-foot-socials svg { width: 18px; height: 18px; } /* ============ MOBILE ============ */ .s2-mobile-menu { display: none; } @media (max-width: 1080px) { .s2-grid { grid-template-columns: 1fr 1fr; } .s2-col3 { grid-column: 1 / -1; flex-direction: row; } .s2-col3 .s2-card { flex: 1; } } @media (max-width: 900px) { .s2-links { display: none; } .s2-burger { display: inline-flex; } .s2-hero-emblem { display: none; } .s2-mobile-menu { display: none; flex-direction: column; gap: .2rem; padding: .8rem clamp(1rem,3vw,2rem); background: var(--bg-soft); border-bottom: 1px solid var(--line); } .s2-mobile-menu.open { display: flex; } .s2-mobile-menu .s2-link { padding: .7rem .9rem; } } @media (max-width: 760px) { .s2-stats { grid-template-columns: repeat(2, 1fr); } .s2-grid { grid-template-columns: 1fr; } .s2-col3 { flex-direction: column; } .s2-me-stats { margin-left: 0; width: 100%; justify-content: space-between; gap: .8rem; } .s2-hero { min-height: auto; } } @media (max-width: 460px) { .s2-stats { grid-template-columns: 1fr 1fr; } .s2-online b, .s2-btn span { display: inline; } } /* ============ PAGES (shared) ============ */ .s2-linkbanner { display:flex; align-items:center; gap:.7rem; background:color-mix(in srgb,var(--gold) 12%,transparent); border:1px solid color-mix(in srgb,var(--gold) 30%,transparent); border-radius:var(--radius-sm); padding:.75rem 1rem; color:#fbbf24; font-size:.88rem; margin-top:1.2rem; } .s2-linkbanner svg { width:20px; height:20px; flex-shrink:0; } .s2-linkbanner code { background:rgba(255,255,255,.1); padding:.1em .4em; border-radius:4px; font-family:var(--mono); font-size:.85em; } .s2-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; } .s2-page-head h1 { margin:0; font-size:clamp(1.6rem,4vw,2.3rem); font-weight:900; letter-spacing:-.5px; } .s2-page-head .sub { color:var(--txt-3); font-size:.9rem; margin-top:.25rem; } .s2-eyebrow { display:inline-flex; align-items:center; gap:.45rem; color:var(--accent); font-weight:800; font-size:.74rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem; } .s2-eyebrow svg { width:15px; height:15px; } .s2-toolbar { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.2rem; } .s2-search { display:flex; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.55rem .9rem; flex:1; min-width:200px; } .s2-search svg { width:17px; height:17px; color:var(--txt-3); } .s2-search input { background:none; border:0; outline:0; color:var(--txt); font-size:.9rem; width:100%; font-family:var(--font); } .s2-chip { padding:.5rem .9rem; border-radius:9px; background:var(--panel); border:1px solid var(--line); color:var(--txt-2); font-size:.84rem; font-weight:600; cursor:pointer; } .s2-chip:hover { background:var(--panel-hover); } .s2-chip.active { background:var(--accent-soft); border-color:var(--accent-line); color:#fff; } /* Table */ .s2-table-wrap { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .s2-table { width:100%; border-collapse:collapse; } .s2-table th { text-align:left; padding:.85rem 1.1rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--txt-3); font-weight:700; border-bottom:1px solid var(--line); white-space:nowrap; } .s2-table td { padding:.8rem 1.1rem; border-bottom:1px solid var(--line); font-size:.9rem; } .s2-table tr:last-child td { border-bottom:0; } .s2-table tbody tr:hover { background:var(--panel-2); } .s2-table .num { font-family:var(--mono); font-weight:700; } .s2-table .accent { color:var(--accent); } .s2-rank { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--panel-2); font-family:var(--mono); font-weight:700; font-size:.82rem; color:var(--txt-2); } .s2-rank.g1 { background:linear-gradient(145deg,#ffd564,#e8a200); color:#1a1500; } .s2-rank.g2 { background:linear-gradient(145deg,#e6ebf2,#aab2bf); color:#1a1a1a; } .s2-rank.g3 { background:linear-gradient(145deg,#e3a06a,#b06a35); color:#1a1000; } .s2-uname { display:inline-flex; align-items:center; gap:.6rem; font-weight:600; } .s2-uname .av { width:30px; height:30px; border-radius:8px; background:var(--accent-soft); display:grid; place-items:center; font-weight:800; font-size:.8rem; color:var(--accent); } .s2-uname:hover { color:var(--accent); } /* Pagination */ .s2-pager { display:flex; justify-content:center; gap:.4rem; margin-top:1.4rem; } .s2-pager a, .s2-pager span { min-width:38px; height:38px; padding:0 .6rem; display:grid; place-items:center; border-radius:9px; background:var(--panel); border:1px solid var(--line); color:var(--txt-2); font-weight:700; font-size:.85rem; } .s2-pager a:hover { background:var(--panel-hover); color:#fff; } .s2-pager .cur { background:var(--accent); border-color:var(--accent); color:#fff; } /* Faction cards */ .s2-fac-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; } .s2-fac { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; transition:.15s; } .s2-fac:hover { border-color:var(--accent-line); transform:translateY(-3px); } .s2-fac-top { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; } .s2-fac-emblem { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-weight:900; color:#fff; flex-shrink:0; } .s2-fac h3 { margin:0; font-size:1.05rem; } .s2-fac .tag { font-size:.78rem; color:var(--txt-3); font-family:var(--mono); } .s2-fac-stats { display:flex; gap:1.4rem; padding-top:.9rem; border-top:1px solid var(--line); } .s2-fac-stats .v { font-family:var(--mono); font-weight:700; font-size:1.05rem; } .s2-fac-stats .l { font-size:.7rem; color:var(--txt-3); text-transform:uppercase; } /* Factions — drapeaux réels + cartes enrichies */ .s2-fac { position:relative; display:block; text-decoration:none; color:inherit; overflow:hidden; } .s2-fac::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--fac-color,var(--accent)); opacity:.7; } .s2-fac-rank { position:absolute; top:.7rem; right:.8rem; font-family:var(--mono); font-weight:800; font-size:.8rem; color:var(--txt-3); } .s2-fac-rank-1 { color:#f5c518; } .s2-fac-rank-2 { color:#cbd5e1; } .s2-fac-rank-3 { color:#cd7f32; } .s2-fac-flag { position:relative; width:52px; height:40px; border-radius:6px; overflow:hidden; flex-shrink:0; border:2px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.4); } .s2-fac-flag img { width:100%; height:100%; object-fit:cover; display:block; } .s2-fac-flag-fallback { position:absolute; inset:0; display:none; place-items:center; font-weight:900; color:#fff; font-size:.95rem; } .s2-fac-flag.noflag .s2-fac-flag-fallback { display:grid; } .s2-fac-id h3 { margin:0; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; } .s2-fac-tag { font-size:.76rem; font-weight:600; font-family:var(--mono); display:inline-flex; align-items:center; gap:.3rem; } /* Détail faction */ .s2-fac-detail-head { display:flex; align-items:center; gap:1.2rem; padding:1.4rem 1.5rem; margin-bottom:1.2rem; border-radius:var(--radius); background:linear-gradient(135deg, color-mix(in srgb, var(--fac-color,var(--accent)) 14%, var(--panel)), var(--panel) 70%); border:1px solid var(--line); border-left:4px solid var(--fac-color,var(--accent)); } .s2-fac-detail-flag { position:relative; width:88px; height:66px; border-radius:8px; overflow:hidden; flex-shrink:0; border:2px solid var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.5); } .s2-fac-detail-flag img { width:100%; height:100%; object-fit:cover; display:block; } .s2-fac-detail-flag.noflag .s2-fac-flag-fallback { display:grid; font-size:1.5rem; } .s2-fac-detail-id h1 { font-size:1.6rem; } .s2-fac-detail-meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.5rem; font-size:.84rem; align-items:center; } .s2-fac-detail-meta i { margin-right:.25rem; } .s2-fac-statbar { display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; } .s2-fac-statcell { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.9rem .6rem; text-align:center; } .s2-fac-statcell .v { font-family:var(--mono); font-weight:800; font-size:1.25rem; } .s2-fac-statcell .l { font-size:.68rem; color:var(--txt-3); text-transform:uppercase; margin-top:.2rem; letter-spacing:.02em; } @media (max-width:760px){ .s2-fac-statbar { grid-template-columns:repeat(3,1fr); } .s2-fac-detail-head { flex-direction:column; text-align:center; } .s2-fac-detail-meta { justify-content:center; } .s2-hide-sm { display:none; } } /* Prose (rules) */ .s2-prose { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.4rem); line-height:1.8; color:var(--txt-2); } .s2-prose h1,.s2-prose h2,.s2-prose h3 { color:var(--txt); margin:1.6rem 0 .7rem; } .s2-prose h2 { font-size:1.3rem; padding-bottom:.4rem; border-bottom:1px solid var(--line); } .s2-prose ul,.s2-prose ol { padding-left:1.3rem; } .s2-prose a { color:var(--accent); } .s2-prose code { background:var(--panel-2); padding:.1em .4em; border-radius:5px; font-family:var(--mono); font-size:.9em; } /* Empty state */ .s2-empty-big { text-align:center; padding:4rem 1rem; color:var(--txt-3); } .s2-empty-big svg { width:54px; height:54px; opacity:.4; margin-bottom:1rem; } .s2-empty-big h3 { color:var(--txt-2); margin:0 0 .4rem; } @media (max-width:640px){ .s2-table th:nth-child(n+4),.s2-table td:nth-child(n+4){ display:none; } } /* Rules accordion */ .s2-rule { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .s2-rule-head { display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; cursor:pointer; } .s2-rule-head:hover { background:var(--panel-2); } .s2-rule-ic { width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; flex-shrink:0; } .s2-rule-ic svg { width:19px; height:19px; color:var(--accent); } .s2-rule-t { flex:1; } .s2-rule-t h3 { margin:0; font-size:1rem; } .s2-rule-t span { font-size:.78rem; color:var(--txt-3); } .s2-rule-chev { width:20px; height:20px; color:var(--txt-3); transition:transform .2s; } .s2-rule.open .s2-rule-chev { transform:rotate(180deg); } .s2-rule-body { display:none; padding:0 1.2rem 1rem; } .s2-rule.open .s2-rule-body { display:block; } .s2-rule-item { display:flex; gap:.8rem; padding:.6rem 0; border-top:1px solid var(--line); color:var(--txt-2); font-size:.92rem; } .s2-rule-item .n { font-family:var(--mono); font-weight:700; color:var(--accent); flex-shrink:0; min-width:22px; } /* Profile */ .s2-pf-head { display:flex; align-items:center; gap:1.3rem; padding:1.5rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden; } .s2-pf-head::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); } .s2-pf-av { width:74px; height:74px; border-radius:16px; object-fit:cover; border:2px solid var(--line-soft); flex-shrink:0; } .s2-pf-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; } .s2-pf-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border-radius:7px; background:var(--panel-2); font-size:.78rem; font-weight:600; color:var(--txt-2); } .s2-pf-bars { display:flex; align-items:flex-end; gap:6px; height:120px; } .s2-pf-barcol { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; } .s2-pf-bar { width:100%; border-radius:5px 5px 0 0; background:linear-gradient(to top,var(--accent),var(--accent-hover)); min-height:3px; position:relative; } .s2-pf-bar:hover::after { content:attr(data-val); position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:.65rem; font-weight:700; color:var(--accent); } .s2-pf-barcol span { font-size:.62rem; color:var(--txt-3); margin-top:.4rem; } @media (max-width:760px){ .s2-pf-head{flex-direction:column;text-align:center} .s2-pf-meta{justify-content:center} } /* ============================================================================= PREMIUM LAYER — élévation visuelle (glassmorphism, dégradés, glows, depth) Inspiré obsidianpvp + brasil-mais. Surcharge la base ci-dessus. ============================================================================= */ /* Fond : mesh multi-couches + grain subtil + grille */ .s2::before { background: radial-gradient(1100px 520px at 82% -10%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 55%), radial-gradient(820px 460px at 4% 2%, rgba(60,70,110,.35), transparent 60%), radial-gradient(600px 600px at 50% 120%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 60%); } .s2::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } /* NAV — glass renforcé */ .s2-nav { background: linear-gradient(180deg, rgba(12,13,18,.92), rgba(10,11,15,.74)); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.35); border-bottom: 1px solid color-mix(in srgb,var(--accent) 10%, var(--line)); } .s2-link.active { background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent) 8%,transparent)); } .s2-brand .ph, .s2-me-av, .s2-uname .av { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: 0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent); } .s2-uname .av { color:#fff; } /* BOUTONS — dégradé + glow */ .s2-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: 0 6px 22px color-mix(in srgb,var(--accent) 34%,transparent), inset 0 1px 0 rgba(255,255,255,.18); } .s2-btn-primary:hover { box-shadow: 0 10px 30px color-mix(in srgb,var(--accent) 46%,transparent); transform: translateY(-2px); } /* HERO — plus grand, glow, dégradé titre, mesh */ .s2-hero { min-height: 380px; border-radius: 24px; background: linear-gradient(135deg, var(--panel), var(--bg-soft)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); } .s2-hero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(600px 300px at 85% 20%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%); } .s2-hero-in { z-index:2; } .s2-hero-emblem { z-index:2; filter: drop-shadow(0 18px 50px color-mix(in srgb,var(--accent) 35%,transparent)); animation: s2float 6s ease-in-out infinite; } @keyframes s2float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } .s2-hero h1 { background: linear-gradient(180deg,#fff 40%, color-mix(in srgb,var(--accent) 60%,#fff)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; } .s2-badge { background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 22%,transparent), transparent); box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 24px color-mix(in srgb,var(--accent) 18%,transparent); } /* STAT CARDS — accent animé + nombre dégradé + glow hover */ .s2-stat { position:relative; overflow:hidden; background: linear-gradient(160deg, var(--panel), var(--bg-soft)); } .s2-stat::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0; transition:.3s; } .s2-stat:hover { border-color: var(--accent-line); box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 0 1px var(--accent-line); transform: translateY(-4px); } .s2-stat:hover::before { opacity:1; } .s2-stat .v { background: linear-gradient(180deg,#fff, var(--txt-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .s2-stat .ic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } /* CARDS — surface dégradée, ligne accent top au hover, lift */ .s2-card { background: linear-gradient(165deg, var(--panel), var(--bg-soft)); box-shadow: 0 4px 20px rgba(0,0,0,.25); position:relative; } .s2-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .s2-card-title svg { filter: drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 50%,transparent)); } /* CTA — glow accent au hover */ .s2-cta { background: linear-gradient(160deg, var(--panel), var(--bg-soft)); } .s2-cta:hover { box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent-line); } .s2-cta:hover .ico { box-shadow: 0 0 22px color-mix(in srgb,var(--accent) 35%,transparent); } .s2-cta .ico { transition:.2s; } /* PODIUM — glow sur l'or */ .s2-pod-av.gold { box-shadow: 0 0 30px color-mix(in srgb,var(--gold) 55%,transparent), inset 0 2px 6px rgba(255,255,255,.4); } .s2-pod-bar.p1 { box-shadow: inset 0 0 20px color-mix(in srgb,var(--gold) 22%,transparent); } /* TICKER — fondu sur les bords */ .s2-ticker-scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .s2-ticker-lbl { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: 0 0 24px color-mix(in srgb,var(--accent) 40%,transparent); } /* TABLE — entête dégradé, hover accentué */ .s2-table thead { background: linear-gradient(180deg, var(--panel-2), transparent); } .s2-table tbody tr { transition: background .12s; } .s2-table tbody tr:hover { background: linear-gradient(90deg, color-mix(in srgb,var(--accent) 7%,transparent), transparent); box-shadow: inset 3px 0 0 var(--accent); } .s2-table-wrap { box-shadow: 0 4px 20px rgba(0,0,0,.25); } /* CHIPS actifs — dégradé */ .s2-chip.active { background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 25%,transparent), color-mix(in srgb,var(--accent) 8%,transparent)); box-shadow: inset 0 0 0 1px var(--accent-line); } /* PAGE HEAD — titre dégradé */ .s2-page-head h1 { background: linear-gradient(180deg,#fff 45%, var(--txt-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* FACTION cards — glow hover */ .s2-fac:hover { box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent-line); } .s2-fac-emblem { box-shadow: 0 6px 18px rgba(0,0,0,.4); } /* scrollbar */ .s2 ::-webkit-scrollbar { width:10px; height:10px; } .s2 ::-webkit-scrollbar-track { background:var(--bg); } .s2 ::-webkit-scrollbar-thumb { background:var(--line-soft); border-radius:6px; border:2px solid var(--bg); } .s2 ::-webkit-scrollbar-thumb:hover { background:var(--accent); } /* Compat : alias anciennes variables -> nouvelles (pour styles inline legacy map/shop) */ .s2 { --bg-card: var(--panel); --card-bg: var(--panel); --bg-card-hover: var(--panel-hover); --bg-dark: var(--bg); --bg-secondary: var(--bg-soft); --bg-input: var(--panel-2); --bg-body: var(--bg); --border: var(--line); --border-color: var(--line); --border-light: var(--line-soft); --text-primary: var(--txt); --text-secondary: var(--txt-2); --text-muted: var(--txt-3); --success: var(--green); --danger: var(--red); --warning: var(--gold); --discord: #5865f2; --radius-sm: 10px; --radius-md: 12px; } /* legacy .card/.btn fallback -> aspect V2 si une page non migrée les utilise encore */ .s2 .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .s2 .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:9px; font-weight:700; font-size:.88rem; border:1px solid var(--line); background:var(--panel); color:var(--txt); cursor:pointer; text-decoration:none; transition:.15s; } .s2 .btn:hover { border-color:var(--accent-line); } .s2 .btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff; border-color:transparent; } .s2 .btn-secondary { background:rgba(255,255,255,.06); color:var(--txt); } .s2 .btn-sm { padding:.4rem .7rem; font-size:.8rem; } .s2 .page-header { margin-bottom:1.4rem; } .s2 .page-header h1 { font-size:clamp(1.6rem,4vw,2.3rem); font-weight:900; margin:0; } .s2 .page-header p { color:var(--txt-3); margin:.25rem 0 0; } .s2 .empty-state { text-align:center; padding:4rem 1rem; color:var(--txt-3); } /* Garde-fou : aucun SVG de contenu ne doit exploser (etat vide trophee geant) */ .s2-wrap svg:not([width]):not([height]) { max-width: 64px; max-height: 64px; } .s2-empty-big svg, .s2-empty svg { width: 54px !important; height: 54px !important; } /* ===== HERO V2 (fix image-dans-image : banner en fond, logo unique en badge) ===== */ .s2-hero { min-height: 360px; } .s2-hero-emblem { display: none !important; } /* plus de cadre flottant duplique */ .s2-hero-logo { width: clamp(60px, 8vw, 88px); height: auto; border-radius: 16px; margin-bottom: 1.1rem; box-shadow: 0 10px 28px rgba(0,0,0,.55); display: block; } .s2-hero-bg img { opacity: .6; object-position: right center; } .s2-hero-bg::after { background: linear-gradient(100deg, var(--panel) 30%, color-mix(in srgb,var(--panel) 78%,transparent) 50%, color-mix(in srgb,var(--panel) 25%,transparent) 76%, transparent); } /* ===== Bandeau "Rejoindre le serveur" ===== */ .s2-join { display:flex; align-items:center; gap:1.2rem; margin-top:1.4rem; padding:1.3rem 1.5rem; background: linear-gradient(120deg, var(--accent-soft), var(--panel) 58%); border:1px solid var(--accent-line); border-radius: var(--radius); flex-wrap:wrap; box-shadow: 0 4px 20px rgba(0,0,0,.3); } .s2-join-ic { width:48px; height:48px; border-radius:13px; background: linear-gradient(135deg,var(--accent),var(--accent-hover)); display:grid; place-items:center; flex-shrink:0; box-shadow:0 6px 18px var(--accent-soft); } .s2-join-ic svg { width:24px; height:24px; color:#fff; } .s2-join-txt { flex:1; min-width:220px; } .s2-join-txt h3 { margin:0 0 .25rem; font-size:1.15rem; } .s2-join-txt p { margin:0; color:var(--txt-2); font-size:.9rem; line-height:1.55; } /* ===== Section "Pourquoi nous rejoindre" ===== */ .s2-h2 { margin: .2rem 0 1.3rem; font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 900; letter-spacing: -.5px; background: linear-gradient(180deg,#fff 45%, var(--txt-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .s2-why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .s2-why-card { background: linear-gradient(165deg, var(--panel), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: .18s; } .s2-why-card:hover { border-color: var(--accent-line); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.45); } .s2-why-card .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: .9rem; } .s2-why-card .ico svg { width: 24px; height: 24px; color: var(--accent); } .s2-why-card h4 { margin: 0 0 .35rem; font-size: 1.02rem; } .s2-why-card p { margin: 0; color: var(--txt-3); font-size: .85rem; line-height: 1.55; } .s2-about { margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.3rem 1.5rem; } .s2-about h4 { margin: 0 0 .5rem; font-size: 1rem; } .s2-about p { margin: 0; color: var(--txt-2); line-height: 1.7; } /* ===== Section CARTELS (controle de territoires) ===== */ .s2-cartels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .s2-cartel { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--panel), var(--bg-soft)); border: 1px solid var(--line); border-top: 3px solid var(--cc, var(--accent)); border-radius: var(--radius); padding: 1.4rem; transition: .2s; } .s2-cartel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140px 90px at 82% -10%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 70%); } .s2-cartel:hover { transform: translateY(-5px); border-color: var(--cc); box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--cc) 45%, transparent); } .s2-cartel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; position: relative; } .s2-cartel-sector { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cc); } .s2-cartel-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 14px var(--cc); } .s2-cartel-name { margin: 0 0 .55rem; font-size: 1.15rem; font-weight: 900; line-height: 1.1; position: relative; } .s2-cartel-leader { display: flex; align-items: center; gap: .45rem; color: var(--txt-2); font-size: .85rem; font-weight: 600; margin-bottom: 1rem; } .s2-cartel-leader svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; } .s2-cartel-stats { display: flex; gap: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--line); } .s2-cartel-stats b { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; display: block; line-height: 1; } .s2-cartel-stats span { font-size: .66rem; color: var(--txt-3); text-transform: uppercase; letter-spacing: .5px; } /* Nav centree (retour Dylan) : les liens occupent le centre, marque a gauche, actions a droite */ .s2-links { justify-content: center; } /* ===== HERO obsidian (centré + grosses stats) ===== */ .s2-hero3 { position:relative; overflow:hidden; text-align:center; padding: clamp(3rem,7vw,5rem) clamp(1rem,4vw,2rem); border-radius:24px; border:1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-soft)); box-shadow: var(--shadow); } .s2-hero3-bg { position:absolute; inset:0; z-index:0; } .s2-hero3-bg img { width:100%; height:100%; object-fit:cover; opacity:.16; } .s2-hero3-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(130% 100% at 50% 0%, transparent, var(--panel) 78%); } .s2-hero3-in { position:relative; z-index:1; max-width:780px; margin:0 auto; } .s2-hero3 .s2-badge { margin:0 auto 1.2rem; } .s2-hero3 h1 { margin:.1rem 0 .6rem; font-size:clamp(2.4rem,6vw,4rem); font-weight:900; letter-spacing:-1.5px; line-height:1; background:linear-gradient(180deg,#fff 45%, color-mix(in srgb,var(--accent) 55%,#fff)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .s2-hero3-sub { color:var(--txt-2); font-size:1.1rem; margin:0 auto 2rem; max-width:560px; } .s2-hero3-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:0 auto 2rem; max-width:640px; } .s2-hero3-stats .hs .v { font-family:var(--mono); font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; line-height:1; } .s2-hero3-stats .hs .v.on { color:var(--green); } .s2-hero3-stats .hs .l { font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--txt-3); font-weight:600; margin-top:.4rem; } @media(max-width:560px){ .s2-hero3-stats{grid-template-columns:repeat(2,1fr);} } /* ===== Carte Statistiques serveur (obsidian server-card) ===== */ .s2-srvcard { margin-top:1.4rem; background:linear-gradient(165deg,var(--panel),var(--bg-soft)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.25); } .s2-srvcard-head { display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line); } .s2-srvcard-head svg { width:20px; height:20px; } .s2-srvcard-head h2 { margin:0; font-size:1.05rem; font-weight:800; flex:1; } .s2-srvcard-tag { font-family:var(--mono); font-size:.72rem; color:var(--txt-2); background:var(--panel-2); border:1px solid var(--line); padding:.25rem .6rem; border-radius:6px; } .s2-srvgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); } .s2-srvgrid .info { display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.4rem; border-right:1px solid var(--line); border-top:1px solid var(--line); transition:.15s; } .s2-srvgrid .info:hover { background:var(--panel-2); } .s2-srvgrid .info .ic { width:40px; height:40px; border-radius:11px; background:color-mix(in srgb,var(--c,#aeb2bd) 15%,transparent); display:grid; place-items:center; flex-shrink:0; color:var(--c,var(--txt-2)); } .s2-srvgrid .info .ic svg { width:20px; height:20px; } .s2-srvgrid .info .l { font-size:.7rem; color:var(--txt-3); text-transform:uppercase; letter-spacing:.4px; } .s2-srvgrid .info .v { font-family:var(--mono); font-size:1.18rem; font-weight:700; margin-top:.12rem; } /* ===== Hero3 nettoyé : fond sombre + lueur rouge (plus d'image fantôme) ===== */ .s2-hero3 { background: radial-gradient(110% 130% at 50% -20%, color-mix(in srgb,var(--accent) 17%,transparent), transparent 55%), linear-gradient(180deg, var(--panel), var(--bg-soft)); } .s2-hero3 h1 { background: linear-gradient(180deg, #ffffff, #c4c9d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 3px 24px color-mix(in srgb,var(--accent) 32%,transparent)); } .s2-hero3-stats { gap:0; max-width:680px; } .s2-hero3-stats .hs { border-right:1px solid var(--line); } .s2-hero3-stats .hs:last-child { border-right:0; } @media(max-width:560px){ .s2-hero3-stats .hs:nth-child(2){border-right:0;} } /* Carte stats : bordures plus douces, moins "tableur" */ .s2-srvgrid .info { border-color: color-mix(in srgb, var(--line) 55%, transparent); } .s2-srvcard-head { background: linear-gradient(180deg, var(--panel-2), transparent); } /* Hero3 : logo/banner affiché net et grand (identité), une seule fois */ .s2-hero3-logo { display:block; max-width: min(440px, 78%); height:auto; margin: .4rem auto 1.3rem; border-radius: 18px; filter: drop-shadow(0 14px 40px color-mix(in srgb,var(--accent) 38%,transparent)); } /* Hero3 compact : logo taille raisonnable, moins de hauteur (retour Dylan "trop gros") */ .s2-hero3 { padding-top: clamp(1.8rem,3.5vw,2.6rem); padding-bottom: clamp(1.8rem,3.5vw,2.6rem); } .s2-hero3-logo { max-width: 155px !important; margin: 0 auto .9rem !important; border-radius: 14px; } .s2-hero3 .s2-badge { margin-bottom: .9rem; } .s2-hero3 h1 { font-size: clamp(2rem,5vw,3rem); } .s2-hero3-sub { margin-bottom: 1.4rem; font-size: 1rem; } .s2-hero3-stats { margin-bottom: 1.4rem; } /* ===== Hero3 CINÉMATIQUE (recette brasil-mais : banner cover + overlay dégradé) ===== */ .s2-hero3.has-bg { background-image: var(--hero-img); background-size: cover; background-position: center; padding-top: clamp(120px, 20vw, 210px); } .s2-hero3-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,9,12,.22) 0%, rgba(8,9,12,.72) 52%, rgba(8,9,12,.97) 100%), radial-gradient(900px 420px at 50% 0%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 70%); } .s2-hero3.has-bg .s2-hero3-in { position: relative; z-index: 1; } /* --- Alliances (page factions) --- */ .s2-ally-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .85rem; margin-bottom: .45rem; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-size: .9rem; } .s2-ally-row:last-child { margin-bottom: 0; } .s2-btn-sm { padding: .4rem .8rem; font-size: .82rem; } /* --- Espace joueur (hub /compte) --- */ .s2-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .s2-acc-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .s2-acc-econ { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; } .s2-work-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } @media (max-width: 860px) { .s2-acc-grid { grid-template-columns: 1fr; } } .s2-muted { color: var(--txt-3); } .s2-acc-h { margin: 0 0 .6rem; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; } .s2-acc-sub { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; margin: 1rem 0 .5rem; } /* Solde dans le page-head */ .s2-acc-balance { text-align: right; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1.2rem; } .s2-acc-balance span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3); } .s2-acc-balance strong { font-size: 1.6rem; color: var(--accent); } /* Bande de stats */ .s2-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem; margin-bottom: 1.2rem; } .s2-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem .8rem; text-align: center; } .s2-stat .v { font-size: 1.5rem; font-weight: 800; line-height: 1; } .s2-stat .v.accent { color: var(--accent); } .s2-stat .l { font-size: .72rem; color: var(--txt-3); margin-top: .35rem; text-transform: uppercase; letter-spacing: .04em; } /* Barres de progression */ .s2-prog-block { } .s2-prog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-size: .9rem; } .s2-bar { height: 8px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; } .s2-bar-sm { height: 6px; } .s2-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; } .s2-pill { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; } /* Lignes sociales (faction, rivalités, primes) */ .s2-social-line { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft, var(--line)); font-size: .9rem; } .s2-social-line:last-child { border-bottom: none; } .s2-fac-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } /* Mini-carte "Ma position" sur /account (zoomable molette/drag/+−) */ .s2-acc-map { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, rgba(255,255,255,.08)); box-shadow: inset 0 0 40px rgba(0,0,0,.5); cursor: grab; touch-action: none; } .s2-acc-map.grabbing { cursor: grabbing; } /* Zoom par TAILLE du wrapper (pas transform:scale) -> l'image 8192px est rasterisée à la bonne dimension par le navigateur = NET (scale() floutait). */ .s2-acc-map-wrapper { position: absolute; top: 0; left: 0; will-change: left, top, width, height; } .s2-acc-map-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; pointer-events: none; image-rendering: auto; } .s2-acc-map-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; } .s2-acc-map-zoom button { width: 30px; height: 30px; border-radius: 7px; cursor: pointer; background: rgba(0,0,0,.62); color: #fff; border: 1px solid rgba(255,255,255,.18); font-size: 1.05rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background .15s, border-color .15s; } .s2-acc-map-zoom button:hover { background: var(--accent); border-color: var(--accent); } .s2-acc-map-marker { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; } .s2-acc-map-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 0 12px var(--accent); animation: s2-acc-pulse 2s infinite; } @keyframes s2-acc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35), 0 0 12px var(--accent); } 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 0 12px var(--accent); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 12px var(--accent); } } .s2-acc-map-label { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); background: rgba(0,0,0,.78); color: #fff; font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; white-space: nowrap; } /* Formulaire "poser une prime" sur /account */ .s2-bounty-form { display: flex; gap: .55rem; align-items: flex-start; flex-wrap: wrap; } .s2-bounty-target-wrap { position: relative; flex: 1; min-width: 160px; } .s2-bounty-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--panel, #14161c); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 8px; margin-top: 4px; overflow: hidden; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .s2-bounty-opt { padding: .5rem .7rem; font-size: .85rem; cursor: pointer; } .s2-bounty-opt:hover { background: rgba(255,255,255,.06); color: var(--accent); } .s2-bounty-empty { padding: .5rem .7rem; font-size: .8rem; color: var(--txt-3, #8a8f98); } /* Historique des transactions sur /account */ .s2-txn-list { display: flex; flex-direction: column; } .s2-txn { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); } .s2-txn:last-child { border-bottom: none; } .s2-txn-ico { font-size: 1.05rem; width: 1.6rem; text-align: center; flex: 0 0 auto; } .s2-txn-mid { flex: 1; min-width: 0; } .s2-txn-label { font-size: .85rem; font-weight: 600; color: var(--txt, #fff); } .s2-txn-reason { font-size: .72rem; color: var(--txt-3, #8a8f98); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s2-txn-right { text-align: right; flex: 0 0 auto; } .s2-txn-amount { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; } .s2-txn-date { font-size: .68rem; color: var(--txt-3, #8a8f98); } /* Missions : filtres compacts + lignes + pagination */ .s2-miss-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; } .s2-miss-filter { font-size: .74rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--txt-3, #9aa0a8); border: 1px solid var(--border, rgba(255,255,255,.08)); cursor: pointer; transition: all .15s; } .s2-miss-filter:hover { color: var(--txt, #fff); } .s2-miss-filter.is-active { background: var(--accent); color: #fff; border-color: var(--accent); } .s2-miss-list { display: flex; flex-direction: column; gap: .55rem; min-height: 230px; } .s2-miss-row { padding: .5rem .65rem; border-radius: 8px; background: rgba(255,255,255,.025); border: 1px solid var(--border, rgba(255,255,255,.05)); } .s2-miss-top { display: flex; align-items: center; justify-content: space-between; font-size: .84rem; margin-bottom: .35rem; } .s2-miss-name { font-weight: 600; color: var(--txt, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-miss-reward { display: block; font-size: .7rem; color: var(--accent); text-align: right; margin-top: .28rem; font-weight: 600; } .s2-miss-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .9rem; } .s2-miss-pg { width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; background: rgba(255,255,255,.05); color: var(--txt, #fff); border: 1px solid var(--border, rgba(255,255,255,.1)); display: flex; align-items: center; justify-content: center; transition: all .15s; } .s2-miss-pg:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); } .s2-miss-pg:disabled { opacity: .35; cursor: default; } .s2-miss-pg-info { font-size: .78rem; color: var(--txt-3, #9aa0a8); font-variant-numeric: tabular-nums; } /* Casino */ .s2-cz-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; } .s2-cz-game { display: flex; flex-direction: column; gap: .25rem; text-align: left; background: var(--card-bg); border: 1.5px solid var(--line); border-radius: 12px; padding: .85rem .9rem; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; color: var(--txt); font-family: inherit; } .s2-cz-game:hover { border-color: var(--accent); transform: translateY(-2px); } .s2-cz-game.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -8px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card-bg)); } .s2-cz-game-ico { font-size: 1.7rem; line-height: 1; } .s2-cz-game-name { font-weight: 800; font-size: .95rem; } .s2-cz-game-desc { font-size: .72rem; color: var(--txt-3); line-height: 1.25; } .s2-cz-play { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .s2-casino-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .s2-casino-opts { display: flex; gap: 1rem; align-items: flex-end; } .s2-field { display: flex; flex-direction: column; gap: .3rem; } .s2-field > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; } .s2-field small { font-size: .72rem; } .s2-casino-result { margin-top: 1rem; min-height: 1.6rem; font-size: 1.05rem; } .s2-casino-viz { font-size: 1.3rem; } /* Blackjack */ .s2-bj-row { display: flex; align-items: baseline; gap: .6rem; } .s2-bj-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; } .s2-bj-val { font-size: .9rem; font-weight: 700; color: var(--txt); } .s2-bj-cards { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } .s2-bj-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 42px; height: 58px; padding: .25rem .4rem; border-radius: 8px; background: #fff; color: #111; border: 1px solid rgba(0,0,0,.18); box-shadow: 0 3px 10px rgba(0,0,0,.28); font-weight: 800; font-size: 1.05rem; line-height: 1; } .s2-bj-card small { font-size: 1rem; margin-top: .15rem; } .s2-bj-card.s2-bj-red { color: #dc2626; } .s2-bj-card.s2-bj-back { background: linear-gradient(135deg, #1e293b, #334155); color: #94a3b8; font-size: 1.6rem; } .s2-bj-actions { display: flex; gap: .7rem; margin-top: .9rem; } /* Battlepass (page /battlepass) */ .s2-bp-gold { color: var(--gold, #f5c518); font-weight: 700; } .s2-bp-selector { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .s2-bp-pill { padding: .45rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--card-bg); border: 1px solid var(--line); color: var(--txt-2, var(--txt)); text-decoration: none; transition: all .15s; } .s2-bp-pill:hover { border-color: var(--accent); } .s2-bp-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); } .s2-bp-banner { margin-bottom: 1.25rem; border-radius: 14px; overflow: hidden; line-height: 0; } .s2-bp-banner img { width: 100%; max-height: 220px; object-fit: cover; } .s2-bp-progress { margin-bottom: 1.25rem; } .s2-bp-progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .s2-bp-tier-num { font-size: 1.35rem; font-weight: 800; color: var(--gold, #f5c518); } .s2-bp-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; margin-top: 1rem; } .s2-bp-tier { background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; transition: border-color .15s; } .s2-bp-tier.unlocked { border-color: color-mix(in srgb, var(--gold, #f5c518) 55%, var(--line)); background: color-mix(in srgb, var(--gold, #f5c518) 7%, var(--card-bg)); } .s2-bp-tier-head { display: flex; justify-content: space-between; align-items: center; } .s2-bp-tier-label { font-size: .8rem; font-weight: 700; color: var(--txt-3); text-transform: uppercase; letter-spacing: .04em; } .s2-bp-tier-ok { color: #22c55e; font-weight: 800; } .s2-bp-reward { display: flex; align-items: center; gap: .4rem; font-size: .82rem; flex-wrap: wrap; } .s2-bp-reward-emoji { font-size: 1.05rem; } .s2-bp-reward-tag { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 5px; } .s2-bp-reward.free .s2-bp-reward-tag { background: rgba(148,163,184,.18); color: #94a3b8; } .s2-bp-reward.premium .s2-bp-reward-tag { background: color-mix(in srgb, var(--gold, #f5c518) 22%, transparent); color: var(--gold, #f5c518); } .s2-bp-reward-val { font-weight: 600; } .s2-bp-lb { display: flex; flex-direction: column; margin-top: .75rem; } .s2-bp-lb-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .3rem; border-bottom: 1px solid var(--line); font-size: .88rem; } .s2-bp-lb-row:last-child { border-bottom: none; } .s2-bp-lb-row.me { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 8px; padding-left: .6rem; padding-right: .6rem; } .s2-bp-lb-rank { font-weight: 800; color: var(--accent); min-width: 38px; } .s2-bp-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-bp-lb-name a { color: var(--txt); text-decoration: none; } .s2-bp-lb-name a:hover { color: var(--accent); } .s2-bp-lb-tier { font-weight: 700; color: var(--gold, #f5c518); font-size: .82rem; } .s2-bp-lb-xp { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--txt-3); } .s2-bp-footer { margin-top: 1.25rem; padding: 1rem 1.2rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; font-size: .85rem; color: var(--txt-2, var(--txt)); } .s2-bp-footer code { background: rgba(0,0,0,.3); padding: .1rem .4rem; border-radius: 4px; color: var(--accent); } @media (max-width: 640px) { .s2-bp-lb-tier, .s2-bp-lb-xp { display: none; } } .s2-input { background: var(--card-bg); border: 1px solid var(--line); color: var(--txt); border-radius: 9px; padding: .5rem .7rem; font-size: .9rem; font-family: inherit; } .s2-input:focus { outline: none; border-color: var(--accent); } /* ============================================================ ADMINISTRATION DU SITE (site-admin) — design .s2-* Les classes admin-* / tab / stat-card existaient dans l'ancien site.css mais pas dans site-v2.css -> l'admin s'affichait sans style (texte empilé). ============================================================ */ .admin-header { margin: 1.2rem 0 1.4rem; } .admin-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 .3rem; } .admin-header-info { color: var(--txt-3, #8a8f98); font-size: .9rem; } /* Onglets */ .tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); padding-bottom: .6rem; } .tabs .tab { padding: .5rem .95rem; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--txt-3, #9aa0a8); text-decoration: none; transition: all .15s; border: 1px solid transparent; } .tabs .tab:hover { color: var(--txt, #fff); background: rgba(255,255,255,.04); } .tabs .tab.active { background: var(--accent); color: #fff; } /* Stat cards (vue d'ensemble) */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; } .stat-card { background: var(--panel, #14161c); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px; padding: 1.1rem 1rem; text-align: center; } .stat-card .stat-value { font-family: var(--mono, monospace); font-size: 1.7rem; font-weight: 800; color: var(--accent); line-height: 1; } .stat-card .stat-label { font-size: .72rem; color: var(--txt-3, #8a8f98); text-transform: uppercase; letter-spacing: .03em; margin-top: .4rem; } /* Cartes / sections admin */ .admin-section, .admin-card { background: var(--panel, #14161c); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 14px; padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; } .admin-section h2, .admin-card h2 { font-size: 1.1rem; margin: 0 0 1rem; } /* Formulaires */ .admin-form-group { margin-bottom: 1rem; } .admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .admin-label { display: block; font-size: .8rem; font-weight: 600; color: var(--txt-2, #c4c9d0); margin-bottom: .35rem; } .admin-input { width: 100%; background: var(--bg-soft, rgba(255,255,255,.04)); color: var(--txt, #fff); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 9px; padding: .6rem .75rem; font-size: .9rem; font-family: inherit; box-sizing: border-box; } .admin-input:focus { outline: none; border-color: var(--accent); } textarea.admin-input { resize: vertical; min-height: 70px; } /* Couleurs (theme) */ .admin-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .admin-color-card { background: var(--bg-soft, rgba(255,255,255,.03)); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 10px; padding: .9rem; } .admin-color-picker { width: 100%; height: 42px; border: none; border-radius: 8px; background: none; cursor: pointer; padding: 0; } .admin-theme-preview { border-radius: 12px; padding: 1.2rem; border: 1px solid var(--line, rgba(255,255,255,.1)); margin-top: 1rem; } /* Features / pages (toggles) */ .admin-feature-list, .admin-config-list { display: flex; flex-direction: column; gap: .5rem; } .admin-feature-item, .admin-config-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-soft, rgba(255,255,255,.03)); border: 1px solid var(--line, rgba(255,255,255,.07)); border-radius: 10px; padding: .8rem 1rem; } .admin-feature-name { font-weight: 600; font-size: .9rem; } .admin-feature-desc { font-size: .76rem; color: var(--txt-3, #8a8f98); margin-top: .15rem; } /* Toggle switch */ .admin-toggle-mini { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .admin-toggle-mini input { opacity: 0; width: 0; height: 0; } .admin-toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,.15); border-radius: 999px; cursor: pointer; transition: .2s; } .admin-toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; } .admin-toggle-mini input:checked + .admin-toggle-slider { background: var(--accent); } .admin-toggle-mini input:checked + .admin-toggle-slider::before { transform: translateX(20px); } /* Alertes */ .admin-alert { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1.2rem; font-size: .9rem; border: 1px solid; } .admin-alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); color: #4ade80; } @media (max-width: 640px) { .admin-form-row { grid-template-columns: 1fr; } } /* Zones d'upload d'images (logo, bannière, favicon) — admin site */ .img-upload-zone { position: relative; border: 2px dashed var(--line, rgba(255,255,255,.15)); border-radius: 12px; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: var(--bg-soft, rgba(255,255,255,.03)); transition: border-color .15s; } .img-upload-zone:hover { border-color: var(--accent); } .img-upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft, rgba(255,255,255,.06)); } .img-upload-small { min-height: 80px; max-width: 120px; } .img-upload-banner { min-height: 160px; } .img-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--txt-3, #8a8f98); font-size: .82rem; } .img-upload-placeholder svg { opacity: .6; } .img-upload-preview { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .img-preview-banner { width: 100%; height: 160px; object-fit: cover; } .img-preview-logo { max-height: 110px; } .img-preview-favicon { max-height: 72px; } .img-upload-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-weight: 700; font-size: .85rem; opacity: 0; transition: opacity .15s; } .img-upload-zone:hover .img-upload-overlay { opacity: 1; } .img-remove-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--txt-3, #8a8f98); margin-top: .5rem; cursor: pointer; } .form-hint { display: block; font-size: .72rem; color: var(--txt-3, #8a8f98); margin-top: .4rem; } /* Cartes/sections legacy de l'admin (classes .card/.card-header/.card-title + utilitaires). L'admin site utilise ces classes -> on leur donne l'aspect .s2 pour des sections lisibles. */ .s2 .card { background: var(--panel, #14161c); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 14px; padding: 1.3rem 1.4rem; } .card-header { margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line, rgba(255,255,255,.07)); } .card-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--txt, #fff); } .card-body { padding: 0; } .text-muted { color: var(--txt-3, #8a8f98) !important; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .d-flex { display: flex; } .gap-2 { gap: 1rem; } /* Derniers utilitaires/composants de l'admin (balayage complet 2026-06-13) */ .fw-bold { font-weight: 700; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .text-accent { color: var(--accent) !important; } .text-success { color: var(--green, #22c55e) !important; } .text-danger { color: var(--red, #ef4444) !important; } .player-link { color: var(--accent); text-decoration: none; font-weight: 600; } .player-link:hover { text-decoration: underline; } .rules-section-item { background: var(--bg-soft, rgba(255,255,255,.03)); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 10px; margin-bottom: .6rem; overflow: hidden; } .rules-section-header { font-weight: 600; } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } /* Aperçu live du thème (mockup de site dans l'admin) */ .tp-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.1)); box-shadow: inset 0 0 60px rgba(0,0,0,.4); transition: background .15s; } .tp-nav { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; transition: background .15s; } .tp-logo { font-weight: 800; font-size: .85rem; letter-spacing: .02em; transition: color .15s; } .tp-nav-links { display: flex; gap: .5rem; margin-left: 1rem; } .tp-nav-links i { width: 26px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); display: block; } .tp-btn { margin-left: auto; font-size: .72rem; font-weight: 700; color: #fff; padding: .35rem .7rem; border-radius: 7px; cursor: default; transition: background .15s; } .tp-btn-ghost { font-size: .72rem; font-weight: 700; padding: .35rem .7rem; border-radius: 7px; border: 1px solid; background: transparent; cursor: default; transition: .15s; } .tp-hero { text-align: center; padding: 2.2rem 1rem; } .tp-hero-badge { display: inline-block; font-size: .62rem; font-weight: 800; color: #fff; padding: .25rem .6rem; border-radius: 999px; margin-bottom: .7rem; letter-spacing: .04em; } .tp-hero-title { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: .35rem; } .tp-hero-sub { font-size: .78rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; } .tp-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; padding: 0 1rem 1.2rem; } .tp-card { border-radius: 10px; padding: .8rem; text-align: center; border: 1px solid rgba(255,255,255,.06); transition: background .15s; } .tp-card-v { display: block; font-family: var(--mono, monospace); font-weight: 800; font-size: 1.3rem; transition: color .15s; } .tp-card-l { display: block; font-size: .62rem; color: rgba(255,255,255,.5); text-transform: uppercase; margin-top: .2rem; }