/* =========================================================
   SKYRA — OFFRES
   DESIGN PREMIUM / MODERNE / RESPONSIVE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --skyra-blue: #23abff;
    --skyra-blue-dark: #0f6cbd;
    --skyra-blue-deep: #07529a;

    --skyra-gradient:
        linear-gradient(
            135deg,
            #23abff 0%,
            #0f6cbd 100%
        );

    --skyra-gradient-soft:
        linear-gradient(
            135deg,
            rgba(35,171,255,.12),
            rgba(15,108,189,.06)
        );

    --skyra-white: #ffffff;

    --skyra-dark: #172033;
    --skyra-text: #263247;
    --skyra-muted: #718096;

    --skyra-light: #f5f9fd;
    --skyra-border: #e5edf5;

    --skyra-success: #18a66a;
    --skyra-danger: #ef4444;
    --skyra-warning: #f59e0b;

    --skyra-shadow:
        0 20px 55px rgba(15,108,189,.10);

    --skyra-shadow-hover:
        0 30px 80px rgba(15,108,189,.18);

    --skyra-radius: 24px;

    --skyra-transition:
        .35s cubic-bezier(.4,0,.2,1);

}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        'Montserrat',
        sans-serif;

    background:
        #f7faff;

    color:
        var(--skyra-text);

    overflow-x: hidden;

}


button,
a {

    font-family:
        inherit;

}


button {

    border: 0;

}


img {

    max-width: 100%;

    display: block;

}


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

.skyra-offers-container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin:
        0 auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.offers-header {

    position: relative;

    padding:
        95px 0 90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(35,171,255,.28),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(15,108,189,.20),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f8fcff,
            #eef7ff
        );

}


.offers-header::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        rgba(35,171,255,.08);

    top:
        -220px;

    right:
        -120px;

    filter:
        blur(10px);

}


.offers-header::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(15,108,189,.06);

    bottom:
        -200px;

    left:
        -120px;

}


.offers-header .skyra-offers-container {

    position: relative;

    z-index: 2;

}


.offers-header-top {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 17px;

    border-radius:
        999px;

    background:
        rgba(35,171,255,.10);

    border:
        1px solid
        rgba(35,171,255,.18);

    color:
        var(--skyra-blue-dark);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

    margin-bottom:
        22px;

}


.offers-header-top i {

    font-size:
        14px;

}


.offers-header h1 {

    max-width:
        850px;

    font-size:
        clamp(
            42px,
            6vw,
            76px
        );

    line-height:
        1.04;

    font-weight:
        900;

    letter-spacing:
        -2.5px;

    color:
        var(--skyra-dark);

    margin-bottom:
        25px;

}


.offers-header h1 span {

    display: block;

    background:
        var(--skyra-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.offers-header p {

    max-width:
        760px;

    color:
        var(--skyra-muted);

    font-size:
        16px;

    line-height:
        1.9;

    font-weight:
        500;

}


.offers-status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top:
        28px;

    padding:
        10px 16px;

    border-radius:
        999px;

    background:
        rgba(24,166,106,.09);

    color:
        var(--skyra-success);

    font-size:
        13px;

    font-weight:
        700;

}


.offers-status i {

    font-size:
        8px;

    animation:
        skyraPulse 1.7s infinite;

}


@keyframes skyraPulse {

    0%,
    100% {

        opacity: .4;

        transform:
            scale(.8);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.15);

    }

}


/* =========================================================
   OFFRE PRINCIPALE
   ========================================================= */

.main-offer-section {

    position: relative;

    margin-top:
        -35px;

    z-index:
        5;

    padding-bottom:
        70px;

}


.main-offer {

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    min-height:
        420px;

    overflow:
        hidden;

    border-radius:
        32px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(255,255,255,.8);

    box-shadow:
        var(--skyra-shadow);

    transition:
        var(--skyra-transition);

}


.main-offer:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--skyra-shadow-hover);

}


/* =========================================================
   IMAGE OFFRE
   ========================================================= */

.main-offer-image {

    position:
        relative;

    min-height:
        420px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #dff3ff,
            #b9e5ff
        );

}


.main-offer-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .8s ease;

}


.main-offer:hover
.main-offer-image img {

    transform:
        scale(1.06);

}


.main-offer-image::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.32)
        );

}


.main-offer-badge {

    position:
        absolute;

    top:
        22px;

    left:
        22px;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 15px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.95);

    color:
        var(--skyra-blue-dark);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);

}


.main-offer-badge i {

    color:
        #ff9f1c;

}


/* =========================================================
   CONTENU OFFRE
   ========================================================= */

.main-offer-content {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        55px;

    background:
        #ffffff;

}


.main-offer-content::before {

    content:
        "SKYRA";

    position:
        absolute;

    right:
        25px;

    top:
        20px;

    font-size:
        60px;

    font-weight:
        900;

    color:
        rgba(35,171,255,.035);

    pointer-events:
        none;

}


.main-offer-eyebrow {

    color:
        var(--skyra-blue);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

    margin-bottom:
        13px;

}


.main-offer-content h2 {

    position:
        relative;

    z-index:
        2;

    font-size:
        clamp(
            28px,
            4vw,
            46px
        );

    line-height:
        1.15;

    font-weight:
        900;

    color:
        var(--skyra-dark);

    margin-bottom:
        18px;

}


.main-offer-content p {

    position:
        relative;

    z-index:
        2;

    color:
        var(--skyra-muted);

    line-height:
        1.8;

    font-size:
        15px;

    max-width:
        600px;

}


.main-offer-discount {

    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

    margin-top:
        27px;

}


.main-offer-discount strong {

    font-size:
        48px;

    line-height:
        1;

    font-weight:
        900;

    background:
        var(--skyra-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.main-offer-discount span {

    color:
        var(--skyra-muted);

    font-size:
        13px;

    font-weight:
        600;

}


.main-offer-line {

    width:
        100%;

    height:
        1px;

    background:
        var(--skyra-border);

    margin-top:
        28px;

}


/* =========================================================
   VALIDITÉ
   ========================================================= */

.offer-validity-section {

    padding:
        15px 0 80px;

}


.offer-validity {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        28px 32px;

    border-radius:
        24px;

    background:
        #ffffff;

    border:
        1px solid
        var(--skyra-border);

    box-shadow:
        0 15px 45px rgba(15,108,189,.07);

}


.offer-validity-info {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.offer-validity-icon {

    width:
        54px;

    height:
        54px;

    flex:
        0 0 54px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        var(--skyra-gradient-soft);

    color:
        var(--skyra-blue-dark);

    font-size:
        20px;

}


.offer-validity-label {

    color:
        var(--skyra-muted);

    font-size:
        12px;

    font-weight:
        600;

    margin-bottom:
        5px;

}


.offer-validity-date {

    color:
        var(--skyra-dark);

    font-size:
        18px;

    font-weight:
        800;

}


/* =========================================================
   TIMER
   ========================================================= */

.offer-timer {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.offer-timer-title {

    color:
        var(--skyra-muted);

    font-size:
        12px;

    font-weight:
        700;

    margin-right:
        5px;

}


.offer-timer-unit {

    min-width:
        56px;

    text-align:
        center;

}


.offer-timer-number {

    display:
        block;

    color:
        var(--skyra-blue-dark);

    font-size:
        24px;

    line-height:
        1;

    font-weight:
        900;

}


.offer-timer-label {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--skyra-muted);

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.offer-timer-separator {

    color:
        var(--skyra-blue);

    font-weight:
        900;

    font-size:
        20px;

}


.offer-timer.offer-expired {

    opacity:
        .6;

}


/* =========================================================
   PRODUITS
   ========================================================= */

.offer-products-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        35px;

}


.offer-products-heading small {

    display:
        block;

    color:
        var(--skyra-blue);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

    margin-bottom:
        8px;

}


.offer-products-heading h2 {

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight:
        900;

    color:
        var(--skyra-dark);

}


.offer-products-heading p {

    max-width:
        500px;

    color:
        var(--skyra-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


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

.offer-products-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        25px;

}


/* =========================================================
   CARTE PRODUIT
   ========================================================= */

.offer-product-item {

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        var(--skyra-border);

    border-radius:
        24px;

    box-shadow:
        0 12px 35px rgba(15,108,189,.06);

    transition:
        var(--skyra-transition);

}


.offer-product-item:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px rgba(15,108,189,.14);

}


/* =========================================================
   PHOTO PRODUIT
   ========================================================= */

.offer-product-photo {

    position:
        relative;

    height:
        245px;

    overflow:
        hidden;

    background:
        #edf7ff;

}


.offer-product-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s ease;

}


.offer-product-item:hover
.offer-product-photo img {

    transform:
        scale(1.08);

}


.offer-product-discount {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--skyra-danger);

    font-size:
        11px;

    font-weight:
        900;

    box-shadow:
        0 7px 20px rgba(0,0,0,.13);

}


/* =========================================================
   CORPS PRODUIT
   ========================================================= */

.offer-product-body {

    padding:
        22px;

}


.offer-product-category {

    display:
        inline-flex;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(35,171,255,.08);

    color:
        var(--skyra-blue-dark);

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;

    margin-bottom:
        10px;

}


.offer-product-body h3 {

    font-size:
        18px;

    line-height:
        1.35;

    font-weight:
        800;

    color:
        var(--skyra-dark);

    margin-bottom:
        10px;

}


.offer-product-description {

    color:
        var(--skyra-muted);

    font-size:
        12px;

    line-height:
        1.7;

    min-height:
        42px;

    margin-bottom:
        17px;

}


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

.offer-product-price {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

}


.offer-product-price strong {

    font-size:
        23px;

    font-weight:
        900;

    color:
        var(--skyra-blue-dark);

}


.offer-product-price del {

    color:
        #9ca8b8;

    font-size:
        12px;

    font-weight:
        600;

}


.offer-product-saving {

    display:
        inline-flex;

    margin-top:
        7px;

    color:
        var(--skyra-success);

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   ACTION PRODUIT
   ========================================================= */

.offer-product-action {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        19px;

}


.offer-add-cart {

    flex:
        1;

    min-height:
        45px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 15px;

    border-radius:
        13px;

    background:
        var(--skyra-gradient);

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        0 8px 22px rgba(35,171,255,.20);

    transition:
        var(--skyra-transition);

}


.offer-add-cart:hover {

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px rgba(35,171,255,.35);

}


.offer-add-cart i {

    font-size:
        13px;

}


.offer-details-btn {

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        #f2f7fc;

    color:
        var(--skyra-blue-dark);

    text-decoration:
        none;

    transition:
        var(--skyra-transition);

}


.offer-details-btn:hover {

    color:
        #ffffff;

    background:
        var(--skyra-gradient);

    transform:
        translateX(3px);

}


/* =========================================================
   EMPTY
   ========================================================= */

.offer-products-empty {

    padding:
        60px 30px;

    text-align:
        center;

    border:
        1px dashed
        #cbd9e7;

    border-radius:
        22px;

    background:
        #ffffff;

    color:
        var(--skyra-muted);

    font-size:
        14px;

}


/* =========================================================
   ACTION PRINCIPALE
   ========================================================= */

.offer-main-action-section {

    padding:
        85px 0;

}


.offer-main-action {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    padding:
        48px 55px;

    border-radius:
        30px;

    background:
        var(--skyra-gradient);

    box-shadow:
        0 25px 65px rgba(15,108,189,.22);

}


.offer-main-action::before {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    right:
        -80px;

    top:
        -120px;

    background:
        rgba(255,255,255,.12);

}


.offer-main-action::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    border-radius:
        50%;

    left:
        -90px;

    bottom:
        -110px;

    background:
        rgba(255,255,255,.07);

}


.offer-main-action-content {

    position:
        relative;

    z-index:
        2;

}


.offer-main-action-content small {

    color:
        rgba(255,255,255,.75);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

}


.offer-main-action-content h3 {

    color:
        #ffffff;

    font-size:
        clamp(
            23px,
            3vw,
            35px
        );

    font-weight:
        900;

    line-height:
        1.25;

    margin:
        10px 0;

}


.offer-main-action-content p {

    color:
        rgba(255,255,255,.78);

    font-size:
        13px;

    line-height:
        1.7;

}


.offer-main-action-btn {

    position:
        relative;

    z-index:
        2;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        55px;

    padding:
        0 25px;

    border-radius:
        15px;

    background:
        #ffffff;

    color:
        var(--skyra-blue-dark);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        900;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

    transition:
        var(--skyra-transition);

}


.offer-main-action-btn:hover {

    color:
        var(--skyra-blue-dark);

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px rgba(0,0,0,.20);

}


.offer-main-action-btn i {

    transition:
        transform .3s ease;

}


.offer-main-action-btn:hover i {

    transform:
        translateX(5px);

}


/* =========================================================
   TOAST
   ========================================================= */

.skyra-cart-toast {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        99999;

    width:
        min(
            380px,
            calc(100vw - 30px)
        );

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        17px;

    border:
        1px solid
        rgba(35,171,255,.15);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 25px 70px rgba(15,108,189,.20);

    transform:
        translateX(
            calc(100% + 40px)
        );

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .45s cubic-bezier(.16,1,.3,1);

    backdrop-filter:
        blur(15px);

}


.skyra-cart-toast.show {

    transform:
        translateX(0);

    opacity:
        1;

    visibility:
        visible;

}


.skyra-toast-icon {

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    background:
        rgba(24,166,106,.10);

    color:
        var(--skyra-success);

    font-size:
        18px;

}


.skyra-toast-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.skyra-toast-content strong {

    color:
        var(--skyra-dark);

    font-size:
        13px;

    font-weight:
        800;

}


.skyra-toast-content span {

    color:
        var(--skyra-muted);

    font-size:
        11px;

}


/* =========================================================
   POPUP PERSONNALISÉ
   ========================================================= */

.skyra-popup-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        100000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(7,25,45,.58);

    backdrop-filter:
        blur(9px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .3s ease;

}


.skyra-popup-overlay.show {

    opacity:
        1;

    visibility:
        visible;

}


.skyra-popup {

    position:
        relative;

    width:
        min(
            460px,
            100%
        );

    padding:
        38px;

    border-radius:
        28px;

    background:
        #ffffff;

    text-align:
        center;

    box-shadow:
        0 35px 100px rgba(0,0,0,.25);

    transform:
        translateY(25px)
        scale(.96);

    transition:
        .4s cubic-bezier(.16,1,.3,1);

}


.skyra-popup-overlay.show
.skyra-popup {

    transform:
        translateY(0)
        scale(1);

}


.skyra-popup-close {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        #f3f6fa;

    color:
        #65758b;

    cursor:
        pointer;

    transition:
        .3s ease;

}


.skyra-popup-close:hover {

    background:
        #e9eef5;

    color:
        var(--skyra-dark);

    transform:
        rotate(90deg);

}


.skyra-popup-icon {

    width:
        75px;

    height:
        75px;

    margin:
        0 auto 20px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        24px;

    background:
        var(--skyra-gradient-soft);

    color:
        var(--skyra-blue-dark);

    font-size:
        28px;

    box-shadow:
        inset 0 0 0 1px rgba(35,171,255,.08);

}


.skyra-popup h3 {

    color:
        var(--skyra-dark);

    font-size:
        23px;

    font-weight:
        900;

    margin-bottom:
        12px;

}


.skyra-popup p {

    color:
        var(--skyra-muted);

    font-size:
        13px;

    line-height:
        1.8;

    margin-bottom:
        25px;

}


.skyra-popup-button {

    width:
        100%;

    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        14px;

    background:
        var(--skyra-gradient);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 10px 25px rgba(35,171,255,.20);

    transition:
        .3s ease;

}


.skyra-popup-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px rgba(35,171,255,.32);

}


/* =========================================================
   PANIER OVERLAY
   ========================================================= */

.skyra-cart-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        9998;

    background:
        rgba(8,25,45,.48);

    backdrop-filter:
        blur(5px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .35s ease;

}


.skyra-cart-overlay.show {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   PANIER DRAWER
   ========================================================= */

.skyra-cart-drawer {

    position:
        fixed;

    z-index:
        9999;

    top:
        0;

    right:
        0;

    width:
        min(
            430px,
            100%
        );

    height:
        100vh;

    height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    background:
        #ffffff;

    box-shadow:
        -20px 0 70px rgba(0,0,0,.16);

    transform:
        translateX(105%);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1);

}


.skyra-cart-drawer.show {

    transform:
        translateX(0);

}


/* =========================================================
   PANIER HEADER
   ========================================================= */

.skyra-cart-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        24px;

    border-bottom:
        1px solid
        var(--skyra-border);

}


.skyra-cart-small-title {

    color:
        var(--skyra-blue);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.skyra-cart-header h3 {

    margin-top:
        4px;

    color:
        var(--skyra-dark);

    font-size:
        21px;

    font-weight:
        900;

}


.skyra-cart-close {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        #f3f7fb;

    color:
        #607085;

    cursor:
        pointer;

    transition:
        .3s ease;

}


.skyra-cart-close:hover {

    background:
        var(--skyra-gradient);

    color:
        #ffffff;

    transform:
        rotate(90deg);

}


/* =========================================================
   PANIER CONTENU
   ========================================================= */

.skyra-cart-content {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        20px;

}


.skyra-cart-content::-webkit-scrollbar {

    width:
        5px;

}


.skyra-cart-content::-webkit-scrollbar-thumb {

    background:
        #c8d8e8;

    border-radius:
        999px;

}


/* =========================================================
   EMPTY CART
   ========================================================= */

.skyra-cart-empty {

    min-height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        30px;

}


.skyra-cart-empty-icon {

    width:
        80px;

    height:
        80px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        25px;

    background:
        var(--skyra-gradient-soft);

    color:
        var(--skyra-blue-dark);

    font-size:
        28px;

    margin-bottom:
        20px;

}


.skyra-cart-empty h4 {

    color:
        var(--skyra-dark);

    font-size:
        18px;

    font-weight:
        800;

    margin-bottom:
        8px;

}


.skyra-cart-empty p {

    max-width:
        280px;

    color:
        var(--skyra-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   ITEM PANIER
   ========================================================= */

.skyra-cart-item {

    display:
        flex;

    gap:
        13px;

    padding:
        13px;

    margin-bottom:
        12px;

    border:
        1px solid
        var(--skyra-border);

    border-radius:
        17px;

    background:
        #ffffff;

}


.skyra-cart-item-image {

    width:
        70px;

    height:
        70px;

    flex:
        0 0 70px;

    overflow:
        hidden;

    border-radius:
        14px;

    background:
        #edf6fc;

}


.skyra-cart-item-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.skyra-cart-item-info {

    min-width:
        0;

}


.skyra-cart-item-info h4 {

    color:
        var(--skyra-dark);

    font-size:
        13px;

    font-weight:
        800;

    margin-bottom:
        6px;

}


.skyra-cart-item-price {

    color:
        var(--skyra-blue-dark);

    font-size:
        12px;

    font-weight:
        800;

}


.skyra-cart-item-quantity {

    margin-top:
        4px;

    color:
        var(--skyra-muted);

    font-size:
        10px;

}


/* =========================================================
   PANIER FOOTER
   ========================================================= */

.skyra-cart-footer {

    padding:
        20px;

    border-top:
        1px solid
        var(--skyra-border);

    background:
        #ffffff;

}


.skyra-cart-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        14px;

}


.skyra-cart-total span {

    color:
        var(--skyra-muted);

    font-size:
        12px;

    font-weight:
        600;

}


.skyra-cart-total strong {

    color:
        var(--skyra-dark);

    font-size:
        22px;

    font-weight:
        900;

}


.skyra-cart-order {

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        15px;

    background:
        var(--skyra-gradient);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 10px 28px rgba(35,171,255,.22);

    transition:
        .3s ease;

}


.skyra-cart-order:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px rgba(35,171,255,.34);

}


/* =========================================================
   ANIMATION ENTRÉE
   ========================================================= */

@keyframes skyraFadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(25px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.main-offer {

    animation:
        skyraFadeUp .7s ease both;

}


.offer-validity {

    animation:
        skyraFadeUp .7s .1s ease both;

}


.offer-product-item {

    animation:
        skyraFadeUp .6s ease both;

}


.offer-product-item:nth-child(2) {

    animation-delay:
        .08s;

}


.offer-product-item:nth-child(3) {

    animation-delay:
        .16s;

}


.offer-product-item:nth-child(4) {

    animation-delay:
        .24s;

}


.offer-product-item:nth-child(5) {

    animation-delay:
        .32s;

}


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

@media (max-width: 950px) {

    .main-offer {

        grid-template-columns:
            1fr;

    }


    .main-offer-image {

        min-height:
            330px;

    }


    .main-offer-content {

        padding:
            40px;

    }


    .offer-products-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }


    .offer-validity {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .offer-timer {

        width:
            100%;

        justify-content:
            flex-start;

    }

}


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

@media (max-width: 650px) {

    .skyra-offers-container {

        width:
            calc(100% - 28px);

    }


    .offers-header {

        padding:
            65px 0 70px;

    }


    .offers-header h1 {

        font-size:
            39px;

        letter-spacing:
            -1.7px;

    }


    .offers-header p {

        font-size:
            13px;

        line-height:
            1.8;

    }


    .main-offer-section {

        margin-top:
            -25px;

        padding-bottom:
            50px;

    }


    .main-offer {

        border-radius:
            23px;

    }


    .main-offer-image {

        min-height:
            250px;

    }


    .main-offer-content {

        padding:
            30px 24px;

    }


    .main-offer-content h2 {

        font-size:
            29px;

    }


    .main-offer-discount strong {

        font-size:
            39px;

    }


    .offer-validity-section {

        padding-bottom:
            55px;

    }


    .offer-validity {

        padding:
            22px;

        border-radius:
            20px;

    }


    .offer-validity-info {

        width:
            100%;

    }


    .offer-timer {

        display:
            grid;

        grid-template-columns:
            repeat(4,1fr);

        gap:
            3px;

        width:
            100%;

        padding-top:
            18px;

        border-top:
            1px solid
            var(--skyra-border);

    }


    .offer-timer-title {

        grid-column:
            1 / -1;

        margin:
            0 0 7px;

    }


    .offer-timer-separator {

        display:
            none;

    }


    .offer-timer-unit {

        min-width:
            auto;

    }


    .offer-timer-number {

        font-size:
            21px;

    }


    .offer-products-heading {

        display:
            block;

        margin-bottom:
            25px;

    }


    .offer-products-heading h2 {

        font-size:
            29px;

        margin-bottom:
            12px;

    }


    .offer-products-heading p {

        font-size:
            12px;

    }


    .offer-products-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .offer-product-photo {

        height:
            230px;

    }


    .offer-main-action-section {

        padding:
            55px 0;

    }


    .offer-main-action {

        display:
            block;

        padding:
            32px 25px;

        border-radius:
            24px;

    }


    .offer-main-action-content {

        margin-bottom:
            24px;

    }


    .offer-main-action-btn {

        width:
            100%;

    }


    .skyra-cart-toast {

        right:
            14px;

        bottom:
            14px;

        width:
            calc(100vw - 28px);

    }


    .skyra-popup {

        padding:
            32px 23px;

        border-radius:
            23px;

    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 380px) {

    .offers-header h1 {

        font-size:
            34px;

    }


    .offer-timer-number {

        font-size:
            18px;

    }


    .offer-timer-label {

        font-size:
            7px;

    }


    .main-offer-content h2 {

        font-size:
            26px;

    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

button:focus-visible,
a:focus-visible {

    outline:
        3px solid
        rgba(35,171,255,.35);

    outline-offset:
        3px;

}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}