/* ==========================================================================
   Contact — page neutre, comme le Portfolio : elle recoit les trois
   audiences (brief section 4). Le seul accent est celui du bouton d'envoi.
   ========================================================================== */

main {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ---------- Accroche ---------- */

.contact-hero {
  padding: clamp(3rem, 10vw, 5.5rem) 0 clamp(2rem, 5vw, 3rem);
  max-width: 40rem;
}

.contact-hero__eyebrow {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  margin-bottom: 1.25rem;
}

.contact-hero__title {
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.contact-hero__lead {
  margin-top: 1.25rem;
  color: var(--fg-muted);
  font-size: var(--text-lead);
}

/* ---------- Mise en page ---------- */

.contact-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

@media (min-width: 52rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Formulaire ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3.5vw, 2rem);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Le formulaire de reference lu par Netlify ne doit jamais s'afficher, ni
   etre atteignable au clavier. L'attribut hidden suffit, la regle est la
   pour qu'aucune mise en page ne le ressuscite par accident. */
.form + .form,
form[hidden] { display: none !important; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--text-small);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input::placeholder,
.field textarea::placeholder { color: #5c5c66; }

/* Le champ actif se voit sans qu'on le cherche : bord eclairci et anneau
   doux, a la place du contour generique du site (redondant sur un champ). */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: #62626e;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent);
}

/* Fleche du selecteur : le rendu natif sombre est illisible sur Windows. */
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) calc(50% + 2px),
    calc(100% - 0.75rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.btn {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.8rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn:hover { filter: brightness(0.9); transform: translateY(-1px); }

/* Piege a robots : le champ doit rester dans le flux pour que les robots le
   voient, mais invisible et hors tabulation pour les humains. */
.form .visually-hidden { margin: 0; }

/* ---------- Colonne de droite ---------- */

.aside {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.aside__block {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.aside__title {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 0.85rem;
}

.aside__mail {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 650;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
  overflow-wrap: anywhere;
}

.aside__mail:hover { border-color: var(--fg); }

.aside__note { margin-top: 0.75rem; color: var(--fg-muted); font-size: 0.9rem; }

.aside__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.aside__links a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.aside__links a:hover { border-color: #4a4a58; color: var(--fg); }