/* ═══════════════════════════════════════════════════════════════════════
JAHARTA.CSS — Styles partagés sur toutes les pages du site
═══════════════════════════════════════════════════════════════════════
IMPORTANT : Ce fichier est inclus par TOUTES les pages.
Ne pas y mettre de styles spécifiques à une seule page.
STRUCTURE :
1. Variables globales
2. Reset & base
3. Curseur custom
4. Effets de fond (scanlines CRT, grille)
5. Header & logo
6. Navigation
7. Scrollbar
8. Discord Banner (partagé index + portail)
9. Hero Title Glitch (page index uniquement)
10. Badge Admin connecté
═══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
1. VARIABLES GLOBALES
══════════════════════════════════════════════════════ */
:root {
/* Palette principale */
--cyan: #00f5ff;
--magenta: #ff006e;
--gold: #ffd60a;
/* Fonds */
--dark: #04060f; /* fond principal */
--dark2: #080d1a; /* fond cartes / panneaux */
/* Texte */
--text: #c8e0f0;
--muted: #5a7a90;
/* Composants */
--panel: rgba(0,245,255,0.035);
--border: rgba(0,245,255,0.16);
/* ── Accent dynamique : chaque page surcharge ces variables ──
Ex dans pnj.html : --accent: var(--magenta);
Utilisé pour la couleur active du nav, les glows, etc. */
--accent: var(--cyan);
--accent-rgb: 0,245,255;
--accent-border: rgba(0,245,255,0.22);
--accent-bg: rgba(0,245,255,0.05);
--accent-grid: rgba(0,245,255,0.025); /* couleur de la grille de fond */
}
/* ══════════════════════════════════════════════════════
2. RESET & BASE
══════════════════════════════════════════════════════ */
/* ── Classe ajoutée sur à l'ouverture d'un modal ──────────────
Suspend les effets de fond coûteux (scanlines, grille, animations)
pour éviter que le navigateur doive les recalculer derrière le modal.
Retirée à la fermeture du modal. */
body.modal-open::before,
body.modal-open::after {
display: none; /* suspend scanlines CRT + grille de fond */
}
body.modal-open .hero-title .c.glitching,
body.modal-open .hero-title .c.glitching::before,
body.modal-open .hero-title .c.glitching::after {
animation: none; /* suspend le glitch du titre hero */
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background: var(--dark);
color: var(--text);
font-family: 'Rajdhani', sans-serif;
font-size: 16px;
min-height: 100vh;
overflow-x: hidden;
/* Curseur custom — flèche cyan avec glow, généré en SVG inline */
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1.5' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cpolygon points='4,2 4,18 8,14 11,20 13,19 10,13 16,13' fill='%230a0f1e' stroke='%2300f5ff' stroke-width='1.2' filter='url(%23glow)'/%3E%3C/svg%3E") 4 2, crosshair;
}
/* ══════════════════════════════════════════════════════
3. EFFETS DE FOND
Pseudo-éléments sur body pour ne pas polluer le DOM
══════════════════════════════════════════════════════ */
/* Scanlines CRT — légères lignes horizontales sur tout l'écran */
body::before {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.055) 2px,
rgba(0,0,0,0.055) 4px
);
pointer-events: none;
z-index: 9999; /* au-dessus de tout sauf les modales */
}
/* Grille de fond — couleur définie par --accent-grid (propre à chaque page) */
body::after {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--accent-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--accent-grid) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* ══════════════════════════════════════════════════════
4. HEADER
══════════════════════════════════════════════════════ */
header {
position: sticky;
top: 0;
z-index: 100;
padding: 0 44px;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border);
background: rgba(4,6,15,0.96);
backdrop-filter: blur(18px);
}
/* ══════════════════════════════════════════════════════
5. LOGO
══════════════════════════════════════════════════════ */
.logo {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
font-size: 1.35rem;
letter-spacing: 0.32em;
color: var(--cyan);
text-shadow: 0 0 22px var(--cyan);
text-decoration: none;
}
.logo-slash {
color: var(--magenta);
text-shadow: 0 0 18px var(--magenta);
}
.logo-sub {
font-family: 'Share Tech Mono', monospace;
font-size: 0.46rem;
color: var(--muted);
letter-spacing: 0.2em;
display: block;
margin-top: 2px;
}
/* ══════════════════════════════════════════════════════
6. NAVIGATION
══════════════════════════════════════════════════════ */
nav { display: flex; gap: 2px; align-items: center; }
nav a {
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
color: var(--muted);
text-decoration: none;
letter-spacing: 0.13em;
text-transform: uppercase;
padding: 8px 13px;
border: 1px solid transparent;
transition: all 0.2s;
position: relative;
}
nav a:hover {
color: var(--cyan);
border-color: rgba(0,245,255,0.2);
background: rgba(0,245,255,0.03);
}
/* Lien de la page active — utilise la couleur accent de la page */
nav a.active {
color: var(--accent);
border-color: var(--accent-border);
background: var(--accent-bg);
}
nav a.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0; right: 0;
height: 1px;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
/* Bouton Admin dans le nav — toujours doré, distinct des autres liens */
.nav-admin {
color: var(--gold) !important;
border-color: rgba(255,214,10,0.22) !important;
font-family: 'Orbitron', sans-serif !important;
font-weight: 700 !important;
font-size: 0.58rem !important;
letter-spacing: 0.18em !important;
margin-left: 6px;
}
.nav-admin:hover {
border-color: var(--gold) !important;
background: rgba(255,214,10,0.05) !important;
}
/* Dot animé — indicateur "en ligne" (utilisé dans le nav et hero) */
.hdot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #00ff88;
box-shadow: 0 0 7px #00ff88;
display: inline-block;
margin-right: 4px;
animation: hdot-pulse 2s infinite;
}
@keyframes hdot-pulse {
0%, 100% { opacity: 1 }
50% { opacity: .3 }
}
/* ══════════════════════════════════════════════════════
7. SCROLLBAR CUSTOM
══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* ══════════════════════════════════════════════════════
8. RESPONSIVE HEADER
══════════════════════════════════════════════════════ */
@media (max-width: 880px) {
header { padding: 0 16px; }
nav a span { display: none; } /* cache les labels, garde les icônes */
}
/* ═══════════════════════════════════════════════════════════════════════
9. DISCORD BANNER (partagé index.html + portail.html)
═══════════════════════════════════════════════════════════════════════
Structure HTML attendue :
Le glitch est déclenché par JS au survol (class "glitching" sur .db-title).
═══════════════════════════════════════════════════════════════════════ */
/* ── Keyframes glitch couche principale (position) ── */
@keyframes dbGlitch1 {
0%,100% { transform:none; text-shadow:none }
3% { transform:skew(-5deg) translateX(-6px) }
5% { transform:skew(3deg) translateX(5px) }
7% { transform:none }
25% { transform:none }
27% { transform:translateX(-8px); text-shadow:-3px 0 var(--cyan) }
29% { transform:translateX(7px); text-shadow: 3px 0 var(--magenta) }
31% { transform:none; text-shadow:none }
55% { transform:none }
57% { transform:skew(-3deg) translateX(-5px); text-shadow:-5px 0 var(--magenta),5px 0 var(--cyan) }
60% { transform:skew(2deg) translateX(4px) }
62% { transform:none; text-shadow:none }
}
/* ── Keyframes glitch couche magenta (::before) ── */
@keyframes dbGlitch2 {
0%,100% { opacity:0; transform:none; clip-path:none }
3% { opacity:1; transform:translateX(-8px); clip-path:polygon(0 8%,100% 8%,100% 32%,0 32%) }
5% { opacity:1; transform:translateX(7px); clip-path:polygon(0 58%,100% 58%,100% 78%,0 78%) }
7% { opacity:0; clip-path:none }
27% { opacity:0 }
28% { opacity:1; transform:translateX(-10px); clip-path:polygon(0 15%,100% 15%,100% 40%,0 40%) }
30% { opacity:1; transform:translateX(8px); clip-path:polygon(0 62%,100% 62%,100% 88%,0 88%) }
32% { opacity:0; clip-path:none }
57% { opacity:0 }
58% { opacity:1; transform:translateX(-7px); clip-path:polygon(0 3%,100% 3%,100% 28%,0 28%) }
60% { opacity:1; transform:translateX(6px); clip-path:polygon(0 50%,100% 50%,100% 72%,0 72%) }
63% { opacity:1; transform:translateX(-4px); clip-path:polygon(0 30%,100% 30%,100% 55%,0 55%) }
65% { opacity:0; clip-path:none }
}
/* ── Keyframes glitch couche cyan (::after) ── */
@keyframes dbGlitch3 {
0%,100% { opacity:0; transform:none; clip-path:none }
3% { opacity:1; transform:translateX(9px); clip-path:polygon(0 48%,100% 48%,100% 72%,0 72%) }
5% { opacity:1; transform:translateX(-6px); clip-path:polygon(0 20%,100% 20%,100% 44%,0 44%) }
7% { opacity:0; clip-path:none }
27% { opacity:0 }
29% { opacity:1; transform:translateX(9px); clip-path:polygon(0 35%,100% 35%,100% 60%,0 60%) }
31% { opacity:1; transform:translateX(-7px); clip-path:polygon(0 8%,100% 8%,100% 30%,0 30%) }
33% { opacity:0; clip-path:none }
57% { opacity:0 }
59% { opacity:1; transform:translateX(8px); clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%) }
62% { opacity:1; transform:translateX(-5px); clip-path:polygon(0 18%,100% 18%,100% 42%,0 42%) }
64% { opacity:0; clip-path:none }
}
/* ── Élément .db-title : les pseudo-éléments portent les couches glitch ── */
.db-title {
position: relative;
display: inline-block;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: .9rem;
letter-spacing: .14em;
color: #fff;
margin-bottom: 3px;
}
.db-title::before,
.db-title::after {
content: attr(data-text); /* duplique le texte via l'attribut HTML */
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
opacity: 0;
}
.db-title::before { color: var(--magenta); }
.db-title::after { color: var(--cyan); }
/* Classes ajoutées par JS au survol pour déclencher le glitch */
.db-title.glitching { animation: dbGlitch1 2.8s steps(2,end) forwards; }
.db-title.glitching::before { animation: dbGlitch2 2.8s steps(2,end) forwards; }
.db-title.glitching::after { animation: dbGlitch3 2.8s steps(2,end) forwards; }
/* ── Structure du banneau Discord ── */
.db {
position: relative;
z-index: 1;
background: linear-gradient(135deg, rgba(114,137,218,.07), rgba(114,137,218,.03));
border: 1px solid rgba(114,137,218,.25);
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
}
/* Barre colorée gauche — identité Discord */
.db::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #7289da, transparent);
}
.db-l { display:flex; align-items:center; gap:16px; }
.db-sub {
font-family: 'Share Tech Mono', monospace;
font-size: .58rem;
color: var(--muted);
letter-spacing: .1em;
}
.db-btn {
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: .66rem;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
background: rgba(114,137,218,.8);
text-decoration: none;
padding: 13px 26px;
clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
transition: background .2s, box-shadow .2s;
white-space: nowrap;
display: flex;
align-items: center;
gap: 9px;
flex-shrink: 0;
}
.db-btn:hover { background:#7289da; box-shadow:0 0 24px rgba(114,137,218,.4); }
.db-btn svg { width:15px; height:15px; fill:currentColor; }
/* ═══════════════════════════════════════════════════════════════════════
10. HERO TITLE GLITCH (page index uniquement, boucle infinie)
═══════════════════════════════════════════════════════════════════════
Structure HTML :
JAHARTA
La classe "glitching" est ajoutée au load par JS.
═══════════════════════════════════════════════════════════════════════ */
@keyframes heroGlitch1 {
0%,100% { transform:none; text-shadow:0 0 30px var(--cyan),0 0 100px rgba(0,245,255,.2) }
2% { transform:skew(-8deg) translateX(-10px); text-shadow:-6px 0 var(--magenta),6px 0 var(--cyan) }
4% { transform:skew(5deg) translateX(9px); text-shadow: 6px 0 var(--magenta),-6px 0 var(--cyan) }
5% { transform:skew(-3deg) translateX(-5px) }
6% { transform:none; text-shadow:0 0 30px var(--cyan),0 0 100px rgba(0,245,255,.2) }
20% { transform:none }
21% { transform:translateX(-14px); text-shadow:-5px 0 var(--cyan) }
22% { transform:translateX(12px); text-shadow: 5px 0 var(--magenta) }
23% { transform:translateX(-8px) }
24% { transform:none; text-shadow:0 0 30px var(--cyan),0 0 100px rgba(0,245,255,.2) }
48% { transform:none }
49% { transform:skew(-6deg) translateX(-12px); text-shadow:-8px 0 var(--magenta),8px 0 var(--cyan),0 0 30px var(--cyan) }
50% { transform:skew(4deg) translateX(10px) }
51% { transform:skew(-2deg) translateX(-6px); text-shadow: 0 0 30px var(--cyan),0 0 100px rgba(0,245,255,.2) }
53% { transform:none }
72% { transform:none }
73% { transform:translateX(-16px); text-shadow:-6px 0 var(--cyan),6px 0 var(--magenta) }
74% { transform:translateX(14px) }
75% { transform:translateX(-10px) }
76% { transform:none; text-shadow:0 0 30px var(--cyan),0 0 100px rgba(0,245,255,.2) }
}
@keyframes heroGlitch2 {
0%,100% { opacity:0; clip-path:none }
2% { opacity:1; transform:translateX(-12px); clip-path:polygon(0 5%,100% 5%,100% 30%,0 30%) }
4% { opacity:1; transform:translateX(10px); clip-path:polygon(0 60%,100% 60%,100% 85%,0 85%) }
5% { opacity:1; transform:translateX(-6px); clip-path:polygon(0 35%,100% 35%,100% 55%,0 55%) }
6% { opacity:0; clip-path:none }
21% { opacity:0 }
21.5%{ opacity:1; transform:translateX(-15px); clip-path:polygon(0 10%,100% 10%,100% 40%,0 40%) }
22.5%{ opacity:1; transform:translateX(13px); clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%) }
24% { opacity:0; clip-path:none }
49% { opacity:0 }
49.5%{ opacity:1; transform:translateX(-14px); clip-path:polygon(0 0%,100% 0%,100% 25%,0 25%) }
50.5%{ opacity:1; transform:translateX(12px); clip-path:polygon(0 45%,100% 45%,100% 70%,0 70%) }
51.5%{ opacity:1; transform:translateX(-8px); clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%) }
53% { opacity:0; clip-path:none }
73% { opacity:0 }
73.5%{ opacity:1; transform:translateX(-18px); clip-path:polygon(0 8%,100% 8%,100% 35%,0 35%) }
74.5%{ opacity:1; transform:translateX(16px); clip-path:polygon(0 62%,100% 62%,100% 90%,0 90%) }
76% { opacity:0; clip-path:none }
}
@keyframes heroGlitch3 {
0%,100% { opacity:0; clip-path:none }
2% { opacity:1; transform:translateX(13px); clip-path:polygon(0 50%,100% 50%,100% 75%,0 75%) }
4% { opacity:1; transform:translateX(-11px); clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%) }
5% { opacity:1; transform:translateX(7px); clip-path:polygon(0 70%,100% 70%,100% 90%,0 90%) }
6% { opacity:0; clip-path:none }
21% { opacity:0 }
21.5%{ opacity:1; transform:translateX(16px); clip-path:polygon(0 40%,100% 40%,100% 65%,0 65%) }
22.5%{ opacity:1; transform:translateX(-14px); clip-path:polygon(0 5%,100% 5%,100% 30%,0 30%) }
24% { opacity:0; clip-path:none }
49% { opacity:0 }
49.5%{ opacity:1; transform:translateX(15px); clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%) }
50.5%{ opacity:1; transform:translateX(-13px); clip-path:polygon(0 25%,100% 25%,100% 50%,0 50%) }
51.5%{ opacity:1; transform:translateX(9px); clip-path:polygon(0 10%,100% 10%,100% 35%,0 35%) }
53% { opacity:0; clip-path:none }
73% { opacity:0 }
73.5%{ opacity:1; transform:translateX(19px); clip-path:polygon(0 45%,100% 45%,100% 72%,0 72%) }
74.5%{ opacity:1; transform:translateX(-17px); clip-path:polygon(0 18%,100% 18%,100% 42%,0 42%) }
76% { opacity:0; clip-path:none }
}
.hero-title { position:relative; display:inline-block; }
.hero-title .c {
position: relative;
display: inline-block;
}
/* Les pseudo-éléments portent les copies du texte pour le glitch */
.hero-title .c::before,
.hero-title .c::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
opacity: 0;
}
.hero-title .c::before { color: var(--magenta); }
.hero-title .c::after { color: var(--gold); }
.hero-title .c.glitching { animation: heroGlitch1 8s steps(2,end) infinite; }
.hero-title .c.glitching::before { animation: heroGlitch2 8s steps(2,end) infinite; }
.hero-title .c.glitching::after { animation: heroGlitch3 8s steps(2,end) infinite; }
/* ═══════════════════════════════════════════════════════════════════════
11. BADGE ADMIN CONNECTÉ
═══════════════════════════════════════════════════════════════════════
Présent dans le