:root {
        --pricing-bg: #070707;
        --pricing-panel: rgba(255, 255, 255, 0.04);
        --pricing-panel-strong: rgba(255, 255, 255, 0.08);
        --pricing-border: rgba(255, 255, 255, 0.18);
        --pricing-text: #f7f3ea;
        --pricing-muted: #c9c1b3;
        --pricing-gold: #dda959;
        --pricing-gold-soft: rgba(221, 169, 89, 0.18);
        --pricing-shadow: rgba(0, 0, 0, 0.36);
    }

    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        overflow-x: hidden;
    }

    .pricing-section,
    .pricing-section * {
        box-sizing: border-box;
    }

    /* =========================================================
       EN-TÊTE DES FORMULES
       ========================================================= */

    .pricing-heading {
        max-width: 900px;
        margin: 2.5rem auto 0;
        text-align: center;
    }

    .pricing-heading h2 {
        margin: 0 0 1.2rem;
        color: var(--pricing-gold);
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .pricing-heading p {
        margin: 0;
        color: var(--pricing-text);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* =========================================================
       SECTION ET CONTENEUR
       ========================================================= */

    .pricing-section {
        color: var(--pricing-text);
        padding: 2rem 1.25rem 1.4rem;
        font-family: 'Sora', sans-serif !important;
    }

    .pricing-wrapper {
        width: min(1680px, 100%);
        margin: 0 auto;
    }

    .pricing-kicker {
        margin: 0 0 0.65rem;
        color: var(--pricing-gold);
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .pricing-intro {
        max-width: 680px;
        margin: 1rem 0 2.2rem;
        color: var(--pricing-muted);
        font-size: 1rem;
        line-height: 1.7;
    }

    /* =========================================================
       GRILLE
       ========================================================= */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    align-items: stretch;
}

    /* =========================================================
       CARTES
       ========================================================= */

    .pricing-card {
        position: relative;
        display: grid;
        grid-template-rows: 12.1rem auto 1fr;
        min-width: 0;
        min-height: 100%;
        padding: 1.45rem;
        overflow: hidden;

        border: 1px solid rgba(221, 169, 89, 0.25);
        border-radius: 8px;

        background:
            radial-gradient(
                circle at 18% 12%,
                rgba(221, 169, 89, 0.16),
                transparent 28%
            ),
            linear-gradient(
                135deg,
                rgba(221, 169, 89, 0.10) 0%,
                transparent 24%
            ),
            linear-gradient(
                135deg,
                transparent 0%,
                transparent 42%,
                rgba(221, 169, 89, 0.13) 48%,
                transparent 70%
            ),
            rgba(255, 255, 255, 0.04);

        box-shadow:
            0 1.5rem 3rem rgba(0, 0, 0, 0.36),
            inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    /* =========================================================
       TITRES ET DESCRIPTIONS
       ========================================================= */

.pricing-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pricing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.45rem;
    height: 2.45rem;
    margin: 0 auto 0.65rem;

    border: 1px solid rgba(221, 169, 89, 0.72);
    border-radius: 50%;

    color: var(--pricing-gold);
    background: rgba(221, 169, 89, 0.06);
    box-shadow:
        0 0 1.25rem rgba(221, 169, 89, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.pricing-icon svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.pricing-card-header h3 {
    margin: 0 0 0.8rem;
    color: var(--pricing-text);
    font-size: 1.10rem;
    line-height: 1.3;
    letter-spacing: -0.1px;
    text-wrap: balance;
}

.pricing-card-header h3::after {
    content: "";
    display: block;
    width: 1.45rem;
    height: 1px;
    margin: 0.5rem auto 0;
    background: var(--pricing-gold);
}

    .pricing-card-header p {
        min-height: 0;
        margin: 0;
        color: var(--pricing-muted);
        font-size: 0.95rem;
        line-height: 1.55;
    }

    /* =========================================================
       PRIX
       ========================================================= */

    .pricing-price {
        margin: 0 0 1.5rem;
        padding: 1.05rem 0 0.95rem;
        text-align: center;

        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pricing-price span {
        display: block;
        color: var(--pricing-muted);
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .pricing-price strong {
        display: block;
        margin: 0.35rem 0 0.8rem;
        color: var(--pricing-text);
        font-size: clamp(1.8rem, 4vw, 2.55rem);
        line-height: 1;
    }

    .pricing-recurrence {
        display: grid;
        margin-top: 0.35rem;
        padding-top: 0.65rem;
        text-align: center;

        border-top: 1px solid rgba(221, 169, 89, 0.2);
    }

    .pricing-recurrence p {
        margin: 0;
        color: var(--pricing-muted);
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .pricing-maintenance {
        color: var(--pricing-text) !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

    .pricing-maintenance span {
        display: block;
    }

    /* =========================================================
       LISTE DES FONCTIONNALITÉS
       ========================================================= */

    .pricing-features {
        display: grid;
        align-content: start;
        gap: 0.95rem;
        margin: 0.65rem 0 1.6rem;
        padding: 0;
        list-style: none;
    }

    .pricing-features li {
        position: relative;
        min-height: 2.9rem;
        padding-left: 1.45rem;
        color: #eee8dd;
        font-size: 0.93rem;
        line-height: 1.45;
    }

    .pricing-features li::before {
        content: "";
        position: absolute;
        top: 0.42rem;
        left: 0;

        width: 0.55rem;
        height: 0.55rem;

        border-radius: 50%;
        background: var(--pricing-gold);
    }

    /* =========================================================
       BOUTONS
       ========================================================= */

    .pricing-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        min-height: 2.8rem;
        margin-top: auto;
        padding: 0.85rem 1rem;

        border: 1px solid rgba(221, 169, 89, 0.72);
        border-radius: 6px;

        color: #070707;
        background: var(--pricing-gold);

        font-size: 0.9rem;
        font-weight: 800;
        text-align: center;
        text-decoration: none;

        transition:
            transform 160ms ease,
            background 160ms ease,
            box-shadow 160ms ease;
    }

    .pricing-button:hover,
    .pricing-button:focus-visible {
        background: #efc078;
        box-shadow: 0 0.75rem 1.5rem rgba(221, 169, 89, 0.22);
        transform: translateY(-1px);
    }

    .pricing-button:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
    }

    /* =========================================================
       MENTIONS SOUS LES FORMULES
       ========================================================= */

    .pricing-notice {
        max-width: 1000px;
        margin: 2.35rem auto 0;

        color: var(--pricing-muted);
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.65;
        text-align: center;
    }

    .pricing-notice span {
        display: block;
        margin-top: 1.35rem;
    }

    /* =========================================================
       TABLETTES ET PETITS ÉCRANS : 2 CARTES PAR LIGNE
       ========================================================= */

    @media (max-width: 1200px) {
        .pricing-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .pricing-card {
            grid-template-rows: 11.75rem auto 1fr;
        }

        .pricing-card-header p {
            min-height: 0;
        }
    }

    /* =========================================================
       MOBILE : 1 CARTE PAR LIGNE
       ========================================================= */

    @media (max-width: 768px) {
        html,
        body {
            background-color: #000;
            overflow-x: hidden;
        }

        .page-title {
            font-size: 2.25rem !important;
        }

        .pricing-heading {
            margin-top: 2rem;
            padding: 0 1rem;
        }

        .pricing-heading h2 {
            font-size: 1.5rem;
        }

        .pricing-heading p {
            font-size: 1rem;
        }

        #contact .about-text > p[style] {
            max-width: 34rem;
            padding: 0 0.6rem;
            font-size: 1.08rem !important;
            line-height: 1.65 !important;
        }

        #contact .about-text .btn-primaryb {
            max-width: calc(100vw - 4rem);
            padding: 0.9rem 1.35rem !important;
            font-size: 1.2rem !important;
            line-height: 1.15 !important;
            white-space: normal;
            text-align: center;
        }

        .pricing-section {
            padding: 2.2rem 0.75rem 1.25rem !important;
        }

        .pricing-grid {
            grid-template-columns: 1fr;
        }

        .pricing-card {
            padding: 2rem 1.7rem !important;
            display: flex;
            flex-direction: column;
        }

        .pricing-card-header {
            min-height: 0;
            margin-bottom: 1rem;
        }

        .pricing-icon {
            width: 3.2rem !important;
            height: 3.2rem !important;
            margin-bottom: 0.9rem !important;
        }

        .pricing-icon svg {
            width: 1.65rem !important;
            height: 1.65rem !important;
        }

        .pricing-card-header h3 {
            font-size: 2rem !important;
            line-height: 1.25 !important;
        }

        .pricing-card-header p {
            min-height: auto;
            font-size: 1.42rem !important;
            line-height: 1.6 !important;
        }

        .pricing-price span {
            font-size: 1.3rem !important;
            line-height: 1.45 !important;
        }

        .pricing-recurrence p {
            font-size: 1.12rem !important;
            line-height: 1.35 !important;
        }

        .pricing-price .pricing-recurrence .pricing-maintenance {
            font-size: 1.65rem !important;
            line-height: 1.3 !important;
        }

        .pricing-price strong {
            font-size: 3.45rem !important;
        }

        .pricing-features {
            gap: 1.15rem !important;
            margin-top: 1.1rem !important;
        }

        .pricing-features li {
            min-height: 0;
            padding-left: 1.9rem !important;
            font-size: 1.38rem !important;
            line-height: 1.6 !important;
        }

        .pricing-features li::before {
            top: 0.55rem !important;
            width: 0.78rem !important;
            height: 0.78rem !important;
        }

        .pricing-button {
            min-height: 4.2rem !important;
            padding: 1.1rem 1.2rem !important;
            font-size: 1.35rem !important;
        }

        .pricing-notice {
            padding: 0 0.75rem;
            margin-top: 2.1rem;
            font-size: 0.95rem;
        }

    }

    /* =========================================================
       PETITS MOBILES
       ========================================================= */

    @media (max-width: 560px) {
        .pricing-section {
            padding: 2rem 0.75rem 1.15rem !important;
        }

        .pricing-card {
            padding: 1.75rem 1.4rem !important;
        }

        .pricing-card-header h3 {
            font-size: 1.9rem !important;
        }

        .pricing-card-header p {
            font-size: 1.28rem !important;
        }

        #contact .about-text > p[style] {
            font-size: 1rem !important;
        }

        #contact .about-text .btn-primaryb {
            padding: 0.82rem 1.15rem !important;
            font-size: 1.08rem !important;
        }

        .pricing-price strong {
            font-size: 3rem !important;
        }

        .pricing-features li {
            font-size: 1.26rem !important;
        }

        .pricing-recurrence p {
            font-size: 1.06rem !important;
        }

        .pricing-price .pricing-recurrence .pricing-maintenance {
            font-size: 1.55rem !important;
            line-height: 1.3 !important;
        }

        .pricing-button {
            width: 100%;
            font-size: 1.2rem !important;
        }
    }

    /* =========================================================
       THÈMES : CORRECTIONS FINALES APRÈS DESIGN.CSS
       ========================================================= */

    [data-theme="dark"] .pricing-icon {
        color: var(--pricing-gold) !important;
        border-color: rgba(221, 169, 89, 0.78) !important;
        background: rgba(221, 169, 89, 0.08) !important;
    }

    [data-theme="dark"] .pricing-icon svg,
    [data-theme="dark"] .pricing-icon svg * {
        stroke: currentColor !important;
    }

    [data-theme="light"] .pricing-icon {
        color: #000 !important;
        border-color: rgba(221, 169, 89, 0.9) !important;
        background: rgba(221, 169, 89, 0.08) !important;
    }

    [data-theme="light"] .pricing-icon svg,
    [data-theme="light"] .pricing-icon svg * {
        stroke: #000 !important;
    }

    [data-theme="light"] .pricing-card-header h3::after {
        background: #000 !important;
    }

    [data-theme="light"] .pricing-price {
        border-top-color: rgba(0, 0, 0, 0.16) !important;
        border-bottom-color: rgba(0, 0, 0, 0.16) !important;
    }

    [data-theme="light"] .pricing-recurrence {
        border-top-color: rgba(0, 0, 0, 0.2) !important;
    }

    @media (max-width: 768px) {
        .pricing-card .pricing-price .pricing-recurrence p.pricing-maintenance {
            font-size: 18px !important;
            line-height: 1.35 !important;
            font-weight: 800 !important;
        }
    }

    @media (max-width: 560px) {
        .pricing-card .pricing-price .pricing-recurrence p.pricing-maintenance {
            font-size: 17px !important;
        }
    }