/**
 * Pilates & Moi — habillage des pages Paid Memberships Pro (charte MOI)
 * ---------------------------------------------------------------------
 * Chargé par le plugin « MOI — Habillage Paid Memberships Pro »
 * (wp-content/plugins/moi-pmpro-style/moi-pmpro-style.php), APRÈS les CSS du
 * plugin PMPro (base.css + variation_1.css) et après le CSS d'Elementor.
 *
 * Principe : PMPro 3.x est entièrement piloté par des variables CSS
 * (--pmpro--*). On les redéfinit ici avec les couleurs / rayons / espacements
 * de la charte MOI, puis on ajuste au cas par cas ce que les variables ne
 * couvrent pas (typographie, boutons pilule, focus, tableaux).
 *
 * Les couleurs MOI (--moiTerracotta, --moiRose…) viennent des variables
 * globales Elementor v4 : si Marie change une variable dans Elementor, ces
 * pages suivent. Les valeurs après la virgule sont des secours.
 *
 * ⚠️ Ce fichier prend le pas sur l'écran Adhésions → Réglages → Design de
 * PMPro (qui injecte ses couleurs en <style> dans le <head>). Pour changer
 * les couleurs de ces pages, éditer ce fichier ou les variables Elementor.
 */

/* -------------------------------------------------------------------------
 * 1. Jetons de design PMPro → charte MOI
 *    `html:root` (et non `:root`) pour passer devant le <style> inline que
 *    PMPro imprime dans le <head>.
 * ---------------------------------------------------------------------- */
html:root {
	/* Couleurs */
	--pmpro--color--base: #ffffff;
	--pmpro--color--base-2: var(--moiBlushLight, #fff9f5);
	--pmpro--color--contrast: var(--moiInk, #333333);
	--pmpro--color--accent: var(--moiTerracotta, #ce6857);
	--pmpro--color--accent--variation: var(--moiTerracottaDark, #a95547);
	--pmpro--color--border: var(--moiBlush, #e8cfc1);
	--pmpro--color--border--variation: #f0e3d9;

	/* Rayons, espacements, ombre */
	--pmpro--base--border-radius: 16px;
	--pmpro--base--spacing--small: 12px;
	--pmpro--base--spacing--medium: 18px;
	--pmpro--base--spacing--large: 30px;
	--pmpro--btn--border-radius: 40px;
	--pmpro--btn--top-bottom-padding: 13px;
	--pmpro--btn--left-right-padding: 26px;
	--pmpro--box-shadow: 0 0 9px -2px rgba(90, 90, 90, 0.22);

	/* Jetons propres à cette feuille */
	--moi-pmpro-heading: var(--moiHeading, "DM Sans"), "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--moi-pmpro-body: var(--moiBody, "DM Sans"), "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--moi-pmpro-ink-soft: var(--moiInkSoft, #6b5f58);
	--moi-pmpro-rose: var(--moiRose, #eb7f91);
	--moi-pmpro-rose-dark: var(--moiRoseDark, #c16877);
	--moi-pmpro-cream: var(--moiCream, #fff8ee);
	--moi-pmpro-blush-light: var(--moiBlushLight, #fff9f5);
	--moi-pmpro-input-radius: 12px;
}

/* -------------------------------------------------------------------------
 * 2. Le conteneur MOI (classe globale Elementor `moiPmpro`)
 * ---------------------------------------------------------------------- */
.moiPmpro,
.moiPmproHead {
	margin-inline: auto;
}

/* Formulaires courts : on resserre la colonne pour rester lisible. */
body.pmpro-login .moiPmpro,
body.pmpro-login .moiPmproHead,
body.pmpro-member-profile-edit .moiPmpro,
body.pmpro-member-profile-edit .moiPmproHead {
	max-width: 640px;
}

/* -------------------------------------------------------------------------
 * 3. Typographie
 * ---------------------------------------------------------------------- */
.pmpro {
	font-family: var(--moi-pmpro-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--moiInk, #333333);
}

.pmpro h1,
.pmpro h2,
.pmpro h3,
.pmpro h4,
.pmpro .pmpro_section_title,
.pmpro .pmpro_card_title,
.pmpro .pmpro_form_legend,
.pmpro .pmpro_form_heading {
	font-family: var(--moi-pmpro-heading);
	font-weight: 700;
	color: var(--moiInk, #333333);
	letter-spacing: -0.01em;
}

.pmpro .pmpro_section_title,
.pmpro h2 {
	font-size: 24px;
	line-height: 1.25;
}

.pmpro .pmpro_card_title {
	font-size: 21px;
	line-height: 1.25;
}

.pmpro .pmpro_form_heading,
.pmpro h3 {
	font-size: 18px;
	line-height: 1.3;
}

.pmpro .pmpro_form_legend {
	font-size: 17px;
}

/* Titre de section PMPro (« Mon compte », « Mes adhésions »…) : terracotta,
   pour le distinguer des titres de cartes qui restent en encre. */
.pmpro .pmpro_section_title {
	color: var(--moiTerracotta, #ce6857);
}

/* Montants et chiffres mis en avant (tarifs, total d'une commande). */
.pmpro .pmpro_font-x-large:not(.pmpro_section_title),
.pmpro .pmpro_level_cost strong {
	font-family: var(--moi-pmpro-heading);
	font-weight: 700;
	color: var(--moiTerracotta, #ce6857);
}

.pmpro .pmpro_font-small,
.pmpro .pmpro_form_hint {
	color: var(--moi-pmpro-ink-soft);
}

/* -------------------------------------------------------------------------
 * 4. Cartes et sections
 * ---------------------------------------------------------------------- */
.pmpro .pmpro_card {
	background-color: #ffffff;
	border: 1px solid var(--moiBlush, #e8cfc1);
	border-radius: 16px;
	box-shadow: 0 0 9px -2px rgba(90, 90, 90, 0.22);
}

.pmpro .pmpro_card_actions {
	background-color: var(--moi-pmpro-blush-light);
	border-color: var(--moiBlush, #e8cfc1);
}

.pmpro .pmpro_card_action_separator {
	color: var(--moiBlush, #e8cfc1);
	opacity: 1;
}

.pmpro .pmpro_divider {
	background-color: var(--moiBlush, #e8cfc1);
}

/* -------------------------------------------------------------------------
 * 5. Boutons (pilule rose de la charte)
 * ---------------------------------------------------------------------- */
.pmpro .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-print),
.pmpro .pmpro_section #loginform .login-submit .button,
.pmpro input[type="submit"].pmpro_btn {
	font-family: var(--moi-pmpro-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	background-color: var(--moi-pmpro-rose);
	border: 2px solid var(--moi-pmpro-rose);
	border-radius: 40px;
	color: var(--moi-pmpro-cream);
	box-shadow: none;
	padding: 13px 26px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pmpro .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-print):hover,
.pmpro .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-print):focus,
.pmpro .pmpro_section #loginform .login-submit .button:hover,
.pmpro .pmpro_section #loginform .login-submit .button:focus {
	background-color: var(--moi-pmpro-rose-dark);
	border-color: var(--moi-pmpro-rose-dark);
	color: var(--moi-pmpro-cream);
}

/* Bouton secondaire : contour terracotta. */
.pmpro .pmpro_btn-outline,
.pmpro .pmpro_btn-cancel,
.pmpro .pmpro_btn.pmpro_btn-cancel {
	background-color: transparent;
	border-color: var(--moiTerracotta, #ce6857);
	color: var(--moiTerracotta, #ce6857);
	box-shadow: none;
}

.pmpro .pmpro_btn-outline:hover,
.pmpro .pmpro_btn-outline:focus,
.pmpro .pmpro_btn-cancel:hover,
.pmpro .pmpro_btn-cancel:focus {
	background-color: var(--moiTerracotta, #ce6857);
	border-color: var(--moiTerracotta, #ce6857);
	color: var(--moi-pmpro-cream);
}

/* Action destructrice : on garde le rouge sémantique, en pilule. */
.pmpro .pmpro_btn-delete {
	border-radius: 40px;
}

.pmpro .pmpro_btn-plain,
.pmpro .pmpro_btn-print {
	font-family: var(--moi-pmpro-heading);
	font-weight: 600;
	color: var(--moiTerracotta, #ce6857);
}

/* -------------------------------------------------------------------------
 * 6. Liens
 * ---------------------------------------------------------------------- */
.pmpro a:not(.pmpro_btn),
.pmpro .pmpro_link {
	color: var(--moiTerracotta, #ce6857);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.pmpro a:not(.pmpro_btn):hover,
.pmpro a:not(.pmpro_btn):focus,
.pmpro .pmpro_link:hover,
.pmpro .pmpro_link:focus {
	color: var(--moiTerracottaDark, #a95547);
}

/* -------------------------------------------------------------------------
 * 7. Formulaires
 * ---------------------------------------------------------------------- */
.pmpro .pmpro_form_label,
.pmpro .pmpro_section #loginform label {
	font-family: var(--moi-pmpro-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--moiInk, #333333);
}

.pmpro .pmpro_form_input,
.pmpro .pmpro_section #loginform .input {
	font-family: var(--moi-pmpro-body);
	font-size: 16px;
	background-color: #ffffff;
	border: 1px solid var(--moiBlush, #e8cfc1);
	border-radius: var(--moi-pmpro-input-radius);
	color: var(--moiInk, #333333);
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pmpro .pmpro_form_input::placeholder,
.pmpro .pmpro_section #loginform .input::placeholder {
	color: #b6a99f;
}

/* Focus : on remplace le bleu Bootstrap de PMPro par un halo terracotta. */
.pmpro .pmpro_form_input:focus,
.pmpro .pmpro_form_input-text:focus,
.pmpro .pmpro_form_input-email:focus,
.pmpro .pmpro_form_input-url:focus,
.pmpro .pmpro_form_input-password:focus,
.pmpro .pmpro_form_input-search:focus,
.pmpro .pmpro_form_input-select:focus,
.pmpro .pmpro_form_input-checkbox:focus,
.pmpro .pmpro_form_input-radio:focus,
.pmpro .pmpro_form_input-multiselect:focus,
.pmpro .pmpro_form_input-number:focus,
.pmpro .pmpro_form_input-file:focus,
.pmpro .pmpro_form_input-date:focus,
.pmpro .pmpro_form_input-textarea:focus,
.pmpro .pmpro_section #loginform .input:focus {
	background-color: #ffffff;
	border-color: var(--moiTerracotta, #ce6857);
	box-shadow: 0 0 0 3px rgba(206, 104, 87, 0.16);
	outline: none;
}

.pmpro .pmpro_form_field-password-toggle button,
.pmpro .pmpro_form_field-password-toggle button:hover,
.pmpro .pmpro_form_field-password-toggle button:focus {
	font-family: var(--moi-pmpro-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--moiTerracotta, #ce6857);
}

.pmpro .pmpro_form_field-file .pmpro_form_input-file {
	border-color: var(--moiBlush, #e8cfc1);
}

.pmpro .pmpro_form_hint {
	font-size: 14px;
	opacity: 1;
}

.pmpro .pmpro_form_submit {
	gap: 14px;
}

/* Cases à cocher / radios aux couleurs de la charte. */
.pmpro input[type="checkbox"],
.pmpro input[type="radio"] {
	accent-color: var(--moiTerracotta, #ce6857);
}

/* -------------------------------------------------------------------------
 * 8. Messages contextuels
 * ---------------------------------------------------------------------- */
.pmpro_message {
	font-family: var(--moi-pmpro-body);
	border-radius: 14px;
	box-shadow: none;
	padding: 14px 18px;
}

/* Message neutre (info) : blush plutôt que le bleu par défaut. */
.pmpro_message:not(.pmpro_success):not(.pmpro_error):not(.pmpro_alert) {
	background-color: var(--moi-pmpro-blush-light);
	border-color: var(--moiBlush, #e8cfc1);
	color: var(--moiInk, #333333);
}

.pmpro_message:not(.pmpro_success):not(.pmpro_error):not(.pmpro_alert) a {
	color: var(--moiTerracotta, #ce6857);
}

/* Succès / erreur / alerte gardent leurs couleurs sémantiques (lisibilité). */

/* -------------------------------------------------------------------------
 * 9. Tableaux (commandes, factures, niveaux, résiliation)
 * ---------------------------------------------------------------------- */
.pmpro .pmpro_table thead th {
	font-family: var(--moi-pmpro-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--moi-pmpro-ink-soft);
	border-bottom: 2px solid var(--moiBlush, #e8cfc1);
}

.pmpro .pmpro_table tbody th,
.pmpro .pmpro_table tbody td,
.pmpro .pmpro_table tfoot td {
	border-color: var(--moiBlush, #e8cfc1);
}

.pmpro .pmpro_tag {
	font-family: var(--moi-pmpro-heading);
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
}

.pmpro .pmpro_list_item_label {
	font-family: var(--moi-pmpro-heading);
}

/* -------------------------------------------------------------------------
 * 10. Pagination et avatar
 * ---------------------------------------------------------------------- */
.pmpro .pmpro_pagination a,
.pmpro .pmpro_pagination span {
	font-family: var(--moi-pmpro-heading);
	font-size: 15px;
	border-color: var(--moiBlush, #e8cfc1);
	border-radius: 999px;
	padding: 4px 14px;
}

.pmpro .pmpro_pagination a:hover {
	background-color: var(--moiTerracotta, #ce6857);
	border-color: var(--moiTerracotta, #ce6857);
	color: var(--moi-pmpro-cream);
}

.pmpro .pmpro_pagination .pmpro_pagination-current {
	background-color: var(--moiTerracotta, #ce6857);
	border-color: var(--moiTerracotta, #ce6857);
	color: var(--moi-pmpro-cream);
}

.pmpro .avatar {
	border-color: var(--moiBlush, #e8cfc1);
}

/* -------------------------------------------------------------------------
 * 11. Responsive
 * ---------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.pmpro .pmpro_section_title,
	.pmpro h2 {
		font-size: 21px;
	}

	.pmpro .pmpro_card_title {
		font-size: 19px;
	}

	.pmpro .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-print) {
		width: 100%;
		display: block;
	}

	.pmpro .pmpro_form_submit {
		flex-direction: column;
		align-items: stretch;
	}
}