/**
 * Peau PMPro — Illustration Québec.
 *
 * PMPro 3.x est piloté par des **variables CSS** (`--pmpro--*`). On recolore via
 * ces variables, puis on définit COMPLÈTEMENT les composants visibles (cartes,
 * boutons, liens d'action, tableaux, badges, formulaires) sans dépendre de
 * `variation_1.css` : si la variation saute (réglage PMPro, LiteSpeed), le rendu
 * reste identique. variation_1.css imbrique tout sous `.pmpro` — d'où le préfixe
 * `body .pmpro` pour gagner la cascade.
 *
 * Deux contextes :
 *  - Public / visiteur : colonne centrée sur fond crème (--iq-bg).
 *  - Portail membre (.iq-pmpro-content) : pleine largeur sur surface accent.
 *
 * Les variables --iq-* proviennent de iq-design.css.
 */

/* =========================================================================
 * 1) Recoloration par les variables de PMPro.
 * ========================================================================= */
/* Spécificité volontairement élevée (:root:root) pour gagner la cascade quelle
   que soit la position de base.css / variation_1.css (LiteSpeed peut réordonner). */
:root:root,
:root:root body {
    --pmpro--color--accent: var(--iq-accent, #c95616);
    --pmpro--color--accent--variation: #b94d12;
    --pmpro--color--contrast: var(--iq-ink, #11110f);
    --pmpro--color--border: var(--iq-line, #d8d6cd);
    --pmpro--color--border--variation: var(--iq-line, #d8d6cd);
    --pmpro--color--base: var(--iq-white, #fff);
    --pmpro--color--base-2: var(--iq-soft, #ecebe6);
    --pmpro--base--border-radius: 12px;
    --pmpro--box-shadow: none;
}

/* =========================================================================
 * 2) Typographie : titres PMPro à la police d'affichage du thème.
 * ========================================================================= */
body .pmpro .pmpro_section_title,
body .pmpro .pmpro_card_title,
body .pmpro .pmpro_form_heading {
    font-family: var(--iq-display, Georgia, serif);
    font-weight: var(--iq-display-weight, 400);
    letter-spacing: -.04em;
    line-height: .98;
    color: var(--iq-ink, #11110f);
}

body .pmpro .pmpro_section_title { font-size: clamp(26px, 3vw, 40px); }
body .pmpro .pmpro_card_title { font-size: clamp(22px, 2.4vw, 30px); }

/* Liens dans le contenu PMPro : encre + soulignement fin, accent au survol. */
body .pmpro .pmpro_card_content a:not(.pmpro_btn),
body .pmpro .pmpro_section_content a:not(.pmpro_btn) {
    color: var(--iq-ink, #11110f);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

body .pmpro .pmpro_card_content a:not(.pmpro_btn):hover,
body .pmpro .pmpro_section_content a:not(.pmpro_btn):hover {
    color: var(--iq-accent, #c95616);
}

/* =========================================================================
 * 3) Cartes : façon .iq-box (fond blanc, rayon 16, liséré intérieur doux).
 *    Définies de zéro pour ne pas dépendre de variation_1.css.
 * ========================================================================= */
body .pmpro .pmpro_card {
    background: var(--iq-white, #fff);
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    /* [Fix] Marge basse seulement : évite la marge parasite au-dessus de la
       première carte (le bento du haut décollé du titre). Espacement entre
       cartes inchangé. */
    margin: 0 0 18px;
    overflow: hidden;
}

body .pmpro .pmpro_card_title {
    margin: 0;
    padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) 0;
}

body .pmpro .pmpro_card_content {
    padding: 12px clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px);
}

/* Cartes imbriquées (ex. niveaux dans « Mes adhésions ») : transparentes. */
body .pmpro .pmpro_card .pmpro_card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: visible;
}

body .pmpro .pmpro_card .pmpro_card .pmpro_card_title,
body .pmpro .pmpro_card .pmpro_card .pmpro_card_content { padding: 0; }

/* =========================================================================
 * 4) Barres d'actions : plus de bande grise — filet fin + pilules.
 *    Couvre les <a> nus (#pmpro_actionlink-*) ET les .pmpro_btn.
 * ========================================================================= */
body .pmpro .pmpro_card_actions {
    background: none;
    border: 0;
    border-top: 1px solid var(--iq-line, #d8d6cd);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px clamp(18px, 2.2vw, 26px);
}

body .pmpro .pmpro_card_content + .pmpro_card_actions { border-top: 1px solid var(--iq-line, #d8d6cd); border-bottom: 0; }

/* Séparateurs « | » inutiles entre pilules. */
body .pmpro .pmpro_card_action_separator { display: none; }

body .pmpro .pmpro_card_actions a,
body .pmpro .pmpro_card .pmpro_card .pmpro_card_actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.02em;
    border: 1px solid var(--iq-line, #d8d6cd);
    background: var(--iq-white, #fff);
    color: var(--iq-ink, #11110f);
    text-decoration: none;
    transition: .16s var(--iq-ease, ease);
}

body .pmpro .pmpro_card_actions a:hover { border-color: var(--iq-ink, #11110f); color: var(--iq-ink, #11110f); }

/* Annuler / déconnexion : la même pilule, texte atténué qui fonce au survol. */
body .pmpro .pmpro_card_actions a#pmpro_actionlink-cancel,
body .pmpro .pmpro_card_actions a#pmpro_actionlink-logout { color: var(--iq-muted, #77756e); }

body .pmpro .pmpro_card_actions a#pmpro_actionlink-cancel:hover,
body .pmpro .pmpro_card_actions a#pmpro_actionlink-logout:hover { color: var(--iq-ink, #11110f); }

/* =========================================================================
 * 5) Boutons .pmpro_btn : pilules .iq-btn, définies de zéro.
 * ========================================================================= */
body .pmpro .pmpro_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    min-height: 0;
    padding: 11px 18px;
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
    border: 1px solid var(--iq-accent, #c95616);
    background: var(--iq-accent, #c95616);
    color: var(--iq-panel-ink, #130905);
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: .16s var(--iq-ease, ease);
}

body .pmpro .pmpro_btn:hover,
body .pmpro .pmpro_btn:focus {
    background: #b94d12;
    border-color: #b94d12;
    color: var(--iq-panel-ink, #130905);
}

body .pmpro .pmpro_btn-outline,
body .pmpro .pmpro_btn-cancel {
    background: var(--iq-white, #fff);
    border-color: var(--iq-line, #d8d6cd);
    color: var(--iq-ink, #11110f);
}

body .pmpro .pmpro_btn-outline:hover,
body .pmpro .pmpro_btn-outline:focus,
body .pmpro .pmpro_btn-cancel:hover,
body .pmpro .pmpro_btn-cancel:focus {
    background: var(--iq-white, #fff);
    border-color: var(--iq-ink, #11110f);
    color: var(--iq-ink, #11110f);
}

body .pmpro .pmpro_btn-delete {
    background: transparent;
    border-color: #b3402e;
    color: #b3402e;
}

body .pmpro .pmpro_btn-delete:hover,
body .pmpro .pmpro_btn-delete:focus {
    background: #b3402e;
    border-color: #b3402e;
    color: var(--iq-white, #fff);
}

/* Boutons « nus » (afficher le mot de passe, etc.) : rester des liens. */
body .pmpro .pmpro_btn-plain,
body .pmpro .pmpro_btn-plain:hover,
body .pmpro .pmpro_btn-plain:focus,
body .pmpro .pmpro_btn-plain:active {
    background: none;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--iq-ink, #11110f);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

/* =========================================================================
 * 6) Formulaires : alignés sur .iq-label / .iq-field.
 * ========================================================================= */
body .pmpro .pmpro_form_label,
body .pmpro .pmpro_form_field label {
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--iq-muted, #77756e);
}

body .pmpro .pmpro_form_field input[type="text"],
body .pmpro .pmpro_form_field input[type="email"],
body .pmpro .pmpro_form_field input[type="password"],
body .pmpro .pmpro_form_field input[type="tel"],
body .pmpro .pmpro_form_field input[type="number"],
body .pmpro .pmpro_form_field select,
body .pmpro .pmpro_form_field textarea {
    border: 0;
    border-radius: 12px;
    background: var(--iq-white, #fff);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    min-height: 46px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--iq-ink, #11110f);
}

body .pmpro .pmpro_form_field textarea { padding: 12px 14px; }

body .pmpro .pmpro_form_field input:focus,
body .pmpro .pmpro_form_field select:focus,
body .pmpro .pmpro_form_field textarea:focus {
    outline: 0;
    border-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--iq-accent, #c95616);
}

body .pmpro .pmpro_form_hint {
    color: var(--iq-muted, #77756e);
    font-size: 13px;
}

/* Astérisque des champs requis à l'accent. */
body .pmpro .pmpro_asterisk abbr,
body .pmpro .pmpro_asterisk { color: var(--iq-accent, #c95616); text-decoration: none; }

/* =========================================================================
 * 7) Tableaux (historique des paiements, niveaux, etc.).
 * ========================================================================= */
body .pmpro .pmpro_table thead th {
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--iq-muted, #77756e);
    border-bottom: 1px solid var(--iq-line, #d8d6cd);
    padding: 10px 12px;
    text-align: left;
}

body .pmpro .pmpro_table tbody td {
    font-size: 14px;
    color: var(--iq-ink, #11110f);
    border-bottom: 1px solid color-mix(in srgb, var(--iq-line, #d8d6cd) 55%, transparent);
    padding: 12px;
    vertical-align: middle;
}

/* Les <th> de lignes (ex. noms de niveaux) ne sont PAS des en-têtes de
   colonnes : annuler le style th générique (uppercase/muted) du thème. */
body .pmpro .pmpro_table tbody th {
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--iq-ink, #11110f);
    border-bottom: 1px solid color-mix(in srgb, var(--iq-line, #d8d6cd) 55%, transparent);
    padding: 12px;
    text-align: left;
    vertical-align: middle;
}

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

/* =========================================================================
 * 8) Badges de statut (Payé, En attente, Remboursé...).
 * ========================================================================= */
body .pmpro .pmpro_tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 0;
    min-height: 26px;
    padding: 2px 12px;
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.01em;
}

body .pmpro .pmpro_tag-success { background: #e2efe2; color: #2c5e34; }
body .pmpro .pmpro_tag-alert   { background: #f7eed9; color: #8a6116; }
body .pmpro .pmpro_tag-error   { background: #f5e0dd; color: #92382b; }

/* =========================================================================
 * 9) Avatar rond dans « Bienvenue, ... ».
 * ========================================================================= */
body .pmpro .pmpro_heading-with-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .pmpro .pmpro_heading-with-avatar img.avatar {
    border-radius: 50%;
    width: 44px;
    height: 44px;
}

/* =========================================================================
 * 10) Messages contextuels.
 * ========================================================================= */
body .pmpro .pmpro_message {
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--iq-line, #d8d6cd);
}

/* =========================================================================
 * 11) Largeur de lecture + intégration dans la coquille du portail.
 *     Hors portail (caisse/niveaux/connexion publiques) : colonne centrée.
 *     Dans le portail (.iq-pmpro-content) : pleine largeur du bloc.
 * ========================================================================= */
body .pmpro .pmpro_section,
body .pmpro #pmpro_account,
body .pmpro .pmpro_checkout {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

body .iq-pmpro-content .pmpro .pmpro_section,
body .iq-pmpro-content .pmpro #pmpro_account,
body .iq-pmpro-content .pmpro .pmpro_checkout {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* =========================================================================
 * 12) Portail membre : surface accent (orange).
 *     Mêmes règles que .iq-accent-surface dans iq-design.css.
 * ========================================================================= */
.iq-pmpro-content .pmpro .pmpro_section_title {
    color: var(--iq-panel-ink, #130905);
}

/* Les cartes restent claires sur la surface accent ; à l'intérieur, les
   composants gardent leur style standard (déjà sur fond blanc). */
.iq-pmpro-content .pmpro .pmpro_card {
    background: var(--iq-white, #fff);
    box-shadow: none;
}

/* Boutons/liens posés directement sur la surface accent (hors carte) :
   transparents, bordure et texte encre du panneau. */
.iq-pmpro-content .pmpro .pmpro_section > .pmpro_btn,
.iq-pmpro-content .pmpro .pmpro_section_content > .pmpro_btn,
.iq-pmpro-content .pmpro .pmpro_actions_nav a {
    background: transparent;
    border: 1px solid var(--iq-panel-ink, #130905);
    color: var(--iq-panel-ink, #130905);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: .16s var(--iq-ease, ease);
}

.iq-pmpro-content .pmpro .pmpro_section > .pmpro_btn:hover,
.iq-pmpro-content .pmpro .pmpro_section_content > .pmpro_btn:hover,
.iq-pmpro-content .pmpro .pmpro_actions_nav a:hover {
    background: color-mix(in srgb, var(--iq-panel-ink, #130905) 12%, transparent);
}

/* Texte courant sur la surface accent (hors carte). */
.iq-pmpro-content > p,
.iq-pmpro-content .pmpro .pmpro_section > p {
    color: var(--iq-panel-ink, #130905);
}

/* =========================================================================
 * 13) Bouton de soumission du checkout / adhésion (« Confirmer et payer »).
 *     Selon la version de PMPro, ce bouton peut être un <input type="submit">
 *     ou un <button>, avec ou sans .pmpro_btn, et pas toujours enfant direct
 *     d'une section — il échappait donc aux règles ci-dessus et s'affichait en
 *     texte brut. On le stylise ICI de façon robuste : toute commande de
 *     soumission DANS le contenu PMPro du portail devient une pilule pleine
 *     (encre-panneau + texte accent), cohérente avec .iq-accent-surface.
 * ========================================================================= */
.iq-pmpro-content input[type="submit"],
.iq-pmpro-content button[type="submit"],
.iq-pmpro-content .pmpro_btn-submit,
.iq-pmpro-content .pmpro_submit input[type="submit"],
.iq-pmpro-content .pmpro_submit button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    border-radius: 999px;
    padding: 13px 22px;
    margin-top: 6px;
    font-family: var(--iq-body, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
    background: var(--iq-panel-ink, #130905);
    border: 1px solid var(--iq-panel-ink, #130905);
    color: var(--iq-accent, #c95616);
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: .16s var(--iq-ease, ease);
}

.iq-pmpro-content input[type="submit"]:hover,
.iq-pmpro-content input[type="submit"]:focus,
.iq-pmpro-content button[type="submit"]:hover,
.iq-pmpro-content button[type="submit"]:focus,
.iq-pmpro-content .pmpro_btn-submit:hover,
.iq-pmpro-content .pmpro_btn-submit:focus,
.iq-pmpro-content .pmpro_submit input[type="submit"]:hover,
.iq-pmpro-content .pmpro_submit button:hover {
    background: color-mix(in srgb, var(--iq-panel-ink, #130905) 86%, transparent);
    border-color: var(--iq-panel-ink, #130905);
    color: var(--iq-accent, #c95616);
}