@import '_content/BlazorFlags/BlazorFlags.bundle.scp.css';
@import '_content/PSC.Blazor.Components.Icons/PSC.Blazor.Components.Icons.bundle.scp.css';

/* /Components/Layout/Arianne.razor.rz.scp.css */
html[b-3bgbfy2v1k] {
    overflow-x: hidden;
}

/* Palette Ezixio (référence, pas utilisée avec var() ) */
:root[b-3bgbfy2v1k] {
    /* noir bleuté profond */
    --ezixio-dark:  #141227;
    /* blanc cassé */
    --ezixio-light: #FBFBF8;
    /* bleu Ezixio */
    --ezixio-blue:  #39519E;
    /* vert EZTax */
    --eztax-green:  #78BD76;
    /* orange EZLunch */
    --ezlunch-orange: #E87E20;
    /* rouge EZGifts */
    --ezgifts-red: #C03A29;
    /* violet EZCash */
    --ezcash-violet: #7A4091;
}

/* ==========================
   MENU PRINCIPAL
   ========================== */

#menu[b-3bgbfy2v1k] {
    background: #141227;                   /* fond sombre Ezixio */
    height: 76px;
    position: fixed;
    border-radius: 0;
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65);
    z-index: 10;
}

#menu ul[b-3bgbfy2v1k] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

#menu li[b-3bgbfy2v1k] {
    padding: 0;
    list-style: none;
    align-items: center;
    color: #FBFBF8;
    margin: 13px 3px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#menu button[b-3bgbfy2v1k] {
    padding: 0;
    list-style: none;
    align-items: center;
    margin: 13px 3px;
}

#menu img[b-3bgbfy2v1k] {
    width: auto;
    height: 44px;
}

/* Liens de menu */

#menu a[b-3bgbfy2v1k] {
    display: flex;
    padding: 0;
    text-decoration: none;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #FBFBF8;                         /* texte blanc cassé */
    align-items: center;
}

#menu a.dropdown-arrow[b-3bgbfy2v1k]:after {
    content: "\25BE";
    margin-left: 10px;
    font-size: 12px;
}

/* Hover menu desktop */

#menu li:hover > a[b-3bgbfy2v1k] {
    color: #39519E;                         /* bleu Ezixio */
}

#menu li li:hover[b-3bgbfy2v1k] {
    color: #FBFBF8;
    background: #39519E;                    /* bleu Ezixio */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================
   SOUS-MENUS
   ========================== */

#menu ul.sub-menus[b-3bgbfy2v1k] {
    height: auto;
    overflow: hidden;
    background: #141227;
    position: absolute;
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
}

#menu ul.sub-menus li[b-3bgbfy2v1k] {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 46px;
    cursor: pointer;
}

#menu ul.sub-menus a[b-3bgbfy2v1k] {
    color: #FBFBF8;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 46px;
    font-family: "Source Sans Pro", sans-serif;
    display: block;
    box-sizing: border-box;
}

#menu li:hover ul.sub-menus[b-3bgbfy2v1k] {
    display: block;
}

#menu ul.sub-menus li:hover[b-3bgbfy2v1k] {
    background: #39519E;                    /* bleu Ezixio */
    color: #FBFBF8;
}

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

.responsive-menu[b-3bgbfy2v1k] {
    display: none;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border: none;
    background-color: transparent;
}

.responsive-menu-active[b-3bgbfy2v1k] {
    display: none;
    cursor: pointer;
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: none;
}

@media screen and (max-width: 800px) {

    #menu[b-3bgbfy2v1k] {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
    }

    #menu img[b-3bgbfy2v1k] {
        margin-left: 0;
    }

    #menu ul[b-3bgbfy2v1k] {
        background: #141227;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 3;
        height: auto;
        display: none;
        text-align: left;
    }

    #menu ul.sub-menus[b-3bgbfy2v1k] {
        position: static;
        box-shadow: none;
        border-radius: 0;
    }

    #menu ul.sub-menus a[b-3bgbfy2v1k] {
        padding-left: 30px;
    }

    #menu li[b-3bgbfy2v1k] {
        display: block;
        width: auto;
    }

    #menu input[b-3bgbfy2v1k],
    #menu button[b-3bgbfy2v1k] {
        top: 0;
        right: 0;
        float: right;
        display: block;
    }

    #menu button[b-3bgbfy2v1k] {
        z-index: 4;
        color: #FBFBF8;
    }

    #menu .responsive-menu-active + button[b-3bgbfy2v1k] {
        color: #FBFBF8;
    }

    #menu .responsive-menu-active + button[b-3bgbfy2v1k]:before {
        content: "\00d7";
    }

    #menu .responsive-menu-active ~ ul[b-3bgbfy2v1k] {
        display: block;
    }

    .responsive-menu[b-3bgbfy2v1k] {
        display: block;
    }

    .responsive-menu-active[b-3bgbfy2v1k] {
        display: block;
    }
}

/* ==========================
   ÉTATS / BOUTONS
   ========================== */

.unselected[b-3bgbfy2v1k] {
    color: #7D7F9C;                          /* gris bleuté lisible sur fond sombre */
    cursor: default;
}

/* Bouton téléchargement */

.download-button[b-3bgbfy2v1k] {
    background: #39519E;                     /* bleu Ezixio */
    border-radius: 5px;
    color: #FBFBF8;
    border: none;
    width: 100px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 10px 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.download-button:hover[b-3bgbfy2v1k] {
    background: #325BA9;                     /* bleu ciel Ez Salaries */
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}
/* /Components/Layout/Configurator/BuildYourOffer.razor.rz.scp.css */
/* ==========================
   HERO – DESIGN ÉPURÉ
   ========================== */

.MainContainer[b-9muxejqylu] {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 100vh;
    max-height: 100vh;
    background: linear-gradient(135deg, #0A0E27 0%, #141A35 100%);
    color: #FBFBF8;
    justify-items: stretch;
    align-content: stretch;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

/* Colonne gauche – contenu principal */
.section-1[b-9muxejqylu] {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.parent[b-9muxejqylu] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    max-width: 640px;
    padding: 60px 80px;
    padding-right: 40px;
    box-sizing: border-box;
}

/* Titres & blocs */
.title[b-9muxejqylu] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: left;
    color: #FBFBF8;
}

.div1[b-9muxejqylu],
.div2[b-9muxejqylu],
.div3[b-9muxejqylu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.div2[b-9muxejqylu] {
    margin-top: 32px;
}

.div3[b-9muxejqylu] {
    margin-top: 16px;
}

.div4[b-9muxejqylu] {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

/* Boutons */
.basic-button[b-9muxejqylu] {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

/* CTA principal avec input inclus */
.special-button-modal[b-9muxejqylu] {
    display: grid;
    grid-template-columns: 0.9fr 0.35fr;
    grid-template-rows: 52px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: stretch;
    justify-content: center;
    width: fit-content;
    height: 52px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    outline: 0;
    color: #FBFBF8;

    background: linear-gradient(135deg, rgba(57, 81, 158, 0.9) 0%, rgba(50, 91, 169, 0.9) 100%);
    box-shadow: 0 14px 40px rgba(57, 81, 158, 0.5);

    font-family: "IBM Plex Sans", sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.special-button-modal[b-9muxejqylu]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.special-button-modal:hover[b-9muxejqylu] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 60px rgba(57, 81, 158, 0.7);
    border-color: rgba(255, 255, 255, 0.35);
}

.special-button-modal:hover[b-9muxejqylu]::before {
    opacity: 1;
}

/* Contenu input + actions dans le CTA */
.input-custom-left[b-9muxejqylu] {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-left: 10px;
}

.input-custom-right[b-9muxejqylu] {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    gap: 10px;
    position: relative;
}

.vertical-separator[b-9muxejqylu] {
    height: 60%;
    width: 1px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* Input de gauche (valeur principale) */
.custom-input-style-left-content[b-9muxejqylu] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    color: #FBFBF8;
    font-size: 17px;
    font-weight: 700;
    padding: 0 18px;
    outline: 0;
}

/* Input / texte à droite */
.custom-input-style[b-9muxejqylu] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.9);
    outline: 0;
}

/* Colonne droite – visuel / illustration */
.section-2[b-9muxejqylu] {
    grid-area: 1 / 2 / 2 / 3;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(90, 110, 200, 0.35), transparent 60%),
                radial-gradient(circle at bottom right, rgba(120, 189, 118, 0.2), transparent 55%),
                #0A0E27;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 40px 40px 60px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.custom-image[b-9muxejqylu] {
    margin-left: 0;
    max-width: 420px;
    width: 100%;
    transform: translateY(10px);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.9));
}

/* Bloc image + infos à côté */
.image-container[b-9muxejqylu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    width: auto;
}

.list-informations[b-9muxejqylu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.list-title[b-9muxejqylu] {
    color: rgba(251, 251, 248, 0.9);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.list-info[b-9muxejqylu] {
    display: flex;
    gap: 10px;
    color: rgba(251, 251, 248, 0.75);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

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

@media screen and (max-width: 1200px) {
    .MainContainer[b-9muxejqylu] {
        grid-template-columns: 1fr 0.9fr;
    }

    .parent[b-9muxejqylu] {
        padding: 50px 40px;
    }

    .title[b-9muxejqylu] {
        font-size: 44px;
    }
}

@media screen and (max-width: 1024px) {
    .MainContainer[b-9muxejqylu] {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .section-2[b-9muxejqylu] {
        display: none;
    }

    .section-1[b-9muxejqylu] {
        justify-content: center;
    }

    .parent[b-9muxejqylu] {
        width: 100%;
        max-width: 720px;
        padding: 60px 32px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 768px) {
    .MainContainer[b-9muxejqylu] {
        margin-top: 40px;
    }

    .parent[b-9muxejqylu] {
        padding: 40px 24px;
    }

    .title[b-9muxejqylu] {
        font-size: 34px;
        line-height: 1.1;
    }

    .special-button-modal[b-9muxejqylu] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .title[b-9muxejqylu] {
        font-size: 28px;
    }

    .parent[b-9muxejqylu] {
        padding: 32px 20px;
    }

    .special-button-modal[b-9muxejqylu] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .input-custom-left[b-9muxejqylu],
    .input-custom-right[b-9muxejqylu] {
        border-radius: 0;
    }

    .vertical-separator[b-9muxejqylu] {
        display: none;
    }
}
/* /Components/Layout/Configurator/CommercantWorld.razor.rz.scp.css */
/* ==========================
   EMPLOYEUR – DESIGN ÉPURÉ
   ========================== */

/* Import Google Fonts */

.ez-employer-layout[b-nn2lwtg9vq] {
    padding: 80px 60px;
    background: linear-gradient(135deg, #0A0E27 0%, #141A35 100%);
    min-height: 100vh;
    color: #FBFBF8;
}

/* Header */
.ez-employer-header[b-nn2lwtg9vq] {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}

.ez-main-title[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.02em;
    color: #FBFBF8;
    margin-bottom: 16px;
}

.ez-main-subtitle[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(251, 251, 248, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

/* Layout panneaux */
.ez-panels[b-nn2lwtg9vq] {
    background: transparent;
    border-radius: 0;
    padding: 0 20px;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: space-between;
}

/* Panneaux */
.ez-panel[b-nn2lwtg9vq] {
    background: transparent;
    border-radius: 0;
    padding: 0 20px;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ez-panel-left[b-nn2lwtg9vq] {
    border-top: none;
}

.ez-panel-right[b-nn2lwtg9vq] {
    border-top: none;
}

.ez-panel-header[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chips */
.ez-chip[b-nn2lwtg9vq] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 20px;
    border-radius: 999px;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #FBFBF8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ez-chip-blue[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.35);
    border: 1px solid rgba(57, 81, 158, 0.5);
}

.ez-chip-green[b-nn2lwtg9vq] {
    background: rgba(120, 189, 118, 0.35);
    border: 1px solid rgba(120, 189, 118, 0.5);
}

.ez-panel-title[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FBFBF8;
    letter-spacing: -0.01em;
    margin-top: 8px;
}

.ez-panel-text[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(251, 251, 248, 0.7);
    max-width: 480px;
}

/* Grille packs */
.ez-pack-grid[b-nn2lwtg9vq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
    perspective: 1500px;
    padding: 40px 0;
    flex-wrap: nowrap;
    overflow-x: visible;
}

.ez-pack-grid-single[b-nn2lwtg9vq] {
    display: flex;
    justify-content: center;
}

/* Cartes pack – Style carte inclinée */
.ez-pack-card[b-nn2lwtg9vq] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 0;
    min-height: 480px;
    width: 360px;
    background: linear-gradient(135deg, #1a1f3a 0%, #0f1328 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
    transform-style: preserve-3d;
}

/* Variations de rotation pour chaque carte */
.ez-pack-lunch[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(-12deg) rotateX(2deg);
}

.ez-pack-gifts[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-cash[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(6deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-pass[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(12deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-tax[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(0deg) rotateX(2deg);
}

/* V background – maintenant subtil */
.ez-pack-v[b-nn2lwtg9vq] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-radius: 18px;
    opacity: 0.08;
}

/* Couleurs V par pack – dégradés intenses */
.ez-pack-v-lunch[b-nn2lwtg9vq] {
    background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%);
}

.ez-pack-v-gifts[b-nn2lwtg9vq] {
    background: linear-gradient(135deg, #C03A29 0%, #E05040 50%, #C03A29 100%);
}

.ez-pack-v-cash[b-nn2lwtg9vq] {
    background: linear-gradient(135deg, #7A4091 0%, #9B5FB5 50%, #7A4091 100%);
}

.ez-pack-v-pass[b-nn2lwtg9vq] {
    background: linear-gradient(135deg, #3E4256 0%, #5A5F7A 50%, #3E4256 100%);
    opacity: 0.04;
}

.ez-pack-v-tax[b-nn2lwtg9vq] {
    background: linear-gradient(135deg, #78BD76 0%, #96D394 50%, #78BD76 100%);
}

/* Contenu carte */
.ez-pack-top[b-nn2lwtg9vq] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 42px 36px 0;
}

.ez-pack-brand[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.ez-pack-logo-full[b-nn2lwtg9vq] {
    height: 28px;
    width: auto;
    object-fit: contain;
    max-width: 120px;
}

.ez-pack-icon[b-nn2lwtg9vq] {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ez-pack-icon[b-nn2lwtg9vq]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

/* Backgrounds colorés au hover */
.ez-pack-lunch:hover .ez-pack-icon[b-nn2lwtg9vq]::before {
    background: rgba(232, 126, 32, 0.2);
    border-color: rgba(232, 126, 32, 0.4);
}

.ez-pack-gifts:hover .ez-pack-icon[b-nn2lwtg9vq]::before {
    background: rgba(192, 58, 41, 0.2);
    border-color: rgba(192, 58, 41, 0.4);
}

.ez-pack-cash:hover .ez-pack-icon[b-nn2lwtg9vq]::before {
    background: rgba(122, 64, 145, 0.2);
    border-color: rgba(122, 64, 145, 0.4);
}

.ez-pack-tax:hover .ez-pack-icon[b-nn2lwtg9vq]::before {
    background: rgba(120, 189, 118, 0.2);
    border-color: rgba(120, 189, 118, 0.4);
}

.ez-pack-icon img[b-nn2lwtg9vq] {
    position: relative;
    width: 55px;
    height: 55px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: all 0.4s ease;
}

/* Couleurs des icônes au hover */
.ez-pack-lunch:hover .ez-pack-icon img[b-nn2lwtg9vq] {
    filter: none;
    opacity: 1;
}

.ez-pack-gifts:hover .ez-pack-icon img[b-nn2lwtg9vq] {
    filter: none;
    opacity: 1;
}

.ez-pack-cash:hover .ez-pack-icon img[b-nn2lwtg9vq] {
    filter: none;
    opacity: 1;
}

.ez-pack-tax:hover .ez-pack-icon img[b-nn2lwtg9vq] {
    filter: none;
    opacity: 1;
}

.ez-pack-pass:hover .ez-pack-icon img[b-nn2lwtg9vq] {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.ez-pack-ez[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 27px;
    font-weight: 700;
    color: rgba(251, 251, 248, 0.6);
    letter-spacing: 0.1em;
}

.ez-pack-name[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #FBFBF8;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ez-pack-body[b-nn2lwtg9vq] {
    position: relative;
    z-index: 2;
    padding: 0 36px 42px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ez-pack-desc[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: rgba(251, 251, 248, 0.75);
    max-width: 65%;
    padding-bottom: 80px;
}

.ez-pack-checkmark[b-nn2lwtg9vq] {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-top: auto;
    position: absolute;
    bottom: -60px;
    right: -40px;
    z-index: 3;
}

.ez-pack-checkmark img[b-nn2lwtg9vq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

/* Couleurs spécifiques des checkmarks */
.ez-pack-lunch .ez-pack-checkmark img[b-nn2lwtg9vq] {
    filter: drop-shadow(0 15px 45px rgba(232, 126, 32, 0.8));
}

.ez-pack-gifts .ez-pack-checkmark img[b-nn2lwtg9vq] {
    filter: drop-shadow(0 15px 45px rgba(192, 58, 41, 0.8));
}

.ez-pack-cash .ez-pack-checkmark img[b-nn2lwtg9vq] {
    filter: drop-shadow(0 15px 45px rgba(122, 64, 145, 0.8));
}

.ez-pack-tax .ez-pack-checkmark img[b-nn2lwtg9vq] {
    filter: drop-shadow(0 15px 45px rgba(120, 189, 118, 0.8));
}

/* Coming soon */
.ez-pack-comingsoon[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(180, 183, 201, 0.9);
    background: rgba(36, 40, 60, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(180, 183, 201, 0.2);
}

/* État désactivé */
.ez-pack-pass[b-nn2lwtg9vq] {
    opacity: 1;
    cursor: not-allowed;
}

.ez-pack-pass .ez-pack-v[b-nn2lwtg9vq] {
    opacity: 0.5;
}

.ez-pack-pass .ez-pack-name[b-nn2lwtg9vq],
.ez-pack-pass .ez-pack-ez[b-nn2lwtg9vq],
.ez-pack-pass .ez-pack-desc[b-nn2lwtg9vq] {
    opacity: 0.6;
}

/* Hover effects */
.ez-pack-card:hover[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.ez-pack-lunch:hover[b-nn2lwtg9vq],
.ez-pack-gifts:hover[b-nn2lwtg9vq],
.ez-pack-cash:hover[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.05);
}

.ez-pack-pass:hover[b-nn2lwtg9vq] {
    transform: perspective(1000px) rotateY(12deg) rotateX(2deg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* CTA principal */
.ez-main-cta[b-nn2lwtg9vq] {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.ez-main-button[b-nn2lwtg9vq] {
    position: relative;
    min-width: 320px;
    padding: 20px 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #FBFBF8;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ez-main-button[b-nn2lwtg9vq]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ez-main-button:hover[b-nn2lwtg9vq] {
    transform: translateY(-3px);
    box-shadow: 0 20px 60px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.ez-main-button:hover[b-nn2lwtg9vq]::before {
    opacity: 1;
}

.ez-main-button:active[b-nn2lwtg9vq] {
    transform: translateY(-1px);
}
/* ==========================
   SECTION CONFIGURATION
   ========================== */

.ez-config-section[b-nn2lwtg9vq] {
    padding: 80px 60px;
    background: linear-gradient(35deg, #0A0E27 0%, #141A35 100%);
}
.ez-config-container[b-nn2lwtg9vq] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.ez-config-header[b-nn2lwtg9vq] {
    text-align: center;
    margin-bottom: 60px;
}

.ez-config-title[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #FBFBF8;
    margin-bottom: 12px;
}

.ez-config-subtitle[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    color: rgba(251, 251, 248, 0.7);
}

/* Layout 2 colonnes */
.ez-config-layout[b-nn2lwtg9vq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Form (colonne gauche) */
.ez-config-form[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ez-config-field[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ez-config-label[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ez-config-label-text[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-label-helper[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
}

/* Input groupe avec +/- */
.ez-config-input-group[b-nn2lwtg9vq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ez-config-input[b-nn2lwtg9vq] {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FBFBF8;
    text-align: center;
    transition: all 0.3s ease;
}

.ez-config-input:focus[b-nn2lwtg9vq] {
    outline: none;
    border-color: rgba(57, 81, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ez-config-btn-minus[b-nn2lwtg9vq],
.ez-config-btn-plus[b-nn2lwtg9vq] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 24px;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ez-config-btn-minus:hover[b-nn2lwtg9vq],
.ez-config-btn-plus:hover[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.4);
    transform: scale(1.05);
}

/* Options (durée engagement) */
.ez-config-options[b-nn2lwtg9vq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ez-config-option[b-nn2lwtg9vq] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.ez-config-option:hover[b-nn2lwtg9vq] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ez-config-option.active[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.5);
}

.ez-config-option-value[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-option-discount[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(120, 189, 118, 0.9);
    font-weight: 600;
}

/* Toggle (périodicité) */
.ez-config-toggle[b-nn2lwtg9vq] {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
}

.ez-config-toggle-btn[b-nn2lwtg9vq] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 251, 248, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ez-config-toggle-btn:hover[b-nn2lwtg9vq] {
    color: rgba(251, 251, 248, 0.9);
}

.ez-config-toggle-btn.active[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.3);
    color: #FBFBF8;
}

.ez-config-toggle-badge[b-nn2lwtg9vq] {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(120, 189, 118, 0.2);
    border-radius: 999px;
    color: #78BD76;
}

/* Summary (colonne droite) */
.ez-config-summary[b-nn2lwtg9vq] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.ez-config-summary-details[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-config-summary-row[b-nn2lwtg9vq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ez-config-summary-row.discount .ez-config-summary-label[b-nn2lwtg9vq] {
    color: rgba(120, 189, 118, 0.9);
}

.ez-config-summary-row.discount .ez-config-summary-value[b-nn2lwtg9vq] {
    color: #78BD76;
}

.ez-config-summary-label[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.7);
}

.ez-config-summary-value[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ez-config-summary-total-row[b-nn2lwtg9vq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ez-config-summary-total-label[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total-value[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FBFBF8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ez-config-summary-total-period[b-nn2lwtg9vq] {
    font-size: 20px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.6);
}

.ez-config-summary-info[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.6);
    text-align: center;
}

.ez-config-cta[b-nn2lwtg9vq] {
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
}

.ez-config-cta:hover[b-nn2lwtg9vq] {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .ez-config-layout[b-nn2lwtg9vq] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ez-config-summary[b-nn2lwtg9vq] {
        position: relative;
        top: 0;
    }
}

@media screen and (max-width: 800px) {
    .ez-config-section[b-nn2lwtg9vq] {
        padding: 60px 20px;
    }

    .ez-config-title[b-nn2lwtg9vq] {
        font-size: 32px;
    }

    .ez-config-options[b-nn2lwtg9vq] {
        grid-template-columns: 1fr;
    }

    .ez-config-summary-total-value[b-nn2lwtg9vq] {
        font-size: 32px;
    }

    .ez-config-cta[b-nn2lwtg9vq] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .ez-config-title[b-nn2lwtg9vq] {
        font-size: 28px;
    }

    .ez-config-summary[b-nn2lwtg9vq] {
        padding: 24px 20px;
    }

    .ez-config-summary-total-value[b-nn2lwtg9vq] {
        font-size: 28px;
    }

    .ez-config-toggle-btn[b-nn2lwtg9vq] {
        font-size: 14px;
        padding: 14px 16px;
    }
}/* ==========================
   SECTION CONFIGURATION
   ========================== */

.ez-config-section[b-nn2lwtg9vq] {
    padding: 80px 60px;
    background: linear-gradient(35deg, #0A0E27 0%, #141A35 100%);
}

.ez-config-container[b-nn2lwtg9vq] {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10%;
}

/* Header */
.ez-config-header[b-nn2lwtg9vq] {
    text-align: center;
    margin-bottom: 60px;
}

.ez-config-title[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #FBFBF8;
    margin-bottom: 12px;
}

.ez-config-subtitle[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    color: rgba(251, 251, 248, 0.7);
}

/* Form */
.ez-config-form[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 50px;
}

.ez-config-field[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ez-config-label[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ez-config-label-text[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-label-helper[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
}

/* Input groupe avec +/- */
.ez-config-input-group[b-nn2lwtg9vq] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
}

.ez-config-input[b-nn2lwtg9vq] {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FBFBF8;
    text-align: center;
    transition: all 0.3s ease;
}

.ez-config-input:focus[b-nn2lwtg9vq] {
    outline: none;
    border-color: rgba(57, 81, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ez-config-btn-minus[b-nn2lwtg9vq],
.ez-config-btn-plus[b-nn2lwtg9vq] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 24px;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ez-config-btn-minus:hover[b-nn2lwtg9vq],
.ez-config-btn-plus:hover[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.4);
    transform: scale(1.05);
}

/* Options (durée engagement) */
.ez-config-options[b-nn2lwtg9vq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ez-config-option[b-nn2lwtg9vq] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.ez-config-option:hover[b-nn2lwtg9vq] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ez-config-option.active[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.5);
}

.ez-config-option-value[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-option-discount[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(120, 189, 118, 0.9);
    font-weight: 600;
}

/* Toggle (périodicité) */
.ez-config-toggle[b-nn2lwtg9vq] {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    max-width: 400px;
}

.ez-config-toggle-btn[b-nn2lwtg9vq] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 251, 248, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ez-config-toggle-btn:hover[b-nn2lwtg9vq] {
    color: rgba(251, 251, 248, 0.9);
}

.ez-config-toggle-btn.active[b-nn2lwtg9vq] {
    background: rgba(57, 81, 158, 0.3);
    color: #FBFBF8;
}

.ez-config-toggle-badge[b-nn2lwtg9vq] {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(120, 189, 118, 0.2);
    border-radius: 999px;
    color: #78BD76;
}

/* Summary */
.ez-config-summary[b-nn2lwtg9vq] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ez-config-summary-details[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-config-summary-row[b-nn2lwtg9vq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ez-config-summary-row.discount .ez-config-summary-label[b-nn2lwtg9vq] {
    color: rgba(120, 189, 118, 0.9);
}

.ez-config-summary-row.discount .ez-config-summary-value[b-nn2lwtg9vq] {
    color: #78BD76;
}

.ez-config-summary-label[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.7);
}

.ez-config-summary-value[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total[b-nn2lwtg9vq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ez-config-summary-total-row[b-nn2lwtg9vq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ez-config-summary-total-label[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total-value[b-nn2lwtg9vq] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FBFBF8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ez-config-summary-total-period[b-nn2lwtg9vq] {
    font-size: 20px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.6);
}

.ez-config-summary-info[b-nn2lwtg9vq] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.6);
    text-align: center;
}

.ez-config-cta[b-nn2lwtg9vq] {
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
}

.ez-config-cta:hover[b-nn2lwtg9vq] {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 800px) {
    .ez-config-section[b-nn2lwtg9vq] {
        padding: 60px 20px;
    }

    .ez-config-title[b-nn2lwtg9vq] {
        font-size: 32px;
    }

    .ez-config-options[b-nn2lwtg9vq] {
        grid-template-columns: 1fr;
    }

    .ez-config-toggle[b-nn2lwtg9vq] {
        max-width: 100%;
    }

    .ez-config-summary-total-value[b-nn2lwtg9vq] {
        font-size: 32px;
    }

    .ez-config-cta[b-nn2lwtg9vq] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .ez-config-title[b-nn2lwtg9vq] {
        font-size: 28px;
    }

    .ez-config-input-group[b-nn2lwtg9vq] {
        max-width: 100%;
    }

    .ez-config-summary[b-nn2lwtg9vq] {
        padding: 24px 20px;
    }

    .ez-config-summary-total-value[b-nn2lwtg9vq] {
        font-size: 28px;
    }

    .ez-config-toggle-btn[b-nn2lwtg9vq] {
        font-size: 14px;
        padding: 14px 16px;
    }
}
/* Responsive */
@media screen and (max-width: 1400px) {
    .ez-pack-card[b-nn2lwtg9vq] {
        min-height: 400px;
        width: 300px;
    }
    
    .ez-pack-gifts[b-nn2lwtg9vq],
    .ez-pack-cash[b-nn2lwtg9vq],
    .ez-pack-pass[b-nn2lwtg9vq] {
        margin-left: -35px;
    }
    
    .ez-pack-icon[b-nn2lwtg9vq] {
        width: 80px;
        height: 80px;
    }
    
    .ez-pack-icon img[b-nn2lwtg9vq] {
        width: 48px;
        height: 48px;
    }
    
    .ez-pack-checkmark[b-nn2lwtg9vq] {
        width: 240px;
        height: 240px;
        bottom: -50px;
        right: -35px;
    }
    
    .ez-pack-ez[b-nn2lwtg9vq] {
        font-size: 22px;
    }
    
    .ez-pack-name[b-nn2lwtg9vq] {
        font-size: 40px;
    }
    
    .ez-pack-desc[b-nn2lwtg9vq] {
        font-size: 16px;
        padding-bottom: 70px;
    }
    
    .ez-pack-top[b-nn2lwtg9vq] {
        padding: 35px 30px 0;
    }
    
    .ez-pack-body[b-nn2lwtg9vq] {
        padding: 0 30px 35px;
    }
}

@media screen and (max-width: 1200px) {
    .ez-employer-layout[b-nn2lwtg9vq] {
        padding: 60px 40px;
    }
    
    .ez-panels[b-nn2lwtg9vq] {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .ez-pack-card[b-nn2lwtg9vq] {
        min-height: 360px;
        width: 270px;
    }
    
    .ez-pack-gifts[b-nn2lwtg9vq],
    .ez-pack-cash[b-nn2lwtg9vq],
    .ez-pack-pass[b-nn2lwtg9vq] {
        margin-left: -30px;
    }
    
    .ez-pack-icon[b-nn2lwtg9vq] {
        width: 75px;
        height: 75px;
    }
    
    .ez-pack-icon img[b-nn2lwtg9vq] {
        width: 45px;
        height: 45px;
    }
    
    .ez-pack-checkmark[b-nn2lwtg9vq] {
        width: 210px;
        height: 210px;
        bottom: -45px;
        right: -30px;
    }
    
    .ez-pack-ez[b-nn2lwtg9vq] {
        font-size: 20px;
    }
    
    .ez-pack-name[b-nn2lwtg9vq] {
        font-size: 36px;
    }
    
    .ez-pack-desc[b-nn2lwtg9vq] {
        font-size: 15px;
        padding-bottom: 60px;
    }
    
    .ez-pack-top[b-nn2lwtg9vq] {
        padding: 32px 28px 0;
    }
    
    .ez-pack-body[b-nn2lwtg9vq] {
        padding: 0 28px 32px;
    }
    
    .ez-main-title[b-nn2lwtg9vq] {
        font-size: 40px;
    }
}

@media screen and (max-width: 800px) {
    .ez-employer-layout[b-nn2lwtg9vq] {
        padding: 50px 20px;
    }
    
    .ez-main-title[b-nn2lwtg9vq] {
        font-size: 32px;
    }
    
    .ez-main-subtitle[b-nn2lwtg9vq] {
        font-size: 16px;
    }
    
    .ez-pack-grid[b-nn2lwtg9vq] {
        flex-wrap: wrap;
        gap: 20px;
        padding: 30px 0;
    }
    
    .ez-pack-card[b-nn2lwtg9vq] {
        min-height: 320px;
        width: 100%;
        max-width: 280px;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) !important;
        margin-left: 0 !important;
    }
    
    .ez-pack-icon[b-nn2lwtg9vq] {
        width: 70px;
        height: 70px;
    }
    
    .ez-pack-icon img[b-nn2lwtg9vq] {
        width: 42px;
        height: 42px;
    }
    
    .ez-pack-checkmark[b-nn2lwtg9vq] {
        width: 180px;
        height: 180px;
        bottom: -40px;
        right: -25px;
    }
    
    .ez-pack-ez[b-nn2lwtg9vq] {
        font-size: 18px;
    }
    
    .ez-pack-name[b-nn2lwtg9vq] {
        font-size: 32px;
    }
    
    .ez-pack-desc[b-nn2lwtg9vq] {
        font-size: 14px;
        padding-bottom: 55px;
        max-width: 65%;
    }
    
    .ez-pack-top[b-nn2lwtg9vq] {
        padding: 28px 24px 0;
    }
    
    .ez-pack-body[b-nn2lwtg9vq] {
        padding: 0 24px 28px;
        gap: 15px;
    }
    
    .ez-panel[b-nn2lwtg9vq] {
        padding: 0 10px;
    }
    
    .ez-main-button[b-nn2lwtg9vq] {
        width: 100%;
        min-width: unset;
    }
}

@media screen and (max-width: 480px) {
    .ez-employer-header[b-nn2lwtg9vq] {
        margin-bottom: 50px;
    }
    
    .ez-main-title[b-nn2lwtg9vq] {
        font-size: 26px;
    }
    
    .ez-main-subtitle[b-nn2lwtg9vq] {
        font-size: 14px;
    }
    
    .ez-pack-card[b-nn2lwtg9vq] {
        min-height: 280px;
        max-width: 100%;
    }
    
    .ez-pack-icon[b-nn2lwtg9vq] {
        width: 65px;
        height: 65px;
    }
    
    .ez-pack-icon img[b-nn2lwtg9vq] {
        width: 38px;
        height: 38px;
    }
    
    .ez-pack-checkmark[b-nn2lwtg9vq] {
        width: 150px;
        height: 150px;
        bottom: -30px;
        right: -20px;
    }
    
    .ez-pack-name[b-nn2lwtg9vq] {
        font-size: 28px;
    }
    
    .ez-pack-ez[b-nn2lwtg9vq] {
        font-size: 16px;
    }
    
    .ez-pack-desc[b-nn2lwtg9vq] {
        font-size: 13px;
        padding-bottom: 45px;
        max-width: 70%;
    }
    
    .ez-pack-top[b-nn2lwtg9vq] {
        padding: 24px 20px 0;
    }
    
    .ez-pack-body[b-nn2lwtg9vq] {
        padding: 0 20px 24px;
        gap: 12px;
    }
    
    .ez-panel-title[b-nn2lwtg9vq] {
        font-size: 24px;
    }
    
    .ez-panels[b-nn2lwtg9vq] {
        gap: 40px;
    }
}
/* /Components/Layout/Configurator/EmployeurWorld.razor.rz.scp.css */
/* ==========================
   EMPLOYEUR – DESIGN ÉPURÉ
   ========================== */

/* Import Google Fonts */

.ez-employer-layout[b-lujqusqdok] {
    padding: 80px 60px;
    background: linear-gradient(135deg, #0A0E27 0%, #141A35 100%);
    min-height: 100vh;
    color: #FBFBF8;
}

/* Header */
.ez-employer-header[b-lujqusqdok] {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}

.ez-main-title[b-lujqusqdok] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.02em;
    color: #FBFBF8;
    margin-bottom: 16px;
}

.ez-main-subtitle[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(251, 251, 248, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

/* Layout panneaux */
.ez-panels[b-lujqusqdok] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 60px;
}

/* Panneaux */
.ez-panel[b-lujqusqdok] {
    background: transparent;
    border-radius: 0;
    padding: 0 20px;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ez-panel-left[b-lujqusqdok] {
    border-top: none;
}

.ez-panel-right[b-lujqusqdok] {
    border-top: none;
}

.ez-panel-header[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chips */
.ez-chip[b-lujqusqdok] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 20px;
    border-radius: 999px;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #FBFBF8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ez-chip-blue[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.35);
    border: 1px solid rgba(57, 81, 158, 0.5);
}

.ez-chip-green[b-lujqusqdok] {
    background: rgba(120, 189, 118, 0.35);
    border: 1px solid rgba(120, 189, 118, 0.5);
}

.ez-panel-title[b-lujqusqdok] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FBFBF8;
    letter-spacing: -0.01em;
    margin-top: 8px;
}

.ez-panel-text[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(251, 251, 248, 0.7);
    max-width: 480px;
}

/* Grille packs */
.ez-pack-grid[b-lujqusqdok] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -20px;
    perspective: 1500px;
    padding: 40px 0;
    flex-wrap: nowrap;
    overflow-x: visible;
}

.ez-pack-grid-single[b-lujqusqdok] {
    display: flex;
    justify-content: center;
}

/* Cartes pack – Style carte inclinée */
.ez-pack-card[b-lujqusqdok] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 0;
    min-height: 480px;
    width: 360px;
    background: linear-gradient(135deg, #1a1f3a 0%, #0f1328 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
    transform-style: preserve-3d;
}

/* Variations de rotation pour chaque carte */
.ez-pack-lunch[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(-12deg) rotateX(2deg);
}

.ez-pack-gifts[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-cash[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(6deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-pass[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(12deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-tax[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(0deg) rotateX(2deg);
}

/* V background – maintenant subtil */
.ez-pack-v[b-lujqusqdok] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-radius: 18px;
    opacity: 0.08;
}

/* Couleurs V par pack – dégradés intenses */
.ez-pack-v-lunch[b-lujqusqdok] {
    background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%);
}

.ez-pack-v-gifts[b-lujqusqdok] {
    background: linear-gradient(135deg, #C03A29 0%, #E05040 50%, #C03A29 100%);
}

.ez-pack-v-cash[b-lujqusqdok] {
    background: linear-gradient(135deg, #7A4091 0%, #9B5FB5 50%, #7A4091 100%);
}

.ez-pack-v-pass[b-lujqusqdok] {
    background: linear-gradient(135deg, #3E4256 0%, #5A5F7A 50%, #3E4256 100%);
    opacity: 0.04;
}

.ez-pack-v-tax[b-lujqusqdok] {
    background: linear-gradient(135deg, #78BD76 0%, #96D394 50%, #78BD76 100%);
}

/* Contenu carte */
.ez-pack-top[b-lujqusqdok] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 42px 36px 0;
}

.ez-pack-brand[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.ez-pack-logo-full[b-lujqusqdok] {
    height: 28px;
    width: auto;
    object-fit: contain;
    max-width: 120px;
}

.ez-pack-icon[b-lujqusqdok] {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ez-pack-icon[b-lujqusqdok]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

/* Backgrounds colorés au hover */
.ez-pack-lunch:hover .ez-pack-icon[b-lujqusqdok]::before {
    background: rgba(232, 126, 32, 0.2);
    border-color: rgba(232, 126, 32, 0.4);
}

.ez-pack-gifts:hover .ez-pack-icon[b-lujqusqdok]::before {
    background: rgba(192, 58, 41, 0.2);
    border-color: rgba(192, 58, 41, 0.4);
}

.ez-pack-cash:hover .ez-pack-icon[b-lujqusqdok]::before {
    background: rgba(122, 64, 145, 0.2);
    border-color: rgba(122, 64, 145, 0.4);
}

.ez-pack-tax:hover .ez-pack-icon[b-lujqusqdok]::before {
    background: rgba(120, 189, 118, 0.2);
    border-color: rgba(120, 189, 118, 0.4);
}

.ez-pack-icon img[b-lujqusqdok] {
    position: relative;
    width: 55px;
    height: 55px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: all 0.4s ease;
}

/* Couleurs des icônes au hover */
.ez-pack-lunch:hover .ez-pack-icon img[b-lujqusqdok] {
    filter: none;
    opacity: 1;
}

.ez-pack-gifts:hover .ez-pack-icon img[b-lujqusqdok] {
    filter: none;
    opacity: 1;
}

.ez-pack-cash:hover .ez-pack-icon img[b-lujqusqdok] {
    filter: none;
    opacity: 1;
}

.ez-pack-tax:hover .ez-pack-icon img[b-lujqusqdok] {
    filter: none;
    opacity: 1;
}

.ez-pack-pass:hover .ez-pack-icon img[b-lujqusqdok] {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.ez-pack-ez[b-lujqusqdok] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 27px;
    font-weight: 700;
    color: rgba(251, 251, 248, 0.6);
    letter-spacing: 0.1em;
}

.ez-pack-name[b-lujqusqdok] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #FBFBF8;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ez-pack-body[b-lujqusqdok] {
    position: relative;
    z-index: 2;
    padding: 0 36px 42px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ez-pack-desc[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: rgba(251, 251, 248, 0.75);
    max-width: 65%;
    padding-bottom: 80px;
}

.ez-pack-checkmark[b-lujqusqdok] {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-top: auto;
    position: absolute;
    bottom: -60px;
    right: -40px;
    z-index: 3;
}

.ez-pack-checkmark img[b-lujqusqdok] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

/* Couleurs spécifiques des checkmarks */
.ez-pack-lunch .ez-pack-checkmark img[b-lujqusqdok] {
    filter: drop-shadow(0 15px 45px rgba(232, 126, 32, 0.8));
}

.ez-pack-gifts .ez-pack-checkmark img[b-lujqusqdok] {
    filter: drop-shadow(0 15px 45px rgba(192, 58, 41, 0.8));
}

.ez-pack-cash .ez-pack-checkmark img[b-lujqusqdok] {
    filter: drop-shadow(0 15px 45px rgba(122, 64, 145, 0.8));
}

.ez-pack-tax .ez-pack-checkmark img[b-lujqusqdok] {
    filter: drop-shadow(0 15px 45px rgba(120, 189, 118, 0.8));
}

/* Coming soon */
.ez-pack-comingsoon[b-lujqusqdok] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(180, 183, 201, 0.9);
    background: rgba(36, 40, 60, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(180, 183, 201, 0.2);
}

/* État désactivé */
.ez-pack-pass[b-lujqusqdok] {
    opacity: 1;
    cursor: not-allowed;
}

.ez-pack-pass .ez-pack-v[b-lujqusqdok] {
    opacity: 0.5;
}

.ez-pack-pass .ez-pack-name[b-lujqusqdok],
.ez-pack-pass .ez-pack-ez[b-lujqusqdok],
.ez-pack-pass .ez-pack-desc[b-lujqusqdok] {
    opacity: 0.6;
}

/* Hover effects */
.ez-pack-card:hover[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.ez-pack-lunch:hover[b-lujqusqdok],
.ez-pack-gifts:hover[b-lujqusqdok],
.ez-pack-cash:hover[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.05);
}

.ez-pack-pass:hover[b-lujqusqdok] {
    transform: perspective(1000px) rotateY(12deg) rotateX(2deg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* CTA principal */
.ez-main-cta[b-lujqusqdok] {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.ez-main-button[b-lujqusqdok] {
    position: relative;
    min-width: 320px;
    padding: 20px 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #FBFBF8;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ez-main-button[b-lujqusqdok]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ez-main-button:hover[b-lujqusqdok] {
    transform: translateY(-3px);
    box-shadow: 0 20px 60px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.ez-main-button:hover[b-lujqusqdok]::before {
    opacity: 1;
}

.ez-main-button:active[b-lujqusqdok] {
    transform: translateY(-1px);
}
/* ==========================
   SECTION CONFIGURATION
   ========================== */

.ez-config-container[b-lujqusqdok] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.ez-config-header[b-lujqusqdok] {
    text-align: center;
    margin-bottom: 60px;
}

.ez-config-title[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #FBFBF8;
    margin-bottom: 12px;
}
.ez-config-info-text[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 16px;
    border-radius: 12px;
    display: inline-block;
    margin-top: -10px;
    margin-bottom: 20px;
}
.ez-config-subtitle[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    color: rgba(251, 251, 248, 0.7);
}

/* Layout 2 colonnes */
.ez-config-layout[b-lujqusqdok] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    align-items: start;
    justify-items: center;
}

/* Form (colonne gauche) */
.ez-config-form[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ez-config-field[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ez-config-label[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ez-config-label-text[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-label-helper[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
}

/* Input groupe avec +/- */
.ez-config-input-group[b-lujqusqdok] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ez-config-input[b-lujqusqdok] {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FBFBF8;
    text-align: center;
    transition: all 0.3s ease;
}

.ez-config-input:focus[b-lujqusqdok] {
    outline: none;
    border-color: rgba(57, 81, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ez-config-btn-minus[b-lujqusqdok],
.ez-config-btn-plus[b-lujqusqdok] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 24px;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ez-config-btn-minus:hover[b-lujqusqdok],
.ez-config-btn-plus:hover[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.4);
    transform: scale(1.05);
}

/* Options (durée engagement) */
.ez-config-options[b-lujqusqdok] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ez-config-option[b-lujqusqdok] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.ez-config-option:hover[b-lujqusqdok] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ez-config-option.active[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.5);
}

.ez-config-option-value[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-option-discount[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(120, 189, 118, 0.9);
    font-weight: 600;
}

/* Toggle (périodicité) */
.ez-config-toggle[b-lujqusqdok] {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
}

.ez-config-toggle-btn[b-lujqusqdok] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 251, 248, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ez-config-toggle-btn:hover[b-lujqusqdok] {
    color: rgba(251, 251, 248, 0.9);
}

.ez-config-toggle-btn.active[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.3);
    color: #FBFBF8;
}

.ez-config-toggle-badge[b-lujqusqdok] {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(120, 189, 118, 0.2);
    border-radius: 999px;
    color: #78BD76;
}

/* Summary (colonne droite) */
.ez-config-summary[b-lujqusqdok] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.ez-config-summary-details[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-config-summary-row[b-lujqusqdok] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ez-config-summary-row.discount .ez-config-summary-label[b-lujqusqdok] {
    color: rgba(120, 189, 118, 0.9);
}

.ez-config-summary-row.discount .ez-config-summary-value[b-lujqusqdok] {
    color: #78BD76;
}

.ez-config-summary-label[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.7);
}

.ez-config-summary-value[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ez-config-summary-total-row[b-lujqusqdok] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ez-config-summary-total-label[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total-value[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FBFBF8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ez-config-summary-total-period[b-lujqusqdok] {
    font-size: 20px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.6);
}

.ez-config-summary-info[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.6);
    text-align: center;
}

.ez-config-cta[b-lujqusqdok] {
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
}

.ez-config-cta:hover[b-lujqusqdok] {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .ez-config-layout[b-lujqusqdok] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ez-config-summary[b-lujqusqdok] {
        position: relative;
        top: 0;
    }
}

@media screen and (max-width: 800px) {
    .ez-config-section[b-lujqusqdok] {
        padding: 60px 20px;
    }

    .ez-config-title[b-lujqusqdok] {
        font-size: 32px;
    }

    .ez-config-options[b-lujqusqdok] {
        grid-template-columns: 1fr;
    }

    .ez-config-summary-total-value[b-lujqusqdok] {
        font-size: 32px;
    }

    .ez-config-cta[b-lujqusqdok] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .ez-config-title[b-lujqusqdok] {
        font-size: 28px;
    }

    .ez-config-summary[b-lujqusqdok] {
        padding: 24px 20px;
    }

    .ez-config-summary-total-value[b-lujqusqdok] {
        font-size: 28px;
    }

    .ez-config-toggle-btn[b-lujqusqdok] {
        font-size: 14px;
        padding: 14px 16px;
    }
}/* ==========================
   SECTION CONFIGURATION
   ========================== */

.ez-config-section[b-lujqusqdok] {
    padding: 80px 60px;
    background: linear-gradient(35deg, #0A0E27 0%, #141A35 100%);
}

.ez-config-container[b-lujqusqdok] {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10%;
}

/* Header */
.ez-config-header[b-lujqusqdok] {
    text-align: center;
    margin-bottom: 60px;
}

.ez-config-title[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #FBFBF8;
    margin-bottom: 12px;
}

.ez-config-subtitle[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    color: rgba(251, 251, 248, 0.7);
}

/* Form */
.ez-config-form[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 50px;
}

.ez-config-field[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ez-config-label[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ez-config-label-text[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-label-helper[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
}

/* Input groupe avec +/- */
.ez-config-input-group[b-lujqusqdok] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
}

.ez-config-input[b-lujqusqdok] {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FBFBF8;
    text-align: center;
    transition: all 0.3s ease;
}

.ez-config-input:focus[b-lujqusqdok] {
    outline: none;
    border-color: rgba(57, 81, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ez-config-btn-minus[b-lujqusqdok],
.ez-config-btn-plus[b-lujqusqdok] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 24px;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ez-config-btn-minus:hover[b-lujqusqdok],
.ez-config-btn-plus:hover[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.4);
    transform: scale(1.05);
}

/* Options (durée engagement) */
.ez-config-options[b-lujqusqdok] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ez-config-option[b-lujqusqdok] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.ez-config-option:hover[b-lujqusqdok] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ez-config-option.active[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.5);
}

.ez-config-option-value[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-option-discount[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(120, 189, 118, 0.9);
    font-weight: 600;
}

/* Toggle (périodicité) */
.ez-config-toggle[b-lujqusqdok] {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    max-width: 400px;
}

.ez-config-toggle-btn[b-lujqusqdok] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 251, 248, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ez-config-toggle-btn:hover[b-lujqusqdok] {
    color: rgba(251, 251, 248, 0.9);
}

.ez-config-toggle-btn.active[b-lujqusqdok] {
    background: rgba(57, 81, 158, 0.3);
    color: #FBFBF8;
}

.ez-config-toggle-badge[b-lujqusqdok] {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(120, 189, 118, 0.2);
    border-radius: 999px;
    color: #78BD76;
}

/* Summary */
.ez-config-summary[b-lujqusqdok] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ez-config-summary-details[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-config-summary-row[b-lujqusqdok] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ez-config-summary-row.discount .ez-config-summary-label[b-lujqusqdok] {
    color: rgba(120, 189, 118, 0.9);
}

.ez-config-summary-row.discount .ez-config-summary-value[b-lujqusqdok] {
    color: #78BD76;
}

.ez-config-summary-label[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.7);
}

.ez-config-summary-value[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total[b-lujqusqdok] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ez-config-summary-total-row[b-lujqusqdok] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ez-config-summary-total-label[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total-value[b-lujqusqdok] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FBFBF8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ez-config-summary-total-period[b-lujqusqdok] {
    font-size: 20px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.6);
}

.ez-config-summary-info[b-lujqusqdok] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.6);
    text-align: center;
}

.ez-config-cta[b-lujqusqdok] {
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
}

.ez-config-cta:hover[b-lujqusqdok] {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 800px) {
    .ez-config-section[b-lujqusqdok] {
        padding: 60px 20px;
    }

    .ez-config-title[b-lujqusqdok] {
        font-size: 32px;
    }

    .ez-config-options[b-lujqusqdok] {
        grid-template-columns: 1fr;
    }

    .ez-config-toggle[b-lujqusqdok] {
        max-width: 100%;
    }

    .ez-config-summary-total-value[b-lujqusqdok] {
        font-size: 32px;
    }

    .ez-config-cta[b-lujqusqdok] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .ez-config-title[b-lujqusqdok] {
        font-size: 28px;
    }

    .ez-config-input-group[b-lujqusqdok] {
        max-width: 100%;
    }

    .ez-config-summary[b-lujqusqdok] {
        padding: 24px 20px;
    }

    .ez-config-summary-total-value[b-lujqusqdok] {
        font-size: 28px;
    }

    .ez-config-toggle-btn[b-lujqusqdok] {
        font-size: 14px;
        padding: 14px 16px;
    }
}
/* Responsive */
@media screen and (max-width: 1400px) {
    .ez-pack-card[b-lujqusqdok] {
        min-height: 400px;
        width: 300px;
    }
    
    .ez-pack-gifts[b-lujqusqdok],
    .ez-pack-cash[b-lujqusqdok],
    .ez-pack-pass[b-lujqusqdok] {
        margin-left: -35px;
    }
    
    .ez-pack-icon[b-lujqusqdok] {
        width: 80px;
        height: 80px;
    }
    
    .ez-pack-icon img[b-lujqusqdok] {
        width: 48px;
        height: 48px;
    }
    
    .ez-pack-checkmark[b-lujqusqdok] {
        width: 240px;
        height: 240px;
        bottom: -50px;
        right: -35px;
    }
    
    .ez-pack-ez[b-lujqusqdok] {
        font-size: 22px;
    }
    
    .ez-pack-name[b-lujqusqdok] {
        font-size: 40px;
    }
    
    .ez-pack-desc[b-lujqusqdok] {
        font-size: 16px;
        padding-bottom: 70px;
    }
    
    .ez-pack-top[b-lujqusqdok] {
        padding: 35px 30px 0;
    }
    
    .ez-pack-body[b-lujqusqdok] {
        padding: 0 30px 35px;
    }
}

@media screen and (max-width: 1200px) {
    .ez-employer-layout[b-lujqusqdok] {
        padding: 60px 40px;
    }
    
    .ez-panels[b-lujqusqdok] {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .ez-pack-card[b-lujqusqdok] {
        min-height: 360px;
        width: 270px;
    }
    
    .ez-pack-gifts[b-lujqusqdok],
    .ez-pack-cash[b-lujqusqdok],
    .ez-pack-pass[b-lujqusqdok] {
        margin-left: -30px;
    }
    
    .ez-pack-icon[b-lujqusqdok] {
        width: 75px;
        height: 75px;
    }
    
    .ez-pack-icon img[b-lujqusqdok] {
        width: 45px;
        height: 45px;
    }
    
    .ez-pack-checkmark[b-lujqusqdok] {
        width: 210px;
        height: 210px;
        bottom: -45px;
        right: -30px;
    }
    
    .ez-pack-ez[b-lujqusqdok] {
        font-size: 20px;
    }
    
    .ez-pack-name[b-lujqusqdok] {
        font-size: 36px;
    }
    
    .ez-pack-desc[b-lujqusqdok] {
        font-size: 15px;
        padding-bottom: 60px;
    }
    
    .ez-pack-top[b-lujqusqdok] {
        padding: 32px 28px 0;
    }
    
    .ez-pack-body[b-lujqusqdok] {
        padding: 0 28px 32px;
    }
    
    .ez-main-title[b-lujqusqdok] {
        font-size: 40px;
    }
}

@media screen and (max-width: 800px) {
    .ez-employer-layout[b-lujqusqdok] {
        padding: 50px 20px;
    }
    
    .ez-main-title[b-lujqusqdok] {
        font-size: 32px;
    }
    
    .ez-main-subtitle[b-lujqusqdok] {
        font-size: 16px;
    }
    
    .ez-pack-grid[b-lujqusqdok] {
        flex-wrap: wrap;
        gap: 20px;
        padding: 30px 0;
    }
    
    .ez-pack-card[b-lujqusqdok] {
        min-height: 320px;
        width: 100%;
        max-width: 280px;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) !important;
        margin-left: 0 !important;
    }
    
    .ez-pack-icon[b-lujqusqdok] {
        width: 70px;
        height: 70px;
    }
    
    .ez-pack-icon img[b-lujqusqdok] {
        width: 42px;
        height: 42px;
    }
    
    .ez-pack-checkmark[b-lujqusqdok] {
        width: 180px;
        height: 180px;
        bottom: -40px;
        right: -25px;
    }
    
    .ez-pack-ez[b-lujqusqdok] {
        font-size: 18px;
    }
    
    .ez-pack-name[b-lujqusqdok] {
        font-size: 32px;
    }
    
    .ez-pack-desc[b-lujqusqdok] {
        font-size: 14px;
        padding-bottom: 55px;
        max-width: 65%;
    }
    
    .ez-pack-top[b-lujqusqdok] {
        padding: 28px 24px 0;
    }
    
    .ez-pack-body[b-lujqusqdok] {
        padding: 0 24px 28px;
        gap: 15px;
    }
    
    .ez-panel[b-lujqusqdok] {
        padding: 0 10px;
    }
    
    .ez-main-button[b-lujqusqdok] {
        width: 100%;
        min-width: unset;
    }
}

@media screen and (max-width: 480px) {
    .ez-employer-header[b-lujqusqdok] {
        margin-bottom: 50px;
    }
    
    .ez-main-title[b-lujqusqdok] {
        font-size: 26px;
    }
    
    .ez-main-subtitle[b-lujqusqdok] {
        font-size: 14px;
    }
    
    .ez-pack-card[b-lujqusqdok] {
        min-height: 280px;
        max-width: 100%;
    }
    
    .ez-pack-icon[b-lujqusqdok] {
        width: 65px;
        height: 65px;
    }
    
    .ez-pack-icon img[b-lujqusqdok] {
        width: 38px;
        height: 38px;
    }
    
    .ez-pack-checkmark[b-lujqusqdok] {
        width: 150px;
        height: 150px;
        bottom: -30px;
        right: -20px;
    }
    
    .ez-pack-name[b-lujqusqdok] {
        font-size: 28px;
    }
    
    .ez-pack-ez[b-lujqusqdok] {
        font-size: 16px;
    }
    
    .ez-pack-desc[b-lujqusqdok] {
        font-size: 13px;
        padding-bottom: 45px;
        max-width: 70%;
    }
    
    .ez-pack-top[b-lujqusqdok] {
        padding: 24px 20px 0;
    }
    
    .ez-pack-body[b-lujqusqdok] {
        padding: 0 20px 24px;
        gap: 12px;
    }
    
    .ez-panel-title[b-lujqusqdok] {
        font-size: 24px;
    }
    
    .ez-panels[b-lujqusqdok] {
        gap: 40px;
    }
}
/* /Components/Layout/Configurator/FormInfo.razor.rz.scp.css */
/* ==========================
   SECTION 1 – DESIGN ÉPURÉ
   ========================== */

.MainContainer[b-lgyk9ipgch] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 100vh;
    max-height: 100vh;
    gap: 0;
    justify-items: stretch;
    align-content: stretch;
    justify-content: space-between;
    background: linear-gradient(135deg, #0A0E27 0%, #141A35 100%);
    color: #FBFBF8;
    overflow: hidden;
}

/* Colonnes */
.section-1[b-lgyk9ipgch] {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.section-2[b-lgyk9ipgch] {
    grid-area: 1 / 2 / 2 / 3;
    width: 100%;
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    padding: 40px 40px 60px;
    box-sizing: border-box;
    background: radial-gradient(circle at top left, rgba(90, 110, 200, 0.35), transparent 60%),
                radial-gradient(circle at bottom right, rgba(120, 189, 118, 0.2), transparent 55%),
                #0A0E27;
    position: relative;
    overflow: hidden;
}

/* Erreur champ */
.missing-field[b-lgyk9ipgch] {
    color: #FF6B6B;
    font-size: 11px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    text-wrap: nowrap;
}

/* Image */
.custom-image[b-lgyk9ipgch] {
    margin-left: 0;
    max-width: 420px;
    width: 100%;
    transform: translateY(10px);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.9));
}

/* Texte principal */
.title[b-lgyk9ipgch] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    color: #FBFBF8;
    letter-spacing: -0.02em;
}

.description[b-lgyk9ipgch] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: rgba(251, 251, 248, 0.75);
}

/* Layout interne */
.parent[b-lgyk9ipgch] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 720px;
    padding: 60px 80px;
    padding-right: 40px;
    box-sizing: border-box;
}

.div1[b-lgyk9ipgch],
.div2[b-lgyk9ipgch],
.div3[b-lgyk9ipgch] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.div2[b-lgyk9ipgch] {
    margin-top: 30px;
}

.div3[b-lgyk9ipgch] {
    margin-top: 12px;
    gap: 40px;
    flex-wrap: wrap;
}

.div-4[b-lgyk9ipgch] {
    display: flex;
    justify-content: flex-end;
}

/* Card checkbox */
.parent-inside-checkbox[b-lgyk9ipgch] {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 16, 42, 0.8);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
    min-height: 80px;
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;
    width: 100%;
    padding: 16px 18px;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.parent-inside-checkbox:hover[b-lgyk9ipgch] {
    box-shadow: 0 22px 70px rgba(57, 81, 158, 0.6);
    border-color: rgba(57, 81, 158, 0.7);
    transform: translateY(-4px);
}

/* Contenu checkbox */
.div1-inside-checkbox[b-lgyk9ipgch] {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.div1-inside-checkbox span[b-lgyk9ipgch] {
    order: 1;
    color: #FBFBF8;
}

.div1-inside-checkbox div[b-lgyk9ipgch] {
    order: 2;
}

.div2-inside-checkbox[b-lgyk9ipgch] {
    grid-area: 2 / 1 / 3 / 2;
}

.div3-inside-checkbox[b-lgyk9ipgch] {
    grid-area: 3 / 1 / 4 / 2;
}

.checkbox-title[b-lgyk9ipgch] {
    color: #FBFBF8;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.checkbox-description[b-lgyk9ipgch] {
    color: rgba(251, 251, 248, 0.7);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Bouton check */
.check-box-button[b-lgyk9ipgch] {
    border-radius: 999px;
    border: 1px solid rgba(180, 183, 201, 0.7);
    background: rgba(22, 26, 56, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}

.check-box-button i[b-lgyk9ipgch] {
    font-size: 18px;
    color: transparent;
}

.check-box-button.active[b-lgyk9ipgch] {
    background: linear-gradient(135deg, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 34px rgba(110, 107, 244, 0.8);
}

.check-box-button.active i[b-lgyk9ipgch] {
    color: #FBFBF8;
}

/* Containers internes */
.container-checkbox[b-lgyk9ipgch] {
    width: 100%;
}

.checkbox-info-container[b-lgyk9ipgch] {
    flex: 1;
}

.checkbox-button-container[b-lgyk9ipgch] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
}

/* Boutons basiques */
.basic-button[b-lgyk9ipgch] {
    background-color: transparent;
    padding: 0;
    display: flex;
    border: none;
    gap: 14px;
    align-items: center;
    cursor: pointer;
}

.basic-button-border[b-lgyk9ipgch] {
    background-color: transparent;
    padding: 0 16px;
    display: flex;
    gap: 14px;
    border-radius: 999px;
}

/* Message d’erreur global */
.message-box[b-lgyk9ipgch] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #FF6B6B;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 13px;
}

/* Lock scroll */
.noscroll[b-lgyk9ipgch] {
    overflow: hidden;
}

/* CTA principal avec input (style pack) */
.special-button-modal[b-lgyk9ipgch] {
    display: grid;
    grid-template-columns: 0.9fr 0.35fr;
    grid-template-rows: 52px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    color: #FBFBF8;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 52px;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(57, 81, 158, 0.5);
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.9) 0%, rgba(50, 91, 169, 0.9) 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.special-button-modal[b-lgyk9ipgch]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.special-button-modal:hover[b-lgyk9ipgch] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 60px rgba(57, 81, 158, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.special-button-modal:hover[b-lgyk9ipgch]::before {
    opacity: 1;
}

/* Inputs dans CTA */
.input-custom-left[b-lgyk9ipgch] {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    width: max-content;
    justify-content: center;
    margin: 0 10px 0 18px;
}

.input-custom-right[b-lgyk9ipgch] {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    gap: 12px;
}

.vertical-separator[b-lgyk9ipgch] {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    height: 60%;
    width: 1px;
}

/* Input valeur principale */
.custom-input-style-left-content[b-lgyk9ipgch] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    color: #FBFBF8;
    font-size: 17px;
    font-weight: 700;
    padding: 0 8px;
    outline: none;
}

/* Input secondaire / texte */
.custom-input-style[b-lgyk9ipgch] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(251, 251, 248, 0.9);
    outline: none;
}

/* Input plus / minus */
.input-plus-minus-parent[b-lgyk9ipgch] {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr;
    grid-template-rows: 42px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    width: 200px;
    outline: none;
    overflow: hidden;
}

.input-plus-minus-left[b-lgyk9ipgch] {
    grid-area: 1 / 1 / 2 / 2;
}

.simulator-input-middle[b-lgyk9ipgch] {
    grid-area: 1 / 2 / 2 / 3;
}

.input-plus-minus-right[b-lgyk9ipgch] {
    grid-area: 1 / 3 / 2 / 4;
}

.button-simulator-plus-minus[b-lgyk9ipgch] {
    background-color: transparent;
    border: none;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    padding: 8px 12px;
    font-style: normal;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-simulator-plus-minus:hover:not(.active)[b-lgyk9ipgch] {
    background: rgba(57, 81, 158, 0.35);
}

.button-simulator-plus-minus.active[b-lgyk9ipgch] {
    color: rgba(174, 174, 174, 0.8);
}

/* Input numérique milieu */
.simulator-input-middle .custom-input-style[b-lgyk9ipgch] {
    font-size: 17px;
    font-weight: 600;
}

/* Conteneur input + label */
.number-input-container-v[b-lgyk9ipgch] {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Image + texte */
.image-container[b-lgyk9ipgch] {
    display: flex;
    gap: 26px;
    flex-direction: row;
    align-items: center;
}

.image-description[b-lgyk9ipgch] {
    color: rgba(251, 251, 248, 0.8);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
}

/* Liste infos */
.list-informations[b-lgyk9ipgch] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.list-title[b-lgyk9ipgch] {
    color: rgba(251, 251, 248, 0.9);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.list-info[b-lgyk9ipgch] {
    color: rgba(251, 251, 248, 0.75);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    gap: 10px;
    display: flex;
}

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

@media screen and (max-width: 1200px) {
    .MainContainer[b-lgyk9ipgch] {
        grid-template-columns: 1fr 1fr;
    }

    .parent[b-lgyk9ipgch] {
        padding: 50px 50px 50px 40px;
    }

    .title[b-lgyk9ipgch] {
        font-size: 44px;
    }
}

@media screen and (max-width: 1024px) {
    .MainContainer[b-lgyk9ipgch] {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .section-2[b-lgyk9ipgch] {
        display: none;
    }

    .section-1[b-lgyk9ipgch] {
        justify-content: center;
    }

    .parent[b-lgyk9ipgch],
    .div1[b-lgyk9ipgch],
    .div2[b-lgyk9ipgch],
    .div3[b-lgyk9ipgch],
    .div-4[b-lgyk9ipgch],
    .div5[b-lgyk9ipgch] {
        width: 100%;
    }

    .parent[b-lgyk9ipgch] {
        align-items: flex-start;
        padding: 50px 32px;
    }

    .container-choice[b-lgyk9ipgch] {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .parent-inside-checkbox[b-lgyk9ipgch] {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .MainContainer[b-lgyk9ipgch] {
        margin-top: 40px;
    }

    .parent[b-lgyk9ipgch] {
        padding: 40px 24px;
    }

    .title[b-lgyk9ipgch] {
        font-size: 34px;
    }

    .checkbox-title[b-lgyk9ipgch] {
        font-size: 15px;
    }

    .special-button-modal[b-lgyk9ipgch] {
        width: 100%;
    }

    .input-plus-minus-parent[b-lgyk9ipgch] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .title[b-lgyk9ipgch] {
        font-size: 28px;
    }

    .checkbox-title[b-lgyk9ipgch] {
        font-size: 14px;
    }

    .parent[b-lgyk9ipgch] {
        padding: 32px 20px;
    }

    .special-button-modal[b-lgyk9ipgch] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .vertical-separator[b-lgyk9ipgch] {
        display: none;
    }

    .input-custom-left[b-lgyk9ipgch],
    .input-custom-right[b-lgyk9ipgch] {
        margin: 6px 12px;
        justify-content: center;
    }
}
/* /Components/Layout/Configurator/ProWorld.razor.rz.scp.css */
/* ==========================
   EMPLOYEUR – DESIGN ÉPURÉ
   ========================== */

/* Import Google Fonts */

.ez-employer-layout[b-z4udakb0ax] {
    padding: 80px 60px;
    background: linear-gradient(135deg, #0A0E27 0%, #141A35 100%);
    min-height: 100vh;
    color: #FBFBF8;
}

/* Header */
.ez-employer-header[b-z4udakb0ax] {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}

.ez-main-title[b-z4udakb0ax] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.02em;
    color: #FBFBF8;
    margin-bottom: 16px;
}

.ez-main-subtitle[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(251, 251, 248, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

/* Layout panneaux */
.ez-panels[b-z4udakb0ax] {
    background: transparent;
    border-radius: 0;
    padding: 0 20px;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: space-between;
}

/* Panneaux */
.ez-panel[b-z4udakb0ax] {
    background: transparent;
    border-radius: 0;
    padding: 0 20px;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ez-panel-left[b-z4udakb0ax] {
    border-top: none;
}

.ez-panel-right[b-z4udakb0ax] {
    border-top: none;
}

.ez-panel-header[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chips */
.ez-chip[b-z4udakb0ax] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 20px;
    border-radius: 999px;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #FBFBF8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ez-chip-blue[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.35);
    border: 1px solid rgba(57, 81, 158, 0.5);
}

.ez-chip-green[b-z4udakb0ax] {
    background: rgba(120, 189, 118, 0.35);
    border: 1px solid rgba(120, 189, 118, 0.5);
}

.ez-panel-title[b-z4udakb0ax] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FBFBF8;
    letter-spacing: -0.01em;
    margin-top: 8px;
}

.ez-panel-text[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(251, 251, 248, 0.7);
    max-width: 480px;
}

/* Grille packs */
.ez-pack-grid[b-z4udakb0ax] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
    perspective: 1500px;
    padding: 40px 0;
    flex-wrap: nowrap;
    overflow-x: visible;
}

.ez-pack-grid-single[b-z4udakb0ax] {
    display: flex;
    justify-content: center;
}

/* Cartes pack – Style carte inclinée */
.ez-pack-card[b-z4udakb0ax] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 0;
    min-height: 480px;
    width: 360px;
    background: linear-gradient(135deg, #1a1f3a 0%, #0f1328 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
    transform-style: preserve-3d;
}

/* Variations de rotation pour chaque carte */
.ez-pack-lunch[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(-12deg) rotateX(2deg);
}

.ez-pack-gifts[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-cash[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(6deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-pass[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(12deg) rotateX(2deg);
    margin-left: -45px;
}

.ez-pack-tax[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(0deg) rotateX(2deg);
}

/* V background – maintenant subtil */
.ez-pack-v[b-z4udakb0ax] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-radius: 18px;
    opacity: 0.08;
}

/* Couleurs V par pack – dégradés intenses */
.ez-pack-v-lunch[b-z4udakb0ax] {
    background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%);
}

.ez-pack-v-gifts[b-z4udakb0ax] {
    background: linear-gradient(135deg, #C03A29 0%, #E05040 50%, #C03A29 100%);
}

.ez-pack-v-cash[b-z4udakb0ax] {
    background: linear-gradient(135deg, #7A4091 0%, #9B5FB5 50%, #7A4091 100%);
}

.ez-pack-v-pass[b-z4udakb0ax] {
    background: linear-gradient(135deg, #3E4256 0%, #5A5F7A 50%, #3E4256 100%);
    opacity: 0.04;
}

.ez-pack-v-tax[b-z4udakb0ax] {
    background: linear-gradient(135deg, #78BD76 0%, #96D394 50%, #78BD76 100%);
}

/* Contenu carte */
.ez-pack-top[b-z4udakb0ax] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 42px 36px 0;
}

.ez-pack-brand[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.ez-pack-logo-full[b-z4udakb0ax] {
    height: 28px;
    width: auto;
    object-fit: contain;
    max-width: 120px;
}

.ez-pack-icon[b-z4udakb0ax] {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ez-pack-icon[b-z4udakb0ax]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

/* Backgrounds colorés au hover */
.ez-pack-lunch:hover .ez-pack-icon[b-z4udakb0ax]::before {
    background: rgba(232, 126, 32, 0.2);
    border-color: rgba(232, 126, 32, 0.4);
}

.ez-pack-gifts:hover .ez-pack-icon[b-z4udakb0ax]::before {
    background: rgba(192, 58, 41, 0.2);
    border-color: rgba(192, 58, 41, 0.4);
}

.ez-pack-cash:hover .ez-pack-icon[b-z4udakb0ax]::before {
    background: rgba(122, 64, 145, 0.2);
    border-color: rgba(122, 64, 145, 0.4);
}

.ez-pack-tax:hover .ez-pack-icon[b-z4udakb0ax]::before {
    background: rgba(120, 189, 118, 0.2);
    border-color: rgba(120, 189, 118, 0.4);
}

.ez-pack-icon img[b-z4udakb0ax] {
    position: relative;
    width: 55px;
    height: 55px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: all 0.4s ease;
}

/* Couleurs des icônes au hover */
.ez-pack-lunch:hover .ez-pack-icon img[b-z4udakb0ax] {
    filter: none;
    opacity: 1;
}

.ez-pack-gifts:hover .ez-pack-icon img[b-z4udakb0ax] {
    filter: none;
    opacity: 1;
}

.ez-pack-cash:hover .ez-pack-icon img[b-z4udakb0ax] {
    filter: none;
    opacity: 1;
}

.ez-pack-tax:hover .ez-pack-icon img[b-z4udakb0ax] {
    filter: none;
    opacity: 1;
}

.ez-pack-pass:hover .ez-pack-icon img[b-z4udakb0ax] {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.ez-pack-ez[b-z4udakb0ax] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 27px;
    font-weight: 700;
    color: rgba(251, 251, 248, 0.6);
    letter-spacing: 0.1em;
}

.ez-pack-name[b-z4udakb0ax] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #FBFBF8;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ez-pack-body[b-z4udakb0ax] {
    position: relative;
    z-index: 2;
    padding: 0 36px 42px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ez-pack-desc[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: rgba(251, 251, 248, 0.75);
    max-width: 65%;
    padding-bottom: 80px;
}

.ez-pack-checkmark[b-z4udakb0ax] {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-top: auto;
    position: absolute;
    bottom: -60px;
    right: -40px;
    z-index: 3;
}

.ez-pack-checkmark img[b-z4udakb0ax] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

/* Couleurs spécifiques des checkmarks */
.ez-pack-lunch .ez-pack-checkmark img[b-z4udakb0ax] {
    filter: drop-shadow(0 15px 45px rgba(232, 126, 32, 0.8));
}

.ez-pack-gifts .ez-pack-checkmark img[b-z4udakb0ax] {
    filter: drop-shadow(0 15px 45px rgba(192, 58, 41, 0.8));
}

.ez-pack-cash .ez-pack-checkmark img[b-z4udakb0ax] {
    filter: drop-shadow(0 15px 45px rgba(122, 64, 145, 0.8));
}

.ez-pack-tax .ez-pack-checkmark img[b-z4udakb0ax] {
    filter: drop-shadow(0 15px 45px rgba(120, 189, 118, 0.8));
}

/* Coming soon */
.ez-pack-comingsoon[b-z4udakb0ax] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(180, 183, 201, 0.9);
    background: rgba(36, 40, 60, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(180, 183, 201, 0.2);
}

/* État désactivé */
.ez-pack-pass[b-z4udakb0ax] {
    opacity: 1;
    cursor: not-allowed;
}

.ez-pack-pass .ez-pack-v[b-z4udakb0ax] {
    opacity: 0.5;
}

.ez-pack-pass .ez-pack-name[b-z4udakb0ax],
.ez-pack-pass .ez-pack-ez[b-z4udakb0ax],
.ez-pack-pass .ez-pack-desc[b-z4udakb0ax] {
    opacity: 0.6;
}

/* Hover effects */
.ez-pack-card:hover[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.ez-pack-lunch:hover[b-z4udakb0ax],
.ez-pack-gifts:hover[b-z4udakb0ax],
.ez-pack-cash:hover[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px) scale(1.05);
}

.ez-pack-pass:hover[b-z4udakb0ax] {
    transform: perspective(1000px) rotateY(12deg) rotateX(2deg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* CTA principal */
.ez-main-cta[b-z4udakb0ax] {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.ez-main-button[b-z4udakb0ax] {
    position: relative;
    min-width: 320px;
    padding: 20px 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #FBFBF8;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ez-main-button[b-z4udakb0ax]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ez-main-button:hover[b-z4udakb0ax] {
    transform: translateY(-3px);
    box-shadow: 0 20px 60px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.ez-main-button:hover[b-z4udakb0ax]::before {
    opacity: 1;
}

.ez-main-button:active[b-z4udakb0ax] {
    transform: translateY(-1px);
}
/* ==========================
   SECTION CONFIGURATION
   ========================== */

.ez-config-section[b-z4udakb0ax] {
    padding: 80px 60px;
    background: linear-gradient(35deg, #0A0E27 0%, #141A35 100%);
}
.ez-config-container[b-z4udakb0ax] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.ez-config-header[b-z4udakb0ax] {
    text-align: center;
    margin-bottom: 60px;
}

.ez-config-title[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #FBFBF8;
    margin-bottom: 12px;
}

.ez-config-subtitle[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    color: rgba(251, 251, 248, 0.7);
}

/* Layout 2 colonnes */
.ez-config-layout[b-z4udakb0ax] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Form (colonne gauche) */
.ez-config-form[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ez-config-field[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ez-config-label[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ez-config-label-text[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-label-helper[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
}

/* Input groupe avec +/- */
.ez-config-input-group[b-z4udakb0ax] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ez-config-input[b-z4udakb0ax] {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FBFBF8;
    text-align: center;
    transition: all 0.3s ease;
}

.ez-config-input:focus[b-z4udakb0ax] {
    outline: none;
    border-color: rgba(57, 81, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ez-config-btn-minus[b-z4udakb0ax],
.ez-config-btn-plus[b-z4udakb0ax] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 24px;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ez-config-btn-minus:hover[b-z4udakb0ax],
.ez-config-btn-plus:hover[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.4);
    transform: scale(1.05);
}

/* Options (durée engagement) */
.ez-config-options[b-z4udakb0ax] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ez-config-option[b-z4udakb0ax] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.ez-config-option:hover[b-z4udakb0ax] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ez-config-option.active[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.5);
}

.ez-config-option-value[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-option-discount[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(120, 189, 118, 0.9);
    font-weight: 600;
}

/* Toggle (périodicité) */
.ez-config-toggle[b-z4udakb0ax] {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
}

.ez-config-toggle-btn[b-z4udakb0ax] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 251, 248, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ez-config-toggle-btn:hover[b-z4udakb0ax] {
    color: rgba(251, 251, 248, 0.9);
}

.ez-config-toggle-btn.active[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.3);
    color: #FBFBF8;
}

.ez-config-toggle-badge[b-z4udakb0ax] {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(120, 189, 118, 0.2);
    border-radius: 999px;
    color: #78BD76;
}

/* Summary (colonne droite) */
.ez-config-summary[b-z4udakb0ax] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.ez-config-summary-details[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-config-summary-row[b-z4udakb0ax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ez-config-summary-row.discount .ez-config-summary-label[b-z4udakb0ax] {
    color: rgba(120, 189, 118, 0.9);
}

.ez-config-summary-row.discount .ez-config-summary-value[b-z4udakb0ax] {
    color: #78BD76;
}

.ez-config-summary-label[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.7);
}

.ez-config-summary-value[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ez-config-summary-total-row[b-z4udakb0ax] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ez-config-summary-total-label[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total-value[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FBFBF8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ez-config-summary-total-period[b-z4udakb0ax] {
    font-size: 20px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.6);
}

.ez-config-summary-info[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.6);
    text-align: center;
}

.ez-config-cta[b-z4udakb0ax] {
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
}

.ez-config-cta:hover[b-z4udakb0ax] {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .ez-config-layout[b-z4udakb0ax] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ez-config-summary[b-z4udakb0ax] {
        position: relative;
        top: 0;
    }
}

@media screen and (max-width: 800px) {
    .ez-config-section[b-z4udakb0ax] {
        padding: 60px 20px;
    }

    .ez-config-title[b-z4udakb0ax] {
        font-size: 32px;
    }

    .ez-config-options[b-z4udakb0ax] {
        grid-template-columns: 1fr;
    }

    .ez-config-summary-total-value[b-z4udakb0ax] {
        font-size: 32px;
    }

    .ez-config-cta[b-z4udakb0ax] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .ez-config-title[b-z4udakb0ax] {
        font-size: 28px;
    }

    .ez-config-summary[b-z4udakb0ax] {
        padding: 24px 20px;
    }

    .ez-config-summary-total-value[b-z4udakb0ax] {
        font-size: 28px;
    }

    .ez-config-toggle-btn[b-z4udakb0ax] {
        font-size: 14px;
        padding: 14px 16px;
    }
}/* ==========================
   SECTION CONFIGURATION
   ========================== */

.ez-config-section[b-z4udakb0ax] {
    padding: 80px 60px;
    background: linear-gradient(35deg, #0A0E27 0%, #141A35 100%);
}

.ez-config-container[b-z4udakb0ax] {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10%;
}

/* Header */
.ez-config-header[b-z4udakb0ax] {
    text-align: center;
    margin-bottom: 60px;
}

.ez-config-title[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #FBFBF8;
    margin-bottom: 12px;
}

.ez-config-subtitle[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    color: rgba(251, 251, 248, 0.7);
}

/* Form */
.ez-config-form[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 50px;
}

.ez-config-field[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ez-config-label[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ez-config-label-text[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-label-helper[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(251, 251, 248, 0.6);
}

/* Input groupe avec +/- */
.ez-config-input-group[b-z4udakb0ax] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
}

.ez-config-input[b-z4udakb0ax] {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FBFBF8;
    text-align: center;
    transition: all 0.3s ease;
}

.ez-config-input:focus[b-z4udakb0ax] {
    outline: none;
    border-color: rgba(57, 81, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ez-config-btn-minus[b-z4udakb0ax],
.ez-config-btn-plus[b-z4udakb0ax] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 24px;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ez-config-btn-minus:hover[b-z4udakb0ax],
.ez-config-btn-plus:hover[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.4);
    transform: scale(1.05);
}

/* Options (durée engagement) */
.ez-config-options[b-z4udakb0ax] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ez-config-option[b-z4udakb0ax] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.ez-config-option:hover[b-z4udakb0ax] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ez-config-option.active[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.2);
    border-color: rgba(57, 81, 158, 0.5);
}

.ez-config-option-value[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-option-discount[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: rgba(120, 189, 118, 0.9);
    font-weight: 600;
}

/* Toggle (périodicité) */
.ez-config-toggle[b-z4udakb0ax] {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    max-width: 400px;
}

.ez-config-toggle-btn[b-z4udakb0ax] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 251, 248, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ez-config-toggle-btn:hover[b-z4udakb0ax] {
    color: rgba(251, 251, 248, 0.9);
}

.ez-config-toggle-btn.active[b-z4udakb0ax] {
    background: rgba(57, 81, 158, 0.3);
    color: #FBFBF8;
}

.ez-config-toggle-badge[b-z4udakb0ax] {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(120, 189, 118, 0.2);
    border-radius: 999px;
    color: #78BD76;
}

/* Summary */
.ez-config-summary[b-z4udakb0ax] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ez-config-summary-details[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-config-summary-row[b-z4udakb0ax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ez-config-summary-row.discount .ez-config-summary-label[b-z4udakb0ax] {
    color: rgba(120, 189, 118, 0.9);
}

.ez-config-summary-row.discount .ez-config-summary-value[b-z4udakb0ax] {
    color: #78BD76;
}

.ez-config-summary-label[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.7);
}

.ez-config-summary-value[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total[b-z4udakb0ax] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ez-config-summary-total-row[b-z4udakb0ax] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ez-config-summary-total-label[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FBFBF8;
}

.ez-config-summary-total-value[b-z4udakb0ax] {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FBFBF8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ez-config-summary-total-period[b-z4udakb0ax] {
    font-size: 20px;
    font-weight: 500;
    color: rgba(251, 251, 248, 0.6);
}

.ez-config-summary-info[b-z4udakb0ax] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: rgba(251, 251, 248, 0.6);
    text-align: center;
}

.ez-config-cta[b-z4udakb0ax] {
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.8) 0%, rgba(50, 91, 169, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(57, 81, 158, 0.4);
}

.ez-config-cta:hover[b-z4udakb0ax] {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(57, 81, 158, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 800px) {
    .ez-config-section[b-z4udakb0ax] {
        padding: 60px 20px;
    }

    .ez-config-title[b-z4udakb0ax] {
        font-size: 32px;
    }

    .ez-config-options[b-z4udakb0ax] {
        grid-template-columns: 1fr;
    }

    .ez-config-toggle[b-z4udakb0ax] {
        max-width: 100%;
    }

    .ez-config-summary-total-value[b-z4udakb0ax] {
        font-size: 32px;
    }

    .ez-config-cta[b-z4udakb0ax] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .ez-config-title[b-z4udakb0ax] {
        font-size: 28px;
    }

    .ez-config-input-group[b-z4udakb0ax] {
        max-width: 100%;
    }

    .ez-config-summary[b-z4udakb0ax] {
        padding: 24px 20px;
    }

    .ez-config-summary-total-value[b-z4udakb0ax] {
        font-size: 28px;
    }

    .ez-config-toggle-btn[b-z4udakb0ax] {
        font-size: 14px;
        padding: 14px 16px;
    }
}
/* Responsive */
@media screen and (max-width: 1400px) {
    .ez-pack-card[b-z4udakb0ax] {
        min-height: 400px;
        width: 300px;
    }
    
    .ez-pack-gifts[b-z4udakb0ax],
    .ez-pack-cash[b-z4udakb0ax],
    .ez-pack-pass[b-z4udakb0ax] {
        margin-left: -35px;
    }
    
    .ez-pack-icon[b-z4udakb0ax] {
        width: 80px;
        height: 80px;
    }
    
    .ez-pack-icon img[b-z4udakb0ax] {
        width: 48px;
        height: 48px;
    }
    
    .ez-pack-checkmark[b-z4udakb0ax] {
        width: 240px;
        height: 240px;
        bottom: -50px;
        right: -35px;
    }
    
    .ez-pack-ez[b-z4udakb0ax] {
        font-size: 22px;
    }
    
    .ez-pack-name[b-z4udakb0ax] {
        font-size: 40px;
    }
    
    .ez-pack-desc[b-z4udakb0ax] {
        font-size: 16px;
        padding-bottom: 70px;
    }
    
    .ez-pack-top[b-z4udakb0ax] {
        padding: 35px 30px 0;
    }
    
    .ez-pack-body[b-z4udakb0ax] {
        padding: 0 30px 35px;
    }
}

@media screen and (max-width: 1200px) {
    .ez-employer-layout[b-z4udakb0ax] {
        padding: 60px 40px;
    }
    
    .ez-panels[b-z4udakb0ax] {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .ez-pack-card[b-z4udakb0ax] {
        min-height: 360px;
        width: 270px;
    }
    
    .ez-pack-gifts[b-z4udakb0ax],
    .ez-pack-cash[b-z4udakb0ax],
    .ez-pack-pass[b-z4udakb0ax] {
        margin-left: -30px;
    }
    
    .ez-pack-icon[b-z4udakb0ax] {
        width: 75px;
        height: 75px;
    }
    
    .ez-pack-icon img[b-z4udakb0ax] {
        width: 45px;
        height: 45px;
    }
    
    .ez-pack-checkmark[b-z4udakb0ax] {
        width: 210px;
        height: 210px;
        bottom: -45px;
        right: -30px;
    }
    
    .ez-pack-ez[b-z4udakb0ax] {
        font-size: 20px;
    }
    
    .ez-pack-name[b-z4udakb0ax] {
        font-size: 36px;
    }
    
    .ez-pack-desc[b-z4udakb0ax] {
        font-size: 15px;
        padding-bottom: 60px;
    }
    
    .ez-pack-top[b-z4udakb0ax] {
        padding: 32px 28px 0;
    }
    
    .ez-pack-body[b-z4udakb0ax] {
        padding: 0 28px 32px;
    }
    
    .ez-main-title[b-z4udakb0ax] {
        font-size: 40px;
    }
}

@media screen and (max-width: 800px) {
    .ez-employer-layout[b-z4udakb0ax] {
        padding: 50px 20px;
    }
    
    .ez-main-title[b-z4udakb0ax] {
        font-size: 32px;
    }
    
    .ez-main-subtitle[b-z4udakb0ax] {
        font-size: 16px;
    }
    
    .ez-pack-grid[b-z4udakb0ax] {
        flex-wrap: wrap;
        gap: 20px;
        padding: 30px 0;
    }
    
    .ez-pack-card[b-z4udakb0ax] {
        min-height: 320px;
        width: 100%;
        max-width: 280px;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) !important;
        margin-left: 0 !important;
    }
    
    .ez-pack-icon[b-z4udakb0ax] {
        width: 70px;
        height: 70px;
    }
    
    .ez-pack-icon img[b-z4udakb0ax] {
        width: 42px;
        height: 42px;
    }
    
    .ez-pack-checkmark[b-z4udakb0ax] {
        width: 180px;
        height: 180px;
        bottom: -40px;
        right: -25px;
    }
    
    .ez-pack-ez[b-z4udakb0ax] {
        font-size: 18px;
    }
    
    .ez-pack-name[b-z4udakb0ax] {
        font-size: 32px;
    }
    
    .ez-pack-desc[b-z4udakb0ax] {
        font-size: 14px;
        padding-bottom: 55px;
        max-width: 65%;
    }
    
    .ez-pack-top[b-z4udakb0ax] {
        padding: 28px 24px 0;
    }
    
    .ez-pack-body[b-z4udakb0ax] {
        padding: 0 24px 28px;
        gap: 15px;
    }
    
    .ez-panel[b-z4udakb0ax] {
        padding: 0 10px;
    }
    
    .ez-main-button[b-z4udakb0ax] {
        width: 100%;
        min-width: unset;
    }
}

@media screen and (max-width: 480px) {
    .ez-employer-header[b-z4udakb0ax] {
        margin-bottom: 50px;
    }
    
    .ez-main-title[b-z4udakb0ax] {
        font-size: 26px;
    }
    
    .ez-main-subtitle[b-z4udakb0ax] {
        font-size: 14px;
    }
    
    .ez-pack-card[b-z4udakb0ax] {
        min-height: 280px;
        max-width: 100%;
    }
    
    .ez-pack-icon[b-z4udakb0ax] {
        width: 65px;
        height: 65px;
    }
    
    .ez-pack-icon img[b-z4udakb0ax] {
        width: 38px;
        height: 38px;
    }
    
    .ez-pack-checkmark[b-z4udakb0ax] {
        width: 150px;
        height: 150px;
        bottom: -30px;
        right: -20px;
    }
    
    .ez-pack-name[b-z4udakb0ax] {
        font-size: 28px;
    }
    
    .ez-pack-ez[b-z4udakb0ax] {
        font-size: 16px;
    }
    
    .ez-pack-desc[b-z4udakb0ax] {
        font-size: 13px;
        padding-bottom: 45px;
        max-width: 70%;
    }
    
    .ez-pack-top[b-z4udakb0ax] {
        padding: 24px 20px 0;
    }
    
    .ez-pack-body[b-z4udakb0ax] {
        padding: 0 20px 24px;
        gap: 12px;
    }
    
    .ez-panel-title[b-z4udakb0ax] {
        font-size: 24px;
    }
    
    .ez-panels[b-z4udakb0ax] {
        gap: 40px;
    }
}
/* /Components/Layout/Configurator/ServiceAccess.razor.rz.scp.css */
/* section 1 */
/* html {
    overflow: hidden;
} */

.MainContainer[b-cz4zyz2irw] {
    display: flex;

    grid-template-columns: 0.6fr 0.4fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    max-height: 100vh;
    justify-content: space-between;
}
.section-1[b-cz4zyz2irw] {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    /* background-color: red; */
}


.section-2[b-cz4zyz2irw] {
    width: 25%;
    height: auto;
    background-color: #c7c7c7;
    display: flex;
}

.custom-image[b-cz4zyz2irw] {
width: auto;
margin-left: -50%;
height: 80%;
align-self: flex-end;
}

.title[b-cz4zyz2irw] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 60px;
    font-weight: 900;
    text-align: center;
    color: #07051C;
    align-self: center;
}

.description[b-cz4zyz2irw] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    text-align: center;
}

.parent[b-cz4zyz2irw] {
    display: flex;
    width: 80%;
    padding: 50px;
    justify-items: start;
    justify-content: start;
    gap: 25px;
    padding-left: 100px;
    flex-direction: column;
}

.div1[b-cz4zyz2irw] {
    width: fit-content;
    display: flex;
    grid-area: 1 / 1 / 2 / 3;
    flex-direction: column;
    align-items: flex-start;
}

.div2[b-cz4zyz2irw] {
    width: fit-content;
    grid-area: 2 / 1 / 3 / 2;
}

.div3[b-cz4zyz2irw] {
    width: fit-content;
    grid-area: 2 / 2 / 3 / 3;
}

.div4[b-cz4zyz2irw] {
    width: fit-content;
    grid-area: 3 / 1 / 4 / 2;
}

.div5[b-cz4zyz2irw] {
    width: fit-content;
    grid-area: 3 / 2 / 4 / 3;
}

.parent-inside-checkbox[b-cz4zyz2irw] {
    border: 1px solid #000;
    border-radius: 25px;
    position: relative;
    background: white;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 300px;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    padding: 15px;
    grid-row-gap: 0px;
    z-index: 1;
    cursor: pointer;
    background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    margin: 0;
}

.parent-inside-checkbox[b-cz4zyz2irw]:after {
    cursor: pointer;
    content: '';
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: -1;
    color: #fff;
    -webkit-text-fill-color: white;
    border-radius: 25px;
    box-shadow: 0px 21px 34px 0px rgba(82, 67, 194, 0.30);
    background-image: linear-gradient(90deg, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    transition: 0.5s;
}

.parent-inside-checkbox:hover div[b-cz4zyz2irw] {
    color: red;
    -webkit-text-fill-color: white;
}

.parent-inside-checkbox:hover[b-cz4zyz2irw]:after {
    opacity: 1;
}

.contour-tmp[b-cz4zyz2irw] {
    padding: 3px;
    background: linear-gradient(90deg, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    border-radius: 30px;
}
.div1-inside-checkbox[b-cz4zyz2irw] {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    justify-content: space-between;
    padding: 15px;

}

.div1-inside-checkbox span[b-cz4zyz2irw] {
    order: 1;
    /* Set order for the first element */
}

.div1-inside-checkbox div[b-cz4zyz2irw] {
    order: 2;
    /* Set order for the second element */
}
.div2-inside-checkbox[b-cz4zyz2irw] {
    grid-area: 2 / 1 / 3 / 2;
}

.div3-inside-checkbox[b-cz4zyz2irw] {
    grid-area: 3 / 1 / 4 / 2;
}

.checkbox-title[b-cz4zyz2irw] {
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px; /* 125% */
}

.checkbox-description[b-cz4zyz2irw] {
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.check-box-button[b-cz4zyz2irw] {
    border-radius: 15px;
    border: 1px solid #434C54;
    background: #FFF;
    box-shadow: 10px 4px 10px 0px rgba(0, 0, 0, 0.25);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
}
.check-box-button i[b-cz4zyz2irw] {
    font-size: 20px;
    color: #ffffff;
}

.check-box-button.active[b-cz4zyz2irw] {
    background: -webkit-linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    background: linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
}

.container-checkbox[b-cz4zyz2irw] {
    display: flex;
    align-items: center;
    flex-direction: row;
        gap: 10px;
}

.container-choice[b-cz4zyz2irw] {
    display: grid;
    width: fit-content;
    gap: 40px;
}

.basic-button[b-cz4zyz2irw] {
    background-color: transparent;
    padding: 0px;
    display: flex;
    border: none;
    gap: 15px;
}

.basic-button-border[b-cz4zyz2irw] {
    background-color: transparent;
    padding: 0px 15px;
    display: flex;
    gap: 15px;
    border-radius: 35px;
}

@media screen and (max-width: 1024px) {
    .MainContainer[b-cz4zyz2irw] {
        grid-template-columns: 1fr; /* Single column for medium screens */
    }

    
    .section-2[b-cz4zyz2irw] {
display:none;
    }

    .parent[b-cz4zyz2irw],
    .div1[b-cz4zyz2irw],
    .div2[b-cz4zyz2irw],
    .div3[b-cz4zyz2irw],
    .div4[b-cz4zyz2irw],
    .div5[b-cz4zyz2irw] {
        width: 100%; /* Full width for medium screens */
    }
    .parent[b-cz4zyz2irw] {
        display: flex;
    flex-direction: column;
    align-items: center;
    }
    .parent-inside-checkbox[b-cz4zyz2irw] {
        width: 100%; /* Full width for medium screens */
    }
    .container-choice[b-cz4zyz2irw] {
        display: flex;
    flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .MainContainer[b-cz4zyz2irw] {
        grid-template-columns: 1fr; /* Single column for small screens */
        margin-top: 50px; /* Adjust margin for small screens */
    }

    .title[b-cz4zyz2irw] {
        font-size: 40px; /* Adjust font size for small screens */
    }

    .checkbox-title[b-cz4zyz2irw] {
        font-size: 16px; /* Adjust font size for small screens */
    }

    /* ... other styles ... */
}

@media screen and (max-width: 480px) {
    .MainContainer[b-cz4zyz2irw] {
        grid-template-columns: 1fr; /* Single column for extra small screens */
        margin-top: 50px; /* Adjust margin for extra small screens */
    }

    .title[b-cz4zyz2irw] {
        font-size: 30px; /* Adjust font size for extra small screens */
    }

    .checkbox-title[b-cz4zyz2irw] {
        font-size: 14px; /* Adjust font size for extra small screens */
    }

    /* ... other styles ... */
}
/* /Components/Layout/Configurator/ServiceCategory.razor.rz.scp.css */
/* ==========================
   SECTION 1 – DESIGN ÉPURÉ
   ========================== */

.MainContainer[b-cyf02c068i] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 100vh;
    max-height: 100vh;
    gap: 0;
    justify-items: stretch;
    align-content: stretch;
    justify-content: space-between;
    background: linear-gradient(135deg, #0A0E27 0%, #141A35 100%);
    color: #FBFBF8;
    overflow: hidden;
}

/* Colonnes */
.section-1[b-cyf02c068i] {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.section-2[b-cyf02c068i] {
    grid-area: 1 / 2 / 2 / 3;
    width: 100%;
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    padding: 40px 40px 60px;
    box-sizing: border-box;
    background: radial-gradient(circle at top left, rgba(90, 110, 200, 0.35), transparent 60%),
                radial-gradient(circle at bottom right, rgba(120, 189, 118, 0.2), transparent 55%),
                #0A0E27;
    position: relative;
    overflow: hidden;
}

/* Erreur champ */
.missing-field[b-cyf02c068i] {
    color: #FF6B6B;
    font-size: 11px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    text-wrap: nowrap;
}

/* Image */
.custom-image[b-cyf02c068i] {
    margin-left: 0;
    max-width: 420px;
    width: 100%;
    transform: translateY(10px);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.9));
}

/* Texte principal */
.title[b-cyf02c068i] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    color: #FBFBF8;
    letter-spacing: -0.02em;
}

.description[b-cyf02c068i] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: rgba(251, 251, 248, 0.75);
}

/* Layout interne */
.parent[b-cyf02c068i] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 720px;
    padding: 60px 80px;
    padding-right: 40px;
    box-sizing: border-box;
}

.div1[b-cyf02c068i],
.div2[b-cyf02c068i],
.div3[b-cyf02c068i] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.div2[b-cyf02c068i] {
    margin-top: 30px;
}

.div3[b-cyf02c068i] {
    margin-top: 12px;
    gap: 40px;
    flex-wrap: wrap;
}

.div-4[b-cyf02c068i] {
    display: flex;
    justify-content: flex-end;
}

/* Card checkbox */
.parent-inside-checkbox[b-cyf02c068i] {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 16, 42, 0.8);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
    min-height: 80px;
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;
    width: 100%;
    padding: 16px 18px;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.parent-inside-checkbox:hover[b-cyf02c068i] {
    box-shadow: 0 22px 70px rgba(57, 81, 158, 0.6);
    border-color: rgba(57, 81, 158, 0.7);
    transform: translateY(-4px);
}

/* Contenu checkbox */
.div1-inside-checkbox[b-cyf02c068i] {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.div1-inside-checkbox span[b-cyf02c068i] {
    order: 1;
    color: #FBFBF8;
}

.div1-inside-checkbox div[b-cyf02c068i] {
    order: 2;
}

.div2-inside-checkbox[b-cyf02c068i] {
    grid-area: 2 / 1 / 3 / 2;
}

.div3-inside-checkbox[b-cyf02c068i] {
    grid-area: 3 / 1 / 4 / 2;
}

.checkbox-title[b-cyf02c068i] {
    color: #FBFBF8;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.checkbox-description[b-cyf02c068i] {
    color: rgba(251, 251, 248, 0.7);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Bouton check */
.check-box-button[b-cyf02c068i] {
    border-radius: 999px;
    border: 1px solid rgba(180, 183, 201, 0.7);
    background: rgba(22, 26, 56, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}

.check-box-button i[b-cyf02c068i] {
    font-size: 18px;
    color: transparent;
}

.check-box-button.active[b-cyf02c068i] {
    background: linear-gradient(135deg, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 34px rgba(110, 107, 244, 0.8);
}

.check-box-button.active i[b-cyf02c068i] {
    color: #FBFBF8;
}

/* Containers internes */
.container-checkbox[b-cyf02c068i] {
    width: 100%;
}

.checkbox-info-container[b-cyf02c068i] {
    flex: 1;
}

.checkbox-button-container[b-cyf02c068i] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
}

/* Boutons basiques */
.basic-button[b-cyf02c068i] {
    background-color: transparent;
    padding: 0;
    display: flex;
    border: none;
    gap: 14px;
    align-items: center;
    cursor: pointer;
}

.basic-button-border[b-cyf02c068i] {
    background-color: transparent;
    padding: 0 16px;
    display: flex;
    gap: 14px;
    border-radius: 999px;
}

/* Message d’erreur global */
.message-box[b-cyf02c068i] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #FF6B6B;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 13px;
}

/* Lock scroll */
.noscroll[b-cyf02c068i] {
    overflow: hidden;
}

/* CTA principal avec input (style pack) */
.special-button-modal[b-cyf02c068i] {
    display: grid;
    grid-template-columns: 0.9fr 0.35fr;
    grid-template-rows: 52px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    color: #FBFBF8;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 52px;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(57, 81, 158, 0.5);
    background: linear-gradient(135deg, rgba(57, 81, 158, 0.9) 0%, rgba(50, 91, 169, 0.9) 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.special-button-modal[b-cyf02c068i]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.special-button-modal:hover[b-cyf02c068i] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 60px rgba(57, 81, 158, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.special-button-modal:hover[b-cyf02c068i]::before {
    opacity: 1;
}

/* Inputs dans CTA */
.input-custom-left[b-cyf02c068i] {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    width: max-content;
    justify-content: center;
    margin: 0 10px 0 18px;
}

.input-custom-right[b-cyf02c068i] {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    gap: 12px;
}

.vertical-separator[b-cyf02c068i] {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    height: 60%;
    width: 1px;
}

/* Input valeur principale */
.custom-input-style-left-content[b-cyf02c068i] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    color: #FBFBF8;
    font-size: 17px;
    font-weight: 700;
    padding: 0 8px;
    outline: none;
}

/* Input secondaire / texte */
.custom-input-style[b-cyf02c068i] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(251, 251, 248, 0.9);
    outline: none;
}

/* Input plus / minus */
.input-plus-minus-parent[b-cyf02c068i] {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr;
    grid-template-rows: 42px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    width: 200px;
    outline: none;
    overflow: hidden;
}

.input-plus-minus-left[b-cyf02c068i] {
    grid-area: 1 / 1 / 2 / 2;
}

.simulator-input-middle[b-cyf02c068i] {
    grid-area: 1 / 2 / 2 / 3;
}

.input-plus-minus-right[b-cyf02c068i] {
    grid-area: 1 / 3 / 2 / 4;
}

.button-simulator-plus-minus[b-cyf02c068i] {
    background-color: transparent;
    border: none;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    padding: 8px 12px;
    font-style: normal;
    color: #FBFBF8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-simulator-plus-minus:hover:not(.active)[b-cyf02c068i] {
    background: rgba(57, 81, 158, 0.35);
}

.button-simulator-plus-minus.active[b-cyf02c068i] {
    color: rgba(174, 174, 174, 0.8);
}

/* Input numérique milieu */
.simulator-input-middle .custom-input-style[b-cyf02c068i] {
    font-size: 17px;
    font-weight: 600;
}

/* Conteneur input + label */
.number-input-container-v[b-cyf02c068i] {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Image + texte */
.image-container[b-cyf02c068i] {
    display: flex;
    gap: 26px;
    flex-direction: row;
    align-items: center;
}

.image-description[b-cyf02c068i] {
    color: rgba(251, 251, 248, 0.8);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
}

/* Liste infos */
.list-informations[b-cyf02c068i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.list-title[b-cyf02c068i] {
    color: rgba(251, 251, 248, 0.9);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.list-info[b-cyf02c068i] {
    color: rgba(251, 251, 248, 0.75);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    gap: 10px;
    display: flex;
}

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

@media screen and (max-width: 1200px) {
    .MainContainer[b-cyf02c068i] {
        grid-template-columns: 1fr 1fr;
    }

    .parent[b-cyf02c068i] {
        padding: 50px 50px 50px 40px;
    }

    .title[b-cyf02c068i] {
        font-size: 44px;
    }
}

@media screen and (max-width: 1024px) {
    .MainContainer[b-cyf02c068i] {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .section-2[b-cyf02c068i] {
        display: none;
    }

    .section-1[b-cyf02c068i] {
        justify-content: center;
    }

    .parent[b-cyf02c068i],
    .div1[b-cyf02c068i],
    .div2[b-cyf02c068i],
    .div3[b-cyf02c068i],
    .div-4[b-cyf02c068i],
    .div5[b-cyf02c068i] {
        width: 100%;
    }

    .parent[b-cyf02c068i] {
        align-items: flex-start;
        padding: 50px 32px;
    }

    .container-choice[b-cyf02c068i] {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .parent-inside-checkbox[b-cyf02c068i] {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .MainContainer[b-cyf02c068i] {
        margin-top: 40px;
    }

    .parent[b-cyf02c068i] {
        padding: 40px 24px;
    }

    .title[b-cyf02c068i] {
        font-size: 34px;
    }

    .checkbox-title[b-cyf02c068i] {
        font-size: 15px;
    }

    .special-button-modal[b-cyf02c068i] {
        width: 100%;
    }

    .input-plus-minus-parent[b-cyf02c068i] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .title[b-cyf02c068i] {
        font-size: 28px;
    }

    .checkbox-title[b-cyf02c068i] {
        font-size: 14px;
    }

    .parent[b-cyf02c068i] {
        padding: 32px 20px;
    }

    .special-button-modal[b-cyf02c068i] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .vertical-separator[b-cyf02c068i] {
        display: none;
    }

    .input-custom-left[b-cyf02c068i],
    .input-custom-right[b-cyf02c068i] {
        margin: 6px 12px;
        justify-content: center;
    }
}
/* /Components/Layout/Configurator/SubscribeService.razor.rz.scp.css */
/* section 1 */
/* html {
    overflow-y: visible;
} */

.MainContainer[b-jf2pfh617w] {
    display: flex;

    grid-template-columns: 0.6fr 0.4fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    max-height: 100vh;
    justify-content: space-between;
}

.section-1[b-jf2pfh617w] {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    /* background-color: red; */
}


.section-2[b-jf2pfh617w] {
    width: 25%;
    height: auto;
    background-color: #c7c7c7;
    display: flex;
}

.custom-image[b-jf2pfh617w] {
width: auto;
margin-left: -50%;
height: 80%;
align-self: flex-end;
}
.title[b-jf2pfh617w] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 60px;
    font-weight: 900;
    text-align: center;
    color: #07051C;
}

.description[b-jf2pfh617w] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    text-align: center;
}

.parent[b-jf2pfh617w] {
    display: flex;
    width: 80%;
    padding: 50px;
    justify-items: start;
    justify-content: start;
    gap: 25px;
    padding-left: 100px;
    flex-direction: column;
}

.div1[b-jf2pfh617w] {
    width: fit-content;
    display: flex;
    grid-area: 1 / 1 / 2 / 3;
    flex-direction: column;
    align-items: flex-start;
}

.div2[b-jf2pfh617w] {
    width: fit-content;
    grid-area: 2 / 1 / 3 / 2;
}

.div3[b-jf2pfh617w] {
    width: fit-content;
    grid-area: 2 / 2 / 3 / 3;
}

.div4[b-jf2pfh617w] {
    width: fit-content;
    grid-area: 3 / 1 / 4 / 2;
}

.div5[b-jf2pfh617w] {
    width: fit-content;
    grid-area: 3 / 2 / 4 / 3;
}



.parent-inside-checkbox[b-jf2pfh617w] {
    border: 1px solid #000;
    border-radius: 25px;
    position: relative;
    background: white;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 300px;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    padding: 15px;
    grid-row-gap: 0px;
    z-index: 1;
    cursor: pointer;
    background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    margin: 0;
}

.parent-inside-checkbox[b-jf2pfh617w]:after {
    cursor: pointer;
    content: '';
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: -1;
    color: #fff;
    border-radius: 25px;
    box-shadow: 0px 21px 34px 0px rgba(82, 67, 194, 0.30);
    background-image: linear-gradient(90deg, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    transition: 0.5s;
}

.parent-inside-checkbox:hover div[b-jf2pfh617w] {
    color: red;
    -webkit-text-fill-color: white;
}
.parent-inside-checkbox:hover[b-jf2pfh617w]:after {
    opacity: 1;
}

.contour-tmp[b-jf2pfh617w] {
    padding: 3px;
    background: linear-gradient(90deg, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    border-radius: 30px;
}
.div1-inside-checkbox[b-jf2pfh617w] {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    justify-content: space-between;
    padding: 15px;

}

.div1-inside-checkbox span[b-jf2pfh617w] {
    order: 1;
    /* Set order for the first element */
}

.div1-inside-checkbox div[b-jf2pfh617w] {
    order: 2;
    /* Set order for the second element */
}
.div2-inside-checkbox[b-jf2pfh617w] {
    grid-area: 2 / 1 / 3 / 2;
}

.div3-inside-checkbox[b-jf2pfh617w] {
    grid-area: 3 / 1 / 4 / 2;
}

.checkbox-title[b-jf2pfh617w] {
    color: black;

    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px; /* 125% */
}

.checkbox-description[b-jf2pfh617w] {
    color: black;
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.check-box-button[b-jf2pfh617w] {
    border-radius: 15px;
    border: 1px solid #434C54;
    background: #FFF;
    box-shadow: 10px 4px 10px 0px rgba(0, 0, 0, 0.25);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
}
.check-box-button i[b-jf2pfh617w] {
    font-size: 20px;
    color: #ffffff;
}

.check-box-button.active[b-jf2pfh617w] {
    background: -webkit-linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    background: linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
}

.container-checkbox[b-jf2pfh617w] {
    display: flex;
    align-items: center;
    flex-direction: row;
        gap: 10px;
}

.container-choice[b-jf2pfh617w] {
    display: grid;
    width: fit-content;
    gap: 40px;
}

.basic-button[b-jf2pfh617w] {
    background-color: transparent;
    padding: 0px;
    display: flex;
    border: none;
    gap: 15px;
}

.basic-button-border[b-jf2pfh617w] {
    background-color: transparent;
    padding: 0px 15px;
    display: flex;
    gap: 15px;
    border-radius: 35px;
}

@media screen and (max-width: 1024px) {
    .MainContainer[b-jf2pfh617w] {
        grid-template-columns: 1fr; /* Single column for medium screens */
    }

    
    .section-2[b-jf2pfh617w] {
display:none;
    }

    .parent[b-jf2pfh617w],
    .div1[b-jf2pfh617w],
    .div2[b-jf2pfh617w],
    .div3[b-jf2pfh617w],
    .div4[b-jf2pfh617w],
    .div5[b-jf2pfh617w] {
        width: 100%; /* Full width for medium screens */
    }
    .parent[b-jf2pfh617w] {
        display: flex;
    flex-direction: column;
    align-items: center;
    }
    .parent-inside-checkbox[b-jf2pfh617w] {
        width: 100%; /* Full width for medium screens */
    }
    .container-choice[b-jf2pfh617w] {
        display: flex;
    flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .MainContainer[b-jf2pfh617w] {
        grid-template-columns: 1fr; /* Single column for small screens */
        margin-top: 50px; /* Adjust margin for small screens */
    }

    .title[b-jf2pfh617w] {
        font-size: 40px; /* Adjust font size for small screens */
    }

    .checkbox-title[b-jf2pfh617w] {
        font-size: 16px; /* Adjust font size for small screens */
    }

    /* ... other styles ... */
}

@media screen and (max-width: 480px) {
    .title[b-jf2pfh617w] {
        font-size: 30px; /* Adjust font size for extra small screens */
    }

    .checkbox-title[b-jf2pfh617w] {
        font-size: 14px; /* Adjust font size for extra small screens */
    }

    /* ... other styles ... */
}
/* /Components/Layout/FooterLayout.razor.rz.scp.css */
/* Wave separator */
.wave-container[b-844hgvho41] {
    transform: rotate(180deg);
    line-height: 0;
}

.wave-container svg[b-844hgvho41] {
    width: 100%;
    display: block;
    transform: scaleX(-1);
}

.elementor-shape-fill[b-844hgvho41] {
    fill: #07051c;
}

/* Footer principal */
.footer-container[b-844hgvho41] {
    background-color: #07051c;
    color: #ffffff;
    width: 100%;
}

.footer-inner[b-844hgvho41] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 48px 0;
}

/* Grille 5 colonnes */
.footer-grid[b-844hgvho41] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}

/* Colonne marque */
.footer-brand[b-844hgvho41] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo[b-844hgvho41] {
    height: 44px;
    width: auto;
}

.footer-tagline[b-844hgvho41] {
    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Icônes sociales */
.footer-social[b-844hgvho41] {
    display: flex;
    gap: 10px;
}

.social-link[b-844hgvho41] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.social-link:hover[b-844hgvho41] {
    background: hsl(226, 46%, 42%);
    color: #ffffff;
}

/* Badges app stores */
.footer-appbadges[b-844hgvho41] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-badge[b-844hgvho41] {
    height: 34px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.app-badge:hover[b-844hgvho41] {
    opacity: 1;
}

/* Colonnes liens */
.footer-col[b-844hgvho41] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-col-title[b-844hgvho41] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links[b-844hgvho41] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li a[b-844hgvho41] {
    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links li a:hover[b-844hgvho41] {
    color: #ffffff;
}

/* Barre de bas de page */
.footer-bottom[b-844hgvho41] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media screen and (max-width: 1100px) {
    .footer-inner[b-844hgvho41] {
        padding: 40px 32px 0;
    }

    .footer-grid[b-844hgvho41] {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-brand[b-844hgvho41] {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 32px;
    }

    .footer-bottom[b-844hgvho41] {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

@media screen and (max-width: 640px) {
    .footer-inner[b-844hgvho41] {
        padding: 32px 20px 0;
    }

    .footer-grid[b-844hgvho41] {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .footer-brand[b-844hgvho41] {
        flex-direction: column;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-rqqnk57pjh] {
    background: linear-gradient(180deg, #d0cdf8 -50%, rgba(255, 255, 255, 100) 20%);
}
:root[b-rqqnk57pjh] {
    /* Teintes principales Ezixio */
    --ezixio-dark:  #141227;  /* noir bleuté profond */
    --ezixio-light: #FBFBF8;  /* blanc cassé */

    /* Couleurs pack */
    --ezixio-blue:    #39519E; /* BLEU EZIXIO */
    --eztax-green:    #78BD76; /* VERT ÉMERAUDE / EZTAX */
    --ezlunch-orange: #E87E20; /* ORANGE MANDARINE */
    --ezgifts-red:    #C03A29; /* ROUGE CARMIN */
    --ezcash-violet:  #7A4091; /* VIOLET AMÉTHYSTE */

    /* Dégradé institutionnel (bleu) */
    --primary-1: var(--ezixio-blue);
    --primary-2: #325BA9; /* bleu ciel Ez Salaries */
    --grad-main: linear-gradient(135deg, var(--primary-1) 0%, var(--primary-2) 100%);
}
/* /Components/Layout/TopBarLayout.razor.rz.scp.css */
html[b-m1dl07b020] {
    overflow-x: hidden;
}

#menu[b-m1dl07b020] {
    background: linear-gradient(135deg, hsla(245, 35%, 20%, 0.85) 0%, hsla(245, 35%, 14%, 0.75) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid hsla(245, 20%, 35%, 0.35);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3);
    height: 76px;
    width: 100%;
    position: sticky;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
}

#menu ul[b-m1dl07b020] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

#menu li[b-m1dl07b020] {
    padding: 0;
    list-style: none;
    align-items: center;
    margin: 13px 3px 13px 3px;
    cursor: pointer;
}

#menu button[b-m1dl07b020] {
    padding: 0;
    list-style: none;
    align-items: center;
    margin: 13px 3px 13px 3px;
}

#menu img[b-m1dl07b020] {
    width: auto;
    height: 44px;
}

#menu ul[b-m1dl07b020] {
    width: fit-content;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
}

#menu li[b-m1dl07b020] {
    display: inline-block;
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
}

#menu a[b-m1dl07b020] {
    display: flex;
    padding: 0 13px;
    text-decoration: none;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.8);
    align-items: center;
    transition: color 0.2s ease;
}

#menu a:hover[b-m1dl07b020] {
    color: #ffffff;
}

#menu a.dropdown-arrow[b-m1dl07b020]:after {
    content: "\25BE";
    margin-left: 10px;
}

#menu li li:hover[b-m1dl07b020] {
    color: #ffffff;
    background: hsla(226, 46%, 42%, 0.5);
    transition: background-color 0.2s ease, color 0.2s ease;
}

#menu ul.sub-menus[b-m1dl07b020] {
    height: auto;
    overflow: hidden;
    background: hsla(245, 35%, 14%, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsla(245, 20%, 35%, 0.35);
    border-radius: 10px;
    position: absolute;
    display: none;
    width: fit-content;
    margin: 0;
    padding: 4px 0;
    white-space: nowrap;
    top: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

#menu ul.sub-menus li[b-m1dl07b020] {
    display: block;
    height: inherit;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 46px;
    cursor: pointer;
}

#menu ul.sub-menus a[b-m1dl07b020] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 400;
    line-height: 46px;
    font-family: "Source Sans Pro", sans-serif;
    display: block;
    box-sizing: border-box;
    padding: 0 16px;
    transition: color 0.2s ease;
}

#menu li:hover ul.sub-menus[b-m1dl07b020] {
    display: block;
}

#menu ul.sub-menus li:hover[b-m1dl07b020] {
    background: hsla(226, 46%, 42%, 0.35);
    color: #ffffff;
}

#menu ul.sub-menus li:hover a[b-m1dl07b020] {
    color: #ffffff;
}

/* Souscrire CTA */
#menu a.souscrire-btn[b-m1dl07b020] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: hsl(226, 46%, 42%);
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 16px hsla(226, 46%, 42%, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

#menu a.souscrire-btn:hover[b-m1dl07b020] {
    background: hsl(226, 46%, 50%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px hsla(226, 46%, 42%, 0.55);
}

/* Responsive */
@media screen and (max-width: 800px) {

    #menu[b-m1dl07b020] {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 25px;
    }

    #menu img[b-m1dl07b020] {
        margin-left: 0;
    }

    #menu ul[b-m1dl07b020] {
        background: hsla(245, 35%, 12%, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 3;
        height: auto;
        display: none;
        text-align: left;
        transition: display 0.5s ease;
        border-bottom: 1px solid hsla(245, 20%, 35%, 0.35);
    }

    #menu ul.sub-menus[b-m1dl07b020] {
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: hsla(245, 35%, 16%, 0.6);
        padding: 0;
    }

    #menu ul.sub-menus a[b-m1dl07b020] {
        padding-left: 30px;
    }

    #menu li[b-m1dl07b020] {
        display: block;
        float: none;
        width: auto;
    }

    #menu input[b-m1dl07b020],
    #menu button[b-m1dl07b020] {
        top: 0;
        right: 0;
        float: right;
        display: block;
    }

    #menu button[b-m1dl07b020] {
        z-index: 4;
    }

    #menu .responsive-menu-active + button[b-m1dl07b020] {
        color: #ffffff;
    }

    #menu .responsive-menu-active + button[b-m1dl07b020]:before {
        content: "\00d7";
    }

    #menu .responsive-menu-active ~ ul[b-m1dl07b020] {
        display: block;
    }
}

.responsive-menu[b-m1dl07b020] {
    display: none;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border: none;
    content: "\2261";
    background-color: transparent;
    color: #ffffff;
}

.responsive-menu-active[b-m1dl07b020] {
    display: none;
    cursor: pointer;
    width: 25px;
    content: "\2261";
    height: 25px;
    background-color: transparent;
    border: none;
    color: #ffffff;
}

@media screen and (max-width: 800px) {
    .responsive-menu[b-m1dl07b020] {
        display: block;
    }
    .responsive-menu-active[b-m1dl07b020] {
        display: block;
    }
}
/* /Components/Pages/FirstStep.razor.rz.scp.css */
html[b-t34ia49syj] {
    overflow-x: hidden;
}
a[b-t34ia49syj] {
    color: inherit;
}
/* 
a {
    color: #4776E6;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    text-decoration-line: underline;
} */
#menu ul[b-t34ia49syj] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#menu li[b-t34ia49syj] {
    padding: 0;
    list-style: none;
    align-items: center;
}

#menu ul[b-t34ia49syj] {
    width: 100%;
    text-align: left;
}


#menu li[b-t34ia49syj] {
    display: inline-block;
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
}


#menu li label :hover[b-t34ia49syj] {
    color: hsl(226, 46%, 42%);
    background: #FFFFFF;
    transition: background-color 0.5s ease, color 0.5s ease;
}

#menu ul.sub-menus[b-t34ia49syj] {
    height: auto;
    overflow: hidden;
    background: #FFFFFF;
    position: absolute;
    display: none;
    width: 400px;
    margin: 0px;
    white-space: nowrap;
}


#menu ul.sub-menus li[b-t34ia49syj] {
    display: block;
    height: inherit;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 46px;
}


#menu ul.sub-menus label[b-t34ia49syj] {
    color: #07051C;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 46px;
    display: block;
    box-sizing: border-box;
}


#menu li:hover ul.sub-menus[b-t34ia49syj] {
    display: block;
}


#menu ul.sub-menus label:hover[b-t34ia49syj] {
    background-color: hsl(226, 46%, 42%);
    color: #FFFFFF;
}


.MainContainer[b-t34ia49syj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* section 1 */
.section-1[b-t34ia49syj] {
    width: 100%;
    margin-top: 10vh;
    /* background-color: red; */
}

.title[b-t34ia49syj] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 60px;
    font-weight: 900;
    text-align: center;
    color: #07051C;
}

.description[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    text-align: center;
}

.section-2[b-t34ia49syj] {
    width: 100%;
    height: 90vh;
    margin-top: 10vh;
    display: flex;
    padding: 50px 50px 50px 50px;
    justify-content: center;
    align-items: flex-start;
}

.section-2-parent[b-t34ia49syj] {
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    align-items: end;
}


.left-illustration[b-t34ia49syj] {
    width: 420px;
    height: 90%;
    margin-top: 10vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.7fr 0.3fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
    grid-area: 1 / 1 / 3 / 2;
}

.left-illustration-top[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.left-illustration-bot[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 15px;
    border-radius: 0px 0px 15px 15px;
    background: rgb(110, 107, 244);
    background: linear-gradient(180deg, rgba(110, 107, 244, 1) 0%, rgba(107, 86, 177, 1) 100%);
}

.left-illustration-text[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
}

.right-inputs[b-t34ia49syj] {
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    padding: 0px;
    grid-area: 1 / 2 / 2 / 3;
}

.section-2-1[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 2;
    padding: 15px 15px 0px 15px;
    display: flex;
    width: 100%;
    height: fit-content;
    gap: 50px;
    justify-content: center;
    flex-direction: row;
    grid-template-columns: 30% 70%;
}

.left-illustration img[b-t34ia49syj] {
    width: 70%;
    height: auto;
    object-fit: fill;
}

.section-2-2[b-t34ia49syj] {
    width: 100%;
    height: fit-content;
    grid-area: 2 / 2 / 3 / 3;
    display: grid;
    grid-template-columns: 1.0fr;
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 0px;
    border-radius: 15px;
    grid-row-gap: 0px;
    border: 1px solid hsl(226, 46%, 42%);
    background: #FFF;
    box-shadow: 0px 42px 34px 0px rgba(82, 67, 194, 0.30);
}

.section-2-2-topbar[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 3;
    /* background-color: #76BEC5; */
    display: flex;
    border-radius: 15px;
    justify-content: space-between;
    height: fit-content;
}

.section-2-2-left[b-t34ia49syj] {
    /* background-color: pink; */
    grid-area: 2 / 1 / 3 / 2;
    padding: 25px 50px 25px 50px;
    height: fit-content;
}

.section-2-2-right[b-t34ia49syj] {
    /* background-color: aqua; */
    grid-area: 2 / 2 / 3 / 3;
    padding: 25px 50px 25px 50px;
    height: fit-content;
}

.section-2-3[b-t34ia49syj] {
    /* background-color: #000000; */
    width: 90%;
    grid-area: 3 / 1 / 4 / 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 100px;
    grid-row-gap: 0px;
}

.section-2-3-left[b-t34ia49syj] {
    width: 100%;
    min-width: 90px;
    height: fit-content;
    border-radius: 15px;
    border: 1px solid hsl(226, 46%, 42%);
    background: #FFF;
    box-shadow: 0px 42px 34px 0px rgba(82, 67, 194, 0.30);
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    border-radius: 15px;
    grid-row-gap: 0px;
}

.section-2-3-info[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 2;
    border-radius: 15px 0px 0px 15px;
    height: 90px;
    flex-direction: row;
    display: flex;
    margin-left: -180px;
    justify-content: center;
    text-align: left;
    align-items: center;
}

.section-2-3-icon img[b-t34ia49syj]{
    width: 150px;
    height: 150px;
}
.section-2-3-info-title[b-t34ia49syj] {
    text-wrap: nowrap;
    background: linear-gradient(180deg, hsl(226, 46%, 42%) 0%, hsl(226, 38%, 35%) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.section-2-3-info-note[b-t34ia49syj] {
    color: #07051C;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.section-2-3-result-title[b-t34ia49syj] {
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px; /* 104.167% */
}

.section-2-3-result-info[b-t34ia49syj] {
    color: #FFF;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.section-2-3-result[b-t34ia49syj] {
    border-radius: 0px 15px 15px 0px;
    grid-area: 1 / 2 / 2 / 3;
    flex-direction: column;
    display: flex;
    min-height: 90px;
    height: fit-content;
    color: white;
    padding: 15px;
    justify-content: center;
    align-items: center;
    background: -webkit-linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    background: linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
}


.section-2-3-right[b-t34ia49syj] {
    width: 100%;
    min-width: 90px;
    height: fit-content;
    border-radius: 15px;
    border: 1px solid hsl(226, 46%, 42%);
    background: #FFF;
    box-shadow: 0px 42px 34px 0px rgba(82, 67, 194, 0.30);
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    border-radius: 15px;
    grid-row-gap: 0px;
}

.section-2-4[b-t34ia49syj] {
    background-color: transparent;
    width: 90%;
    height: fit-content;
    grid-area: 4 / 1 / 5 / 2;
}


.left-content[b-t34ia49syj] {
    width: 25%;
    height: 85%;
}

.left-content-parent[b-t34ia49syj] {
    display: flex;
    grid-template-columns: 1fr;
    grid-template-rows: 0.8fr 0.2fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: 100%;
    margin-top: 20px;
    border-radius: 15px;
    flex-direction: column;
    align-items: end;
}

.left-content-div1[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 2;
    width: 85%;
    height: 85%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.left-content-div1 img[b-t34ia49syj] {
    width: 100%;
    height: 70%;
    object-fit: cover;
}

.custom-input-style-left-content[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    font-size: 16px;
    outline: none;
    font-size: 16px;
    font-weight: 700;
    padding: 15px;
}

.left-content-parent-button[b-t34ia49syj] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 0.5fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: 75%;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    /* column */
    flex-direction: column;

}

.left-content-div2[b-t34ia49syj] {
    grid-area: 2 / 1 / 3 / 2;
    display: grid;
    /* border-radius: 15px; on ly bot */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 100%;
    height: 30%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 0.5fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: center;
    font-family: "Source Sans Pro", sans-serif;
    align-items: center;
    /* column */
    flex-direction: column;
    display: flex;
    color: white;
    gap: 25px;
    background: -webkit-linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    background: linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
}


.left-content-div1-button[b-t34ia49syj] {
    width: 100%;
    grid-area: 1 / 1 / 2 / 2;
    /* center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.left-content-div2-button[b-t34ia49syj] {
    width: 100%;
    grid-area: 2 / 1 / 3 / 2;
    /* center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}







.section-3[b-t34ia49syj] {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: rgb(51, 255, 0); */
}

.middle-content[b-t34ia49syj] {
    width: 80%;
    height: 80%;
    /* background-color: rgb(255, 0, 238); */
    /* center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.right-content[b-t34ia49syj] {
    width: 60%;
    height: 100%
        /* background-color: green; */
}

.input-title[b-t34ia49syj] {
    font-size: 24px;
    font-weight: 900;
    font-family: "Source Sans Pro", sans-serif;
    /* background-color: red; */
}

.input-parent[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 0px;
    /* background-color: rgb(202, 21, 21); */
}

.check-box-button[b-t34ia49syj] {
    border-radius: 15px;
    border: 1px solid #434C54;
    background: #FFF;
    box-shadow: 10px 4px 10px 0px rgba(0, 0, 0, 0.25);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
}

.text-check-box[b-t34ia49syj] {
    font-family: "Raleway";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
}

.button-section3[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    gap: 10px;
    background-color: transparent;
    border: none;
}

.check-box-button i[b-t34ia49syj] {
    font-size: 20px;
    color: #ffffff;
}

.check-box-button.active[b-t34ia49syj] {
    background: -webkit-linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
    background: linear-gradient(to bottom, hsl(226, 60%, 55%) 0%, hsl(226, 38%, 35%) 100%);
}

.title-period[b-t34ia49syj] {
    display: flex;
    grid-area: 1 / 1 / 2 / 2;
    flex-direction: column;
    text-align: left;
}

.choose-period[b-t34ia49syj] {
    display: flex;
    gap: 15px;
    grid-area: 2 / 1 / 3 / 2;
    justify-content: flex-start;
    align-items: center;
}

.input-info1[b-t34ia49syj] {
    grid-area: 3 / 1 / 4 / 2;
}

.input-value1[b-t34ia49syj] {
    grid-area: 3 / 2 / 4 / 3;
    display: flex;
    justify-content: flex-end;
}

.input-info2[b-t34ia49syj] {
    grid-area: 4 / 1 / 5 / 2;
}

.input-value2[b-t34ia49syj] {
    grid-area: 4 / 2 / 5 / 3;
    display: flex;
    justify-content: flex-end;
}

.input-info3[b-t34ia49syj] {
    grid-area: 5 / 1 / 6 / 2;
}

.input-value3[b-t34ia49syj] {
    grid-area: 5 / 2 / 6 / 3;
    display: flex;
    justify-content: flex-end;
}

.input-info4[b-t34ia49syj] {
    grid-area: 6 / 1 / 7 / 2;
}

.input-value4[b-t34ia49syj] {
    grid-area: 6 / 2 / 7 / 3;
    display: flex;
    justify-content: flex-end;
}

.input-info5[b-t34ia49syj] {
    grid-area: 7 / 1 / 8 / 2;
}

.input-value5[b-t34ia49syj] {
    grid-area: 7 / 2 / 8 / 3;
    display: flex;
    justify-content: flex-end;
}

.input-info6[b-t34ia49syj] {
    grid-area: 8 / 1 / 9 / 2;
}

.input-value6[b-t34ia49syj] {
    grid-area: 8 / 2 / 9 / 3;
    display: flex;
    justify-content: flex-end;
}


.flex-title-middle[b-t34ia49syj] {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    padding: 0px;
    justify-content: flex-start;
    align-items: center;
}

.title-middle-main[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
}

.title-middle-note[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 0px;
    margin-bottom: 30px;
}


.flex-title[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    padding: 0px;
}

.flex-title .title-main[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
}

.flex-title .title-note[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 0px;
    margin-bottom: 30px;
}

.span-break[b-t34ia49syj] {
    justify-content: flex-start;
}

.result-content[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 40px;
    background-color: #ffffff;
    border: 5px solid hsl(226, 46%, 42%);
}

.period-button[b-t34ia49syj] {
    background-color: transparent;
    border: none;
    text-align: center;
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    text-decoration: underline;
    padding: 0;
}

.period-button.active[b-t34ia49syj] {
    color: hsl(226, 46%, 42%);
    text-decoration: none;
    background-color: transparent;
    font-weight: 900;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.1rem;
}


.purple-shadow[b-t34ia49syj] {
    box-shadow: 0px 18px 25px 0px #bcb9e0;
    border-radius: 15px;
}

.result-parent[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10%;
    grid-row-gap: 20px;
    /* background-color: #000000; */
}

.title-result[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 900;
    color: rgba(7, 5, 28, 1);
    font-size: 24px;
    color: rgba(7, 5, 28, 1);
    height: 34px;
}

.note-result-info[b-t34ia49syj] {
    text-align: start;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 500;
    color: rgba(7, 5, 28, 1);
}

.price-info[b-t34ia49syj] {
    text-align: end;
    text-wrap: nowrap;
    font-size: 16px;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 900;
    color: rgba(7, 5, 28, 1);
    width: 133.21px;
    height: 20px;
}

.note-result[b-t34ia49syj] {
    text-align: end;
    text-wrap: nowrap;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: rgba(7, 5, 28, 1);
    height: 20px;
}

.result-left[b-t34ia49syj] {
    padding-top: 10px;
    grid-area: 2 / 1 / 2 / 2;
    /* background-color: aqua; */
}

.result-right[b-t34ia49syj] {
    padding-top: 20px;
    grid-area: 2 / 2 / 2 / 3;
    /* background-color: yellow; */
}

.parent[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 10px;
    /* padding: 10px; */
    /* background-color: black; */
}

.middle-parent[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: repeat(2, 0.5fr);
    grid-column-gap: 0px;
    grid-row-gap: 20%;
    /* background-color: hsl(226, 46%, 42%); */
    align-items: baseline;
}

.middle-top[b-t34ia49syj] {
    align-items: center;
    display: grid;
    text-align: center;
    justify-items: center;
        padding: 0px;
    margin: 0px;
    gap: 5%;
    grid-area: 1 / 1 / 2 / 3;
    /* background-color: aqua; */
}

.middle-down-left[b-t34ia49syj] {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-area: 2 / 1 / 3 / 2;
    /* background-color: bisque; */
}

.middle-down-right[b-t34ia49syj] {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-area: 2 / 2 / 3 / 3;
    /* background-color: aliceblue; */
}

.middle-down-block[b-t34ia49syj] {
    width: 75%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 10px;
}

.middle-down-block-title-content[b-t34ia49syj] {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2%;
    left: 0px;
}


.middle-custom-info[b-t34ia49syj] {
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    border-radius: 15px;
    box-shadow: 0px 18px 25px 0px #9795B5;
    padding: 15px 15px 15px 15px;
    width: 110%;
    height: 70%;
    margin-left: -5%;
}

.little-title[b-t34ia49syj] {
    display: block;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.info-value[b-t34ia49syj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Spread items apart */
    font-family: sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 20px;
}

.info-question[b-t34ia49syj] {
    display: flex;
    /* Use flexbox */
    align-items: center;
    /* Align items vertically */
}

.info-value button[b-t34ia49syj] {
    background-color: transparent;
    border: none;
    text-align: center;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    line-height: 40px;

}

.bar[b-t34ia49syj] {
    border-bottom: 1px solid #ADABC3;
    padding: 5px;
    width: 100%;
}

.bottom-content[b-t34ia49syj] {
    margin-top: auto;
    width: 70%;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    text-align: left;
}

.number-input[b-t34ia49syj] {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #000000;
    box-shadow: 0px 5px 10px -2px black;
    height: 39px;
    width: 70%;
    outline: none;
}


.number-content[b-t34ia49syj] {
    grid-area: 2 / 1 / 3 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #76BEC5;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #000000;
    box-shadow: 0px 5px 10px -2px black;
    height: 2rem;
    width: 70%;
    outline: none;
}

.question-button-black[b-t34ia49syj] {
    background-image: url('/images/blackquestion.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    background-color: transparent;
    height: 25px;
    width: 25px;
    outline: none;
}

.question-button-pink[b-t34ia49syj] {
    background-image: url('/images/pinkquestion.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    background-color: transparent;
    height: 25px;
    width: 25px;
    outline: none;
}

.question-button-yellow[b-t34ia49syj] {
    background-image: url('/images/yellowquestion.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    background-color: transparent;
    height: 25px;
    width: 25px;
    outline: none;
}

.question-button-grey[b-t34ia49syj] {
    background-image: url('/images/greyquestion.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    background-color: transparent;
    height: 25px;
    width: 25px;
    outline: none;
}

.question-button-white[b-t34ia49syj] {
    background-image: url('/images/whitequestion.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    background-color: transparent;
    margin-left: 113%;
    margin-top: -17%;
    width: 38px;
    height: 38px;
    outline: none;
}

.modal-parent[b-t34ia49syj] {
    display: none;
}

.modal-parent.active[b-t34ia49syj] {
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: rgba(67, 76, 84, 0.8);
    align-items: center;
}

.col[b-t34ia49syj] {
    width: 160px;
    display: flex;
    flex-direction: column;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    font-size: 12px;
}

.col-title[b-t34ia49syj] {
    width: 20%;
    display: flex;
    flex-direction: column;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    font-size: 12px;
    font-weight: 700;
}

.tableau[b-t34ia49syj] {
    display: grid;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;

}

.col-title-top[b-t34ia49syj] {
    width: 40%;
    display: flex;
    flex-direction: column;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    font-size: 12px;
    font-weight: 700;
}

.row[b-t34ia49syj] {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
}
.modal-content[b-t34ia49syj] {
    width: 50%;
    max-height: fit-content;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 15px;
    flex-direction: column;
    gap: 15px;
}

.modal-title[b-t34ia49syj] {
    width: 90%;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-description[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 12px;
    font-weight: 400;
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.modal-info-purple[b-t34ia49syj] {
    font-family: "Source Sans Pro", sans-serif;
    background-color: white;
    border: 5px solid hsl(226, 46%, 42%);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    gap: 20px;
    align-items: center;
    display: flex;
    font-size: 12px;
}

.modal-info-yellow[b-t34ia49syj] {
    background-color: white;
    border: 5px solid #FFCF26;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    gap: 20px;
    align-items: center;
    display: flex;
}

.modal-info-pink[b-t34ia49syj] {
    background-color: white;
    border: 5px solid #FF287F;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    gap: 20px;
    align-items: center;
    display: flex;
}

.modal-buttons[b-t34ia49syj] {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-top: 20px;
    justify-content: end;
    width: 70%;
}

.modal-buttons-centered[b-t34ia49syj] {
    display: grid;
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 80%;
}

.button1-modal-centered[b-t34ia49syj] {
    border: none;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 15px;
    border-radius: 15px;
    outline: none;
}

.button1-modal[b-t34ia49syj] {
    grid-area: 1 / 2 / 2 / 3;
    border: none;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 15px;
    border-radius: 15px;
    outline: none;
}

.button2-modal[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 2;
    border: none;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 15px;
    border-radius: 15px;
    outline: none;
}

.close-button[b-t34ia49syj] {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 10px;
    right: 20px;
    height: 50px;
    width: 50px;
    outline: none;
}

.modal-icon img[b-t34ia49syj] {
    width: 100px;
    height: 85px;
}

.close-button i[b-t34ia49syj] {
    font-size: 35px;
    color: #07051C;
}

.input-custom-parent[b-t34ia49syj] {
    display: grid;
    grid-template-columns: 0.9fr 0.2fr;
    grid-template-rows: 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: white;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1px solid #000000;
    box-shadow: 0px 5px 10px -2px black;
    height: 39px;
    width: 70%;
    outline: none;
}

.special-button-order[b-t34ia49syj] {
    display: grid;
    grid-template-columns: 0.9fr 0.2fr;
    grid-template-rows: 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: hsl(226, 46%, 42%);
    color: white;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 49px;
    outline: none;
    border: none;
    /* border-radius: 0px 15px 0px 15px; */
    width: 278px;
    border-radius: 0px 15px;
    background: hsl(226, 46%, 42%);
    box-shadow: 8px 8px 10px 0px rgba(84, 41, 178, 0.20);
}

.special-button-modal[b-t34ia49syj] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: white;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 49px;
    outline: none;
    border: none;
    width: auto;
    border-radius: 15px;
    box-shadow: 8px 8px 10px 0px rgba(84, 41, 178, 0.20);
}

.input-custom-left[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    width: 100%;
    justify-content: center;
}

.custom-input-style[b-t34ia49syj] {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    outline: none;
}

.input-custom-right[b-t34ia49syj] {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 39px;
}

.vertical-separator[b-t34ia49syj] {
    border-left: 1px solid #ffffff;
    height: 49px;
    width: 1px;
    background-color: #ffffff;
}








.input-plus-minus-parent[b-t34ia49syj] {
    display: grid;
    grid-template-columns: 0.2fr 0.6fr 0.2fr;
    grid-template-rows: 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: white;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1px solid #000000;
    box-shadow: 0px 5px 10px -2px black;
    height: 39px;
    width: 70%;
    outline: none;
}

.input-plus-minus-left[b-t34ia49syj] {
    grid-area: 1 / 1 / 2 / 2;
}

.simulator-input-middle[b-t34ia49syj] {
    grid-area: 1 / 2 / 2 / 3;
}

.input-plus-minus-right[b-t34ia49syj] {
    grid-area: 1 / 3 / 2 / 4;
}

.button-simulator-plus-minus[b-t34ia49syj] {
    background-color: transparent;
    border: none;
    text-align: center;
    font-family: Raleway;
    font-size: 22px;
    font-style: normal;
}

.button-simulator-plus-minus.active[b-t34ia49syj] {
    color: #aeaeae;
}




table[b-t34ia49syj] {
    border-collapse: separate;
    border-spacing: 0;
    border-color: hotpink;
}

td[b-t34ia49syj],
th[b-t34ia49syj] {
    border: 1px solid #595959;
    /* center text */
    text-align: center;
}

td[b-t34ia49syj],
th[b-t34ia49syj] {
    padding: 3px;
    width: auto;
    height: auto;
}

th[b-t34ia49syj] {
    background: #f0e6cc;
}

.even[b-t34ia49syj] {
    background: #fbf8f0;
}

.odd[b-t34ia49syj] {
    background: #fefcf9;
}

@media screen and (max-width: 1100px) {
    .section-1[b-t34ia49syj] {
        width: 100vh;
        margin-top: 15vh;
        margin-bottom: 50vh;
    }

    .section-2[b-t34ia49syj] {
        flex-direction: column;
        padding: 0px 0px 0px 0px;
    }

    .section-3[b-t34ia49syj] {
        flex-direction: column;
        margin-top: 55vh;
    }

    .left-content[b-t34ia49syj] {
        width: 100%;
        height: 100%;
        min-height: 75vh;
        padding: 10px;

    }

    .right-content[b-t34ia49syj] {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        padding: 10px;
    }
}

@media screen and (max-width: 800px) {
    .section-1[b-t34ia49syj] {
        width: 100%;
        margin-bottom: 5vh;
        margin-top: 10vh;
    }

    .section-2[b-t34ia49syj] {
        width: 100%;
        height: 100vh;
        flex-direction: column;
    }

    .section-3[b-t34ia49syj] {
        flex-direction: column;
    }

    .middle-down-block[b-t34ia49syj] {
        height: 100%;
        width: 100%;
        /* flex-start` */
        align-items: flex-start;
        height: auto;
    }

    .middle-content[b-t34ia49syj] {
        width: 100%;
    }

    .left-content[b-t34ia49syj] {
        width: 100%;
        display: none;
        min-height: 75vh;
    }

    .middle-custom-info[b-t34ia49syj] {
        flex-direction: column;
    }

    .info-value[b-t34ia49syj] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: sans-serif;
        width: 100%;
        /* no wrap */
        flex-wrap: nowrap;
    }

    .result-parent[b-t34ia49syj] {
        display: block;
    }

    .right-content[b-t34ia49syj] {
        width: 100%;
        height: 100%;
    }

    .input-parent[b-t34ia49syj] {
        padding-left: 5%;
    }
}

@media screen and (max-width: 615px) {

    .button-content[b-t34ia49syj] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
        flex-direction: column;
        gap: 10px;
    }

    .section-1[b-t34ia49syj] {
        width: 100%;
        margin-bottom: 5vh;
        margin-top: 10vh;
    }

    .section-2[b-t34ia49syj] {
        width: 100%;
        height: 100vh;
    }

    .left-content[b-t34ia49syj] {
        display: none;
    }

    .right-content[b-t34ia49syj] {
        width: 100%;
        height: 100%;
        padding: 0px 0px 0px 0px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.MainContainer[b-w124ly84hf]{
  --bg-0:#07051C;
  --bg-1:#0B0A26;
  --glass-border: rgba(255,255,255,.12);
  --accent: hsl(226, 46%, 42%);
  --accent-2: hsl(226, 60%, 55%);

  min-height: 100vh;
  color: #F4F6FF;
  font-family: Nunito, system-ui, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(120,121,241,.18), transparent 55%),
    radial-gradient(900px 420px at 18% 42%, rgba(118,190,197,.12), transparent 55%),
    radial-gradient(900px 420px at 82% 42%, rgba(255,40,127,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

.MainContainer[b-w124ly84hf],
.section-1[b-w124ly84hf],
.section-2[b-w124ly84hf],
.section-3[b-w124ly84hf],
.simulator-card[b-w124ly84hf],
.section-3-content[b-w124ly84hf]{
  opacity: 1 !important;
}

.section-1[b-w124ly84hf]{
  padding: 72px 48px 24px;
  text-align: center;
}

.title[b-w124ly84hf]{
  font-family: Raleway, Nunito, sans-serif;
  color: #F4F6FF;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.1vw, 52px);
  line-height: 1.1;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.description[b-w124ly84hf]{
  max-width: 1020px;
  margin: 14px auto 0;
  font-size: 15px;
  color: #D9DDF3;
}

.second-line[b-w124ly84hf]{
  margin-top: 8px;
}

.section-2[b-w124ly84hf]{
  padding: 18px 48px 40px;
}

.section-2-parent[b-w124ly84hf]{
  max-width: 1480px;
  margin: 0 auto;
}

.simulator-grid[b-w124ly84hf]{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.simulator-card[b-w124ly84hf]{
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.card-top[b-w124ly84hf]{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chip[b-w124ly84hf]{
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
  color: #F4F6FF;
  font-weight: 800;
  font-size: 12px;
}

.card-title[b-w124ly84hf]{
  font-family: Raleway, Nunito, sans-serif;
  color: #F4F6FF;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.card-description[b-w124ly84hf]{
  color: #D9DDF3;
  font-size: 14px;
  line-height: 1.5;
}

.feature-list[b-w124ly84hf]{
  margin: 0;
  padding-left: 20px;
  color: #D9DDF3;
  display: grid;
  gap: 6px;
}

.feature-list li[b-w124ly84hf]::marker{
  color: #FFCF26;
}

.card-button[b-w124ly84hf]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  text-decoration: none;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(to bottom, var(--accent-2) 0%, var(--accent) 100%);
  color: #fff;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 8px 8px 10px 0 rgba(84, 41, 178, 0.20);
  padding: 0 18px;
}

.section-3[b-w124ly84hf]{
  padding: 0 48px 56px;
}

.section-3-content[b-w124ly84hf]{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 32px;
  text-align: center;
}

.section-3-title[b-w124ly84hf]{
  font-family: Raleway, Nunito, sans-serif;
  color: #F4F6FF;
  font-weight: 900;
  font-size: 34px;
}

.section-3-description[b-w124ly84hf]{
  color: #D9DDF3;
  margin-top: 10px;
  margin-bottom: 22px;
}

.section-3-button[b-w124ly84hf]{
  min-width: 280px;
}

@media (max-width: 1100px){
  .simulator-grid[b-w124ly84hf]{
    grid-template-columns: 1fr;
  }

  .section-1[b-w124ly84hf],
  .section-2[b-w124ly84hf],
  .section-3[b-w124ly84hf]{
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* /Components/Pages/Joymeals.razor.rz.scp.css */
/* =========================================================
   Joymeals.razor.css — Dark glass theme (like your reference)
   Uses ONLY your existing classes. No Razor changes needed.
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root[b-fxufqxilui]{
  --bg-0:#07051C;
  --bg-1:#0B0A26;
  --bg-2:#0E0D2E;

  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.085);

  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.55);


  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Accent palette (matches your existing colors) */
  --purple:hsl(226, 46%, 42%);
  --pink:#FF287F;
  --yellow:#FFCF26;
  --teal:#76BEC5;
  --red:#FF4B55;
  --blue:#4776E6;
}

/* ---------- Global base (scoped to this page) ---------- */
.MainContainer[b-fxufqxilui]{
  min-height: 100vh;
  color: rgba(255,255,255,.92);
  font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(120,121,241,.18), transparent 55%),
    radial-gradient(900px 420px at 18% 42%, rgba(118,190,197,.12), transparent 55%),
    radial-gradient(900px 420px at 82% 42%, rgba(255,40,127,.10), transparent 55%),
    linear-gradient(180deg, #0B0A26, #07051C);
}

.MainContainer *[b-fxufqxilui] { box-sizing: border-box; }
a[b-fxufqxilui] { color: --blue; }
a:hover[b-fxufqxilui] { color: rgba(71,118,230,.9); }
img[b-fxufqxilui] { max-width: 100%; height: auto; }

/* ---------- Section 1 (Hero title) ---------- */
.section-1[b-fxufqxilui]{
  padding: 54px 18px 22px;
  text-align: center;
}
.section-1 .title[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 1.1;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.section-1 .description[b-fxufqxilui]{
  max-width: 920px;
  margin: 10px auto 0;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}

/* ---------- Section 2 layout ---------- */
.section-2[b-fxufqxilui]{
  padding: 18px 18px 40px;
}
.section-2-parent[b-fxufqxilui]{
        display: flex;
    flex-direction: column;
    align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

.section-2-1[b-fxufqxilui]{
  display: grid;
      width: 100%;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: start;
  margin-top: 22px;
}
@media (max-width: 980px){
  .section-2-1[b-fxufqxilui]{ grid-template-columns: 1fr; }
}

/* Left card (inputs) */
.right-inputs[b-fxufqxilui]{
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 22px;
  backdrop-filter: blur(12px);
}
.title-period[b-fxufqxilui]{
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.input-title[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Period toggles (segmented) */
.choose-period[b-fxufqxilui]{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.separator-period[b-fxufqxilui]{ display:none; }
.period-button[b-fxufqxilui]{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  user-select: none;
}
.period-button:hover[b-fxufqxilui]{ transform: translateY(-1px); color: rgba(255,255,255,.92); }
.period-button.active[b-fxufqxilui]{
  background: rgba(120,121,241,.22);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(120,121,241,.16);
}

/* Input blocks */
.flex-title[b-fxufqxilui]{ display:flex; flex-direction:column; gap:4px; margin-top: 14px; }
.title-main[b-fxufqxilui]{ font-weight: 900; font-size: 13px; }
.title-note[b-fxufqxilui]{ color: rgba(255,255,255,.55); font-size: 12px; }

.input-value1[b-fxufqxilui],.input-value2[b-fxufqxilui],.input-value3[b-fxufqxilui],.input-value4[b-fxufqxilui],.input-value5[b-fxufqxilui]{
  margin-top: 10px;
}

/* Checkbox yes/no */
.check-box-button[b-fxufqxilui]{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.check-box-button:hover[b-fxufqxilui]{ transform: translateY(-1px); }
.check-box-button.active[b-fxufqxilui]{
  background: rgba(118,190,197,.18);
  border-color: rgba(118,190,197,.35);
  color: --teal;
}
.text-check-box[b-fxufqxilui]{
  margin: 0 14px 0 8px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
}

/* Inputs with icon block */
.input-custom-parent[b-fxufqxilui]{
  display:flex;
  align-items:stretch;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.input-custom-left[b-fxufqxilui]{ flex: 1; display:flex; }
.custom-input-style[b-fxufqxilui]{
  width: 100%;
  border: 0;
  outline: none;
  padding: 12px 14px;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.custom-input-style[b-fxufqxilui]::placeholder{ color: rgba(255,255,255,.35); font-weight: 700; }
.input-custom-right[b-fxufqxilui]{
  width: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.05);
}
.vertical-separator[b-fxufqxilui]{
  width: 1px;
  height: 60%;
  background: rgba(255,255,255,.12);
  margin-right: 10px;
}
.input-custom-right i[b-fxufqxilui], .input-custom-right span[b-fxufqxilui]{
  color: rgba(255,255,255,.75);
  font-weight: 900;
}

/* +/- input */
.input-plus-minus-parent[b-fxufqxilui]{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.input-plus-minus-left[b-fxufqxilui],.input-plus-minus-right[b-fxufqxilui]{
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05);
}
.simulator-input-middle[b-fxufqxilui]{ display:flex; }
.button-simulator-plus-minus[b-fxufqxilui]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor:pointer;
  transition: transform .15s ease, color .15s ease;
}
.button-simulator-plus-minus:hover[b-fxufqxilui]{ transform: translateY(-1px); color: rgba(255,255,255,.92); }
.button-simulator-plus-minus.active[b-fxufqxilui]{ opacity:.45; cursor:not-allowed; transform:none; }

/* plain number input (employees count) */
.number-input[b-fxufqxilui]{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
  outline:none;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* ---------- Right side summary/result card ---------- */
.section-2-2[b-fxufqxilui]{
  border-radius: 28px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 18px;
  backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Topbar */
.section-2-2-topbar[b-fxufqxilui]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.special-button-order[b-fxufqxilui]{
  border: 1px solid rgba(120,121,241,.40);
  background: linear-gradient(90deg, rgba(120,121,241,.35), rgba(71,118,230,.28));
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 10px 14px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
}
.custom-input-style-left-content[b-fxufqxilui]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
  outline:none;
}
.special-button-order:hover[b-fxufqxilui]{ filter: brightness(1.06); }

/* Two columns inside */
.section-2-2-right[b-fxufqxilui],
.section-2-2-left[b-fxufqxilui]{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 10px 10px 6px;
}
.title-result[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* Info rows */
.info-value[b-fxufqxilui]{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.info-question[b-fxufqxilui]{ display:flex; align-items:center; gap:10px; }
.note-result-info[b-fxufqxilui]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}
.price-info[b-fxufqxilui]{
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 18px;
  white-space: nowrap;
}

/* Divider */
.bar[b-fxufqxilui]{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 4px 8px;
}

/* Question buttons (round) */
.question-button-grey[b-fxufqxilui],
.question-button-yellow[b-fxufqxilui],
.question-button-pink[b-fxufqxilui],
.question-button-black[b-fxufqxilui],
.question-button-white[b-fxufqxilui]{
  width: 22px;
  height: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.question-button-grey[b-fxufqxilui]::before,
.question-button-yellow[b-fxufqxilui]::before,
.question-button-pink[b-fxufqxilui]::before,
.question-button-black[b-fxufqxilui]::before,
.question-button-white[b-fxufqxilui]::before{
  content: "?";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.question-button-yellow[b-fxufqxilui]{ border-color: rgba(255,207,38,.35); }
.question-button-yellow[b-fxufqxilui]::before{ color: #FFCF26; }
.question-button-pink[b-fxufqxilui]{ border-color: rgba(255,40,127,.35); }
.question-button-pink[b-fxufqxilui]::before{ color: #FF287F; }
.question-button-black[b-fxufqxilui]{ border-color: rgba(0,0,0,.35); background: rgba(0,0,0,.18); }
.question-button-black[b-fxufqxilui]::before{ color: rgba(255,255,255,.85); }
.question-button-white[b-fxufqxilui]{ border-color: rgba(255,255,255,.28); }

/* ---------- Section 2-3 (Big gains cards) ---------- */
.section-2-3[b-fxufqxilui]{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){
  .section-2-3[b-fxufqxilui]{ grid-template-columns: 1fr; }
}

.section-2-3-left[b-fxufqxilui],
.section-2-3-right[b-fxufqxilui]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  backdrop-filter: blur(12px);
  display:flex;
  justify-content:space-between;
  gap: 14px;
}

.section-2-3-info[b-fxufqxilui]{ display:flex; gap: 14px; align-items:center; }
.section-2-3-info-title[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 14px;
}
.section-2-3-info-note[b-fxufqxilui]{ color: rgba(255,255,255,.72); font-weight: 800; font-size: 12px; }

.section-2-3-result[b-fxufqxilui]{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(180px 80px at 20% 30%, rgba(118,190,197,.20), transparent 60%),
    radial-gradient(180px 80px at 80% 30%, rgba(120,121,241,.18), transparent 60%),
    rgba(255,255,255,.04);
}
.section-2-3-result-title[b-fxufqxilui]{
  font-size: 22px;
  font-weight: 1100;
  letter-spacing: -0.02em;
}
.section-2-3-result-info[b-fxufqxilui]{
  margin-left: 6px;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  font-size: 12px;
}

/* ---------- Section 2-4 (info strip) ---------- */
.section-2-4[b-fxufqxilui]{
  margin-top: 18px;
}
.section-2-4 .modal-info-purple[b-fxufqxilui]{
  border-radius: 28px;
  border: 1px solid rgba(120,121,241,.28);
  background:
    radial-gradient(800px 250px at 10% 0%, rgba(120,121,241,.22), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px 18px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  backdrop-filter: blur(12px);
}

/* ---------- Section 3 (comparison blocks) ---------- */
.section-3[b-fxufqxilui]{
  padding: 26px 18px 60px;
}
.middle-content[b-fxufqxilui]{
  max-width: 1220px;
  margin: 0 auto;
}
.middle-parent[b-fxufqxilui]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  padding: 18px;
}
.middle-top[b-fxufqxilui]{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 10px 2px;
}
.middle-top .title[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.middle-top span[b-fxufqxilui]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}

.middle-custom-info[b-fxufqxilui]{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px;
}

/* Two comparison cards */
.middle-down-left[b-fxufqxilui],
.middle-down-right[b-fxufqxilui]{
  margin-top: 14px;
}
.middle-down-left .middle-down-block[b-fxufqxilui],
.middle-down-right .middle-down-block[b-fxufqxilui]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  overflow:hidden;
}
.middle-down-block-title-content[b-fxufqxilui]{
  padding: 14px 14px 6px;
}
.flex-title-middle[b-fxufqxilui]{ display:flex; gap: 12px; align-items:center; }
.title-middle-main[b-fxufqxilui]{ color: rgba(255,255,255,.92); }

.middle-down-block .info-value[b-fxufqxilui]{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  padding: 12px 14px;
}
.middle-down-block .bar[b-fxufqxilui]{ display:none; }

/* Detail toggle area */
.middle-down[b-fxufqxilui]{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.middle-down-asterix[b-fxufqxilui]{
  margin-top: 12px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* ---------- Tables (.tableau) ---------- */
.tableau[b-fxufqxilui]{
  width: 100%;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.tableau .row[b-fxufqxilui]{
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 0;
}
.tableau .col-title-top[b-fxufqxilui]{
  padding: 12px;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tableau .col-title[b-fxufqxilui]{
  padding: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tableau .col[b-fxufqxilui]{
  padding: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tableau .row:nth-child(even) .col[b-fxufqxilui]{ background: rgba(255,255,255,.02); }
.tableau .row:nth-child(even) .col-title[b-fxufqxilui]{ background: rgba(255,255,255,.03); }

/* Responsive table */
@media (max-width: 980px){
  .tableau .row[b-fxufqxilui]{ grid-template-columns: 1.2fr repeat(4, 1fr); }
}
@media (max-width: 720px){
  .tableau[b-fxufqxilui]{ overflow:auto; }
  .tableau .row[b-fxufqxilui]{ min-width: 820px; }
}

/* ---------- Joycash block ---------- */
.section-joycash[b-fxufqxilui]{
  margin-top: 14px;
  border-radius: 28px;
  border: 1px solid rgba(118,190,197,.22);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(118,190,197,.18), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  flex-direction: column;
  gap: 10px;
}
.section-joycash .title[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.section-joycash .description[b-fxufqxilui]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}
.joycash-inputs[b-fxufqxilui]{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 900px){
  .joycash-inputs[b-fxufqxilui]{ grid-template-columns: 1fr; }
}
.joycash-result[b-fxufqxilui]{
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px solid rgba(118,190,197,.22);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}

/* Joycash button */
.button-custom-joycash[b-fxufqxilui]{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(118,190,197,.35);
  background: linear-gradient(90deg, rgba(118,190,197,.28), rgba(71,118,230,.22));
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  user-select:none;
}
.button-custom-joycash span[b-fxufqxilui]{ font-weight: 1000; }
.button-custom-joycash:hover[b-fxufqxilui]{ filter: brightness(1.06); }

/* ---------- Modals ---------- */
.modal-parent[b-fxufqxilui]{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7,5,28,.70);
  backdrop-filter: blur(10px);
  z-index: 9999;
}
.modal-parent.active[b-fxufqxilui]{ display:flex; }

.modal-content[b-fxufqxilui]{
  width: min(920px, 96vw);
  max-height: 86vh;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(120,121,241,.22), transparent 60%),
    rgba(12,10,34,.92);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 18px;
}
.modal-content.overflow-auto[b-fxufqxilui]{ overflow:auto; }

.purple-shadow[b-fxufqxilui]{ box-shadow: 0 20px 55px rgba(0,0,0,.45); }

.close-button[b-fxufqxilui]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.75);
  cursor:pointer;
  float:right;
}
.close-button:hover[b-fxufqxilui]{ color: rgba(255,255,255,.92); }

.modal-title[b-fxufqxilui]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
  margin: 8px 0 10px;
}
.modal-description[b-fxufqxilui]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.modal-description p[b-fxufqxilui]{ margin: 0 0 8px; }

.modal-info-purple[b-fxufqxilui],
.modal-info-yellow[b-fxufqxilui],
.modal-info-pink[b-fxufqxilui]{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  margin-top: 12px;
}
.modal-info-purple[b-fxufqxilui]{ border-color: rgba(120,121,241,.26); }
.modal-info-yellow[b-fxufqxilui]{ border-color: rgba(255,207,38,.26); }
.modal-info-pink[b-fxufqxilui]{ border-color: rgba(255,40,127,.22); }

.modal-buttons[b-fxufqxilui]{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.special-button-modal[b-fxufqxilui]{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.special-button-modal:hover[b-fxufqxilui]{ filter: brightness(1.06); }

/* ---------- Fix the "everything looks opacity 0.3" problem ----------
   If you have any parent with opacity set (common: modal or container),
   it dims ALL children. This forces your main UI to stay opaque. */
.MainContainer[b-fxufqxilui],
.section-1[b-fxufqxilui],.section-2[b-fxufqxilui],.section-3[b-fxufqxilui],
.section-2-parent[b-fxufqxilui],.section-2-1[b-fxufqxilui],.section-2-2[b-fxufqxilui],.right-inputs[b-fxufqxilui],.middle-parent[b-fxufqxilui]{
  opacity: 1 !important;
}

/* If you used a global rule like ".MainContainer { opacity:.3 }" or ".section-2 { opacity:.3 }",
   remove it. Opacity on a parent will ALWAYS fade children. */

/* ---------- Small quality touches ---------- */
input[b-fxufqxilui], button[b-fxufqxilui] { font-family: inherit; }
input[b-fxufqxilui]::-webkit-outer-spin-button,
input[b-fxufqxilui]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number][b-fxufqxilui]{ -moz-appearance: textfield; }

[b-fxufqxilui]::selection{ background: rgba(120,121,241,.35); }
/* =========================================================
   WIDTH + SPACING BOOST (append at END of Joymeals.razor.css)
   - Wider containers
   - More padding and breathing room
   - Bigger gaps between blocks
   ========================================================= */

/* Wider page + more outer padding */
.section-1[b-fxufqxilui],
.section-2[b-fxufqxilui],
.section-3[b-fxufqxilui]{
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.section-2-parent[b-fxufqxilui],
.middle-content[b-fxufqxilui]{
  max-width: 1540px !important; /* was ~1220 */
}

/* Hero spacing */
.section-1[b-fxufqxilui]{
  padding-top: 72px !important;
  padding-bottom: 32px !important;
}
.section-1 .description[b-fxufqxilui]{
  margin-top: 14px !important;
  max-width: 1050px !important;
}

/* Main grid: more separation */
.section-2-1[b-fxufqxilui]{
  gap: 40px !important;
  margin-top: 30px !important;
}

/* Cards: more internal padding */
.right-inputs[b-fxufqxilui]{
  padding: 30px !important;
}

.section-2-2[b-fxufqxilui]{
  padding: 26px !important;
  gap: 18px !important;
}

/* Inputs vertical rhythm */
.flex-title[b-fxufqxilui]{
  margin-top: 18px !important;
  gap: 6px !important;
}
.input-value1[b-fxufqxilui],
.input-value2[b-fxufqxilui],
.input-value3[b-fxufqxilui],
.input-value4[b-fxufqxilui],
.input-value5[b-fxufqxilui]{
  margin-top: 12px !important;
}

/* Bigger input height + icon area */
.input-custom-parent[b-fxufqxilui]{
  border-radius: 18px !important;
}
.custom-input-style[b-fxufqxilui]{
  padding: 14px 16px !important;
}
.input-custom-right[b-fxufqxilui]{
  width: 64px !important;
}

/* +/- controls more comfy */
.input-plus-minus-parent[b-fxufqxilui]{
  grid-template-columns: 52px 1fr 52px !important;
  border-radius: 18px !important;
}
.number-input[b-fxufqxilui]{
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

/* Result columns spacing */
.section-2-2-right[b-fxufqxilui],
.section-2-2-left[b-fxufqxilui]{
  padding: 12px 12px 8px !important;
  gap: 12px !important;
}

/* Result rows: more padding */
.info-value[b-fxufqxilui]{
  padding: 12px 14px !important;
  border-radius: 18px !important;
}
.price-info[b-fxufqxilui]{
  font-size: 20px !important;
}

/* Section 2-3: more space + stronger presence */
.section-2-3[b-fxufqxilui]{
  margin-top: 26px !important;
  gap: 22px !important;
}
.section-2-3-left[b-fxufqxilui],
.section-2-3-right[b-fxufqxilui]{
  padding: 22px !important;
}

/* Section 2-4 info strip */
.section-2-4[b-fxufqxilui]{
  margin-top: 24px !important;
}
.section-2-4 .modal-info-purple[b-fxufqxilui]{
  padding: 20px 22px !important;
}

/* Section 3 container bigger + more padding */
.section-3[b-fxufqxilui]{
  padding-top: 34px !important;
  padding-bottom: 80px !important;
}
.middle-parent[b-fxufqxilui]{
  padding: 26px !important;
}
.middle-down-asterix[b-fxufqxilui]{
  padding: 18px !important;
}

/* Joycash spacing */
.section-joycash[b-fxufqxilui]{
  padding: 22px !important;
}
.joycash-inputs[b-fxufqxilui]{
  gap: 18px !important;
  margin-top: 12px !important;
}
.joycash-result[b-fxufqxilui]{
  padding: 14px 16px !important;
}

/* Modal: a bit larger */
.modal-content[b-fxufqxilui]{
  width: min(1080px, 96vw) !important;
  padding: 22px !important;
}

/* Responsive: keep good padding on small screens */
@media (max-width: 900px){
  .section-1[b-fxufqxilui],
  .section-2[b-fxufqxilui],
  .section-3[b-fxufqxilui]{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-2-parent[b-fxufqxilui],
  .middle-content[b-fxufqxilui]{
    max-width: 100% !important;
  }

  .right-inputs[b-fxufqxilui],
  .section-2-2[b-fxufqxilui],
  .middle-parent[b-fxufqxilui]{
    padding: 18px !important;
  }

  .section-2-1[b-fxufqxilui]{
    gap: 18px !important;
  }
}


/* =========================================================
   SECTION 3 – CLEANER CARDS + NICE HOVER (append at END)
   - cleaner look (less “bar” feeling)
   - subtle lift + glow hover
   - no CSS variables
   ========================================================= */

/* Make Section 3 container breathe + look premium */
.section-3[b-fxufqxilui]{
  padding-top: 44px !important;
}

.middle-parent[b-fxufqxilui]{
  border-radius: 28px !important;
  padding: 28px !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
}

/* Top header area: cleaner */
.middle-top[b-fxufqxilui]{
  padding: 6px 6px 12px !important;
  gap: 10px !important;
}
.middle-top .title[b-fxufqxilui]{
  font-size: 20px !important;
}
.middle-top span[b-fxufqxilui]{
  color: rgba(255,255,255,0.68) !important;
}

/* “Montant net à octroyer” strip: neutral + subtle */
.middle-top .middle-custom-info.info-value[b-fxufqxilui]{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Layout: give more spacing between the two big cards */
.middle-down-left[b-fxufqxilui],
.middle-down-right[b-fxufqxilui]{
  margin-top: 18px !important;
}

/* ===============================
   Card base styling (both blocks)
   =============================== */
.middle-down-left .middle-down-block[b-fxufqxilui],
.middle-down-right .middle-down-block[b-fxufqxilui]{
  border-radius: 26px !important;
  overflow: hidden !important;

  /* Cleaner surface */
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  /* Smooth hover */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease !important;

  box-shadow: 0 18px 48px rgba(0,0,0,0.42) !important;
  position: relative;
}

/* Subtle top sheen */
.middle-down-left .middle-down-block[b-fxufqxilui]::before,
.middle-down-right .middle-down-block[b-fxufqxilui]::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 240px at 10% 0%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events:none;
}

/* Hover effect (lift + glow) */
.middle-down-left .middle-down-block:hover[b-fxufqxilui],
.middle-down-right .middle-down-block:hover[b-fxufqxilui]{
  transform: translateY(-6px);
  box-shadow: 0 28px 86px rgba(0,0,0,0.60);
  border-color: rgba(255,255,255,0.18) !important;
}

/* Make the title area more “card-like” */
.middle-down-block-title-content[b-fxufqxilui]{
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Align icon + title nicely */
.flex-title-middle img[b-fxufqxilui]{
  width: 56px !important;
  height: 56px !important;
  opacity: 0.95;
}

/* ===============================
   Rows: remove “heavy separators”
   =============================== */
.middle-down-block .info-value[b-fxufqxilui]{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 18px !important;
}

.middle-down-block .note-result-info[b-fxufqxilui]{
  font-size: 12px !important;
  color: rgba(255,255,255,0.68) !important;
}

.middle-down-block .price-info[b-fxufqxilui]{
  font-size: 18px !important;
  font-weight: 1000 !important;
}

/* Remove the old “bar” divs */
.middle-down-block .bar[b-fxufqxilui]{
  display: none !important;
}

/* ===============================
   Bottom “Coût employeur” rows
   Use your gradients cleanly
   =============================== */

/* ezLunch bottom row (orange gradient) */
.middle-down-left .middle-custom-info.info-value[b-fxufqxilui]{
  margin-top: 6px !important;
  border-radius: 0 0 26px 26px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Salary bottom row (orange gradient) */
.middle-down-right .middle-custom-info.info-value[b-fxufqxilui]{
  margin-top: 6px !important;
  border-radius: 0 0 26px 26px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* On hover: slightly brighter bottom gradient */
.middle-down-left .middle-down-block:hover .middle-custom-info.info-value[b-fxufqxilui],
.middle-down-right .middle-down-block:hover .middle-custom-info.info-value[b-fxufqxilui]{
  filter: brightness(1.06);
}

/* ===============================
   Optional: make the “Voir le détail”
   look like a clean link-button
   =============================== */
.middle-down span[style*="underline"][b-fxufqxilui]{
  display: inline-flex !important;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  text-decoration: none !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.middle-down span[style*="underline"]:hover[b-fxufqxilui]{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* Mobile: reduce lift */
@media (max-width: 900px){
  .middle-down-left .middle-down-block:hover[b-fxufqxilui],
  .middle-down-right .middle-down-block:hover[b-fxufqxilui]{
    transform: translateY(-2px);
  }
}
/* /Components/Pages/JoymealsEconomie.razor.rz.scp.css */
/* =========================================================
   Joymeals.razor.css — Dark glass theme (like your reference)
   Uses ONLY your existing classes. No Razor changes needed.
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root[b-w5gs8n7y24]{
  --bg-0:#07051C;
  --bg-1:#0B0A26;
  --bg-2:#0E0D2E;

  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.085);

  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.55);


  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Accent palette (matches your existing colors) */
  --purple:hsl(226, 46%, 42%);
  --pink:#FF287F;
  --yellow:#FFCF26;
  --teal:#76BEC5;
  --red:#FF4B55;
  --blue:#4776E6;
}

/* ---------- Global base (scoped to this page) ---------- */
.MainContainer[b-w5gs8n7y24]{
  min-height: 100vh;
  color: rgba(255,255,255,.92);
  font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(120,121,241,.18), transparent 55%),
    radial-gradient(900px 420px at 18% 42%, rgba(118,190,197,.12), transparent 55%),
    radial-gradient(900px 420px at 82% 42%, rgba(255,40,127,.10), transparent 55%),
    linear-gradient(180deg, #0B0A26, #07051C);
}

.MainContainer *[b-w5gs8n7y24] { box-sizing: border-box; }
a[b-w5gs8n7y24] { color: --blue; }
a:hover[b-w5gs8n7y24] { color: rgba(71,118,230,.9); }
img[b-w5gs8n7y24] { max-width: 100%; height: auto; }

/* ---------- Section 1 (Hero title) ---------- */
.section-1[b-w5gs8n7y24]{
  padding: 54px 18px 22px;
  text-align: center;
}
.section-1 .title[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 1.1;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.section-1 .description[b-w5gs8n7y24]{
  max-width: 920px;
  margin: 10px auto 0;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}

/* ---------- Section 2 layout ---------- */
.section-2[b-w5gs8n7y24]{
  padding: 18px 18px 40px;
}
.section-2-parent[b-w5gs8n7y24]{
        display: flex;
    flex-direction: column;
    align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

.section-2-1[b-w5gs8n7y24]{
  display: grid;
      width: 100%;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: start;
  margin-top: 22px;
}
@media (max-width: 980px){
  .section-2-1[b-w5gs8n7y24]{ grid-template-columns: 1fr; }
}

/* Left card (inputs) */
.right-inputs[b-w5gs8n7y24]{
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 22px;
  backdrop-filter: blur(12px);
}
.title-period[b-w5gs8n7y24]{
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.input-title[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Period toggles (segmented) */
.choose-period[b-w5gs8n7y24]{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.separator-period[b-w5gs8n7y24]{ display:none; }
.period-button[b-w5gs8n7y24]{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  user-select: none;
}
.period-button:hover[b-w5gs8n7y24]{ transform: translateY(-1px); color: rgba(255,255,255,.92); }
.period-button.active[b-w5gs8n7y24]{
  background: rgba(120,121,241,.22);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(120,121,241,.16);
}

/* Input blocks */
.flex-title[b-w5gs8n7y24]{ display:flex; flex-direction:column; gap:4px; margin-top: 14px; }
.title-main[b-w5gs8n7y24]{ font-weight: 900; font-size: 13px; }
.title-note[b-w5gs8n7y24]{ color: rgba(255,255,255,.55); font-size: 12px; }

.input-value1[b-w5gs8n7y24],.input-value2[b-w5gs8n7y24],.input-value3[b-w5gs8n7y24],.input-value4[b-w5gs8n7y24],.input-value5[b-w5gs8n7y24]{
  margin-top: 10px;
}

/* Checkbox yes/no */
.check-box-button[b-w5gs8n7y24]{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.check-box-button:hover[b-w5gs8n7y24]{ transform: translateY(-1px); }
.check-box-button.active[b-w5gs8n7y24]{
  background: rgba(118,190,197,.18);
  border-color: rgba(118,190,197,.35);
  color: --teal;
}
.text-check-box[b-w5gs8n7y24]{
  margin: 0 14px 0 8px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
}

/* Inputs with icon block */
.input-custom-parent[b-w5gs8n7y24]{
  display:flex;
  align-items:stretch;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.input-custom-left[b-w5gs8n7y24]{ flex: 1; display:flex; }
.custom-input-style[b-w5gs8n7y24]{
  width: 100%;
  border: 0;
  outline: none;
  padding: 12px 14px;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.custom-input-style[b-w5gs8n7y24]::placeholder{ color: rgba(255,255,255,.35); font-weight: 700; }
.input-custom-right[b-w5gs8n7y24]{
  width: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.05);
}
.vertical-separator[b-w5gs8n7y24]{
  width: 1px;
  height: 60%;
  background: rgba(255,255,255,.12);
  margin-right: 10px;
}
.input-custom-right i[b-w5gs8n7y24], .input-custom-right span[b-w5gs8n7y24]{
  color: rgba(255,255,255,.75);
  font-weight: 900;
}

/* +/- input */
.input-plus-minus-parent[b-w5gs8n7y24]{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.input-plus-minus-left[b-w5gs8n7y24],.input-plus-minus-right[b-w5gs8n7y24]{
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05);
}
.simulator-input-middle[b-w5gs8n7y24]{ display:flex; }
.button-simulator-plus-minus[b-w5gs8n7y24]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor:pointer;
  transition: transform .15s ease, color .15s ease;
}
.button-simulator-plus-minus:hover[b-w5gs8n7y24]{ transform: translateY(-1px); color: rgba(255,255,255,.92); }
.button-simulator-plus-minus.active[b-w5gs8n7y24]{ opacity:.45; cursor:not-allowed; transform:none; }

/* plain number input (employees count) */
.number-input[b-w5gs8n7y24]{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
  outline:none;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* ---------- Right side summary/result card ---------- */
.section-2-2[b-w5gs8n7y24]{
  border-radius: 28px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 18px;
  backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Topbar */
.section-2-2-topbar[b-w5gs8n7y24]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.special-button-order[b-w5gs8n7y24]{
  border: 1px solid rgba(120,121,241,.40);
  background: linear-gradient(90deg, rgba(120,121,241,.35), rgba(71,118,230,.28));
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 10px 14px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
}
.custom-input-style-left-content[b-w5gs8n7y24]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
  outline:none;
}
.special-button-order:hover[b-w5gs8n7y24]{ filter: brightness(1.06); }

/* Two columns inside */
.section-2-2-right[b-w5gs8n7y24],
.section-2-2-left[b-w5gs8n7y24]{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 10px 10px 6px;
}
.title-result[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* Info rows */
.info-value[b-w5gs8n7y24]{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.info-question[b-w5gs8n7y24]{ display:flex; align-items:center; gap:10px; }
.note-result-info[b-w5gs8n7y24]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}
.price-info[b-w5gs8n7y24]{
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 18px;
  white-space: nowrap;
}

/* Divider */
.bar[b-w5gs8n7y24]{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 4px 8px;
}

/* Question buttons (round) */
.question-button-grey[b-w5gs8n7y24],
.question-button-yellow[b-w5gs8n7y24],
.question-button-pink[b-w5gs8n7y24],
.question-button-black[b-w5gs8n7y24],
.question-button-white[b-w5gs8n7y24]{
  width: 22px;
  height: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.question-button-grey[b-w5gs8n7y24]::before,
.question-button-yellow[b-w5gs8n7y24]::before,
.question-button-pink[b-w5gs8n7y24]::before,
.question-button-black[b-w5gs8n7y24]::before,
.question-button-white[b-w5gs8n7y24]::before{
  content: "?";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.question-button-yellow[b-w5gs8n7y24]{ border-color: rgba(255,207,38,.35); }
.question-button-yellow[b-w5gs8n7y24]::before{ color: #FFCF26; }
.question-button-pink[b-w5gs8n7y24]{ border-color: rgba(255,40,127,.35); }
.question-button-pink[b-w5gs8n7y24]::before{ color: #FF287F; }
.question-button-black[b-w5gs8n7y24]{ border-color: rgba(0,0,0,.35); background: rgba(0,0,0,.18); }
.question-button-black[b-w5gs8n7y24]::before{ color: rgba(255,255,255,.85); }
.question-button-white[b-w5gs8n7y24]{ border-color: rgba(255,255,255,.28); }

/* ---------- Section 2-3 (Big gains cards) ---------- */
.section-2-3[b-w5gs8n7y24]{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){
  .section-2-3[b-w5gs8n7y24]{ grid-template-columns: 1fr; }
}

.section-2-3-left[b-w5gs8n7y24],
.section-2-3-right[b-w5gs8n7y24]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  backdrop-filter: blur(12px);
  display:flex;
  justify-content:space-between;
  gap: 14px;
}

.section-2-3-info[b-w5gs8n7y24]{ display:flex; gap: 14px; align-items:center; }
.section-2-3-info-title[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 14px;
}
.section-2-3-info-note[b-w5gs8n7y24]{ color: rgba(255,255,255,.72); font-weight: 800; font-size: 12px; }

.section-2-3-result[b-w5gs8n7y24]{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(180px 80px at 20% 30%, rgba(118,190,197,.20), transparent 60%),
    radial-gradient(180px 80px at 80% 30%, rgba(120,121,241,.18), transparent 60%),
    rgba(255,255,255,.04);
}
.section-2-3-result-title[b-w5gs8n7y24]{
  font-size: 22px;
  font-weight: 1100;
  letter-spacing: -0.02em;
}
.section-2-3-result-info[b-w5gs8n7y24]{
  margin-left: 6px;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  font-size: 12px;
}

/* ---------- Section 2-4 (info strip) ---------- */
.section-2-4[b-w5gs8n7y24]{
  margin-top: 18px;
}
.section-2-4 .modal-info-purple[b-w5gs8n7y24]{
  border-radius: 28px;
  border: 1px solid rgba(120,121,241,.28);
  background:
    radial-gradient(800px 250px at 10% 0%, rgba(120,121,241,.22), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px 18px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  backdrop-filter: blur(12px);
}

/* ---------- Section 3 (comparison blocks) ---------- */
.section-3[b-w5gs8n7y24]{
  padding: 26px 18px 60px;
}
.middle-content[b-w5gs8n7y24]{
  max-width: 1220px;
  margin: 0 auto;
}
.middle-parent[b-w5gs8n7y24]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  padding: 18px;
}
.middle-top[b-w5gs8n7y24]{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 10px 2px;
}
.middle-top .title[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.middle-top span[b-w5gs8n7y24]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}

.middle-custom-info[b-w5gs8n7y24]{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px;
}

/* Two comparison cards */
.middle-down-left[b-w5gs8n7y24],
.middle-down-right[b-w5gs8n7y24]{
  margin-top: 14px;
}
.middle-down-left .middle-down-block[b-w5gs8n7y24],
.middle-down-right .middle-down-block[b-w5gs8n7y24]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  overflow:hidden;
}
.middle-down-block-title-content[b-w5gs8n7y24]{
  padding: 14px 14px 6px;
}
.flex-title-middle[b-w5gs8n7y24]{ display:flex; gap: 12px; align-items:center; }
.title-middle-main[b-w5gs8n7y24]{ color: rgba(255,255,255,.92); }

.middle-down-block .info-value[b-w5gs8n7y24]{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  padding: 12px 14px;
}
.middle-down-block .bar[b-w5gs8n7y24]{ display:none; }

/* Detail toggle area */
.middle-down[b-w5gs8n7y24]{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.middle-down-asterix[b-w5gs8n7y24]{
  margin-top: 12px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* ---------- Tables (.tableau) ---------- */
.tableau[b-w5gs8n7y24]{
  width: 100%;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.tableau .row[b-w5gs8n7y24]{
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 0;
}
.tableau .col-title-top[b-w5gs8n7y24]{
  padding: 12px;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tableau .col-title[b-w5gs8n7y24]{
  padding: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tableau .col[b-w5gs8n7y24]{
  padding: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tableau .row:nth-child(even) .col[b-w5gs8n7y24]{ background: rgba(255,255,255,.02); }
.tableau .row:nth-child(even) .col-title[b-w5gs8n7y24]{ background: rgba(255,255,255,.03); }

/* Responsive table */
@media (max-width: 980px){
  .tableau .row[b-w5gs8n7y24]{ grid-template-columns: 1.2fr repeat(4, 1fr); }
}
@media (max-width: 720px){
  .tableau[b-w5gs8n7y24]{ overflow:auto; }
  .tableau .row[b-w5gs8n7y24]{ min-width: 820px; }
}

/* ---------- Joycash block ---------- */
.section-joycash[b-w5gs8n7y24]{
  margin-top: 14px;
  border-radius: 28px;
  border: 1px solid rgba(118,190,197,.22);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(118,190,197,.18), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  flex-direction: column;
  gap: 10px;
}
.section-joycash .title[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.section-joycash .description[b-w5gs8n7y24]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}
.joycash-inputs[b-w5gs8n7y24]{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 900px){
  .joycash-inputs[b-w5gs8n7y24]{ grid-template-columns: 1fr; }
}
.joycash-result[b-w5gs8n7y24]{
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px solid rgba(118,190,197,.22);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}

/* Joycash button */
.button-custom-joycash[b-w5gs8n7y24]{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(118,190,197,.35);
  background: linear-gradient(90deg, rgba(118,190,197,.28), rgba(71,118,230,.22));
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  user-select:none;
}
.button-custom-joycash span[b-w5gs8n7y24]{ font-weight: 1000; }
.button-custom-joycash:hover[b-w5gs8n7y24]{ filter: brightness(1.06); }

/* ---------- Modals ---------- */
.modal-parent[b-w5gs8n7y24]{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7,5,28,.70);
  backdrop-filter: blur(10px);
  z-index: 9999;
}
.modal-parent.active[b-w5gs8n7y24]{ display:flex; }

.modal-content[b-w5gs8n7y24]{
  width: min(920px, 96vw);
  max-height: 86vh;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(120,121,241,.22), transparent 60%),
    rgba(12,10,34,.92);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 18px;
}
.modal-content.overflow-auto[b-w5gs8n7y24]{ overflow:auto; }

.purple-shadow[b-w5gs8n7y24]{ box-shadow: 0 20px 55px rgba(0,0,0,.45); }

.close-button[b-w5gs8n7y24]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.75);
  cursor:pointer;
  float:right;
}
.close-button:hover[b-w5gs8n7y24]{ color: rgba(255,255,255,.92); }

.modal-title[b-w5gs8n7y24]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
  margin: 8px 0 10px;
}
.modal-description[b-w5gs8n7y24]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.modal-description p[b-w5gs8n7y24]{ margin: 0 0 8px; }

.modal-info-purple[b-w5gs8n7y24],
.modal-info-yellow[b-w5gs8n7y24],
.modal-info-pink[b-w5gs8n7y24]{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  margin-top: 12px;
}
.modal-info-purple[b-w5gs8n7y24]{ border-color: rgba(120,121,241,.26); }
.modal-info-yellow[b-w5gs8n7y24]{ border-color: rgba(255,207,38,.26); }
.modal-info-pink[b-w5gs8n7y24]{ border-color: rgba(255,40,127,.22); }

.modal-buttons[b-w5gs8n7y24]{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.special-button-modal[b-w5gs8n7y24]{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.special-button-modal:hover[b-w5gs8n7y24]{ filter: brightness(1.06); }

/* ---------- Fix the "everything looks opacity 0.3" problem ----------
   If you have any parent with opacity set (common: modal or container),
   it dims ALL children. This forces your main UI to stay opaque. */
.MainContainer[b-w5gs8n7y24],
.section-1[b-w5gs8n7y24],.section-2[b-w5gs8n7y24],.section-3[b-w5gs8n7y24],
.section-2-parent[b-w5gs8n7y24],.section-2-1[b-w5gs8n7y24],.section-2-2[b-w5gs8n7y24],.right-inputs[b-w5gs8n7y24],.middle-parent[b-w5gs8n7y24]{
  opacity: 1 !important;
}

/* If you used a global rule like ".MainContainer { opacity:.3 }" or ".section-2 { opacity:.3 }",
   remove it. Opacity on a parent will ALWAYS fade children. */

/* ---------- Small quality touches ---------- */
input[b-w5gs8n7y24], button[b-w5gs8n7y24] { font-family: inherit; }
input[b-w5gs8n7y24]::-webkit-outer-spin-button,
input[b-w5gs8n7y24]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number][b-w5gs8n7y24]{ -moz-appearance: textfield; }

[b-w5gs8n7y24]::selection{ background: rgba(120,121,241,.35); }
/* =========================================================
   WIDTH + SPACING BOOST (append at END of Joymeals.razor.css)
   - Wider containers
   - More padding and breathing room
   - Bigger gaps between blocks
   ========================================================= */

/* Wider page + more outer padding */
.section-1[b-w5gs8n7y24],
.section-2[b-w5gs8n7y24],
.section-3[b-w5gs8n7y24]{
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.section-2-parent[b-w5gs8n7y24],
.middle-content[b-w5gs8n7y24]{
  max-width: 1540px !important; /* was ~1220 */
}

/* Hero spacing */
.section-1[b-w5gs8n7y24]{
  padding-top: 72px !important;
  padding-bottom: 32px !important;
}
.section-1 .description[b-w5gs8n7y24]{
  margin-top: 14px !important;
  max-width: 1050px !important;
}

/* Main grid: more separation */
.section-2-1[b-w5gs8n7y24]{
  gap: 40px !important;
  margin-top: 30px !important;
}

/* Cards: more internal padding */
.right-inputs[b-w5gs8n7y24]{
  padding: 30px !important;
}

.section-2-2[b-w5gs8n7y24]{
  padding: 26px !important;
  gap: 18px !important;
}

/* Inputs vertical rhythm */
.flex-title[b-w5gs8n7y24]{
  margin-top: 18px !important;
  gap: 6px !important;
}
.input-value1[b-w5gs8n7y24],
.input-value2[b-w5gs8n7y24],
.input-value3[b-w5gs8n7y24],
.input-value4[b-w5gs8n7y24],
.input-value5[b-w5gs8n7y24]{
  margin-top: 12px !important;
}

/* Bigger input height + icon area */
.input-custom-parent[b-w5gs8n7y24]{
  border-radius: 18px !important;
}
.custom-input-style[b-w5gs8n7y24]{
  padding: 14px 16px !important;
}
.input-custom-right[b-w5gs8n7y24]{
  width: 64px !important;
}

/* +/- controls more comfy */
.input-plus-minus-parent[b-w5gs8n7y24]{
  grid-template-columns: 52px 1fr 52px !important;
  border-radius: 18px !important;
}
.number-input[b-w5gs8n7y24]{
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

/* Result columns spacing */
.section-2-2-right[b-w5gs8n7y24],
.section-2-2-left[b-w5gs8n7y24]{
  padding: 12px 12px 8px !important;
  gap: 12px !important;
}

/* Result rows: more padding */
.info-value[b-w5gs8n7y24]{
  padding: 12px 14px !important;
  border-radius: 18px !important;
}
.price-info[b-w5gs8n7y24]{
  font-size: 20px !important;
}

/* Section 2-3: more space + stronger presence */
.section-2-3[b-w5gs8n7y24]{
  margin-top: 26px !important;
  gap: 22px !important;
}
.section-2-3-left[b-w5gs8n7y24],
.section-2-3-right[b-w5gs8n7y24]{
  padding: 22px !important;
}

/* Section 2-4 info strip */
.section-2-4[b-w5gs8n7y24]{
  margin-top: 24px !important;
}
.section-2-4 .modal-info-purple[b-w5gs8n7y24]{
  padding: 20px 22px !important;
}

/* Section 3 container bigger + more padding */
.section-3[b-w5gs8n7y24]{
  padding-top: 34px !important;
  padding-bottom: 80px !important;
}
.middle-parent[b-w5gs8n7y24]{
  padding: 26px !important;
}
.middle-down-asterix[b-w5gs8n7y24]{
  padding: 18px !important;
}

/* Joycash spacing */
.section-joycash[b-w5gs8n7y24]{
  padding: 22px !important;
}
.joycash-inputs[b-w5gs8n7y24]{
  gap: 18px !important;
  margin-top: 12px !important;
}
.joycash-result[b-w5gs8n7y24]{
  padding: 14px 16px !important;
}

/* Modal: a bit larger */
.modal-content[b-w5gs8n7y24]{
  width: min(1080px, 96vw) !important;
  padding: 22px !important;
}

/* Responsive: keep good padding on small screens */
@media (max-width: 900px){
  .section-1[b-w5gs8n7y24],
  .section-2[b-w5gs8n7y24],
  .section-3[b-w5gs8n7y24]{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-2-parent[b-w5gs8n7y24],
  .middle-content[b-w5gs8n7y24]{
    max-width: 100% !important;
  }

  .right-inputs[b-w5gs8n7y24],
  .section-2-2[b-w5gs8n7y24],
  .middle-parent[b-w5gs8n7y24]{
    padding: 18px !important;
  }

  .section-2-1[b-w5gs8n7y24]{
    gap: 18px !important;
  }
}


/* =========================================================
   SECTION 3 – CLEANER CARDS + NICE HOVER (append at END)
   - cleaner look (less “bar” feeling)
   - subtle lift + glow hover
   - no CSS variables
   ========================================================= */

/* Make Section 3 container breathe + look premium */
.section-3[b-w5gs8n7y24]{
  padding-top: 44px !important;
}

.middle-parent[b-w5gs8n7y24]{
  border-radius: 28px !important;
  padding: 28px !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
}

/* Top header area: cleaner */
.middle-top[b-w5gs8n7y24]{
  padding: 6px 6px 12px !important;
  gap: 10px !important;
}
.middle-top .title[b-w5gs8n7y24]{
  font-size: 20px !important;
}
.middle-top span[b-w5gs8n7y24]{
  color: rgba(255,255,255,0.68) !important;
}

/* “Montant net à octroyer” strip: neutral + subtle */
.middle-top .middle-custom-info.info-value[b-w5gs8n7y24]{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Layout: give more spacing between the two big cards */
.middle-down-left[b-w5gs8n7y24],
.middle-down-right[b-w5gs8n7y24]{
  margin-top: 18px !important;
}

/* ===============================
   Card base styling (both blocks)
   =============================== */
.middle-down-left .middle-down-block[b-w5gs8n7y24],
.middle-down-right .middle-down-block[b-w5gs8n7y24]{
  border-radius: 26px !important;
  overflow: hidden !important;

  /* Cleaner surface */
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  /* Smooth hover */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease !important;

  box-shadow: 0 18px 48px rgba(0,0,0,0.42) !important;
  position: relative;
}

/* Subtle top sheen */
.middle-down-left .middle-down-block[b-w5gs8n7y24]::before,
.middle-down-right .middle-down-block[b-w5gs8n7y24]::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 240px at 10% 0%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events:none;
}

/* Hover effect (lift + glow) */
.middle-down-left .middle-down-block:hover[b-w5gs8n7y24],
.middle-down-right .middle-down-block:hover[b-w5gs8n7y24]{
  transform: translateY(-6px);
  box-shadow: 0 28px 86px rgba(0,0,0,0.60);
  border-color: rgba(255,255,255,0.18) !important;
}

/* Make the title area more “card-like” */
.middle-down-block-title-content[b-w5gs8n7y24]{
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Align icon + title nicely */
.flex-title-middle img[b-w5gs8n7y24]{
  width: 56px !important;
  height: 56px !important;
  opacity: 0.95;
}

/* ===============================
   Rows: remove “heavy separators”
   =============================== */
.middle-down-block .info-value[b-w5gs8n7y24]{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 18px !important;
}

.middle-down-block .note-result-info[b-w5gs8n7y24]{
  font-size: 12px !important;
  color: rgba(255,255,255,0.68) !important;
}

.middle-down-block .price-info[b-w5gs8n7y24]{
  font-size: 18px !important;
  font-weight: 1000 !important;
}

/* Remove the old “bar” divs */
.middle-down-block .bar[b-w5gs8n7y24]{
  display: none !important;
}

/* ===============================
   Bottom “Coût employeur” rows
   Use your gradients cleanly
   =============================== */

/* JoyMeals bottom row (purple gradient) */
.middle-down-left .middle-custom-info.info-value[b-w5gs8n7y24]{
  margin-top: 6px !important;
  border-radius: 0 0 26px 26px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Salary bottom row (orange gradient) */
.middle-down-right .middle-custom-info.info-value[b-w5gs8n7y24]{
  margin-top: 6px !important;
  border-radius: 0 0 26px 26px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* On hover: slightly brighter bottom gradient */
.middle-down-left .middle-down-block:hover .middle-custom-info.info-value[b-w5gs8n7y24],
.middle-down-right .middle-down-block:hover .middle-custom-info.info-value[b-w5gs8n7y24]{
  filter: brightness(1.06);
}

/* ===============================
   Optional: make the “Voir le détail”
   look like a clean link-button
   =============================== */
.middle-down span[style*="underline"][b-w5gs8n7y24]{
  display: inline-flex !important;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  text-decoration: none !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.middle-down span[style*="underline"]:hover[b-w5gs8n7y24]{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* Mobile: reduce lift */
@media (max-width: 900px){
  .middle-down-left .middle-down-block:hover[b-w5gs8n7y24],
  .middle-down-right .middle-down-block:hover[b-w5gs8n7y24]{
    transform: translateY(-2px);
  }
}


.dropdown-menu .sector-item[b-w5gs8n7y24] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .5rem;
    white-space: normal;
    padding: .5rem .75rem;
}

.dropdown-menu .sector-item .form-check-input[b-w5gs8n7y24] {
    margin: 0;
    /* supprime la marge négative Bootstrap */
    float: none;
    /* empêche le flottant gauche */
    position: static;
    /* pas de position relative qui décale */
}

.dropdown[b-w5gs8n7y24] {
    width: fit-content;
    min-height: 39px;
    border-radius: 15px;
    box-shadow: 8px 8px 24px 0px rgba(84, 41, 178, 0.20);
}

.dropdown-custom[b-w5gs8n7y24] {
    width: 250px;
    border-radius: 15px;
    border: 1px solid #07051C;
    min-height: 39px;
    background: #FFF;
    box-shadow: 8px 8px 24px 0px rgba(84, 41, 178, 0.20);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-custom:hover[b-w5gs8n7y24] {
    width: 250px;
    border-radius: 15px;
    border: 1px solid #07051C;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-item[b-w5gs8n7y24] {
    display: flex;
    align-items: center;
    flex-direction: row;
    min-height: 30px;
    justify-content: space-between;
}

/* /Components/Pages/ReductionEmploye.razor.rz.scp.css */
/* =========================================================
   Joymeals.razor.css — Dark glass theme (like your reference)
   Uses ONLY your existing classes. No Razor changes needed.
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root[b-hhzlguq2rr]{
  --bg-0:#07051C;
  --bg-1:#0B0A26;
  --bg-2:#0E0D2E;

  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.085);

  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.55);


  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Accent palette (matches your existing colors) */
  --purple:hsl(226, 46%, 42%);
  --pink:#FF287F;
  --yellow:#FFCF26;
  --teal:#76BEC5;
  --red:#FF4B55;
  --blue:#4776E6;
}

/* ---------- Global base (scoped to this page) ---------- */
.MainContainer[b-hhzlguq2rr]{
  min-height: 100vh;
  color: rgba(255,255,255,.92);
  font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(120,121,241,.18), transparent 55%),
    radial-gradient(900px 420px at 18% 42%, rgba(118,190,197,.12), transparent 55%),
    radial-gradient(900px 420px at 82% 42%, rgba(255,40,127,.10), transparent 55%),
    linear-gradient(180deg, #0B0A26, #07051C);
}

.MainContainer *[b-hhzlguq2rr] { box-sizing: border-box; }
a[b-hhzlguq2rr] { color: --blue; }
a:hover[b-hhzlguq2rr] { color: rgba(71,118,230,.9); }
img[b-hhzlguq2rr] { max-width: 100%; height: auto; }

/* ---------- Section 1 (Hero title) ---------- */
.section-1[b-hhzlguq2rr]{
  padding: 54px 18px 22px;
  text-align: center;
}
.section-1 .title[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 1.1;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.section-1 .description[b-hhzlguq2rr]{
  max-width: 920px;
  margin: 10px auto 0;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}

/* ---------- Section 2 layout ---------- */
.section-2[b-hhzlguq2rr]{
  padding: 18px 18px 40px;
}
.section-2-parent[b-hhzlguq2rr]{
        display: flex;
    flex-direction: column;
    align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

.section-2-1[b-hhzlguq2rr]{
  display: grid;
      width: 100%;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: start;
  margin-top: 22px;
}
@media (max-width: 980px){
  .section-2-1[b-hhzlguq2rr]{ grid-template-columns: 1fr; }
}

/* Left card (inputs) */
.right-inputs[b-hhzlguq2rr]{
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 22px;
  backdrop-filter: blur(12px);
}
.title-period[b-hhzlguq2rr]{
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.input-title[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Period toggles (segmented) */
.choose-period[b-hhzlguq2rr]{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.separator-period[b-hhzlguq2rr]{ display:none; }
.period-button[b-hhzlguq2rr]{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  user-select: none;
}
.period-button:hover[b-hhzlguq2rr]{ transform: translateY(-1px); color: rgba(255,255,255,.92); }
.period-button.active[b-hhzlguq2rr]{
  background: rgba(120,121,241,.22);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(120,121,241,.16);
}

/* Input blocks */
.flex-title[b-hhzlguq2rr]{ display:flex; flex-direction:column; gap:4px; margin-top: 14px; }
.title-main[b-hhzlguq2rr]{ font-weight: 900; font-size: 13px; }
.title-note[b-hhzlguq2rr]{ color: rgba(255,255,255,.55); font-size: 12px; }

.input-value1[b-hhzlguq2rr],.input-value2[b-hhzlguq2rr],.input-value3[b-hhzlguq2rr],.input-value4[b-hhzlguq2rr],.input-value5[b-hhzlguq2rr]{
  margin-top: 10px;
}

/* Checkbox yes/no */
.check-box-button[b-hhzlguq2rr]{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.check-box-button:hover[b-hhzlguq2rr]{ transform: translateY(-1px); }
.check-box-button.active[b-hhzlguq2rr]{
  background: rgba(118,190,197,.18);
  border-color: rgba(118,190,197,.35);
  color: --teal;
}
.text-check-box[b-hhzlguq2rr]{
  margin: 0 14px 0 8px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
}

/* Inputs with icon block */
.input-custom-parent[b-hhzlguq2rr]{
  display:flex;
  align-items:stretch;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.input-custom-left[b-hhzlguq2rr]{ flex: 1; display:flex; }
.custom-input-style[b-hhzlguq2rr]{
  width: 100%;
  border: 0;
  outline: none;
  padding: 12px 14px;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.custom-input-style[b-hhzlguq2rr]::placeholder{ color: rgba(255,255,255,.35); font-weight: 700; }
.input-custom-right[b-hhzlguq2rr]{
  width: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.05);
}
.vertical-separator[b-hhzlguq2rr]{
  width: 1px;
  height: 60%;
  background: rgba(255,255,255,.12);
  margin-right: 10px;
}
.input-custom-right i[b-hhzlguq2rr], .input-custom-right span[b-hhzlguq2rr]{
  color: rgba(255,255,255,.75);
  font-weight: 900;
}

/* +/- input */
.input-plus-minus-parent[b-hhzlguq2rr]{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.input-plus-minus-left[b-hhzlguq2rr],.input-plus-minus-right[b-hhzlguq2rr]{
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05);
}
.simulator-input-middle[b-hhzlguq2rr]{ display:flex; }
.button-simulator-plus-minus[b-hhzlguq2rr]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor:pointer;
  transition: transform .15s ease, color .15s ease;
}
.button-simulator-plus-minus:hover[b-hhzlguq2rr]{ transform: translateY(-1px); color: rgba(255,255,255,.92); }
.button-simulator-plus-minus.active[b-hhzlguq2rr]{ opacity:.45; cursor:not-allowed; transform:none; }

/* plain number input (employees count) */
.number-input[b-hhzlguq2rr]{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
  outline:none;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* ---------- Right side summary/result card ---------- */
.section-2-2[b-hhzlguq2rr]{
  border-radius: 28px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 18px;
  backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Topbar */
.section-2-2-topbar[b-hhzlguq2rr]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.special-button-order[b-hhzlguq2rr]{
  border: 1px solid rgba(120,121,241,.40);
  background: linear-gradient(90deg, rgba(120,121,241,.35), rgba(71,118,230,.28));
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 10px 14px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
}
.custom-input-style-left-content[b-hhzlguq2rr]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
  outline:none;
}
.special-button-order:hover[b-hhzlguq2rr]{ filter: brightness(1.06); }

/* Two columns inside */
.section-2-2-right[b-hhzlguq2rr],
.section-2-2-left[b-hhzlguq2rr]{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 10px 10px 6px;
}
.title-result[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* Info rows */
.info-value[b-hhzlguq2rr]{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.info-question[b-hhzlguq2rr]{ display:flex; align-items:center; gap:10px; }
.note-result-info[b-hhzlguq2rr]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}
.price-info[b-hhzlguq2rr]{
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 18px;
  white-space: nowrap;
}

/* Divider */
.bar[b-hhzlguq2rr]{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 4px 8px;
}

/* Question buttons (round) */
.question-button-grey[b-hhzlguq2rr],
.question-button-yellow[b-hhzlguq2rr],
.question-button-pink[b-hhzlguq2rr],
.question-button-black[b-hhzlguq2rr],
.question-button-white[b-hhzlguq2rr]{
  width: 22px;
  height: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.question-button-grey[b-hhzlguq2rr]::before,
.question-button-yellow[b-hhzlguq2rr]::before,
.question-button-pink[b-hhzlguq2rr]::before,
.question-button-black[b-hhzlguq2rr]::before,
.question-button-white[b-hhzlguq2rr]::before{
  content: "?";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.question-button-yellow[b-hhzlguq2rr]{ border-color: rgba(255,207,38,.35); }
.question-button-yellow[b-hhzlguq2rr]::before{ color: #FFCF26; }
.question-button-pink[b-hhzlguq2rr]{ border-color: rgba(255,40,127,.35); }
.question-button-pink[b-hhzlguq2rr]::before{ color: #FF287F; }
.question-button-black[b-hhzlguq2rr]{ border-color: rgba(0,0,0,.35); background: rgba(0,0,0,.18); }
.question-button-black[b-hhzlguq2rr]::before{ color: rgba(255,255,255,.85); }
.question-button-white[b-hhzlguq2rr]{ border-color: rgba(255,255,255,.28); }

/* ---------- Section 2-3 (Big gains cards) ---------- */
.section-2-3[b-hhzlguq2rr]{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){
  .section-2-3[b-hhzlguq2rr]{ grid-template-columns: 1fr; }
}

.section-2-3-left[b-hhzlguq2rr],
.section-2-3-right[b-hhzlguq2rr]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  backdrop-filter: blur(12px);
  display:flex;
  justify-content:space-between;
  gap: 14px;
}

.section-2-3-info[b-hhzlguq2rr]{ display:flex; gap: 14px; align-items:center; }
.section-2-3-info-title[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 14px;
}
.section-2-3-info-note[b-hhzlguq2rr]{ color: rgba(255,255,255,.72); font-weight: 800; font-size: 12px; }

.section-2-3-result[b-hhzlguq2rr]{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(180px 80px at 20% 30%, rgba(118,190,197,.20), transparent 60%),
    radial-gradient(180px 80px at 80% 30%, rgba(120,121,241,.18), transparent 60%),
    rgba(255,255,255,.04);
}
.section-2-3-result-title[b-hhzlguq2rr]{
  font-size: 22px;
  font-weight: 1100;
  letter-spacing: -0.02em;
}
.section-2-3-result-info[b-hhzlguq2rr]{
  margin-left: 6px;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  font-size: 12px;
}

/* ---------- Section 2-4 (info strip) ---------- */
.section-2-4[b-hhzlguq2rr]{
  margin-top: 18px;
}
.section-2-4 .modal-info-purple[b-hhzlguq2rr]{
  border-radius: 28px;
  border: 1px solid rgba(120,121,241,.28);
  background:
    radial-gradient(800px 250px at 10% 0%, rgba(120,121,241,.22), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px 18px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  backdrop-filter: blur(12px);
}

/* ---------- Section 3 (comparison blocks) ---------- */
.section-3[b-hhzlguq2rr]{
  padding: 26px 18px 60px;
}
.middle-content[b-hhzlguq2rr]{
  max-width: 1220px;
  margin: 0 auto;
}
.middle-parent[b-hhzlguq2rr]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  padding: 18px;
}
.middle-top[b-hhzlguq2rr]{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 10px 2px;
}
.middle-top .title[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.middle-top span[b-hhzlguq2rr]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}

.middle-custom-info[b-hhzlguq2rr]{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px;
}

/* Two comparison cards */
.middle-down-left[b-hhzlguq2rr],
.middle-down-right[b-hhzlguq2rr]{
  margin-top: 14px;
}
.middle-down-left .middle-down-block[b-hhzlguq2rr],
.middle-down-right .middle-down-block[b-hhzlguq2rr]{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  overflow:hidden;
}
.middle-down-block-title-content[b-hhzlguq2rr]{
  padding: 14px 14px 6px;
}
.flex-title-middle[b-hhzlguq2rr]{ display:flex; gap: 12px; align-items:center; }
.title-middle-main[b-hhzlguq2rr]{ color: rgba(255,255,255,.92); }

.middle-down-block .info-value[b-hhzlguq2rr]{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  padding: 12px 14px;
}
.middle-down-block .bar[b-hhzlguq2rr]{ display:none; }

/* Detail toggle area */
.middle-down[b-hhzlguq2rr]{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.middle-down-asterix[b-hhzlguq2rr]{
  margin-top: 12px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* ---------- Tables (.tableau) ---------- */
.tableau[b-hhzlguq2rr]{
  width: 100%;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.tableau .row[b-hhzlguq2rr]{
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 0;
}
.tableau .col-title-top[b-hhzlguq2rr]{
  padding: 12px;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tableau .col-title[b-hhzlguq2rr]{
  padding: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tableau .col[b-hhzlguq2rr]{
  padding: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tableau .row:nth-child(even) .col[b-hhzlguq2rr]{ background: rgba(255,255,255,.02); }
.tableau .row:nth-child(even) .col-title[b-hhzlguq2rr]{ background: rgba(255,255,255,.03); }

/* Responsive table */
@media (max-width: 980px){
  .tableau .row[b-hhzlguq2rr]{ grid-template-columns: 1.2fr repeat(4, 1fr); }
}
@media (max-width: 720px){
  .tableau[b-hhzlguq2rr]{ overflow:auto; }
  .tableau .row[b-hhzlguq2rr]{ min-width: 820px; }
}

/* ---------- Joycash block ---------- */
.section-joycash[b-hhzlguq2rr]{
  margin-top: 14px;
  border-radius: 28px;
  border: 1px solid rgba(118,190,197,.22);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(118,190,197,.18), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  flex-direction: column;
  gap: 10px;
}
.section-joycash .title[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.section-joycash .description[b-hhzlguq2rr]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
}
.joycash-inputs[b-hhzlguq2rr]{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 900px){
  .joycash-inputs[b-hhzlguq2rr]{ grid-template-columns: 1fr; }
}
.joycash-result[b-hhzlguq2rr]{
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px solid rgba(118,190,197,.22);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}

/* Joycash button */
.button-custom-joycash[b-hhzlguq2rr]{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(118,190,197,.35);
  background: linear-gradient(90deg, rgba(118,190,197,.28), rgba(71,118,230,.22));
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  user-select:none;
}
.button-custom-joycash span[b-hhzlguq2rr]{ font-weight: 1000; }
.button-custom-joycash:hover[b-hhzlguq2rr]{ filter: brightness(1.06); }

/* ---------- Modals ---------- */
.modal-parent[b-hhzlguq2rr]{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7,5,28,.70);
  backdrop-filter: blur(10px);
  z-index: 9999;
}
.modal-parent.active[b-hhzlguq2rr]{ display:flex; }

.modal-content[b-hhzlguq2rr]{
  width: min(920px, 96vw);
  max-height: 86vh;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(120,121,241,.22), transparent 60%),
    rgba(12,10,34,.92);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  padding: 18px;
}
.modal-content.overflow-auto[b-hhzlguq2rr]{ overflow:auto; }

.purple-shadow[b-hhzlguq2rr]{ box-shadow: 0 20px 55px rgba(0,0,0,.45); }

.close-button[b-hhzlguq2rr]{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.75);
  cursor:pointer;
  float:right;
}
.close-button:hover[b-hhzlguq2rr]{ color: rgba(255,255,255,.92); }

.modal-title[b-hhzlguq2rr]{
  font-family: Raleway, Nunito, sans-serif;
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
  margin: 8px 0 10px;
}
.modal-description[b-hhzlguq2rr]{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.modal-description p[b-hhzlguq2rr]{ margin: 0 0 8px; }

.modal-info-purple[b-hhzlguq2rr],
.modal-info-yellow[b-hhzlguq2rr],
.modal-info-pink[b-hhzlguq2rr]{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  margin-top: 12px;
}
.modal-info-purple[b-hhzlguq2rr]{ border-color: rgba(120,121,241,.26); }
.modal-info-yellow[b-hhzlguq2rr]{ border-color: rgba(255,207,38,.26); }
.modal-info-pink[b-hhzlguq2rr]{ border-color: rgba(255,40,127,.22); }

.modal-buttons[b-hhzlguq2rr]{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.special-button-modal[b-hhzlguq2rr]{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.special-button-modal:hover[b-hhzlguq2rr]{ filter: brightness(1.06); }

/* ---------- Fix the "everything looks opacity 0.3" problem ----------
   If you have any parent with opacity set (common: modal or container),
   it dims ALL children. This forces your main UI to stay opaque. */
.MainContainer[b-hhzlguq2rr],
.section-1[b-hhzlguq2rr],.section-2[b-hhzlguq2rr],.section-3[b-hhzlguq2rr],
.section-2-parent[b-hhzlguq2rr],.section-2-1[b-hhzlguq2rr],.section-2-2[b-hhzlguq2rr],.right-inputs[b-hhzlguq2rr],.middle-parent[b-hhzlguq2rr]{
  opacity: 1 !important;
}

/* If you used a global rule like ".MainContainer { opacity:.3 }" or ".section-2 { opacity:.3 }",
   remove it. Opacity on a parent will ALWAYS fade children. */

/* ---------- Small quality touches ---------- */
input[b-hhzlguq2rr], button[b-hhzlguq2rr] { font-family: inherit; }
input[b-hhzlguq2rr]::-webkit-outer-spin-button,
input[b-hhzlguq2rr]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number][b-hhzlguq2rr]{ -moz-appearance: textfield; }

[b-hhzlguq2rr]::selection{ background: rgba(120,121,241,.35); }
/* =========================================================
   WIDTH + SPACING BOOST (append at END of Joymeals.razor.css)
   - Wider containers
   - More padding and breathing room
   - Bigger gaps between blocks
   ========================================================= */

/* Wider page + more outer padding */
.section-1[b-hhzlguq2rr],
.section-2[b-hhzlguq2rr],
.section-3[b-hhzlguq2rr]{
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.section-2-parent[b-hhzlguq2rr],
.middle-content[b-hhzlguq2rr]{
  max-width: 1540px !important; /* was ~1220 */
}

/* Hero spacing */
.section-1[b-hhzlguq2rr]{
  padding-top: 72px !important;
  padding-bottom: 32px !important;
}
.section-1 .description[b-hhzlguq2rr]{
  margin-top: 14px !important;
  max-width: 1050px !important;
}

/* Main grid: more separation */
.section-2-1[b-hhzlguq2rr]{
  gap: 40px !important;
  margin-top: 30px !important;
}

/* Cards: more internal padding */
.right-inputs[b-hhzlguq2rr]{
  padding: 30px !important;
}

.section-2-2[b-hhzlguq2rr]{
  padding: 26px !important;
  gap: 18px !important;
}

/* Inputs vertical rhythm */
.flex-title[b-hhzlguq2rr]{
  margin-top: 18px !important;
  gap: 6px !important;
}
.input-value1[b-hhzlguq2rr],
.input-value2[b-hhzlguq2rr],
.input-value3[b-hhzlguq2rr],
.input-value4[b-hhzlguq2rr],
.input-value5[b-hhzlguq2rr]{
  margin-top: 12px !important;
}

/* Bigger input height + icon area */
.input-custom-parent[b-hhzlguq2rr]{
  border-radius: 18px !important;
}
.custom-input-style[b-hhzlguq2rr]{
  padding: 14px 16px !important;
}
.input-custom-right[b-hhzlguq2rr]{
  width: 64px !important;
}

/* +/- controls more comfy */
.input-plus-minus-parent[b-hhzlguq2rr]{
  grid-template-columns: 52px 1fr 52px !important;
  border-radius: 18px !important;
}
.number-input[b-hhzlguq2rr]{
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

/* Result columns spacing */
.section-2-2-right[b-hhzlguq2rr],
.section-2-2-left[b-hhzlguq2rr]{
  padding: 12px 12px 8px !important;
  gap: 12px !important;
}

/* Result rows: more padding */
.info-value[b-hhzlguq2rr]{
  padding: 12px 14px !important;
  border-radius: 18px !important;
}
.price-info[b-hhzlguq2rr]{
  font-size: 20px !important;
}

/* Section 2-3: more space + stronger presence */
.section-2-3[b-hhzlguq2rr]{
  margin-top: 26px !important;
  gap: 22px !important;
}
.section-2-3-left[b-hhzlguq2rr],
.section-2-3-right[b-hhzlguq2rr]{
  padding: 22px !important;
}

/* Section 2-4 info strip */
.section-2-4[b-hhzlguq2rr]{
  margin-top: 24px !important;
}
.section-2-4 .modal-info-purple[b-hhzlguq2rr]{
  padding: 20px 22px !important;
}

/* Section 3 container bigger + more padding */
.section-3[b-hhzlguq2rr]{
  padding-top: 34px !important;
  padding-bottom: 80px !important;
}
.middle-parent[b-hhzlguq2rr]{
  padding: 26px !important;
}
.middle-down-asterix[b-hhzlguq2rr]{
  padding: 18px !important;
}

/* Joycash spacing */
.section-joycash[b-hhzlguq2rr]{
  padding: 22px !important;
}
.joycash-inputs[b-hhzlguq2rr]{
  gap: 18px !important;
  margin-top: 12px !important;
}
.joycash-result[b-hhzlguq2rr]{
  padding: 14px 16px !important;
}

/* Modal: a bit larger */
.modal-content[b-hhzlguq2rr]{
  width: min(1080px, 96vw) !important;
  padding: 22px !important;
}

/* Responsive: keep good padding on small screens */
@media (max-width: 900px){
  .section-1[b-hhzlguq2rr],
  .section-2[b-hhzlguq2rr],
  .section-3[b-hhzlguq2rr]{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-2-parent[b-hhzlguq2rr],
  .middle-content[b-hhzlguq2rr]{
    max-width: 100% !important;
  }

  .right-inputs[b-hhzlguq2rr],
  .section-2-2[b-hhzlguq2rr],
  .middle-parent[b-hhzlguq2rr]{
    padding: 18px !important;
  }

  .section-2-1[b-hhzlguq2rr]{
    gap: 18px !important;
  }
}


/* =========================================================
   SECTION 3 – CLEANER CARDS + NICE HOVER (append at END)
   - cleaner look (less “bar” feeling)
   - subtle lift + glow hover
   - no CSS variables
   ========================================================= */

/* Make Section 3 container breathe + look premium */
.section-3[b-hhzlguq2rr]{
  padding-top: 44px !important;
}

.middle-parent[b-hhzlguq2rr]{
  border-radius: 28px !important;
  padding: 28px !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
}

/* Top header area: cleaner */
.middle-top[b-hhzlguq2rr]{
  padding: 6px 6px 12px !important;
  gap: 10px !important;
}
.middle-top .title[b-hhzlguq2rr]{
  font-size: 20px !important;
}
.middle-top span[b-hhzlguq2rr]{
  color: rgba(255,255,255,0.68) !important;
}

/* “Montant net à octroyer” strip: neutral + subtle */
.middle-top .middle-custom-info.info-value[b-hhzlguq2rr]{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Layout: give more spacing between the two big cards */
.middle-down-left[b-hhzlguq2rr],
.middle-down-right[b-hhzlguq2rr]{
  margin-top: 18px !important;
}

/* ===============================
   Card base styling (both blocks)
   =============================== */
.middle-down-left .middle-down-block[b-hhzlguq2rr],
.middle-down-right .middle-down-block[b-hhzlguq2rr]{
  border-radius: 26px !important;
  overflow: hidden !important;

  /* Cleaner surface */
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  /* Smooth hover */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease !important;

  box-shadow: 0 18px 48px rgba(0,0,0,0.42) !important;
  position: relative;
}

/* Subtle top sheen */
.middle-down-left .middle-down-block[b-hhzlguq2rr]::before,
.middle-down-right .middle-down-block[b-hhzlguq2rr]::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 240px at 10% 0%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events:none;
}

/* Hover effect (lift + glow) */
.middle-down-left .middle-down-block:hover[b-hhzlguq2rr],
.middle-down-right .middle-down-block:hover[b-hhzlguq2rr]{
  transform: translateY(-6px);
  box-shadow: 0 28px 86px rgba(0,0,0,0.60);
  border-color: rgba(255,255,255,0.18) !important;
}

/* Make the title area more “card-like” */
.middle-down-block-title-content[b-hhzlguq2rr]{
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Align icon + title nicely */
.flex-title-middle img[b-hhzlguq2rr]{
  width: 56px !important;
  height: 56px !important;
  opacity: 0.95;
}

/* ===============================
   Rows: remove “heavy separators”
   =============================== */
.middle-down-block .info-value[b-hhzlguq2rr]{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 18px !important;
}

.middle-down-block .note-result-info[b-hhzlguq2rr]{
  font-size: 12px !important;
  color: rgba(255,255,255,0.68) !important;
}

.middle-down-block .price-info[b-hhzlguq2rr]{
  font-size: 18px !important;
  font-weight: 1000 !important;
}

/* Remove the old “bar” divs */
.middle-down-block .bar[b-hhzlguq2rr]{
  display: none !important;
}

/* ===============================
   Bottom “Coût employeur” rows
   Use your gradients cleanly
   =============================== */

/* JoyMeals bottom row (purple gradient) */
.middle-down-left .middle-custom-info.info-value[b-hhzlguq2rr]{
  margin-top: 6px !important;
  border-radius: 0 0 26px 26px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Salary bottom row (orange gradient) */
.middle-down-right .middle-custom-info.info-value[b-hhzlguq2rr]{
  margin-top: 6px !important;
  border-radius: 0 0 26px 26px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #E87E20 0%, #F4A34E 50%, #E87E20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* On hover: slightly brighter bottom gradient */
.middle-down-left .middle-down-block:hover .middle-custom-info.info-value[b-hhzlguq2rr],
.middle-down-right .middle-down-block:hover .middle-custom-info.info-value[b-hhzlguq2rr]{
  filter: brightness(1.06);
}

/* ===============================
   Optional: make the “Voir le détail”
   look like a clean link-button
   =============================== */
.middle-down span[style*="underline"][b-hhzlguq2rr]{
  display: inline-flex !important;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  text-decoration: none !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.middle-down span[style*="underline"]:hover[b-hhzlguq2rr]{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* Mobile: reduce lift */
@media (max-width: 900px){
  .middle-down-left .middle-down-block:hover[b-hhzlguq2rr],
  .middle-down-right .middle-down-block:hover[b-hhzlguq2rr]{
    transform: translateY(-2px);
  }
}

/* Dropdown container (match new dark/glass cards) */
.dropdown[b-hhzlguq2rr]{
    width: 100%;
    min-height: 44px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(18, 16, 40, .55);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Button */
.dropdown-custom[b-hhzlguq2rr]{
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.dropdown-custom:hover[b-hhzlguq2rr]{
    border-color: rgba(255,255,255,.20);
    background: rgba(255,255,255,.06);
    box-shadow: 0 14px 34px rgba(0,0,0,.36);
    transform: translateY(-1px);
}

.dropdown-custom:focus[b-hhzlguq2rr],
.dropdown-custom:focus-visible[b-hhzlguq2rr]{
    outline: none;
    border-color: rgba(232, 126, 32, .55);
    box-shadow: 0 0 0 3px rgba(232, 126, 32, .20), 0 16px 40px rgba(0,0,0,.38);
}

/* Menu (dark floating panel) */
.dropdown-menu[b-hhzlguq2rr]{
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(12, 10, 28, .92);
    box-shadow: 0 26px 70px rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Items */
.dropdown-item[b-hhzlguq2rr]{
    border-radius: 14px;
    padding: 10px 12px;
    min-height: 42px;
    color: rgba(255,255,255,.92);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.dropdown-item:hover[b-hhzlguq2rr],
.dropdown-item:focus[b-hhzlguq2rr]{
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
}

/* Sector label line-wrapping */
.dropdown-menu .sector-item[b-hhzlguq2rr]{
    white-space: normal;
    align-items: flex-start;
}

/* Checkbox */
.dropdown-menu .sector-item .form-check-input[b-hhzlguq2rr]{
    margin: 0;
    float: none;
    position: static;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    background-color: rgba(255,255,255,.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    flex: 0 0 auto;
    margin-top: 2px;
}

.dropdown-menu .sector-item .form-check-input:checked[b-hhzlguq2rr]{
    border-color: rgba(232, 126, 32, .65);
    background-color: rgba(232, 126, 32, .85);
}

/* Reduce bootstrap's default active color */
.dropdown-item.active[b-hhzlguq2rr],
.dropdown-item:active[b-hhzlguq2rr]{
    color: rgba(255,255,255,.95);
    background: rgba(255,255,255,.08);
}
/* =========================================================
   SELECTED CHIPS – unified dark/glass style
   ========================================================= */

.selected-chips[b-hhzlguq2rr]{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Base chip */
.chip[b-hhzlguq2rr]{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;

    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);

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

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

/* Hover = slight lift */
.chip:hover[b-hhzlguq2rr]{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 26px rgba(0,0,0,.45);
}

/* Remove button */
.chip-x[b-hhzlguq2rr]{
    all: unset;
    cursor: pointer;

    width: 20px;
    height: 20px;
    border-radius: 50%;

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

    font-size: 14px;
    line-height: 1;

    color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.12);

    transition:
        background .14s ease,
        transform .14s ease,
        color .14s ease,
        border-color .14s ease;
}

/* Remove hover */
.chip-x:hover[b-hhzlguq2rr]{
    background: rgba(232,126,32,.90);
    color: #fff;
    border-color: rgba(232,126,32,1);
    transform: scale(1.08);
}

/* Muted chip (no selection) */
.chip-muted[b-hhzlguq2rr]{
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.18);
    color: rgba(255,255,255,.55);
    box-shadow: none;
}

/* Responsive: tighter on mobile */
@media (max-width: 768px){
    .chip[b-hhzlguq2rr]{
        font-size: 12px;
        padding: 7px 12px;
    }
}
/* /Components/Pages/ServicesChooseMain.razor.rz.scp.css */

/*==============================
  FOND GLOBAL & TYPO
==============================*/
:root[b-6fax638jes] {
    /* Teintes principales Ezixio */
    --ezixio-dark:  #141227;  /* noir bleuté profond */
    --ezixio-light: #FBFBF8;  /* blanc cassé */

    /* Couleurs pack */
    --ezixio-blue:    #39519E; /* BLEU EZIXIO */
    --eztax-green:    #78BD76; /* VERT ÉMERAUDE / EZTAX */
    --ezlunch-orange: #E87E20; /* ORANGE MANDARINE */
    --ezgifts-red:    #C03A29; /* ROUGE CARMIN */
    --ezcash-violet:  #7A4091; /* VIOLET AMÉTHYSTE */

    /* Dégradé institutionnel (bleu) */
    --primary-1: var(--ezixio-blue);
    --primary-2: #325BA9; /* bleu ciel Ez Salaries */
    --grad-main: linear-gradient(135deg, var(--primary-1) 0%, var(--primary-2) 100%);
}
html[b-6fax638jes], body[b-6fax638jes] {
    margin: 0;
    padding: 0;
    background-color: var(--ez-bg-dark);
    color: var(--ez-light);
    font-family: "Source Sans Pro", sans-serif;
}

span[b-6fax638jes] {
    color: var(--ez-light);
}
.modal-header[b-6fax638jes] {

    display: flex;
    flex-direction: column;
    border: none;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-family: "Nunito";
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    padding-bottom: 15px;
    gap: 35px;

}

.modal-body[b-6fax638jes] {
    display: flex;
    text-align: center;
    color: #FFF;

    text-align: center;
    font-family: "Raleway";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px
}
.modal-footer[b-6fax638jes] {
    display: flex;
    -ms-flex-wrap: wrap;
    border: none;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    padding: 0;
    justify-content: center;
    padding-top: 35px;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 0px 0px 15px 15px;
}
.modal-body[b-6fax638jes] {
    display: flex;
    color: #FFF;
    text-align: center;
    font-family: "Raleway";
    font-size: 16px;
    font-style: normal;
    align-self: center;
    font-weight: 400;
    line-height: 20px
}

.modal-image[b-6fax638jes] {
    width: 80%;
    height: auto;
    object-fit: cover;
    border-radius: 25px;
}
.special-button-modal[b-6fax638jes] {
    display: grid;
    grid-template-columns: 0.9fr 0.2fr;
    grid-template-rows: 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: white;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 49px;
    outline: none;
    border: none;
    width: fit-content;
    border-radius: 15px;
    box-shadow: 2px 2px 4px 0px #292929;
    background: linear-gradient(90deg, #FF9517 0%, #FFCF26 100%);
    background-color: #ADABC3;
    transition: all 0.3s ease-in-out;
}


.special-button-modal.black[b-6fax638jes]{
    background: linear-gradient(180deg, #07051C 0%, #434C54 100%);
}

.modal-button:hover[b-6fax638jes] {
    background: linear-gradient(90deg, #FF9517 0%, #FFCF26 100%);
    color: white;
    transition: all 0.3s ease-in;
}

.modal-button[b-6fax638jes] {
    margin: 0;
    width: 100%;
    border: none;
    background-color: white;
    color: #07051C;
    text-align: center;
    font-family: "Raleway";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    height: 60px;
}

@media screen and (min-width: 1024px) {
    html[b-6fax638jes] {
        overflow: hidden;
    }
}