:root{--sky:#e4eef8;--ink:#10243b;--steel:#5b7186;--sig:#d9480f;--card:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--sky);color:var(--ink);font:17px/1.65 system-ui,"Segoe UI",Arial,sans-serif}
header{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding:.9rem 5vw;background:var(--ink)}
.logo{font:700 1.4rem "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;color:#fff;text-decoration:none;letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}nav a{color:#c9d8e8;text-decoration:none;padding:.2rem 0}nav a:hover,nav a[aria-current]{color:#fff;border-bottom:2px solid var(--sig)}
main{max-width:860px;margin:0 auto;padding:2rem 5vw 3rem}h1,h2{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;line-height:1.15;letter-spacing:.01em}
h1{font-size:clamp(2rem,6vw,3.2rem);margin:.4em 0}h2{font-size:1.45rem;margin:1.6em 0 .4em}
.hero{padding:2rem 0 1rem}.hero p{max-width:60ch;font-size:1.1rem}
.btn{display:inline-block;background:var(--sig);color:#fff;font-weight:600;text-decoration:none;padding:.75rem 1.5rem;border-radius:6px}.btn:hover{background:#b63a08}
a{color:#0b5cad}.btn:focus-visible,a:focus-visible{outline:3px solid #0b5cad;outline-offset:2px}
.cols{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:2px solid var(--steel);margin-top:2rem}
.game{background:#000;aspect-ratio:16/9;max-height:75vh;width:100%;margin:1rem 0;border-radius:6px;overflow:hidden}.game iframe{width:100%;height:100%;border:0}
.note{color:var(--steel);font-size:.95rem}footer{padding:1.5rem 5vw;background:var(--ink);color:#c9d8e8;text-align:center;font-size:.9rem}footer a{color:#fff}main.wide{max-width:1200px}table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}th,td{padding:.5rem .6rem;border-bottom:1px solid #b9cbdd;text-align:left}th{background:var(--ink);color:#fff}.tw{overflow-x:auto}ul.list{padding-left:1.2rem}ul.list li{margin:.5rem 0}h3{font-size:1.15rem;margin:1.2em 0 .3em}
body{overflow-x:hidden}header{border-bottom:3px solid var(--sig)}
.hero{position:relative;margin:-2rem calc(50% - 50vw) 2rem;padding:4rem 5vw 3.5rem;background:linear-gradient(180deg,#0b1a2e 0%,#1d4570 55%,#e8914a 100%);color:#fff;overflow:hidden}
.hero .in{max-width:860px;margin:0 auto;position:relative;z-index:1}.hero h1{color:#fff;font-size:clamp(2.4rem,8vw,4.4rem);max-width:11ch}.hero p{color:#e3eef9}
.hero svg{position:absolute;right:max(3vw,calc(50% - 560px));top:50%;transform:translateY(-50%);width:min(30vw,280px)}
.btn.alt{background:transparent;border:2px solid #fff;margin-left:.5rem}.btn.alt:hover{background:rgba(255,255,255,.15)}
.stats{display:flex;gap:2.5rem;margin-top:1.8rem;flex-wrap:wrap}.stats div{font-size:.95rem;color:#e3eef9}.stats b{display:block;font:700 2.2rem "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;color:#fff}
.cols{border-top:0}.cols>div{background:var(--card);padding:1rem 1.2rem;border-left:4px solid var(--sig);border-radius:6px}.cols h2{margin-top:.2em}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:1rem 0}
.card{display:block;background:var(--card);border-top:4px solid var(--sig);border-radius:8px;padding:1rem 1.2rem;color:var(--ink);text-decoration:none;transition:transform .15s}.card:hover{transform:translateY(-3px)}
.card strong{display:block;font:700 1.15rem "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;margin-bottom:.25rem}.card span{color:var(--steel);font-size:.95rem}
.game{box-shadow:0 14px 40px rgba(11,26,46,.4)}
@media(max-width:700px){.hero svg{opacity:.2;right:-50px;width:220px}.btn.alt{margin:.5rem 0 0}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}/* Thème noir et rouge */
:root{--sky:#0c0c0e;--ink:#f1f1f3;--steel:#9b9ba6;--sig:#e50914;--card:#17171b}
body{background:var(--sky);color:var(--ink)}
header,footer{background:#000}header{border-bottom:3px solid var(--sig)}
.logo{color:#fff}nav a{color:#b9b9c2}nav a:hover,nav a[aria-current]{color:#fff}
a{color:#ff6b6b}.btn{color:#fff}.btn:hover{background:#b3070f}a:focus-visible,.btn:focus-visible{outline:3px solid #ff6b6b;outline-offset:2px}
th{background:var(--sig);color:#fff}th,td{border-bottom:1px solid #2a2a31}
.hero{background:radial-gradient(ellipse at 78% 45%,#8a0b12 0%,#2c0508 42%,#000 85%)}
.hero svg path{fill:#000;stroke:#e50914;stroke-width:2}
.cols>div,.card{background:var(--card);border-color:var(--sig)}
.card:hover{box-shadow:0 0 0 1px var(--sig)}
.game{box-shadow:0 0 0 1px #2a2a31,0 14px 44px rgba(229,9,20,.28)}
.note{color:var(--steel)}

.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem;margin:1rem 0}.fleet figure{margin:0;background:var(--card);border-radius:8px;padding:.6rem;text-align:center}.fleet svg{width:100%;height:90px}.fleet path{fill:#000;stroke:var(--sig);stroke-width:3}.fleet figcaption{font-size:.85rem;color:var(--steel)}
@media(max-width:600px){header{padding:.7rem 4vw}nav{font-size:.9rem;gap:.2rem .9rem}main{padding:1.2rem 5vw 2rem}.hero{padding:2.5rem 5vw 2.5rem}table{font-size:.85rem}}
.shot{width:100%;height:auto;border-radius:10px;margin:1.2rem 0;display:block}.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.gallery .shot{margin:0}

nav a.nav-retro{color:#f5d33f}
nav a.nav-retro:hover{color:#fff}