/* -------------------------------------------------------
 * CONTACT HERO
 * ----------------------------------------------------- */
.contact-hero {
  padding: var(--espace-3xl) 0;
  background-color: var(--couleur-ivoire);
}
.contact-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--espace-2xl);
  align-items: start;
}
.contact-surtitre {
  font-size: var(--taille-xs);
  font-weight: 500;
  color: var(--couleur-terracotta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--espace-sm);
}
.contact-titre {
  font-size: var(--taille-3xl);
  color: var(--couleur-terre);
  margin-bottom: var(--espace-lg);
}
.contact-intro {
  font-size: var(--taille-base);
  color: var(--couleur-bois-fonce);
  line-height: 1.8;
  opacity: 0.85;
  margin-bottom: var(--espace-lg);
}
.contact-mail {
  display: inline-block;
  font-size: var(--taille-sm);
  font-family: monospace;
  color: var(--couleur-terre);
  border-bottom: 1px solid var(--couleur-terracotta);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.contact-mail:hover {
  color: var(--couleur-terracotta);
}

/* -------------------------------------------------------
 * FORMULAIRE
 * ----------------------------------------------------- */
.contact-formulaire-wrap {
  background-color: var(--couleur-lin);
  border-radius: var(--rayon-xl);
  padding: var(--espace-2xl);
}
.contact-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-lg);
}
.contact-champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}
.contact-label {
  font-size: var(--taille-sm);
  font-weight: 500;
  color: var(--couleur-terre);
}
.contact-label span {
  color: var(--couleur-terracotta);
  margin-left: 2px;
}
.contact-input {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(92,61,46,0.2);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-ivoire);
  color: var(--couleur-bois-fonce);
  font-size: var(--taille-sm);
  font-family: var(--font-corps);
  transition: border-color var(--transition);
  width: 100%;
}
.contact-input:focus {
  outline: none;
  border-color: var(--couleur-terracotta);
}
.contact-input::placeholder {
  color: var(--couleur-bois-fonce);
  opacity: 0.35;
}
.contact-input--textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
.contact-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}

/* -------------------------------------------------------
 * MESSAGES
 * ----------------------------------------------------- */
.contact-succes {
  background-color: var(--couleur-ivoire);
  border-left: 3px solid var(--couleur-sauge);
  border-radius: 0 var(--rayon-md) var(--rayon-md) 0;
  padding: var(--espace-xl);
}
.contact-succes__titre {
  font-family: var(--font-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-sauge);
  margin-bottom: var(--espace-sm);
}
.contact-succes__texte {
  font-size: var(--taille-sm);
  color: var(--couleur-bois-fonce);
  opacity: 0.8;
  line-height: 1.7;
}
.contact-erreurs {
  background-color: #fdf0ee;
  border-left: 3px solid var(--couleur-terracotta);
  border-radius: 0 var(--rayon-md) var(--rayon-md) 0;
  padding: var(--espace-md) var(--espace-lg);
  margin-bottom: var(--espace-lg);
}
.contact-erreurs ul { display: flex; flex-direction: column; gap: var(--espace-xs); }
.contact-erreurs li {
  font-size: var(--taille-sm);
  color: var(--couleur-terre);
}

/* -------------------------------------------------------
 * RESPONSIVE
 * ----------------------------------------------------- */
@media (max-width: 768px) {
  .contact-hero__inner { grid-template-columns: 1fr; }
  .contact-titre { font-size: var(--taille-2xl); }
  .contact-formulaire-wrap { padding: var(--espace-lg); }
}