/* ==========================================================================
   Connexion, Inscription et Vérification de l'adresse mail (UX-AUTH, maquette
   du 31/10, version définitive), et Nous contacter ([agolf_contact], UX-CONTACT
   du 1/11) : le balisage de [agolf_auth], rendu par le plugin (templates/auth.php). Panneau clair à gauche, carte du formulaire à
   droite, empilés sous 860 px.

   Le formulaire reste celui de MemberPress ou de User Verification : seul son
   habillage est ici. Les rares !important ne répondent qu'à un !important du
   thème BuddyBoss (memberpress.css), chacun signalé ; les erreurs MemberPress
   gardent la charte orange commune (pages-membre.css, §33).

   Remplace auth.css (habillage par-dessus Elementor) dès qu'une page porte le
   shortcode : agolf_enqueue_auth_style() ne charge plus que cette feuille.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La page : fond --fj1-bg, ni titre du thème ni barre latérale
   -------------------------------------------------------------------------- */
body:has(.agolf-auth) #content,
body:has(.agolf-auth) #content :is(.container, .bb-grid, #primary, main, article, .entry-content):has(.agolf-auth) {
    background: var(--fj1-bg);
}

/* #content garde son padding-top (l'en-tête fixe du thème) ; seuls ses côtés tombent. */
body:has(.agolf-auth) #content {
    padding-right: 0;
    padding-left: 0;
}

body:has(.agolf-auth) #content :is(.container, .bb-grid, #primary, main, article, .entry-content):has(.agolf-auth) {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body:has(.agolf-auth) #content :is(.entry-header, .page-header),
body:has(.agolf-auth) #secondary {
    display: none;
}

/* --------------------------------------------------------------------------
   2. Deux colonnes égales, un couloir de 28 à 64 px
   -------------------------------------------------------------------------- */
.agolf-auth {
    --agolf-auth-ombre: 0 24px 60px -28px rgba(95, 0, 143, .25);
    color: var(--fj1-ink);
    font-family: var(--fj1-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.agolf-auth *,
.agolf-auth *::before,
.agolf-auth *::after {
    box-sizing: border-box;
}

.agolf-auth__page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) 24px;
}

/* --------------------------------------------------------------------------
   3. Le panneau : en-tête des pages membre, ligne, trois repères, centrés verticalement
   -------------------------------------------------------------------------- */
.agolf-auth__panneau {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 560px;
    padding: clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 44px);
    border: 1px solid var(--fj1-border);
    border-radius: 24px;
    background: var(--fj1-surface);
    box-shadow: var(--fj1-shadow-sm);
}

.agolf-auth__surtitre {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fj1-violet);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.agolf-auth__surtitre::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: agolf-auth-clignote 1.6s infinite;
}

@keyframes agolf-auth-clignote {
    50% { opacity: .35; }
}

.agolf-auth p.agolf-auth__titre {
    margin: 12px 0 14px;
    color: var(--fj1-ink);
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

/* .agolf-auth__titre em : la règle commune du dégradé de titre, couleurs.css. */

.agolf-auth p.agolf-auth__intro {
    max-width: 40ch;
    margin: 0;
    color: var(--fj1-ink-soft);
    font-size: 15px;
    line-height: 1.6;
}

.agolf-auth ul.agolf-auth__reperes {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.agolf-auth__reperes li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    color: var(--fj1-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

.agolf-auth__reperes li::before {
    content: "\2713";
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fj1-violet-soft);
    color: var(--fj1-violet);
    font-size: 12px;
    font-weight: 800;
}

/* Contact : le repère porte une icône au trait dans une pastille lavande, un titre et une ligne grise. */
.agolf-auth__reperes li.agolf-auth__repere--icone::before {
    content: none;
}

.agolf-auth .agolf-auth__repere-icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--fj1-violet-soft);
}

.agolf-auth .agolf-auth__repere-icone svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--fj1-violet-hover);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agolf-auth .agolf-auth__repere-corps b {
    display: block;
    color: var(--fj1-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.agolf-auth .agolf-auth__repere-corps > span {
    color: var(--fj1-ink-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.agolf-auth .agolf-auth__repere-corps a {
    color: var(--fj1-violet-hover);
    font-weight: 600;
    text-decoration: none;
}

.agolf-auth .agolf-auth__repere-corps a:hover,
.agolf-auth .agolf-auth__repere-corps a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. La carte du formulaire
   -------------------------------------------------------------------------- */
.agolf-auth__carte {
    padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px);
    border: 1px solid var(--fj1-border);
    border-radius: 24px;
    background: var(--fj1-surface);
    box-shadow: var(--agolf-auth-ombre);
}

/* En vue ordinateur, la carte a la hauteur du panneau : son contenu s'y centre verticalement quand il est plus court. */
@media (min-width: 861px) {
    .agolf-auth__carte {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.agolf-auth h1.agolf-auth__carte-titre {
    margin: 0 0 6px;
    color: var(--fj1-ink);
    font-family: var(--fj1-font);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-transform: none;
}

.agolf-auth p:is(.agolf-auth__bascule, .agolf-auth__aide) {
    margin: 0 0 26px;
    color: var(--fj1-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}

.agolf-auth__carte a {
    color: var(--fj1-violet);
    font-weight: 600;
    text-decoration: none;
}

.agolf-auth__carte a:hover,
.agolf-auth__carte a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Les formulaires (MemberPress et User Verification), habillés en place.
      Préfixe .agolf-auth .agolf-auth__formulaire : passe devant le thème
      (.mp_wrapper.mp_login_form …) et les feuilles de MemberPress.
   -------------------------------------------------------------------------- */
.agolf-auth .agolf-auth__formulaire .mp-form-row {
    margin: 0 0 16px;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper h3 {
    margin: 0 0 16px;
    color: var(--fj1-ink);
    font-family: var(--fj1-font);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

/* Étiquettes au-dessus des champs, y compris à la connexion, où le thème les masque (l'inscription garde la mise en
   page de pages-membre.css, §33). */
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr_username .mp-form-label {
    display: block;
}

/* Jamais le libellé du champ piège de MemberPress (.mepr-visuallyhidden, « Pas de val »). */
.agolf-auth .agolf-auth__formulaire .mp_wrapper .mp-form-row label:not(.mepr-visuallyhidden) {
    display: block;
    margin: 0 0 7px;
    color: var(--fj1-ink-soft);
    font-family: var(--fj1-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Le thème masque ce libellé en !important (memberpress.css). */
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr_password .mp-form-label > label {
    display: block !important;
}

/* Les icônes du thème à gauche des champs de connexion : plus de place réservée. */
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form :is(.mepr_username, .mepr_password)::before {
    content: none;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input:is([type="text"], [type="email"], [type="password"], :not([type])),
.agolf-auth .agolf-auth__formulaire .wpcf7 :is(input:is([type="text"], [type="email"], [type="tel"]), select, textarea) {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 13px 16px;
    border: 1.5px solid var(--fj1-border);
    border-radius: 14px;
    background: #FDFCFE;
    box-shadow: none;
    color: var(--fj1-ink);
    font-family: var(--fj1-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 150ms var(--fj1-ease), box-shadow 150ms var(--fj1-ease), background-color 150ms var(--fj1-ease);
}

/* Le thème impose le retrait des champs de connexion en !important (place de ses icônes). */
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form input:is([type="text"], [type="password"]) {
    padding: 13px 16px !important;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input:is([type="text"], [type="email"], [type="password"], :not([type])):focus,
.agolf-auth .agolf-auth__formulaire .wpcf7 :is(input:is([type="text"], [type="email"], [type="tel"]), select, textarea):focus {
    border-color: var(--fj1-violet);
    outline: none;
    background: var(--fj1-surface);
    box-shadow: 0 0 0 4px rgba(155, 0, 229, .14);
}

/* Mot de passe : le bouton afficher / masquer dans le champ, à droite. */
.agolf-auth .agolf-auth__formulaire .mp_wrapper div.mp-hide-pw {
    position: relative;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input[type="password"],
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr_password input:is([type="text"], [type="password"]) {
    padding-right: 46px !important; /* face au !important du thème, comme ci-dessus */
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper .mp-form-row button.button.mp-hide-pw {
    display: flex;
    position: absolute;
    top: 0;
    right: 4px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--fj1-ink-faint);
    cursor: pointer;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper .mp-form-row button.button.mp-hide-pw .dashicons {
    width: 18px;
    height: 18px;
    color: var(--fj1-ink-faint);
    font-size: 18px;
    line-height: 1;
}

/* Inscription : prénom et nom, mot de passe et confirmation, deux par ligne. */
.agolf-auth .agolf-auth__formulaire .mepr-signup-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
}

.agolf-auth .agolf-auth__formulaire .mepr-signup-form > * {
    grid-column: 1 / -1;
}

.agolf-auth .agolf-auth__formulaire .mepr-signup-form > :is(.mepr_first_name, .mepr_last_name, .mepr_password, .mepr_password_confirm) {
    grid-column: auto;
}

/* Deux champs d'une même ligne : un libellé sur deux lignes (« Confirmation du mot de passe ») ne décale pas son champ,
   le libellé voisin descend contre le sien. */
.agolf-auth .agolf-auth__formulaire .mepr-signup-form > :is(.mepr_first_name, .mepr_last_name, .mepr_password, .mepr_password_confirm) label:not(.mepr-visuallyhidden) {
    display: flex !important; /* même raison : le display: block !important de MemberPress */
    flex: 1 0 auto;
    align-items: flex-end;
}

.agolf-auth .agolf-auth__formulaire .mepr-signup-form :is(.mepr_spacer, .mp-spacer) {
    display: none;
}

/* La case des conditions, unique (habillage-membre.php), et « Se souvenir de moi » : la coche de la maquette. */
.agolf-auth .agolf-auth__formulaire .mp-form-row.agolf-case-conditions {
    margin: 4px 0 22px;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper .mp-form-row.agolf-case-conditions label.mepr-checkbox-field,
.agolf-auth .agolf-auth__formulaire .mp_login_form label:has(> #rememberme) {
    display: flex !important; /* MemberPress pose display: block !important sur ses libellés (.mp_wrapper .mp-form-row label) */
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--fj1-ink-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input[type="checkbox"] {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--fj1-violet-line);
    border-radius: 6px;
    background: var(--fj1-surface);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input[type="checkbox"]:checked {
    border-color: var(--fj1-violet);
    background: var(--fj1-violet);
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--fj1-on-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--fj1-violet);
    outline-offset: 2px;
}

/* Connexion : « Se souvenir de moi » et « Mot de passe oublié ? » sur une ligne, puis le bouton. Le lien est hors
   du <form> : le formulaire se dissout dans la grille du conteneur, qui range ses éléments. */
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form > form {
    display: contents;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form > *,
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form > form > * {
    grid-column: 1 / -1;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mp-spacer {
    display: none;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr_error { order: 0; }
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr_username { order: 1; }
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr_password { order: 2; }

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form > form > div:has(> label > #rememberme) {
    grid-column: 1;
    order: 3;
    margin: 4px 0 22px;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr-login-actions {
    position: static;
    grid-column: 2;
    order: 4;
    margin: 4px 0 22px;
    font-size: 13px;
    line-height: 1.5;
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr-login-actions a {
    white-space: nowrap;
}

/* Le texte du lien finit déjà par une espace (balisage de MemberPress). */
.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .mepr-login-actions a::after {
    content: "?";
}

.agolf-auth .agolf-auth__formulaire .mp_wrapper.mp_login_form .submit {
    order: 5;
    margin: 0;
}

/* Le bouton : pilule dégradée, pleine largeur, sur tous les formulaires (MemberPress et Contact Form 7). */
.agolf-auth .agolf-auth__formulaire :is(.mp_wrapper, .wpcf7) :is(input[type="submit"], button[type="submit"]),
.agolf-auth .agolf-auth__formulaire .mp_wrapper #wp-submit {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--agolf-bouton-fond);
    box-shadow: var(--agolf-bouton-ombre);
    color: var(--agolf-bouton-texte);
    font-family: var(--fj1-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.3;
    text-align: center;
    text-shadow: none;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 150ms var(--fj1-ease), box-shadow 150ms var(--fj1-ease);
}

.agolf-auth .agolf-auth__formulaire :is(.mp_wrapper, .wpcf7) :is(input[type="submit"], button[type="submit"]):hover,
.agolf-auth .agolf-auth__formulaire .mp_wrapper #wp-submit:hover {
    background: var(--agolf-bouton-fond);
    box-shadow: var(--agolf-bouton-ombre-survol);
    color: var(--agolf-bouton-texte);
    transform: var(--agolf-bouton-survol);
}

.agolf-auth .agolf-auth__formulaire :is(.mp_wrapper, .wpcf7) :is(input[type="submit"], button[type="submit"]):focus-visible {
    outline: var(--agolf-bouton-focus);
    outline-offset: 3px;
}

.agolf-auth .agolf-auth__formulaire :is(.mp_wrapper, .wpcf7) :is(input[type="submit"], button[type="submit"]):disabled {
    opacity: var(--agolf-bouton-desactive);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.agolf-auth .agolf-auth__formulaire .mepr-signup-form .mp-form-submit {
    margin: 0;
}

/* Messages de succès MemberPress (lien de réinitialisation envoyé, mot de passe changé). Les erreurs : pages-membre.css. */
.agolf-auth .agolf-auth__formulaire .mp_wrapper :is(.mepr_updated, .mepr-alert-success) {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--fj1-success-line);
    border-left: 3px solid var(--fj1-success);
    border-radius: 14px;
    background: var(--fj1-success-soft);
    color: var(--fj1-green);
    font-size: 14px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5 bis. Contact Form 7 (formulaire 6622, page Nous contacter). Les champs et le
      bouton partagent les règles ci-dessus ; ici, la grille, les étiquettes, les
      messages et la roue. Tient avec ou sans le champ « Sujet », avec ou sans
      astérisque : rien n'est accroché aux noms des champs.
      Le CSS additionnel du thème (Personnaliser, « Formulaire contact ») vise les
      mêmes classes : #formulaire-responsive à 600 px centré, .demi-colonne à 50 %
      en flottant avec 0,65rem de retrait et un texte 16 px noir, le bouton vert
      flottant à droite, les erreurs sur fond rouge. Chaque propriété qu'il pose est
      reprise ici (relevé du 1/11, tests/fixtures/contact_css_additionnel_20261101.css).
   -------------------------------------------------------------------------- */
/* Le contact, en vue ordinateur : une carte plus serrée que celles de la connexion et de l'inscription (sous 860 px,
   la règle commune des cartes). */
@media (min-width: 861px) {
    .agolf-auth--contact .agolf-auth__carte {
        padding: clamp(24px, 2.6vw, 34px);
    }
}

/* Rien sous le bouton que le rembourrage de la carte : ni la marge du formulaire (thème), ni celle de la dernière ligne. */
.agolf-auth .agolf-auth__formulaire .wpcf7 form {
    margin: 0;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 #formulaire-responsive > .rang-form:last-child > * {
    margin-bottom: 0;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 #formulaire-responsive {
    width: auto;
    max-width: none;
    margin: 0;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 #formulaire-responsive::after {
    content: none;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 form > :is(p, div, fieldset):not(.wpcf7-response-output) {
    margin: 0;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 .rang-form {
    display: grid;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 .rang-form > :is(.colonne, :not(.demi-colonne)) {
    grid-column: 1 / -1;
}

/* Une colonne vidée dans l'éditeur (le « Sujet » retiré) ne laisse ni trou ni marge. */
.agolf-auth .agolf-auth__formulaire .wpcf7 .rang-form > :not(:has(input, select, textarea)) {
    display: none;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 :is(.demi-colonne, .colonne, form > p) {
    margin: 0 0 16px;
}

/* Chaque colonne remplit sa cellule de la grille : ni flottant, ni 50 %, ni retrait (CSS additionnel du thème). Le texte
   de la colonne est l'étiquette : Contact Form 7 la rend en texte nu dans un <p>, devant le champ. */
.agolf-auth .agolf-auth__formulaire .wpcf7 :is(.demi-colonne, .colonne) {
    position: static;
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    color: var(--fj1-ink-soft);
    font-family: var(--fj1-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 :is(.demi-colonne, .colonne) > p {
    margin: 0;
    color: inherit;
    font: inherit;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 label {
    display: block;
    margin: 0;
    color: var(--fj1-ink-soft);
    font-family: var(--fj1-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* L'étiquette au-dessus du champ, qu'elle l'enveloppe (retour à la ligne de l'éditeur) ou le précède. */
.agolf-auth .agolf-auth__formulaire .wpcf7 label br {
    display: none;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin-top: 7px;
}

/* .wpcf7-form-control : passe devant la règle commune des champs (son input:is([type]) pèse plus lourd). */
.agolf-auth .agolf-auth__formulaire .wpcf7 select.wpcf7-form-control {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A00B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* La hauteur de la maquette, pas les dix lignes de Contact Form 7 (rows="10"). */
.agolf-auth .agolf-auth__formulaire .wpcf7 textarea.wpcf7-form-control {
    display: block;
    height: 140px;
    min-height: 140px;
    resize: vertical;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 .wpcf7-submit {
    float: none;
    margin-top: 6px;
}

/* La roue de Contact Form 7, comme celle de MemberPress ; le bouton atténué pendant l'envoi suffit. */
.agolf-auth .agolf-auth__formulaire .wpcf7 .wpcf7-spinner {
    display: none;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 form.submitting .wpcf7-submit {
    opacity: .6;
    pointer-events: none;
}

/* Erreurs : la charte orange des formulaires (pages-membre.css, §33), jamais le rouge natif. */
.agolf-auth .agolf-auth__formulaire .wpcf7 .wpcf7-not-valid-tip {
    margin-top: 6px;
    padding: 0;
    background: none;
    text-shadow: none;
    color: var(--fj1-invalid-ink);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.45;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 :is(input, select, textarea).wpcf7-not-valid {
    border-color: var(--fj1-invalid);
    background-color: var(--fj1-invalid-soft);
    box-shadow: none;
}

/* Le message sous le bouton : masqué par Contact Form 7 tant que rien n'est envoyé ; orange sur une erreur, aux couleurs du
   site une fois envoyé (lavande, filet violet, texte encre, 1/11). */
.agolf-auth .agolf-auth__formulaire .wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--fj1-invalid);
    border-left: 3px solid var(--fj1-invalid);
    border-radius: 14px;
    background: var(--fj1-invalid-soft);
    color: var(--fj1-invalid-ink);
    font-size: 14px;
    line-height: 1.5;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 form .wpcf7-response-output:empty {
    display: none;
}

.agolf-auth .agolf-auth__formulaire .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--fj1-violet-line);
    border-left-color: #9B00E5;
    background: #F3E8FF;
    color: #7A00B8;
}

/* La page Vérification (Agolf_Verification::bloc_page) : l'adresse utilisée, « Renvoyer le lien », « Se déconnecter ». */
.agolf-auth p.agolf-verif__texte {
    margin: 0 0 24px;
    color: var(--fj1-ink-soft);
    font-size: 15px;
    line-height: 1.6;
}

.agolf-auth .agolf-verif__texte strong {
    color: var(--fj1-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.agolf-auth p.agolf-verif__message {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--fj1-violet-line);
    border-left: 3px solid var(--fj1-violet);
    border-radius: 14px;
    background: var(--fj1-violet-soft);
    color: var(--fj1-violet-deep);
    font-size: 14px;
    line-height: 1.5;
}

.agolf-auth p.agolf-verif__message--succes {
    border-color: var(--fj1-success-line);
    border-left-color: var(--fj1-success);
    background: var(--fj1-success-soft);
    color: var(--fj1-green);
}

.agolf-auth p.agolf-verif__message--erreur {
    border-color: var(--fj1-invalid);
    background: var(--fj1-invalid-soft);
    color: var(--fj1-invalid-ink);
}

.agolf-auth .agolf-verif__renvoi {
    margin: 0;
}

.agolf-auth button.agolf-verif__bouton {
    display: block;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--agolf-bouton-fond);
    box-shadow: var(--agolf-bouton-ombre);
    color: var(--agolf-bouton-texte);
    font-family: var(--fj1-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    cursor: pointer;
    transition: transform 150ms var(--fj1-ease), box-shadow 150ms var(--fj1-ease);
}

.agolf-auth button.agolf-verif__bouton:hover {
    box-shadow: var(--agolf-bouton-ombre-survol);
    transform: var(--agolf-bouton-survol);
}

.agolf-auth button.agolf-verif__bouton:focus-visible {
    outline: var(--agolf-bouton-focus);
    outline-offset: 3px;
}

.agolf-auth p.agolf-verif__sortie {
    margin: 18px 0 0;
    font-size: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   6. Sous 860 px : une colonne ; le panneau devient une bannière (surtitre, titre)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .agolf-auth__page {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 20px 16px 48px;
    }

    .agolf-auth__panneau {
        min-height: 0;
        padding: 22px 20px;
        border-radius: 18px;
    }

    .agolf-auth p.agolf-auth__titre {
        margin: 4px 0 0;
        font-size: 20px;
    }

    .agolf-auth p.agolf-auth__intro,
    .agolf-auth ul.agolf-auth__reperes {
        display: none;
    }

    /* Le contact garde son intro et ses repères (lien vers Mon staff, Lezza) : ils renseignent, la maquette les montre. */
    .agolf-auth--contact p.agolf-auth__intro {
        display: block;
        margin-top: 12px;
    }

    .agolf-auth--contact ul.agolf-auth__reperes {
        display: grid;
        margin-top: 20px;
    }

    .agolf-auth__carte {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .agolf-auth .agolf-auth__formulaire :is(.mepr-signup-form, .wpcf7 .rang-form) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .agolf-auth__surtitre::before {
        animation: none;
    }

    .agolf-auth .agolf-auth__formulaire :is(input, button) {
        transition: none;
    }
}