/* LOSBARDLAND — Zone de quarantaine: gris froid, ambre d'alerte, papier fané.
   Inspirations: STALKER 2 (interface, ambre, brume) et The Walking Dead (affiches usées, tampons, silhouettes). */

:root {
  --bg: #0b0c0a;
  --bg-2: #0e100d;
  --panel: #111512;
  --panel-2: #161b17;
  --line: rgba(214, 222, 201, 0.1);
  --line-2: rgba(214, 222, 201, 0.22);
  --text: #dfe3d6;
  --muted: #959d90;
  --faint: #667061;
  --amber: #cf4a38;
  --amber-hi: #ee6d58;
  --blood: #b6402f;
  --moss: #8aa264;
  --paper: #cfc8b0;
  --bone: #ddd6c0;
  --blood-deep: #8f1f16;
  --ink: #171813;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --type: 'Special Elite', 'Courier New', monospace;
  --header-h: 68px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--bg); scrollbar-color: #2c332c var(--bg); scrollbar-width: thin; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--amber); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #232a23; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

img, svg { max-width: 100%; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hi); }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; font-weight: 700; line-height: 1.02; text-transform: uppercase; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--mono); font-size: 0.86em; color: var(--amber-hi); background: rgba(207, 74, 56, 0.09); padding: 2px 6px; }
:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 900px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--amber); color: #0a0b0a; padding: 10px 16px; font-family: var(--mono); font-weight: 500; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ boutons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; overflow: hidden;
  font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 28px; line-height: 1.2;
  background: rgba(255, 255, 255, 0.04); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary { background: #a8271d; color: #f4eee1; box-shadow: none; }
.btn-primary:hover { background: #c3352a; color: #fff6ea; transform: translateY(-2px); }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 0.7s ease; pointer-events: none; }
.btn-primary:hover::after { left: 130%; }
.btn-ghost { background: rgba(255, 255, 255, 0.03); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: rgba(207, 74, 56, 0.1); color: var(--amber-hi); box-shadow: inset 0 0 0 1px var(--amber); transform: translateY(-2px); }
.btn-small { padding: 9px 16px; font-size: 11.5px; }
.btn-block { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--amber); font: inherit; text-decoration: underline; cursor: pointer; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* ------------------------------------------------------------ en-tete */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(9, 11, 10, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background 0.3s ease, border-color 0.3s ease; }
.site-header.scrolled { background: rgba(9, 11, 10, 0.95); border-bottom-color: var(--line-2); }
.header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1360px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); flex: 0 0 auto; }
.brand:hover { color: var(--text); }
.brand-mark { width: 34px; height: 34px; color: var(--amber); }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: 0.1em; line-height: 1; white-space: nowrap; }
.brand-name span { color: var(--amber); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; white-space: nowrap; transition: color 0.15s ease; }
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--amber-hi); }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav a.active::after, .nav a:hover::after { transform: scaleX(1); }
.nav-mods { color: var(--text) !important; }
.nav-auth-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.auth-area { display: flex; align-items: center; gap: 10px; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); padding: 8px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; cursor: pointer; }
.user-chip:hover { border-color: var(--amber); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 8px rgba(134, 162, 95, 0.8); }
.badge { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line-2); color: var(--muted); }
.badge-pve { color: var(--moss); border-color: rgba(134, 162, 95, 0.5); }
.badge-pvp { color: #e0705e; border-color: rgba(182, 64, 47, 0.6); }
.badge-tag { color: var(--amber-hi); border-color: rgba(207, 74, 56, 0.5); }
.badge-beta { color: var(--text); border-color: var(--line-2); }

.burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line-2); cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0 11px; }
.burger span { display: block; height: 2px; background: var(--text); transition: transform 0.2s ease, opacity 0.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ accueil: le mur barricade */
.hero { position: relative; background: #0b0c0a; isolation: isolate; overflow: hidden; --sky: clamp(300px, 44vh, 470px); }
.hero-art { position: relative; z-index: 0; height: var(--sky); overflow: hidden; }
.sky { position: absolute; left: 0; top: -60px; width: 100%; height: calc(100% + 60px); display: block; transform: translateY(calc(var(--py, 0px) * 0.5)); }
.mist { animation: mistdrift 70s ease-in-out infinite alternate; }
.mist.m2 { animation-duration: 48s; animation-direction: alternate-reverse; }
@keyframes mistdrift { from { transform: translateX(-160px); } to { transform: translateX(160px); } }
.peeks { position: absolute; inset: 0; pointer-events: none; }
.peek { position: absolute; bottom: -30px; width: clamp(84px, 11vw, 156px); height: auto; transform-origin: 50% 100%; animation: reach 4.6s ease-in-out infinite alternate; }
.peek.p1 { left: 8%; }
.peek.p2 { left: 46%; bottom: -44px; width: clamp(72px, 9vw, 128px); animation-duration: 5.4s; animation-delay: -2s; }
.peek.p3 { right: 11%; animation-duration: 5s; animation-delay: -1s; }
@keyframes reach { from { transform: rotate(-2.4deg) translateY(6px); } to { transform: rotate(2.6deg) translateY(-3px); } }
.hero-grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, transparent 45%, rgba(6, 7, 6, 0.7) 100%), linear-gradient(180deg, rgba(8, 9, 8, 0.5) 0%, transparent 30%); }
.fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.wire { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--sky) - 28px); height: 46px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='46'><g fill='none' stroke='%23101110' stroke-width='3'><path d='M0 18Q20 8 40 18T80 18T120 18T160 18'/><path d='M0 28Q20 38 40 28T80 28T120 28T160 28'/></g><g stroke='%23101110' stroke-width='2.4' stroke-linecap='round'><path d='M32 11l16 14M48 11l-16 14'/><path d='M112 11l16 14M128 11l-16 14'/><path d='M72 21l14 14M86 21l-14 14'/></g></svg>") repeat-x center / auto 46px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)); pointer-events: none; }

.wall { position: relative; z-index: 3; padding: 104px 0 150px; overflow: hidden;
  background:
    linear-gradient(0deg, #0b0c0a, transparent 140px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0 3px, rgba(255, 255, 255, 0.045) 3px 4px, transparent 4px 143px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 211px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.22' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -0.4'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .8  0 0 0 .9 -.42'/></filter><rect width='100%' height='100%' fill='%2331291f'/><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)' opacity='.22'/></svg>");
  clip-path: polygon(0 14px, 3% 6px, 5% 18px, 9% 4px, 13% 12px, 18% 0, 22% 9px, 28% 3px, 33% 14px, 39% 5px, 44% 0, 50% 11px, 57% 4px, 63% 15px, 69% 2px, 74% 10px, 81% 5px, 87% 16px, 92% 3px, 96% 12px, 100% 6px, 100% 100%, 0 100%); }
.wall::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.62) 100%); }
.wall::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(125, 26, 18, 0.55), transparent) 7% 0 / 3px 170px no-repeat,
    linear-gradient(180deg, rgba(125, 26, 18, 0.45), transparent) 21% 0 / 2px 110px no-repeat,
    linear-gradient(180deg, rgba(95, 62, 30, 0.5), transparent) 38% 0 / 4px 230px no-repeat,
    linear-gradient(180deg, rgba(125, 26, 18, 0.5), transparent) 61% 0 / 3px 150px no-repeat,
    linear-gradient(180deg, rgba(95, 62, 30, 0.5), transparent) 77% 0 / 5px 270px no-repeat,
    linear-gradient(180deg, rgba(125, 26, 18, 0.5), transparent) 93% 0 / 3px 120px no-repeat; }
.beam { position: absolute; left: -3%; width: 106%; height: 58px; z-index: 1; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.22' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -0.4'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .8  0 0 0 .9 -.42'/></filter><rect width='100%' height='100%' fill='%2331291f'/><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)' opacity='.22'/></svg>") #231e17; box-shadow: 0 9px 16px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 0 rgba(0, 0, 0, 0.5); filter: brightness(0.82); }
.beam::before, .beam::after { content: ''; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a9d93, #3b3d38 60%, #121311); }
.beam::before { left: 5%; } .beam::after { right: 5%; }
.beam.b1 { top: 54%; transform: rotate(-1.2deg); }
.beam.b2 { bottom: 15%; transform: rotate(0.9deg); }
.beam.diag { top: 16%; left: 24%; width: 66%; height: 52px; transform: rotate(-10deg); transform-origin: left center; }
.paint-note { position: absolute; z-index: 1; left: 3.5%; bottom: 7%; font-family: 'Permanent Marker', cursive; font-size: clamp(22px, 2.4vw, 34px); color: rgba(228, 222, 202, 0.7); transform: rotate(-7deg); letter-spacing: 0.04em; }
.paint-x { position: absolute; z-index: 1; right: 3%; bottom: 4%; width: 96px; height: 96px; opacity: 0.75; transform: rotate(8deg);
  background: linear-gradient(45deg, transparent 44%, rgba(168, 39, 29, 0.85) 44% 54%, transparent 54%), linear-gradient(-45deg, transparent 44%, rgba(168, 39, 29, 0.85) 44% 54%, transparent 54%); }

.wall-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 390px); gap: 56px; align-items: center; }
.wall-copy { transform: rotate(-1.6deg); }
.eyebrow { font-family: var(--type); font-size: 14px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bone); opacity: 0.85; margin-bottom: 6px; }
.hero h1 { font-family: 'Rubik Wet Paint', var(--display); font-weight: 400; font-size: clamp(38px, 9.4vw, 112px); line-height: 1.02; letter-spacing: 0; text-transform: uppercase; color: #b3281d; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 34px rgba(150, 22, 14, 0.4); margin: 4px 0 18px; word-break: normal; }
.tagline { font-family: 'Permanent Marker', cursive; font-weight: 400; text-transform: none; font-size: clamp(22px, 2.9vw, 40px); letter-spacing: 0.02em; line-height: 1.2; color: #e8e2ce; transform: rotate(-1deg); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); margin: 0; }
.tagline em { font-style: normal; color: #f08b79; }

.notice { position: relative; padding: 38px 30px 30px; color: var(--ink); transform: rotate(1.8deg);
  background: radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.35), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(80, 66, 40, 0.3), transparent 55%), linear-gradient(180deg, #d4cdb5, #c4bba0);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.6), inset 0 0 70px rgba(90, 76, 46, 0.35); }
.notice::before, .notice::after { content: ''; position: absolute; top: -11px; width: 76px; height: 24px; background: rgba(232, 224, 190, 0.6); border: 1px solid rgba(120, 108, 70, 0.3); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.notice::before { left: 22px; transform: rotate(-7deg); } .notice::after { right: 22px; transform: rotate(6deg); }
.notice-title { display: block; font-family: var(--type); font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; color: #6b1f17; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid rgba(23, 24, 19, 0.35); }
.notice .lead { margin: 0 0 22px; font-family: var(--type); font-size: 17px; line-height: 1.55; color: var(--ink); max-width: none; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.notice .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.notice .btn-ghost:hover { background: rgba(143, 31, 22, 0.12); color: #6b1f17; box-shadow: inset 0 0 0 2px #6b1f17; }

@media (min-width: 1101px) { .hero h1 { font-size: clamp(60px, 6.1vw, 88px); } }

/* ------------------------------------------------------------ fiche du serveur */
.statusbar-wrap { position: relative; z-index: 5; margin-top: -58px; padding-bottom: 8px; }
.statusbar { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; background: rgba(13, 16, 14, 0.96); border: 1px solid var(--line-2); border-top: 2px solid var(--amber); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.sb-title { display: flex; flex-direction: column; justify-content: center; padding: 14px 24px; border-right: 1px solid var(--line); font-family: var(--mono); text-transform: uppercase; }
.sb-title span { font-size: 11.5px; letter-spacing: 0.18em; color: var(--amber); }
.sb-title small { font-size: 11px; letter-spacing: 0.18em; color: var(--faint); }
.sb-grid { display: grid; grid-template-columns: 1.7fr repeat(5, 1fr); margin: 0; }
.sb-cell { position: relative; padding: 14px 20px; border-right: 1px solid var(--line); min-width: 0; }
.sb-cell dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.sb-cell dd { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; font-size: 15.5px; color: var(--text); }
.sb-cell::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); transform: scaleX(0); transition: transform 0.25s ease; }
.sb-cell:hover::after { transform: scaleX(1); }
#ip-value { font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.04em; word-break: break-all; }
#ip-value.pending::after { content: '_'; margin-left: 3px; color: var(--amber); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.sb-cta { display: flex; align-items: center; padding: 12px 20px; }

/* ------------------------------------------------------------ sections */
.section { position: relative; padding: 112px 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-alt::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(214, 222, 201, 0.018) 22px 23px); }
.section > .wrap { position: relative; }
.sec-head { max-width: 780px; margin-bottom: 52px; }
.sec-head-sub { margin-top: 92px; }
.sec-id { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.sec-id span { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border: 1px solid var(--amber); font-size: 11.5px; letter-spacing: 0.08em; }
.sec-head h2 { font-weight: 800; font-size: clamp(38px, 5.2vw, 68px); letter-spacing: 0.02em; margin-bottom: 18px; position: relative; padding-bottom: 20px; }
.sec-head h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; background: var(--amber); transition: width 0.7s ease 0.2s; }
.js .sec-head:not(.in) h2::after { width: 0; }
.sec-lead { color: var(--muted); font-size: 18px; margin: 0; max-width: 720px; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* dossiers (modes de jeu) */
.dossier, .note, .faction, .install, .ws-card, .mod-card {
  position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.dossier::before, .faction::before, .mod-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 16px; height: 16px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); pointer-events: none; }
.dossier::after, .faction::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-bottom: 2px solid var(--line-2); border-right: 2px solid var(--line-2); pointer-events: none; transition: border-color 0.25s ease; }
.dossier:hover, .faction:hover, .note:hover, .ws-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5); }
.dossier:hover::after, .faction:hover::after { border-color: var(--amber); }
.dossier { padding: 30px 28px 28px; }
.dossier > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.file { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.dossier h3 { font-weight: 700; font-size: 34px; letter-spacing: 0.03em; margin-bottom: 12px; }
.dossier p { color: var(--muted); }
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 11px; border: 1px solid; }
.tag-pve { color: var(--moss); border-color: rgba(134, 162, 95, 0.55); background: rgba(134, 162, 95, 0.08); }
.tag-pvp { color: #e0705e; border-color: rgba(182, 64, 47, 0.6); background: rgba(182, 64, 47, 0.1); }
.tag-trade { color: var(--amber-hi); border-color: rgba(207, 74, 56, 0.55); background: rgba(207, 74, 56, 0.08); }
.ticks { list-style: none; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.ticks li { position: relative; padding: 6px 0 6px 22px; font-size: 15.5px; color: var(--text); }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 0.95em; width: 8px; height: 8px; background: var(--amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* notes (pourquoi nous rejoindre) */
.note { padding: 26px 26px 24px; border-left: 2px solid var(--line-2); }
.note:hover { border-left-color: var(--amber); }
.note-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-2); color: var(--amber); margin-bottom: 18px; transition: background 0.25s ease, color 0.25s ease; }
.note-ico svg { width: 24px; height: 24px; }
.note:hover .note-ico { background: var(--amber); color: #0a0b0a; }
.note h3 { font-weight: 700; font-size: 26px; letter-spacing: 0.03em; margin-bottom: 8px; }
.note p { color: var(--muted); margin: 0; font-size: 16px; }

/* factions */
.faction { padding: 28px 26px; display: flex; flex-direction: column; }
.f-emblem { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--amber); color: var(--amber); margin-bottom: 18px; position: relative; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(207, 74, 56, 0.07); }
.f-emblem svg { width: 30px; height: 30px; }
.f-emblem b { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: 0.02em; }
.faction h3 { font-weight: 700; font-size: 30px; letter-spacing: 0.03em; }
.f-tag { font-family: var(--mono); color: var(--amber); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 8px 0 14px; }
.faction p { color: var(--muted); font-size: 16px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 14px; }
.tags li { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; color: var(--amber); border: 1px solid rgba(207, 74, 56, 0.4); background: rgba(207, 74, 56, 0.06); }

.mods-know { margin-top: 36px; padding: 26px 30px; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.mods-know h3 { font-weight: 700; font-size: 28px; letter-spacing: 0.04em; margin-bottom: 12px; }
.mods-know ul { list-style: none; }
.mods-know li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.mods-know li::before { content: ''; position: absolute; left: 4px; top: 1.2em; width: 8px; height: 8px; background: var(--amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mods-know b { color: var(--text); font-weight: 600; }

/* economie */
.eco { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
.eco-steps { list-style: none; counter-reset: eco; display: grid; gap: 14px; }
.eco-steps li { counter-increment: eco; position: relative; padding: 18px 20px 18px 78px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); color: var(--muted); }
.eco-steps li::before { content: counter(eco); position: absolute; left: 0; top: 0; bottom: 0; width: 58px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 36px; color: var(--amber); border-right: 1px solid var(--line); background: rgba(207, 74, 56, 0.05); }
.eco-steps b { color: var(--text); font-weight: 600; }
.eco-note { margin: 22px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.eco-note strong { color: var(--amber-hi); font-weight: 500; }
.trade { background: linear-gradient(180deg, #151a15, #0f130f); border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); position: relative; }
.trade::before { content: ''; display: block; height: 10px; background: repeating-linear-gradient(-45deg, var(--amber) 0 10px, #15130b 10px 20px); }
.trade > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 26px 12px; }
.trade > header span { font-family: var(--display); font-weight: 800; font-size: 32px; text-transform: uppercase; letter-spacing: 0.06em; }
.trade > header small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.trade table { width: 100%; border-collapse: collapse; }
.trade th, .trade td { padding: 10px 26px; border-top: 1px dashed var(--line); text-align: left; font-weight: 400; font-size: 16px; }
.trade td { text-align: right; font-family: var(--mono); color: var(--amber-hi); white-space: nowrap; }
.trade th { color: var(--text); }
.trade tr.sep th, .trade tr.sep td { border-top: 1px solid var(--line-2); }
.trade > footer { padding: 14px 26px 20px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--faint); }

/* mods */
.mods { display: grid; gap: 22px; margin-bottom: 44px; }
.mod-card { padding: 36px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; }
.mod-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mod-card h3 { font-weight: 800; font-size: 44px; letter-spacing: 0.03em; margin-bottom: 12px; }
.mod-card p { color: var(--muted); }
.mod-meta { list-style: none; display: grid; gap: 4px; margin: 18px 0 26px; font-size: 15px; }
.mod-meta li { color: var(--muted); }
.mod-meta b { color: var(--text); font-weight: 500; display: inline-block; min-width: 130px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.mod-features { list-style: none; align-self: center; }
.mod-features li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); font-size: 16px; }
.mod-features li:last-child { border-bottom: 0; }
.mod-features li::before { content: ''; position: absolute; left: 4px; top: 1.1em; width: 9px; height: 9px; background: var(--amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mods-empty { color: var(--muted); font-family: var(--mono); }

.workshop { margin: 8px 0 44px; }
.workshop-title { font-weight: 800; font-size: 38px; letter-spacing: 0.04em; margin-bottom: 6px; }
.workshop-title span { color: var(--amber); font-family: var(--mono); font-size: 18px; font-weight: 400; }
.workshop-coll { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 8px; }
.workshop-coll span { color: var(--muted); font-size: 15px; }
.ws-cat { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin: 30px 0 12px; font-weight: 500; display: flex; align-items: center; gap: 14px; }
.ws-cat::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ws-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; color: var(--text); border-left: 2px solid var(--line-2); }
.ws-card:hover { border-left-color: var(--amber); color: var(--text); }
.ws-card h4 { font-weight: 700; font-size: 22px; letter-spacing: 0.03em; }
.ws-card p { color: var(--muted); font-size: 15px; flex: 1; margin: 0; }
.ws-link { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }

.install { margin-top: 8px; padding: 32px 34px; }
.install h3 { font-weight: 800; font-size: 30px; letter-spacing: 0.04em; margin-bottom: 16px; }
.install ol { list-style: none; counter-reset: inst; display: grid; gap: 4px; }
.install li { counter-increment: inst; position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); color: var(--muted); }
.install li::before { content: counter(inst); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--amber); border: 1px solid var(--amber); }
.install b { color: var(--text); font-weight: 600; }
.paths { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--faint); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform 0.5s ease; }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* reglement: affiche de papier usé */
.paper { position: relative; padding: 46px 48px 40px; background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.35), transparent 50%),
    radial-gradient(ellipse at 90% 96%, rgba(80, 66, 40, 0.28), transparent 55%),
    linear-gradient(180deg, #d4cdb5, #c6bea3);
  color: var(--ink); box-shadow: 0 40px 70px rgba(0, 0, 0, 0.55), inset 0 0 90px rgba(90, 76, 46, 0.35); transform: rotate(-0.4deg); }
.paper::before, .paper::after { content: ''; position: absolute; top: -10px; width: 78px; height: 24px; background: rgba(232, 224, 190, 0.55); border: 1px solid rgba(120, 108, 70, 0.3); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.paper::before { left: 34px; transform: rotate(-6deg); }
.paper::after { right: 34px; transform: rotate(5deg); }
.stamp { position: absolute; right: 70px; top: -26px; z-index: 2; transform: rotate(7deg); background: rgba(207, 200, 176, 0.9); padding: 6px 14px; border: 3px solid rgba(165, 52, 40, 0.78); color: rgba(165, 52, 40, 0.8); font-family: var(--type); font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; line-height: 1.15; pointer-events: none; mix-blend-mode: multiply; }
.rules details { border-top: 2px dashed rgba(23, 24, 19, 0.3); }
.rules details:first-child { border-top: 0; }
.rules summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 8px; cursor: pointer; font-family: var(--type); font-size: 23px; letter-spacing: 0.06em; text-transform: uppercase; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::after { content: '+'; margin-left: auto; font-family: var(--mono); font-size: 24px; transition: transform 0.2s ease; }
.rules details[open] summary::after { content: '−'; }
.r-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 500; flex: 0 0 auto; }
.rules summary:hover { color: #6b1f17; }
.rules ul { list-style: none; padding: 0 8px 20px 64px; display: grid; gap: 9px; }
.rules li { position: relative; font-family: var(--type); font-size: 17.5px; line-height: 1.5; }
.rules li::before { content: '—'; position: absolute; left: -26px; color: #6b1f17; }
.motto { margin: 46px 0 0; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 34px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }

/* rejoindre */
.join { background: linear-gradient(180deg, var(--bg), #0b0f0c); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; counter-reset: step; }
.steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 26px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); }
.steps li { position: relative; padding-top: 0; }
.step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; background: var(--bg); border: 1px solid var(--amber); color: var(--amber); font-family: var(--display); font-weight: 800; font-size: 28px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.steps h3 { font-weight: 700; font-size: 24px; letter-spacing: 0.04em; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 15.5px; margin: 0; }
.join-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 56px; }

/* pied de page */
.site-footer { border-top: 1px solid var(--line-2); background: #060807; padding: 56px 0 28px; }
.foot-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.foot-brand { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: 0.1em; line-height: 1; margin: 0 0 8px; }
.foot-sub { color: var(--amber); font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.foot-nav a:hover { color: var(--amber-hi); }
.legal { margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

/* fenetres (connexion, compte) */
.modal { padding: 0; border: 0; background: transparent; width: min(480px, 92vw); max-height: 92vh; color: var(--text); overflow: visible; }
.modal::backdrop { background: rgba(4, 6, 5, 0.85); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal-box { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-top: 3px solid var(--amber); padding: 34px 32px 30px; max-height: 92vh; overflow-y: auto; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.85); }
.modal-title { font-weight: 800; font-size: 34px; letter-spacing: 0.05em; margin-bottom: 18px; }
.modal-close { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; background: none; border: 0; color: var(--muted); font-size: 30px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--amber-hi); }
.tabs { display: flex; gap: 0; margin-bottom: 22px; border-bottom: 1px solid var(--line-2); }
.tab { flex: 1; padding: 12px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--amber-hi); border-bottom-color: var(--amber); }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.form label small { font-family: var(--body); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--faint); }
.form input:not([type="radio"]):not([type="checkbox"]) { width: 100%; padding: 13px 14px; background: #070908; border: 1px solid var(--line-2); color: var(--text); font-family: var(--body); font-size: 16px; }
.form input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(207, 74, 56, 0.15); }
.form-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(182, 64, 47, 0.6); background: rgba(182, 64, 47, 0.12); color: #f0a091; font-size: 15px; }
.form-alt, .form-note { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.form-note { color: var(--faint); }
.mode-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-pick legend { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
.form .mode { position: relative; display: block; text-transform: none; letter-spacing: 0; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode span { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-2); background: #070908; cursor: pointer; transition: all 0.15s ease; }
.mode b { font-family: var(--display); font-size: 24px; letter-spacing: 0.08em; }
.mode small { font-family: var(--body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--faint); }
.mode input:checked + span { border-color: var(--amber); background: rgba(207, 74, 56, 0.1); box-shadow: inset 3px 0 0 var(--amber); }
.mode input:focus-visible + span { outline: 2px solid var(--amber-hi); outline-offset: 2px; }
.form label.check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--body); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.form label.check input { margin-top: 4px; accent-color: var(--amber); }
.account-info { margin: 0 0 22px; display: grid; gap: 2px; }
.account-info div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.account-info dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.account-info dd { margin: 0; text-align: right; word-break: break-word; }

/* apparition au defilement */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .grid > .reveal:nth-child(3n + 2) { transition-delay: 0.08s; }
.js .grid > .reveal:nth-child(3n + 3) { transition-delay: 0.16s; }
.hero-copy > .reveal:nth-child(2) { transition-delay: 0.08s; } .hero-copy > .reveal:nth-child(3) { transition-delay: 0.16s; }
.hero-copy > .reveal:nth-child(4) { transition-delay: 0.24s; } .hero-copy > .reveal:nth-child(5) { transition-delay: 0.32s; }
.js .reveal.in.paper { transform: rotate(-0.4deg); }
.js .reveal:not(.in).paper { transform: translateY(20px) rotate(-0.4deg); }

/* barre de lecture */
.fx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 300; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blood), var(--amber), var(--amber-hi)); pointer-events: none; }

/* ------------------------------------------------------------ adaptation */
@media (max-width: 1240px) {
  .burger { display: flex; }
  .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 0; background: rgba(9, 11, 10, 0.98); border-bottom: 1px solid var(--line-2); display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav a { padding: 15px 24px; border-top: 1px solid var(--line); font-size: 13px; }
  .nav a::after { display: none; }
  .nav-auth-mobile { display: flex; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
  .header-actions .auth-area { display: none; }
}
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .eco { grid-template-columns: 1fr; gap: 48px; }
  .statusbar { grid-template-columns: 1fr; }
  .sb-title { flex-direction: row; justify-content: space-between; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .sb-grid { grid-template-columns: repeat(3, 1fr); }
  .sb-ip { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .sb-cell { border-bottom: 1px solid var(--line); }
  .sb-cta { border-top: 0; }
  .mod-card { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .steps::before { display: none; }
  .wall-in { grid-template-columns: 1fr; gap: 40px; }
  .notice { max-width: 440px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 76px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
  .wall { padding: 84px 0 120px; }
  .notice { transform: rotate(0.8deg); }
  .paint-note, .paint-x { display: none; }
  .brand-name { font-size: 22px; }
  .sb-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-title, .sb-cell, .sb-cta { padding-left: 16px; padding-right: 16px; }
  .paper { padding: 36px 22px 28px; }
  .stamp { position: static; display: inline-block; margin: 0 0 18px; transform: rotate(-3deg); }
  .rules summary { font-size: 19px; gap: 12px; padding: 16px 0; }
  .rules ul { padding-left: 30px; }
  .rules li { font-size: 16.5px; }
  .rules li::before { left: -22px; }
  .mod-card, .install { padding: 26px 20px; }
  .mod-card h3 { font-size: 36px; }
  .steps { grid-template-columns: 1fr; }
  .eco-steps li { padding-left: 70px; }
  .trade th, .trade td { padding-left: 18px; padding-right: 18px; }
  .foot-in { flex-direction: column; align-items: flex-start; }
  .form-error { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mist, .peek { animation: none !important; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .js .sec-head:not(.in) h2::after { width: 72px; }
  .fx-progress, .fx-dust { display: none; }
}