/* =============================================================================
   RESET
   ========================================================================== */
@charset "UTF-8";

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
    display: block;
}

script {
    display: none !important;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, *, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

ul,
ol,
dl,
dt,
dd {
    list-style: none;
    margin: 0;
    padding: 0;
    list-style-position: outside;
}

.ei-sronly {
    display: none;
    visibility: hidden;
}


/* =============================================================================
   * / HTML / BODY
   ========================================================================== */
ul.evitement {
    position: absolute;
    left: 10px;
    top: 5px;
    z-index: 500;
    height: 40px;
}
ul.evitement li {
    float: left;
    list-style: none;
}


    ul.evitement li a {
        display: inline-block;
        text-align: center;
        text-decoration: none;
        position: absolute;
        top: -9000px;
        width: 9.375rem;
        background-color: #FFF;
        padding: 5px 10px;
        border: 1px solid #212121;
        border-radius: 6px;
        margin: 10px;
        font-size: 1.3rem;
        width: 200px;
    }

        ul.evitement li a:focus, ul.evitement li a:hover {
            top: 5px;
        }


*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* Pour une correspondance en px --> 1rem = 10px */
    scroll-behavior: smooth;
}

.ei_sronly {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border: 0;
    clip: rect(0px,0px,0px,0px);
    clip-path: circle(0);
    width: 1px;
    height: 1px;
    margin: -1px;
    white-space: nowrap;
}



/* =============================================================================
   A
   ========================================================================== */

a {
    text-decoration: none;
    color: inherit;
}

a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

/* =============================================================================
   Hn
   ========================================================================== */

h1 {
    font-size: 4rem;
    margin-bottom: 32px;
}

h2 {
    font-size: 3rem;
    margin-bottom: 32px;
}

/* =============================================================================
   P
   ========================================================================== */

p {
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   IMG
   ========================================================================== */

img {
    display: flex; /* Supprime un espace qui est ajout� sous les images automatiquement */
    width: 100%;
}

/* =============================================================================
   BTN
   ========================================================================== */

.btn,
a.btn {
    display: inline-flex;
    /* border-radius: 8px; */
    border: 2px solid var(--blue);
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: var(--blue);
    color: var(--white);
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
    transition: background .2s ease-in-out;
    align-items: center;
    font-size: 1.4rem;
    gap: 6px;
    width: fit-content;
    -ms-transform: skewX(-15deg);
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

    .btn.color1 {
        background: var(--blue);
        border: 2px solid var(--blue);
    }
    .btn.color2 {
        background: var(--skyBlue);
        border: 2px solid var(--skyBlue);
    }

        .btnDrop:hover, .btnDrop:focus {
            background: var(--color01-light);
        }

    .dropdown {
        background-color: #fff;
        border: 1px solid var(--color01-light);
        padding: 10px;
        position: absolute;
        box-shadow: var(--shadow);
        top: 100%;
        left: 0;
        z-index: 11;
        min-width: 330px;
        max-height: 410px;
        overflow-y: auto;
    }

        .dropdown#dateBox {
            width: 300px;
        }

        .dropdown .field-checkbox,
        .dropdown .field-radio {
            width: 100%;
        }

    .btnDrop .count:not(:empty) {
        border: 1.5px solid var(--color09);
        height: 20px;
        width: 20px;
        line-height: 2rem;
        font-size: 1.2rem;
        font-weight: 500;
        margin: 0 0 0 10px;
    text-align: center;
    transition: all 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.btn:hover,
a:hover.btn {
    border-color: var(--blue);
    background-color: var(--white);
    color: var(--blue);
}
    .field label.date{font-size: 1.3rem; display: flex; align-items: center;}

.emptyP{display: none;}

.btn.invert,
a.btn.invert {
    border-color: var(--white);
}

.btn:hover.invert,
a:hover.btn.invert {
    border-color: var(--blue);
    background-color: var(--white);
    color: var(--blue);
}

/* =============================================================================
      Notifications
   ========================================================================== */
.msgBox{text-align: center;}
.msgBox.error {
    color: var(--red);
}

/* =============================================================================
   Formulaires
   ========================================================================== */
form label {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .5px;
}

form input[type=text], form input[type=date], form input[type=email], form input[type=password],
form input[type=number], form input[type=search], form input[type=tel], form textarea, form select {
    margin-bottom: 20px;
    padding: 12px;
    font-size: 1.4rem;
    letter-spacing: .5px;
    border-radius: 4px;
    outline: 2px solid transparent;
    transition: .2s ease;
    background: #FFF;
    display: block; /* Permet de supprimer une marge sous les champs Textarea présente sous certains navigateurs (Chrome / Firefox) */
}

    form input[type=text].error, form input[type=date].error, form input[type=email].error, form input[type=password].error,
    form input[type=number].error, form input[type=search].error, form input[type=tel].error, form textarea.error, form select
    .ClientAreaChangePasswordComponent form input[type=password]#ctl00_txtMdp.error {
        border-color: var(--red);
    }

.ClientAreaChangePasswordComponent form input[type=password]#ctl00_txtMdp ~ p.note {
    margin-bottom: 20px;
}


form input[type=text]:focus, form input[type=date]:focus, form input[type=email]:focus, form input[type=password]:focus,
form input[type=number]:focus, form input[type=search]:focus, form input[type=tel]:focus, form textarea:focus, form select:focus {
    outline-color: var(--color00);
    border-color: rgba(31, 40, 77, .5);
}

form input[type=submit] {
    padding: 12px 24px;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .5px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}
    form input[type=submit]:hover {
        background: #FFF;
        color: var(--blue);
        border: 1px solid var(--blue);
    }


form .blocButtons {
    margin-top: 40px;
}



fieldset {
    border: none;
}

form, input, textarea, select {
    margin: 0;
    padding: 0;
}

    input[type=text], input[type=color], input[type=date], input[type=datetime-local], input[type=email], input[type=password], input[type=month], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=week], input[type=url], textarea, select {
        --border-width: 1px;
        --border-radius: 0;
        --font-size: 1.3rem;
        --line-height: 1.5;
        --padding: 0.5rem;
        --background-color: var(--color-white);
        --border-color: #878787;
        --font-color: var(--color-black);
        --padding: 0.5rem;
        --width: 100%;
        --focus-border-color: var(--color-info);
        --focus-box-shadow: 0 0 0 0.125em hsl(217.0588235294deg, 70.8333333333%, 52.9411764706%, 0.25);
        --disabled-background-color: var(--color-disabled);
        --disabled-box-shadow: none;
        --disabled-font-color: var(--color-muted);
        --disabled-border-color: var(--color-disabled);
        --error-border-color: var(--color-danger-darker);
        --error-background-color: var(--color-danger-alert);
        --error-font-color: var(--color-black);
        background-color: var(--background-color);
        border-color: var(--border-color);
        border-style: solid;
        border-width: var(--border-width);
        border-radius: var(--border-radius);
        color: var(--font-color);
        font-size: var(--font-size);
        font-family: inherit;
        line-height: var(--line-height);
        padding: var(--padding, 0);
        outline: none;
        width: var(--width);
    }

    input[type=radio], input[type=checkbox] {
        margin: 0 5px 0 0;
    }

    input[type=text]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=password]:focus, input[type=month]:focus, input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=week]:focus, input[type=url]:focus, textarea:focus, select:focus {
        --border-color: var(--focus-border-color);
    }

    input[type=text]:not([readonly]):focus, input[type=color]:not([readonly]):focus, input[type=date]:not([readonly]):focus, input[type=datetime-local]:not([readonly]):focus, input[type=email]:not([readonly]):focus, input[type=password]:not([readonly]):focus, input[type=month]:not([readonly]):focus, input[type=number]:not([readonly]):focus, input[type=search]:not([readonly]):focus, input[type=tel]:not([readonly]):focus, input[type=time]:not([readonly]):focus, input[type=week]:not([readonly]):focus, input[type=url]:not([readonly]):focus, textarea:not([readonly]):focus, select:not([readonly]):focus {
        --box-shadow: var(--focus-box-shadow);
    }

    input[type=text][disabled], input[type=color][disabled], input[type=date][disabled], input[type=datetime-local][disabled], input[type=email][disabled], input[type=password][disabled], input[type=month][disabled], input[type=number][disabled], input[type=search][disabled], input[type=tel][disabled], input[type=time][disabled], input[type=week][disabled], input[type=url][disabled], textarea[disabled], select[disabled] {
        --background-color: var(--disabled-background-color);
        --box-shadow: var(--disabled-box-shadow);
        --font-color: var(--disabled-font-color);
    }

:not(.is-input-group) > input[type=text][disabled], :not(.is-input-group) > input[type=color][disabled], :not(.is-input-group) > input[type=date][disabled], :not(.is-input-group) > input[type=datetime-local][disabled], :not(.is-input-group) > input[type=email][disabled], :not(.is-input-group) > input[type=password][disabled], :not(.is-input-group) > input[type=month][disabled], :not(.is-input-group) > input[type=number][disabled], :not(.is-input-group) > input[type=search][disabled], :not(.is-input-group) > input[type=tel][disabled], :not(.is-input-group) > input[type=time][disabled], :not(.is-input-group) > input[type=week][disabled], :not(.is-input-group) > input[type=url][disabled], :not(.is-input-group) > textarea[disabled], :not(.is-input-group) > select[disabled] {
    --border-color: var(--disabled-border-color);
}

input[type=text].has-error, input[type=color].has-error, input[type=date].has-error, input[type=datetime-local].has-error, input[type=email].has-error, input[type=password].has-error, input[type=month].has-error, input[type=number].has-error, input[type=search].has-error, input[type=tel].has-error, input[type=time].has-error, input[type=week].has-error, input[type=url].has-error, textarea.has-error, select.has-error {
    --border-color: var(--error-border-color);
    --background-color: var(--error-background-color);
    --font-color: var(--error-font-color);
}

input[type=date]::-webkit-datetime-edit-fields-wrapper, input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

p.has-error {
    color: var(--error-color);
    font-size: 1.2rem;
}

textarea {
    resize: none;
    min-height: 80px;
}

    textarea.has-resize {
        resize: both;
    }

    textarea.has-resize-vertical {
        resize: vertical;
    }

    textarea.has-resize-horizontal {
        resize: horizontal;
    }

.is-select {
    --arrow-color: hsl(232.3404255319deg, 100%, 72.3529411765%, 1);
    --arrow-width: 0.625em;
    --loading-spinner-speed: 0.8s;
    --loading-icon-width: 2px;
    --loading-icon-color: var(--color-light-grey);
    position: relative;
    width: 100%;
}

    .is-select select {
        --pading: 0.5rem;
        padding-right: 2rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .is-select:not(.is-loading)::after {
        border-color: var(--arrow-color);
        border-width: 3px;
        border-style: solid;
        border-radius: 2px;
        border-right: 0;
        border-top: 0;
        content: " ";
        display: block;
        height: var(--arrow-width);
        margin-top: -0.4em;
        pointer-events: none;
        position: absolute;
        right: 0.9375em;
        top: 50%;
        transform: rotate(-45deg);
        transform-origin: center;
        width: var(--arrow-width);
    }

    .is-select.is-loading {
        position: relative;
    }

        .is-select.is-loading::after {
            -webkit-animation: spinner var(--loading-spinner-speed) linear infinite;
            animation: spinner var(--loading-spinner-speed) linear infinite;
            border: var(--loading-icon-width) solid var(--loading-icon-color);
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-radius: 50%;
            content: " ";
            display: block;
            height: 1.25em;
            position: absolute;
            top: calc(50% - 0.625em);
            right: 0.9375em;
            width: 1.25em;
            position: absolute !important;
        }

.is-multiple-select {
    width: 100%;
}

    .is-multiple-select select {
        padding: 0;
    }

    .is-multiple-select option {
        padding: 0.5rem 1rem;
    }

label {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: normal;
    line-height: 1.1;
}

    label:not(:last-child) {
        margin-bottom: 0.4rem;
    }

.is-inline-label {
    align-items: center;
    /*display: flex;
    justify-content: flex-start;*/
}

.is-checkbox, .is-radio {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
}

    .is-checkbox label, .is-radio label {
        font-weight: 400;
        margin-bottom: 0;
    }

    .is-checkbox > span, .is-radio > span {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
    }

        .is-checkbox > span:not(:last-of-type), .is-radio > span:not(:last-of-type) {
            margin-right: 12px;
        }

    .is-checkbox input[type=checkbox] + label, .is-radio input[type=radio] + label {
        margin-left: 4px;
    }

        .is-checkbox input[type=checkbox] + label:not(:last-of-type), .is-radio input[type=radio] + label:not(:last-of-type) {
            margin-right: 12px;
        }

.is-input-group {
    --background-color: var(--color-disabled);
    --border-color: hsl(0deg, 0%, 85.8823529412%, 1);
    --border-width: 1px;
    --font-color: var(--color-black);
    --font-size: 1rem;
    --focus-color: var(--color-info);
    align-items: center;
    display: flex;
    width: 100%;
}

    .is-input-group > label, .is-input-group > span {
        border-color: var(--border-color);
        border-style: solid;
        border-width: var(--border-width);
        color: var(--font-color);
        font-size: var(--font-size);
        font-family: inherit;
        font-weight: 400;
        line-height: 1.5;
        outline: none;
        background-color: var(--background-color);
        padding: 0.5rem 1rem;
    }

    .is-input-group > .button {
        line-height: 1.5;
        white-space: nowrap;
    }

    .is-input-group input, .is-input-group select {
        box-shadow: none;
    }

        .is-input-group input:focus, .is-input-group select:focus {
            box-shadow: none !important;
        }

    .is-input-group > label, .is-input-group > span, .is-input-group input, .is-input-group > .button {
        margin: 0;
    }

        .is-input-group > label:not(:last-child), .is-input-group > span:not(:last-child), .is-input-group input:not(:last-child), .is-input-group > .button:not(:last-child) {
            border-right: none;
        }

        .is-input-group > label:focus + *, .is-input-group > span:focus + *, .is-input-group input:focus + *, .is-input-group > .button:focus + * {
            border-left-color: var(--focus-color);
        }

    .is-input-group .is-select:not(:last-child) select {
        border-right-color: transparent;
    }

    .is-input-group .is-select:not(:last-child):focus-within + * {
        border-left-color: var(--focus-color);
    }

.is-file-input input[type=file] {
    display: none;
}

.is-file-input label {
    font-weight: normal;
}

.is-switch {
    --track-rounded-radius: 20px;
    --toggle-rounded-radius: 15px;
    --track-radius: 0;
    --toggle-radius: 0;
    --track-background-color: #8F8F8F;
    --active-track-background-color: var(--color-primary);
    --toggle-background-color: var(--color-white);
    --track-height: 2rem;
    --track-width: 4rem;
    --toggle-height: 1.5rem;
    --toggle-width: 1.5rem;
    line-height: 0.8;
}

    .is-switch.is-rounded label {
        --track-radius: var(--track-rounded-radius);
    }

        .is-switch.is-rounded label::after {
            --toggle-radius: var(--toggle-rounded-radius);
        }

    .is-switch input {
        margin: 0;
        opacity: 0;
        position: absolute;
    }

        .is-switch input:checked ~ label {
            --track-background-color: var(--active-track-background-color);
        }

            .is-switch input:checked ~ label::after {
                left: 2.25rem;
            }

    .is-switch label {
        background-color: var(--track-background-color);
        border-radius: var(--track-radius);
        cursor: pointer;
        display: inline-block;
        height: var(--track-height);
        position: relative;
        transition: all 0.25s ease-out;
        width: var(--track-width);
    }

        .is-switch label::after {
            content: "";
            background-color: var(--toggle-background-color);
            border-radius: var(--toggle-radius);
            display: block;
            left: 0.25rem;
            height: var(--toggle-height);
            position: absolute;
            top: 0.25rem;
            transition: all 0.25s ease-out;
            width: var(--toggle-width);
        }