/*^ ------------------------------- Variables ------------------------------- */
    :root {
        --tooltip-fond: #FFFFFF;
        --tooltip-ecriture: #0E1111;
        /*["#DC5450", "#E2A122", "#69BB59"]*/
        --vert: #69BB59;/*#5F827D;*/
        --jaune: #fde701;
        --orange: #FD6A02;
        --rouge: #C32C34;
        --radius-size: 5px;
        --radius: var(--radius-size);
        --gap: 1.5rem;
    }
    body {
        --fond: #f5f5f5;
        --gris: #dee2e6;
        --fond-inverse: #495057;
        --ecriture: #495057;
        --ecriture-inverse: #FFFFFF;
        --couleur: #00a5df;/*DB0662*/
        --couleur-5: rgba(0, 165, 223, 0.2);/*DB0662*/
        /*#107D93*/
    }
    body.hDark {
    }

    body {
        color: var(--ecriture);
        background: var(--fond);
    }

/*^ -------------------------------- General -------------------------------- */
    h2 {
        /*color: var(--couleur);*/
        font-size: 1.2em;
    }
    body > main {
        padding: var(--gap) var(--gap) var(--gap) calc(var(--gap) + var(--gap) + 280px);
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
        justify-content: center;
        align-content: flex-start;
        min-height: 100%;
        gap: var(--gap);
        justify-content: flex-start;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > nav.adminMenuClosed + main {
        padding: var(--gap) var(--gap) var(--gap) calc(calc(var(--gap) * 4) + 30px);
    }

    body > main .fullSection {
        flex: 0 0 100%;
        /*overflow-x: auto;
        overflow-y: initial;*/
        /*max-width: min(calc(50% - calc(var(--gap) / 2)),50%);*/
    }
    body > main .demiSection {
        flex: 0 0 calc(50% - (var(--gap) * .50));
        /*overflow-x: auto;
        overflow-y: initial;*/
        /*max-width: min(calc(50% - calc(var(--gap) / 2)),50%);*/
    }
    body > main .quartSection {
        flex: 0 0 calc(25% - (var(--gap) * .25));
        /*overflow-x: auto;
        overflow-y: initial;*/
        /*max-width: min(calc(25% - var(--gap)), 25%);*/
    }
    body > main .troisQuartSection {
        flex: 0 0 calc(75% - (var(--gap) * .75));
        /*overflow-x: auto;
        overflow-y: initial;*/
        /*max-width: min(calc(75% - var(--gap)), 75%);*/
    }
    body > main .deuxTiersSection {
        flex: 0 0 calc(66.66% - (var(--gap) * 0.6666));
        /*overflow-x: auto;
        overflow-y: initial;*/
        /*max-width: min(calc(66.66% - var(--gap)), 66.66%);*/
    }
    body > main .tierSection {
        flex: 0 0 calc(33.33% - (var(--gap) * 0.3333));
        /*overflow-x: auto;
        overflow-y: initial;*/
        /*max-width: min(calc(33.33% - var(--gap)), 33.33%);*/
    }
    @media (max-width: 85em) {
        body > main .demiSection,
        body > main .quartSection,
        body > main .troisQuartSection,
        body > main .deuxTiersSection,
        body > main .tierSection {
            max-width: 100%;
        }
    }
    .fondContenu {
        background: var(--ecriture-inverse);
        padding: var(--gap);
        border-radius: var(--radius);
    }
    .pageAction {
        position: absolute;
        top: var(--gap);
        right: var(--gap);
    }
    .message, .errorMessage {
        width: 100%;
        background: var(--gris);
        color: var(--ecriture);
        padding: var(--gap);
        border-radius: var(--radius);
        text-align: center;
    }
    .errorMessage {
        background: var(--rouge);
        color: #ffffff;
    }
    hr {
        border: none;
        height: 2px;
        background: var(--couleur);
    }
    table tbody tr td {transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
    table tbody tr:hover td {background: var(--couleur-5) !important}
    table tbody tr td span svg,
    table tbody tr td a svg {
        height: 1em;
        width: 1em;
        max-width: 1em;
        fill: var(--ecriture);
        vertical-align: text-bottom;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    table tbody tr td a svg:hover {
        fill: var(--couleur);
    }
    .trashRight {
        padding-right: 1.5em;
        position: relative;
    }
    .trashRight > a {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 99;
        transform: translateY(-50%);
        cursor: pointer !important;
        color: var(--rouge);
    }
    .trashRight > a > svg {
        height: 1em;
    }
    .sortPuHT,
    .sortHT,
    .sortTotalHT,
    .sortTotalTTC,
    .sortTTC,
    .sortTxCommission,
    .sortCommission,
    .sortTxEscompte,
    .sortEscompte,
    .sortHTPort {
        text-align: right;
    }
    .sortQ,
    .sortTva,
    td.delais {
        text-align: center;
    }
    .informationContenu {
        display: flex;
        flex-wrap: wrap;
    }
    .informationContenu > * {
        flex: 0 0 12.5%;
    }
    .informationContenu h2 {
        flex: 0 0 100%;
    }
/*^ ------------------------------ alkTabs ------------------------------- */
    .alkTabs .tabs {
        display: flex;
        gap: calc(var(--gap) / 3);
        border-bottom: 2px solid var(--couleur);
        margin: 0 0 var(--gap) 0;
        padding: 0;
    }
    .alkTabs .tabs button {
        padding: 5px 10px;
        border-radius: var(--radius-size) var(--radius-size) 0 0;
        background: var(--gris);
        cursor: pointer;
        border: 2px solid var(--gris);
        border-bottom: none;
        margin: 0;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    .alkTabs .tabs :hover {
        border-color: var(--couleur);
    }
    .alkTabs .tabs .current {
        background: var(--couleur);
        border-color: var(--couleur);
        color: var(--ecriture-inverse);
        cursor: default;
    }
    .alkTabs .tabsContent {
        position: relative;
    }
    .alkTabs .tabsContent > div {
        height: 0px;
        z-index: -1;
        width: 100%;
        position: absolute;
        /*overflow: hidden;*/
        top: 0;
    }
    .alkTabs .tabsContent > div > * {
        height: 0;
    }
    .alkTabs .tabsContent > div.current {
        position: relative;
        z-index: 0;
        /*overflow: hidden;*/
    }

    .alkTabs .tabsContent > div.current,
    .alkTabs .tabsContent > div.current > * {
        height: auto;
    }

/*^ -------------------------------- upload --------------------------------- */
    input[type="file"] {
        opacity: 0;
        margin: 0 !important;
        height: 0;
        position: absolute;
        z-index: -1;
        padding: 0;
    }
    input[type="file"] + label {
        position: relative;
        border: 1px solid var(--couleur);
        color: var(--couleur);
        display: block;
        padding: 10px;
        cursor: copy !important;
        width: 100%;
        border-radius: var(--radius);
        top: calc(-2.5rem - var(--gap)) !important;
        left: 0 !important;
    }
    input[type="file"][disabled] + label {
        border-color: var(--gris);
        color: var(--gris);
        cursor: not-allowed !important;

    }
    input[type="file"] + label::before {
        content: "+";
        position: absolute;
        font-size: 3.5em;
        line-height: 1rem;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.3;
    }
    input[type="file"] ~ ul {
        padding: 0;
        margin: calc(2.5rem + var(--gap)) 0 0 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }
    input[type="file"] ~ ul li {
        position: relative;
        border-radius: var(--radius);
        flex: 0 0 calc(33% - var(--gap));
    }
    input[type="file"] ~ ul li img,
    input[type="file"] ~ ul li embed {
        display: block;
        border-radius: var(--radius);
        width: 100%;
    }

    input[type="file"] ~ ul li span {
        position: absolute;
        top:1em;
        left:1em;
        width: calc(100% - 2em);
    }
    input[type="file"] ~ ul li progress {
        position: absolute;
        bottom: calc(1em + var(--gap));
        left:1em;
        width: calc(100% - 2em);
        height: 1rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-radius: var(--radius);
        background-color: var(--gris);
    }
    input[type="file"] ~ ul li progress::-webkit-progress-bar {
        background-color: var(--gris);
        border-radius: var(--radius);
    }

    input[type="file"] ~ ul li progress::-moz-progress-bar {
        border-radius: var(--radius);
        background-color: var(--couleur);
    }
    input[type="file"] ~ ul li progress::-webkit-progress-value {
        border-radius: var(--radius);
        background-color: var(--couleur);
    }

    input[type="file"] ~ ul li.fin span {
        color: var(--vert);
    }
    input[type="file"] ~ ul li.fin progress::-moz-progress-bar {
        background-color: var(--vert);
    }
    input[type="file"] ~ ul li.fin progress::-webkit-progress-value {
        background-color: var(--vert);
    }
    input[type="file"] ~ ul li.erreur span {
        color: var(--rouge);
    }
    input[type="file"] ~ ul li.erreur progress::-moz-progress-bar {
        background-color: var(--rouge);
    }
    input[type="file"] ~ ul li.erreur progress::-webkit-progress-value {
        background-color: var(--rouge);
    }

/*^ --------------------------------- menu ---------------------------------- */
    body > nav.adminMenu {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: 280px;
        top: var(--gap);
        left: var(--gap);
        height: calc(100% - var(--gap) - var(--gap));
        box-shadow: 0 .46875rem 2.1875rem rgba(31,10,6,.03),0 .9375rem 1.40625rem rgba(31,10,6,.03),0 .25rem .53125rem rgba(31,10,6,.05),0 .125rem .1875rem rgba(31,10,6,.03);
        background: var(--ecriture-inverse);
        border-radius: var(--radius);
        z-index: 99;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    }
    body > nav.adminMenuClosed.adminMenu {
        width: calc(30px + var(--gap) + var(--gap));
    }
    body > nav.adminMenu > svg.logo {
        display: block;
        margin: var(--gap) auto var(--gap) var(--gap);
        width: 50px;
        flex: 0 0 50px;
        fill: var(--couleur);
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > nav.adminMenuClosed.adminMenu > svg.logo {
        width: 30px;
        flex: 0 0 30px;
    }
    body > nav.adminMenu > svg.adminMenuToggler {
        position: absolute;
        left: calc(100% - calc(var(--gap) / 1.2));
        top: calc(50% - calc(var(--gap) / 2));
        background: var(--ecriture-inverse);
        border-radius: 100%;
        height: 2rem;
        cursor: pointer;
        transform-origin: 50% 50%;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 999;
    }
    body > nav.adminMenu > svg.adminMenuToggler:hover {
        color: var(--couleur);
    }
    body > nav.adminMenuClosed.adminMenu > svg.adminMenuToggler {
        transform: rotate(180deg);
    }

    body > nav.adminMenu > ul {
        padding: 0 var(--gap) var(--gap) var(--gap);
        overflow-x: hidden;
    }
    body > nav.adminMenu > ul a {
        white-space: nowrap;
    }
    body > nav.adminMenu > ul > li:not(:first-child) {
        padding-top: calc(var(--gap) / 2);
        position: relative;
    }
    body > nav.adminMenu > ul ul {
        padding: 0 calc(var(--gap) / 2);
        font-size: 0.875em;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > nav.adminMenuClosed.adminMenu > ul ul {
        padding: 0;
    }
    body > nav.adminMenu ul svg {
        height: 1.25em;
        margin-right: 0.25em;
        vertical-align: text-bottom;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > nav.adminMenuClosed.adminMenu ul svg {
        height: 30px;
        margin: auto;
    }
    body > nav.adminMenu > ul > li > span {
        font-weight: bold;
        position: relative;
    }
    body > nav.adminMenu > ul > li > span::after {
        content: "";
        position: absolute;
        height: 2px;
        top: 50%;
        right: 100%;
        width: 30px;
        background: var(--couleur);
        border-radius: var(--radius);
        z-index: 2;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > nav.adminMenuClosed.adminMenu > ul > li > span::after {
        right: calc(100% - 30px);
        opacity: 1;
    }
    body > nav.adminMenu > ul li span {
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    body > nav.adminMenuClosed.adminMenu > ul li span {
        padding-left: 280px;
    }
    body > nav.adminMenu ul a:hover,
    body > nav.adminMenu ul a.menuActive {
        color: var(--couleur);
    }
/*^ --------------------------- main content menu --------------------------- */
    body > main > .adminMainMenu ul {
        display: flex;
        justify-content: center;
        background: var(--ecriture-inverse);
        border-radius: var(--radius);
        gap: var(--gap);
        padding: calc(var(--gap) / 2) 0;
        border: 1px solid var(--gris);
    }
    body > main > .adminMainMenu ul svg {
        height: 1.25em;
        margin-right: 0.25em;
        vertical-align: top;
    }
    body > main > .adminMainMenu ul a {
        position: relative;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > main > .adminMainMenu ul a::after {
        position: absolute;
        content: '';
        background: var(--fond);
        border-radius: 3px;
        width: 1em;
        height: 1em;
        transform: rotate(45deg);
        visibility: hidden;
        opacity: 0;
        transition: all .2s;
        left: 50%;
        margin-left: -0.5em;
        bottom: -1.6em;
        box-shadow: -1px -1px 1px 0 rgba(222,226,230,.9);
    }
    body > main > .adminMainMenu ul a::before {
        content: '';
        position: absolute;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        background: var(--couleur);
        top: -8px;
        height: 3px;
        margin-left: -4px;
        border-radius: var(--radius-size);
        width: 8px;
        left: 50%;
        opacity: 0;
    }
    body > main > .adminMainMenu ul li a:hover,
    body > main > .adminMainMenu ul a.menuActive {
        color: var(--couleur);
    }
    body > main > .adminMainMenu ul a:not(.menuActive):hover::before {
        opacity: 1;
    }
    body > main > .adminMainMenu ul a.menuActive::after {
        visibility: visible;
        opacity: 1;
    }
/*^ --------------------------------- form ---------------------------------- */
    body > main > form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--gap);
        flex: 0 0 calc(100% - var(--gap) - 2em);
    }
    body > main > form > .formSubmit {
        position: absolute;
        right: var(--gap);
        display: flex;
        flex-direction: column;
        gap: 5px;
        height: min-content;
        z-index: 99;
    }
    body > main > form > .formSubmit > .formSubmitSticky {
        position: sticky;
        top: var(--gap);
        display: flex;
        flex-direction: column;
        gap: 5px;

    }
    body > main > form > .formSubmit button,
    body > main > form > .formSubmit a {
        margin-top: 0px;
        display: flex;
        flex-direction: row-reverse;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > main > form > .formSubmit button svg,
    body > main > form > .formSubmit a svg {
        height: 1.2em;
        vertical-align: text-bottom;
    }
    body > main > form > .formSubmit button span {
        white-space: nowrap;
        width: auto;
        max-width: 0;
        overflow: hidden;
        padding: 0;
        transition: max-width 0.5s cubic-bezier(0.77,0.2,0.05,1.0), padding 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    body > main > form > .formSubmit button:hover span {
        padding: 0 0.5em;
        max-width: 100%;
    }
    input:not([type=checkbox]):not([type=radio]),
    textarea,
    select {
        border-radius: var(--radius);
        border-color: var(--fond);
    }
    fieldset.formInput,
    input[type=number] + button,
    input[type=number] + button + button {
        border-color: var(--fond);
    }
    form.submited input:invalid,
    form.submited textarea:invalid,
    form.submited select:invalid,
    form.submited input[type=number]:invalid ~ button {
        border-color: var(--rouge) !important;
    }
    form.submited input[type=number]:invalid ~ button,
    form.submited input:invalid ~ label,
    form.submited textarea:invalid ~ label,
    form.submited select:invalid ~ label,
    form.submited select:invalid ~ span {
        color: var(--rouge) !important;
    }
    input:not([type=checkbox]):not([type=radio]):focus,
    textarea:focus,
    input[type=number]:focus ~ button,
    select[multiple]:focus, select:not([multiple]):active {
        border-color: var(--couleur);
    }
    input:not([type=checkbox]):not([type=radio]):focus ~ label,
    textarea:focus ~ label,
    select[multiple]:focus ~ label, select:not([multiple]):active ~ label, select:not([disabled]):active ~ span {
        color: var(--couleur);
    }
    button[type=submit],
    .button {
        border-radius: var(--radius);
        border: 1px solid var(--couleur);
        color: var(--couleur);
        background-color: var(--ecriture-inverse);

    }
    button[type=submit]:hover,
    .button:hover {
        color: var(--ecriture-inverse);
        background-color: var(--couleur);
    }
    button[type=submit].annuler,
    .button.annuler {
        border-color: var(--rouge);
        color: var(--rouge);
    }
    button[type=submit].annuler:hover,
    .button.annuler:hover {
        color: var(--ecriture-inverse);
        background-color: var(--rouge);
    }
    button[type=submit].enregistrer {
        border-color: var(--vert) !important;
        color: var(--vert) !important;
    }
    button[type=submit].enregistrer:hover {
        color: var(--ecriture-inverse) !important;
        background-color: var(--vert) !important;
    }
    svg.suspension, svg.litige {
        fill: var(--orange) !important;
    }
    svg.delais {
        fill: var(--couleur) !important;
    }
    svg.demission {
        fill: red !important;
    }

    .button.suspension, .button.litige {
        border-color: var(--orange) !important;
        color: var(--orange) !important;
    }
    .button.suspension:hover, .button.litige:hover {
        color: var(--ecriture-inverse) !important;
        background-color: var(--orange) !important;
    }
    .button.reintegration {
        border-color: var(--vert) !important;
        color: var(--vert) !important;
    }
    .button.reintegration:hover {
        color: var(--ecriture-inverse) !important;
        background-color: var(--vert) !important;
    }
    .button.demission {
        border-color: red !important;
        color: red !important;
    }
    .button.demission:hover {
        color: var(--ecriture-inverse) !important;
        background-color: red !important;
    }

    input[type=checkbox] + label:hover,
    input[type=radio] + label:hover,
    input[type=checkbox]:checked + label,
    input[type=radio]:checked + label {
        color: var(--couleur);
    }
/*^ ----------------------------- alk-select ------------------------------ */
    select.alk-select {
        display: block !important;
        position: absolute;
        opacity: 0;
        height: 0;
        width: 100%;
        overflow: hidden;
        pointer-events: none;
    }
    select.alk-select ~ span {
        display: none;
    }
    select.alk-select:not([disabled]):has(option:checked:not([value])) ~ label, select.alk-select:not([disabled]):has(option:checked:not([value=""])) ~ label, select.alk-select:not([disabled]):active ~ label {
        color: var(--ecriture);
        top: 0.15rem;
        left: 0.5rem;
        font-size: 1em;
    }
    select:not(.empty) ~ label {
        top: -1.15rem !important;
        left: 0.3rem !important;
        font-size: 0.8em !important;
        color: var(--couleur) !important;
    }
    .alk-select-search {
        margin: 5px 0 !important;
    }
    .alk-select-container {
        margin: 1.5em 0 0 0;
        width: 100%;
        position: relative;
    }
    .alk-select-container > div {
        overflow: hidden;
        width: 100%;
        cursor: pointer;
        position: relative;
        padding: 0;
        border: none;
        padding-right: calc(.6em + 10px);
        padding-bottom: 2px;
        min-height: 2em;
        background: transparent;
        border-radius: var(--radius);
        border: 1px solid  var(--fond);
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .alk-select-container > div::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        background:  var(--fond);
        height: 100%;
        width: calc(.6em + 10px);
        border-radius: 0 var(--radius) var(--radius) 0;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    .alk-select-container > div::after {
        color: var(--ecriture);
    }
    .alk-select-container > div div {
        width: 100%;
        display: block;
        overflow: hidden;
        /*white-space: nowrap;
        text-overflow: ellipsis;*/
        position: relative;
        margin: 2px 2px 0 2px;
        padding: 2px calc(0.5em + 10px) 2px 2px;
    }
    .alk-select-container > div div svg.removeIcon {
        position: absolute;
        height: 0.5em;
        width: 0.5em;
        display: block;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }
    select.alk-select[multiple] + .alk-select-container > div div[data-optid] {
        width: fit-content;
        max-width: 100%;
        background: var(--couleur);
        color: var(--ecriture-inverse);
        display: inline-block;
        padding-left: 5px;
        opacity: 0.8;
    }
    select.alk-select[multiple] + .alk-select-container > div div[data-optid]:hover {
        opacity: 1;
    }

    .alk-select-container > div::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        position: absolute;
        right: 5px;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        border-top: .3em solid currentColor;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
    }
    .alk-select-container ul {
        padding: 2px 2px 0 2px;
        overflow-y: auto;
        list-style: none;
        margin: 0;
        opacity: 0;
        position: absolute;
        background: var(--ecriture-inverse);
        border: var(--couleur) 1px solid;
        border-top: none;
        top: 100%;
        z-index: -1;
        width: 100%;
        height: max-content;
        max-height: 0px;
        border-radius: 0 0 var(--radius) var(--radius);
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    select.alk-select.open-above + .alk-select-container ul {
        border-radius: var(--radius) var(--radius) 0 0;
        border: var(--couleur) 1px solid;
        top: auto;
        bottom: calc(100% - 1px);
    }
    .alk-select-container:focus {
        outline: none;
    }
    .alk-select-container:hover > div,
    .alk-select-container:focus > div {
        border-color: var(--couleur);
    }
    .alk-select-container:focus > div {
        border-radius: var(--radius) var(--radius) 0 0;
    }
    select.alk-select.open-above + .alk-select-container:focus > div {
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .alk-select-container:hover > div::before,
    .alk-select-container:focus > div::before {
        background: var(--couleur);
    }
    .alk-select-container:focus > div::before {
        border-radius: 0 var(--radius) 0 0;
    }
    select.alk-select.open-above + .alk-select-container:focus > div::before {
        border-radius: 0 0 var(--radius) 0;
    }
    .alk-select-container:focus ul {
        max-height: 200px;
        opacity: 1;
        z-index: 3;
    }
    .alk-select-container ul li {
        cursor: pointer;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 2px;
        padding: 5px 10px;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .alk-select-container > div div svg:not(.removeIcon) {
        height: calc(1em + 0.5rem);
        vertical-align: middle;
    }

    .alk-select-container ul li svg {
        height: calc(1em + 0.5rem);
        vertical-align: middle;
    }

    .alk-select-container ul li:hover:not(.selected):not(.disabled):not(.option-group) {
        background: var(--couleur);
        color: var(--ecriture-inverse);
        border-radius: var(--radius);
    }
    .alk-select-container ul li.selected,
    .alk-select-container ul li.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .alk-select-container ul li.option-group {
        cursor: not-allowed;
        font-weight: bold
    }
    select.alk-select:disabled + .alk-select-container {
        opacity: 0.7;
    }
    select.alk-select:disabled + .alk-select-container div {
        background-color: var(--gris);
        cursor: not-allowed !important;

    }

    form.submited .form-input select:invalid + .alk-select-container > div,
    form.submited .form-input select:invalid + .alk-select-container > ul {
        border-color: var(--rouge) !important;
    }

    form.submited .form-input select:invalid + .alk-select-container > div::before {
        background-color: var(--rouge);
    }
    select.alk-select[multiple] + .alk-select-container > div div[data-optid] {
        border-radius: var(--radius);
        transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

/*^ --------------------------------- login --------------------------------- */
    body.login {
        display: flex;
        justify-content: space-evenly;
        gap: 2em;
        width: 100%;
    }
    body.login main {
        align-content: center;
        padding: 0;
    }
    body.login .errorMessage {
        padding: calc(var(--gap) / 2);
        margin-top:  calc(var(--gap) / 2);
    }
    body.login form section {
        background: var(--ecriture-inverse);
        padding: var(--gap);
        border-radius: var(--radius);
        width: 350px;
    }
    body.login form .logo {
        max-height: 100px;
        max-width: 100%;
        margin: 0 auto 2em auto;
        display: block;
        fill: var(--couleur);
    }
    body.login button[type=submit] {
        display: block;
        width: 100%;
    }
/*^ ----------------------------- Fader animation ---------------------------- */
    #fader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        pointer-events: none;
        animation-duration: 300ms;
        animation-timing-function: ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #fader::before {
        content :"";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: var(--ecriture);
        opacity: 0.5;
    }

    #fader svg {
        height: 200px;
        width: 200px;
        fill: var(--couleur);
    }
    @keyframes fadeOut {
        from { opacity: 1 }
        to { opacity: 0 }
    }

    @keyframes fadeIn {
        from { opacity: 0 }
        to { opacity: 1 }
    }

    #fader.fadeOut {
        opacity: 0;
        animation-name: fadeOut;
    }

    #fader.fadeIn {
        opacity: 1;
        animation-name: fadeIn;
    }
/*^ ---------------------------------- 404 ---------------------------------- */
    h1.error404 {
        width: 100%;
        text-align: center;
    }
    h1.error404 span {
        color: transparent;
        font-size: 17em;
        text-shadow: 1px 1px 5px var(--ecriture-inverse), 0px 0px 0px var(--ecriture);
        padding: 0;
        margin: 0;
        line-height: 1;
    }
    a.error404 {
        font-size: 2em;
        display: inline-block;
        margin: auto;
        text-align: center;
    }
/*^ ----------------------------- Utilisateurs ------------------------------ */
    .listDroit {
        width: 100%;
    }
    .listDroit tbody tr td {
        text-align: center;
    }

    .listDroit tbody tr td:first-child {
        text-align: left;
    }
/*^ ----------------------------- messageListe ------------------------------ */
    .messageListe li {
        padding: 5px;
        border-top: 1px solid #d7dae3;
        transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .messageListe li:nth-child(even) {
        background: rgba(0,0,0, 0.03);
    }
    .messageListe li:hover {
        background: var(--couleur-5);
    }
    .messageListe li.current {
        background: var(--couleur);
        color: var(--ecriture-inverse);
    }

    .messageListe li a {
        display: block;
    }
    .messageListe li a span,
    .messageContent .adh span,
    .messageContent .user span {
        display: block;
        font-size: 0.7em;
        line-height: 0.7em;
    }
    /*^ ---------------------------- messageContent ----------------------------- */
        .messageContent {
            display: grid;
            grid-template-columns: 1fr 15% 1fr;
            grid-gap: var(--gap);
        }
        .messageContent .adh {
            background-color: var(--couleur-5);
            grid-column: 1/3;
            border-radius: var(--radius-size) var(--radius-size) var(--radius-size) 0;
            padding: var(--gap);
            position: relative;
            margin-bottom: 15px;
        }
        .messageContent .adh::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 15px 15px 0 0;
            border-color: var(--couleur-5) transparent transparent transparent;
        }
        .messageContent .user {
            grid-column: 2/4;
            background-color: rgba(0,0,0, 0.03);
            border-radius: var(--radius-size) var(--radius-size) 0 var(--radius-size);
            padding: var(--gap);
            position: relative;
            margin-bottom: 15px;
        }
        .messageContent .user::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 15px 15px 0;
            border-color: transparent rgba(0,0,0, 0.03) transparent transparent;
        }
        .messageContent .repondre {
            grid-column: 1/4;
            border-top: 2px solid var(--couleur);
            padding-right: calc(1em + var(--gap));
            position: relative;
        }

        .messageContent .repondre button.envoyer {
            position: absolute;
            right: 0;
            top: 0;
            margin: calc(1.5rem + 1px) 0 0 0;
        }
        .messageContent .repondre button.envoyer svg {
            width: 1em;
            height: 1em;
            display: block;
        }