/* Règles propres à la page « contact » — engendré depuis maquette/corps/contact.css */
/* =====================================================================================
   PAGE « CONTACT » — une seule bande propre : le formulaire.
   Toutes les valeurs verticales sont relevées sur le site d'origine à 1440 px :
   bande 820 px de haut, titre à y=195, formulaire à y=270, bouton à y=775.
   ===================================================================================== */

/* Retrait des champs à l'intérieur de leur colonne : 3 % de la rangée (1080 px) sur le
   site d'origine. C'est lui qui donne au formulaire son décalage caractéristique. */
body[data-page="contact"] { --retrait-champ: 32.39px; }

/* --- La bande ------------------------------------------------------------------------ */
body[data-page="contact"] .sec--contact {
  background-color: var(--blanc);
  background-image: url('/assets/img/6xpos-bg-grain.jpg');
  background-repeat: repeat;
  background-position: 50% 50%;
}
/* 10 px de retrait interne (.titre-hero) + 20 px d'air avant le formulaire. */
body[data-page="contact"] .sec--contact .titre-hero { margin: 0 0 20px; }

/* --- Ossature du formulaire ----------------------------------------------------------- */
/* Le formulaire occupe toute la rangée ; l'air qui le suit ferme la bande à 820 px. */
body[data-page="contact"] .form-contact { margin-bottom: 29.7px; }

body[data-page="contact"] .form-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;                       /* le retrait de chaque champ fait l'écart */
  row-gap: var(--retrait-champ);
  margin-bottom: var(--retrait-champ);
}

body[data-page="contact"] .form-contact .champ {
  margin: 0;
  padding-left: var(--retrait-champ);
}
body[data-page="contact"] .form-contact .champ--date,
body[data-page="contact"] .form-contact .champ--message { margin-bottom: var(--retrait-champ); }
/* La date de naissance occupe une demi-rangée, comme les quatre champs du haut. */
body[data-page="contact"] .form-contact .champ--date { width: 50%; }

/* Libellé visible du champ « Date de naissance ». */
body[data-page="contact"] .form-libelle {
  display: block;
  padding: 0 0 16px var(--retrait-champ);
  font-size: 16px; line-height: 18px;
  color: var(--gris-texte);
}

/* --- Champs ---------------------------------------------------------------------------
   Pilules blanches à ombre douce : texte 14 px, retrait interne 16 px, pas de bordure.  */
body[data-page="contact"] .form-contact .champ input,
body[data-page="contact"] .form-contact .champ textarea {
  padding: 16px;
  border: 0;
  border-radius: 30px;
  font-size: 14px;
  line-height: normal;
}
body[data-page="contact"] .form-contact .champ textarea { min-height: 0; }
/* L'original colorait le TEXTE SAISI en gris clair (#999) : illisible une fois rempli.
   On garde le gris de l'invite seule, la saisie reste en bleu nuit. */
body[data-page="contact"] .form-contact ::placeholder { color: #757575; opacity: 1; }
/* Un champ « date » n'a pas d'invite : le navigateur affiche « jj/mm/aaaa » avec la couleur
   du champ. On le garde gris tant que la date n'est pas saisie, bleu nuit une fois remplie. */
body[data-page="contact"] .form-contact .champ--date input:invalid { color: #757575; }

/* --- Bouton d'envoi --------------------------------------------------------------------
   Pilule dégradée sur toute la largeur de la rangée. Le décalage de 18 px vers la droite
   est celui du site d'origine (le bouton dépasse la colonne des champs à droite) : il est
   conservé au-dessus de 1100 px pour rester au pixel près, et annulé en dessous.        */
body[data-page="contact"] .form-envoi { margin: 0; }
body[data-page="contact"] .form-envoi .envoi {
  width: 100%;
  margin-left: 18px;
  padding: 16px;
  border-radius: 30px;
  font-size: 14px; line-height: normal;
  text-align: center;
  box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
}
body[data-page="contact"] .form-envoi .envoi:hover { filter: brightness(1.03); }
body[data-page="contact"] .form-envoi .envoi:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }

/* --- Adaptatif -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body[data-page="contact"] .form-envoi .envoi { margin-left: 0; }
}
@media (max-width: 767px) {
  body[data-page="contact"] { --retrait-champ: 0px; }
  body[data-page="contact"] .form-grille { grid-template-columns: 1fr; row-gap: 16px; margin-bottom: 16px; }
  body[data-page="contact"] .form-contact .champ--date,
  body[data-page="contact"] .form-contact .champ--message { margin-bottom: 16px; }
  body[data-page="contact"] .form-contact .champ--date { width: 100%; }
  body[data-page="contact"] .form-libelle { padding-bottom: 8px; }
}