body { background-color: #0D0D0D; color: #e5e2e1; }

/* ================================================================
   FOND ANIMÉ (blobs, scanline, particules)
   ================================================================ */
.bg-animated {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.16;
    will-change: transform;
}
.bg-blob-1 {
    width: 520px;
    height: 520px;
    background: #00ffc2;
    top: -140px;
    left: -120px;
    animation: blob-move-a 24s ease-in-out infinite alternate;
}
.bg-blob-2 {
    width: 620px;
    height: 620px;
    background: #00e0ff;
    bottom: -180px;
    right: -140px;
    animation: blob-move-b 30s ease-in-out infinite alternate;
    animation-delay: -8s;
}
.bg-blob-3 {
    width: 380px;
    height: 380px;
    background: #00ffc2;
    top: 40%;
    left: 50%;
    opacity: 0.08;
    animation: blob-move-a 26s ease-in-out infinite alternate;
    animation-delay: -14s;
}
@keyframes blob-move-a {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(70px, 50px) scale(1.15); }
    100% { transform: translate(-50px, 80px) scale(0.92); }
}
@keyframes blob-move-b {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-60px, -40px) scale(1.1); }
    100% { transform: translate(40px, -70px) scale(0.95); }
}

.bg-grid-anim {
    position: absolute;
    inset: -40px;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    animation: grid-drift 18s linear infinite;
}
@keyframes grid-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

.scan-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,255,194,0.45), transparent);
    animation: scan-move 9s linear infinite;
}
.scan-bar.scan-bar-2 {
    animation-duration: 13s;
    animation-delay: -4s;
    background: linear-gradient(90deg, transparent, rgba(0,224,255,0.35), transparent);
}
@keyframes scan-move {
    0%   { top: -5%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 105%; opacity: 0; }
}

.particle {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #00ffc2;
    box-shadow: 0 0 6px 2px rgba(0,255,194,0.55);
    animation-name: particle-float;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes particle-float {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    8%   { opacity: 0.9; }
    92%  { opacity: 0.5; }
    100% { transform: translateY(-110vh) translateX(20px); opacity: 0; }
}

/* Pulsation douce des badges/points actifs */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 6px 0px rgba(0,255,194,0.35); }
    50%      { box-shadow: 0 0 16px 4px rgba(0,255,194,0.55); }
}
.pulse-badge { animation: pulse-glow 2.4s ease-in-out infinite; }

/* ================================================================ */

.tech-border { border: 1px solid #3a4a43; }
.tech-glow { box-shadow: 0 0 15px rgba(0,255,194,0.1); }
.text-glow { text-shadow: 0 0 10px rgba(0,255,194,0.5); }
.card, .card-bg { background-color: #1A1A1A; border: 1px solid #2D2D2D; }
.glow-active { box-shadow: 0 0 8px rgba(0, 255, 194, 0.4); border-color: #00FFC2; }

.bg-grid {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Emplacement d'image : dépose un fichier au chemin indiqué dans /images
   avec le nom attendu et il remplace automatiquement le placeholder.
   Le cadre est toujours horizontal (ratio par défaut passé en style
   inline) ; au chargement, le script ajuste ce ratio sur la vraie
   taille de l'image déposée pour éviter tout rognage disgracieux. */
.img-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.img-slot {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        135deg,
        #1c1b1b,
        #1c1b1b 10px,
        #151414 10px,
        #151414 20px
    );
    color: #83958c;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    text-align: center;
    padding: 12px;
}

/* Grille pixel-art façon écran redstone (16 colonnes x 8 lignes) */
.pixel-screen {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 2px;
    background: #0e0e0e;
    padding: 8px;
}
.pixel-screen div {
    aspect-ratio: 1 / 1;
    background: #2a2a2a;
    border-radius: 2px;
}
.pixel-screen div.on {
    background: #ffd83d;
    box-shadow: 0 0 6px rgba(255, 216, 61, 0.7);
}