/* Échec de l'agrandissement. Renvoi du contenu non agrandi.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,17): run-time error CSS1039: Token not allowed after unary operator: '-black'
(43,24): run-time error CSS1046: Expect comma, found '17'
(43,30): run-time error CSS1046: Expect comma, found '/'
(43,57): run-time error CSS1046: Expect comma, found '17'
(43,63): run-time error CSS1046: Expect comma, found '/'
(61,17): run-time error CSS1039: Token not allowed after unary operator: '-grey'
(66,17): run-time error CSS1039: Token not allowed after unary operator: '-black'
(72,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(77,32): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(82,36): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(83,32): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(89,25): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(91,32): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(111,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(116,28): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(117,41): run-time error CSS1046: Expect comma, found '159'
(117,49): run-time error CSS1046: Expect comma, found '/'
(129,28): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(137,17): run-time error CSS1039: Token not allowed after unary operator: '-grey'
(150,28): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(161,21): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(173,21): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(186,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(250,17): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(254,28): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(258,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(438,36): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(483,44): run-time error CSS1039: Token not allowed after unary operator: '-black'
(562,33): run-time error CSS1039: Token not allowed after unary operator: '-radius'
 */
:root {
    --primary: #17A0C1;
    --grey: #707070;
    --black: #333333;
    --danger: #f14668;
    --radius: 20px;
}

html {
    position: relative;
    min-height: 100vh;
    overflow-y: auto;
}

body {
    height: 100%;
    min-height: 100vh;
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: 'Poppins', sans-serif;
    color: var(--black);
    background-color: #f5f5f5;
}

button, input, section, textarea, select {
    font-family: 'Poppins', sans-serif;
}

small {
    line-height: 1rem;
}

.section {
    padding: 0;
}

.text-white {
    color: #FFF;
}

/* NAVBAR */
.navbar {
    box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;
    height: 68px;
}

    .navbar > .container, .navbar-brand, .navbar-tabs {
        height: 100%;
    }

        .navbar-brand a.navbar-item {
            display: block;
            max-width: 210px;
        }

        .navbar-brand .navbar-item img {
            max-height: 100%;
        }

.navbar-item {
    color: var(--grey);
}

.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover,
a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
    color: var(--black);
    background-color: transparent;
}

/* BUTTONS */
button, .button {
    border-radius: var(--radius);
    transition: background-color 0.3s;
}

    .button.is-primary {
        background-color: var(--primary);
    }

        .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:hover,
        .button.is-primary.is-outlined:active, .button.is-primary.is-outlined:focus {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .button.is-primary.is-hovered, .button.is-primary:hover,
        .button.is-primary.is-active, .button.is-primary:active,
        .button.is-primary.is-outlined {
            color: var(--primary);
            background-color: #FFF;
            border-color: var(--primary);
        }

            .button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active),
            .button.is-primary.is-outlined.is-focused:not(:active), .button.is-primary.is-outlined:focus:not(:active) {
                box-shadow: 0 0 0 0.2rem rgba(23, 159, 192, 0.5);
            }

    .button.is-text {
        text-decoration: none;
    }

        .button.is-text.is-focused, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text:hover,
        .button.is-text.is-active, .button.is-text:active {
            background-color: transparent;
            box-shadow: none;
        }

/* FORM */
.input, .select select, .textarea {
    border-radius: var(--radius);
}

    .input:active, .input:focus, .is-active.input, .is-active.textarea, .is-focused.input, .is-focused.textarea,
    .select select.is-active, .select select.is-focused, .select select:active, .select select:focus, .textarea:active, .textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 0.2rem rgb(23 159 192 / 25%);
    }

    .input[readonly] {
        background-color: lightgrey;
    }

.select:not(.is-multiple), .select:not(.is-multiple) select {
    width: 100%;
}

    .select:not(.is-multiple):not(.is-loading)::after {
        border-color: var(--primary);
    }

form .columns {
    margin-bottom: 0 !important;
}

form label, form .label {
    color: var(--grey);
    font-weight: 400;
    margin-bottom: 0.25rem;
    display: inline-block;
}

form .control {
    position: relative;
}

    form .control.invalid input,
    form .control.invalid textarea,
    form .control.invalid select {
        border-color: var(--danger);
    }

    form .control span.error-message,
    form .checkbox span.error-message,
    form .radio span.error-message {
        display: none;
    }

    form .control.invalid span.error-message {
        display: block;
        color: var(--danger);
        position: absolute;
        right: 1rem;
        top: 100%;
        margin-top: -0.75rem;
        font-size: 0.75rem;
        background-color: #FFF;
        padding: 0 0.25rem;
    }

    form .control.invalid span.error-message {
        display: block;
        color: var(--danger);
        position: absolute;
        right: 1rem;
        top: 100%;
        margin-top: -0.75rem;
        font-size: 0.75rem;
        background-color: #FFF;
        padding: 0 0.25rem;
    }

form.card {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem 2rem;
    border-radius: var(--radius);
    width: 100%;
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
    border-color: transparent;
}

    form.card button {
        width: fit-content;
    }

.validation-summary-errors {
    font-size: 0.9rem;
}

/* COMMON */
main.container {
    max-width: 90%;
    padding-top: 90px;
}

.title {
    text-transform: uppercase;
    font-weight: 600;
}

    .title.gradient {
        background: linear-gradient(90deg, rgba(44, 186, 208, 1) 0%, rgba(0, 137, 175, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.linethrough {
    overflow: hidden;
    text-align: center;
    display: inherit;
    margin-bottom: 1rem;
}

    .linethrough::before, .linethrough::after {
        background-color: #000;
        content: '';
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 50%;
    }

    .linethrough.text-white::before, .linethrough.text-white::after {
        background-color: #fff;
    }

    .linethrough::before {
        right: 0.5em;
        margin-left: -50%;
    }

    .linethrough::after {
        left: 0.5em;
        margin-right: -50%;
    }

.has-text-primary,
a.has-text-primary:focus, a.has-text-primary:hover {
    color: var(--primary) !important;
}

.notification.is-primary {
    background-color: var(--primary);
}

.card {
    border-radius: var(--radius);
}

    .card.has-hover-effect:hover {
        transition: box-shadow 0.3s;
        box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.2), 0 0 0 1px rgba(10, 10, 10, 0.05);
    }

.help {
    margin-top: 0.35rem;
}

/* BACKGROUNDED PAGES */
.backgrounded {
    background: url('background.png') center 65% no-repeat;
    background-size: cover;
    height: 100%;
}

    .backgrounded .navbar {
        background: transparent;
    }

    .backgrounded main.container {
        max-width: 90% !important;
    }

.blurred::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.backgrounded .navbar {
    box-shadow: none;
}

.backgrounded.login .navbar {
    background-color: transparent !important;
}

.backgrounded h1.title {
    font-weight: 700;
    letter-spacing: -0.1rem;
    font-size: 2rem;
}

.backgrounded form span.error-message {
    top: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    margin-left: 1rem;
    background-color: transparent !important;
    font-weight: 500;
}

.backgrounded:not(.login) form {
    margin-top: 2rem;
}

/* LOGIN PAGE */
.login main.container {
    padding-top: 50px;
}

    .login main.container .form-container {
        width: 90%;
        margin: 0 auto 0 2%;
    }

.login main.container {
    max-width: 100% !important;
}

.login nav .container {
    max-width: 90% !important;
}

.login .tagline {
    font-size: 5rem;
    font-weight: 700;
    word-spacing: 9999px;
    text-transform: uppercase;
    color: #fff;
    padding: 0 0 5rem 4rem;
}

.login .blurred-background {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 33.333333%;
    height: 100%;
    background: rgba(255,255,255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 0;
}

.login .form-container {
    min-height: calc(100vh - 68px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

    .login .form-container form {
        height: fit-content;
        min-width: 300px;
        margin-left: 15px;
    }

        .login .form-container form label,
        .login .form-container form a,
        .login .form-container p {
            color: #FFF;
        }

            .login .form-container form a:not(.button):hover {
                text-decoration: underline;
            }

.login .tagline-xs {
    display: none;
}

/* STEPS */
.steps-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.8rem;
}

    .steps-wrapper + p {
        margin-top: -1.5rem;
    }

    .steps-wrapper > div:not(.step) {
        margin-top: -1rem;
    }

.step {
    background: linear-gradient(360deg, rgba(44, 186, 208, 1) 0%, rgba(0, 137, 175, 1) 100%);
    width: 2rem;
    height: 2rem;
    color: #FFF;
    text-align: center;
    border-radius: 50%;
    padding-top: 0.25rem;
    display: inline-block;
    margin-right: 1rem;
}

    .step + h2 {
        display: inline-block;
    }

.steps {
    display: flex;
    align-items: center;
}

    .steps > div {
        height: 4px;
        width: 60px;
        background-color: #d2d2d2;
        margin-right: 5px;
    }

        .steps > div.active {
            background-color: var(--primary);
        }

/* MENU BURGER */
@media (max-width: 1023px) {
    .navbar .burger {
        position: relative;
        display: inline-block;
        cursor: pointer;
        background-color: transparent;
        border: none;
        height: 100%;
    }

        .navbar .burger:focus {
            outline: none !important;
        }

        .navbar .burger .burger-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
        }

            .navbar .burger .burger-box .burger-inner {
                width: 100%;
                height: 100%;
            }

                .navbar .burger .burger-box .burger-inner .top-bun,
                .navbar .burger .burger-box .burger-inner .bottom-bun {
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    margin: auto;
                    content: '';
                    width: 100%;
                    height: 1px;
                    transition: transform 250ms cubic-bezier(.2,.6,.3,1),width 250ms cubic-bezier(.2,.6,.3,1);
                    will-change: transform,width;
                    background-color: var(--black);
                }

        .navbar .burger .burger-inner .top-bun {
            transform: translateY(-5.5px);
        }

        .navbar .burger.is-active .burger-inner .top-bun {
            transform: translateX(3.5px) rotate(-135deg);
            width: 28px;
        }

        .navbar .burger .burger-inner .bottom-bun {
            transform: translateY(5.5px);
        }

        .navbar .burger.is-active .burger-inner .bottom-bun {
            transform: translateX(3.5px) rotate(135deg);
            width: 28px;
        }

    .navbar .navbar-menu {
        background-color: #f8f9fa;
    }

    .navbar .navbar-end form button {
        padding-left: 0.75rem;
    }
}

/* MOBILE VERSION */
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        width: 100%;
        z-index: 10;
    }

    main {
        padding-top: 70px;
    }

    section {
        padding: 0.5rem 1.5rem 2rem 1.5rem !important;
    }

    .login {
        background: url('background.png') center no-repeat;
        background-size: cover;
        height: 100%;
    }

        .login::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px);
        }

        .login .tagline {
            display: none;
        }

        .login .blurred-background {
            display: none;
        }

        .login .form-container {
            min-height: auto;
        }

        .login form {
            background: rgba(255, 255, 255, 0.5);
            padding: 1rem 2rem;
            border-radius: var(--radius);
            margin-left: 0 !important;
        }

        .login .tagline-xs {
            display: block;
            text-align: center;
            text-transform: uppercase;
            color: #fff;
            padding-top: 3rem;
            font-weight: 600;
        }
}