/* ============================================================
   Formulaire de contact.
   Jamais d'adresse e-mail affichée : on écrit via ce formulaire.
   Les couleurs suivent le texte du conteneur (currentColor), ce qui
   marche sur fond clair comme sur fond sombre. Réglages par page :
     --f-erreur         couleur des erreurs (lisible sur le fond)
     --f-bouton-fond    fond du bouton Envoyer
     --f-bouton-texte   texte du bouton Envoyer
   ============================================================ */
.formulaire{
  --f-erreur:#B3261E;
  --f-fond:color-mix(in srgb,currentColor 6%,transparent);
  --f-bord:color-mix(in srgb,currentColor 40%,transparent);
  --f-arrive:cubic-bezier(.22,1,.36,1);
  display:grid;gap:20px;width:100%;max-width:640px;margin:0;position:relative}
.formulaire__champs{display:grid;gap:18px}
@media (min-width:640px){.formulaire__champs{grid-template-columns:1fr 1fr}.champ--large{grid-column:1/-1}}
.champ{display:grid;gap:6px;align-content:start}
.champ label{font-weight:600;font-size:.9375rem;line-height:1.3}
.champ label span{font-weight:400;opacity:.75;margin-left:6px}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:1rem;line-height:1.4;color:inherit;width:100%;min-height:52px;padding:12px 16px;
  background:var(--f-fond);border:1px solid var(--f-bord);border-radius:12px;
  transition:border-color .18s ease-out,background-color .18s ease-out,box-shadow .18s ease-out}
.champ textarea{min-height:148px;resize:vertical}
.champ select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.champ select option{color:#1D1F24;background:#fff}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:color-mix(in srgb,currentColor 65%,transparent)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:currentColor;background-color:color-mix(in srgb,currentColor 10%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)}
.champ [aria-invalid="true"]{border-color:var(--f-erreur);box-shadow:0 0 0 1px var(--f-erreur)}
.champ__erreur{margin:0;color:var(--f-erreur);font-size:.875rem;font-weight:500;line-height:1.4}
.champ__erreur:empty{display:none}
.champ__erreur:not(:empty){animation:f-apparait .32s var(--f-arrive) both}
/* piège à robots : invisible pour les humains, rempli par les robots */
.champ--piege{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

.formulaire__resume{border:2px solid var(--f-erreur);border-radius:12px;padding:14px 18px;animation:f-apparait .32s var(--f-arrive) both}
.formulaire__resume:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--f-erreur) 35%,transparent)}
.formulaire__resume p{margin:0 0 6px;font-weight:600;color:var(--f-erreur)}
.formulaire__resume ul{margin:0;padding-left:20px}
.formulaire__resume a{color:inherit;text-underline-offset:3px}

.formulaire__pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.formulaire__note{margin:0;font-size:.875rem;opacity:.8;max-width:36ch}
.formulaire__envoyer{
  font:inherit;font-weight:600;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border:0;border-radius:999px;cursor:pointer;
  background:var(--f-bouton-fond,currentColor);color:var(--f-bouton-texte,#fff);
  transition:transform .18s var(--f-arrive),opacity .18s}
.formulaire__envoyer svg{width:18px;height:18px;transition:transform .25s var(--f-arrive)}
.formulaire__envoyer:hover svg{transform:translateX(4px)}
.formulaire__envoyer:active{transform:scale(.97)}
.formulaire__envoyer:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.formulaire__envoyer[aria-busy="true"]{cursor:progress;opacity:.85}
.formulaire__envoyer[aria-busy="true"] svg{display:none}
.formulaire__envoyer[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:f-tourne .7s linear infinite}

.formulaire__merci{padding:28px 0 8px;animation:f-apparait .6s var(--f-arrive) both}
.formulaire__merci:focus{outline:none}
.formulaire__merci svg{width:44px;height:44px;margin-bottom:12px}
.formulaire__merci strong{display:block;font-size:1.5rem;line-height:1.2;margin-bottom:8px}
.formulaire__merci p{margin:0 0 6px}
.formulaire__merci small{opacity:.7}
.formulaire.est-envoye .formulaire__champs,.formulaire.est-envoye .formulaire__pied,.formulaire.est-envoye .formulaire__resume{display:none}

@keyframes f-apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes f-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .formulaire *,.formulaire *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .formulaire__envoyer[aria-busy="true"]::after{animation:f-tourne 1.6s linear infinite!important}
}