/* Direction visuelle v2 : signalétique industrielle, composition éditoriale.
   La feuille historique continue à porter les écrans de jeu et leurs variantes. */
:root { --ink:#eeece4; --muted:#9b9e97; --amber:#ece8dd; --line:#ffffff1c; --signal:#db533c; }
body { background:#141616; font-family:'Segoe UI',Arial,sans-serif; }
button,input,select { font:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #ee9a72; outline-offset:4px; }
button:disabled { cursor:not-allowed; opacity:.45; }
.screen-grain { opacity:.045; }
.topbar { left:4%; right:4%; top:0; height:74px; padding:0; border-bottom:1px solid #ffffff1b; gap:28px; background:#141616f5; }
.wordmark { color:#ece8dd; font-family:Impact,'Arial Narrow',sans-serif; font-size:30px; font-weight:400; letter-spacing:-1px; }
.wordmark span { color:var(--signal); }
.topbar-sector { color:#b2b3aa; letter-spacing:.1em; font-size:10px; }
.sector-marker { border:1px solid #ad5140; color:#ee8c70; padding:6px; font:11px var(--mono); }
.topbar-actions { gap:17px; }
.menu-screen { display:grid; grid-template-columns:minmax(290px,1.15fr) minmax(300px,1fr) minmax(245px,.85fr); align-items:start; column-gap:4%; row-gap:35px; padding:clamp(112px,15vh,154px) 5% 35px; overflow:auto; background:linear-gradient(90deg,#141616fa 0%,#141616f5 38%,#141616df 100%); }
.menu-main { width:auto; max-width:none; margin:0; }
.menu-main>.eyebrow { font:9px var(--mono); letter-spacing:.15em; gap:9px; color:#b7bab0; margin:0 0 26px; }
.small-line { width:16px; height:3px; background:var(--signal); }
.edition { margin-left:auto; color:#8d8e85; font-size:9px; white-space:nowrap; }
.menu-main h1 { font-family:Impact,'Arial Narrow','Segoe UI',sans-serif; font-size:clamp(92px,10.7vw,162px); line-height:.88; font-weight:400; letter-spacing:0; margin:0; color:#e9e6da; }
h1 span { color:#e9e6da; }
h1 b { color:var(--signal); }
.menu-tagline { font-size:18px; max-width:310px; margin:28px 0 9px; line-height:1.4; color:#e9e6da; }
.menu-intro { font-size:13px; max-width:290px; line-height:1.65; color:#a3a59c; margin-bottom:26px; }
.class-picker { border:0; border-top:1px solid var(--line); margin:0; padding:18px 0 0; width:100%; max-width:380px; }
.class-picker legend { float:left; width:100%; padding:0; margin-bottom:14px; color:#afb0a6; font:9px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.class-options { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.class-options button { background:#202322; border:1px solid #ffffff13; color:#a4a79d; padding:12px 3px 10px; display:flex; flex-direction:column; gap:8px; font-size:9px; letter-spacing:0; min-height:66px; }
.class-options button>span { color:inherit; font-size:20px; }
.class-options button[aria-pressed=true] { color:#f0eadd; border-color:#c5bca1; background:#32332c; box-shadow:none; }
.class-passive { color:#c5c3b7; font-size:11px; line-height:1.5; margin:12px 0 8px; min-height:32px; }
.class-skill { padding:10px 0 0; background:none; border-top:1px solid var(--line); border-left:0; margin:0; min-height:0; font-size:11px; }
.class-skill strong { font-size:11px; color:#dcaa87; }
.class-skill span { color:#90998f; font-size:11px; line-height:1.5; }
.menu-links { gap:11px; margin:24px 0 19px; font-size:12px; }
.menu-links button { color:#c7c9bd; }
.career-summary { width:100%; max-width:380px; padding:11px 0; border:0; border-top:1px solid var(--line); background:none; color:#9fa59b; font-size:10px; margin:0 0 12px; }
.career-track { height:2px; background:#ffffff12; }
.career-track i { background:#a6afa0; }
.best-record { color:#777f76; font-size:9px; gap:10px; }
.best-record strong { color:#b2b8a8; }
.deployment-panel { border-top:3px solid var(--signal); padding:20px 0 0; min-width:0; }
.deployment-head { display:flex; justify-content:space-between; align-items:center; color:#a3a79d; margin-bottom:22px; }
.deployment-head .eyebrow { font:9px var(--mono); letter-spacing:.14em; }
.deployment-number { font:18px var(--mono); color:#8d8f85; }
.play-mode-picker { display:flex; border-bottom:1px solid #ffffff25; gap:28px; margin:0 0 25px; }
.play-mode-picker button { padding:0 0 13px; margin-bottom:-1px; color:#8c9288; background:none; border-bottom:2px solid transparent; font-size:13px; }
.play-mode-picker button[aria-pressed=true] { color:#eeece4; border-color:#eeece4; }
.deployment-panel h2 { font-size:25px; font-weight:650; letter-spacing:-.035em; line-height:1.15; margin:0 0 10px; }
.deployment-intro { color:#8f978b; font-size:12px; line-height:1.65; margin:0 0 23px; }
.lobby-label { display:block; color:#b6baae; font:9px var(--mono); letter-spacing:.09em; text-transform:uppercase; margin-bottom:9px; }
.lobby-input { min-width:0; width:100%; height:45px; color:#ece8dd; border:1px solid #ffffff25; background:#1c1f1d; border-radius:0; padding:0 13px; font-size:13px; box-sizing:border-box; }
.lobby-input::placeholder { color:#757c71; }
.primary-button { background:var(--signal); border-color:var(--signal); color:#fff6e9; font-size:12px; font-weight:650; min-height:50px; letter-spacing:.02em; box-shadow:none; }
.primary-button:hover { background:#ea674b; border-color:#ea674b; transform:none; }
.find-player { width:100%; margin-top:12px; justify-content:space-between; }
.find-player>span:last-child { font-size:22px; }
.secondary-button { border-radius:0; border:1px solid #ffffff27; color:#d6d9ca; background:#20231f; box-shadow:none; font-size:12px; min-height:43px; padding:12px; }
.secondary-button:hover { background:#30352d; border-color:#a8afa074; }
#create-room,#copy-room,#cancel-search { width:100%; }
.lobby-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:#7e877a; font:10px var(--mono); }
.lobby-divider::before,.lobby-divider::after { content:''; height:1px; flex:1; background:var(--line); }
.join-room-form { margin-top:18px; }
.join-room-form>div { display:flex; gap:7px; }
#room-code { font:13px var(--mono); letter-spacing:.15em; text-transform:uppercase; flex:1; }
.join-button { border:1px solid #ffffff27; background:#282c25; color:#d3d6c6; font-size:11px; padding:0 13px; }
.join-button:hover { background:#394032; }
.private-note { color:#777f73; font-size:10px; line-height:1.5; margin:10px 0 0; }
.online-status { font-size:11px; line-height:1.65; color:#b4bba7; padding-left:12px; border-left:2px solid #808a73; margin:22px 0 0; }
.online-status[data-state=error] { border-color:var(--signal); color:#f0b39a; }
.online-status[data-state=busy] { color:#d3d8bd; border-color:#a7b287; }
.lobby-rules { border-top:1px solid var(--line); padding-top:17px; color:#7e8977; font:9px/1.8 var(--mono); margin:24px 0 0; }
.search-controls { text-align:center; padding:14px 0 0; }
.search-radar { position:relative; margin:8px auto 17px; width:96px; height:96px; border:1px solid #7e906146; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 22px,#7e906126 23px 24px); overflow:hidden; }
.search-radar::before,.search-radar::after { content:''; position:absolute; background:#7e90612b; }
.search-radar::before { top:50%; left:0; right:0; height:1px; }.search-radar::after { left:50%; top:0; bottom:0; width:1px; }
.search-radar i { position:absolute; inset:0; background:conic-gradient(transparent 0deg 260deg,#b7c09340 350deg,#b7c093a0 360deg); animation:radar 3s linear infinite; }
.search-radar b { position:absolute; top:47px; left:47px; width:3px; height:3px; background:#d3d9bf; }
@keyframes radar { to { transform:rotate(360deg); } }
.search-time { font:30px var(--mono); color:#cbd2b9; margin:0 0 20px; }
.search-settings { color:#a8b198; font:10px/1.7 var(--mono); margin:0 0 20px; }
#private-code-block { margin-bottom:18px; }
#private-code { display:block; font:32px var(--mono); letter-spacing:.15em; color:#e6e8d6; margin-bottom:20px; }
.solo-insignia { font:100px Impact,'Arial Narrow',sans-serif; color:#4b5141; line-height:1; margin:20px 0 30px; }
.play-button { margin:24px 0 0; width:100%; height:50px; letter-spacing:.03em; }
.mission-card { width:auto; min-width:0; max-width:none; margin:0; padding:20px 0 0 22px; background:none; border:0; border-left:1px solid var(--line); backdrop-filter:none; transform:none; box-shadow:none; }
.mission-top { margin-bottom:19px; }
.mission-top .eyebrow { font:9px var(--mono); color:#a6ad9c; letter-spacing:.1em; }
.mission-top .status-dot { width:5px; height:5px; background:#788466; box-shadow:none; }
.map-options { display:flex; flex-direction:column; gap:1px; margin-bottom:17px; }
.map-options button { display:flex; text-align:left; gap:10px; background:none; color:#a3ac96; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:11px 0; min-height:34px; font-size:11px; }
.map-options button>span { color:#7d896e; font:10px var(--mono); }
.map-options button[aria-pressed=true] { color:#ecebdc; background:none; box-shadow:none; border-color:#a5ad9080; }
.map-options button:disabled { opacity:.4; }
#sector-preview { display:block; width:100%; height:auto; border:1px solid #909c6826; background:#17211b; filter:sepia(.4) saturate(.65); margin:21px 0; }
.mission-card h2 { margin:0 0 10px; font-size:21px; color:#d8ddc9; }
.mission-card p { font-size:11px; color:#8c9982; line-height:1.75; }
.deployment-row { font:10px var(--mono); color:#a6ae9a; display:flex; gap:10px; justify-content:space-between; align-items:center; padding:12px 0; border-color:var(--line); }
.deployment-row select { background:#252b21; color:#d2d8c0; border:1px solid #ffffff22; padding:7px 6px; border-radius:0; font-size:10px; max-width:135px; }
.mission-card #difficulty-hint { font-size:10px!important; min-height:0; color:#8c9982; }
.mission-card .mission-objective { margin-top:20px; border-left:2px solid #71815d; padding-left:11px; font-size:11px; }
.menu-footer { position:static; grid-column:1/-1; margin-top:15px; padding:18px 0 0; border-top:1px solid var(--line); font:9px var(--mono); color:#747e6f; gap:18px; background:none; }
.menu-footer>span { max-width:none; }
.menu-footer a { color:#afb6a4; }
.loading-screen { background:#141616; }.loading-logo span { color:var(--signal); }.loading-track span { background:var(--signal); }
.hud-button,.gear-button,.vitals { background:#171c19e8; border-color:#949d813f; border-radius:0; }
.wave-block strong { font-family:Impact,'Arial Narrow',sans-serif; font-weight:400; font-size:52px; }
.hud-money strong { color:#dfd9be; }
.hud-button { font-size:12px; }
.panel { background:#191f1cef; border:1px solid #8b977751; border-radius:0; box-shadow:0 22px 90px #0008; }
.panel h2 { letter-spacing:-.035em; }
.online-hud { position:absolute; left:30px; top:136px; width:200px; padding:12px; background:#121c1de8; border-left:2px solid #8bc2c2; pointer-events:none; }
.online-hud>div:first-child { display:flex; justify-content:space-between; color:#8ba8a6; font:9px var(--mono); letter-spacing:.08em; }
.online-hud>strong { display:inline-block; color:#cee4de; font:12px var(--mono); margin:9px 0 7px; max-width:135px; overflow:hidden; text-overflow:ellipsis; }
#partner-health { float:right; color:#a2bcb2; font:9px var(--mono); margin-top:10px; }
.partner-track { height:3px; background:#6d939039; }.partner-track i { display:block; height:100%; background:#9ac9b4; }
.down-notice { position:absolute; top:42%; left:50%; transform:translateX(-50%); background:#211c18ed; padding:18px; color:#ecc6a6; border-left:3px solid var(--signal); font:13px var(--mono); text-align:center; }
.online-menu-note { color:#e7bb8d!important; border-left:2px solid var(--signal); padding-left:12px; font-size:12px; }
.online-hud:not([hidden])~.field-status { top:228px; }
body.online .wave-banner { top:164px; left:50%; transform:translateX(-50%); width:min(420px,42vw); background:#131b17e8; border-left:0; text-align:center; }
@media(min-width:1600px) { .menu-screen { padding-left:9%; padding-right:9%; column-gap:5%; } }
@media(max-width:1090px) {
  .menu-screen { grid-template-columns:minmax(270px,1fr) minmax(290px,1fr); padding:108px 7% 30px; column-gap:7%; }
  .menu-main h1 { font-size:135px; }.mission-card { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; column-gap:30px; padding:24px 0 0; border-left:0; border-top:1px solid var(--line); }
  .mission-top,.map-options,#sector-preview { grid-column:1; }.mission-card h2 { grid-column:2; grid-row:1; }.mission-card>p,.deployment-row { grid-column:2; }.mission-card #sector-description { grid-row:2; margin-top:0; }#sector-preview { grid-row:3/7; margin:0; }.map-options { grid-row:2; }.deployment-row { padding:9px 0; }.mission-note,.mission-objective { margin:7px 0; }.menu-footer { margin-top:0; }
}
@media(max-width:700px) {
  .topbar { height:60px; gap:12px; left:5%; right:5%; }.topbar-sector { font-size:8px; letter-spacing:0; gap:7px; }.sector-marker { display:none; }.topbar-actions { gap:8px; }.text-button { font-size:11px; }.icon-button { font-size:20px; }
  .menu-screen { display:flex; flex-direction:column; gap:30px; padding:89px 7% 26px; align-items:stretch; }.menu-main { max-width:none; width:100%; }
  .menu-main>.eyebrow { margin-bottom:20px; }.menu-main h1 { font-size:clamp(53px,15vw,100px); line-height:.95; }h1 br { display:none; }h1 span { margin-left:.08em; }h1 b { display:none; }
  .menu-tagline { font-size:16px; margin:18px 0 6px; max-width:none; }.menu-intro { font-size:12px; margin:0 0 20px; max-width:none; }
  .class-picker { max-width:none; padding-top:14px; }.class-options button { min-height:58px; }.class-passive { min-height:0; }.class-skill { display:flex; gap:10px; align-items:baseline; }.class-skill strong { flex:0 0 auto; }.class-skill span { font-size:10px; }
  .menu-links { margin:19px 0 0; }.career-summary,.best-record { display:none; }.deployment-panel { padding-top:18px; }.deployment-head { margin-bottom:20px; }.deployment-panel h2 { font-size:25px; }
  .mission-card { display:block; padding:24px 0 0; }.map-options { flex-direction:row; gap:16px; }.map-options button { flex:1; font-size:10px; }.mission-card h2 { margin-top:18px; }#sector-preview { margin:20px 0; max-height:160px; object-fit:contain; }.menu-footer { display:flex; flex-direction:column; font-size:8px; gap:13px; }
  .hud-top { gap:10px; }.wave-block strong { font-size:34px; }.hud-money strong { font-size:21px; }.online-hud { left:16px; top:105px; width:170px; padding:8px; }.online-hud:not([hidden])~.field-status { top:174px; }.online-hud>strong { margin-bottom:4px; }.online-hud:not([hidden])~.event-status { top:248px; }.down-notice { width:75%; font-size:11px; }
  body.online .wave-banner { top:268px; width:85vw; }
}
@media(max-height:700px) and (min-width:1091px) { .menu-screen { padding-top:99px; }.menu-main>.eyebrow { margin-bottom:19px; }.menu-main h1 { font-size:105px; }.menu-tagline { margin-top:20px; }.menu-intro { margin-bottom:17px; }.menu-links { margin:15px 0; } }
@media(prefers-reduced-motion:reduce) { .search-radar i { animation:none; }.primary-button,.secondary-button { transition:none; } }