/* Bloc villemont/contact-form — styles venus de components.css (refonte 1e) */

/* ── Contact form ─────────────────────────────────────────── */

.contact-form {
  background: var(--bone-warm);
  padding: 56px;
  border: 1px solid var(--rule-soft);
}

.form-field { margin-bottom: 28px; }

.form-field label {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* Formulaire (colonne droite) */
.contact-form__label { color: var(--ochre-deep); margin-bottom: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

.form-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 320px;
  line-height: 1.6;
}

@media (max-width: 640px) {

  .form-row { grid-template-columns: 1fr; }

  .form-foot { flex-direction: column; align-items: flex-start; }
}

/* Cadre de confirmation / erreur du formulaire de contact (retour client, nov. 2026) :
   style des panneaux du site ; après envoi réussi il remplace le formulaire et
   prend la hauteur du bloc Coordonnées, contenu centré. */
.form-notice {
  margin-bottom: 28px;
  padding: var(--pad-block);
  background: var(--bone-warm);
  border: 1px solid var(--rule-soft);
  border-top: 2px solid var(--ochre);
  text-align: center;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.form-notice[hidden] { display: none; }

.form-notice:focus { outline: none; }

.form-notice::before {
  content: "❧";
  display: block;
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: var(--fs-icon);
  line-height: 1;
  color: var(--ochre);
}

.form-notice__label {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.form-notice__text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 0.6vw + 17px, 23px);
  line-height: 1.45;
  color: var(--ink-soft);
}

.form-notice--ok { background: color-mix(in srgb, var(--success-line) 10%, var(--bone-warm)); border-top-color: var(--success-line); }

.form-notice--ok .form-notice__label { color: var(--success); }

.form-notice--err { background: color-mix(in srgb, var(--burgundy) 6%, var(--bone-warm)); border-top-color: var(--burgundy); }

.form-notice--err .form-notice__label { color: var(--burgundy); }

.contact-form-block.is-sent { display: flex; flex-direction: column; }

.contact-form-block.is-sent .form-notice {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-form.is-sending { opacity: .6; }

/* ── Objet du message — boutons (radios stylés en chips) ── */
.form-subject { border: none; padding: 0; margin: 0 0 28px; }

.form-subject legend {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
  padding: 0;
}

.form-subject__opts { display: flex; flex-wrap: wrap; gap: 10px; }

.form-subject__opt { cursor: pointer; }

.form-subject__opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-subject__opt span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 9px 16px;
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.form-subject__opt:hover span { border-color: var(--burgundy); color: var(--burgundy); }

.form-subject__opt input:checked + span {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--bone);
}

.form-subject__opt input:focus-visible + span {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

@media (max-width: 1024px) {

  .contact-form { padding: 36px; }
}

@media (max-width: 640px) {

  .contact-form { padding: 24px; }
}