/* ============================================================
   Page de contact / SAV — s'appuie sur legal.css pour le cadre
   (fond, titres, largeur de colonne) et n'ajoute que le
   formulaire et le bloc d'auto-dépannage.
   ============================================================ */

.contact__intro {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 2rem;
}

/* ---------- Bandeau de retour après envoi ---------- */
.contact__flash {
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 1.8rem;
  line-height: 1.6;
  border: 1px solid transparent;
}
.contact__flash--ok {
  background: rgba(76, 201, 240, 0.12);
  border-color: rgba(76, 201, 240, 0.4);
}
.contact__flash--ko {
  background: rgba(247, 108, 130, 0.12);
  border-color: rgba(247, 108, 130, 0.45);
}
.contact__flash a { color: var(--gold); }

/* ---------- Auto-dépannage ---------- */
.contact__faq {
  border: 1px solid rgba(76, 201, 240, 0.14);
  border-radius: 12px;
  background: rgba(14, 20, 36, 0.4);
  margin: 0 0 10px;
  padding: 0 18px;
}
.contact__faq > summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.contact__faq > summary::-webkit-details-marker { display: none; }
.contact__faq > summary::before {
  content: "+";
  color: var(--gold);
  font-weight: 900;
  flex: 0 0 auto;
  width: 1em;
}
.contact__faq[open] > summary::before { content: "–"; }
.contact__faq > summary:hover { color: var(--gold); }
.contact__faq > p {
  margin: 0 0 16px;
  padding-left: calc(1em + 10px);
  color: var(--ink-soft);
  line-height: 1.7;
}
.contact__faq a { color: var(--gold); }

/* ---------- Formulaire ---------- */
.contact-form { margin: 0 0 1.5rem; }

.contact-form__row { margin: 0 0 18px; }

.contact-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--navy-2);
  color: var(--ink);
  border: 2px solid var(--navy-3);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 1rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color .2s;
}
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--gold); }

.contact-form ::placeholder { color: var(--ink-soft); opacity: .55; }

/* Le <select> hérite de la flèche native, illisible sur fond sombre sous
   Windows/Chrome : on la redessine en SVG inline (pas de requête réseau). */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffcb47' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 42px;
}
.contact-form select option { background: var(--navy-2); color: var(--ink); }

.contact-form__actions { margin: 22px 0 0; }
.contact-form__actions .btn { width: 100%; }

.contact-form__privacy {
  margin: 18px 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .contact-form__actions .btn { width: auto; min-width: 220px; }
}