/* =========================================================
   WPMATION PRICING STYLES V3.0
   À placer dans: wpmation-child/assets/css/pricing.css
   ========================================================= */

.wpmation-pricing {
    --navy:#172b49;
    --blue:#2b4876;
    --blue2:#426a9e;
    --text:#243247;
    --muted:#69778b;
    --border:#dfe7f1;
    --soft:#f6f9fd;
    --green:#16a36a;
    --green-dark:#0b7d4d;
    --purple:#7657ff;
    --orange:#ff8a3d;
    --pink:#ec4899;
    --cyan:#06b6d4;

    width:100%;
    overflow:hidden;
    background:#fff;
    color:var(--text);
}

.wpmation-pricing *,
.wpmation-pricing *::before,
.wpmation-pricing *::after {
    box-sizing:border-box;
}

.wpm-pricing-container {
    width:min(1460px, calc(100% - 40px));
    margin:auto;
}

/* =========================================================
   HERO
   ========================================================= */

.wpm-pricing-hero {
    position:relative;
    overflow:hidden;
    padding:28px 20px 42px;
    text-align:center;
    background:
        radial-gradient(circle at 10% 10%,rgba(118,87,255,.13),transparent 28%),
        radial-gradient(circle at 90% 30%,rgba(6,182,212,.11),transparent 28%),
        radial-gradient(circle at 50% 100%,rgba(22,163,106,.08),transparent 35%),
        linear-gradient(180deg,#f8faff 0%,#fff 100%);
}

.wpm-finance-bg {
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.wpm-finance-icon {
    position:absolute;
    color:var(--blue);
    opacity:.08;
    font-weight:900;
    animation:wpmFloat 8s ease-in-out infinite;
}

@keyframes wpmFloat {
    0%,100% { transform:translateY(0) rotate(-4deg); }
    50% { transform:translateY(-18px) rotate(5deg); }
}

.wpm-pricing-hero-content {
    position:relative;
    z-index:2;
}

.wpm-pricing-eyebrow {
    display:inline-flex;
    padding:7px 14px;
    margin-bottom:13px;
    border-radius:100px;
    background:rgba(43,72,118,.08);
    color:var(--blue);
    font-size:12px;
    font-weight:850;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.wpm-pricing-hero h1 {
    max-width:950px;
    margin:0 auto 14px !important;
    color:var(--navy) !important;
    font-size:clamp(42px,5.4vw,70px) !important;
    line-height:1.02 !important;
    font-weight:850 !important;
    letter-spacing:-.05em;
}

.wpm-pricing-hero-text {
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    font-size:clamp(18px,1.8vw,21px);
    line-height:1.55;
}

/* =========================================================
   TOGGLE FACTURATION
   ========================================================= */

.wpm-billing-wrap {
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:24px;
}

.wpm-billing-toggle {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    width:min(820px,100%);
    padding:3px;
    border:1px solid #dde2e9;
    border-radius:999px;
    background:#f6f7f8;
    box-shadow:
        inset 0 1px 2px rgba(23,43,73,.025),
        0 4px 12px rgba(23,43,73,.035);
}

.wpm-billing-btn {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:40px;
    padding:7px 16px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--navy);
    cursor:pointer;
    font:inherit;
    font-size:15px;
    line-height:1;
    font-weight:650;
    transition:
        background .25s ease,
        box-shadow .25s ease,
        color .25s ease;
}

.wpm-billing-btn.is-active {
    background:#fff;
    color:#111827;
    box-shadow:
        0 1px 3px rgba(23,43,73,.12),
        0 2px 8px rgba(23,43,73,.06);
}

.wpm-billing-saving {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 9px;
    border-radius:999px;
    background:linear-gradient(135deg,#4777ff,#6c8cff);
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    box-shadow:0 3px 8px rgba(71,119,255,.22);
}

/* =========================================================
   PLANS GRID
   ========================================================= */

.wpm-pricing-plans {
    padding:42px 0 85px;
    scroll-margin-top:30px;
}

.wpm-plans-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.wpm-plan {
    --accent:var(--blue);
    position:relative;
    display:flex;
    flex-direction:column;
    padding:2px;
    border-radius:23px;
    background:
        linear-gradient(120deg, var(--accent), var(--purple), var(--cyan), var(--accent));
    background-size:300% 300%;
    animation:wpmBorderFlow 7s ease infinite;
    box-shadow:0 18px 55px rgba(23,43,73,.08);
    transition:transform .3s ease, box-shadow .3s ease;
}

.wpm-plan:nth-child(1) { --accent:#426a9e; }
.wpm-plan:nth-child(2) { --accent:#7657ff; }
.wpm-plan:nth-child(3) { --accent:#16a36a; }
.wpm-plan:nth-child(4) { --accent:#ff7a45; }

@keyframes wpmBorderFlow {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

.wpm-plan:hover {
    transform:translateY(-8px);
    box-shadow:0 30px 75px rgba(23,43,73,.14);
}

.wpm-plan-inner {
    display:flex;
    flex:1;
    flex-direction:column;
    padding:34px 27px;
    border-radius:21px;
    background:rgba(255,255,255,.98);
}

.wpm-plan-featured {
    transform:translateY(-10px);
    box-shadow:0 28px 75px rgba(22,163,106,.17);
}

.wpm-plan-featured:hover {
    transform:translateY(-16px);
}

.wpm-plan-badge {
    position:absolute;
    z-index:5;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    padding:8px 19px;
    border-radius:100px;
    background:linear-gradient(135deg,#19b978,#0d8b58);
    color:#fff;
    box-shadow:0 8px 22px rgba(22,163,106,.28);
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    white-space:nowrap;
    text-transform:uppercase;
}

.wpm-plan-name {
    margin:0 0 8px !important;
    color:var(--navy) !important;
    font-size:27px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
}

.wpm-plan-description {
    min-height:65px;
    margin:0 0 22px;
    color:var(--muted);
    font-size:14px;
    line-height:1.55;
}

.wpm-plan-price {
    margin-bottom:5px;
}

.wpm-price-main {
    color:var(--navy);
    font-size:47px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.05em;
}

.wpm-price-period {
    color:var(--muted);
    font-size:13px;
}

.wpm-plan-billing {
    min-height:39px;
    margin-top:7px;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.wpm-plan-saving {
    display:none;
    margin:11px 0 2px;
    padding:9px 11px;
    border-radius:9px;
    background:#e9f9f2;
    color:var(--green-dark);
    font-size:12px;
    font-weight:850;
}

.wpmation-pricing.is-annual .wpm-plan-saving {
    display:block;
}

.wpm-plan-cta {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    margin:23px 0;
    padding:13px;
    border:0;
    border-radius:11px;
    background:var(--navy);
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px;
    font-weight:850;
    transition:.25s ease;
    cursor:pointer;
}

.wpm-plan-cta:hover {
    transform:translateY(-2px);
    background:var(--blue);
    box-shadow:0 10px 25px rgba(43,72,118,.2);
}

.wpm-plan-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wpm-plan-cta.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.wpm-plan-featured .wpm-plan-cta {
    background:linear-gradient(135deg,#19b978,#0d8b58);
}

.wpm-plan-list {
    margin:0;
    padding:0;
    list-style:none;
}

.wpm-plan-list li {
    position:relative;
    padding:9px 0 9px 24px;
    border-bottom:1px solid #edf1f6;
    color:var(--text);
    font-size:13px;
    line-height:1.45;
}

.wpm-plan-list li::before {
    content:"✓";
    position:absolute;
    left:0;
    color:var(--green);
    font-weight:900;
}

.wpm-plan-list li:last-child {
    border:0;
}

/* =========================================================
   OUTILS
   ========================================================= */

.wpm-common {
    padding:85px 20px;
    background:
        radial-gradient(circle at 5% 20%,rgba(118,87,255,.09),transparent 25%),
        radial-gradient(circle at 95% 80%,rgba(6,182,212,.09),transparent 25%),
        #f7f9fd;
}

.wpm-section-header {
    max-width:850px;
    margin:0 auto 48px;
    text-align:center;
}

.wpm-section-header h2 {
    margin:0 0 16px !important;
    color:var(--navy) !important;
    font-size:clamp(34px,4vw,50px) !important;
    line-height:1.08 !important;
    font-weight:850 !important;
    letter-spacing:-.04em;
}

.wpm-section-header p {
    margin:0;
    color:var(--muted);
    font-size:17px;
    line-height:1.65;
}

.wpm-benefits-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:17px;
}

.wpm-benefit {
    padding:27px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:17px;
    backdrop-filter:blur(12px);
    box-shadow:0 14px 40px rgba(23,43,73,.06);
}

.wpm-benefit:nth-child(4n+1) { background:rgba(118,87,255,.09); }
.wpm-benefit:nth-child(4n+2) { background:rgba(6,182,212,.09); }
.wpm-benefit:nth-child(4n+3) { background:rgba(22,163,106,.09); }
.wpm-benefit:nth-child(4n+4) { background:rgba(255,138,61,.10); }

.wpm-benefit-icon {
    margin-bottom:14px;
    font-size:28px;
}

.wpm-benefit h3 {
    margin:0 0 8px !important;
    color:var(--navy) !important;
    font-size:18px !important;
    font-weight:850 !important;
}

.wpm-benefit p {
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.wpm-back-pricing {
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.wpm-back-pricing a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border:1px solid rgba(43,72,118,.16);
    border-radius:100px;
    background:#fff;
    color:var(--blue) !important;
    box-shadow:0 8px 25px rgba(23,43,73,.06);
    font-size:13px;
    font-weight:850;
    text-decoration:none !important;
    transition:.25s ease;
}

.wpm-back-pricing a:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(23,43,73,.11);
}

/* =========================================================
   DÉCOUVERTE
   ========================================================= */

.wpm-discovery {
    padding:85px 20px;
}

.wpm-discovery-box {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:50px;
    padding:52px;
    border-radius:25px;
    background:
        radial-gradient(circle at 100% 0%,rgba(255,255,255,.1),transparent 30%),
        linear-gradient(135deg,#172b49,#2b4876);
    color:#fff;
}

.wpm-discovery-box h2 {
    margin:0 0 16px !important;
    color:#fff !important;
    font-size:clamp(34px,4vw,50px) !important;
    line-height:1.08 !important;
    font-weight:850 !important;
}

.wpm-discovery-box p {
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:17px;
    line-height:1.7;
}

.wpm-discovery-steps {
    display:grid;
    gap:13px;
}

.wpm-discovery-step {
    padding:20px 22px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:13px;
    background:rgba(255,255,255,.07);
}

.wpm-discovery-step strong {
    display:block;
    margin-bottom:5px;
    font-size:17px;
}

.wpm-discovery-step span {
    color:rgba(255,255,255,.73);
    font-size:14px;
    line-height:1.6;
}

/* =========================================================
   RÈGLES
   ========================================================= */

.wpm-rules {
    padding:85px 20px;
}

.wpm-rules-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.wpm-rule {
    padding:30px;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
    box-shadow:0 12px 35px rgba(23,43,73,.045);
}

.wpm-rule strong {
    display:block;
    margin-bottom:9px;
    color:var(--navy);
    font-size:18px;
}

.wpm-rule p {
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

/* =========================================================
   PAIEMENTS
   ========================================================= */

.wpm-trust {
    padding:85px 20px;
    background:var(--soft);
}

.wpm-trust-box {
    max-width:1050px;
    margin:auto;
    text-align:center;
}

.wpm-payment-methods {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin:30px 0;
}

.wpm-payment-method {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:125px;
    padding:13px 20px;
    border-radius:10px;
    font-size:14px;
    font-weight:850;
    box-shadow:0 8px 22px rgba(23,43,73,.09);
}

.wpm-payment-card {
    background:linear-gradient(135deg,#2459c4,#163a8c);
    color:#fff;
}

.wpm-payment-google {
    background:linear-gradient(110deg,rgba(66,133,244,.16),rgba(234,67,53,.13),rgba(251,188,5,.16),rgba(52,168,83,.15));
    color:#202124;
    border:1px solid rgba(66,133,244,.18);
}

.wpm-payment-apple {
    background:#111;
    color:#fff;
}

.wpm-payment-link {
    background:#635bff;
    color:#fff;
}

.wpm-legal-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 22px;
    margin-top:28px;
}

.wpm-legal-links a {
    color:var(--blue) !important;
    font-size:13px;
    font-weight:750;
    text-decoration:underline !important;
    text-underline-offset:3px;
}

.wpm-legal-text {
    max-width:850px;
    margin:24px auto 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}

/* =========================================================
   FAQ
   ========================================================= */

.wpm-pricing-faq {
    padding:85px 20px;
}

.wpm-faq-list {
    max-width:950px;
    margin:auto;
}

.wpm-faq-list details {
    margin-bottom:11px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
}

.wpm-faq-list summary {
    position:relative;
    padding:20px 55px 20px 22px;
    cursor:pointer;
    color:var(--navy);
    font-weight:800;
    list-style:none;
}

.wpm-faq-list summary::-webkit-details-marker {
    display:none;
}

.wpm-faq-list summary::after {
    content:"+";
    position:absolute;
    right:22px;
    color:var(--blue);
    font-size:22px;
}

.wpm-faq-list details[open] summary::after {
    content:"−";
}

.wpm-faq-answer {
    padding:0 22px 22px;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.wpm-notification {
    position:fixed;
    top:20px;
    right:20px;
    max-width:400px;
    padding:16px 20px;
    border-radius:11px;
    background:#fff;
    box-shadow:0 10px 40px rgba(23,43,73,.2);
    z-index:1000;
    animation:slideIn 0.3s ease;
}

.wpm-notification.error {
    border-left:4px solid #dc2626;
}

.wpm-notification.success {
    border-left:4px solid #16a36a;
}

@keyframes slideIn {
    from {
        transform:translateX(400px);
        opacity:0;
    }
    to {
        transform:translateX(0);
        opacity:1;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1180px) {
    .wpm-plans-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .wpm-plan-featured,
    .wpm-plan-featured:hover {
        transform:none;
    }

    .wpm-benefits-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:800px) {
    .wpm-discovery-box,
    .wpm-rules-grid {
        grid-template-columns:1fr;
    }

    .wpm-discovery-box {
        padding:38px 28px;
    }
}

@media(max-width:620px) {
    .wpm-pricing-container {
        width:calc(100% - 28px);
    }

    .wpm-pricing-hero {
        padding:22px 14px 38px;
    }

    .wpm-plans-grid,
    .wpm-benefits-grid {
        grid-template-columns:1fr;
    }

    .wpm-billing-toggle {
        width:100%;
    }

    .wpm-billing-btn {
        min-height:42px;
        padding:7px 8px;
        gap:5px;
        font-size:13px;
    }

    .wpm-billing-saving {
        padding:4px 6px;
        font-size:9px;
    }
}

@media(max-width:400px) {
    .wpm-billing-btn {
        font-size:12px;
    }

    .wpm-billing-saving {
        display:none;
    }

    .wpm-notification {
        max-width:calc(100% - 40px);
        right:20px;
        left:20px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .wpm-finance-icon,
    .wpm-plan {
        animation:none;
    }
}