/* ============================================================
   CONTACTEZ-NOUS (formulaire général, contact.php) — restyle.
   Auparavant en <style> inline dans contact.php, sorti ici et lié
   via <link> dans le <head> (aucune classe changée). Nommé à part
   de contact.css (déjà utilisé par les 4 pages "contacter un
   membre"). Se charge après menu2.css.
   ============================================================ */

.main-content { padding: 0; max-width: 640px; margin: 40px auto; }
.contact-container {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px;
}
.contact-title {
  font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--paper);
  text-align: left; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}

.message { padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; text-align: left; font-size: 13.5px; border: 1px solid transparent; }
.message.error { background: rgba(229,84,91,0.1); color: var(--red); border-color: rgba(229,84,91,0.35); }
.message.success { background: rgba(66,192,122,0.1); color: var(--green); border-color: rgba(66,192,122,0.35); }

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.form-group label.required-field::after { content: " *"; color: var(--red); }
.form-group input, .form-group textarea, .form-group select {
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--paper); font-family: var(--body); font-size: 14px;
  width: 100%; box-sizing: border-box; transition: border-color 0.18s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--cobalt); outline: none; }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A9BA3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.submit-btn {
  background: var(--cobalt); color: #fff; padding: 12px 20px; border: none; border-radius: 10px;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background 0.18s ease; margin-top: 4px;
}
.submit-btn:hover { background: var(--cobalt-deep); }

@media (max-width: 640px) {
  .contact-container { padding: 20px; }
}
