body 
{
    background-image: url('../image/violet.jpg');
    background-size: cover; /* Ajuste l'image pour couvrir toute la page */
    background-position: auto; /* Centrer l'image dans l'écran */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
}


h1 
{
font-weight: normal;
color: red;
}


/* Style de base pour le lien (bouton) */
a {
    display: inline-block; /* Pour qu'il se comporte comme un bouton */
    padding: 10px 20px; /* Espacement autour du texte */
    color: white; /* Couleur du texte */
    background-color: #3498db; /* Couleur de fond du bouton */
    text-decoration: none; /* Supprime le soulignement du lien */
    font-weight: bold; /* Met le texte en gras */
    font-size: 18px; /* Taille du texte */
    border-radius: 5px; /* Bords arrondis */
    border: 2px solid #3498db; /* Bordure qui correspond à la couleur du fond */
    transition: all 0.3s ease; /* Animation douce pour tous les changements */
    text-align: center; /* Centre le texte */
    cursor: pointer; /* Change le curseur au survol */
}

/* Effet au survol du lien */
a:hover {
    background-color: transparent; /* Change le fond pour un effet de transparence */
    color: #3498db; /* Change la couleur du texte */
    border-color: #3498db; /* Change la couleur de la bordure */
    transform: scale(1.1); /* Agrandit le bouton légèrement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre portée */
}

/* Effet lors du clic (active) */
a:active {
    transform: scale(0.98); /* Réduit légèrement la taille du bouton */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre plus légère lors du clic */
}

/* Effet de focus pour l'accessibilité */
a:focus {
    outline: none; /* Supprime l'effet de focus par défaut */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5); /* Ombre bleue pour l'accessibilité */
}