/*!
 * THÈME 12 « MONOLITHE » (12/10/2026) — code propriétaire. S'ajoute au socle du Thème 1 et à l'habillage sombre commun.
 * Inspiré de « Immersive 3D Website — Daoism Systems » (Dribbble).
 */
body.ns-theme12 { font-family: 'JetBrains Mono', 'main-font-family', monospace; }
body.ns-theme12 h1, body.ns-theme12 h2, body.ns-theme12 .t1-titre-section { font-family: 'Major Mono Display', monospace; font-weight: 400; text-transform: lowercase; letter-spacing: -.02em; }
body.ns-theme12 .t1-serif { color: #fafafa !important; text-decoration: underline 1px; text-underline-offset: 6px; }
.tx-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .tx-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 0; padding: 12px 20px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; background: #fafafa; color: #050505 !important; }
.tx-btn svg { width: 15px; height: 15px; } .tx-btn.sec { background: transparent; color: #fafafa !important; border: 1px solid #404040; }
.m12-heros, .ps-tete { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(40% 50% at 50% 50%, #1a1a1a, var(--t5-nuit, #050505) 70%); color: #fafafa; }
.m12-heros { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 120px 0 60px; }
.m12-hud { position: absolute; font-size: 11px; letter-spacing: .12em; color: #8a8a8a; line-height: 1.8; } .m12-hud.g { left: 4%; top: 120px; } .m12-hud.d { right: 4%; bottom: 60px; text-align: right; }
.m12-anneau { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; perspective: 1100px; z-index: -1; }
.m12-anneau .tour { position: absolute; inset: 0; transform-style: preserve-3d; animation: m12-tourne 22s linear infinite; transform: rotateX(-12deg); }
.m12-anneau i { position: absolute; left: 50%; top: 10%; width: 46px; height: 80%; margin-left: -23px; transform: rotateY(calc(var(--k) * 20deg)) translateZ(230px);
    background: linear-gradient(90deg, #0a0a0a, #3a3a3a 45%, #a3a3a3 50%, #2a2a2a 55%, #0a0a0a); border: 1px solid #2a2a2a; opacity: .92; }
.m12-anneau.petit { width: 320px; height: 320px; margin: -160px 0 0 -160px; left: auto; right: 10%; top: 50%; opacity: .6; } .m12-anneau.petit i { transform: rotateY(calc(var(--k) * 30deg)) translateZ(140px); width: 30px; }
@keyframes m12-tourne { to { transform: rotateX(-12deg) rotateY(360deg); } }
.m12-centre { text-align: center; position: relative; z-index: 2; }
.m12-titre { font-size: clamp(34px, 5.4vw, 86px); line-height: 1.08; margin: 0 auto 20px; max-width: 1000px; color: #fafafa !important; text-shadow: 0 0 40px rgba(0,0,0,.9); }
.m12-titre span { color: #8a8a8a; }
.m12-lead { color: #a3a3a3; max-width: 560px; margin: 0 auto 26px; font-size: 14px; background: rgba(5,5,5,.5); }
.m12-systemes { padding: 90px 0; background: var(--t5-nuit, #050505); }
.m12-ligne { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; color: #8a8a8a; border-bottom: 1px solid #262626; padding-bottom: 14px; margin-bottom: 18px; }
.m12-panneaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #262626; border: 1px solid #262626; }
.m12-panneau { position: relative; background: #0a0a0a; padding: 26px 22px; display: grid; gap: 14px; color: #fafafa !important; overflow: hidden; transition: background .3s; }
.m12-panneau:hover { background: #141414; } .m12-panneau .n { font-size: 11px; color: #737373; } .m12-panneau b { font-size: 15px; letter-spacing: .1em; }
.m12-panneau em { font-style: normal; font-family: 'Major Mono Display', monospace; font-size: 64px; line-height: 1; }
.m12-panneau .trait { height: 2px; background: #262626; position: relative; overflow: hidden; } .m12-panneau .trait::after { content: ''; position: absolute; inset: 0; width: 30%; background: var(--t4-corail); animation: m12-scan 2.6s ease-in-out infinite; }
@keyframes m12-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.ps-tete { padding: 150px 0 90px; } .ps-centre { position: relative; z-index: 2; } .ps-tete .t1-fil, .ps-tete .t1-fil a { color: #737373; }
.ps-titre { font-family: 'Major Mono Display', monospace; font-weight: 400; font-size: clamp(32px, 4.6vw, 68px); color: #fafafa !important; margin: 14px 0; } .ps-mot { color: #8a8a8a; }
.ps-sous { color: #a3a3a3; max-width: 600px; margin: 0; } .ps-puces { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .ps-puces span { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #404040; padding: 6px 12px; font-size: 12px; color: #fafafa; } .ps-puces svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .m12-panneaux { grid-template-columns: 1fr 1fr; } .m12-anneau { width: 340px; height: 340px; margin: -170px 0 0 -170px; } .m12-anneau i { transform: rotateY(calc(var(--k) * 20deg)) translateZ(150px); width: 30px; } .m12-hud { display: none; } }
@media (prefers-reduced-motion: reduce) { .m12-anneau .tour, .m12-panneau .trait::after { animation: none; } }