/* ================================================
   PAGE TARIFS (/pricing) & PAGE DE SUCCÈS (/subscribe/success)
   Styles du lot "Tunnel de paiement" : chargés sur toutes les pages,
   donc tous les sélecteurs sont préfixés (pricing-*, subscription-success*).
   Les couleurs viennent de root.css (variables clair/sombre).
   ================================================ */

/* ---------- Bandeaux du haut de page (reprise, paiement annulé) ---------- */
.pricing-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    width: calc(100% - 2rem);
    max-width: 640px;
    margin: 1.5rem auto 0;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: var(--background-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: left;

    > i {
        flex-shrink: 0;
        font-size: 1.6rem;
        line-height: 1;
        margin-top: 0.15rem;
    }
}

.pricing-banner-content {
    flex: 1;
    min-width: 0;
}

.pricing-banner-title {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.pricing-banner-text {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pricing-banner-action {
    margin-top: 0.9rem;

    form {
        margin: 0;
    }

    .btn-pricing {
        max-width: 100%;
        white-space: normal;
    }
}

.pricing-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.6rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

/* Reprise après inscription : "Votre compte est prêt" */
.pricing-banner--resume {
    border-color: var(--success-color);
    background: var(--background-success);

    > i {
        color: var(--success-color);
    }
}

/* Retour depuis Stripe sans paiement */
.pricing-banner--info {
    border-color: var(--info-color);
    background: var(--background-info);

    > i {
        color: var(--info-color);
    }
}

/* ---------- Cartes de formules ---------- */

/* Formule demandée (?plan=) : mise en avant */
.pricing-card.is-highlighted {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(255, 91, 76, 0.18), 0 8px 30px rgba(0, 0, 0, 0.15);
    animation: pricingHighlightPulse 1.2s ease-out 2;
}

@keyframes pricingHighlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 91, 76, 0.45), 0 8px 30px rgba(0, 0, 0, 0.15);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(255, 91, 76, 0), 0 8px 30px rgba(0, 0, 0, 0.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-card.is-highlighted {
        animation: none;
    }
}

/* Étiquette "Votre choix" (coin supérieur droit, n'empiète pas sur le badge central) */
.pricing-card-choice {
    position: absolute;
    top: -12px;
    right: 1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Pastille "7 jours gratuits" sous le prix */
.pricing-trial-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.5rem 0 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 2rem;
    background: var(--background-success);
    color: var(--success-color-dark);
    font-size: 0.85rem;
    font-weight: 700;

    i {
        line-height: 1;
    }
}

/* "Tout ce qu'offre Free, plus :" */
.pricing-features-intro {
    margin: 1rem 0 -1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

/* Limitation Free (publicités) : ni avantage, ni fonction absente */
.features-list li.pricing-limitation {
    color: var(--text-secondary);

    i {
        color: var(--warning-color);
    }
}

/* Mention légale de l'essai sous le bouton : lisible, pas en petit gris pâle */
.payment-info.pricing-trial-notice {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-primary);
    line-height: 1.45;
}

/* Changement de formule : l'ancienne est résiliée */
.pricing-plan-note {
    display: block;
    max-width: 32ch;
    margin: 0.6rem auto 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}

/* Bouton avec icône cadeau */
.pricing-card .btn-pricing i {
    line-height: 1;
}

/* Téléphones : un libellé long (« Essayer 7 jours gratuits ») passe à la ligne au lieu d'élargir
   la carte, et donc la page, au-delà de l'écran (root.css impose white-space: nowrap aux .btn-pricing).
   Réservé aux petits écrans : au-delà, le libellé doit rester sur une seule ligne. */
@media (max-width: 480px) {
    .pricing-card .btn-pricing {
        max-width: 100%;
        padding-inline: 1.25rem;
        letter-spacing: 0;
        white-space: normal;
    }
}

/* Liens dans la FAQ (CGV) */
.pricing-faq .faq-item p a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* CTA final : lien secondaire */
.pricing-cta-secondary {
    margin: 1rem 0 0;

    a {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: underline;
    }
}

@media (max-width: 600px) {
    .pricing-banner {
        padding: 0.9rem 1rem;

        > i {
            font-size: 1.3rem;
        }
    }

    .pricing-card-choice {
        right: 0.5rem;
    }
}

/* ================================================
   PAGE DE SUCCÈS : essai démarré / paiement confirmé / activation en cours
   ================================================ */
.subscription-success {
    .success-message strong {
        color: var(--text-primary);
    }

    .success-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }

    .success-footer {
        margin-top: 1.5rem;
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }
}

/* "Aucun débit avant la fin de l'essai" */
.subscription-success-reassurance {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    margin: -1rem 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);

    i {
        flex-shrink: 0;
        color: var(--success-color);
        margin-top: 0.2rem;
    }
}

/* Activation en attente du webhook / paiement en cours de traitement */
.subscription-success-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border-left: 4px solid var(--warning-color);
    background: var(--background-warning);
    color: var(--text-primary);
    text-align: left;

    > i {
        flex-shrink: 0;
        font-size: 1.4rem;
        color: var(--warning-color);
        line-height: 1;
        margin-top: 0.1rem;
    }

    strong {
        display: block;
        margin-bottom: 0.25rem;
    }

    p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    a {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: underline;
    }
}

.subscription-success-notice--processing {
    border-left-color: var(--info-color);
    background: var(--background-info);

    > i {
        color: var(--info-color);
    }
}

@media (max-width: 600px) {
    .subscription-success .success-card {
        padding: 2rem 1.25rem;
    }

    .subscription-success .success-actions {
        flex-direction: column;
        align-items: stretch;
    }
}