/*
 * Espace Compte & Abonnement — connexion, inscription, abonnement, mon compte.
 * Réutilise la palette et les variables définies dans style.css.
 */

/* --- Boutons génériques (manquaient jusqu'ici : le shortcode [h237_abonnement]
   référençait déjà des classes "btn btn-primary" jamais stylées) --- */
.h237-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    border: 2px solid transparent;
    cursor: pointer;
}
.h237-btn-primary,
a.h237-btn.h237-btn-primary {
    background: var(--h237-orange);
    color: var(--h237-white);
}
.h237-btn-primary:hover { background: var(--h237-red); color: var(--h237-white); }

.h237-btn-outline,
a.h237-btn.h237-btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,0.6);
    color: var(--h237-white);
}
.h237-btn-outline:hover { border-color: var(--h237-yellow); color: var(--h237-yellow); }

.h237-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Zone connexion/abonnement dans le header --- */
.h237-auth-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 16px;
}
.h237-account-link { text-decoration: none; }
.h237-account-link .h237-premium-badge { margin-right: 6px; }

@media (max-width: 860px) {
    .h237-auth-area { margin-left: auto; }
    .h237-auth-area .h237-btn { padding: 7px 12px; font-size: 0.82rem; }
}

/* --- Formulaires (connexion / inscription) --- */
.h237-auth-form-wrap {
    max-width: 440px;
    margin: 40px auto;
    background: var(--h237-white);
    border-radius: var(--h237-radius);
    padding: 32px 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.h237-auth-form-wrap h1 { margin-top: 0; font-size: 1.5rem; }
.h237-auth-form-wrap .h237-form-sub { color: var(--h237-muted); margin-bottom: 22px; }

.h237-field { margin-bottom: 16px; }
.h237-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.h237-field input[type="text"],
.h237-field input[type="email"],
.h237-field input[type="password"],
.h237-field input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #d5d5d5;
    font-size: 1rem;
}
.h237-field input:focus { outline: 2px solid var(--h237-blue); }

.h237-field-remember { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.h237-field-remember input { width: auto; }

.h237-form-submit { width: 100%; justify-content: center; margin-top: 6px; }

.h237-form-notice {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.h237-form-notice.error { background: #fdecea; color: #a41c1c; border: 1px solid #f5c2c0; }
.h237-form-notice.success { background: #eaf7ee; color: #0f6b30; border: 1px solid #bfe6cb; }

.h237-form-footer { margin-top: 18px; font-size: 0.9rem; text-align: center; color: var(--h237-muted); }
.h237-form-footer a { font-weight: 600; }

/* Honeypot anti-bot, invisible pour un humain mais présent pour les bots. */
.h237-hp-field { position: absolute; left: -9999px; top: -9999px; }

/* --- Page abonnement --- */
.h237-plans-intro { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.h237-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}
.h237-pricing-card { text-align: center; position: relative; border: 2px solid transparent; }
.h237-pricing-card.is-selected { border-color: var(--h237-orange); }
.h237-pricing-card .h237-plan-price { font-size: 1.7rem; font-weight: 800; color: var(--h237-blue); margin: 10px 0 4px; }
.h237-pricing-card .h237-plan-desc { color: var(--h237-muted); font-size: 0.88rem; min-height: 40px; }
.h237-pricing-card .h237-btn { width: 100%; justify-content: center; margin-top: 10px; }

.h237-checkout-panel {
    max-width: 520px;
    margin: 0 auto;
    background: var(--h237-white);
    border-radius: var(--h237-radius);
    padding: 26px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.h237-checkout-panel h2 { margin-top: 0; font-size: 1.2rem; }
.h237-provider-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.h237-provider-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 10px; border-radius: 8px; border: 2px solid #e2e2e2;
    background: var(--h237-white); font-weight: 700; cursor: pointer; font-size: 0.92rem;
}
.h237-provider-btn.is-active { border-color: var(--h237-orange); background: #fff6ee; }
.h237-checkout-status { margin-top: 16px; font-size: 0.92rem; }
.h237-checkout-status.pending { color: var(--h237-orange); }
.h237-checkout-status.error { color: #a41c1c; }
.h237-checkout-status.success { color: #0f6b30; }
.h237-spinner {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #ddd; border-top-color: var(--h237-orange);
    animation: h237-spin 0.8s linear infinite; vertical-align: -2px; margin-right: 6px;
}
@keyframes h237-spin { to { transform: rotate(360deg); } }

/* --- Mon compte --- */
.h237-account-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .h237-account-grid { grid-template-columns: 1fr; } }
.h237-account-card {
    background: var(--h237-white);
    border-radius: var(--h237-radius);
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}
.h237-account-card h2, .h237-account-card h3 { margin-top: 0; }
.h237-status-pill {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
}
.h237-status-pill.active { background: #eaf7ee; color: #0f6b30; }
.h237-status-pill.inactive { background: #f1f1f1; color: #6B7280; }
.h237-simple-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.h237-simple-table th, .h237-simple-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eee; }
.h237-simple-table th { color: var(--h237-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }