@font-face {
    font-family: Manosque;
    src: url("../font/Manosque-Regular.otf") format("opentype");
}

@font-face {
    font-family: Lato;
    src: url("../font/Lato-Regular.ttf") format("opentype");
}

/* Color */
body {
    /* Base */
    --base-black: #000814;
    --base-white: #FCFCFC;
    --base-pur-white: #FFFFFF;

    color: var(--primary-900);
    background-color: white !important;

    position: relative;

}

p.black,
a.black {
    color: var(--primary-900) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {

    font-style: normal;
    line-height: 120%;
    margin-bottom: 0px;
    font-family: Manosque;
}

p {
    font-family: Lato;
}

a {
    font-family: 'Lato';
    color: var(--primary-800);
    font-weight: 600;
}

.required {
    font-family: 'Lato';
    font-size: 14px;
    color: var(--error);
}

h1.heading-1 {
    font-size: 86px;
    font-weight: 700;
    color: var(--primary-800);
}

h2.heading-2 {
    font-size: 40px;
    font-weight: 400;
    color: var(--primary-900);
}

h3.heading-3 {
    font-size: 28px;
    font-weight: 400;
    color: var(--primary-800);
    line-height: 95%;
}

h4.heading-4 {
    font-size: 23px;
    font-weight: 400;
    color: var(--primary-900);
}

@media (max-width: 576px) {
    h1.heading-1 {
        font-size: 55px;
    }
}

p.lg {
    font-size: 23px;
}

p.base {
    font-size: 16px;
}

.bold {
    font-weight: 700;
}

.bold-900 {
    font-weight: 900;
}

.desc-light {
    color: var(--base-grey);
    font-size: 14px;
}

.info-link {
    color: var(--primary-900);
    font-size: 14px;
    text-decoration-line: underline !important;
}

.info-link:hover {
    color: var(--primary-900);
}

/* Layout */
.page-content {
    background-color: var(--base-pur-white);
}

.container {
    width: 1136px;
    padding: 0;
}

/* Design */
.small-circle {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

.row {
    margin: 0;
}

/* Spacing */
.pl-7,
.px-7,
.p-7 {
    padding-left: 64px;
}

.pr-7,
.px-7,
.p-7 {
    padding-right: 64px;
}

.pb-7,
.py-7,
.p-7 {
    padding-bottom: 64px;
}

.pt-7,
.py-7,
.p-7 {
    padding-top: 64px;
}

.pt-96,
.py-96 {
    padding-top: 96px;
}

.pb-96,
.py-96 {
    padding-bottom: 96px;
}

.pt-128,
.py-128,
.p-128 {
    padding-top: 128px;
}

.pb-128,
.py-128,
.p-128 {
    padding-bottom: 128px;
}

.pl-128,
.px-128,
.p-128 {
    padding-left: 128px;
}

.pr-128,
.px-128,
.p-128 {
    padding-right: 128px;
}


.mb-64 {
    margin-bottom: 64px !important;
}

.mt-64 {
    margin-top: 64px;
}

.mt-72 {
    margin-top: 72px;
}

.mt-128 {
    margin-top: 128px !important;
}

.gap-8 {
    gap: 8px;
}

.mt-neg-6,
.my-neg-6,
.m-neg-6 {
    margin-top: -64px;
}

.radius-8 {
    border-radius: 8px;
}

.radius-16 {
    border-radius: 16px;
}

.radius-24 {
    border-radius: 24px;
}

.user-icon-nav {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    object-fit: cover;
}

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

    .px-27 {
        padding-left: 27px;
        padding-right: 27px;
    }

}

@media screen and (min-width: 768px) {

    .pl-md-7,
    .px-md-7,
    .p-md-7 {
        padding-left: 64px !important;
    }

    .pr-md-7,
    .px-md-7,
    .p-md-7 {
        padding-right: 64px !important;
    }

    .pb-md-7,
    .py-md-7,
    .p-md-7 {
        padding-bottom: 64px !important;
    }

    .pt-md-7,
    .py-md-7,
    .p-md-7 {
        padding-top: 64px !important;
    }

    .gap-md-0,
    .gapx-md-0 {
        row-gap: 0 !important;
    }

    .gap-md-0,
    .gapy-md-0 {
        column-gap: 0 !important;
    }

    .gap-md-3,
    .gapx-md-3 {
        row-gap: 1rem !important;
    }

    .gap-md-3,
    .gapy-md-3 {
        column-gap: 1rem !important;
    }

    .gap-md-5,
    .gapx-md-5 {
        row-gap: 2rem !important;
    }

    .gap-md-5,
    .gapy-md-5 {
        column-gap: 2rem !important;
    }

    .gap-md-6,
    .gapx-md-6 {
        row-gap: 4rem !important;
    }

    .gap-md-6,
    .gapy-md-6 {
        column-gap: 4rem !important;
    }

    .gap-md-112,
    .gapx-md-112 {
        row-gap: 112px;
    }

    .gap-md-112,
    .gapy-md-112 {
        column-gap: 112px;
    }

}

@media screen and (min-width: 992px) {

    .gap-lg-0,
    .gapx-lg-0 {
        row-gap: 0 !important;
    }

    .gap-lg-0,
    .gapy-lg-0 {
        column-gap: 0 !important;
    }

    .gap-lg-3,
    .gapx-lg-3 {
        row-gap: 1rem !important;
    }

    .gap-lg-3,
    .gapy-lg-3 {
        column-gap: 1rem !important;
    }

    .gap-lg-5,
    .gapx-lg-5 {
        row-gap: 2rem !important;
    }

    .gap-lg-5,
    .gapy-lg-5 {
        column-gap: 2rem !important;
    }

    .gap-lg-6,
    .gapx-lg-6 {
        row-gap: 4rem !important;
    }

    .gap-lg-6,
    .gapy-lg-6 {
        column-gap: 4rem !important;
    }

    .gap-lg-128,
    .gapx-lg-128 {
        row-gap: 128px;
    }

    .gap-lg-128,
    .gapy-lg-128 {
        column-gap: 128px;
    }

    .pl-lg-7,
    .px-lg-7,
    .p-lg-7 {
        padding-left: 64px !important;
    }

    .pr-lg-7,
    .px-lg-7,
    .p-lg-7 {
        padding-right: 64px !important;
    }

    .pb-lg-7,
    .py-lg-7,
    .p-lg-7 {
        padding-bottom: 64px !important;
    }

    .pt-lg-7,
    .py-lg-7,
    .p-lg-7 {
        padding-top: 64px !important;
    }

    .pt-lg-128,
    .py-lg-128 {
        padding-top: 128px !important;
    }

    .pb-lg-128,
    .py-lg-128 {
        padding-bottom: 128px !important;
    }

}

/* Conteneur de la barre de progression */
.progress-bar {
    width: 100%;
    background-color: var(--primary-100);
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Barre de progression intérieure */
.progress {
    height: 100%;
    background-color: var(--primary-600);
    border-radius: 10px 0 0 10px;
    transition: width 0.3s ease;
}

.flex-100 {
    flex: 1 0 0;
}

.images-in-modal {
    width: 100%;
    border-radius: 16px;
}