body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Times New Roman", Times, serif;
    font-size: 13px;
    color: #eee; /* plus lisible sur fond sombre */
    position: relative;
    background: #111; /* base très sombre */
}

canvas#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* Grain et scintillement léger superposé */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 4px 4px, 6px 6px;
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
    animation: grainMove 0.3s infinite;
}

@keyframes grainMove {
    0%   { background-position: 0 0, 0 0; }
    20%  { background-position: 2px -1px, -1px 2px; }
    40%  { background-position: -2px 1px, 1px -2px; }
    60%  { background-position: 2px 2px, -2px -2px; }
    80%  { background-position: -1px -1px, 1px 1px; }
    100% { background-position: 0 0, 0 0; }
}

/* Texte et mise en page restent identiques */
.void, .page {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 50px;
}

.text {
    position: absolute;
    left: 40px;
    opacity: 0.9;
    color: #eee; /* texte clair sur fond sombre */
    animation: flicker 2.5s infinite, jitter 0.12s infinite;
}

.text.main { top: 60px; font-size: 18px; }
.delay1 { top: 160px; animation-delay: 0.3s; }
.delay2 { top: 260px; animation-delay: 0.8s; }
.delay3 { top: 360px; animation-delay: 1.4s; }

@keyframes flicker {
    0%   { opacity: 0.15; }
    20%  { opacity: 1; }
    40%  { opacity: 0.25; }
    60%  { opacity: 0.9; }
    80%  { opacity: 0.3; }
    100% { opacity: 0.85; }
}

@keyframes jitter {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(1px,-1px); }
    50%  { transform: translate(-1px,1px); }
    75%  { transform: translate(2px,0); }
    100% { transform: translate(0,0); }
}

.entry { width: 420px; margin-bottom: 30px; padding-left: 10px; }
.date { font-size: 11px; color: #888; margin-bottom: 5px; }

.nav, .exit { position: absolute; bottom: 30px; left: 30px; font-size: 12px; opacity: 0.4; }
a { color: #00ccff; text-decoration: none; }
a:hover { text-decoration: underline; }