p{
  background-color: red;
}
/* ==================================== */
/* Styles pour l'effet "Buggé" (Glitch) */
/* ==================================== */

/* Styles du titre "Géométrie Code" */
.glitch-title {
    color: #fff;
    position: relative;
    font-size: 2em; /* Ajustez au besoin */
    padding: 5px; 
    background-color: #1a1a1a; /* Fond sombre pour contraste */
    /* L'effet de "bug" avec des ombres de couleur décalées */
    text-shadow: 
        0.05em 0 0 #ff00ff, /* Magenta */
        -0.03em -0.04em 0 #00ffff, /* Cyan */
        0.02em 0.05em 0 #ff0000; /* Rouge */
    /* Application de l'animation */
    animation: glitch 1s infinite alternate; 
}

/* Styles du bouton */
.glitch-button {
    background-color: #333;
    color: #0f0; /* Couleur verte pour un look "matrix/bug" */
    border: 2px solid #0f0;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 0 10px #0f0; /* Ombre lumineuse verte */
    transition: all 0.3s ease;
    /* Ajoutez une petite déformation pour un effet "instable" */
    transform: skew(-5deg); 
}

.glitch-button:hover {
    /* L'effet s'intensifie au survol */
    box-shadow: 0 0 20px #0f0, 0 0 40px #0f0;
}

/* Définition de l'animation "Glitch" */
@keyframes glitch {
    0% {
        text-shadow: 0.05em 0 0 #ff00ff, -0.03em -0.04em 0 #00ffff, 0.02em 0.05em 0 #ff0000;
        transform: translate(0px, 0px);
    }
    33% {
        text-shadow: -0.05em -0.02em 0 #ff0000, 0.02em 0.05em 0 #ff00ff, -0.03em -0.04em 0 #00ffff;
        transform: translate(-5px, 5px);
    }
    66% {
        text-shadow: 0.02em 0.05em 0 #00ffff, -0.05em -0.02em 0 #ff0000, 0.03em 0.01em 0 #ff00ff;
        transform: translate(5px, -5px);
    }
    100% {
        text-shadow: 0.05em 0 0 #ff00ff, -0.03em -0.04em 0 #00ffff, 0.02em 0.05em 0 #ff0000;
        transform: translate(0px, 0px);
    }
}