/* Styles globaux */
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #2e2e2e, #3a3a3a); /* Dégradé sombre */
    color: #e6e6e6;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Assure une hauteur minimale pour couvrir l'écran */
    display: flex;
    flex-direction: column; /* Permet de conserver un menu en haut */
    background-attachment: fixed; /* Effet parallax */
    background-size: cover; /* Couvre toute la zone visible */
}
#contact-page {
    background: linear-gradient(135deg, #2e2e2e, #3a3a3a); /* Dégradé sombre */
    color: #f0f0f0; /* Texte clair */
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Prend toute la hauteur visible */
    display: flex;
    flex-direction: column; /* Permet de conserver un menu en haut */
}

/* Conteneur global pour centrer le formulaire */
.contact-page {
    flex: 1; /* Prend tout l'espace disponible après le menu */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Conteneur principal */
.contact-container {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a); /* Fond sombre avec dégradé */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Ombre profonde */
    max-width: 600px;
    width: 90%; /* S'adapte à la largeur de l'écran */
    text-align: center;
    color: #f0f0f0; /* Assure un texte bien visible */
}

/* Titre */
.contact-container h1 {
    margin-bottom: 20px;
    color: #d2b48c; /* Couleur beige doré */
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Effet d'ombre */
}

/* Messages de succès/erreur */
.success-message, .error-message {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

.success-message {
    background: linear-gradient(145deg, #4caf50, #5ec960); /* Couleur verte pour le succès */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre douce */
}

.error-message {
    background: linear-gradient(145deg, #ff4d4d, #ff6666); /* Couleur rouge pour les erreurs */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre douce */
}

/* Formulaire */
form {
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #d2b48c; /* Couleur beige doré */
}

input, textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #444; /* Bordure sombre */
    border-radius: 10px;
    background: #3a3a3a; /* Fond sombre */
    color: #e6e6e6; /* Texte clair */
    font-size: 1rem;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #d2b48c; /* Couleur beige doré au focus */
    box-shadow: 0 0 10px rgba(210, 180, 140, 0.5); /* Lueur beige */
}

textarea {
    resize: none;
}

/* Bouton */
.btn-submit {
    background: linear-gradient(145deg, #4a4a4a, #5b5b5b); /* Fond sombre */
    color: #e6e6e6;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-submit:hover {
    background: linear-gradient(145deg, #5b5b5b, #6c6c6c); /* Fond légèrement éclairci */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Ombre renforcée */
    transform: translateY(-5px); /* Effet de survol */
}

/* Responsivité */
@media screen and (max-width: 768px) {
    .contact-container {
        padding: 20px; /* Réduit l'espace intérieur */
        width: 100%; /* Prend toute la largeur */
    }

    .contact-container h1 {
        font-size: 1.8rem; /* Taille de police réduite pour le titre */
    }

    input, textarea {
        padding: 10px; /* Réduit le padding des champs de formulaire */
        font-size: 0.9rem; /* Réduit la taille de la police */
    }

    .btn-submit {
        font-size: 0.9rem; /* Taille réduite du bouton */
        padding: 8px 15px;
    }
}

@media screen and (max-width: 480px) {
    .contact-container h1 {
        font-size: 1.5rem; /* Réduit encore la taille du titre */
    }

    input, textarea {
        font-size: 0.8rem; /* Police encore plus petite */
    }

    .btn-submit {
        font-size: 0.8rem; /* Taille réduite du bouton */
    }
}