/* ============ 01 HERO ============ */
  .contact-hero{ background:var(--navy); }
  .contact-hero__grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:clamp(40px,6vw,80px);
    align-items:start;
    padding:clamp(96px,12vw,150px) 0 clamp(70px,9vw,104px);
  }
  .contact-hero h1{
    font-size:clamp(28px,3.8vw,44px);
    line-height:1.18;
    color:#fff;
    font-weight:500;
    max-width:15ch;
  }
  .contact-hero__lead{
    margin-top:28px;
    font-size:16px;
    line-height:1.8;
    color:var(--mist);
    max-width:46ch;
  }
  .contact-hero__card{
    padding-top:clamp(6px,1vw,10px);
  }
  .contact-hero__card-name{
    font-family:var(--display);
    font-size:19px;
    color:#fff;
    letter-spacing:.01em;
  }
  .contact-hero__card-tagline{
    margin-top:6px;
    font-size:14px;
    color:var(--mist-dim);
  }
  .contact-hero__card-list{
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid var(--navy-line);
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .contact-hero__card-list a, .contact-hero__card-list p{
    font-size:14.5px;
    color:var(--mist);
    line-height:1.5;
  }
  .contact-hero__card-list a{ border-bottom:1px solid transparent; transition:border-color .15s ease, color .15s ease; }
  .contact-hero__card-list a:hover{ color:#fff; border-color:var(--terracotta); }
  @media(max-width:820px){
    .contact-hero__grid{ grid-template-columns:1fr; padding-top:70px; }
    .contact-hero__card{ margin-top:12px; }
  }

  /* ============ 02 FORMULAIRE ============ */
  .form-section{ padding:clamp(72px,9vw,120px) 0; }
  .form-section h2{
    font-size:clamp(23px,2.9vw,30px);
    color:var(--navy);
    font-weight:520;
    max-width:20ch;
  }
  .form{
    margin-top:clamp(52px,7vw,80px);
    max-width:680px;
  }
  .form__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(20px,3vw,40px);
    margin-bottom:clamp(30px,4vw,40px);
  }
  .field{ display:flex; flex-direction:column; }
  .field label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:10px;
  }
  .field label .req{ color:var(--terracotta); }
  .field input, .field textarea{
    font-family:var(--display);
    font-size:17px;
    color:var(--navy);
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line-dark);
    padding:8px 2px 12px;
    outline:none;
    transition:border-color .18s ease;
    font-weight:400;
  }
  .field input::placeholder, .field textarea::placeholder{
    color:rgba(23,32,43,.32);
    font-family:var(--body);
    font-size:14.5px;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--terracotta); }
  .field textarea{ resize:vertical; min-height:120px; line-height:1.5; }

  .form__subject{ margin-bottom:clamp(34px,4.5vw,46px); }
  .form__subject-label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:18px;
  }
  .form__choices{
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
  }
  .choice{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
  }
  .choice:nth-child(2){ margin-top:4px; }
  .choice:nth-child(4){ margin-top:4px; }
  .choice input{ position:absolute; opacity:0; width:0; height:0; }
  .choice__mark{
    width:14px; height:14px;
    border:1px solid var(--ink-soft);
    flex-shrink:0;
    position:relative;
  }
  .choice input:checked + .choice__mark{ border-color:var(--terracotta); }
  .choice input:checked + .choice__mark::after{
    content:"";
    position:absolute; inset:2.5px;
    background:var(--terracotta);
  }
  .choice span.choice__label{
    font-size:14.5px;
    color:var(--ink-soft);
  }

  .form .btn{ margin-top:8px; }
  .form__mention{
    margin-top:24px;
    font-size:12.5px;
    line-height:1.6;
    color:var(--ink-soft);
    opacity:.85;
    max-width:52ch;
  }
  .form__mention a{ border-bottom:1px solid var(--line-dark); }
  .form__mention a:hover{ border-color:var(--terracotta); color:var(--terracotta); }

  @media(max-width:600px){
    .form__row{ grid-template-columns:1fr; gap:26px; }
  }

  /* ============ 03 OUVERTURE ============ */
  .opening{ max-width:620px; }
  .opening h2{
    font-size:clamp(21px,2.6vw,26px);
    color:var(--navy);
    font-weight:520;
    max-width:20ch;
  }
  .opening p.opening__body{
    margin-top:22px;
    font-size:15.5px;
    line-height:1.8;
    color:var(--ink-soft);
    max-width:54ch;
  }
  .opening__close{
    margin-top:28px;
    font-family:var(--display);
    font-style:italic;
    font-size:18px;
    color:var(--navy);
  }


/* ---- Accessibilité / états du formulaire (ajouts production) ---- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.field__error{
  display:block;
  min-height:16px;
  margin-top:6px;
  font-size:12.5px;
  color:var(--terracotta-dark);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-bottom-color:var(--terracotta-dark);
}
.form__confirmation{
  margin-top:8px;
  max-width:680px;
  padding-top:8px;
}
.form__confirmation-title{
  font-family:var(--display);
  font-size:22px;
  color:var(--navy);
}
.form__confirmation-body{
  margin-top:12px;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-soft);
}
.form__status{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:52ch;
}

/* ---- Honeypot anti-spam (_honeypot, reconnu par Formspark) ----
   Masqué visuellement et retiré de la navigation clavier / lecteurs
   d'écran (aria-hidden + tabindex="-1"), sans utiliser display:none
   ni visibility:hidden pour rester compatible avec la détection de
   bots la plus large possible. */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}