@font-face {
    font-family: 'PP Fragment Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/PPFragment-SansRegular.otf') format('opentype');
}
@font-face {
    font-family: 'PP Fragment Sans Light';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/PPFragment-SansLight.otf') format('opentype');
}

@font-face {
    font-family: 'PP Fragment Serif Regular';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/PPFragment-SerifRegular.otf') format('opentype');
}

:root {
    --background--primary: var(--color--grey100);
    --font--normal: "PP Fragment Sans Regular", sans-serif;
    --font--light: "PP Fragment Sans Light", sans-serif;
    --font--label: "PT Serif",serif;
    --text--primary: var(--color--grey900);
    --font--heading: "PP Fragment Serif Regular", sans-serif;
    --radius--main: .25rem;
    --color--grey900: #1e1e1e;
    --color--gold500: #efc27e;
    --border--primary: #1e1e1e26;
    --color--grey800: #2f2e2c;
    --color--grey100: #f8f7f7;
    --color--grey000: white;
    --color--gold200: #f9f3eb;
    --text--secondary: var(--color--grey600);
    --color--grey600: #726f6b;
    --base-color-neutral--black: black;
    --base-color-neutral--white: white;
    --background--white: var(--color--grey000);
    --background--black: var(--color--grey1000);
    --background--secondary: var(--color--grey200);
    --radius--large: .5rem;
    --color--grey400: #bdb9b3;
    --padding-global--desktop: 3rem;
    --padding-global--tablet: 2rem;
    --padding-global--mobile: 1rem;
    --padding-navbar--desktop: 6.5rem;
    --background--alternate-primary: var(--color--grey900);
    --link-color--link-alternate\<deleted\|relume-variable-link-color-3\>: var(--base-color-neutral--white);
    --link-color--link-primary\<deleted\|relume-variable-link-color-1\>: var(--base-color-neutral--black);
    --text--alternate-primary: var(--color--grey000);
    --background--alternate-secondary: var(--color--grey800);
    --text--alternate-secondary: var(--color--grey200);
    --background--alternate-tertiary\<deleted\|relume-variable-background-color-8\>: var(--color--grey700);
    --text--text-error\<deleted\|relume-variable-text-color-5\>: var(--base-color-system--error-red\<deleted\|relume-variable-system-color-5\>);
    --color--gold700: #b4843b;
    --color--gold800: #856432;
    --color--grey1000: #171717;
    --color--grey200: #ecebea;
    --color--grey500: #989591;
    --padding-navbar--tablet: 4.5rem;
    --padding-navbar--mobile: 4.5rem;
    --background--tertiary: var(--color--grey300);
    --color--gold400: #f2d6ac;
    --color--grey300: #d9d6d2;
    --color--gold300: #f5e5ce;
    --color--green600: #879373;
    --color--green200: #e2f0cf;
    --color--green900: #141311;
    --color--grey700: #585450;
    --color--green400: #a0ac8d;
    --border--alternate: var(--text--alternate-primary);
}
*{
    box-sizing: border-box;
}
body{
    font-family: var(--font--normal);
    color: var(--text--primary);
    letter-spacing: .01em;
    text-wrap: pretty;
    font-size: 1rem;
    line-height: 1.6;
}



.simulator-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    width: 100%;
}

#chart-area {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 25vw;
    max-height: 35vh;
    position: relative;
}

.input-part {
    width: 45%;
    padding-right: 20px;
    border-right: 1px solid var(--color--grey200);
    
}
.input-area{
    border-style: none none solid;
    border-width: 1px;
    border-color: var(--color--grey400) var(--color--grey400) var(--color--grey200);
    border-radius: 1px;
    width: 100%;
    display: block;
}
.impact-fields-container{
    color: var(--color--grey500);
    margin-top: 10px;
    font-size: .8rem;
    
}
.chart-part {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}
.data-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.simulator-input-container input {
    font-family: var(--font--normal);
    font-size: 1rem;
    outline: none;
    border: none;
    width: 100%;
 
}

.simulator-input-line {
    display: flex;
    margin-top: 0.25rem;
    border-bottom: solid 1px black;
}

.arrowToggleInterestDetail,
.arrow-toggle-Tax-Application {

    transition: transform 0.5s
}

.simulator-area label {
    color: var(--color--gold700);
}

.point-gold-before::before {
    content: '';
    margin-right: 10px;
    display: inline-block;

    -moz-border-radius: 0.5rem;
    /* -webkit-border-radius: 7.5px; */
    border-radius: 0.5rem;
    /* background-color: #69b6d5; */
    /* border: solid beige 1px; */
    width: 1rem;
    height: 1rem;
    background: var(--color--gold500);
}

.point-grey-before::before {
    content: '';
    margin-right: 10px;
    display: inline-block;

    -moz-border-radius: 0.5rem;
    /* -webkit-border-radius: 7.5px; */
    border-radius: 0.5rem;
    /* background-color: #69b6d5; */
    /* border: solid beige 1px; */
    width: 1rem;
    height: 1rem;
    background: var(--text--secondary);
}

.simulator-input-container {
    margin: 30px 0;
    padding-bottom: 10px;
}

.simulator-input-container input {
    margin: 12px 0;
    outline: none;
    border: none;
    background: none;

}

/* Chrome, Safari, Edge, Opera */
.simulator-input-container input::-webkit-outer-spin-button,
.simulator-input-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.simulator-input-container input[type=number] {
    -moz-appearance: textfield;
}

.simulator-input-container label,
.dropdown-title {
    color: var(--color--gold700);
    text-transform: uppercase;

    font-weight: 300;
    font-family: var(--font--light);
    font-size: 0.8rem;

}

.simulator-input-line {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px var(--color--grey300);
    margin-block-start: 20px;
}
.simulator-input-line.stacked{
    flex-direction: column;
    align-items: flex-start;
}
.simulator-input-line.stacked > div{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.simulator-input-line.stacked {
    margin-bottom: 22px;
}

.simulator-input-line.stacked span {
    margin-bottom: 10px;
    display: block;
}

.dropdown-container {
    margin-top: 1rem;
    height: 4rem;
    width: 100%;
    position: relative;
    z-index: 10;
}

.dropdown-tax-application {
    width: 100%;
    border-radius: 10px;

    position: absolute;
    background: white;
    border: #b4843b solid 1px;
    cursor: pointer;
}

.dropDownSelected {
    background-color: #efc27e4d;
}

.dropdown-title {
    color: #b4843b;
    padding: 0.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

}

.dropdown-selector-container {
    border-top: none;
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.5s;
}

.dropdown-shown {

    max-height: 125px;
}

.dropdown-hidden {
    border-top: none;
    max-height: 0px;
}

.dropdown-selector-container * {
    font-family: var(--font--label);

    padding: 0.8rem;
    margin: 5px 0;
}

.dropdown-selector-container *:hover {
    background-color: var(--color--grey100);
}

.dropDownSelected:hover {
    background-color: #efc27e4d;
}

.dropdown-selector-container:first-child {
    border-top: var(--color--grey300) 1px solid;
}

.result-details-container {
    width: 100%;
    margin-top: var(--padding-global--desktop);
    margin-bottom: var(--padding-global--tablet);
}

.title-result {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.final-caps-container{
    width: 100%;
    display: flex;
    gap: 1rem;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
    margin-top: -0.5rem;
    margin-bottom: 2rem;
}
.result-intro{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -1rem;
}
.final-cap{
    flex: 1 1 0;
    font-family: var(--font--normal);
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.final-cap .result-text{
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    font-family: var(--font--light);
    color: var(--color--gold700);
    text-transform: uppercase;
    font-weight: 300;
}
.final-cap .result-data{
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font--normal);
}

.pea-warning-banner {
    background-color: #b42318;
    color: white;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
}

.email-input-container {
    margin: 1rem 0;
    width: 100%;
}

.email-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color--grey300);
    border-radius: 0.25rem;
    font-family: var(--font--normal);
    font-size: 1rem;
    outline: none;
}

.email-input:focus {
    border-color: var(--color--gold700);
}

.result-detail {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-transform: uppercase;
    align-items: center;
    font-size: 1rem;

}

.point-grey-before::before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    -moz-border-radius: 0.5rem;
    /* -webkit-border-radius: 7.5px; */
    border-radius: 0.5rem;
    /* background-color: #69b6d5; */
    /* border: solid beige 1px; */
    width: 1rem;
    height: 1rem;
    background: var(--text--secondary);
}


.point-gold-before::before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    -moz-border-radius: 0.5rem;
    /* -webkit-border-radius: 7.5px; */
    border-radius: 0.5rem;
    /* background-color: #69b6d5; */
    /* border: solid beige 1px; */
    width: 1rem;
    height: 1rem;
    background: var(--color--gold500);
}

.detail-title {
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.detail-title {

    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.impact-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.explain {
    text-align: center;
}

.title-result h5 {

    font-family: var(--font--heading);
    letter-spacing: -.02em;
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;

}

.explaination h6 {
    font-family: var(--font--heading);
    letter-spacing: -.02em;
    text-wrap: balance;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color--gold700);
    margin-top: 1rem;
    margin-bottom: 1rem;
}



.detail-data {
    display: flex;
    align-items: center;
}

.arrow-toggle-interest-detail {
    margin-left: 0.5rem;
    transition: transform 0.5s;
}

.explaination {
    text-align: center;
    align-items: center;
}

.cta-row{
    display: flex;
    gap: 1rem;
    width: 80%;
    max-width: 720px;
    margin: 1rem auto 0 auto;
}
.cta-row .button{
    flex: 1 1 0;
}
.button.button-secondary{
    background-image: none;
    background-color: var(--color--grey000);
    color: var(--color--grey900);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Lighter golden halo for the white secondary button */
.button.button-secondary .button-gradient{
    background-image: linear-gradient(90deg, var(--color--gold200), var(--color--gold300));
}

h6{
    font-family: var(--font--heading);
    letter-spacing: -.02em;
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
}
.comment{
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.bottom-part{
    display: flex;
    width: 100%;
    flex-direction:column ;
    justify-content: center;
    align-items: center;
    
}
.disclaimer-container{
    width: 100%;
}
.disclaimer{
    font-family: var(--font--normal);
    color: var(--color--grey500);
    font-size: .8rem;
}


.button{
-webkit-text-size-adjust: 100%;
--background--primary: var(--color--grey100);
--font--normal: "PP Fragment Sans",sans-serif;
--text--primary: var(--color--grey900);
--font--heading: "PP Fragment Serif",sans-serif;
--radius--main: .25rem;
--color--grey900: #1e1e1e;
--color--gold500: #efc27e;
--border--primary: #1e1e1e26;
--color--grey800: #2f2e2c;
--color--grey100: #f8f7f7;
--color--grey000: white;
--color--gold200: #f9f3eb;
--text--secondary: var(--color--grey600);
--color--grey600: #726f6b;
--base-color-neutral--black: black;
--base-color-neutral--white: white;
--background--white: var(--color--grey000);
--background--black: var(--color--grey1000);
--background--secondary: var(--color--grey200);
--radius--large: .5rem;
--color--grey400: #bdb9b3;
--padding-global--desktop: 3rem;
--padding-global--tablet: 2rem;
--padding-global--mobile: 1rem;
--padding-navbar--desktop: 6.5rem;
--background--alternate-primary: var(--color--grey900);
--link-color--link-alternate\<deleted\|relume-variable-link-color-3\>: var(--base-color-neutral--white);
--link-color--link-primary\<deleted\|relume-variable-link-color-1\>: var(--base-color-neutral--black);
--text--alternate-primary: var(--color--grey000);
--background--alternate-secondary: var(--color--grey800);
--text--alternate-secondary: var(--color--grey200);
--background--alternate-tertiary\<deleted\|relume-variable-background-color-8\>: var(--color--grey700);
--text--text-error\<deleted\|relume-variable-text-color-5\>: var(--base-color-system--error-red\<deleted\|relume-variable-system-color-5\>);
--color--gold700: #b4843b;
--color--gold800: #856432;
--color--grey1000: #171717;
--color--grey200: #ecebea;
--color--grey500: #989591;
--padding-navbar--tablet: 4.5rem;
--padding-navbar--mobile: 4.5rem;
--background--tertiary: var(--color--grey300);
--color--gold400: #f2d6ac;
--color--grey300: #d9d6d2;
--color--gold300: #f5e5ce;
--color--green600: #879373;
--color--green200: #e2f0cf;
--color--green900: #141311;
--color--grey700: #585450;
--color--green400: #a0ac8d;
--border--alternate: var(--text--alternate-primary);
--padding-navbar--desktop-small: 5.5rem;
--padding-navbar--tablet-small: 4rem;
--padding-navbar--mobile-small: 4rem;
--shadow--light-soft: 0px;
--shadow--light-strong: 0px;
--shadow--dark-soft: 0px;
--shadow--dark-strong: 0px;
--base-color-system--error-red\<deleted\|relume-variable-system-color-5\>: #b42318;
font-family: var(--font--normal);
text-wrap: pretty;
font-size: 1rem;
box-sizing: border-box;
max-width: 100%;
display: inline-block;
border-top-left-radius: var(--radius--main);
border-top-right-radius: var(--radius--main);
border-bottom-left-radius: var(--radius--main);
border-bottom-right-radius: var(--radius--main);
background-color: var(--color--grey900);
background-image: linear-gradient(90deg,var(--color--grey900),var(--color--grey800));
color: var(--color--grey100);
text-align: center;
letter-spacing: 0;
box-shadow: var(--shadow--light-soft);
padding: 1rem 2rem;
line-height: 1;
transition-property: background-color;
transition-duration: .3s;
transition-timing-function: ease;
position: relative;
overflow: hidden;
text-decoration: none!important;
width: 100%;
display: inline-block;
}
.button:hover .button-gradient {
    top: 100%;
    right: 90%;
}
.button-text {
    z-index: 2;
    position: relative;
}
/*general*/
.button-gradient {
    background-color: var(--color--gold700);
    filter: blur(20px);
    border-radius: 999px;
    width: 5rem;
    height: 5rem;
    transition: top 2.5s, right 2.5s;
    position: absolute;
    inset: 0% 0% auto auto;
    transform: translate(50%, -50%);
}
.pointer:hover {
    cursor: pointer;
}

.text-secondary {
    color: var(--text--secondary);
    
}

.gold-700 {
    color: var(--color--gold700);
}

.grey-600 {
    color: var(--color--grey600);
}

.grey-500 {
    color: var(--color--grey500);
}

/* Au niveau le plus haut du code */
@media only screen and (max-width: 800px) {
    .simulator-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        
    }
    .input-part, .chart-part {
       padding: 0;
       border: none;
        width: 100%;
    }
    .input-part{
        margin-bottom:40px;
    }
    .input-area,.simulator-input-container input , .result-detail, .explaination {
        font-size: 0.8rem;
    }
    .explaination h6{
        font-size: 1rem;
    }
    .explaination .perform{
        font-size: .7rem;
    }
    #chart-area {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 40vw;
        max-height: 40vh;
        position: relative;
        margin-bottom: 40px;
    }

}
@media only screen and (max-width: 367px) {
    .simulator-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .input-part, .chart-part {
       
        width: 100%;
    }
    .input-part{
        margin-bottom:40px;
    }
    .simulator-container h5{
        font-size: 1.25rem;
    }
    #chart-area{
        height: 50vw;
        margin-bottom: 40px;
    }
    .comment{
        font-size: 1rem
    }
    .input-area,.simulator-input-container input {
        font-size: 0.7rem;
    }
     .result-detail, .explaination, .disclaimer {
        font-size: 0.6rem;
    }
    .explaination h6{
        font-size: 1rem;
    }
    .explaination .perform{
        font-size: .7rem;
    }
    .point-gold-before::before {
        content: '';
        margin-right: 10px;
        display: inline-block;
        -moz-border-radius: 0.5rem;
        /* -webkit-border-radius: 7.5px; */
        border-radius: 0.5rem;
        /* background-color: #69b6d5; */
        /* border: solid beige 1px; */
        width: 0.5rem;
        height: 0.5rem;
        background: var(--color--gold500);
    }
    .point-grey-before::before {
        content: '';
        margin-right: 10px;
        display: inline-block;
        -moz-border-radius: 0.5rem;
        /* -webkit-border-radius: 7.5px; */
        border-radius: 0.5rem;
        /* background-color: #69b6d5; */
        /* border: solid beige 1px; */
        width: 0.5rem;
        height: 0.5rem;
        background: var(--text--secondary);
    }
    

}