/* ============================================================
   CONTACT - « Rencontrons-nous » : coordonnées + formulaire
   Chargé uniquement sur contact.html.
   ============================================================ */

.contact-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6rem;align-items:start;
}

/* ---------- Colonne gauche ---------- */
.contact-side .eyebrow{color:rgba(255,255,255,.75);margin-bottom:1.6rem;}
.contact-side h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.8rem, 6vw, 4.6rem);line-height:1.02;
  color:var(--teal-light);
  margin-bottom:4rem;
}
.contact-side h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem, 3vw, 2.5rem);color:#fff;
  margin-bottom:2rem;
}
.office{
  border-top:1px solid rgba(255,255,255,.22);
  padding-top:1.8rem;max-width:26rem;
}
.office__name{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--blair);
  color:var(--teal-light);margin-bottom:1rem;font-weight:300;
}
.office__line{
  display:block;font-size:1rem;font-weight:300;line-height:1.8;
  color:rgba(255,255,255,.8);
}
.office a.office__line{transition:color .25s;}
.office a.office__line:hover{color:var(--teal-light);}
.office__map{
  display:inline-flex;margin-top:1.6rem;
}

/* ---------- Formulaire ---------- */
.contact-form{max-width:38rem;}
.form-field{margin-bottom:2.6rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.form-field label{
  display:block;margin-bottom:.5rem;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:rgba(255,255,255,.6);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;background:none;border:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  color:#fff;font-family:var(--display);font-size:1rem;font-weight:300;
  padding:.65rem 0;
  transition:border-color .3s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;border-bottom-color:var(--teal-light);
}
.form-field textarea{min-height:130px;resize:vertical;line-height:1.7;}
/* Le menu déroulant hérite du fond du système : on force des couleurs lisibles */
.form-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
                   linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position:calc(100% - 12px) center, calc(100% - 6px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:1.8rem;
}
.form-field select option{color:#20242e;background:#fff;}

.form-legal{
  font-size:.78rem;font-weight:300;line-height:1.7;
  color:rgba(255,255,255,.5);
  margin-bottom:2.2rem;
}
.form-legal a{border-bottom:1px solid rgba(255,255,255,.35);}
.form-legal a:hover{color:var(--teal-light);}
/* Le CTA hérite du style global : on neutralise l'animation d'apparition */
.contact-form .hero-cta{
  margin-top:0;animation:none;opacity:1;cursor:pointer;
}
/* Anti-spam (champ masqué) */
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-status{
  margin-top:1.5rem;font-size:.9rem;font-weight:300;
  color:var(--teal-light);
}
.form-status[hidden]{display:none;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:3.5rem;}
  .contact-side h1{margin-bottom:2.5rem;}
  .form-row{grid-template-columns:1fr;gap:0;}
}