/* ════════════════════════════════════════════════════════════
CS FIVESARL · HUD SPATIAL RDC · CSS COMMUN
Version 1.0 · 2025-2026
Charte graphique : Drapeau RDC officiel
Auteur : FIVE SARL · Kinshasa
Inclure dans toutes les pages :
Polices à charger AVANT ce CSS dans la :
════════════════════════════════════════════════════════════ */
/* ─── VARIABLES CSS ─── */
:root{
/* Couleurs RDC */
--rdc-blue:#00d4ff;
--rdc-blue-deep:#001830;
--rdc-blue-mid:#003566;
--rdc-yellow:#FFD700;
--rdc-yellow-soft:#FFE45C;
--rdc-red:#ff2d4d;
--rdc-green:#00ff88;
/* Surfaces */
--bg:#000a18;
--bg-2:#001830;
--bg-card:rgba(0,24,48,0.5);
--bg-elev:rgba(0,53,102,0.6);
/* Texte */
--text:#cce8ff;
--text-dim:#9ec5e8;
--text-muted:#5a8db5;
--text-strong:#ffffff;
/* HUD lines */
--hud-line:rgba(0,212,255,0.4);
--hud-glow:rgba(0,212,255,0.6);
--border:rgba(0,212,255,0.3);
--border-strong:var(--rdc-yellow);
/* Polices */
--font-display:'Orbitron',sans-serif;
--font-body:'Exo 2',sans-serif;
--font-mono:'JetBrains Mono','Courier New',monospace;
/* Layouts */
--header-h:80px;
--max-width:1600px;
/* Shadows */
--glow-blue:0 0 30px rgba(0,212,255,0.4);
--glow-yellow:0 0 25px rgba(255,215,0,0.5);
--glow-red:0 0 20px rgba(255,45,77,0.5);
}
/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
min-height:100vh;
line-height:1.5;
background-image:
radial-gradient(ellipse at 20% 0%,rgba(0,53,102,0.4) 0%,transparent 50%),
radial-gradient(ellipse at 80% 100%,rgba(255,215,0,0.05) 0%,transparent 50%);
}
/* ─── HUD GRID OVERLAY ─── */
body::before{
content:'';
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background:
linear-gradient(rgba(0,212,255,0.05) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,rgba(0,212,255,0.05) 1px,transparent 1px) 0 0/40px 40px;
}
/* ─── COINS HUD DÉCORATIFS ─── */
.hud-corner{
position:fixed;
width:80px;
height:80px;
z-index:1;
pointer-events:none;
border:1px solid var(--rdc-yellow);
}
.hud-corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.hud-corner.tr{top:10px;right:10px;border-left:none;border-bottom:none}
.hud-corner.bl{bottom:10px;left:10px;border-right:none;border-top:none}
.hud-corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
/* ════════════════════════════════════════════════════════════
HEADER STICKY
════════════════════════════════════════════════════════════ */
.hud-header{
position:sticky;
top:0;
z-index:50;
background:rgba(0,10,24,0.85);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--rdc-yellow);
box-shadow:0 4px 30px rgba(0,212,255,0.2);
}
.hud-header::after{
content:'';
position:absolute;
bottom:-6px;
left:50%;
transform:translateX(-50%);
width:120px;
height:4px;
background:var(--rdc-yellow);
clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);
}
.header-i{
max-width:var(--max-width);
margin:0 auto;
padding:0 30px;
height:var(--header-h);
display:flex;
align-items:center;
gap:24px;
}
/* Logo hexagonal */
.brand-h{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
color:#fff;
}
.logo-hex{
width:60px;
height:60px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.logo-hex::before,.logo-hex::after{
content:'';
position:absolute;
inset:0;
background:rgba(0,212,255,0.1);
border:2px solid var(--rdc-yellow);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.logo-hex::after{
inset:6px;
background:radial-gradient(circle,rgba(255,215,0,0.3) 0%,transparent 70%);
border-color:var(--rdc-blue);
animation:hexpulse 3s infinite;
}
@keyframes hexpulse{
0%,100%{box-shadow:0 0 20px rgba(255,215,0,0.4)}
50%{box-shadow:0 0 30px rgba(0,212,255,0.6)}
}
.logo-hex svg{
width:28px;
height:28px;
position:relative;
z-index:2;
filter:drop-shadow(0 0 8px var(--rdc-yellow));
}
.brand-h h1{
font-family:var(--font-display);
font-weight:900;
font-size:18px;
letter-spacing:3px;
color:#fff;
line-height:1.1;
}
.brand-h .ver{
font-family:var(--font-mono);
font-size:10px;
color:var(--rdc-yellow);
letter-spacing:2px;
margin-top:3px;
}
/* Navigation desktop */
.nav-h{
display:flex;
margin-left:auto;
gap:6px;
flex:1;
justify-content:flex-end;
flex-wrap:wrap;
}
.nav-h a{
position:relative;
padding:8px 16px;
color:var(--text-dim);
text-decoration:none;
font-family:var(--font-body);
font-weight:600;
font-size:13px;
letter-spacing:1.5px;
text-transform:uppercase;
transition:0.3s;
}
.nav-h a::before{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:2px;
background:var(--rdc-yellow);
transform:scaleX(0);
transition:0.3s;
}
.nav-h a:hover,.nav-h a.active{
color:var(--rdc-yellow);
text-shadow:0 0 10px var(--rdc-yellow);
}
.nav-h a:hover::before,.nav-h a.active::before{
transform:scaleX(0.6);
}
/* CTA Buttons */
.cta-h{
display:flex;
gap:10px;
margin-left:14px;
}
.btn-hex{
position:relative;
padding:11px 26px;
font-family:var(--font-display);
font-weight:700;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
text-decoration:none;
cursor:pointer;
border:none;
background:linear-gradient(135deg,var(--rdc-yellow) 0%,#FFB300 100%);
color:var(--rdc-blue-deep);
clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
box-shadow:0 4px 15px rgba(255,215,0,0.4);
transition:0.3s;
display:inline-flex;
align-items:center;
gap:6px;
}
.btn-hex:hover{
transform:translateY(-2px);
box-shadow:0 6px 25px rgba(255,215,0,0.6);
}
.btn-hex-out{
background:transparent;
color:var(--rdc-blue);
border:1px solid var(--rdc-blue);
clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
box-shadow:none;
}
.btn-hex-out:hover{
background:rgba(0,212,255,0.1);
box-shadow:0 0 20px rgba(0,212,255,0.4);
}
.btn-hex-red{
background:linear-gradient(135deg,var(--rdc-red) 0%,#cc0033 100%);
color:#fff;
box-shadow:0 4px 15px rgba(255,45,77,0.4);
}
.btn-hex-red:hover{
box-shadow:0 6px 25px rgba(255,45,77,0.6);
}
/* Hamburger */
.burger-h{
display:none;
width:48px;
height:48px;
background:transparent;
border:1px solid var(--rdc-yellow);
cursor:pointer;
flex-direction:column;
justify-content:center;
align-items:center;
margin-left:auto;
clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
}
.burger-h span{
display:block;
width:22px;
height:2px;
background:var(--rdc-yellow);
margin:2.5px 0;
transition:0.3s;
}
.burger-h.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-h.on span:nth-child(2){opacity:0}
.burger-h.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ════════════════════════════════════════════════════════════
DRAWER MOBILE
════════════════════════════════════════════════════════════ */
.drawer-h{
position:fixed;
top:0;
right:-100%;
width:min(88vw,360px);
height:100vh;
background:linear-gradient(180deg,#001830 0%,#000a18 100%);
border-left:2px solid var(--rdc-yellow);
z-index:200;
transition:right 0.4s cubic-bezier(0.4,0,0.2,1);
overflow-y:auto;
padding:24px;
display:flex;
flex-direction:column;
}
.drawer-h.on{right:0}
.overlay-h{
position:fixed;
inset:0;
background:rgba(0,10,24,0.9);
backdrop-filter:blur(8px);
z-index:199;
opacity:0;
visibility:hidden;
transition:0.3s;
}
.overlay-h.on{opacity:1;visibility:visible}
.dr-head-h{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:18px;
border-bottom:1px solid var(--rdc-yellow);
margin-bottom:20px;
}
.dr-head-h .t{
font-family:var(--font-display);
font-size:14px;
color:var(--rdc-yellow);
letter-spacing:3px;
}
.dr-x-h{
width:38px;
height:38px;
background:rgba(255,45,77,0.15);
border:1px solid var(--rdc-red);
color:var(--rdc-red);
cursor:pointer;
font-size:18px;
clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);
}
.dr-sec-h{margin-bottom:18px}
.dr-lab-h{
font-family:var(--font-mono);
font-size:10px;
color:var(--rdc-yellow);
letter-spacing:3px;
margin-bottom:8px;
padding-left:10px;
border-left:3px solid var(--rdc-yellow);
}
.dr-link-h{
display:flex;
align-items:center;
gap:14px;
padding:11px 14px;
color:var(--text-dim);
text-decoration:none;
font-family:var(--font-body);
font-weight:500;
font-size:14px;
border:1px solid transparent;
margin-bottom:5px;
transition:0.3s;
}
.dr-link-h::before{
content:'';
width:6px;
height:6px;
background:var(--rdc-yellow);
border-radius:50%;
flex-shrink:0;
opacity:0.4;
transition:0.3s;
}
.dr-link-h:hover,.dr-link-h.active{
background:rgba(0,212,255,0.08);
color:#fff;
border-color:var(--rdc-blue);
box-shadow:inset 4px 0 0 var(--rdc-yellow);
}
.dr-link-h:hover::before,.dr-link-h.active::before{
opacity:1;
box-shadow:0 0 8px var(--rdc-yellow);
}
.dr-link-h .ic{font-size:18px}
/* ════════════════════════════════════════════════════════════
STATUS BAR
════════════════════════════════════════════════════════════ */
.statbar-h{
position:relative;
z-index:4;
background:rgba(0,24,48,0.5);
border-top:1px solid var(--rdc-yellow);
border-bottom:1px solid var(--rdc-yellow);
padding:10px 30px;
font-family:var(--font-mono);
font-size:11px;
}
.statbar-h-i{
max-width:var(--max-width);
margin:0 auto;
display:flex;
align-items:center;
gap:24px;
flex-wrap:wrap;
color:var(--text-dim);
}
.st-h{
display:flex;
gap:7px;
align-items:center;
letter-spacing:1px;
}
.st-h .d{
width:9px;
height:9px;
border-radius:50%;
background:var(--rdc-green);
box-shadow:0 0 10px var(--rdc-green);
animation:pulse 2s infinite;
}
.st-h .d.warn{background:var(--rdc-yellow);box-shadow:0 0 10px var(--rdc-yellow)}
.st-h .d.err{background:var(--rdc-red);box-shadow:0 0 10px var(--rdc-red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.st-h-time{
margin-left:auto;
color:var(--rdc-yellow);
}
/* ════════════════════════════════════════════════════════════
SECTIONS / CONTAINERS
════════════════════════════════════════════════════════════ */
.section-h{
position:relative;
z-index:3;
max-width:var(--max-width);
margin:0 auto;
padding:60px 30px;
}
.container-h{
position:relative;
z-index:3;
max-width:var(--max-width);
margin:0 auto;
padding:30px;
}
.sec-cmd-h{
display:flex;
align-items:center;
gap:14px;
font-family:var(--font-mono);
font-size:11px;
color:var(--rdc-yellow);
letter-spacing:3px;
margin-bottom:8px;
}
.sec-cmd-h::before{
content:'';
width:30px;
height:1px;
background:var(--rdc-yellow);
box-shadow:0 0 8px var(--rdc-yellow);
}
.sec-cmd-h::after{
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,var(--rdc-yellow) 0%,transparent 100%);
}
.sec-h2{
font-family:var(--font-display);
font-size:28px;
font-weight:700;
color:#fff;
margin-bottom:30px;
letter-spacing:1px;
}
/* ════════════════════════════════════════════════════════════
CARDS HEXAGONALES
════════════════════════════════════════════════════════════ */
.grid-hex{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}
.card-hex{
position:relative;
background:var(--bg-card);
border:1px solid var(--border);
padding:0;
text-decoration:none;
color:var(--text);
transition:all 0.4s;
overflow:hidden;
clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.card-hex::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,var(--rdc-blue),var(--rdc-yellow),var(--rdc-red));
opacity:0.4;
transition:0.3s;
}
.card-hex:hover{
border-color:var(--rdc-yellow);
background:var(--bg-elev);
box-shadow:0 12px 40px rgba(0,212,255,0.3),0 0 30px rgba(255,215,0,0.15);
transform:translateY(-4px);
}
.card-hex:hover::before{opacity:1}
.card-hex-inner{padding:22px}
.card-hex-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:14px;
}
.card-hex-icon{
width:54px;
height:54px;
background:rgba(255,215,0,0.1);
border:1px solid var(--rdc-yellow);
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.card-hex:hover .card-hex-icon{background:rgba(255,215,0,0.2)}
.card-hex-id{
font-family:var(--font-mono);
font-size:10px;
color:var(--rdc-yellow);
letter-spacing:2px;
padding:3px 10px;
border:1px solid var(--rdc-yellow);
}
.card-hex h3{
font-family:var(--font-display);
font-weight:700;
font-size:17px;
color:#fff;
letter-spacing:1px;
margin-bottom:8px;
text-transform:uppercase;
}
.card-hex p{
font-size:13px;
color:var(--text-dim);
line-height:1.6;
margin-bottom:16px;
}
.card-hex-bot{
display:flex;
justify-content:space-between;
align-items:center;
font-family:var(--font-mono);
font-size:11px;
color:var(--rdc-yellow);
letter-spacing:2px;
padding-top:14px;
border-top:1px dashed rgba(0,212,255,0.3);
}
.card-hex-bot .arrow{font-size:14px;transition:0.3s}
.card-hex:hover .card-hex-bot .arrow{transform:translateX(8px);color:#fff}
/* Metrics bar (au survol) */
.metrics-bar{
display:flex;
gap:8px;
margin-top:10px;
}
.metric{
flex:1;
height:3px;
background:rgba(0,212,255,0.15);
position:relative;
overflow:hidden;
}
.metric::after{
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:0;
background:var(--rdc-yellow);
transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.card-hex:hover .metric:nth-child(1)::after{width:80%}
.card-hex:hover .metric:nth-child(2)::after{width:60%;background:var(--rdc-blue)}
.card-hex:hover .metric:nth-child(3)::after{width:90%}
/* ════════════════════════════════════════════════════════════
COMPOSANTS RÉUTILISABLES
════════════════════════════════════════════════════════════ */
/* Panel/Box HUD */
.hud-panel{
background:var(--bg-card);
border:1px solid var(--border);
padding:24px;
position:relative;
overflow:hidden;
}
.hud-panel::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,var(--rdc-blue),var(--rdc-yellow),var(--rdc-red));
}
.hud-panel-title{
font-family:var(--font-display);
font-size:16px;
font-weight:700;
color:#fff;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:18px;
padding-bottom:12px;
border-bottom:1px solid var(--border);
}
/* Form fields HUD */
.hud-field{
margin-bottom:18px;
}
.hud-field label{
display:block;
font-family:var(--font-mono);
font-size:11px;
color:var(--rdc-yellow);
letter-spacing:2px;
margin-bottom:8px;
text-transform:uppercase;
}
.hud-field input,
.hud-field select,
.hud-field textarea{
width:100%;
padding:12px 14px;
background:rgba(0,24,48,0.6);
border:1px solid var(--border);
color:var(--text);
font-family:var(--font-body);
font-size:14px;
transition:0.3s;
outline:none;
}
.hud-field input:focus,
.hud-field select:focus,
.hud-field textarea:focus{
border-color:var(--rdc-yellow);
box-shadow:0 0 15px rgba(255,215,0,0.3);
background:rgba(0,24,48,0.9);
}
.hud-field input::placeholder,
.hud-field textarea::placeholder{color:var(--text-muted)}
/* Tables HUD */
.hud-table{
width:100%;
border-collapse:collapse;
background:var(--bg-card);
border:1px solid var(--border);
}
.hud-table thead{
background:rgba(0,53,102,0.5);
border-bottom:2px solid var(--rdc-yellow);
}
.hud-table th{
padding:14px 16px;
text-align:left;
font-family:var(--font-display);
font-size:11px;
letter-spacing:2px;
color:var(--rdc-yellow);
text-transform:uppercase;
font-weight:700;
}
.hud-table td{
padding:12px 16px;
border-bottom:1px solid rgba(0,212,255,0.1);
color:var(--text);
font-size:13px;
}
.hud-table tbody tr:hover{background:rgba(0,212,255,0.05)}
.hud-table tbody tr:last-child td{border-bottom:none}
/* Badges */
.badge-h{
display:inline-flex;
align-items:center;
padding:3px 10px;
font-family:var(--font-mono);
font-size:10px;
letter-spacing:1.5px;
text-transform:uppercase;
border:1px solid;
}
.badge-h.success{color:var(--rdc-green);border-color:var(--rdc-green);background:rgba(0,255,136,0.1)}
.badge-h.warn{color:var(--rdc-yellow);border-color:var(--rdc-yellow);background:rgba(255,215,0,0.1)}
.badge-h.err{color:var(--rdc-red);border-color:var(--rdc-red);background:rgba(255,45,77,0.1)}
.badge-h.info{color:var(--rdc-blue);border-color:var(--rdc-blue);background:rgba(0,212,255,0.1)}
/* Stat box */
.stat-box{
background:var(--bg-card);
border:1px solid var(--border);
padding:18px;
position:relative;
text-align:center;
}
.stat-box::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:var(--rdc-yellow);
}
.stat-box .num{
font-family:var(--font-display);
font-size:32px;
font-weight:900;
color:var(--rdc-yellow);
text-shadow:0 0 15px rgba(255,215,0,0.4);
}
.stat-box .lbl{
font-family:var(--font-mono);
font-size:11px;
color:var(--text-dim);
letter-spacing:2px;
text-transform:uppercase;
margin-top:6px;
}
/* ════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════ */
.footer-h{
position:relative;
z-index:3;
margin-top:60px;
background:rgba(0,10,24,0.8);
border-top:1px solid var(--rdc-yellow);
padding:40px 30px 24px;
}
.footer-i-h{
max-width:var(--max-width);
margin:0 auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:32px;
margin-bottom:30px;
}
.footer-c h4{
font-family:var(--font-display);
font-size:13px;
color:var(--rdc-yellow);
letter-spacing:3px;
margin-bottom:14px;
text-transform:uppercase;
}
.footer-c p,.footer-c a{
font-size:13px;
color:var(--text-dim);
line-height:1.8;
text-decoration:none;
display:block;
}
.footer-c a:hover{color:var(--rdc-yellow)}
.footer-bot-h{
max-width:var(--max-width);
margin:0 auto;
text-align:center;
padding-top:20px;
border-top:1px solid rgba(0,212,255,0.3);
font-family:var(--font-mono);
font-size:10px;
color:var(--text-muted);
letter-spacing:2px;
}
.flag-h{
display:inline-flex;
width:80px;
height:5px;
margin:0 12px;
vertical-align:middle;
}
.flag-h span{flex:1;box-shadow:0 0 8px currentColor}
.flag-h .b{background:var(--rdc-blue);color:var(--rdc-blue)}
.flag-h .y{background:var(--rdc-yellow);color:var(--rdc-yellow)}
.flag-h .r{background:var(--rdc-red);color:var(--rdc-red)}
/* ════════════════════════════════════════════════════════════
HERO HOMEPAGE (utilisé sur index.html uniquement)
════════════════════════════════════════════════════════════ */
.hero-h{
position:relative;
z-index:3;
padding:80px 30px 60px;
text-align:center;
overflow:hidden;
}
.hero-content-h{
max-width:900px;
margin:0 auto;
position:relative;
z-index:5;
}
.hud-rings{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:600px;
height:600px;
pointer-events:none;
}
.ring{
position:absolute;
inset:0;
border-radius:50%;
border:1px solid rgba(0,212,255,0.2);
}
.ring.r1{animation:rotR 30s linear infinite;border:1px dashed rgba(255,215,0,0.3)}
.ring.r2{inset:50px;animation:rotL 25s linear infinite;border:1px solid rgba(0,212,255,0.25)}
.ring.r3{inset:120px;animation:rotR 20s linear infinite;border:2px solid rgba(255,215,0,0.2)}
.ring.r4{inset:200px;animation:rotL 15s linear infinite;border:1px dashed rgba(0,212,255,0.4)}
@keyframes rotR{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rotL{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.ring .mk{
position:absolute;
width:8px;
height:8px;
background:var(--rdc-yellow);
border-radius:50%;
box-shadow:0 0 12px var(--rdc-yellow);
}
.ring.r1 .mk{top:0;left:50%;transform:translate(-50%,-50%)}
.ring.r2 .mk{bottom:0;left:50%;transform:translate(-50%,50%);background:var(--rdc-blue);box-shadow:0 0 12px var(--rdc-blue)}
.ring.r3 .mk{top:50%;right:0;transform:translate(50%,-50%)}
.center-star{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:120px;
height:120px;
pointer-events:none;
animation:starPulse 4s infinite;
}
@keyframes starPulse{
0%,100%{filter:drop-shadow(0 0 30px var(--rdc-yellow))}
50%{filter:drop-shadow(0 0 50px var(--rdc-yellow))}
}
.hud-tag{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 20px;
margin-bottom:24px;
background:rgba(0,212,255,0.1);
border:1px solid var(--rdc-blue);
font-family:var(--font-mono);
font-size:11px;
color:var(--rdc-yellow);
letter-spacing:3px;
clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
.hud-tag::before{
content:'';
width:8px;
height:8px;
background:var(--rdc-yellow);
border-radius:50%;
animation:blink 1.5s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-h h1{
font-family:var(--font-display);
font-weight:900;
font-size:clamp(34px,7vw,68px);
line-height:1.05;
margin-bottom:24px;
color:#fff;
text-shadow:0 0 30px rgba(0,212,255,0.5);
letter-spacing:-0.5px;
}
.hero-h h1 .gold{color:var(--rdc-yellow);text-shadow:0 0 30px rgba(255,215,0,0.5)}
.hero-h p{
max-width:650px;
margin:0 auto 32px;
font-size:clamp(15px,2vw,18px);
color:var(--text-dim);
line-height:1.7;
}
.hero-actions-h{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
}
.btn-cta{padding:14px 32px;font-size:13px}
/* ════════════════════════════════════════════════════════════
UTILITIES
════════════════════════════════════════════════════════════ */
.text-yellow{color:var(--rdc-yellow)}
.text-blue{color:var(--rdc-blue)}
.text-red{color:var(--rdc-red)}
.text-green{color:var(--rdc-green)}
.text-dim{color:var(--text-dim)}
.text-mono{font-family:var(--font-mono)}
.text-display{font-family:var(--font-display)}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-1{gap:8px} .gap-2{gap:16px} .gap-3{gap:24px}
.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px} .mt-4{margin-top:32px}
.mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px} .mb-4{margin-bottom:32px}
/* ════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
.nav-h,.cta-h{display:none}
.burger-h{display:flex}
}
@media(max-width:640px){
.header-i{padding:0 14px;gap:10px;height:64px}
.brand-h .ver{display:none}
.brand-h h1{font-size:14px;letter-spacing:1.5px}
.hero-h{padding:50px 16px 40px}
.hud-rings{width:300px;height:300px}
.ring.r3{inset:60px}
.ring.r4{inset:100px}
.center-star{width:60px;height:60px}
.section-h,.container-h{padding:30px 16px}
.grid-hex{grid-template-columns:1fr}
.hud-corner{width:50px;height:50px}
.statbar-h{padding:8px 14px}
.statbar-h-i{gap:14px;font-size:10px}
}
/* Lock body scroll quand drawer ouvert */
body.lock{overflow:hidden}