/* ==========================================================================
   ACADÉMIE GOLF IA — Pages d'authentification (/connexion/ + /inscription/)
   --------------------------------------------------------------------------
   Habillage de marque « fj1 » par-dessus la structure Elementor existante
   (split : panneau d'accueil à gauche + carte de formulaire MemberPress à
   droite). Surcouche purement cosmétique, scopée à body.agolf-auth-page.
   La structure Elementor reste inchangée ; on ne fait qu'appliquer la
   grammaire visuelle du site (violet signature, Montserrat, light, calme).

   FEUILLE PARTAGÉE par les 2 pages. Seul le texte du panneau gauche change,
   piloté par body.agolf-page-connexion / body.agolf-page-inscription (§2).

   Classes Elementor à poser côté éditeur (onglet Avancé → Classes CSS) :
     .agc-section   → la SECTION qui contient les 2 colonnes
     .agc-welcome   → la COLONNE de gauche (panneau d'accueil)
     .agc-card      → la COLONNE de droite (carte du formulaire)
   ========================================================================== */

body.agolf-auth-page {
    --c-violet:        oklch(54% 0.29 308);
    --c-violet-deep:   oklch(40% 0.20 308);
    --c-violet-light:  oklch(86% 0.10 308);
    --c-grad:          linear-gradient(135deg, oklch(56% 0.29 308) 0%, oklch(47% 0.26 308) 100%);

    --c-page:          oklch(97.5% 0.016 308);
    --c-surface:       #ffffff;

    --c-ink:           oklch(24% 0.03 308);
    --c-ink-soft:      oklch(44% 0.025 308);
    --c-ink-faint:     oklch(58% 0.012 308);
    --c-line:          oklch(90% 0.012 308);

    --c-font:          "Montserrat", system-ui, sans-serif;

    --c-radius:        22px;
    --c-radius-field:  13px;
    --c-shadow:        0 24px 60px -28px oklch(40% 0.20 308 / 0.35),
                       0 8px 24px -16px oklch(40% 0.20 308 / 0.30);
    --c-shadow-brand:  0 14px 30px -10px oklch(54% 0.29 308 / 0.45);
    --c-ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1. Fond de page teinté (wrappers BuddyBoss)
   ========================================================================== */
body.agolf-auth-page #content,
body.agolf-auth-page .site-content,
body.agolf-auth-page .bb-content-area,
body.agolf-auth-page .content-area,
body.agolf-auth-page #primary,
body.agolf-auth-page main,
body.agolf-auth-page .entry-content,
body.agolf-auth-page .main-content-inner {
    background: var(--c-page) !important;
}

/* La section reste transparente sur le fond teinté */
body.agolf-auth-page .agc-section {
    background: transparent !important;
}

/* Respiration verticale + alignement des 2 colonnes à hauteur égale + un vrai
   couloir d'air entre les 2 panneaux (gap), au lieu de les laisser tassés. */
body.agolf-auth-page .agc-section > .elementor-container {
    align-items: stretch !important;
    gap: clamp(28px, 4vw, 72px) !important;
    padding-top: clamp(40px, 6vw, 88px) !important;
    padding-bottom: clamp(40px, 6vw, 88px) !important;
}
/* On laisse le gap gérer l'espacement : largeurs égales, padding de colonne à 0 */
body.agolf-auth-page .agc-section > .elementor-container > .elementor-column {
    width: auto !important;
    flex: 1 1 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   2. PANNEAU D'ACCUEIL (colonne gauche) — dégradé violet + halos + accroche
   ========================================================================== */
body.agolf-auth-page .agc-welcome {
    position: relative;
    overflow: hidden;
    border-radius: var(--c-radius) !important;
    background: linear-gradient(152deg,
        oklch(43% 0.21 308) 0%,
        oklch(34% 0.17 308) 58%,
        oklch(30% 0.15 308) 100%) !important;
    box-shadow: var(--c-shadow);
    /* le contenu (logo / titre / texte) respire dans le panneau */
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px) !important;
}

/* Halos décoratifs (mêmes blobs que la bibliothèque) */
body.agolf-auth-page .agc-welcome::before,
body.agolf-auth-page .agc-welcome::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
body.agolf-auth-page .agc-welcome::before {
    width: 360px; height: 360px;
    top: -120px; right: -120px;
    background: radial-gradient(circle, oklch(70% 0.18 308 / 0.40) 0%, transparent 70%);
}
body.agolf-auth-page .agc-welcome::after {
    width: 300px; height: 300px;
    bottom: -110px; left: -90px;
    background: radial-gradient(circle, oklch(62% 0.20 320 / 0.32) 0%, transparent 70%);
}

/* Le wrapper de contenu : passe au-dessus des halos ET centre verticalement
   l'accroche. min-height pour donner de la prestance au panneau même vide. */
body.agolf-auth-page .agc-welcome > .elementor-widget-wrap,
body.agolf-auth-page .agc-welcome > .elementor-element-populated {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    justify-content: center;   /* centrage VERTICAL */
    align-items: center;       /* centrage HORIZONTAL */
    text-align: center;        /* texte centré (lignes de l'accroche) */
    min-height: 440px;
}

/* PANNEAU 100% AUTONOME — aucun widget à gérer côté Elementor.
   On masque TOUS les widgets d'origine du panneau gauche (image, titres,
   textes) et on rend l'eyebrow + l'accroche directement via le CSS. Ainsi,
   peu importe ce que contient la colonne (1 image sur /connexion/, ou
   plusieurs titres sur /inscription/), elle affiche le panneau de marque. */
body.agolf-auth-page .agc-welcome .elementor-widget {
    display: none !important;
}

/* Eyebrow — STYLE partagé, TEXTE par page. La pastille de gauche est un HALO
   BLANC doux (dégradé radial) plutôt qu'un point dur. */
body.agolf-auth-page .agc-welcome > .elementor-widget-wrap::before,
body.agolf-auth-page .agc-welcome > .elementor-element-populated::before {
    font-family: var(--c-font);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: oklch(90% 0.07 308);
    /* padding vertical : donne de la hauteur à la boîte pour que le halo
       (radial) ne soit PAS coupé en haut/bas par le line-height. */
    padding: 9px 0 9px 30px;
    margin-bottom: 10px;
    /* halo blanc bien visible : cœur lumineux + auréole douce large */
    background-image: radial-gradient(circle 11px at 11px 50%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.95) 14%,
        rgba(255, 255, 255, 0.45) 38%,
        rgba(255, 255, 255, 0.16) 60%,
        rgba(255, 255, 255, 0) 80%);
    background-repeat: no-repeat;
}

/* Accroche sur 2 lignes — STYLE partagé, TEXTE par page */
body.agolf-auth-page .agc-welcome > .elementor-widget-wrap::after,
body.agolf-auth-page .agc-welcome > .elementor-element-populated::after {
    white-space: pre;
    font-family: var(--c-font);
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
}

/* —— TEXTE DU PANNEAU PAR PAGE ——————————————————————————————————————————
   \0000A0 = espace insécable (6 chiffres pour ne pas absorber la lettre
   suivante) ; \A = saut de ligne dans l'accroche. */

/* Page CONNEXION */
body.agolf-page-connexion .agc-welcome > .elementor-widget-wrap::before,
body.agolf-page-connexion .agc-welcome > .elementor-element-populated::before {
    content: "ESPACE MEMBRE";
}
body.agolf-page-connexion .agc-welcome > .elementor-widget-wrap::after,
body.agolf-page-connexion .agc-welcome > .elementor-element-populated::after {
    content: "Bon retour\A parmi nous";
}

/* Page INSCRIPTION + page VÉRIFICATION DE L'ADRESSE MAIL (même panneau gauche) */
body.agolf-page-inscription .agc-welcome > .elementor-widget-wrap::before,
body.agolf-page-inscription .agc-welcome > .elementor-element-populated::before,
body.agolf-page-verification-de-ladresse-mail .agc-welcome > .elementor-widget-wrap::before,
body.agolf-page-verification-de-ladresse-mail .agc-welcome > .elementor-element-populated::before {
    content: "INSCRIPTION GRATUITE";
}
body.agolf-page-inscription .agc-welcome > .elementor-widget-wrap::after,
body.agolf-page-inscription .agc-welcome > .elementor-element-populated::after,
body.agolf-page-verification-de-ladresse-mail .agc-welcome > .elementor-widget-wrap::after,
body.agolf-page-verification-de-ladresse-mail .agc-welcome > .elementor-element-populated::after {
    /* même taille que « Bon retour parmi nous » : on garde la taille partagée
       (clamp(2rem, 3.2vw, 2.9rem) + line-height 1.06), on ne change que le texte. */
    content: "Rendre\A l'entra\00EEnement\A du haut niveau\A accessible \0000E0\0000A0tous";
}

/* ==========================================================================
   3. CARTE DE CONNEXION (colonne droite) — surface blanche brandée
   ========================================================================== */
/* La carte = colonne droite. Le fond/rayon/ombre/padding d'Elementor sont
   posés sur le wrapper interne (.elementor-element-populated) → on cible AUSSI
   ce wrapper, sinon le #EFEFEF d'origine reste visible. */
body.agolf-auth-page .agc-card,
body.agolf-auth-page .agc-card > .elementor-widget-wrap,
body.agolf-auth-page .agc-card > .elementor-element-populated {
    background: var(--c-surface) !important;
    border-radius: var(--c-radius) !important;
    box-shadow: var(--c-shadow) !important;
    margin: 0 !important;
}
body.agolf-auth-page .agc-card > .elementor-widget-wrap,
body.agolf-auth-page .agc-card > .elementor-element-populated {
    border: 1px solid var(--c-line) !important;
    padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3vw, 46px) !important;
}

/* Titre de la carte (« Connexion ») */
body.agolf-auth-page .agc-card .elementor-widget-text-editor:first-of-type,
body.agolf-auth-page .agc-card .elementor-widget-heading:first-of-type {
    margin-bottom: 22px !important;
}
body.agolf-auth-page .agc-card .elementor-widget-text-editor:first-of-type .elementor-widget-container,
body.agolf-auth-page .agc-card .elementor-heading-title {
    font-family: var(--c-font) !important;
    font-weight: 800 !important;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--c-ink) !important;
    text-transform: none !important;
}

/* Sous-titres du formulaire MemberPress (ex. « Réinitialisation du mot de
   passe » sur la vue mot de passe oublié) : le thème les rend en police
   système → on les repasse en Montserrat, cohérents avec le reste. */
body.agolf-auth-page .agc-card .mp_wrapper h1,
body.agolf-auth-page .agc-card .mp_wrapper h2,
body.agolf-auth-page .agc-card .mp_wrapper h3,
body.agolf-auth-page .agc-card h3 {
    font-family: var(--c-font) !important;
    font-weight: 700 !important;
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--c-ink) !important;
    margin: 0 0 16px !important;
}

/* Lien « Créer votre compte » / « Se connecter » (sous le titre).
   Le texte est en <strong> (700) → on redescend à 600 (semi-gras), moins lourd. */
body.agolf-auth-page .agc-card a,
body.agolf-auth-page .agc-card a strong,
body.agolf-auth-page .agc-card strong a {
    color: var(--c-violet) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 140ms var(--c-ease);
}
body.agolf-auth-page .agc-card a:hover {
    color: var(--c-violet-deep) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   4. FORMULAIRE MemberPress — ciblé par TYPES dans la carte (robuste aux
      classes MemberPress qui varient selon la version)
   ========================================================================== */

/* Lignes de formulaire : espacement régulier */
body.agolf-auth-page .agc-card .mp-form-row,
body.agolf-auth-page .agc-card .mepr-form-row,
body.agolf-auth-page .agc-card p {
    margin: 0 0 18px !important;
}

/* Labels */
body.agolf-auth-page .agc-card label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--c-font) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: var(--c-ink-soft) !important;
}

/* Champs texte / email / password */
body.agolf-auth-page .agc-card input[type="text"],
body.agolf-auth-page .agc-card input[type="email"],
body.agolf-auth-page .agc-card input[type="password"],
body.agolf-auth-page .agc-card input:not([type]) {
    width: 100% !important;
    box-sizing: border-box !important;
    /* retrait gauche NORMAL par défaut (cas inscription : pas d'icône).
       Le retrait élargi pour dégager l'icône est ajouté UNIQUEMENT sur
       connexion (voir règle agolf-page-connexion plus bas). */
    padding: 13px 16px !important;
    font-family: var(--c-font) !important;
    font-size: 1rem !important;
    color: var(--c-ink) !important;
    background: oklch(99% 0.004 308) !important;
    border: 1.5px solid var(--c-line) !important;
    border-radius: var(--c-radius-field) !important;
    box-shadow: none !important;
    transition: border-color 150ms var(--c-ease), box-shadow 150ms var(--c-ease),
                background 150ms var(--c-ease);
}
body.agolf-auth-page .agc-card input[type="text"]:focus,
body.agolf-auth-page .agc-card input[type="email"]:focus,
body.agolf-auth-page .agc-card input[type="password"]:focus,
body.agolf-auth-page .agc-card input:not([type]):focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--c-violet) !important;
    box-shadow: 0 0 0 4px oklch(54% 0.29 308 / 0.14) !important;
}
body.agolf-auth-page .agc-card input::placeholder {
    color: var(--c-ink-faint) !important;
}
/* mot de passe : marge droite pour ne pas écrire sous l'œil afficher/masquer */
body.agolf-auth-page .agc-card input[type="password"] {
    padding-right: 44px !important;
}

/* CONNEXION uniquement : le login pose une icône (silhouette / clé) à gauche
   des champs → on élargit le retrait gauche pour dégager le texte (mais pas
   trop). L'inscription n'a pas d'icône, donc garde le retrait normal de 16px. */
body.agolf-page-connexion .agc-card input[type="text"],
body.agolf-page-connexion .agc-card input[type="email"],
body.agolf-page-connexion .agc-card input[type="password"],
body.agolf-page-connexion .agc-card input:not([type]) {
    padding-left: 36px !important;
}

/* « Se souvenir de moi » : case + label sur une ligne, label en poids normal */
body.agolf-auth-page .agc-card .mepr_remember_me,
body.agolf-auth-page .agc-card .mp-form-row.mepr_remember_me {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}
body.agolf-auth-page .agc-card input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    accent-color: var(--c-violet);
    cursor: pointer;
}
body.agolf-auth-page .agc-card .mepr_remember_me label {
    margin: 0 !important;
    font-weight: 500 !important;
    color: var(--c-ink-soft) !important;
    cursor: pointer;
}

/* ⚠️ NE PAS cibler "button" nu : MemberPress/BuddyBoss rendent un bouton
   "afficher/masquer le mot de passe" DANS le champ password. Le styliser en
   pilule pleine largeur transformait le champ mot de passe en barre violette.
   On RESET d'abord tout bouton qui n'est PAS le bouton de soumission. */
body.agolf-auth-page .agc-card button:not([type="submit"]):not(.button-primary) {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--c-ink-faint) !important;
    cursor: pointer;
    /* taille de l'icône-font de l'œil (cas où l'œil est une icône typographique) */
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Œil afficher/masquer : taille UNIFORME sur les 2 pages (login vs register
   utilisent un markup/glyphe différents). On normalise svg ET icône-font,
   sur le bouton toggle ou tout conteneur "toggle/show-pw/visibility". */
body.agolf-auth-page .agc-card button:not([type="submit"]) svg,
body.agolf-auth-page .agc-card [class*="toggle"] svg,
body.agolf-auth-page .agc-card [class*="show-pw"] svg,
body.agolf-auth-page .agc-card [class*="hide-pw"] svg,
body.agolf-auth-page .agc-card [class*="visibility"] svg,
body.agolf-auth-page .agc-card .mepr-password-toggle svg {
    width: 17px !important;
    height: 17px !important;
}
body.agolf-auth-page .agc-card [class*="toggle"],
body.agolf-auth-page .agc-card [class*="show-pw"],
body.agolf-auth-page .agc-card [class*="hide-pw"],
body.agolf-auth-page .agc-card [class*="visibility"],
body.agolf-auth-page .agc-card .mepr-password-toggle {
    font-size: 17px !important;
    line-height: 1 !important;
}
body.agolf-auth-page .agc-card [class*="toggle"] i,
body.agolf-auth-page .agc-card [class*="show-pw"] i,
body.agolf-auth-page .agc-card [class*="visibility"] i,
body.agolf-auth-page .agc-card .mepr-password-toggle i {
    font-size: 17px !important;
}

/* CIBLE EXACTE (markup confirmé en inspecteur, identique sur les 2 pages) :
   button.mp-hide-pw > span.dashicons.dashicons-visibility ::before (glyphe).
   On fige TOUT à l'identique (taille boîte + font-size + couleur + glyphe +
   police) → l'œil est rigoureusement le même sur connexion et inscription.
   Un même œil dashicons paraît « fin/clair » en petit et « plein/foncé » en
   gros : c'est l'incohérence de taille+couleur qui donnait 2 icônes différentes. */
body.agolf-auth-page .agc-card .mp-hide-pw .dashicons,
body.agolf-auth-page .agc-card .button.mp-hide-pw .dashicons {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: oklch(62% 0.02 308) !important;
    -webkit-text-stroke: 0 !important;
}
body.agolf-auth-page .agc-card .mp-hide-pw .dashicons::before,
body.agolf-auth-page .agc-card .button.mp-hide-pw .dashicons::before {
    content: "\f177" !important;        /* œil dashicons, glyphe identique forcé */
    font-family: dashicons !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    color: oklch(62% 0.02 308) !important;
}
/* marge à droite : l'œil ne touche plus le bord du champ (le bouton toggle
   est positionné en absolu à droite → on l'écarte du bord).
   opacity:1 + couleur forcée : le login applique une opacité qui rendait
   l'œil de connexion plus pâle que celui d'inscription. */
body.agolf-auth-page .agc-card button.mp-hide-pw {
    right: 8px !important;
    opacity: 1 !important;
    color: oklch(62% 0.02 308) !important;
}

/* Bouton de connexion : pilule violette de marque (UNIQUEMENT la soumission) */
body.agolf-auth-page .agc-card input[type="submit"],
body.agolf-auth-page .agc-card button[type="submit"],
body.agolf-auth-page .agc-card input.button-primary {
    /* reset de l'apparence native : sans ça, un <input submit> peut ignorer
       text-align et garder son libellé collé à gauche */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* le thème force height:41px sur tous les input → le libellé tombe en bas.
       On annule la hauteur fixe : le bouton se dimensionne sur son padding,
       et la line-height centre le texte verticalement. */
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 24px !important;
    margin-top: 8px !important;
    font-family: var(--c-font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-indent: 0 !important;
    vertical-align: middle !important;
    color: #fff !important;
    background: var(--c-grad) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: var(--c-shadow-brand) !important;
    cursor: pointer !important;
    transition: transform 150ms var(--c-ease), box-shadow 150ms var(--c-ease),
                filter 150ms var(--c-ease) !important;
    text-shadow: none !important;
}
body.agolf-auth-page .agc-card input[type="submit"]:hover,
body.agolf-auth-page .agc-card button[type="submit"]:hover,
body.agolf-auth-page .agc-card input.button-primary:hover {
    /* on RÉ-AFFIRME le dégradé : sinon le thème impose sa couleur de survol
       (violet plat) et les 2 boutons ne sont plus identiques au survol */
    background: var(--c-grad) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 18px 36px -12px oklch(54% 0.29 308 / 0.55) !important;
}
body.agolf-auth-page .agc-card input[type="submit"]:active,
body.agolf-auth-page .agc-card button[type="submit"]:active,
body.agolf-auth-page .agc-card input.button-primary:active {
    transform: translateY(0) !important;
}
body.agolf-auth-page .agc-card input[type="submit"]:focus-visible,
body.agolf-auth-page .agc-card button[type="submit"]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px oklch(54% 0.29 308 / 0.30), var(--c-shadow-brand) !important;
}

/* Messages d'erreur MemberPress : lisibles, sans bandeau agressif */
body.agolf-auth-page .agc-card .mepr-form-has-errors,
body.agolf-auth-page .agc-card .mepr_error,
body.agolf-auth-page .agc-card .invalid {
    color: oklch(52% 0.20 18) !important;
    font-size: 0.9rem !important;
}

/* Page vérification : le formulaire de renvoi affiche une boîte de message
   vide à fond gris (#E0E1E1) sous le bouton → on retire le fond/padding (et on
   la masque si vraiment vide). Un éventuel message réel reste lisible en texte. */
body.agolf-page-verification-de-ladresse-mail .agc-card .form-area.message,
body.agolf-page-verification-de-ladresse-mail .agc-card .message {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.agolf-page-verification-de-ladresse-mail .agc-card .form-area.message:empty,
body.agolf-page-verification-de-ladresse-mail .agc-card .message:empty {
    display: none !important;
}

/* ==========================================================================
   5. Responsive : sur mobile/tablette la colonne gauche est masquée (réglage
      Elementor existant). On centre alors la carte et on réduit les marges.
   ========================================================================== */
@media (max-width: 1024px) {
    body.agolf-auth-page .agc-card {
        margin: 0 auto !important;
        max-width: 480px !important;
    }
}

/* Mobile : seule la carte de droite reste. On lui donne une marge externe
   gauche/droite (jamais collée aux bords) + plus d'air au-dessus. */
@media (max-width: 767px) {
    body.agolf-auth-page .agc-section > .elementor-container {
        padding-left: clamp(16px, 5vw, 28px) !important;
        padding-right: clamp(16px, 5vw, 28px) !important;
        padding-top: clamp(20px, 7vw, 40px) !important;
    }
    body.agolf-auth-page .agc-card {
        margin-top: clamp(6px, 2.5vw, 14px) !important;
    }

    /* « Se souvenir de moi » et « Mot de passe oublié » : empilés (le thème les
       met côte à côte / flottés → ils se chevauchent sur écran étroit) */
    body.agolf-auth-page .agc-card .mepr_remember_me,
    body.agolf-auth-page .agc-card .mepr-login-actions,
    body.agolf-auth-page .agc-card .mepr-forgot-password {
        float: none !important;
        position: static !important;
        clear: both !important;
        width: 100% !important;
        text-align: left !important;
    }
    body.agolf-auth-page .agc-card .mepr-login-actions,
    body.agolf-auth-page .agc-card .mepr-forgot-password {
        margin-top: 12px !important;
    }

    /* CONNEXION mobile : ordre voulu = « Mot de passe oublié » → bouton →
       « Se souvenir de moi » (centré, sous le bouton). Le lien oublié est HORS
       du <form> (frère après le form) → display:contents sur le form promeut
       tous les éléments au même niveau flex, ce qui permet de tout réordonner. */
    body.agolf-page-connexion .agc-card .mp_wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    body.agolf-page-connexion .agc-card .mp_wrapper > form {
        display: contents !important;
    }
    body.agolf-page-connexion .agc-card .mp-spacer {
        display: none !important;
    }
    body.agolf-page-connexion .agc-card .mepr-login-actions {
        order: 5 !important;
        margin-top: 4px !important;
        text-align: center !important;
    }
    body.agolf-page-connexion .agc-card .submit {
        order: 6 !important;
    }
    body.agolf-page-connexion .agc-card .mepr_remember_me {
        order: 7 !important;
        justify-content: center !important;   /* case + label centrés (flex) */
        text-align: center !important;
        margin-top: 16px !important;
    }
}

/* ==========================================================================
   5b. INSCRIPTION desktop : formulaire long (6 champs) → on compacte pour
       tenir sans scroll (marges externes haut/bas réduites + champs resserrés).
       Ciblé sur la page inscription uniquement : connexion reste aérée.
   ========================================================================== */
@media (min-width: 1025px) {
    /* marge haute/basse de la section : identique inscription + vérification */
    body.agolf-page-inscription .agc-section > .elementor-container,
    body.agolf-page-verification-de-ladresse-mail .agc-section > .elementor-container {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    body.agolf-page-inscription .agc-card > .elementor-widget-wrap,
    body.agolf-page-inscription .agc-card > .elementor-element-populated {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    /* moins d'air entre les lignes du formulaire */
    body.agolf-page-inscription .agc-card .mp-form-row,
    body.agolf-page-inscription .agc-card .mepr-form-row,
    body.agolf-page-inscription .agc-card p {
        margin-bottom: 8px !important;
    }
    body.agolf-page-inscription .agc-card label {
        margin-bottom: 3px !important;
    }
    /* champs un poil plus bas */
    body.agolf-page-inscription .agc-card input[type="text"],
    body.agolf-page-inscription .agc-card input[type="email"],
    body.agolf-page-inscription .agc-card input[type="password"],
    body.agolf-page-inscription .agc-card input:not([type]) {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    /* titre + sous-titre resserrés */
    body.agolf-page-inscription .agc-card .elementor-widget-text-editor:first-of-type {
        margin-bottom: 12px !important;
    }
    /* espace AU-DESSUS du bouton trop grand : MemberPress insère un .mp-spacer
       (une ligne &nbsp;) avant la soumission → on le supprime, et on réduit la
       marge du wrapper + du bouton. */
    body.agolf-page-inscription .agc-card .mp-spacer {
        display: none !important;
    }
    body.agolf-page-inscription .agc-card .submit,
    body.agolf-page-inscription .agc-card .mepr-submit {
        margin-top: 0 !important;
    }
    body.agolf-page-inscription .agc-card input[type="submit"],
    body.agolf-page-inscription .agc-card button[type="submit"],
    body.agolf-page-inscription .agc-card input.button-primary {
        margin-top: 2px !important;
    }
}

/* ==========================================================================
   6. Réduire les animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.agolf-auth-page .agc-welcome .elementor-heading-title::after { animation: none !important; }
    body.agolf-auth-page *,
    body.agolf-auth-page *::before,
    body.agolf-auth-page *::after {
        transition-duration: 0.01ms !important;
    }
}