/* ==========================================================================
   Contact / Devis
   ========================================================================== */
.contact {
  position: relative; min-height: min(100vh, 1080px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(100px, 12vh, 120px) var(--gutter); overflow: hidden;
}
.contact .hero-stars { z-index: 1; }
.contact__grid {
  position: relative; z-index: 3; width: 100%; max-width: 1520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center;
}
.contact__copy, .contact__panel { min-width: 0; }
.contact__panel { position: relative; }

/* Titre : une phrase par ligne (65 / 60 px sur grand écran), la taille suit la colonne pour ne jamais se chevaucher */
.contact__title {
  margin: 16px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: clamp(38px, 5.6vw, 78px); line-height: .94; letter-spacing: -.04em;
}
.contact__title span { display: block; }
.contact__title .l1 { font-size: min(65px, 8.4vw); min-height: 1.077em; }
.contact__title .l2 { font-size: min(60px, 8vw); min-height: 1.333em; color: var(--yellow); }
@media (min-width: 1000px) {
  .contact__title .l1 { font-size: min(65px, 4.1vw); }
  .contact__title .l2 { font-size: min(60px, 3.9vw); }
}
.contact__intro { margin: clamp(24px, 3vw, 34px) 0 0; max-width: 46ch; min-height: 90px; font: 400 clamp(13.5px, 1.15vw, 15.5px)/1.75 var(--f-body); color: rgba(244, 244, 242, .62); }
.contact__links { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin-top: clamp(32px, 4vw, 52px); }
.contact__link { display: flex; align-items: center; gap: 14px; color: var(--text); transition: color .25s; }
.contact__link:hover { color: var(--yellow); }
.contact__link-icon { display: inline-flex; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.contact__link-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.contact__link-text { font-family: var(--f-display); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.01em; }
.contact__note { display: flex; align-items: center; gap: 12px; margin-top: clamp(30px, 3.6vw, 46px); font: 600 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 244, 242, .5); }
.contact__note::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--yellow); }
.contact__label { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 244, 242, .45); }

/* Formulaire */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-top: 22px; }
.form[hidden] { display: none; }
.field {
  position: relative; display: flex; flex-direction: column; gap: 7px; padding: 14px 18px; border-radius: 18px;
  border: 1px solid rgba(244, 244, 242, .09); background: rgba(255, 255, 255, .02);
  transition: border-color .3s, background .3s;
}
.field--full { grid-column: 1 / -1; }
.field:focus-within { border-color: rgba(255, 238, 51, .55); }
.field__label { font: 600 9.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 244, 242, .5); }
.field__label b { font-weight: inherit; color: var(--yellow); }
.field input, .field select, .field textarea {
  width: 100%; margin: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: 400 14.5px/1.4 var(--f-body);
}
.field select { padding-right: 26px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.field select option { background: #14151a; color: var(--text); }
.field textarea { line-height: 1.7; resize: vertical; }
.field ::placeholder { color: rgba(244, 244, 242, .3); }
.field__chevron { position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.form__legal { font: 400 11.5px/1.6 var(--f-body); color: rgba(244, 244, 242, .4); max-width: 34ch; }
.form__error { grid-column: 1 / -1; margin: 0; font: 400 12.5px/1.5 var(--f-body); color: #ff8a6b; }
.form__error[hidden] { display: none; }
.form [type="submit"]:disabled { opacity: .6; cursor: progress; }
@media (hover: none) and (max-width: 980px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* Confirmation */
.sent { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(30px, 4vw, 54px) 0; }
.sent[hidden] { display: none; }
.sent__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.sent__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sent__title { font-family: var(--f-display); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.sent__text { font: 400 14px/1.7 var(--f-body); color: rgba(244, 244, 242, .6); max-width: 40ch; }
.sent__title:focus { outline: none; }