/* =====================================================================
   GreyLine V2 — PVP Survival · The Isle Evrima
   Direction : portail gaming moderne. Navigation EN HAUT, accent azur,
   surfaces arrondies, Archivo + DM Sans. Bleu profond conservé.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --abyss:#0a1020; --deep:#0e1626; --ocean:#1b3a6b; --shallow:#27538f;
  --teal:#2f8fd6; --turq:#3d8bff; --biolum:#82b4ff;
  --bone:#eef3fb; --sand:#c8b78f; --stone:#7c8a9c; --stone-dk:#33415a;
  --kelp:#2f6b54; --kelp-lt:#4f9b78; --blood:#ff6a4d; --ember:#ffc266;
  --ink:#e6edf8; --ink-soft:#9fb0c8; --ink-faint:#66788f;
  --panel:rgba(19,29,49,.72); --panel-2:rgba(24,36,60,.55);
  --glass:rgba(61,139,255,.10);
  --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.045); --line-strong:rgba(255,255,255,.16);
  --rad:14px; --rad-sm:10px; --rad-lg:20px; --nav-h:66px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.85);
  --glow:0 10px 30px -12px rgba(61,139,255,.55);
  --f-display:'Archivo',sans-serif; --f-deco:'Archivo',sans-serif;
  --f-body:'DM Sans',sans-serif; --f-ui:'DM Sans',sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--f-body); color:var(--ink); background:var(--abyss); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--turq); color:#06101f; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--stone-dk); border-radius:20px; border:2px solid var(--abyss); }

/* ====================== ARRIÈRE-PLAN ====================== */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-grad{ background:
  radial-gradient(110% 70% at 50% -8%, rgba(61,139,255,.16), transparent 50%),
  radial-gradient(90% 70% at 90% 110%, rgba(27,58,107,.30), transparent 55%),
  linear-gradient(180deg,#0c1426 0%, #0a1020 55%, #070b16 100%); }
.bg-grid{ background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:70px 70px; opacity:.28; }
.bg-scan{ display:none; }
.bg-vignette{ box-shadow:inset 0 0 280px 100px rgba(0,0,0,.55); }
.bg-grain{ opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================ NAV EN HAUT ============================ */
.topnav{ position:sticky; top:0; z-index:50; background:rgba(9,15,28,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.topnav-inner{ max-width:1320px; margin:0 auto; height:var(--nav-h); display:flex; align-items:center; gap:22px; padding:0 clamp(16px,3vw,32px); }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.brand .crest{ width:38px; height:38px; border-radius:10px; background:linear-gradient(150deg,var(--turq),#1b3a6b); display:grid; place-items:center; color:#06101f; box-shadow:var(--glow); }
.brand .crest svg{ width:21px; height:21px; }
.brand h1{ font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:-.3px; color:var(--bone); line-height:1; }
.brand small{ display:block; font-family:var(--f-ui); font-weight:600; letter-spacing:2.5px; font-size:9px; color:var(--turq); text-transform:uppercase; margin-top:2px; }

.mainnav{ display:flex; align-items:center; gap:4px; flex:1; }
.navitem{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px;
  font-family:var(--f-body); font-weight:500; font-size:14px; color:var(--ink-soft); text-decoration:none;
  background:transparent; border:0; cursor:pointer; transition:.16s; white-space:nowrap; }
.navitem:hover{ color:var(--bone); background:var(--glass); }
.navitem.active{ color:var(--bone); }
.navitem.active::after{ content:""; }
a.navitem.active{ background:var(--glass); box-shadow:inset 0 0 0 1px var(--line-strong); }
.navitem-btn .cv{ display:grid; place-items:center; transition:transform .25s; opacity:.7; }
.navitem-btn .cv svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; transform:rotate(90deg); }
.navgroup{ position:relative; }
.navgroup.open .navitem-btn .cv{ transform:rotate(180deg); }
.navgroup.open > .navitem-btn{ color:var(--bone); background:var(--glass); }

.dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:212px; padding:7px;
  background:#0f1a2e; border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.18s; z-index:60; }
.navgroup:hover .dropdown, .navgroup.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.navgroup:hover::after{ content:""; position:absolute; top:100%; left:0; right:0; height:12px; }
.dropitem{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; text-decoration:none;
  font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:.14s; }
.dropitem .ic{ display:grid; place-items:center; width:18px; height:18px; opacity:.7; }
.dropitem .ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }
.dropitem:hover{ background:var(--glass); color:var(--bone); }
.dropitem.active{ color:var(--turq); background:var(--glass); }
.dropitem.active .ic{ opacity:1; }

.nav-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.rate-badge{ font-family:var(--f-ui); font-weight:600; letter-spacing:.6px; font-size:11px; text-transform:uppercase;
  padding:6px 11px; border-radius:8px; color:var(--turq); border:1px solid var(--line-strong); background:rgba(61,139,255,.08); }
.btn-steam{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-body); font-weight:600; font-size:13px;
  padding:9px 15px; border-radius:10px; cursor:pointer; color:#06101f; border:0;
  background:linear-gradient(120deg,var(--turq),var(--shallow)); transition:.2s; }
.btn-steam:hover{ box-shadow:var(--glow); transform:translateY(-1px); }
.btn-steam svg{ width:17px; height:17px; fill:#06101f; }
.live{ display:none; }
.user-chip{ display:none; align-items:center; gap:9px; padding:5px 13px 5px 5px; border-radius:30px; background:var(--glass); border:1px solid var(--line); }
.user-chip img{ width:30px; height:30px; border-radius:50%; }
.user-chip b{ font-family:var(--f-body); font-weight:600; font-size:13px; }
.user-chip small{ display:block; font-size:9px; color:var(--turq); letter-spacing:1px; }
.navtoggle{ display:none; background:var(--glass); border:1px solid var(--line); color:var(--ink); width:42px; height:42px; border-radius:11px; cursor:pointer; }
.navtoggle svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; vertical-align:middle; }

/* ============================ CONTENU ============================ */
.view{ position:relative; z-index:1; max-width:1320px; width:100%; margin:0 auto; padding:42px clamp(16px,3vw,32px) 100px; }

/* ===================== COMPOSANTS ===================== */
.page-head{ margin-bottom:34px; }
.kicker{ font-family:var(--f-ui); letter-spacing:3px; text-transform:uppercase; font-size:11px; font-weight:600; color:var(--turq); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.kicker::before{ content:""; width:20px; height:2px; border-radius:2px; background:var(--turq); display:inline-block; }
.page-title{ font-family:var(--f-display); font-weight:800; font-size:clamp(30px,4.4vw,50px); line-height:1.02; letter-spacing:-1px; color:var(--bone); }
.page-sub{ margin-top:12px; color:var(--ink-soft); font-size:16px; max-width:680px; line-height:1.6; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--rad); padding:22px; box-shadow:var(--shadow); position:relative; }

.grid{ display:grid; gap:18px; }
.g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); } .g-auto{ grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); }

.btn{ font-family:var(--f-body); font-weight:600; font-size:14px; padding:11px 20px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line-strong); color:var(--ink); background:rgba(24,36,60,.6); transition:.18s; display:inline-flex; gap:8px; align-items:center; }
.btn:hover{ border-color:var(--turq); color:var(--bone); }
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; }
.btn-primary{ background:linear-gradient(120deg,var(--turq),var(--shallow)); color:#06101f; border:0; }
.btn-primary:hover{ box-shadow:var(--glow); transform:translateY(-1px); }
.btn-danger{ background:transparent; color:#ff9683; border:1px solid rgba(255,106,77,.5); }
.btn-danger:hover{ background:rgba(255,106,77,.12); color:#ffb4a4; }
.btn-ghost{ background:transparent; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.chip{ font-family:var(--f-ui); font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border-radius:30px; border:1px solid var(--line); color:var(--ink-soft); }
.chip.carn{ color:#ff9683; border-color:rgba(255,106,77,.4); background:rgba(255,106,77,.08); }
.chip.herb{ color:#7fdcab; border-color:rgba(79,155,120,.45); background:rgba(79,155,120,.08); }
.chip.omni{ color:#ffd28a; border-color:rgba(255,194,102,.4); background:rgba(255,194,102,.08); }

.field{ width:100%; padding:12px 15px; border-radius:11px; font-family:var(--f-body); background:rgba(6,11,22,.6); border:1px solid var(--line); color:var(--ink); font-size:14.5px; }
.field:focus{ outline:0; border-color:var(--turq); }
select.field{ cursor:pointer; }

.stat-row{ margin:10px 0; }
.stat-row .lab{ display:flex; justify-content:space-between; font-family:var(--f-ui); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.stat-row .lab b{ color:var(--biolum); }
.bar{ height:7px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--shallow),var(--turq)); width:0; transition:width .9s cubic-bezier(.2,.7,.2,1); }
.bar.danger > i{ background:linear-gradient(90deg,#8a2a1c,var(--blood)); }
.bar.warn > i{ background:linear-gradient(90deg,#8a6a1c,var(--ember)); }

.stat-tile{ text-align:center; }
.stat-tile .num{ font-family:var(--f-display); font-weight:800; font-size:36px; color:var(--bone); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.stat-tile .cap{ font-family:var(--f-ui); letter-spacing:1.5px; font-size:10px; font-weight:600; text-transform:uppercase; color:var(--ink-faint); margin-top:9px; }

.modal-scrim{ position:fixed; inset:0; z-index:90; background:rgba(4,8,16,.78); backdrop-filter:blur(6px); display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:.26s; }
.modal-scrim.open{ opacity:1; visibility:visible; }
.modal{ width:min(860px,100%); max-height:88vh; overflow:auto; background:#0f1a2e; border:1px solid var(--line-strong); border-radius:var(--rad-lg); box-shadow:var(--shadow); transform:translateY(16px) scale(.99); transition:.3s; }
.modal-scrim.open .modal{ transform:none; }
.modal-head{ display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:#0f1a2e; z-index:2; }
.modal-head h3{ font-family:var(--f-display); font-weight:700; font-size:21px; color:var(--bone); letter-spacing:-.3px; }
.modal-body{ padding:22px; }
.modal-x{ margin-left:auto; background:transparent; border:1px solid var(--line); color:var(--ink-soft); width:34px; height:34px; border-radius:9px; cursor:pointer; display:grid; place-items:center; }
.modal-x:hover{ color:var(--bone); border-color:var(--line-strong); }
.modal-x svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }

.empty{ text-align:center; padding:66px 20px; color:var(--ink-soft); }
.empty .big{ font-size:30px; margin-bottom:12px; color:var(--ink-faint); }
.empty .big svg{ width:44px; height:44px; stroke:currentColor; fill:none; stroke-width:1.3; }
.empty h3{ font-family:var(--f-display); font-weight:700; color:var(--bone); font-size:20px; margin-bottom:8px; }

#toasts{ position:fixed; bottom:24px; right:24px; z-index:120; display:flex; flex-direction:column; gap:10px; }
.toast{ font-family:var(--f-body); font-weight:500; font-size:13.5px; padding:12px 16px; border-radius:11px; background:#0f1a2e; border:1px solid var(--line-strong); color:var(--ink); box-shadow:var(--shadow); animation:toastin .35s cubic-bezier(.2,.8,.2,1); max-width:320px; border-left:3px solid var(--stone); }
.toast.ok{ border-left-color:var(--turq); } .toast.bad{ border-left-color:var(--blood); }
@keyframes toastin{ from{ transform:translateX(30px); opacity:0; } }

.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ font-family:var(--f-ui); font-weight:600; letter-spacing:.8px; text-transform:uppercase; font-size:10px; color:var(--ink-faint); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.tbl tr:hover td{ background:var(--glass); color:var(--ink); }

.view > *{ animation:fadeUp .5s both; }
.view > *:nth-child(2){ animation-delay:.05s; } .view > *:nth-child(3){ animation-delay:.1s; } .view > *:nth-child(4){ animation-delay:.15s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

.row{ display:flex; gap:13px; align-items:center; flex-wrap:wrap; }
.between{ justify-content:space-between; }
.mt{ margin-top:18px; } .mt-lg{ margin-top:34px; }
.muted{ color:var(--ink-faint); } .hl{ color:var(--biolum); } .center{ text-align:center; }
.shimmer{ color:var(--bone); }

/* ============================ MOBILE ============================ */
.navscrim{ position:fixed; inset:0; background:rgba(4,8,16,.6); backdrop-filter:blur(3px); z-index:45; opacity:0; visibility:hidden; transition:.3s; }
body.nav-open .navscrim{ opacity:1; visibility:visible; }
@media (max-width:900px){
  .navtoggle{ display:grid; place-items:center; }
  .mainnav{ position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:#0c1426; border-bottom:1px solid var(--line); padding:14px clamp(16px,4vw,28px) 26px; max-height:calc(100vh - var(--nav-h)); overflow:auto;
    transform:translateY(-130%); transition:transform .35s cubic-bezier(.7,0,.2,1); z-index:48; }
  body.nav-open .mainnav{ transform:translateY(0); }
  .navitem{ font-size:16px; padding:12px 14px; }
  .navgroup{ border-top:1px solid var(--line-soft); padding-top:4px; margin-top:4px; }
  .navitem-btn{ width:100%; justify-content:space-between; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; min-width:0; border:0; box-shadow:none; background:transparent; padding:0 0 4px 10px; }
  .navgroup .navitem-btn .cv{ display:none; }
  .nav-actions .rate-badge{ display:none; }
}
@media (max-width:980px){ .g-4{ grid-template-columns:repeat(2,1fr);} .g-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } .user-chip small{ display:none; } }

/* hero responsive (page accueil) */
@media (max-width:820px){ .hero-grid{ grid-template-columns:1fr!important; } .hero-art{ display:none; } }