/* Hero Contact */
.contact-hero {
    background-image: linear-gradient(to right, rgba(30, 64, 175, 0.1), rgba(109, 40, 217, 0.1));
}

/* Formulaire */
.contact-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition;
}

.contact-submit {
    @apply w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition flex items-center justify-center;
}

/* Icônes sociales */
.social-icon {
    @apply text-gray-600 hover:text-blue-600 transition text-2xl w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 hover:bg-blue-50;
}

/* Animation carte */
.contact-map {
    transition: transform 0.3s ease;
}

.contact-map:hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-main {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .contact-info {
        margin-bottom: 2rem;
    }
}

/* Styles des champs de formulaire */
input, select, textarea {
    border: 2px solid #d1d5db; /* gray-300 */
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    outline: none;
}

/* Style spécifique pour le select */
select {
    background-image: none; /* Supprime la flèche par défaut sur certains navigateurs */
}

/* Placeholder stylisé */
::placeholder {
    color: #9ca3af; /* gray-400 */
    opacity: 1;
}