:root{--bg:#050914;--line:#233b59;--yellow:#ffd426;--red:#ef382d;--text:#dce9f8}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif}
#app{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg)}
#shellHeader{flex:0 0 58px}
.blast-app-header{height:58px;display:flex;align-items:center;gap:16px;padding:0 16px;background:#040912f2;border-bottom:2px solid var(--line);backdrop-filter:blur(10px);position:relative;z-index:20}
.blast-app-brand{color:var(--yellow);text-decoration:none;font-family:"Courier New",Courier,monospace;font-size:23px;line-height:1;font-weight:1000;font-style:italic;letter-spacing:-1px;text-shadow:2px 2px 0 var(--red);white-space:nowrap}
.blast-app-nav{display:flex;align-items:center;gap:20px;height:58px}
.blast-app-nav button{appearance:none;border:0;background:transparent;padding:0;margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;font-weight:900;letter-spacing:.15px;cursor:pointer;white-space:nowrap}
.blast-app-nav button:hover,.blast-app-nav button.active{color:var(--yellow)}
.spacer{flex:1}
.actions{display:flex;align-items:center;gap:8px}
.actions select,.actions button{height:38px;border-radius:7px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:900;cursor:pointer}
.actions select{min-width:58px;padding:0 10px;color:#fff;background:#101b2a;border:1px solid #4a607e}
.actions .sim{padding:0 14px;color:#07101b;background:var(--yellow);border:1px solid var(--yellow)}
#viewport{position:relative;flex:1 1 auto;min-height:0;background:var(--bg);overflow:hidden}
.pageFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease}
.pageFrame.active{opacity:1;visibility:visible;pointer-events:auto}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--yellow);font-family:"Courier New",monospace;font-weight:900;z-index:5;transition:opacity .15s ease}
#loading.hidden{opacity:0;pointer-events:none}
@media(max-width:760px){.blast-app-nav{display:none}.blast-app-header{gap:10px;padding:0 10px}.blast-app-brand{font-size:21px}}
@media(prefers-reduced-motion:reduce){.pageFrame,#loading{transition:none}}

/* V72 — Navigation responsive sans modifier les pages validées */
.mobile-toggle{display:none;align-items:center;gap:7px;border:1px solid #4a607e;border-radius:7px;padding:9px 12px;background:#101b2a;color:#ffd426;font-weight:900;cursor:pointer}
.mobile-menu{display:none;position:absolute;z-index:50;top:58px;left:0;right:0;padding:12px;background:#081323;border-bottom:2px solid #294562;box-shadow:0 12px 24px #000a;max-height:calc(100dvh - 58px);overflow-y:auto}
.mobile-menu.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mobile-menu button{min-height:44px;border:1px solid #2c4764;border-radius:7px;background:#101e32;color:#f3f7ff;font-weight:900;cursor:pointer}
.mobile-menu button.active{color:#ffd426;border-color:#ffd426;background:#2a2715}
.blast-app-nav button:focus-visible,.mobile-toggle:focus-visible,.mobile-menu button:focus-visible,.actions button:focus-visible{outline:3px solid #ffd426;outline-offset:3px}
@media(max-width:900px){.blast-app-nav{display:none}.mobile-toggle{display:flex}.blast-app-header{gap:9px;padding:0 10px}.actions .sim{padding:0 9px}.blast-app-brand{font-size:21px}}
@media(max-width:400px){.mobile-toggle span{display:none}.actions select{min-width:52px;padding:0 5px}.actions .sim{font-size:10px}}


/* V73 — Finition visuelle du cadre de navigation. Les cartes et pages officielles restent intactes. */
:root{--blast-glow:rgba(255,212,38,.32)}
.blast-app-header{box-shadow:0 4px 24px rgba(0,0,0,.48);border-bottom-color:#34475e}
.blast-app-brand{transition:filter .22s ease,transform .22s ease}
.blast-app-brand:hover{filter:drop-shadow(0 0 10px var(--blast-glow));transform:translateY(-1px)}
.blast-app-nav button{height:100%;position:relative;padding:0 3px;transition:color .2s ease,text-shadow .2s ease}
.blast-app-nav button::after{content:"";position:absolute;left:2px;right:2px;bottom:8px;height:3px;border-radius:3px;background:#ffd426;box-shadow:0 0 10px var(--blast-glow);transform:scaleX(0);transition:transform .2s ease}
.blast-app-nav button:hover::after,.blast-app-nav button.active::after{transform:scaleX(1)}
.blast-app-nav button.active{text-shadow:0 0 12px var(--blast-glow)}
.actions .sim{box-shadow:0 3px 0 #9b6e00;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.actions .sim:hover{filter:brightness(1.1);box-shadow:0 3px 0 #9b6e00,0 0 18px var(--blast-glow)}
.actions .sim:active{transform:translateY(2px);box-shadow:0 1px 0 #9b6e00}
.mobile-menu button{transition:background .15s ease,border-color .15s ease,transform .15s ease}
.mobile-menu button:active{transform:scale(.98)}
.mobile-menu button.active{box-shadow:inset 0 0 12px rgba(255,212,38,.12)}
.pageFrame{transition:opacity .28s ease,filter .28s ease}
.pageFrame:not(.active){filter:brightness(.84)}
#viewport::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#ffd426 45%,#f34334 70%,transparent);opacity:.52;z-index:4;pointer-events:none}
@media(prefers-reduced-motion:reduce){.blast-app-brand,.blast-app-nav button,.blast-app-nav button::after,.actions .sim,.mobile-menu button,.pageFrame{transition:none!important}}

/* V75 — accessibilité et cohérence, sans changement des pages intégrées */
.skip-nav{position:fixed;z-index:999999;top:-100px;left:16px;padding:12px 18px;background:#ffd426;color:#06101d;font-weight:900;border-radius:0 0 9px 9px;text-decoration:none}
.skip-nav:focus{top:0}
.blast-app-header button:focus-visible,.blast-app-header a:focus-visible,.blast-app-header select:focus-visible,.mobile-menu button:focus-visible{outline:3px solid #ffd426!important;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.blast-app-header *, .mobile-menu *{animation:none!important;transition:none!important}}

/* V122 : accès au guide PDF en fin des menus */
.blast-guide-download{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-family:Arial,sans-serif;font-size:11px;font-weight:900;letter-spacing:.3px;color:#081323;background:#ffd426;border:1px solid #f6aa19;border-radius:7px;padding:9px 10px;box-shadow:0 2px 0 #a96b0d;transition:filter .15s ease,transform .15s ease}
.blast-guide-download:hover,.blast-guide-download:focus-visible{filter:brightness(1.1);transform:translateY(-1px)}
.mobile-menu .blast-guide-download{display:flex;width:100%;margin-top:10px;padding:13px 12px;font-size:13px}
@media(max-width:1200px){.blast-app-nav .blast-guide-download{font-size:10px;padding:8px 6px}}