@import url('/mon-compte/assets/fonts/nunito/font.css');

:root {
    --basicColor1: #1280A4;
    --basicColor2: #56C2DE;
    --basicColor3: #919191;
    --basicColor4: #2D2F2D;
    --basicColor5: #EEB323;
    --basicWhite: #ffff;
    --basicBlack: #000000;
    --basicColorLight: #cccccc;
    --smallRadius: 10px;
    --mediumRadius: 20px;
    --basicRadius: 30px;
    --defaultSpacing: 2rem;
    font-size: 20px;
}

body *, body {
    font-family: "Nunito Sans", sans-serif;
    margin: 0;
    box-sizing: border-box;
    font-weight: 300;
    line-height: 1;
}

body {
    max-width: 1920px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 0px 42px 44px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 0px 42px 44px rgba(0, 0, 0, 0.09);
}

a {
    text-decoration: none;
    font-size: 1em;
}
p{
    line-height: 1.2;
}


i {
    color: var(--basicColor1);
}

.bigSpacing {
    padding: calc(var(--defaultSpacing) * 2)
}

.bigSpacingSide {
    padding: 0 calc(var(--defaultSpacing) * 2)
}

.bigSpacingTopBottom {
    padding: calc(var(--defaultSpacing) * 2) 0
}

.mediumSpacing {
    padding: calc(var(--defaultSpacing)) calc(var(--defaultSpacing) * 2)
}


.smallUniformSpacing {
    max-width: 1200px;
    margin: 0 auto;
}

.uniformSpacing {
    max-width: 1540px;
    margin: 0 auto;
    width: 100%;
}

.bigUniformSpacing {
    max-width: 1920px;
    margin: 0 auto;
}

.widthText600 {
    max-width: 600px !important;
    width: 100% !important;
}

.widthText750 {
    max-width: 750px !important;
    width: 100% !important;
}

.widthText800{
    max-width: 800px !important;
    width: 100% !important;
}

.widthText1000{
    max-width: 1000px !important;
    width: 100% !important;
}

.widthText1200 {
    max-width: 1200px !important;
    width: 100% !important;
}

.widthText1400 {
    max-width: 1400px !important;
    width: 100% !important;
}

.widthText1500 {
    max-width: 1500px !important;
    width: 100% !important;
}

.marginCenter {
    margin: 0 auto;
}

/*
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}
*/

.black, .black * {
    font-weight: 900 !important;
}

.bold, .bold * {
    font-weight: 700 !important;
}

.semiBold, .semiBold * {
    font-weight: 600 !important;
}

.regular, .regular * {
    font-weight: 400 !important;
}

.medium, .medium * {
    font-weight: 500 !important;
}

.light, .light * {
    font-weight: 200 !important;
}

.extraLight, .extraLight * {
    font-weight: 200 !important;
}

.size120 {
    font-size: 6em;
}

.size90 {
    font-size: 4.5em;
}

.size75 {
    font-size: 3.75em;
}

.size60 {
    font-size: 3em;
}

.size50 {
    font-size: 2.5em;
}

.size45 {
    font-size: 2.25em;
}


.size40 {
    font-size: 2em;
}

.size35 {
    font-size: 1.75em;
}

.size30 {
    font-size: 1.5em;
}

.size25 {
    font-size: 1.25em;
}

.size20 {
    font-size: 1em;
}

.size15 {
    font-size: .75em;
}

.upper {
    text-transform: uppercase;
}

.taj {
    text-align: justify;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

.relative {
    position: relative
}

.bgImg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.afterFilter, .afterFilter * {
    position: relative;
    z-index: 50 !important;
}

.afterFilter:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%);
    opacity: .4;
}

.radius {
    border-radius: var(--basicRadius) !important;
}

.mediumRadius {
    border-radius: var(--mediumRadius) !important;
}

.smallRadius {
    border-radius: var(--smallRadius) !important;
}

.contain{
    object-fit: contain !important;
}

.cover{
    object-fit: cover !important;
}

.activeLink {
    border-bottom: 2px solid var(--basicColor3) ;
}

.colorBlack, .colorBlack * {
    color: var(--basicBlack);
}

.bgBlack {
    background-color: var(--basicBlack);
}

.colorWhite, .colorWhite * {
    color: var(--basicWhite);
}

.bgWhite {
    background-color: var(--basicWhite);
}

.fillWhite * {
    fill: var(--basicWhite);
}

.bgBlue {
    background-color: var(--basicColor1);
}

.colorBlue, .colorBlue * {
    color: var(--basicColor1);
}

.fillBlue * {
    fill: var(--basicColor1) !important;
}

.bgLightBlue {
    background-color: var(--basicColor2);
}

.colorLightBlue, .colorLightBlue * {
    color: var(--basicColor2);
}

.fillLightBlue * {
    fill: var(--basicColor2) !important;
}

.light b, b {
    font-weight: 400 !important;
}

.introText {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
}

.w100 {
    width: 100% !important;
}

.mainLink.center{
    justify-content: center;
}

.mainLink a{
    display: flex;
    border-radius: var(--basicRadius);
    width: fit-content;
    align-items: center;
    padding: .5em 1.5em !important;
    border: 1px solid var(--basicColor1);
    transition: ease all .3s;
}

.mainLink a:hover {
    border: 1px solid var(--basicColor1);
    background-color: var(--basicWhite);
    color: var(--basicColor1);

}

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

.pointer {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* START SLIDER */
.slider {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.sliderWrapper {
    width: 100%;
    display: flex;
    transition: transform 1s ease-in-out;
    gap: 2em;
}

.sliderWrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.sliderSlide {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.horizontalScroll {
    overflow: hidden;
}

/* END SLIDER */

section:has(.goutte),
div:has(.goutte),
section:has(.picto),
div:has(.picto){
    overflow: hidden;
}
section:has(.goutte) .uniformSpacing ,
div:has(.goutte) .uniformSpacing ,
section:has(.picto) .uniformSpacing,
div:has(.picto) .uniformSpacing {
    position: relative;
    z-index: 2;
}

.goutte{
    position: absolute !important;
    width: calc(var(--defaultSpacing) * 2);
    z-index: 1 !important;
}

.goutte.center{
    top: 50%;
    transform: translateY(-50%);
}

.goutte.top{
    top: 0;
}
.goutte.bottom{
    bottom: 0;
}
.goutte.left{
    left: 0;
}
.goutte.right{
    right: 0;
}
.goutte svg {
    width: 100%;
    height: auto;
}

.picto{
    position: absolute !important;
    width: 40%;
    opacity: .03;
    z-index: 1 !important;
}

.picto.top{
    top: 0;
}
.picto.bottom{
    bottom: 0;
}
.picto.left{
    left: 0;
}
.picto.right{
    right: 0;
}
.picto svg {
    width: 100%;
    height: auto;
}


@media screen and (max-width: 1500px) {
    .goutte {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--defaultSpacing) * 2 - 1em);
    }
}
@media screen and (max-width: 1200px) {
    :root {
        font-size: 18px;
    }

    .size120 {
        font-size: 5em;
    }

    .size90 {
        font-size: 4em;
    }

    .size75 {
        font-size: 3em;
    }

    .size60 {
        font-size: 2.5em;
    }

    .size50 {
        font-size: 2em;
    }

    .size45 {
        font-size: 1.74em;
    }

    .size40 {
        font-size: 1.5em;
    }

    .size38 {
        font-size: 1.4em;
    }

    .size35 {
        font-size: 1.75em;
    }

    .size30 {
        font-size: 1.2em;
    }

    .smallWidthText {
        width: 100% !important
    }

    .mediumWidthText {
        width: 100% !important
    }

    .afterFilter:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 30;
        background-color: rgba(0, 0, 0, 0.75);
        opacity: .4;
    }

}


@media screen and (max-width: 800px) {
    :root {
        font-size: 18px;
    }

    .bigSpacing {
        padding: calc(var(--defaultSpacing) * 1.5)
    }

    .bigSpacingSide {
        padding: 0 calc(var(--defaultSpacing) * 1.5)
    }

    .bigSpacingTopBottom {
        padding: calc(var(--defaultSpacing) * 1.5) 0
    }

    .size120 {
        font-size: 4em;
    }

    .size90 {
        font-size: 3em;
    }

    .size75 {
        font-size: 2.75em;
    }

    .size60 {
        font-size: 2.5em;
    }

    .size50 {
        font-size: 1.5em;
    }

    .size45 {
        font-size: 1.3em;
    }

    .size40 {
        font-size: 1.25em;
    }

    .size38 {
        font-size: 1.20em;
    }

    .size35 {
        font-size: 1.15em;
    }

    .size30 {
        font-size: 1.1em;
    }

}

@media screen and (max-width: 700px) {
    .modal-content {
        height: 60vh;
        padding: 1em;
        width: 90%;
    }

    :root {
        font-size: 16px;
    }

    .size120 {
        font-size: 2.5em;
    }

    .size90 {
        font-size: 2.5em;
    }

    .size75 {
        font-size: 2em;
    }

    .size60 {
        font-size: 1.6em;
    }

    .bigSpacing {
        padding: var(--defaultSpacing)
    }

    .bigSpacingSide {
        padding: 0 var(--defaultSpacing)
    }

    .bigSpacingTopBottom {
        padding: var(--defaultSpacing) 0;
    }
}