/* ============================================================
   PAGE CONTACT - Cartes modernes
   ============================================================ */

.contact-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start;
}
.contact-info h3 { margin-top: 0; }
.contact-info { 
  background: var(--c-bg-alt); border: 1px solid var(--c-border); 
  border-radius: var(--radius-lg); padding: 28px; 
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

.contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 24px; background: var(--c-bg-alt); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--c-text);
  transition: all var(--transition-slow); position: relative; overflow: hidden;
}

.contact-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  opacity: 0; transition: opacity var(--transition);
}

.contact-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
  border-color: rgba(8,145,178,0.3);
}
.contact-card:hover::before { opacity: 1; }

.contact-card__icon {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-bottom: 20px; background: rgba(8,145,178,0.1);
  color: var(--c-primary); transition: all var(--transition);
}
.contact-card__icon svg { width: 32px; height: 32px; }
.contact-card:hover .contact-card__icon { transform: scale(1.1); }

/* Couleurs spécifiques par type de contact */
.contact-card--whatsapp .contact-card__icon { background: rgba(37,211,102,0.15); color: #25D366; }
.contact-card--whatsapp:hover { border-color: rgba(37,211,102,0.4); }
.contact-card--whatsapp:hover::before { background: #25D366; opacity: 1; }
.contact-card--whatsapp .contact-card__link { color: #25D366; }

.contact-card--email .contact-card__icon { background: rgba(124,58,237,0.12); color: var(--c-accent); }
.contact-card--email:hover { border-color: rgba(124,58,237,0.4); }
.contact-card--email:hover::before { background: var(--c-accent); opacity: 1; }
.contact-card--email .contact-card__link { color: var(--c-accent); }

.contact-card--phone .contact-card__icon { background: rgba(8,145,178,0.12); color: var(--c-primary); }
.contact-card--phone .contact-card__link { color: var(--c-primary); }

.contact-card--map .contact-card__icon { background: rgba(239,68,68,0.12); color: #ef4444; }
.contact-card--map:hover { border-color: rgba(239,68,68,0.4); }
.contact-card--map:hover::before { background: #ef4444; opacity: 1; }
.contact-card--map .contact-card__link { color: #ef4444; }

.contact-card__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.contact-card__desc { font-size: 0.9rem; color: var(--c-text-soft); margin-bottom: 16px; }
.contact-card__link {
  font-weight: 600; font-size: 0.9rem; color: var(--c-primary);
  transition: color var(--transition); word-break: break-word;
}

/* Réseaux sociaux */
.contact-socials { text-align: center; padding-top: 48px; border-top: 1px solid var(--c-border); }
.contact-socials h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); margin-bottom: 24px; font-weight: 600;
}
.contact-socials__links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.contact-socials__links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--c-bg-alt);
  border: 1px solid var(--c-border); color: var(--c-text-soft);
  transition: all var(--transition);
}
.contact-socials__links a:hover {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
  transform: translateY(-3px) scale(1.1);
}
.contact-socials__links svg { width: 20px; height: 20px; }

/* Responsive Contact */
@media (max-width: 800px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .contact-cards-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-card { padding: 32px 20px; }
}