/* --- Page Contact CartePostaleVirtuelle.com --- */

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 60vh;
}

/* Le cadre blanc (Formulaire) */
#contact-form {
    background: white !important;
    padding: 2.5rem !important;
    border-radius: 24px !important;
    width: 100%;
    max-width: 450px; /* Aligné sur la largeur du login */
    box-shadow: var(--shadow-wow) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-sizing: border-box;
}

/* Le titre à l'intérieur du cadre */
#contact-form h1 { 
    text-align: center; 
    font-size: 1.8rem;
    font-weight: 800; 
    background: var(--grad-wow); 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    margin-bottom: 1.5rem; 
    margin-top: 0;
}

/* Description sous le titre */
.contact-intro {
    text-align: center; 
    margin-bottom: 25px; 
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Champs et Labels */
.form-group {
    margin-bottom: 20px;
}

.form-group label { 
    display: block !important;
    color: var(--text-light) !important; 
    font-size: 0.75rem !important; 
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px !important;
}

.form-group input, 
.form-group textarea {
    width: 100% !important;
    box-sizing: border-box;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important; 
    border: 2px solid transparent !important;
    font-family: inherit;
    font-size: 1rem !important;
    color: var(--text) !important;
    transition: 0.3s all ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary) !important;
    background: white !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Bouton (Style btn-auth) */
#contact-form button[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 14px !important;
    background: var(--grad-wow) !important;
    color: white !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4) !important;
    margin-top: 10px !important;
}

#contact-form button[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 25px -5px rgba(99, 102, 241, 0.5) !important;
    filter: brightness(1.1);
}

/* --- Ajustements Mobile --- */
@media (max-width: 480px) {
    #contact-form {
        padding: 1.5rem !important; /* Marges réduites sur mobile comme login */
    }
    
    #contact-form h1 {
        font-size: 1.5rem;
    }
}