/* Formulaire de contact — partagé par /contact et la section de l'accueil.
   Les styles propres à chaque page (grille, colonne latérale) restent dans la page. */

.form-card { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 32px 34px 30px; }
.field { margin: 20px 0 0; }
.field:first-child { margin-top: 0; }
.field > label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(20,22,26,.55); font-weight: 500; }
.field .opt { text-transform: none; letter-spacing: 0; font-family: 'IBM Plex Sans', sans-serif; color: rgba(20,22,26,.4); }
.field input, .field textarea {
  width: 100%; margin: 7px 0 0; padding: 12px 13px; font-family: inherit; font-size: 15.5px; line-height: 1.5;
  color: #14161A; background: #FAF9F6; border: 1px solid rgba(20,22,26,.22); border-radius: 4px; -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; }
/* Sous 16 px, Safari iOS zoome sur le champ actif : la page devient plus large
   que l'écran et se met à glisser de gauche à droite. 16 px empêche le zoom. */
@media (pointer: coarse) {
  .field input, .field textarea { font-size: 16px; }
}
.field input:focus, .field textarea:focus { outline: none; border-color: #14417A; box-shadow: 0 0 0 3px rgba(20,65,122,.16); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #A3341F; background: #FDF6F4; }
.field .err, .consent .err { display: none; margin: 6px 0 0; font-size: 13px; color: #A3341F; }
.field.has-error .err, .consent.has-error .err { display: block; }

/* Pot de miel : jamais visible, jamais type="hidden" (les robots l'ignoreraient). */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 11px; align-items: flex-start; margin: 22px 0 0; }
.consent input { margin: 2px 0 0; width: 17px; height: 17px; flex: none; accent-color: #14417A; }
.consent label { display: block; font-size: 13.5px; line-height: 1.6; color: rgba(20,22,26,.7); }
.consent a { color: #14417A; text-decoration: underline; text-underline-offset: 2px; }
.consent.has-error label { color: #A3341F; }

.submit { margin: 24px 0 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.submit button {
  background: #14417A; color: #FAF9F6; border: 0; border-radius: 4px; padding: 15px 28px;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.submit button:hover { opacity: .88; }
.submit button[disabled] { opacity: .5; cursor: default; }
.submit .hint { font-size: 13px; color: rgba(20,22,26,.5); }

.notice { margin: 0 0 22px; padding: 14px 18px; border-radius: 6px; font-size: 14.5px; line-height: 1.6; border: 1px solid; }
.notice[hidden] { display: none; }
.notice.bad { background: #FDF6F4; border-color: rgba(163,52,31,.32); color: #7E2817; }
.notice.good { background: #F1F6F1; border-color: rgba(31,102,58,.3); color: #1F663A; }

@media (max-width: 860px) {
  .form-card { padding: 24px 22px 22px; }
}
@media (max-width: 520px) {
  .submit button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Section « Nous joindre » — autonome, pour pouvoir être posée sur n'importe
   quelle page. Les var() reprennent le rythme de landing.html quand elles
   existent, et retombent sur les valeurs des autres pages sinon.
   --------------------------------------------------------------------------- */

.contact-section {
  padding: var(--air, 68px) var(--pad, 56px);
  border-top: 1px solid rgba(20,22,26,.1);
  max-width: calc(var(--wrap, 1280px) + 2 * var(--pad, 56px));
  margin: 0 auto;
}
.contact-head { max-width: 42em; }
.contact-section .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(20,22,26,.5);
}
.contact-section h2 {
  margin: 12px 0 0; font-size: 34px; line-height: 1.12;
  letter-spacing: -.022em; font-weight: 700;
}
.contact-section .lede {
  margin: 16px 0 0; font-size: 16px; line-height: 1.65;
  color: rgba(20,22,26,.62); max-width: 32em;
}

/* Formulaire à gauche, illustration à droite — partout, /contact comprise.
   Même taille (360 px) et même centrage dans les deux cas. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 34em) 1fr; gap: 56px; align-items: start; margin: 40px 0 0; }
.art-col { display: flex; justify-content: center; align-items: flex-start; padding-top: 10px; }
.art-col svg { display: block; width: 100%; height: auto; max-width: 360px; }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-section h2 { font-size: 26px; }
  /* Décorative : sur petit écran, la place revient au formulaire. */
  .art-col { display: none; }
}