/* ==========================================================================
   contact.css — contact page. Requires base.css.
   Follows the home page system: section heading on the same scale as the
   home section titles, white card language of the home CTA, and the shared
   --vw / --u scale (identical up to 1920px, slower growth beyond).
   ========================================================================== */

/* ==========================================================================
   Contact section
   ========================================================================== */

.contact {
  margin-top: calc(6 * var(--vw));
}

/* The card and everything inside it is sized in em from this font-size:
   fluid, never below 16px (also avoids the iOS zoom on focus), and capped
   by the shared scale on very large screens. */
.contact-card {
  --field-bg: #f2f2f2;
  --field-bg-hover: #ebebeb;
  --field-radius: 0.75em;
  --field-pad-x: 1.125em;
  --transition: 0.25s var(--ease-out);

  font-size: max(1rem, 0.95 * var(--vw));
  width: 53.75em;
  max-width: 100%;
  margin: 0 auto;
  padding: 2.25em;
  border-radius: calc(2 * var(--vw));
  background-color: var(--color-surface);
  filter: drop-shadow(10px 10px 50px rgba(153, 153, 153, 0.082));
}

/* ==========================================================================
   Form layout
   Name and e-mail sit side by side only when the form itself is wide
   enough (container query), so the rule follows the card, not the screen.
   ========================================================================== */

.contact-form {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1.125em;
}

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

.contact-form__row {
  display: grid;
  gap: 1.125em;
}

@container (min-width: 34rem) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Spam trap: kept out of sight and out of the tab order. */
.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Fields — floating labels
   The label sits inside the empty field and moves up when the field is
   focused or filled (:placeholder-shown needs placeholder=" " in the HTML),
   so the field name stays visible while typing.
   States: hover → focus (accent ring) → valid (check) / invalid (red ring +
   message). Validity classes are set by contact.js.
   ========================================================================== */

.field {
  position: relative;
}

.field__control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.55em 2.75em 0.45em var(--field-pad-x);
  border: 0;
  border-radius: var(--field-radius);
  outline: none;
  background-color: var(--field-bg);
  box-shadow: 0 0 0 2px transparent;
  color: #000;
  font: inherit;
  font-size: 1em;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transition), box-shadow var(--transition);
  /* Keep a focused field clear of the sticky navbar (and of the keyboard). */
  scroll-margin-block: calc(var(--nav-height) + 1.5rem) 1.5rem;
}

.field__control:hover {
  background-color: var(--field-bg-hover);
}

.field__control:focus {
  background-color: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-accent), 0 0.5em 1.5em rgba(113, 31, 245, 0.1);
}

/* Browser autofill: keep the field colours instead of the default yellow. */
.field__control:-webkit-autofill {
  -webkit-text-fill-color: #000;
  box-shadow: 0 0 0 2px transparent, inset 0 0 0 100em var(--field-bg);
}

.field__label {
  position: absolute;
  top: 1em;
  left: var(--field-pad-x);
  right: 2.75em;
  overflow: hidden;
  color: var(--color-text-subtle);
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--transition), color var(--transition);
}

.field__control:focus + .field__label,
.field__control:not(:placeholder-shown) + .field__label {
  transform: translateY(-0.6em) scale(0.75);
}

.field__control:focus + .field__label {
  color: var(--color-accent);
}

/* Message: grows with its content (native field-sizing, JS fallback). */
.field--multiline .field__control {
  min-height: 12em;
  max-height: 24em;
  overflow-y: auto;
  resize: none;
  field-sizing: content;
}

/* Valid: a small check in the accent colour. */
.field::after {
  content: "";
  position: absolute;
  top: 1.45em;
  right: var(--field-pad-x);
  width: 0.7em;
  height: 0.38em;
  border-bottom: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  opacity: 0;
  transform: rotate(-45deg) scale(0.5);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.field.is-valid::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

/* Invalid: red ring, red label, message revealed under the field. */
.field.is-invalid .field__control {
  box-shadow: 0 0 0 2px var(--color-error);
}

.field.is-invalid .field__control:focus {
  box-shadow: 0 0 0 2px var(--color-error), 0 0.5em 1.5em rgba(198, 47, 47, 0.1);
}

.field.is-invalid .field__label {
  color: var(--color-error);
}

/* Height animates from 0 (grid 0fr → 1fr) so the layout never jumps. */
.field__error {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  color: var(--color-error);
  font-size: 0.875em;
  line-height: 1.4;
  opacity: 0;
  transition: grid-template-rows var(--transition), opacity var(--transition);
}

.field__error > span {
  min-height: 0;
  overflow: hidden;
  padding-left: var(--field-pad-x);
}

.field.is-invalid .field__error {
  grid-template-rows: 1fr;
  opacity: 1;
}

.field.is-invalid .field__error > span {
  padding-top: 0.45em;
}

/* ==========================================================================
   Form-level alert (sending failed)
   ========================================================================== */

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  margin: 0;
  padding: 0.875em 1em;
  border-radius: var(--field-radius);
  background-color: rgba(198, 47, 47, 0.08);
  color: var(--color-error);
  font-size: 0.9375em;
  line-height: 1.45;
  animation: contact-rise 0.35s var(--ease-out);
}

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

.form-alert::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-top: 0.05em;
  border-radius: 50%;
  background-color: var(--color-error);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================================
   Submit button — idle / hover / pressed / loading
   The chevron is the arrow of the site's "learn more" buttons; it becomes a
   spinner while sending (data-state="loading" on the form).
   ========================================================================== */

.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  width: 100%;
  min-height: 3.5em;
  margin-top: 0.375em;
  padding: 0.75em 1.5em;
  border: 0;
  border-radius: var(--field-radius);
  background-color: var(--color-dark);
  color: #fff;
  font: inherit;
  font-size: 1em;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition), transform 0.15s ease;
}

.submit:hover {
  background-color: #000;
}

.submit:active:not(:disabled) {
  transform: scale(0.985);
}

.submit:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.submit__icon {
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.submit:hover .submit__icon,
.submit:focus-visible .submit__icon {
  transform: translateX(0.2em) rotate(45deg);
}

.contact-form[data-state="loading"] .submit__icon {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  transform: none;
  animation: contact-spin 0.7s linear infinite;
}

/* ==========================================================================
   Success panel (replaces the form once the server has confirmed)
   ========================================================================== */

.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 2em 1em;
  text-align: center;
  animation: contact-rise 0.5s var(--ease-out);
}

.contact-success[hidden] {
  display: none;
}

.contact-success__icon {
  position: relative;
  width: 4em;
  height: 4em;
  margin-bottom: 0.5em;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0.75em 2em rgba(113, 31, 245, 0.25);
  animation: contact-pop 0.5s var(--ease-out);
}

.contact-success__icon::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 1.5em;
  height: 0.8em;
  border-bottom: 0.2em solid #fff;
  border-left: 0.2em solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-success__title {
  font-size: 1.75em;
  font-weight: 600;
  outline: none; /* focused by script to announce the result */
}

.contact-success__text {
  max-width: 28em;
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.5;
}

/* The navbar "Contact" pill. */
.contact-success__again {
  margin-top: 0.75em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--color-accent);
  border-radius: 50px;
  background-color: transparent;
  color: var(--color-accent);
  font: inherit;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.contact-success__again:hover,
.contact-success__again:focus-visible {
  background-color: var(--color-accent);
  color: #fff;
}

.contact-success__again:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes contact-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes contact-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes contact-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* ==========================================================================
   Responsive (≤ 810px) — same values as the home page mobile CTA card
   ========================================================================== */

@media (max-width: 810px) {
  .contact {
    margin-top: clamp(2.5rem, 10vw, 4rem);
  }

  .contact-card {
    padding: clamp(1.25rem, 5vw, 2rem);
    border-radius: clamp(1.5rem, 7vw, 2.5rem);
  }
}

/* ==========================================================================
   Reduced motion: states change instantly; the spinner stays as a static
   ring (the button label still says "Envoi en cours…").
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .field__control,
  .field__label,
  .field__error,
  .field::after,
  .submit,
  .submit__icon,
  .contact-success__again {
    transition: none;
  }

  .form-alert,
  .contact-success,
  .contact-success__icon,
  .contact-form[data-state="loading"] .submit__icon {
    animation: none;
  }
}