.hero-container-offers {

    width: 100%;
    max-width: 1000px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

}

/* ==========================================
   STREAMING CARD
========================================== */

.streaming-card {

    margin-top: 10px;

    width: 50%;

    padding: 20px;

    background: var(--component-1);

    border-radius: var(--radius-md);

}


.streaming-card-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.streaming-card-title {

    margin: 0;

    font-family: "MabryPro";

    font-size: 20px;
    font-weight: 700;

    color: var(--text);

}


.streaming-card-description {

    margin: 0;

    font-family: "Inter";

    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-60);

}

.streaming-card-title-row {

    display: flex;

    align-items: center;

    gap: 12px;

}


.streaming-card-icon {

    width: 22px;
    height: 22px;

    flex-shrink: 0;

}

/* ==========================================
   OFFERS CONTAINER
========================================== */

.offers-container {

    width: 100%;

    padding: 60px 40px;

    background: var(--accent);

    box-sizing: border-box;

}

/* ==========================================
   SECTION OFFERS
========================================== */

.section-offers-container {
    width: 100%;
}


/* ==========================================
   WRAPPER
========================================== */

.section-offers-wrapper {
    margin-top: 70px;
    width: 100%;

    padding: 20px 40px;

    position: relative;
    overflow: visible;

    box-sizing: border-box;

    background: var(--accent);
}


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

.section-offers-grid {
    width: 100%;

    position: relative;

    z-index: 1;

    margin-bottom: 40px;
}


/* ==========================================
   BILLING SELECTOR
========================================== */

.section-offers-billing-selector {

    --billing-width: 0px;
    --billing-height: 0px;
    --billing-offset: 0px;

    position: relative;

    width: fit-content;

    margin: 0 auto 40px;

    padding: 4px;

    display: flex;
    align-items: center;

    gap: 4px;

    background: var(--dark-component-1);

    border-radius: 999px;

    box-sizing: border-box;
}


/* ==========================================
   BILLING OPTIONS
========================================== */

.section-offers-billing-option {

    position: relative;

    z-index: 1;

    padding: 10px 20px;

    border: none;

    border-radius: 999px;

    background: transparent;

    color: rgba(255, 255, 255, 0.5);

    font-family: "Inter";

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .1s ease;

    user-select: none;

    box-sizing: border-box;

}


/* ==========================================
   ACTIVE OPTION
========================================== */

.section-offers-billing-option.is-active {

    color: black;

    cursor: default;

}


/* ==========================================
   BILLING PILL
========================================== */

.section-offers-billing-selector::before {

    content: "";

    position: absolute;

    top: 4px;
    left: 4px;

    width: var(--billing-width);
    height: var(--billing-height);

    background: var(--light-component-2);

    border-radius: 999px;

    transform:
        translateX(var(--billing-offset))
        scale(0.65);

    transform-origin: center;

    box-sizing: border-box;

    opacity: 0;

}


.section-offers-billing-selector.billing-pill-ready::before {

    animation: billingPillReveal 0.3s ease-out forwards;

}


@keyframes billingPillReveal {

    0% {
        opacity: 0;
        transform:
            translateX(var(--billing-offset))
            scale(0.65);
    }

    50% {
        opacity: 1;
        transform:
            translateX(var(--billing-offset))
            scale(1.13);
    }

    70% {
        transform:
            translateX(var(--billing-offset))
            scale(0.93);
    }

    87% {
        transform:
            translateX(var(--billing-offset))
            scale(1.04);
    }

    100% {
        opacity: 1;
        transform:
            translateX(var(--billing-offset))
            scale(1);
    }

}


/* ==========================================
   OFFERS CARDS
========================================== */

.section-offers-cards {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;
}


/* ==========================================
   OFFER CARD
========================================== */

.section-offers-card {
    width: 100%;

    max-width: 600px;

    padding: 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border-radius: 5px;

    color: black;
}


/* ==========================================
   PLAN TAG
========================================== */

.section-offers-plan-tag {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border-radius: 7px;

    font-family: "MabryPro";

    font-size: 17px;

    font-weight: 900;

    line-height: 1;

    white-space: nowrap;

    user-select: none;

}

.section-offers-card-tags {
    display: flex;

    align-items: center;

    width: 100%;

    gap: 8px;
}

.section-offers-account-tag {
    margin-left: auto;
}


/* ==========================================
   PREMIUM
========================================== */

.section-offers-plan-tag-premium {

    background: var(--accent);

    color: white;

}


/* ==========================================
   DUO
========================================== */

.section-offers-plan-tag-duo {

    background: #9AF8F3;

    color: black;

}


/* ==========================================
   FAMILY
========================================== */

.section-offers-plan-tag-family {

    background: #FF683D;

    color: white;

}


/* ==========================================
   ACCOUNT TAG
========================================== */

.section-offers-account-tag {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border-radius: 5px;

    background: var(--light-component-1);

    color: black;

    font-family: "Inter";

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    user-select: none;

}


/* ==========================================
   CARD CONTENT
========================================== */

.section-offers-card-content {
    margin-top: 30px;

    margin-bottom: 35px;
}


/* ==========================================
   CARD TITLE
========================================== */

.section-offers-card-title {
    margin: 0;

    font-family: "Inter";

    font-size: 20px;

    font-weight: 700;

    line-height: 1.1;

    color: black;
}


/* ==========================================
   CARD SUBTITLE
========================================== */

.section-offers-card-subtitle {
    margin: 5px 0 0;

    font-family: "Inter";

    font-size: 16px;

    font-weight: 500;

    line-height: 1.5;

    color: rgba(0, 0, 0, 0.5);
}


/* ==========================================
   ACTIONS
========================================== */

.section-offers-card-actions {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;
}


/* ==========================================
   MAIN BUTTON
========================================== */

.section-offers-card-button {
    width: 100%;

    box-sizing: border-box;

    text-align: center;
}


/* ==========================================
   MORE LINK
========================================== */

.section-offers-card-more {
    position: relative;

    align-self: flex-start;

    display: inline-block;
    width: fit-content;

    font-family: "Inter";
    font-size: 12px;
    font-weight: 500;

    color: black;

    text-decoration: none;

    user-select: none;
}

/* ==========================================
   OFFERS COMPARISON
========================================== */

.section-offers-comparison {
    width: 100%;

    background: var(--component-2);

    margin-bottom: -40px;
}


/* ==========================================
   CONTAINER
========================================== */

.section-offers-comparison-container {
    width: 100%;
    height: 100%;

    margin: 0 auto;

    padding: 80px 40px;

    box-sizing: border-box;
}


/* ==========================================
   TITLE
========================================== */

.section-offers-comparison-title {
    margin: 0 0 35px;

    font-family: "MabryPro";

    font-size: 48px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);

    text-align: center;
}


/* ==========================================
   COMPARISON CARD
========================================== */

.section-offers-comparison-card {
    width: 600px;
    height: 525px;

    margin: 0 auto;
    padding: 30px;

    box-sizing: border-box;

    gap: 40px;

    background: var(--background);

    border-radius: 10px;

    color: var(--text);
}


/* ==========================================
   FEATURES
========================================== */

.section-offers-comparison-features {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 0;
}


.section-offers-comparison-feature {
    min-height: 48px;

    display: grid;

    grid-template-columns: 70px 1fr 70px;

    align-items: center;

    padding: 12px 20px;

    box-sizing: border-box;

    font-family: "Inter";
    font-size: 14px;
    font-weight: 500;
}

.center-offer-comparison {
    text-align: center;

    font-weight: 500;
}

/* Valeurs */

.section-offers-comparison-value {
    font-family: "Inter";

    font-size: 14px;
    font-weight: 700;
}


/* Gauche */

.section-offers-comparison-value-left {
    text-align: left;
}


/* Droite */

.section-offers-comparison-value-right {
    text-align: right;
}


/* Une ligne sur deux */

.section-offers-comparison-feature:nth-child(odd) {
    border-radius: 5px;
    background: var(--component-2);
}


/* ==========================================
   SELECTORS
========================================== */

.section-offers-comparison-selectors {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin: 0 0 35px;
}


/* ==========================================
   SELECTOR
========================================== */

.section-offers-comparison-selector {
    position: relative;

    width: 125px;
    height: 44px;

    flex-shrink: 0;

    border: 1px solid var(--comparison-offer-color);

    border-radius: 10px;

    background: var(--comparison-offer-background);

    box-sizing: border-box;

    z-index: 20;

    user-select: none;
}


/* ==========================================
   BUTTON
========================================== */

.section-offers-comparison-selector-button {
    width: 100%;
    height: 100%;

    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: none;
    background: transparent;

    color: var(--text);

    font-family: "Inter";
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-sizing: border-box;
}


/* ==========================================
   CHEVRON
========================================== */

.section-offers-comparison-chevron {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    display: block;

    color: var(--text);

    transition:
        transform .2s ease;
}

.section-offers-comparison-selector.is-open
.section-offers-comparison-chevron {
    transform: rotate(180deg);
}


.section-offers-comparison-chevron img {
    width: 18px;
    height: 18px;

    display: block;
}


/* ==========================================
   OFFER COLORS
========================================== */

.section-offers-comparison-selector.is-gratuit {
    --comparison-offer-color: var(--free-bar);
    --comparison-offer-background: var(--free-background);
}


.section-offers-comparison-selector.is-premium {
    --comparison-offer-color: var(--premium-bar);
    --comparison-offer-background: var(--premium-background);
}


.section-offers-comparison-selector.is-duo {
    --comparison-offer-color: var(--duo-bar);
    --comparison-offer-background: var(--duo-background);
}


.section-offers-comparison-selector.is-famille {
    --comparison-offer-color: var(--family-bar);
    --comparison-offer-background: var(--family-background);
}


/* ==========================================
   SELECTOR OPTIONS
========================================== */

.section-offers-comparison-selector-options {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;

    width: 100%;

    padding: 4px;

    display: flex;
    flex-direction: column;

    gap: 2px;

    box-sizing: border-box;

    background: var(--background);

    border: 1px solid var(--comparison-offer-color);

    border-radius: 10px;

    z-index: 50;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transform-origin: top;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}


.section-offers-comparison-selector.is-open
.section-offers-comparison-selector-options {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.section-offers-comparison-selector-options button {
    width: 100%;

    padding: 8px 6px;

    border: none;
    border-radius: 6px;

    background: transparent;

    color: var(--text);

    font-family: "Inter";
    font-size: 12px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;
}


.section-offers-comparison-selector-options button:hover {
    background: var(--component-1);
}

.section-offers-comparison-value.is-unavailable {
    color: var(--text-60);
}

.section-offers-comparison-selector-options button:disabled {
    opacity: .4;

    cursor: default;

    pointer-events: none;
}

.section-offers-comparison-value.is-better {
    color: var(--yellow);
}


.offers-footer {

    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;

}

.section-offers-footer {

    width: 100%;

    margin: 0 auto 20px;

    text-align: center;

}

.offers-footer-description {

    font-family: "Inter";
    font-weight: 500;
    font-size: 14px;
    color: var(--text-70);

    margin-bottom: 60px;
}

.section-offers-pattern {
    position: absolute;

    top: -85px;
    left: 0;

    width: 100%;

    pointer-events: none;

    z-index: 0;
}

.section-offers-wave-bg {
    display: block;

    width: 100%;
    min-width: 1440px;

    fill: var(--accent);

    transform: rotate(180deg);
}

.section-offers-wave-bg ellipse {
    transform-box: fill-box;
    transform-origin: center;

    animation: offersWave 0.8s ease-in-out infinite;
}

.section-offers-wave-bg ellipse:nth-child(1)  { animation-delay: 0s; }
.section-offers-wave-bg ellipse:nth-child(2)  { animation-delay: -0.27s; }
.section-offers-wave-bg ellipse:nth-child(3)  { animation-delay: -0.18s; }
.section-offers-wave-bg ellipse:nth-child(4)  { animation-delay: -0.64s; }
.section-offers-wave-bg ellipse:nth-child(5)  { animation-delay: -0.42s; }
.section-offers-wave-bg ellipse:nth-child(6)  { animation-delay: -1.13s; }
.section-offers-wave-bg ellipse:nth-child(7)  { animation-delay: -0.76s; }
.section-offers-wave-bg ellipse:nth-child(8)  { animation-delay: -1.42s; }
.section-offers-wave-bg ellipse:nth-child(9)  { animation-delay: -0.91s; }
.section-offers-wave-bg ellipse:nth-child(10) { animation-delay: -0.34s; }
.section-offers-wave-bg ellipse:nth-child(11) { animation-delay: -1.27s; }
.section-offers-wave-bg ellipse:nth-child(12) { animation-delay: -0.58s; }
.section-offers-wave-bg ellipse:nth-child(13) { animation-delay: -1.49s; }
.section-offers-wave-bg ellipse:nth-child(14) { animation-delay: -0.83s; }
.section-offers-wave-bg ellipse:nth-child(15) { animation-delay: -0.21s; }
.section-offers-wave-bg ellipse:nth-child(16) { animation-delay: -1.08s; }
.section-offers-wave-bg ellipse:nth-child(17) { animation-delay: -0.47s; }
.section-offers-wave-bg ellipse:nth-child(18) { animation-delay: -1.36s; }
.section-offers-wave-bg ellipse:nth-child(19) { animation-delay: -0.69s; }
.section-offers-wave-bg ellipse:nth-child(20) { animation-delay: -1.17s; }
.section-offers-wave-bg ellipse:nth-child(21) { animation-delay: -0.05s; }
.section-offers-wave-bg ellipse:nth-child(22) { animation-delay: -0.97s; }
.section-offers-wave-bg ellipse:nth-child(23) { animation-delay: -1.31s; }
.section-offers-wave-bg ellipse:nth-child(24) { animation-delay: -0.39s; }

@keyframes offersWave {

    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.87);
    }

    100% {
        transform: scaleY(1);
    }

}

.offer-page-title {

    font-family: var(--font-title);

    font-size: 65px;
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -0.03em;

    color: var(--text);

    width: 100%;

    margin-bottom: var(--space-6);

}

/* ==========================================
   COMPARISON - RESPONSIVE
========================================== */

@media (max-width: 700px) {

    .section-offers-comparison-container {
        padding: 50px 10px;
    }


    .section-offers-comparison-card {
        width: 100%;
        height: auto;

        min-height: 525px;

        padding: 15px 15px;
    }


    .section-offers-comparison-selectors {
        gap: 10px;
    }


    .section-offers-comparison-selector {
        width: 125px;
        height: 44px;
    }


    .section-offers-comparison-feature {
        grid-template-columns: 45px 1fr 45px;

        padding: 20px 15px;

        font-size: 12px;
    }


    .section-offers-comparison-value {
        font-size: 12px;
    }

    .section-offers-pattern {
        width: 100%;
        overflow: hidden;
    }

    .section-offers-wave-bg {
        width: 1440px;
        min-width: 1440px;
    }

    .streaming-card {
        width: 100%;
        height: 100%;
    }

    .streaming-card-content {
        width: 100%;
        height: 100%;
    }

    .offer-page-title {
        font-size: 40px;
    }

    .section-offers-comparison-title {
        font-size: 30px;
    }

}