/* Règles propres à la page « contact » — engendré depuis atelier/maquette/corps/contact.css */
/* Formulaire de contact (11/11/2026). La maquette de Vanessa le montrait en IMAGE (formulaire-contact.png,
   « FORMULAIRE : intégration Emmanuel ») : ces règles le reproduisent avec les jetons de sa charte.
   Repris des règles du formulaire de vivlight.fr (app.css § 18 et page-contact.css), mêmes classes. */
body[data-page="contact"] .formulaire {margin:0;}
body[data-page="contact"] .champs {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 24px;}
body[data-page="contact"] .champ--pleine {grid-column:1 / -1;}
body[data-page="contact"] .champ label {display:block; margin:0 0 8px 16px; font-size:var(--t-petit); line-height:var(--i-petit); color:var(--indigo); font-weight:500;}
body[data-page="contact"] .champ input,
body[data-page="contact"] .champ textarea,
body[data-page="contact"] .champ select {width:100%; padding:14px 24px; min-height:52px; border:2px solid var(--filigrane); border-radius:var(--rayon-champ);
  background:#fff; color:var(--indigo); font:inherit; font-size:16px; line-height:22px;}
body[data-page="contact"] .champ textarea {border-radius:var(--rayon-encadre); min-height:170px; resize:vertical;}
body[data-page="contact"] .champ ::placeholder {color:var(--invite); opacity:1;}
/* Liste « Vous êtes » : chevron bleu marine intégré (SVG en data:, aucune ressource externe). */
body[data-page="contact"] .champ select {appearance:none; -webkit-appearance:none; padding-right:56px; cursor:pointer;
  background-repeat:no-repeat; background-position:right 24px center; background-size:18px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23141B3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
body[data-page="contact"] .champ select:required:invalid {color:var(--invite);}
body[data-page="contact"] .champ select option {color:var(--indigo);}
body[data-page="contact"] .champ input:focus-visible,
body[data-page="contact"] .champ select:focus-visible,
body[data-page="contact"] .champ textarea:focus-visible {border-color:var(--indigo); outline:var(--focus); outline-offset:2px;}
/* Aide placée ENTRE le libellé « Message » et la zone de saisie (visible avant l'envoi). */
body[data-page="contact"] .champ .form-aide {margin:0 0 12px 16px; max-width:470px; font-size:var(--t-petit); line-height:var(--i-petit); color:var(--ardoise);}
body[data-page="contact"] .champ .form-aide strong {color:var(--indigo);}
body[data-page="contact"] .champ-note {margin:8px 0 0 16px; font-size:13px; line-height:18px; color:var(--ardoise);}
body[data-page="contact"] .form-envoi {margin-top:26px; display:flex; align-items:center;}
body[data-page="contact"] .btn--grand {font-size:18px; padding:16px 44px;}
/* Erreurs et messages de retour (écrits par src/form.php). */
body[data-page="contact"] .erreur {color:#A3261B; font-size:13px; line-height:18px; margin:6px 0 0 16px;}
body[data-page="contact"] .champ:has(.erreur) input,
body[data-page="contact"] .champ:has(.erreur) select,
body[data-page="contact"] .champ:has(.erreur) textarea {border-color:#C0392B;}
body[data-page="contact"] .message-ok,
body[data-page="contact"] .message-erreur {border-radius:var(--rayon-message); padding:16px 22px; margin:0 0 24px;}
body[data-page="contact"] .message-ok {background:var(--preuve-1-fond); border-left:4px solid var(--preuve-1); color:var(--indigo);}
body[data-page="contact"] .message-erreur {background:#FDECEA; border-left:4px solid #C0392B; color:#922B21;}
body[data-page="contact"] .pot-de-miel {position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
@media (max-width:767px) {
  body[data-page="contact"] .champs {grid-template-columns:1fr;}
  body[data-page="contact"] .form-envoi .btn {width:100%;}
}