/* ============================================================
   FICHIER : assets/css/pages/contatti.css
   Styles de la page contatti.php
   ============================================================ */

.page-banner-contact { padding: 130px 0 60px; }

/* --- Cartes (coordonnées + formulaire) --- */
.contact-info-card, .contact-form-card {
    position: relative; overflow: hidden;
    background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
    padding: 36px; transition: var(--transition-base);
}
.contact-info-card::before, .contact-form-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--ocean-teal), var(--accent-gold), var(--accent-coral));
}
.contact-info-card:hover, .contact-form-card:hover { box-shadow: var(--shadow-strong); }
.contact-info-card h4, .contact-form-card h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.contact-info-card h4 i, .contact-form-card h4 i { color: var(--ocean-teal); }
.contact-form-subtitle { color: var(--text-muted); font-size: .9rem; margin: -12px 0 26px; }

/* --- Coordonnées --- */
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; padding: 15px 0; border-bottom: 1px dashed var(--border-light); transition: var(--transition-base); }
.contact-info-item:last-of-type { border-bottom: none; }
.contact-info-item:hover { transform: translateX(4px); }
.contact-info-item i {
    width: 44px; height: 44px; border-radius: 14px; background: var(--bg-light); color: var(--ocean-teal);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; transition: var(--transition-base);
}
.contact-info-item:hover i { background: linear-gradient(135deg, var(--ocean-teal), var(--ocean-navy)); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.contact-info-item span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 2px; }
.contact-info-item strong { word-break: break-word; overflow-wrap: anywhere; }
.contact-info-item strong a { color: var(--ocean-dark); }
.contact-info-item strong a:hover { color: var(--ocean-teal); }

.contact-socials { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.contact-socials a { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-light); color: var(--ocean-dark); display: flex; align-items: center; justify-content: center; }
.contact-socials a:hover { background: linear-gradient(135deg, var(--ocean-teal), var(--accent-coral)); color: var(--white); transform: translateY(-4px); }

.contact-quick-links { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.contact-quick-links a { display: flex; align-items: center; gap: 12px; background: var(--white); box-shadow: var(--shadow-soft); padding: 16px 20px; border-radius: var(--radius-md); font-weight: 600; font-size: .9rem; color: var(--ocean-dark); }
.contact-quick-links a i { color: var(--ocean-teal); transition: var(--transition-base); }
.contact-quick-links a:hover { background: linear-gradient(135deg, var(--ocean-teal), var(--ocean-navy)); color: var(--white); transform: translateX(6px); }
.contact-quick-links a:hover i { color: var(--white); }

/* --- Formulaire --- */
.contact-form-card label { display: block; font-weight: 600; font-size: .9rem; color: var(--ocean-dark); }
.contact-form-card textarea.form-control-ocean { resize: vertical; min-height: 150px; }
.contact-form-card select.form-control-ocean { appearance: none; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b82' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.contact-form-card .btn-ocean-primary { margin-top: 8px; }

/* --- Carte --- */
.contact-map-section { position: relative; height: 380px; background: var(--bg-light); }
.contact-map-frame { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }
.contact-map-open {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: var(--white); color: var(--ocean-dark); font-weight: 600; font-size: .88rem;
    padding: 11px 24px; border-radius: 50px; box-shadow: var(--shadow-strong);
}
.contact-map-open:hover { background: var(--ocean-teal); color: var(--white); }
.contact-map-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); background: linear-gradient(135deg, #e6ecf2, #d7e4ee); }
.contact-map-placeholder i { font-size: 2.6rem; color: var(--ocean-teal); }

@media (max-width: 768px) {
    .contact-info-card, .contact-form-card { padding: 26px 20px; }
    .contact-map-section { height: 300px; }
    .contact-form-card .btn-ocean-primary { width: 100%; }
}