/* =========================================
   Pronos Access — Styles front-end
   ========================================= */

/* --- Message d'accès refusé --- */
.pronos-acces-message {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin: 2rem 0;
    font-family: inherit;
}

.pronos-acces-message__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.pronos-acces-message__titre {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    color: #1a1a2e;
}

.pronos-acces-message__texte {
    color: #555;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.pronos-acces-message__actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Boutons --- */
.pronos-btn {
    display: inline-block;
    padding: .65rem 1.5rem;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: opacity .2s, transform .1s;
    line-height: 1;
}

.pronos-btn:hover {
    opacity: .85;
    transform: translateY(-1px);
    text-decoration: none;
}

.pronos-btn--primary {
    background: #2563eb;
    color: #fff !important;
    border-color: #2563eb;
}

.pronos-btn--secondary {
    background: transparent;
    color: #2563eb !important;
    border-color: #2563eb;
}

/* --- Formulaires --- */
.pronos-form-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.pronos-form-wrap h2 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #111;
}

.pronos-form__field {
    margin-bottom: 1.1rem;
}

.pronos-form__field label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .92rem;
    color: #374151;
}

.pronos-form__field label span {
    color: #c0392b;
}

.pronos-form__field input[type="text"],
.pronos-form__field input[type="email"],
.pronos-form__field input[type="password"] {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color .2s;
    box-sizing: border-box;
    background: #fafafa;
}

.pronos-form__field input:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
}

.pronos-form__field small {
    color: #888;
    font-size: .82rem;
    display: block;
    margin-top: .25rem;
}

.pronos-form__submit {
    margin-top: 1.4rem;
}

.pronos-form__submit .pronos-btn {
    width: 100%;
    text-align: center;
    font-size: 1rem;
}

.pronos-form__link {
    margin-top: 1rem;
    text-align: center;
    font-size: .9rem;
    color: #666;
}

/* --- Alertes flash --- */
.pronos-alert {
    padding: .85rem 1.1rem;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    font-size: .95rem;
    font-weight: 500;
}

.pronos-alert--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.pronos-alert--success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

/* --- Page Mon Compte --- */
.pronos-compte {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.pronos-compte h2 {
    margin-top: 0;
}

.pronos-compte__info p {
    margin: .5rem 0;
    font-size: 1rem;
}

/* --- Badges --- */
.pronos-badge {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 600;
}

.pronos-badge--ok {
    background: #d1fae5;
    color: #065f46;
}

.pronos-badge--pending {
    background: #fef3c7;
    color: #92400e;
}

/* --- CTA validation (page Mon Compte) --- */
.pronos-cta-validation {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    margin-top: 1.2rem;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

.pronos-cta-validation:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,99,235,.45);
    text-decoration: none;
    color: #fff !important;
}

.pronos-cta-validation__emoji {
    font-size: 2rem;
    flex-shrink: 0;
}

.pronos-cta-validation__texte {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.pronos-cta-validation__texte strong {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.pronos-cta-validation__texte small {
    font-size: .82rem;
    color: rgba(255,255,255,.8);
}

.pronos-cta-validation__fleche {
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
    opacity: .8;
}

/* --- Page Validation [pronos_validation] --- */
.pv-wrap { font-family: inherit; padding: 1.5rem 0; max-width: 720px; }
.pv-hero { text-align: center; margin-bottom: 2rem; }
.pv-hero h2 { font-size: 1.6rem; font-weight: 700; color: #2d2d2d; margin: 0 0 .75rem; }
.pv-hero p { font-size: 1rem; color: #555; line-height: 1.7; margin: 0; }
.pv-steps { display: flex; gap: 12px; margin-bottom: 2rem; }
.pv-step { flex: 1; background: #f5f5f5; border-radius: 8px; padding: 1rem; display: flex; gap: 10px; align-items: flex-start; }
.pv-step-num { width: 28px; height: 28px; border-radius: 50%; background: #2d2d2d; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-step p { font-size: 13px; color: #666; margin: 0; line-height: 1.5; }
.pv-step strong { font-size: 13px; font-weight: 700; color: #2d2d2d; display: block; margin-bottom: 3px; }
.pv-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #888; text-transform: uppercase; margin-bottom: 1rem; }
.pv-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }
.pv-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.pv-card:hover { border-color: #2e7423; box-shadow: 0 2px 10px rgba(46,116,35,.1); }
.pv-rank { width: 32px; height: 32px; border-radius: 50%; background: #eee; font-size: 12px; font-weight: 700; color: #666; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-rank.gold { background: #e4c12b; color: #2d2d2d; }
.pv-logo-box { width: 90px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pv-logo-box img { max-width: 90px; max-height: 44px; object-fit: contain; display: block; }
.pv-card-mid { flex: 1; }
.pv-card-mid strong { font-size: 15px; font-weight: 700; color: #2d2d2d; display: block; }
.pv-card-mid small { font-size: 13px; color: #777; }
.pv-bonus { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: #2e7423; padding: 5px 11px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
.pv-arrow { color: #2e7423; font-size: 20px; flex-shrink: 0; }
.pv-note { background: #f8f8f8; border-radius: 8px; padding: .9rem 1.1rem; font-size: 13px; color: #666; line-height: 1.6; }
.pv-note a { color: #2e7423; }
@media (max-width: 560px) {
    .pv-steps { flex-direction: column; }
    .pv-logo-box { width: 60px; }
    .pv-logo-box img { max-width: 60px; }
    .pv-bonus { display: none; }
}