/* Espace pilote : signalétique d'aéroport (jaune sur bleu marine), galons dorés, hangar en postes de stationnement. */
@font-face { font-family: 'Heros Cn'; src: url('/assets/fonts/heros-cn-bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Heros Cn'; src: url('/assets/fonts/heros-cn-regular.woff') format('woff'); font-weight: 400; font-display: swap; }

[hidden] { display: none !important; }
:root {
    --sky: #e9f0f6;
    --paper: #ffffff;
    --navy: #0f2443;
    --navy-2: #1c3a66;
    --sign: #ffcd00;
    --sign-ink: #1a1a1a;
    --gold: #c79a3b;
    --gold-light: #e8c873;
    --concrete: #d9dee3;
    --concrete-joint: #c9d0d6;
    --line: #d3dce6;
    --muted: #56677c;
    --twitch: #9146ff;
    --red: #c62f3a;
    --common: #6f7f8d; --rare: #2470d6; --epic: #8a3fd1; --legendary: #d68c00;
    --display: 'Heros Cn', 'Bahnschrift', 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--navy); font: 16px/1.5 var(--body); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: .005em; }
h2 { font-size: 1.75rem; }
a { color: var(--navy-2); }
img { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.error { color: var(--red); min-height: 0; margin: 8px 0 0; font-weight: 600; }
.error:empty { display: none; }
:focus-visible { outline: 3px solid var(--twitch); outline-offset: 2px; }

/* --- Barre du haut : un panneau d'aéroport --- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 10px max(16px, calc((100vw - 1180px) / 2)); background: var(--navy); color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand-sign { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--sign); color: var(--sign-ink); font-size: 20px; }
.brand-name { font-family: var(--display); font-size: 1.6rem; letter-spacing: .01em; }
.brand-sub { color: #b9c6d8; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar-small { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold-light); flex: 0 0 auto; }
.avatar-large { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold); flex: 0 0 auto; }
.avatar-initial { display: grid; place-items: center; background: var(--sign); color: var(--sign-ink); font-family: var(--display); font-weight: 700; }
.avatar-small.avatar-initial { font-size: 1.1rem; }
.avatar-large.avatar-initial { font-size: 2rem; }
.account .who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }
.linklike { background: none; border: 0; color: #b9c6d8; font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; padding: 4px; }
.linklike:hover { color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 24px; }

/* --- Boutons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 10px; font: 700 1.15rem/1 var(--display); letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn-twitch { background: var(--twitch); color: #fff; }
.btn-twitch:hover { background: #7c2ff2; }
.btn-sign { background: var(--sign); color: var(--sign-ink); width: 100%; }
.btn-sign:hover:not(:disabled) { background: #ffd83a; }
.btn-small { min-height: 36px; padding: 8px 14px; font-size: 1rem; border-radius: 8px; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }

/* --- Accueil --- */
.welcome { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; background: var(--navy); color: #fff; border-radius: 20px; padding: clamp(24px, 5vw, 48px); overflow: hidden; }
.welcome h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: var(--sign); max-width: 12ch; }
.welcome .lead { font-size: 1.15rem; color: #dbe5f2; max-width: 46ch; }
.welcome .note { color: #9fb1c8; font-size: .9rem; max-width: 52ch; }
.welcome-art { display: grid; place-items: center; }
.stand-hero { width: min(300px, 70vw); aspect-ratio: 1; border-radius: 18px; }
.stand-hero img { width: 82%; }

/* --- Poste de stationnement (vu d'avion) : sert pour le hangar et l'accueil --- */
.stand { position: relative; display: grid; place-items: center; background:
        linear-gradient(var(--concrete-joint) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, var(--concrete-joint) 1px, transparent 1px) 0 0 / 34px 34px,
        var(--concrete); overflow: hidden; }
.stand::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--sign); opacity: .9; }
.stand::after { content: ''; position: absolute; left: 50%; top: 12%; width: 34%; height: 4px; transform: translateX(-50%); background: #fff; border-radius: 2px; }
.stand img { position: relative; z-index: 1; width: 78%; filter: drop-shadow(4px 6px 5px rgba(15, 36, 67, .35)); }

/* --- Pilote connecté --- */
.pilot-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.pilot-col { display: grid; gap: 24px; position: sticky; top: 78px; }

/* Badge du pilote, avec galons */
.badge { display: grid; gap: 16px; }
.badge-top { display: flex; align-items: center; gap: 14px; }
.badge-name { font-family: var(--display); font-size: 1.9rem; line-height: 1; overflow-wrap: anywhere; }
.badge-rank { color: var(--muted); font-size: .95rem; }
.epaulette { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--navy); border-radius: 10px; color: #fff; }
.stripes { display: grid; gap: 4px; width: 64px; flex: 0 0 auto; }
.stripes i { display: block; height: 6px; border-radius: 1px; background: linear-gradient(90deg, #a57a24, var(--gold-light) 45%, #a57a24); }
.level { font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.level small { display: block; font-family: var(--body); font-size: .8rem; color: #b9c6d8; font-weight: 400; }
.progress { display: grid; gap: 6px; }
.progress-bar { height: 12px; background: #e3e9f0; border-radius: 6px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--sign); border-right: 2px solid var(--sign-ink); border-radius: 6px; }
.progress-text { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--sky); border-radius: 10px; padding: 10px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1.05; }
.stat span { font-size: .85rem; color: var(--muted); }
.empty-profile { background: var(--sky); border-radius: 10px; padding: 14px; }
.empty-profile code, .chat-id { font-family: var(--display); font-size: 1.05em; background: var(--sign); color: var(--sign-ink); padding: 1px 6px; border-radius: 4px; }

/* Roulette privée */
.roulette { display: grid; gap: 12px; }
.roulette-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tickets { font-family: var(--display); font-size: 1.2rem; background: var(--sky); padding: 4px 10px; border-radius: 999px; }
.roulette p { margin: 0; }
.reel { position: relative; height: 128px; border-radius: 10px; background: var(--navy); overflow: hidden; }
.reel::before, .reel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; pointer-events: none; }
.reel::before { left: 0; background: linear-gradient(90deg, var(--navy), rgba(15, 36, 67, 0)); }
.reel::after { right: 0; background: linear-gradient(-90deg, var(--navy), rgba(15, 36, 67, 0)); }
.reel-pointer { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--sign); box-shadow: 0 0 10px rgba(255, 205, 0, .7); }
.reel-strip { display: flex; height: 100%; align-items: center; will-change: transform; }
.reel-item { flex: 0 0 104px; height: 104px; margin: 0 4px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .06); border-bottom: 4px solid var(--common); }
.reel-item img { width: 76px; transform: rotate(90deg); }
.reel-item.r-rare { border-color: var(--rare); } .reel-item.r-epic { border-color: var(--epic); } .reel-item.r-legendary { border-color: var(--legendary); }
.prize { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 10px; background: var(--sky); }
.prize .stand { width: 112px; height: 112px; border-radius: 10px; }
.prize h3 { font-size: 1.5rem; }
.prize p { margin: 4px 0 0; }
.prize-reveal { animation: prize-in .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes prize-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hangar */
.hangar { display: grid; gap: 14px; }
.hangar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hangar-head p { margin: 0; }
.tabs { display: inline-flex; background: var(--sky); border-radius: 10px; padding: 4px; gap: 4px; }
.tab { border: 0; background: none; font: 600 .95rem var(--body); color: var(--muted); padding: 8px 14px; border-radius: 7px; cursor: pointer; }
.tab.active { background: var(--paper); color: var(--navy); box-shadow: 0 1px 3px rgba(15, 36, 67, .15); }
.stands { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.plane-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.plane-card .stand { aspect-ratio: 4 / 3; }
.plane-card .stand img { width: 64%; }
.stand-no { position: absolute; z-index: 2; top: 8px; left: 8px; font-family: var(--display); font-size: .95rem; background: var(--sign); color: var(--sign-ink); padding: 1px 6px; border-radius: 4px; }
.plane-card.equipped { border: 2px solid var(--navy); }
.equipped-flag { position: absolute; z-index: 2; top: 8px; right: 8px; font-size: .78rem; font-weight: 700; background: var(--navy); color: #fff; padding: 2px 8px; border-radius: 999px; }
.plane-info { display: grid; gap: 6px; padding: 10px 12px 12px; align-content: start; }
.plane-name { font-family: var(--display); font-size: 1.25rem; line-height: 1.05; }
.plane-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.rarity { font-size: .78rem; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; background: var(--common); }
.rarity.r-rare { background: var(--rare); } .rarity.r-epic { background: var(--epic); } .rarity.r-legendary { background: var(--legendary); }
.chat-id { font-size: .9rem; }
.plane-card.locked .stand img { filter: brightness(0) opacity(.22); }
.plane-card.locked .stand::before { opacity: .35; }

/* Infos : commandes, classement, règles */
.info-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.info-side { display: grid; gap: 24px; }
.commands h2, .info-side h2 { margin-bottom: 6px; }
.command-list { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 14px 0 0; }
.command-list dt { font-family: var(--display); font-size: 1.15rem; }
.command-list dt span { display: inline-block; background: var(--navy); color: var(--sign); padding: 3px 9px; border-radius: 6px; }
.command-list dd { margin: 0; }
.command-list dd code { font-family: var(--display); font-size: 1rem; color: var(--muted); }
.board { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.board li { display: grid; grid-template-columns: 28px 40px 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--sky); }
.board .rank { font-family: var(--display); font-size: 1.3rem; text-align: center; color: var(--muted); }
.board li:first-child .rank { color: var(--gold); }
.board img { width: 30px; transform: rotate(90deg); justify-self: center; }
.board .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .lvl { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.board li.me { background: #fff6cc; border-radius: 8px; }
.rules h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; margin: 14px 0 2px; }
.rules p { margin: 0; color: var(--muted); }

.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 16px 32px; }

/* --- Rubriques : panneaux de direction (jaune) et de position (noir) --- */
.sections { display: flex; gap: 10px; flex-wrap: wrap; }
.section-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px; border: 0; border-radius: 8px; background: var(--sign); color: var(--sign-ink); font: 700 1.3rem/1 var(--display); letter-spacing: .02em; cursor: pointer; }
.section-tab::after { content: '→'; font-size: 1.1em; }
.section-tab:hover { background: #ffd83a; }
.section-tab.active { background: var(--sign-ink); color: var(--sign); box-shadow: inset 0 0 0 3px var(--sign); cursor: default; }
.section-tab.active::after { content: none; }
.pill { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; font: 700 .85rem/24px var(--body); text-align: center; }

/* --- Échanges --- */
.btn-ghost { background: var(--sky); color: var(--navy); }
.btn-ghost:hover { background: var(--concrete); }
.success { margin: 0; padding: 10px 12px; border-radius: 10px; background: #e3f6ea; color: #13612f; font-weight: 600; }
.success:empty { display: none; }
.closed-note, .pv-note { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--sky); }
.closed-note { background: #fff1f2; color: var(--red); font-weight: 600; }
.trades-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.trades-main { display: grid; gap: 24px; min-width: 0; }
.trades-side { display: grid; gap: 24px; position: sticky; top: 78px; }
.pilots-card, .pilot-view { display: grid; gap: 14px; scroll-margin-top: 76px; }
.pilots-card p { margin: 0; }
.pilots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pilots-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search { flex: 1 1 220px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sky); color: var(--navy); font: inherit; }
.search:focus { background: var(--paper); }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); }
.pilot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pilot-list .empty { padding: 14px; text-align: center; }
.pilot-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 110px; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pilot-row:hover { border-color: var(--navy-2); background: #f6f9fc; }
.pilot-row.me { background: #fff6cc; }
.pilot-plane { width: 40px; transform: rotate(90deg); justify-self: center; }
.pilot-who { display: grid; min-width: 0; }
.pilot-who b { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-planes { font-family: var(--display); font-size: 1.1rem; color: var(--navy-2); white-space: nowrap; }
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; white-space: nowrap; color: var(--muted); }
.presence::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #b7c2cf; }
.presence.on { color: #13803d; }
.presence.on::before { background: #1fb257; box-shadow: 0 0 0 3px rgba(31, 178, 87, .22); }
.more { justify-self: center; }

.back { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--navy-2); font: 600 1rem var(--body); cursor: pointer; }
.back:hover { text-decoration: underline; }
.pv-head { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; }
.pv-head .stand { width: 104px; height: 104px; border-radius: 12px; }
.pv-head .stand img { width: 72%; }
.pv-id { display: grid; gap: 4px; min-width: 0; }
.pv-name { font-size: 2.2rem; overflow-wrap: anywhere; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.col-title { font-size: 1.35rem; margin: 4px 0 10px; }
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.builder-col { min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tile { position: relative; display: grid; gap: 4px; justify-items: center; align-content: start; padding: 8px 6px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); color: inherit; font: inherit; text-align: center; cursor: pointer; }
.tile img { width: 60px; height: 60px; object-fit: contain; transform: rotate(90deg); }
.tile-name { font-family: var(--display); font-size: 1.02rem; line-height: 1.05; }
.tile .rarity { font-size: .7rem; padding: 1px 7px; }
.tile-flag { font-size: .75rem; color: var(--muted); }
button.tile:hover:not(:disabled) { border-color: var(--navy-2); }
.tile[aria-pressed="true"] { border-color: var(--sign-ink); background: #fff6cc; }
.tile[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sign); color: var(--sign-ink); font-size: .85rem; font-weight: 700; }
.tile:disabled { cursor: not-allowed; opacity: .55; }
.tile.static { cursor: default; }
.trade-bar { position: sticky; bottom: 12px; z-index: 5; display: grid; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 10px 28px rgba(15, 36, 67, .28); }
.trade-bar p { margin: 0; }
.trade-bar .muted { color: #9fb1c8; }
.trade-bar .error { color: #ffb4b9; }
.steppers { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper .lbl { font-size: .92rem; color: #cfdbea; }
.stepper button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 1.25rem/1 var(--body); cursor: pointer; }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 2ch; text-align: center; font-family: var(--display); font-size: 1.45rem; color: var(--sign); }
.trade-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.trade-summary { font-family: var(--display); font-size: 1.2rem; }
.trade-send .btn-sign { width: auto; }

.offers { display: grid; gap: 12px; }
.offers h3 { margin: 6px 0 8px; font: 700 .8rem var(--body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.offers > div { display: grid; gap: 10px; }
.offers > div > h3 { margin-bottom: 0; }
.offers p { margin: 0; }
.offer { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.offer.incoming { border: 2px solid var(--sign); background: #fffbe6; }
.offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.offer-head b { font-family: var(--display); font-size: 1.25rem; line-height: 1.05; }
.offer-side { display: grid; gap: 4px; }
.offer-label { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.offer-items { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-plane { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-left: 4px solid var(--common); border-radius: 999px; background: var(--sky); font-size: .88rem; font-weight: 600; }
.mini-plane img { width: 26px; height: 26px; object-fit: contain; transform: rotate(90deg); }
.mini-plane.r-rare { border-color: var(--rare); } .mini-plane.r-epic { border-color: var(--epic); } .mini-plane.r-legendary { border-color: var(--legendary); }
.ticket-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--sign); color: var(--sign-ink); font: 700 .95rem var(--display); }
.offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-actions .btn { flex: 1 1 auto; }
.offer-actions .btn-sign { width: auto; flex-grow: 3; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.history li { padding-left: 18px; position: relative; color: var(--muted); }
.history li::before { content: '•'; position: absolute; left: 4px; }
.history li.ok { color: #13612f; font-weight: 600; }
.history li.ok::before { content: '✓'; left: 0; }

/* Contre-proposition et notifications */
.counter-tag { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--sign); color: var(--sign-ink); font: 700 .95rem var(--display); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 10px 10px 16px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(15, 36, 67, .35); font-weight: 600; }
.toast .btn-sign { width: auto; flex: 0 0 auto; }
.toast-close { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1rem; cursor: pointer; }
.toast-in { animation: toast-in .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* --- Téléphone et tablette --- */
@media (max-width: 960px) {
    .pilot-layout, .info-grid, .trades-layout { grid-template-columns: 1fr; }
    .pilot-col, .trades-side { position: static; }
    .trades-side { order: -1; }
}
@media (max-width: 640px) {
    main { padding: 16px 12px 32px; gap: 16px; }
    .welcome { grid-template-columns: 1fr; }
    .welcome-art { display: none; }
    .brand-sub { display: none; }
    .account .who { display: none; }
    .card { padding: 16px; }
    .stands { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .plane-name { font-size: 1.1rem; }
    .command-list { grid-template-columns: 1fr; gap: 4px 0; }
    .command-list dd { margin-bottom: 10px; }
    .prize { grid-template-columns: 88px 1fr; }
    .prize .stand { width: 88px; height: 88px; }
    .section-tab { flex: 1 1 0; justify-content: center; padding: 10px 12px; font-size: 1.15rem; }
    .pilot-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
    .pilot-row .pilot-planes { display: none; }
    .pilot-plane { width: 32px; }
    .pv-head { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
    .pv-head .stand { width: 76px; height: 76px; }
    .pv-name { font-size: 1.8rem; }
    .builder { grid-template-columns: 1fr; }
    .tiles { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .trade-bar { bottom: 8px; padding: 12px; gap: 10px; }
    .trade-bar .muted { display: none; }
    .steppers { display: grid; gap: 8px; }
    .stepper { display: grid; grid-template-columns: 1fr 36px 3ch 36px; }
    .stepper .lbl { font-size: .85rem; }
    .trade-send .btn-sign { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .prize-reveal, .toast-in { animation: none; }
}