/* Styles propres à la page Contact (/contact) */

.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  padding-block: 3rem;
  align-items: start;
}

.carte-formulaire {
  background: var(--blanc);
  border: 1px solid var(--bleu-ciel);
  border-radius: var(--radius-carte);
  box-shadow: var(--ombre-douce);
  padding: 2rem;
}

.contact-aside { display: flex; flex-direction: column; gap: 1.5rem; }

.carte-coordonnees {
  background: var(--marine-nuit);
  color: var(--blanc);
  border-radius: var(--radius-carte);
  padding: 1.75rem;
}
.carte-coordonnees h2 { color: var(--blanc); margin-bottom: 1.25rem; font-size: 1.1rem; }
.carte-coordonnees ul { display: flex; flex-direction: column; gap: 1rem; }
.carte-coordonnees li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; }
.carte-coordonnees svg { width: 1.2rem; height: 1.2rem; color: var(--turquoise-rse); flex-shrink: 0; margin-top: 0.1rem; }

.carte-plan {
  position: relative;
  border-radius: var(--radius-carte);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
}
.carte-plan svg { width: 100%; height: auto; display: block; }
.epingle-plan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: var(--or-nautique);
}
.epingle-plan svg { width: 2.5rem; height: 2.5rem; filter: drop-shadow(0 3px 4px rgba(0, 43, 69, 0.35)); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* --- D'autres façons de nous joindre --- */
.section-autres-contacts { padding-block: 1rem 4rem; }
.section-autres-contacts h2 { text-align: center; margin-bottom: 1.75rem; }
.grille-autres-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.carte-autre-contact {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--bleu-ciel);
  border-radius: var(--radius-carte);
  padding: 1.5rem;
  transition: box-shadow 0.15s ease;
}
.carte-autre-contact:hover { box-shadow: var(--ombre-douce); }
.carte-autre-contact h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.carte-autre-contact p { font-size: 0.9rem; color: rgba(0, 43, 69, 0.75); margin-bottom: 1rem; }
.lien-fleche { color: var(--bleu-ocean); font-weight: 600; font-size: 0.9rem; }

@media (max-width: 768px) {
  .grille-autres-contacts { grid-template-columns: 1fr; }
}