/*
 * Pages Paid Memberships Pro (paid-memberships-pro/pages/*.php, surchargées
 * dans le thème) : niveaux d'adhésion, paiement, compte, facturation,
 * factures, annulation, confirmation, connexion, édition de profil.
 *
 * Cible uniquement les classes générées par pmpro_get_element_class()
 * dans le PHP (jamais renommées : certaines sont réutilisées par le JS du
 * plugin — code de réduction, bascule CVV/mot de passe, désactivation du
 * bouton à la soumission — donc laissées intactes dans les templates).
 * Mêmes tokens que my-account.css / auth-forms.css (style.css) : vert
 * (--color-primary) pour les actions secondaires/liens, orange
 * (--color-accent) pour le CTA principal (paiement), cartes blanches à
 * ombre légère comme le reste du site.
 *
 * Le CSS par défaut du plugin (pmpro.css / frontend.css) est imprimé avant
 * le nôtre (chargé plus tard, priorité 21 comme auth-forms.css/my-account.css)
 * mais avec des sélecteurs de même spécificité (classes simples) : pas
 * besoin de !important ici, sauf sur les boutons où le plugin fixe parfois
 * des couleurs via des variables CSS (--pmpro--color--*) réglées dans ses
 * propres Réglages > Style.
 */

/* ============================================================
   0. Conteneur général — .pmpro ne peut pas compter sur le gabarit de
   page du thème parent (page.php, absent de ce thème enfant) pour sa
   gouttière : sans largeur/marge propres, ces pages rendent bord à bord
   (cartes collées aux bords de l'écran). Même pattern que .anm-container
   (style.css) / le wrapper de auth-forms.css : le conteneur porte sa
   propre largeur, indépendant du template de page.
   ============================================================ */
.pmpro {
  box-sizing: border-box;
  max-width: var(--content-max);
  margin: var(--space-4) auto;
  padding: 0 var(--space-3);
  font-family: var(--font-base);
  color: var(--color-ink);
}

.pmpro_spacer {
  display: block;
  height: var(--space-3);
}

.pmpro_divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-3) 0;
}

/* ============================================================
   1. Messages (erreur / succès / info) — même famille que
   .user-registration-error/.user-registration-message (auth-forms.css).
   ============================================================ */
.pmpro_message {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-100);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}

.pmpro_message.pmpro_success,
.pmpro_message.pmpro_alert.pmpro_success {
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.pmpro_message.pmpro_error {
  background: var(--color-error-light);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.pmpro_message.pmpro_alert {
  background: var(--color-warning-light);
  border-left-color: var(--color-warning);
  color: var(--color-warning-text);
}

/* ============================================================
   2. Cartes — .pmpro_card (bloc principal de chaque section) et
   .pmpro_section (regroupement de plusieurs cartes, ex: "Mes adhésions").
   ============================================================ */
.pmpro_section {
  margin-bottom: var(--space-4);
}

.pmpro_section_title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.pmpro_section_content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pmpro_card {
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
}

.pmpro_card_title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.pmpro_card_title.pmpro_font-x-large {
  font-size: var(--text-xl);
}

.pmpro_card_title.pmpro_heading-with-avatar {
  gap: var(--space-2);
}

.pmpro_card_title img.avatar {
  border-radius: 50%;
}

.pmpro_card_content {
  padding: var(--space-3);
}

.pmpro_card_title + .pmpro_card_content {
  padding-top: var(--space-2);
}

.pmpro_card_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--text-sm);
}

.pmpro_card_action_separator {
  color: var(--color-gray-300);
}

.pmpro_card_actions a,
.pmpro_actions_nav a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.pmpro_card_actions a:hover,
.pmpro_actions_nav a:hover {
  text-decoration: underline;
}

.pmpro_font-large {
  font-size: var(--text-lg);
}

.pmpro_font-x-large {
  font-size: var(--text-xl);
}

.pmpro_font-small {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ============================================================
   3. Listes d'infos (récap commande, facturation, abonnement) —
   .pmpro_list-with-labels : libellé à gauche, valeur à droite ; passe en
   grille 2 colonnes sur les listes .pmpro_cols-2 (ex: date/moyen de
   paiement de invoice.php).
   ============================================================ */
.pmpro_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pmpro_list-plain .pmpro_list_item {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

.pmpro_list-with-labels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pmpro_list-with-labels.pmpro_cols-2,
.pmpro_list-with-labels.pmpro_cols-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-3);
}

.pmpro_list-with-labels.pmpro_cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.pmpro_list-with-labels .pmpro_list_item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.pmpro_list_item_label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-gray-500);
}

.pmpro_list_item_value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

/* ============================================================
   4. Badges de statut (payé/remboursé/en attente/code de réduction) —
   même famille que #ur-membership-status (my-account.css §12).
   ============================================================ */
.pmpro_tag {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pmpro_tag-success {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.pmpro_tag-error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.pmpro_tag-alert {
  background: var(--color-warning-light);
  color: var(--color-warning-text);
}

.pmpro_tag-discount-code {
  background: var(--color-gray-100);
  color: var(--color-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ============================================================
   5. Tableaux — thead masqué et lignes transformées en mini-cartes sous
   700px, en s'appuyant sur les attributs data-title déjà présents dans le
   PHP d'origine (posés par le plugin lui-même pour cet usage précis, pas
   ajoutés ici).
   ============================================================ */
.pmpro_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pmpro_table th,
.pmpro_table td {
  text-align: left;
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: top;
}

.pmpro_table thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-gray-500);
  border-bottom: 2px solid var(--color-gray-200);
}

.pmpro_table tbody tr:last-child th,
.pmpro_table tbody tr:last-child td {
  border-bottom: none;
}

.pmpro_table tfoot td {
  font-weight: 700;
  border-bottom: none;
  border-top: 1px solid var(--color-gray-200);
}

.pmpro_table a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.pmpro_table a:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .pmpro_table thead {
    display: none;
  }

  .pmpro_table,
  .pmpro_table tbody,
  .pmpro_table tr,
  .pmpro_table th,
  .pmpro_table td {
    display: block;
    width: 100%;
  }

  .pmpro_table tr {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
  }

  .pmpro_table tbody tr:last-child {
    margin-bottom: 0;
  }

  .pmpro_table th,
  .pmpro_table td {
    border-bottom: none;
    padding: .3rem var(--space-1);
  }

  .pmpro_table th[data-title]::before,
  .pmpro_table td[data-title]::before {
    content: attr(data-title) ": ";
    display: inline-block;
    margin-right: .3rem;
    font-weight: 700;
    color: var(--color-gray-500);
  }

  .pmpro_table tfoot tr {
    border-color: var(--color-gray-300);
  }
}

/* ============================================================
   6. Niveaux d'adhésion (levels.php) — un .pmpro_card par groupe de
   niveaux, tableau à l'intérieur (transformé en mini-cartes sous 700px
   par la section 5 ci-dessus). Ligne du niveau actif de l'utilisateur
   mise en avant (filet vert), plutôt qu'une couleur seule.
   ============================================================ */
.pmpro_level_group {
  margin-bottom: var(--space-3);
}

.pmpro_levels_table .pmpro_level-current {
  background: var(--color-primary-light);
}

.pmpro_levels_table .pmpro_level-current th {
  border-left: 4px solid var(--color-primary);
}

.pmpro_level-price {
  margin: 0;
  font-weight: 700;
  color: var(--color-ink);
}

.pmpro_level-expiration {
  margin: .2rem 0 0;
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

@media (max-width: 700px) {
  .pmpro_levels_table .pmpro_level-current {
    border-left: 4px solid var(--color-primary);
  }

  .pmpro_levels_table .pmpro_level-current th {
    border-left: none;
  }
}

/* ============================================================
   7. Boutons — mêmes tokens que .anm-btn (style.css) : vert
   (--color-primary) pour le CTA de paiement (checkout), le choix de
   niveau (levels.php) et l'action principale du message "Adhésion
   requise" (inc/pmpro.php), outline vert pour les actions secondaires.
   !important sur les couleurs : le plugin règle .pmpro_btn via des
   variables CSS (--pmpro--color--*) dans ses propres Réglages > Style,
   imprimées après le nôtre — sans !important ces couleurs gagnent la
   cascade.
   ============================================================ */
.pmpro_btn,
input[type="submit"].pmpro_btn,
input[type="button"].pmpro_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  border: 2px solid transparent !important;
  font-weight: 600;
  font-size: var(--text-base);
  font-family: var(--font-base);
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.pmpro_btn-submit,
.pmpro_btn-submit-checkout {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.pmpro_btn-submit:hover,
.pmpro_btn-submit-checkout:hover {
  background: var(--color-primary-dark) !important;
}

.pmpro_btn-select,
.pmpro_btn-renew {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.pmpro_btn-select:hover,
.pmpro_btn-renew:hover {
  background: var(--color-primary-dark) !important;
}

.pmpro_btn-outline,
.pmpro_btn-cancel {
  background: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-dark) !important;
}

.pmpro_btn-outline:hover,
.pmpro_btn-cancel:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.pmpro_btn-plain {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: auto;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--color-primary-dark) !important;
  font-weight: 600;
  text-decoration: none;
}

.pmpro_btn-plain:hover {
  text-decoration: underline;
}

.pmpro_btn-plain svg {
  width: 16px;
  height: 16px;
}

.pmpro_btn:focus-visible,
input.pmpro_btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Bouton afficher/masquer le mot de passe (checkout.php) : icône
   feather en currentColor (le plugin fixe stroke="var(--pmpro--color--accent)"
   en inline, jamais définie dans ce thème — remplacée par currentColor
   directement dans le template pour hériter de la couleur du bouton). */
.pmpro_btn-password-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  font-weight: 600;
}

.pmpro_btn-password-toggle svg {
  width: 18px;
  height: 18px;
}

.pmpro_form_field-password-toggle {
  margin-top: var(--space-1);
}

/* ============================================================
   8. Formulaires — mêmes tokens que .ur-frontend-form (my-account.css §5,
   auth-forms.css §2) : champs 44px, bordure grise, focus bleu.
   ============================================================ */
.pmpro_form_fieldset {
  border: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.pmpro_form_legend {
  width: 100%;
  padding: 0;
  margin: 0;
}

.pmpro_form_heading {
  margin: 0;
  padding: var(--space-3) var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.pmpro_form_fieldset .pmpro_card_content {
  padding-top: var(--space-2);
}

.pmpro_form_fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* !important : le plugin a sa propre règle .pmpro_cols-2 (variation de style
   PMPro) qui pose display:flex + une largeur en calc(50% - var(--pmpro--...)),
   variable jamais définie ici → calc invalide → les champs retombent à leur
   largeur de contenu au lieu de remplir la colonne. On reprend la main sans
   ambiguïté de spécificité/ordre de chargement, plutôt que de dépendre d'une
   variable CSS qui appartient au plugin. */
.pmpro_form_fields.pmpro_cols-2,
.pmpro_cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 var(--space-3) !important;
}

.pmpro_form_fields.pmpro_cols-2 > *,
.pmpro_cols-2 > * {
  width: auto !important;
  min-width: 0 !important;
}

/* Astérisque des champs obligatoires (markup pmpro_asterisk/abbr posé par le
   plugin) — même rouge que .anm-required (snippet préinscription), posé ici
   en dur plutôt que de dépendre du style par défaut du plugin. */
.pmpro_asterisk,
.pmpro_asterisk abbr {
  color: var(--color-error);
  text-decoration: none;
}

.pmpro_form_field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.pmpro_form_label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

/* .pmpro (ancêtre) + .pmpro_form_input : le plugin imbrique ses propres
   règles par défaut sous .pmpro en CSS natif (variation_1.css : ".pmpro {
   .pmpro_form_input { border: ... } }"), donc spécificité 2 classes. Notre
   .pmpro_form_input seul (1 classe) perdait contre ça pour tout ce qui ne
   matchait pas AUSSI .pmpro_form_fields input[type=...]/select ci-dessous —
   en clair : textarea et number, qui gardaient le contour gris par défaut
   du plugin. Même préfixe .pmpro pour être sûr de gagner. */
.pmpro .pmpro_form_input,
.pmpro_form_fields input[type="text"],
.pmpro_form_fields input[type="email"],
.pmpro_form_fields input[type="password"],
.pmpro_form_fields input[type="tel"],
.pmpro_form_fields select {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-base);
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease;
}

/* Textarea : padding vertical aussi (le texte touchait le bord haut avec
   le padding horizontal-only ci-dessus), pas de min-height fixe (déjà
   plus haute via son rows=""). .pmpro_form_input-textarea est le
   modifier que PMPro pose sur l'élément lui-même (indépendant du
   wrapper, contrairement à .pmpro_form_fields ci-dessus qui n'entoure
   pas les champs "User Fields" admin). */
.pmpro .pmpro_form_input-textarea {
  min-height: 0;
  padding: var(--space-2);
}

/* Select : le natif du navigateur a son propre chrome (flèche, line-height)
   qui ne matche pas les inputs texte même à bordure/hauteur identiques.
   appearance:none + flèche maison pour un rendu cohérent. */
.pmpro .pmpro_form_input-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: calc(var(--space-2) * 2 + 12px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}

/* Champ number (ex: "Pourcentage de temps de travail") : les flèches
   de spinner natives du navigateur ont un rendu différent de tous les
   autres champs (chrome OS, pas la charte du site). Masquées comme le
   fait la plupart des design systems ; le clavier +/- et la saisie
   directe restent utilisables, seul le picto disparaît. */
.pmpro_form_input-number::-webkit-outer-spin-button,
.pmpro_form_input-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pmpro_form_input-number {
  -moz-appearance: textfield;
  appearance: textfield;
}

.pmpro_form_input:focus,
.pmpro_form_fields input:focus,
.pmpro_form_fields select:focus {
  border-color: var(--color-primary) !important;
  outline: none;
}

/* Même anneau de focus que le snippet préinscription (anm-preinscription-formation.php) :
   vert (--color-primary), pas le bleu --color-focus utilisé ailleurs sur le site. */
.pmpro_form_input:focus-visible,
.pmpro_form_fields input:focus-visible,
.pmpro_form_fields select:focus-visible {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 2px;
}

.pmpro_form_fields-inline {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pmpro_form_fields-inline .pmpro_form_input {
  width: auto;
  flex: 1 1 auto;
}

/* Champs "User Fields" de type Radio (Memberships > Settings > User
   Fields) : PMPro ne stylait que du radio natif du navigateur (~13px,
   mal aligné avec le reste des champs 44px). Même gabarit que la case
   "mêmes coordonnées" du bloc adhérent (anm-checkout-adherent.php,
   18px, curseur pointer sur le label). */
.pmpro_form_field-radio-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Le markup pose aussi .pmpro_form_field (générique, column) sur ce même
   élément : même spécificité qu'ici, flex-direction non redéfini par cette
   règle sinon → column héritée du générique, input et label empilés au lieu
   d'être côte à côte. */
.pmpro_form_field-radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 0 !important;
}

/* Ce radio porte aussi .pmpro_form_input (règle générique plus haut :
   bordure, fond, padding, min-height 44px pour les champs texte) — même
   spécificité de sélecteur ([type="radio"] = 1 classe niveau attribut, donc
   .pmpro_form_field-radio-item input[type="radio"] gagne bien sur
   .pmpro .pmpro_form_input pour width/height, mais border/background/padding/
   min-height ne sont pas redéfinis par ce rung : la boîte de champ texte
   traîne dessus, plus grande que le rond 18px lui-même. Reset ici. */
.pmpro_form_field-radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.pmpro_form_field-radio-item input[type="radio"]:focus-visible {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 2px;
}

.pmpro_form_field-radio-item .pmpro_form_label-inline {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
}

.pmpro_form_submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

/* Fieldset de facturation/paiement dans une .pmpro_card : le titre
   (.pmpro_form_heading) et les champs (.pmpro_card_content) partagent la
   même carte, la marge basse du fieldset ne doit pas s'ajouter à celle de
   la carte elle-même. */
.pmpro_form_fieldset .pmpro_card {
  margin-bottom: var(--space-3);
}

/* Champ honeypot (anti-spam) du formulaire de paiement — le plugin le
   masque déjà (position absolue hors écran), on s'assure juste qu'aucune
   règle ci-dessus ne le rende visible par erreur. */
.pmpro_hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   9. Récap du niveau choisi (checkout.php) et code de réduction.
   ============================================================ */
.pmpro_level_name_text {
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
}

.pmpro_level_description_text {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.pmpro_level_cost_text p,
.pmpro_level_expiration_text p {
  margin: 0 0 .3rem;
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

.pmpro_level_discount_applied {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

#other_discount_code_p {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

#other_discount_code_toggle,
#other_discount_code_button,
#discount_code_button {
  background: transparent;
  border: none;
  color: var(--color-primary-dark);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

#other_discount_code_button,
#discount_code_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-2) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  flex-shrink: 0;
}

#other_discount_code_button:hover,
#discount_code_button:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

#discount_code_message {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

/* ============================================================
   10. Étapes d'avancement / navigation entre pages (précédent, retour au
   compte) — pmpro_actions_nav.
   ============================================================ */
.pmpro_actions_nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.pmpro_actions_nav-right {
  margin-left: auto;
}

/* ============================================================
   11. Responsive — sous 700px, colonnes à 2/3 empilées et champs en
   pleine largeur, cohérent avec my-account.css §5 / auth-forms.css §3.
   ============================================================ */
@media (max-width: 700px) {
  .pmpro_list-with-labels.pmpro_cols-2,
  .pmpro_list-with-labels.pmpro_cols-3,
  .pmpro_form_fields.pmpro_cols-2,
  .pmpro_cols-2 {
    grid-template-columns: 1fr !important;
  }

  .pmpro_card_actions,
  .pmpro_actions_nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .pmpro_actions_nav-right {
    margin-left: 0;
  }

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

  .pmpro_form_submit .pmpro_btn,
  .pmpro_form_submit input.pmpro_btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .pmpro {
    margin: var(--space-3) auto;
    padding: 0 var(--space-2);
  }

  .pmpro_card_content,
  .pmpro_card_title,
  .pmpro_form_heading {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .pmpro_form_submit {
    padding: var(--space-2);
  }

  .pmpro_form_fields-inline {
    flex-wrap: wrap;
  }
}