/*
 * Formulaire de contact — saisie et accusé de réception.
 *
 * Les couleurs viennent des jetons --lupeo-* du thème enfant : si la charte
 * change dans le personnalisateur, cette page suit.
 *
 * ⚠️ Deux pièges hérités du formulaire de retour, vérifiés au navigateur :
 *
 * 1. La feuille de Blocksy est imprimée APRÈS celle de l'extension, et elle
 *    habille les champs par `input[type="text"]` — un élément + un attribut,
 *    soit (0,1,1), qui bat une classe seule (0,1,0). Sans le nom d'élément et
 *    le conteneur devant, le champ garde le fond transparent et les angles à
 *    3 px de Blocksy.
 * 2. Blocksy peint tout `[type=submit]` avec l'orange du bouton d'achat. Le
 *    bouton d'envoi est turquoise, jamais orange : l'orange est réservé à
 *    l'achat, l'employer ailleurs lui fait perdre sa force.
 *
 * Aucun `!important` : le bon niveau de spécificité suffit.
 */

.lupeo-contact,
.lupeo-contact-recu{
  --lp-champ-bord:#D8D0C4;
  font-family:var(--lupeo-sans);
  color:var(--lupeo-ink-2);
}

/* WordPress centre d'autorité tout enfant direct d'un conteneur
   `is-layout-constrained`, avec un `margin-left:auto !important` imbattable.
   La largeur est donc posée sur les enfants, jamais sur le conteneur : le
   formulaire commence alors sur la même verticale que le titre de la page. */
.lupeo-contact > *{max-width:720px}

/* ── Le rappel d'erreurs ───────────────────────────────────────────── */
.lupeo-contact__erreurs{
  margin:0 0 22px;padding:14px 16px;
  background:#FDF2F2;border:1px solid #E7C3C3;border-radius:10px;
  color:#8C2A2A;
}
.lupeo-contact__erreurs p{margin:0 0 6px}
.lupeo-contact__erreurs ul{margin:0;padding-left:20px}
.lupeo-contact__erreurs li{margin:3px 0}

/* ── La carte de formulaire ────────────────────────────────────────── */
.lupeo-contact__form{
  display:flex;flex-direction:column;gap:26px;
  padding:26px 24px;
  background:#fff;
  border:1px solid var(--lupeo-line);
  border-radius:14px;
}

.lupeo-contact__grp{
  display:flex;flex-direction:column;gap:14px;
  margin:0;padding:0;border:0;
}
.lupeo-contact__grp legend{
  width:100%;padding:0 0 10px;margin:0 0 2px;
  border-bottom:1px solid var(--lupeo-line);
  font-family:var(--lupeo-display);font-weight:700;font-size:1rem;
  color:var(--lupeo-ink);
}

.lupeo-contact__champ{display:flex;flex-direction:column;gap:5px;margin:0}
.lupeo-contact__champ label{font-weight:500;font-size:.92rem;color:var(--lupeo-ink)}
.lupeo-contact__req{color:var(--lupeo-teal);font-weight:600}
.lupeo-contact__opt{font-weight:400;color:var(--lupeo-mute)}
.lupeo-contact__aide{font-size:.87rem;line-height:1.5;color:var(--lupeo-mute)}

/* ⚠️ Troisième piège, celui qui coupe le texte de la liste déroulante.
   Blocksy pose une HAUTEUR FIXE sur les champs :
   `height: var(--has-height, var(--theme-form-field-height, 40px))`.
   Notre remplissage vertical (11 + 11) et l'interligne (22,4 px) réclament
   46,4 px : dans une boîte de 40 px en `border-box`, le texte est rogné. Un
   `input` ne le montre pas — il centre son texte et le déborde en silence —
   mais un `select` en `appearance:none` aligne en haut, et la moitié basse des
   lettres disparaît. Mesuré sur le `select` du sujet : 40 px rendus pour
   46,4 px nécessaires.
   `height:auto` rend la main au contenu, `min-height:48px` garde une marge
   (1,6 px) et une cible tactile confortable. Ne pas revenir à `min-height:0`. */
.lupeo-contact input.lupeo-contact__saisie,
.lupeo-contact select.lupeo-contact__saisie,
.lupeo-contact textarea.lupeo-contact__saisie{
  width:100%;padding:11px 13px;height:auto;min-height:48px;
  font-family:var(--lupeo-sans);font-size:1rem;line-height:1.4;
  color:var(--lupeo-ink);background:#fff;
  border:1px solid var(--lp-champ-bord);border-radius:9px;
  appearance:none;
}
.lupeo-contact input.lupeo-contact__saisie:focus-visible,
.lupeo-contact select.lupeo-contact__saisie:focus-visible,
.lupeo-contact textarea.lupeo-contact__saisie:focus-visible{
  outline:2px solid var(--lupeo-teal);outline-offset:1px;
  border-color:var(--lupeo-teal);
}
.lupeo-contact select.lupeo-contact__saisie{
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234A453E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.lupeo-contact textarea.lupeo-contact__saisie{min-height:150px;resize:vertical}

.lupeo-contact__duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Le champ leurre : hors écran, mais lisible par un robot qui remplit tout ce
   qu'il trouve. `display:none` serait détecté ; ceci ne l'est pas. */
.lupeo-contact__leurre{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* ── Le pied du formulaire ─────────────────────────────────────────── */
.lupeo-contact__pied{display:flex;flex-direction:column;gap:14px}
.lupeo-contact__rgpd{margin:0;font-size:.85rem;line-height:1.55;color:var(--lupeo-mute)}
.lupeo-contact__rgpd :where(a){color:var(--lupeo-teal)}

.lupeo-contact button.lupeo-contact__envoyer{
  display:block;width:100%;padding:15px 20px;min-height:0;
  font-family:var(--lupeo-sans);font-weight:600;font-size:1rem;line-height:1;
  color:#fff;background:var(--lupeo-teal);
  border:0;border-radius:10px;cursor:pointer;
  transition:background .15s ease;
}
.lupeo-contact button.lupeo-contact__envoyer:hover{background:var(--lupeo-teal-deep)}
.lupeo-contact button.lupeo-contact__envoyer:focus-visible{outline:2px solid var(--lupeo-teal-deep);outline-offset:2px}

.lupeo-contact__secours{margin:0;text-align:center;font-size:.9rem;color:var(--lupeo-mute)}
.lupeo-contact__secours :where(a){color:var(--lupeo-teal);font-weight:500}

/* ── L'accusé de réception ─────────────────────────────────────────── */
.lupeo-contact-recu{
  display:flex;flex-direction:column;gap:20px;
  max-width:720px;padding:30px 26px;
  background:#fff;border:1px solid var(--lupeo-line);border-radius:14px;
}
.lupeo-contact-recu__coche{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:#EAF5EF;
}
.lupeo-contact-recu__coche .lupeo-i{
  width:24px;height:24px;fill:none;stroke:var(--lupeo-ok);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.lupeo-contact-recu h2{margin:0 0 8px;font-family:var(--lupeo-display);font-weight:700}
.lupeo-contact-recu p{margin:0}
.lupeo-contact-recu__rappel{
  padding:13px 15px;
  background:var(--lupeo-cream);border:1px solid var(--lupeo-line);
  border-radius:10px;font-size:.93rem;
}
.lupeo-contact-recu__rappel :where(a){color:var(--lupeo-teal);font-weight:500}

/* ── Téléphone ─────────────────────────────────────────────────────── */
@media (max-width:560px){
  .lupeo-contact__duo{grid-template-columns:1fr}
  .lupeo-contact__form{padding:20px 16px}
  .lupeo-contact-recu{padding:24px 18px}
}

@media (prefers-reduced-motion:reduce){
  .lupeo-contact button.lupeo-contact__envoyer{transition:none}
}