/* ==========================================================================
   POLARIX — page de contact

   Une page de saisie. Elle emprunte la barre de navigation, le pied de page
   et le ciel à studio.css, et n'ajoute ici que le formulaire.

   Système de formes, rappel : l'interactif est en pilule, les conteneurs à
   angle vif. Un champ de saisie est un conteneur, pas une pastille : il
   reste donc à angle vif, et seul le bouton d'envoi est en pilule. C'est ce
   qui donne à l'ensemble son air d'appareil plutôt que de formulaire web.
   ========================================================================== */

:root {
  /* Seule couleur du site en dehors de l'ambre. Une erreur de saisie doit se
     distinguer de ce qui guide : l'ambre dit « c'est ici qu'on va », le
     corail dit « ça ne passe pas ». 8,7:1 sur le fond. */
  --alert: #ff8f6b;
}

.contact-page {
  padding-top: calc(var(--nav-h) + var(--s-5));
  padding-bottom: var(--s-6);
}

.contact-page__head {
  display: grid;
  gap: var(--s-2);
  max-width: 56ch;
  margin-bottom: var(--s-5);
}
.contact-page__head b { display: inline-block; line-height: 1.06; padding-bottom: 0.05em; }
.contact-page__head .lede { color: var(--muted); }

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

/* ==========================================================================
   Formulaire
   ========================================================================== */

.form { display: grid; gap: var(--s-3); }

/* `display: grid` l'emporte sur l'attribut `hidden`, qui ne pose qu'un
   `display: none` de feuille utilisateur. Sans cette règle, le formulaire
   resterait visible sous le panneau de confirmation. */
.form[hidden] { display: none; }

.form__legend {
  font-family: var(--font-tech);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Deux champs par ligne au-dessus de 640px, un seul en dessous. */
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.field { display: grid; gap: 0.45rem; }

.field label {
  font-family: var(--font-tech);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice);
}

.field__req { color: var(--polaris); }

/* Pas de texte d'exemple en guise d'étiquette : il disparaît à la saisie et
   laisse l'utilisateur sans repère. L'étiquette est au-dessus, toujours. */
.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: rgba(11, 18, 36, 0.55);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1.5;
  transition: border-color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}

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

.field input:hover,
.field textarea:hover { border-color: rgba(169, 196, 239, 0.28); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--polaris);
  background: rgba(11, 18, 36, 0.8);
}
/* L'anneau de focus reste visible au clavier, en plus du changement de
   bordure : la bordure seule ne suffit pas pour qui navigue au clavier. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--polaris);
  outline-offset: 2px;
}

.field__hint {
  font-size: var(--t-xs);
  color: var(--dim);
  line-height: 1.5;
}

/* Le message d'erreur est sous son champ, jamais regroupé en haut de page :
   il faut le lire à l'endroit où on le corrige. */
.field__error {
  font-family: var(--font-tech);
  font-size: var(--t-xs);
  color: var(--alert);
  min-height: 0;
  display: none;
}
.field.is-invalid .field__error { display: block; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--alert); }

/* Pot de miel : hors de l'écran plutôt que display:none, car certains
   robots ignorent les champs masqués mais remplissent les autres. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding-top: var(--s-1);
}

.form__submit { min-width: 15rem; justify-content: center; }
.form__submit[disabled] { opacity: 0.55; cursor: progress; }

.form__rgpd {
  font-size: var(--t-xs);
  color: var(--dim);
  max-width: 52ch;
  line-height: 1.6;
}

.form__status {
  font-family: var(--font-tech);
  font-size: var(--t-xs);
  color: var(--alert);
  min-height: 1.2em;
}
.form__status:empty { display: none; }

/* ==========================================================================
   Confirmation
   ========================================================================== */

.sent {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  align-content: start;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--line-warm);
  border-radius: var(--r-box);
  background: linear-gradient(180deg, rgba(16, 26, 51, 0.55), rgba(7, 11, 22, 0.35));
}
.sent[hidden] { display: none; }
.sent:focus-visible { outline: 2px solid var(--polaris); outline-offset: 4px; }

.sent__mark { width: 42px; height: 42px; color: var(--polaris); }
.sent b { color: var(--polaris); }
.sent .btn { margin-top: var(--s-1); }

@media (prefers-reduced-motion: no-preference) {
  .sent__mark { animation: sentIn 700ms var(--ease-snap) both; }
}
@keyframes sentIn {
  from { opacity: 0; transform: scale(0.4) rotate(-45deg); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Coordonnées directes
   ========================================================================== */

.direct {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

.direct__list { display: grid; gap: var(--s-2); }

.direct__list li { display: grid; gap: 0.2rem; }

.direct__k {
  font-family: var(--font-tech);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.direct__list span:not(.direct__k),
.direct__list a { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.direct__list a:hover { color: var(--polaris); }

/* ==========================================================================
   Adaptations
   ========================================================================== */

@media (max-width: 900px) {
  .contact-page__grid { grid-template-columns: 1fr; }
  .direct { margin-top: var(--s-3); }
}

@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
  .form__submit { width: 100%; }
}