/* Général */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-image 2s ease; /* Transition douce pour le changement de fond */
}

/* Mode jour */
body.day-mode {
    background-image: url('images/daydream.png'); /* Fond jour */
    color: #b58900; /* Texte doré */
}

/* Mode nuit */
body.night-mode {
    background-image: url('images/nightdream.png'); /* Fond nuit */
    color: #cccccc; /* Texte argenté */
}

/* Conteneur principal */
.container {
    text-align: center;
    z-index: 1;
    flex: 1; /* Permet au contenu principal de s'étirer */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
}

/* Titre principal */
.title {
    font-size: 2.5em;
    font-weight: bold;
    animation: fadeIn 3s ease;
    margin: 0; /* Supprime les marges supplémentaires */
    color: #fff; /* Blanc pour bien contraster avec le fond */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ombre légère pour détacher le texte */
}

/* Sous-titre */
.subtitle {
    font-size: 1.8em;
    color: #08CC0A; /* Vert Matrix */
    margin: 15px 0 5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Même ombre pour cohérence */
}

/* Tagline */
.tagline {
    font-size: 1.2em;
    color: #ccc;
    margin: 0 0 30px;
    font-style: italic;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Ombre légèrement plus douce */
}

/* Boutons */
.button-container {
    display: flex;
    gap: 20px;
}

.button {
    font-size: 1.2em;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.button.blue {
    background: linear-gradient(120deg, #0080FF, #002157); /* Gradient bleu */
}

.button.red {
    background: linear-gradient(120deg, #ff4e50, #d62424); /* Gradient rouge */
}

/* Animation fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Effet glow pour le curseur */
.cursor-glow {
    position: fixed;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(255, 255, 100, 0.9), rgba(255, 255, 100, 0)); /* Glow jaune lumineux */
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.1s ease;
    mix-blend-mode: lighten; /* Effet de fusion pour plus de contraste */
}

/* Glow pour le mode jour */
body.day-mode .cursor-glow {
    background: radial-gradient(circle, rgba(255, 255, 100, 0.9), rgba(255, 255, 100, 0));
}

/* Glow pour le mode nuit */
body.night-mode .cursor-glow {
    background: radial-gradient(circle, rgba(173, 216, 255, 0.9), rgba(173, 216, 255, 0));
}

/* Effet d'explosion lumineuse */
@keyframes explosion {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}

.explosion {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 100, 0.8), rgba(255, 255, 100, 0));
    animation: explosion 0.6s ease-out;
    pointer-events: none;
    z-index: 9999;
}

/* Footer */
footer {
    text-align: center;
    padding: 5px; /* Réduit l'épaisseur */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.8em; /* Réduit légèrement la taille de la police */
    flex-shrink: 0; /* Empêche le footer de rétrécir */
}

body.day-mode footer {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
}