/* ============================================================
   UFML-Syndicat — Habillage charte des pages produit MemberPress
   Lot 2, item 4 — CSS UNIQUEMENT (aucune surcharge de template).
   Scopé à body.single-memberpressproduct → aucun effet ailleurs.
   Cible le markup MemberPress natif (.mepr-*, .mp-form-row, .mepr-submit…).
   Poppins fournie par ufmls-charte.css (enqueue conjoint via le mu-plugin).
   ============================================================ */

body.single-memberpressproduct{
  /* Jetons de charte, scopés à la page produit (pas de dépendance à .ufmls-page). */
  --uv:#545BE3; --um:#ED009A; --ua:#1A1A1A; --ubg:#F4F5FE;
  --ubd:#E1E2EE; --umut:#55556A; --ufaint:#7A7A8C;
  --ufont:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--ubg);
}

/* ---- Colonne de contenu ---- */
body.single-memberpressproduct .article-content{
  max-width:820px; margin:0 auto; padding:32px 20px 56px;
  font-family:var(--ufont); color:var(--ua);
}
body.single-memberpressproduct .page-title{
  font-family:var(--ufont); font-weight:700; font-size:34px; line-height:1.15;
  letter-spacing:-0.6px; color:var(--ua); margin:0 0 8px;
}
body.single-memberpressproduct .article-content > p{
  font-size:15.5px; line-height:1.65; color:var(--umut);
}
body.single-memberpressproduct .article-content a{ color:var(--uv); }

/* ---- Template refonte (single-memberpressproduct.php) : colonne unique, plus de
   sidebar Kleo → neutralise un éventuel float/width hérité du thème + lien retour. ---- */
body.single-memberpressproduct .article-content{ float:none !important; width:auto !important; }
body.single-memberpressproduct .ufmls-product__back{ display:inline-block; margin-bottom:16px;
  color:var(--uv); font-weight:600; font-size:14px; text-decoration:none; }
body.single-memberpressproduct .ufmls-product__back:hover{ text-decoration:underline; }

/* ---- Conteneur du formulaire : carte ---- */
body.single-memberpressproduct .mp_wrapper{
  background:#fff; border:1px solid #E4E5F2; border-radius:18px;
  padding:30px 30px 34px; margin-top:24px;
  box-shadow:0 14px 40px rgba(84,91,227,0.10);
}

/* ---- Prix ---- */
body.single-memberpressproduct .mepr_price,
body.single-memberpressproduct .mp-form-row.mepr_price{
  font-family:var(--ufont); color:var(--ua); font-weight:700; font-size:18px;
  border-bottom:1px solid #EEF0F7; padding-bottom:14px; margin-bottom:6px;
}
body.single-memberpressproduct .mepr_price_cell_label{ color:var(--ufaint); font-weight:500; }

/* ---- Lignes de formulaire ---- */
body.single-memberpressproduct .mp-form-row{ margin-bottom:18px; }
/* On ne cible QUE les libellés de champ (dans .mp-form-label), pas les labels
   de consentement/paiement qui portent aussi la classe .mepr-form-input. */
body.single-memberpressproduct .mp-form-label label{
  display:block; font-family:var(--ufont); font-weight:600; font-size:13.5px;
  color:var(--ua); margin-bottom:7px;
}

/* ---- Champs de saisie ---- */
/* Champs de saisie — qualifiés par ÉLÉMENT (input/select/textarea) pour ne jamais
   styler comme une « boîte » un <label> qui porterait la classe .mepr-form-input. */
body.single-memberpressproduct input.mepr-form-input,
body.single-memberpressproduct input[type="text"],
body.single-memberpressproduct input[type="email"],
body.single-memberpressproduct input[type="password"],
body.single-memberpressproduct input[type="tel"],
body.single-memberpressproduct input[type="number"],
body.single-memberpressproduct input[type="date"],
body.single-memberpressproduct select.mepr-form-input,
body.single-memberpressproduct textarea.mepr-form-input{
  width:100%; box-sizing:border-box; font-family:var(--ufont); font-size:15px;
  color:var(--ua); background:#fff; border:1px solid var(--ubd);
  border-radius:10px; padding:12px 14px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.single-memberpressproduct input.mepr-form-input:focus,
body.single-memberpressproduct input:focus,
body.single-memberpressproduct select.mepr-form-input:focus,
body.single-memberpressproduct textarea.mepr-form-input:focus{
  border-color:var(--uv); box-shadow:0 0 0 3px rgba(84,91,227,0.14);
}
/* code_postal / date_de_naissance sont configurés en <textarea> dans MemberPress
   mais servent de champ simple → hauteur d'un champ standard (extensible au besoin). */
body.single-memberpressproduct textarea.mepr-form-input{
  min-height:46px; height:46px; line-height:1.4; resize:vertical;
}
/* Cases à cocher : ne pas étirer */
body.single-memberpressproduct input[type="checkbox"],
body.single-memberpressproduct input[type="radio"]{ width:auto; }

/* Consentement / cases à cocher : ligne case + texte, SANS boîte
   (le label porte la classe .mepr-form-input mais ne doit pas être stylé en champ). */
body.single-memberpressproduct .mepr-checkbox-field{
  display:flex; align-items:flex-start; gap:10px;
  width:auto; border:none; padding:0; background:none; border-radius:0;
  font-family:var(--ufont); font-weight:400; font-size:14px; line-height:1.5; color:var(--umut);
}
body.single-memberpressproduct .mepr-checkbox-field input[type="checkbox"]{ margin-top:3px; flex:0 0 auto; }
body.single-memberpressproduct .mepr-checkbox-field a{ color:var(--uv); font-weight:600; }

/* Listes déroulantes : chevron pour signaler visuellement un <select>. */
body.single-memberpressproduct select.mepr-form-input,
body.single-memberpressproduct select.mepr-select-field{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23545BE3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:13px;
}

/* ---- Sélecteur de moyen de paiement ---- */
body.single-memberpressproduct .mepr-payment-methods-wrapper{
  display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 4px;
}
body.single-memberpressproduct .mepr-payment-method{
  border:1px solid var(--ubd); border-radius:12px; padding:12px 16px;
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
body.single-memberpressproduct .mepr-payment-method:hover{ border-color:var(--uv); }
body.single-memberpressproduct .mepr-payment-method-label{
  font-family:var(--ufont); font-weight:600; font-size:14px; color:var(--ua);
  display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;
}

/* ---- Bouton « Adhérer » : CTA charte magenta ---- */
body.single-memberpressproduct .mepr-submit,
body.single-memberpressproduct input[type="submit"].mepr-submit,
body.single-memberpressproduct .mepr-submit:link,
body.single-memberpressproduct .mepr-submit:visited,
body.single-memberpressproduct .mepr-submit:hover,
body.single-memberpressproduct .mepr-submit:focus,
body.single-memberpressproduct .mepr-submit:active{
  display:inline-block; width:auto; cursor:pointer;
  font-family:var(--ufont); font-weight:700; font-size:16px;
  background:var(--um) !important; color:#fff !important;
  -webkit-text-fill-color:#fff !important; border:none;
  padding:15px 40px; border-radius:11px;
  box-shadow:0 10px 26px rgba(237,0,154,0.32);
  transition:filter .15s ease, transform .05s ease;
}
body.single-memberpressproduct .mepr-submit:hover{ filter:brightness(1.05); }
body.single-memberpressproduct .mepr-submit:active{ transform:translateY(1px); }

/* Espace autour de la ligne de soumission */
body.single-memberpressproduct .mepr_submit,
body.single-memberpressproduct .mp-form-row.mepr-submit-row{ margin-top:8px; }

/* ---- Messages / erreurs (garde la sémantique, ton charte) ---- */
body.single-memberpressproduct .mepr-form-has-errors,
body.single-memberpressproduct .mepr_error{
  font-family:var(--ufont);
}

/* ---- Responsive ---- */
@media (max-width:768px){
  body.single-memberpressproduct .article-content{ padding:24px 16px 44px; }
  body.single-memberpressproduct .page-title{ font-size:27px; }
  body.single-memberpressproduct .mp_wrapper{ padding:22px 18px 26px; }
  body.single-memberpressproduct .mepr-submit{ width:100%; text-align:center; }
}