/*!
 * THÈME 6 « ARCADE » (12/10/2026) — code propriétaire. S'ajoute au socle du Thème 1 et à l'habillage sombre commun.
 * Inspiré de « Interactive 404 Page Game — Daoism Systems » (Dribbble).
 */
body.ns-theme6 { font-family: 'JetBrains Mono', 'main-font-family', monospace; }
body.ns-theme6 h1, body.ns-theme6 h2, body.ns-theme6 .t1-titre-section { font-family: 'Orbitron', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
body.ns-theme6 .t1-serif { color: var(--t4-corail) !important; text-shadow: 0 0 18px var(--t4-corail); }
.tx-btn { display: inline-flex; align-items: center; gap: 8px; }
.a6-heros, .ps-tete { position: relative; overflow: hidden; isolation: isolate; background: var(--t5-nuit, #050505); color: #f5f5f5; }
.a6-heros { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 200px; }
.a6-ciel { position: absolute; inset: 0 0 45% 0; z-index: -2; background: radial-gradient(60% 80% at 50% 100%, color-mix(in srgb, var(--t1-marque) 55%, transparent), transparent 70%), radial-gradient(30% 40% at 50% 100%, #fff 0%, transparent 60%); opacity: .55; }
.a6-sol { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; z-index: -1; transform: perspective(420px) rotateX(68deg); transform-origin: top;
    background-image: linear-gradient(color-mix(in srgb, var(--t4-corail) 70%, transparent) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--t4-corail) 70%, transparent) 1.5px, transparent 1.5px); background-size: 70px 70px; animation: a6-roule 2.4s linear infinite;
    mask-image: linear-gradient(transparent, #000 30%); -webkit-mask-image: linear-gradient(transparent, #000 30%); }
@keyframes a6-roule { to { background-position: 0 70px; } }
.a6-centre { text-align: center; position: relative; z-index: 2; }
.a6-mono { font-size: 13px; letter-spacing: .14em; color: var(--t4-corail); text-transform: uppercase; }
.a6-geant { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(120px, 22vw, 300px); line-height: .85; margin: 10px 0 0;
    background: linear-gradient(180deg, #fff 0%, #bdbdbd 45%, #3a3a3a 52%, #9e9e9e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 30px color-mix(in srgb, var(--t1-marque) 65%, transparent)); }
.a6-titre { font-size: clamp(22px, 3vw, 40px); margin: 10px auto 14px; max-width: 900px; color: #f5f5f5 !important; }
.a6-titre em { font-style: normal; color: var(--t4-jaune); text-shadow: 0 0 20px var(--t4-jaune); }
.a6-lead { color: rgba(245,245,245,.7); max-width: 600px; margin: 0 auto 26px; font-size: 14.5px; }
.a6-pistes { display: inline-flex; gap: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.a6-pistes a { padding: 12px 20px; color: #f5f5f5 !important; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; border-left: 1px solid rgba(255,255,255,.18); transition: background .25s; }
.a6-pistes a:first-child { border-left: 0; } .a6-pistes a b { color: var(--t4-corail); margin-right: 8px; } .a6-pistes a:hover, .a6-pistes a.on { background: var(--t1-marque); }
.a6-pistes-section { padding: 100px 0; background: var(--t5-nuit, #050505); }
.a6-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 900px; }
.a6-carte { position: relative; display: grid; gap: 8px; padding: 24px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--t4-corail) 40%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); color: #f5f5f5 !important; transition: transform .45s, box-shadow .45s, border-color .3s; }
.a6-carte:hover { transform: rotateX(8deg) translateY(-8px); border-color: var(--t4-corail); box-shadow: 0 0 40px -8px var(--t4-corail), inset 0 0 30px -10px var(--t4-corail); }
.a6-carte .n { font-family: 'Orbitron', sans-serif; font-size: 40px; font-weight: 900; color: transparent; -webkit-text-stroke: 1px var(--t4-corail); }
.a6-carte .ic svg { width: 26px; height: 26px; color: var(--t4-jaune); } .a6-carte b { font-family: 'Orbitron', sans-serif; font-size: 18px; text-transform: uppercase; } .a6-carte small { color: rgba(245,245,245,.6); }
.a6-carte em { font-style: normal; color: var(--t4-jaune); font-size: 13px; }
.ps-tete { padding: 150px 0 110px; } .ps-tete .a6-sol { height: 70%; } .ps-centre { position: relative; z-index: 2; text-align: center; }
.ps-tete .t1-fil, .ps-tete .t1-fil a { color: rgba(245,245,245,.5); } .ps-titre { font-size: clamp(34px, 5vw, 76px); color: #fff !important; margin: 14px 0; text-shadow: 0 0 30px color-mix(in srgb, var(--t1-marque) 60%, transparent); }
.ps-mot { color: var(--t4-corail); } .ps-sous { color: rgba(245,245,245,.7); max-width: 620px; margin: 0 auto; }
.ps-puces { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; } .ps-puces span { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 6px 12px; font-size: 12.5px; color: #f5f5f5; } .ps-puces svg { width: 15px; height: 15px; color: var(--t4-corail); }
@media (max-width: 900px) { .a6-cartes { grid-template-columns: 1fr 1fr; } .a6-pistes { flex-direction: column; } .a6-pistes a { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); } }
@media (max-width: 560px) { .a6-cartes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .a6-sol { animation: none; } }
.a6-pistes a.on b, .a6-pistes a:hover b { color: #fff; }