:root {
    --blanc: #FFFFFF;

    --gris-c7: #F6F5F8;
    --gris-c6: #ECEAF0;
    --gris-c5: #D5D3E0;
    --gris-c4: #C2C0CC;
    --gris-c3: #AEACB8;
    --gris-c2: #87858F;
    --gris-c1: #605E67;
    --gris: #39363E;

    --violet-c8: #F2EDFF;
    --violet-c7: #E8E0F9;
    --violet-c6: #DDD3F3;
    --violet-c5: #C4B5E5;
    --violet-c4: #AB97D7;
    --violet-c3: #9279CA;
    --violet-c2: #785ABC;
    --violet-c1: #5F3CAE;
    --violet: #461EA0;
    --violet-f1: #241088;
    --violet-f2: #02016F;
    --violet-f3: #01004C;

    --bleu-c6: #DDFFFC;
    --bleu-c5: #C6F6F1;
    --bleu-c4: #AFECE6;
    --bleu-c3: #90E6E1;
    --bleu-c2: #71DFDC;
    --bleu-c1: #51D9D7;
    --bleu: #32D2D2;
    --bleu-f1: #25A6A6;
    --bleu-f2: #187979;

    --rouge-c6: #FFD2D8;
    --rouge-c5: #F9B8C0;
    --rouge-c4: #F39EA7;
    --rouge-c3: #EE848F;
    --rouge-c2: #E86976;
    --rouge-c1: #E24F5E;
    --rouge: #DC3545;
    --rouge-f1: #B52231;
    --rouge-f2: #981825;

    --orange-c6: #FFDDB9;
    --orange-c5: #FFCBA6;
    --orange-c4: #FFB994;
    --orange-c3: #FFA781;
    --orange-c2: #FF956E;
    --orange-c1: #FF835C;
    --orange: #FF7149;

    --vert-c6: #E1F5DA;
    --vert-c5: #CAEBC1;
    --vert-c4: #B3E0A7;
    --vert-c3: #9DD68E;
    --vert-c2: #86CB75;
    --vert-c1: #6FC15B;
    --vert: #58B642;
    --vert-f1: #3F8230;
    --vert-f2: #264E1E;

    --salmon-c6: #FFDDD5;
    --salmon-c5: #FFD5CB;
    --salmon-c4: #FFCCC0;
    --salmon-c3: #FFC4B6;
    --salmon-c2: #FFBBAB;
    --salmon-c1: #FFB3A1;
    --salmon: #FFAA96;
    --salmon-f1: #FF896D;
    --salmon-f2: #FF6D4B;

    --pink-c2: #FFE6D2;
    --pink-c1: #FFD9D4;
    --pink: #FFCCD5;
    --pink-f1: #FFB1C0;
    --pink-f2: #FF96AA;

    --neon-blue-c1: #78C8FF;
    --neon-blue: #5C6FFF;

    --aquamarine-c1: #C8FFDC;
    --aquamarine: #64E6BE;

    --jaune: #FFBD3F;

    --bleu-royal: #3C6ADC;





    --blanc-50p: #FFFFFF7F;

    --gris-c6-80p: #ECEAF0CC;
    --gris-50p: #39363E7F;

    --violet-c2-50p: #785ABC7F;
    --violet-c1-50p: #5F3CAE7F;
    --violet-20p: #461EA033;
    --violet-50p: #461EA07F;
    --violet-f1-50p: #2410887F;
    --violet-f2-50p: #02016F7F;

    --bleu-50p: #32D2D27F;
    --bleu-f1-50p: #25A6A67F;
    --bleu-f2-50p: #1879797F;

    --rouge-50p: #DC35457F;
    --rouge-f1-50p: #B522317F;
    --rouge-f2-50p: #9818257F;

    --vert-50p: #58B6427F;
    --vert-f1-50p: #3F82307F;
    --vert-f2-50p: #264E1E7F;

    --salmon-c4-50p: #FFCCC07F;

    --pink-f2-50p: #FF96AA7F;
}



body {
    color: var(--gris);
    overflow: initial;
    font-family: Jost,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;
    background-color: var(--gris-c7);
    /*font-weight: 300;*/
    position: relative;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--violet);
    line-height: initial;
}

img {
    max-width: 100%;
}

a {
    color: var(--bleu);
    font-weight: 400;
}
/*a.removeBloc {
    color: var(--rouge);
}*/

.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt25 {
    margin-top: 25px;
}
.mt40 {
    margin-top: 40px;
}
.mt50 {
    margin-top: 50px;
}
.mt75 {
    margin-top: 75px;
}
.mt100 {
    margin-top: 100px;
}
.mt200 {
    margin-top: 200px;
}

.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb25 {
    margin-bottom: 25px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb50 {
    margin-bottom: 50px;
}
.mb75 {
    margin-bottom: 75px;
}
.mb100 {
    margin-bottom: 100px;
}
.mb200 {
    margin-bottom: 200px;
}
.mb250 {
    margin-bottom: 250px;
}

.fw500 {
    font-weight: 500;
}

.fs16 {
    font-size: 16px;
}
.fs18 {
    font-size: 18px;
}
.fs24 {
    font-size: 25px!important;
}

.img-ratio {
    background-size: cover;
    background-position: center;
}

.ratio-4-3 {
    aspect-ratio: 4 / 3;
}
.ratio-3-4 {
    aspect-ratio: 3 / 4;
}
.ratio-1-1 {
    aspect-ratio: 1 / 1;
}





.modal-dialog {
    max-width: 600px;
}

.modal-sm {
    max-width: 400px;
}
.modal-md {
    max-width: 750px;
}
.modal-lg {
    max-width: 900px;
}
.modal-xl {
    max-width: 1140px;
}
.modal-xxl {
    max-width: 1340px;
}





.cadre-blanc {
    background: white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 20px;
    border: 5px solid var(--blanc);
    cursor: pointer;
}


.selection .cadre-blanc {
    border: 5px solid #43B0B0;
}

.vertical-center {
    display: flex; /* contexte sur le parent */
    flex-direction: column; /* direction d'affichage verticale */
    justify-content: center;
}

.vertical-center .btn {
    align-self: flex-start;
}

.radius20 {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.orange {
    color: var(--orange);
}

.bleu-clair {
    color: var(--bleu) !important;
}

.fondgris {
    background-color: var(--gris-c6);
}

.fond-aide {
    background-color: var(--bleu-c6);
}

.violet {
    color: var(--violet);
}

.blanc {
    color: var(--blanc) !important;
}

.card {
    box-shadow: none;
}

.card-violet {
    background: var(--violet);
}

.card-violet h3 {
    color: white;
}

.bordure-bleue {
    border-top: 3px solid var(--bleu);
}

.nounderline {
    text-decoration: none !important
}

#map {
    height: 400px;
}

/*.navbar {
    background: var(--violet);
    height: 85px;
}*/


.wrapper {
    overflow: initial;
}
.wrapper::before {
    content: none;
}




/* ----- CHEVRON ----- */
.chevron {
    content: ' ';
    color: var(--violet);
    border-style: solid;
    border-width: 0 .1rem .1rem 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(-45deg);
    transition: all .2s ease-out;
    margin-right: 4px;
    position: static;
}





/* ----- LES CHAMPS DES FORMULAIRES ----- */
label, legend, .col-form-label {
    font-family: Jost,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding: 0;
}

.form-group {
    margin: 0;
}

.form-control,
.tox.tox-tinymce {
    font-family: Jost,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;
    background-color: var(--blanc);
    border: 2px solid var(--gris-c4) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    margin: 7px 0px 15px;
    height: auto;
    font-size: 15px;
    color: var(--gris) !important;
}

.form-control::placeholder {
    color: var(--gris-c4);
}

.form-control {
    min-width: min(100px, 100%);
    padding: 7px 14px !important;
}
.form-control.white {
    background: var(--blanc);
    border: none;
}
.form-control.big {
    padding: 20px;
    color: var(--violet);
}
.form-control:focus {
    border-color: var(--violet-20p) !important;
    box-shadow: 0 0 0 2px var(--violet-20p) !important;
}
.form-control:disabled, .form-control.disabled {
    background-color: var(--gris-c5);
    color: var(--gris-c2) !important;
}


.tox.tox-tinymce {
    min-height: 150px !important;
}

.tox .tox-toolbar__primary {
    background: none!important;
    padding: 3px!important;
    border-bottom: 1px solid #C1C1C1;
}

.tox .tox-tbtn {
    background: #F4F4F4!important;
    margin-right: 5px!important;
}
.tox .tox-tbtn svg {
    fill: #272457!important;
}

.tox .tox-toolbar-overlord,
.tox .tox-edit-area__iframe,
.tox .tox-statusbar {
    background: none !important;
}

.tox .tox-toolbar__primary {
    border-bottom: 2px solid var(--gris-c4);
}

.tox .tox-statusbar {
    border-top: 2px solid var(--gris-c4) !important;
}

.tox .tox-statusbar .tox-statusbar__path {
    display: none;
}

.tox .tox-editor-header {
    z-index: 0 !important;
}


.div-input-search {
    position: relative;
    min-width: min(250px, 100%);
}
.div-input-search input {
    margin: 0;
    padding-left: 36px !important;
}
.div-input-search svg {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1;
    width: 22px;
    aspect-ratio: 1 / 1;
    fill: var(--gris-c4);
    transition: all 0.2s ease-out;
}


.input-group {
    display: flex;
    flex-wrap: nowrap;
}
.input-group .input-group-text {
    background-color: var(--gris-c4);
    border: none;
    border-radius: 4px;
    padding: 0 6px;
}
.input-group .input-group-text svg {
    fill: var(--gris);
    width: 30px;
}
.input-group.prepend > .easy-autocomplete {
    flex: 1;
}
.input-group .form-control {
    margin: 0;
}
.input-group.prepend .form-control,
.input-group.prepend .paragraphe-input {
    border-radius: 0 4px 4px 0 !important;
}
.input-group.append .form-control,
.input-group.append .paragraphe-input {
    border-radius: 4px 0 0 4px !important;
}

.paragraphe-input {
    background-color: var(--blanc);
    border: 2px solid var(--gris-c4);
    border-radius: 4px;
    padding: 7px 14px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 40px;
}
.paragraphe-input:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.paragraphe-input.disabled,
.paragraphe-input:disabled {
    background-color: var(--gris-c5);
}
.paragraphe-input p {
    flex: 1;
    margin: 0;
    font-size: 15px;
    color: var(--gris);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.paragraphe-input.disabled p,
.paragraphe-input:disabled p {
    color: var(--gris-c2);
}
.paragraphe-input p.placeholder {
    color: var(--gris-c4);
}
.paragraphe-input-indicateur {
    padding: 4px;
    padding-left: 14px;
    gap: 4px;
}
.paragraphe-input-indicateur .indicateur-lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--gris-c4);
    fill: var(--gris-c4);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--gris);
}
.paragraphe-input-indicateur .indicateur-lien svg {
    width: 16px;
    fill: var(--gris);
}



/* ----- LES LIENS ----- */
a.text {
    display: inline-flex;
    align-items: center;
}



/* ----------
LOADER
---------- */
.spinner-loader {
    width: 22px;
    aspect-ratio: 1 / 1;
    animation: spinnerRotation 2.5s linear infinite;
}
@keyframes spinnerRotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner-loader circle {
    width: 100%;
    height: 100%;
    cx: 50%;
    cy: 50%;
    r: 43%;
    fill: none;
    stroke-width: 14%;
    stroke-dasharray: calc(2 * 3.14159 * 43%);
    stroke-dashoffset: calc(2 * 3.14159 * 43%);
    animation: spinnerAnimation 4s linear infinite;
}
@keyframes spinnerAnimation {
    0%,100% {
        stroke-dashoffset: calc(2 * 3.14159 * 43%);
    }
    50% {
        stroke-dashoffset: 0;
    }
    50.1% {
        stroke-dashoffset: calc((2 * 3.14159 * 43%) * 2);
    }
}

.div-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
    margin-top: 15px;
}
.div-loader svg {
    width: 32px;
    stroke: var(--gris);
}



/* ----------
ICONE PREMIUM
---------- */
.icone-premium__parent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.icone-premium {
    display: flex;
    background-color: var(--bleu);
    border-radius: 50%;
    padding: 5px;
}
.icone-premium .icone-premium__icon {
    min-width: 10px;
    width: 10px;
    height: 10px;
}



/* ----------
BOUTONS
---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: Jost,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;
    padding: 7px 14px;
    font-weight: 500;
    border-radius: .2rem;
    transition: all .2s ease;
    word-break: normal;
    cursor: pointer;
}
.btn:disabled,
.btn.disabled {
    cursor: default;
}

.btn,
.btn:hover,
.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
    border: solid 1px;
}
.btn.disabled,
.btn:disabled {
    opacity: 1;
    filter: contrast(80%) grayscale(60%);
}
.btn svg {
    min-width: 22px;
    width: 22px;
}

.btn-petit {
    gap: 4px;
    padding: 4px 8px;
}

.btn-rond {
    border-radius: 999px;
}



.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--bleu);
    border-color: var(--bleu);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-outline-primary,
.btn-outline-primary.disabled, .btn-outline-primary:disabled,
.btn-clair-primary,
.btn-clair-primary.disabled, .btn-clair-primary:disabled,
.btn-blanc-primary,
.btn-blanc-primary.disabled, .btn-blanc-primary:disabled,
.btn-gris-primary,
.btn-gris-primary.disabled, .btn-gris-primary:disabled {
    color: var(--bleu);
    fill: var(--bleu);
    stroke: var(--bleu);
}
.btn-outline-primary,
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    background-color: var(--blanc);
    border-color: var(--bleu);
}
.btn-clair-primary,
.btn-clair-primary.disabled, .btn-clair-primary:disabled {
    background-color: var(--bleu-c6);
    border-color: var(--bleu-c6);
}
.btn-blanc-primary,
.btn-blanc-primary.disabled, .btn-blanc-primary:disabled {
    background-color: var(--blanc);
    border-color: var(--blanc);
}
.btn-gris-primary,
.btn-gris-primary.disabled, .btn-gris-primary:disabled {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):focus,
.btn-clair-primary:not(:disabled):not(.disabled):hover,
.btn-clair-primary:not(:disabled):not(.disabled):focus {
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--bleu-f1);
    border-color: var(--bleu-f1);
}
.btn-clair-primary:not(:disabled):not(.disabled):hover,
.btn-clair-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--bleu);
    border-color: var(--bleu);
}
.btn-blanc-primary:not(:disabled):not(.disabled):hover,
.btn-blanc-primary:not(:disabled):not(.disabled):focus,
.btn-gris-primary:not(:disabled):not(.disabled):hover,
.btn-gris-primary:not(:disabled):not(.disabled):focus {
    color: var(--bleu-f1);
    fill: var(--bleu-f1);
    stroke: var(--bleu-f1);
}
.btn-blanc-primary:not(:disabled):not(.disabled):hover,
.btn-blanc-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}
.btn-gris-primary:not(:disabled):not(.disabled):hover,
.btn-gris-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c3);
    border-color: var(--gris-c3);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-blanc-primary:not(:disabled):not(.disabled):active,
.btn-blanc-primary:not(:disabled):not(.disabled):active:focus,
.btn-gris-primary:not(:disabled):not(.disabled):active,
.btn-gris-primary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--bleu-f2);
    border-color: var(--bleu-f2);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--bleu-f2-50p);
}
.btn-clair-primary:not(:disabled):not(.disabled):active,
.btn-clair-primary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--bleu-f1);
    border-color: var(--bleu-f1);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--bleu-f1-50p);
}



.btn-secondary,
.btn-secondary.disabled, .btn-secondary:disabled {
    background-color: var(--violet);
    border-color: var(--violet);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-outline-secondary,
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled,
.btn-clair-secondary,
.btn-clair-secondary.disabled, .btn-clair-secondary:disabled,
.btn-blanc-secondary,
.btn-blanc-secondary.disabled, .btn-blanc-secondary:disabled,
.btn-gris-secondary,
.btn-gris-secondary.disabled, .btn-gris-secondary:disabled {
    color: var(--violet);
    fill: var(--violet);
    stroke: var(--violet);
}
.btn-outline-secondary,
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
    background-color: var(--blanc);
    border-color: var(--violet);
}
.btn-clair-secondary,
.btn-clair-secondary.disabled, .btn-clair-secondary:disabled {
    background-color: var(--violet-c6);
    border-color: var(--violet-c6);
}
.btn-blanc-secondary,
.btn-blanc-secondary.disabled, .btn-blanc-secondary:disabled {
    background-color: var(--blanc);
    border-color: var(--blanc);
}
.btn-gris-secondary,
.btn-gris-secondary.disabled, .btn-gris-secondary:disabled {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}

.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):focus,
.btn-outline-secondary:not(:disabled):not(.disabled):hover,
.btn-outline-secondary:not(:disabled):not(.disabled):focus,
.btn-clair-secondary:not(:disabled):not(.disabled):hover,
.btn-clair-secondary:not(:disabled):not(.disabled):focus {
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):focus,
.btn-outline-secondary:not(:disabled):not(.disabled):hover,
.btn-outline-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--violet-f1);
    border-color: var(--violet-f1);
}
.btn-clair-secondary:not(:disabled):not(.disabled):hover,
.btn-clair-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--violet);
    border-color: var(--violet);
}
.btn-blanc-secondary:not(:disabled):not(.disabled):hover,
.btn-blanc-secondary:not(:disabled):not(.disabled):focus,
.btn-gris-secondary:not(:disabled):not(.disabled):hover,
.btn-gris-secondary:not(:disabled):not(.disabled):focus {
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
}
.btn-blanc-secondary:not(:disabled):not(.disabled):hover,
.btn-blanc-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}
.btn-gris-secondary:not(:disabled):not(.disabled):hover,
.btn-gris-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c3);
    border-color: var(--gris-c3);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-blanc-secondary:not(:disabled):not(.disabled):active,
.btn-blanc-secondary:not(:disabled):not(.disabled):active:focus,
.btn-gris-secondary:not(:disabled):not(.disabled):active,
.btn-gris-secondary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--violet-f2);
    border-color: var(--violet-f2);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--violet-f2-50p);
}
.btn-clair-secondary:not(:disabled):not(.disabled):active,
.btn-clair-secondary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--violet-f1);
    border-color: var(--violet-f1);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--violet-f1-50p);
}



.btn-danger,
.btn-danger.disabled, .btn-danger:disabled {
    background-color: var(--rouge);
    border-color: var(--rouge);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-outline-danger,
.btn-outline-danger.disabled, .btn-outline-danger:disabled,
.btn-clair-danger,
.btn-clair-danger.disabled, .btn-clair-danger:disabled,
.btn-blanc-danger,
.btn-blanc-danger.disabled, .btn-blanc-danger:disabled,
.btn-gris-danger,
.btn-gris-danger.disabled, .btn-gris-danger:disabled {
    color: var(--rouge);
    fill: var(--rouge);
    stroke: var(--rouge);
}
.btn-outline-danger,
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
    background-color: var(--blanc);
    border-color: var(--rouge);
}
.btn-clair-danger,
.btn-clair-danger.disabled, .btn-clair-danger:disabled {
    background-color: var(--rouge-c6);
    border-color: var(--rouge-c6);
}
.btn-blanc-danger,
.btn-blanc-danger.disabled, .btn-blanc-danger:disabled {
    background-color: var(--blanc);
    border-color: var(--blanc);
}
.btn-gris-danger,
.btn-gris-danger.disabled, .btn-gris-danger:disabled {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}

.btn-danger:not(:disabled):not(.disabled):hover,
.btn-danger:not(:disabled):not(.disabled):focus,
.btn-outline-danger:not(:disabled):not(.disabled):hover,
.btn-outline-danger:not(:disabled):not(.disabled):focus,
.btn-clair-danger:not(:disabled):not(.disabled):hover,
.btn-clair-danger:not(:disabled):not(.disabled):focus {
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-danger:not(:disabled):not(.disabled):hover,
.btn-danger:not(:disabled):not(.disabled):focus,
.btn-outline-danger:not(:disabled):not(.disabled):hover,
.btn-outline-danger:not(:disabled):not(.disabled):focus {
    background-color: var(--rouge-f1);
    border-color: var(--rouge-f1);
}
.btn-clair-danger:not(:disabled):not(.disabled):hover,
.btn-clair-danger:not(:disabled):not(.disabled):focus {
    background-color: var(--rouge);
    border-color: var(--rouge);
}
.btn-blanc-danger:not(:disabled):not(.disabled):hover,
.btn-blanc-danger:not(:disabled):not(.disabled):focus,
.btn-gris-danger:not(:disabled):not(.disabled):hover,
.btn-gris-danger:not(:disabled):not(.disabled):focus {
    color: var(--rouge-f1);
    fill: var(--rouge-f1);
    stroke: var(--rouge-f1);
}
.btn-blanc-danger:not(:disabled):not(.disabled):hover,
.btn-blanc-danger:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}
.btn-gris-danger:not(:disabled):not(.disabled):hover,
.btn-gris-danger:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c3);
    border-color: var(--gris-c3);
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-blanc-danger:not(:disabled):not(.disabled):active,
.btn-blanc-danger:not(:disabled):not(.disabled):active:focus,
.btn-gris-danger:not(:disabled):not(.disabled):active,
.btn-gris-danger:not(:disabled):not(.disabled):active:focus {
    background-color: var(--rouge-f2);
    border-color: var(--rouge-f2);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--rouge-f2-50p);
}
.btn-clair-danger:not(:disabled):not(.disabled):active,
.btn-clair-danger:not(:disabled):not(.disabled):active:focus {
    background-color: var(--rouge-f1);
    border-color: var(--rouge-f1);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--rouge-f1-50p);
}



.btn-vert,
.btn-vert.disabled, .btn-vert:disabled {
    background-color: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-outline-vert,
.btn-outline-vert.disabled, .btn-outline-vert:disabled,
.btn-clair-vert,
.btn-clair-vert.disabled, .btn-clair-vert:disabled,
.btn-blanc-vert,
.btn-blanc-vert.disabled, .btn-blanc-vert:disabled,
.btn-gris-vert,
.btn-gris-vert.disabled, .btn-gris-vert:disabled {
    color: var(--vert);
    fill: var(--vert);
    stroke: var(--vert);
}
.btn-outline-vert,
.btn-outline-vert.disabled, .btn-outline-vert:disabled {
    background-color: var(--blanc);
    border-color: var(--vert);
}
.btn-clair-vert,
.btn-clair-vert.disabled, .btn-clair-vert:disabled {
    background-color: var(--vert-c6);
    border-color: var(--vert-c6);
}
.btn-blanc-vert,
.btn-blanc-vert.disabled, .btn-blanc-vert:disabled {
    background-color: var(--blanc);
    border-color: var(--blanc);
}
.btn-gris-vert,
.btn-gris-vert.disabled, .btn-gris-vert:disabled {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}

.btn-vert:not(:disabled):not(.disabled):hover,
.btn-vert:not(:disabled):not(.disabled):focus,
.btn-outline-vert:not(:disabled):not(.disabled):hover,
.btn-outline-vert:not(:disabled):not(.disabled):focus,
.btn-clair-vert:not(:disabled):not(.disabled):hover,
.btn-clair-vert:not(:disabled):not(.disabled):focus {
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-vert:not(:disabled):not(.disabled):hover,
.btn-vert:not(:disabled):not(.disabled):focus,
.btn-outline-vert:not(:disabled):not(.disabled):hover,
.btn-outline-vert:not(:disabled):not(.disabled):focus {
    background-color: var(--vert-f1);
    border-color: var(--vert-f1);
}
.btn-clair-vert:not(:disabled):not(.disabled):hover,
.btn-clair-vert:not(:disabled):not(.disabled):focus {
    background-color: var(--vert);
    border-color: var(--vert);
}
.btn-blanc-vert:not(:disabled):not(.disabled):hover,
.btn-blanc-vert:not(:disabled):not(.disabled):focus,
.btn-gris-vert:not(:disabled):not(.disabled):hover,
.btn-gris-vert:not(:disabled):not(.disabled):focus {
    color: var(--vert-f1);
    fill: var(--vert-f1);
    stroke: var(--vert-f1);
}
.btn-blanc-vert:not(:disabled):not(.disabled):hover,
.btn-blanc-vert:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c5);
    border-color: var(--gris-c5);
}
.btn-gris-vert:not(:disabled):not(.disabled):hover,
.btn-gris-vert:not(:disabled):not(.disabled):focus {
    background-color: var(--gris-c3);
    border-color: var(--gris-c3);
}

.btn-vert:not(:disabled):not(.disabled):active,
.btn-vert:not(:disabled):not(.disabled):active:focus,
.btn-outline-vert:not(:disabled):not(.disabled):active,
.btn-outline-vert:not(:disabled):not(.disabled):active:focus,
.btn-blanc-vert:not(:disabled):not(.disabled):active,
.btn-blanc-vert:not(:disabled):not(.disabled):active:focus,
.btn-gris-vert:not(:disabled):not(.disabled):active,
.btn-gris-vert:not(:disabled):not(.disabled):active:focus {
    background-color: var(--vert-f2);
    border-color: var(--vert-f2);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--vert-f2-50p);
}
.btn-clair-vert:not(:disabled):not(.disabled):active,
.btn-clair-vert:not(:disabled):not(.disabled):active:focus {
    background-color: var(--vert-f1);
    border-color: var(--vert-f1);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--vert-f1-50p);
}



.btn-mauve,
.btn-mauve.disabled, .btn-mauve:disabled {
    background-color: var(--violet-c2);
    border-color: var(--violet-c2);
    color: var(--violet-c6);
    fill: var(--violet-c6);
    stroke: var(--violet-c6);
}
.btn-mauve:not(:disabled):not(.disabled):hover,
.btn-mauve:not(:disabled):not(.disabled):focus {
    background-color: var(--violet-c3);
    border-color: var(--violet-c3);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
}
.btn-mauve:not(:disabled):not(.disabled):active,
.btn-mauve:not(:disabled):not(.disabled):active:focus {
    background-color: var(--violet);
    border-color: var(--violet);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--violet-50p);
}



.btn-salmon,
.btn-salmon.disabled, .btn-salmon:disabled {
    background-color: var(--salmon);
    border-color: var(--salmon);
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
}
.btn-salmon:not(:disabled):not(.disabled):hover,
.btn-salmon:not(:disabled):not(.disabled):focus{
    background-color: var(--salmon-c2);
    border-color: var(--salmon-c2);
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
}
.btn-salmon:not(:disabled):not(.disabled):active,
.btn-salmon:not(:disabled):not(.disabled):active:focus {
    background-color: var(--salmon-c4);
    border-color: var(--salmon-c4);
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
    box-shadow: 0 0 0 3px var(--salmon-c4-50p);
}



.btn-pink,
.btn-pink.disabled, .btn-pink:disabled {
    background-color: var(--pink);
    border-color: var(--pink);
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
}
.btn-pink:not(:disabled):not(.disabled):hover,
.btn-pink:not(:disabled):not(.disabled):focus{
    background-color: var(--pink-f1);
    border-color: var(--pink-f1);
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
}
.btn-pink:not(:disabled):not(.disabled):active,
.btn-pink:not(:disabled):not(.disabled):active:focus {
    background-color: var(--pink-f2);
    border-color: var(--pink-f2);
    color: var(--violet-f1);
    fill: var(--violet-f1);
    stroke: var(--violet-f1);
    box-shadow: 0 0 0 3px var(--pink-f2-50p);
}



/* BOUTON D'ACTIVATION */
.btn-activation .btn-activation__icon-parent {
    display: flex;
    border: solid 2px;
    border-radius: 50%;
    transition: all .2s ease;
}
.btn-activation .btn-activation__icon-parent svg {
    min-width: 16px;
    width: 16px;
    transition: all .2s ease;
}
.btn-activation .btn-activation__text {
    position: relative;
}
.btn-activation .btn-activation__text .btn-activation__text-off,
.btn-activation .btn-activation__text .btn-activation__text-on {
    width: 100%;
    text-align: center;
}
.btn-activation .btn-activation__text .btn-activation__text-on {
    position: absolute;
    left: 0;
}

.btn-activation,
.btn-activation.disabled,
.btn-activation:disabled,
.btn-activation:not(:disabled):not(.disabled):focus,
.btn-activation:not(:disabled):not(.disabled):hover:focus {
    background-color: var(--rouge-c6);
    border-color: var(--rouge-c6);
    color: var(--rouge);
}
.btn-activation .btn-activation__icon-parent,
.btn-activation.disabled .btn-activation__icon-parent,
.btn-activation:disabled .btn-activation__icon-parent,
.btn-activation:not(:disabled):not(.disabled):focus .btn-activation__icon-parent,
.btn-activation:not(:disabled):not(.disabled):hover:focus .btn-activation__icon-parent {
    border-color: var(--rouge);
    background-color: transparent;
}
.btn-activation .btn-activation__icon-parent svg,
.btn-activation.disabled .btn-activation__icon-parent svg,
.btn-activation:disabled .btn-activation__icon-parent svg,
.btn-activation:not(:disabled):not(.disabled):focus .btn-activation__icon-parent svg,
.btn-activation:not(:disabled):not(.disabled):hover:focus .btn-activation__icon-parent svg {
    fill: transparent;
}
.btn-activation .btn-activation__text .btn-activation__text-off,
.btn-activation.disabled .btn-activation__text .btn-activation__text-off,
.btn-activation:disabled .btn-activation__text .btn-activation__text-off,
.btn-activation:not(:disabled):not(.disabled):focus .btn-activation__text .btn-activation__text-off,
.btn-activation:not(:disabled):not(.disabled):hover:focus .btn-activation__text .btn-activation__text-off {
    opacity: 1;
}
.btn-activation .btn-activation__text .btn-activation__text-on,
.btn-activation.disabled .btn-activation__text .btn-activation__text-on,
.btn-activation:disabled .btn-activation__text .btn-activation__text-on,
.btn-activation:not(:disabled):not(.disabled):focus .btn-activation__text .btn-activation__text-on,
.btn-activation:not(:disabled):not(.disabled):hover:focus .btn-activation__text .btn-activation__text-on {
    opacity: 0;
}

.btn-activation:not(:disabled):not(.disabled):hover {
    background-color: var(--vert-c6);
    border-color: var(--vert-c6);
    color: var(--vert);
}
.btn-activation:not(:disabled):not(.disabled):hover .btn-activation__icon-parent {
    border-color: var(--vert);
    background-color: var(--vert);
}
.btn-activation:not(:disabled):not(.disabled):hover .btn-activation__icon-parent svg {
    fill: var(--blanc);
}

.btn-activation:not(:disabled):not(.disabled):active,
.btn-activation:not(:disabled):not(.disabled):active:focus {
    background-color: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
    box-shadow: 0 0 0 3px var(--vert-50p);
}
.btn-activation:not(:disabled):not(.disabled):active .btn-activation__icon-parent,
.btn-activation:not(:disabled):not(.disabled):active:focus .btn-activation__icon-parent {
    border-color: var(--blanc);
    background-color: var(--blanc);
}
.btn-activation:not(:disabled):not(.disabled):active .btn-activation__icon-parent svg,
.btn-activation:not(:disabled):not(.disabled):active:focus .btn-activation__icon-parent svg {
    fill: var(--vert);
}

.btn-activation:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-off,
.btn-activation:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-off,
.btn-activation:not(:disabled):not(.disabled):active:focus .btn-activation__text .btn-activation__text-off {
    opacity: 0;
}
.btn-activation:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-on,
.btn-activation:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-on,
.btn-activation:not(:disabled):not(.disabled):active:focus .btn-activation__text .btn-activation__text-on {
    opacity: 1;
}



.btn-activation--on,
.btn-activation--on.disabled,
.btn-activation--on:disabled,
.btn-activation--on:not(:disabled):not(.disabled):focus,
.btn-activation--on:not(:disabled):not(.disabled):hover:focus {
    background-color: var(--vert-c6);
    border-color: var(--vert-c6);
    color: var(--vert);
}
.btn-activation--on .btn-activation__icon-parent,
.btn-activation--on.disabled .btn-activation__icon-parent,
.btn-activation--on:disabled .btn-activation__icon-parent,
.btn-activation--on:not(:disabled):not(.disabled):focus .btn-activation__icon-parent,
.btn-activation--on:not(:disabled):not(.disabled):hover:focus .btn-activation__icon-parent {
    border-color: var(--vert);
    background-color: var(--vert);
}
.btn-activation--on .btn-activation__icon-parent svg,
.btn-activation--on.disabled .btn-activation__icon-parent svg,
.btn-activation--on:disabled .btn-activation__icon-parent svg,
.btn-activation--on:not(:disabled):not(.disabled):focus .btn-activation__icon-parent svg,
.btn-activation--on:not(:disabled):not(.disabled):hover:focus .btn-activation__icon-parent svg {
    fill: var(--blanc);
}
.btn-activation--on .btn-activation__text .btn-activation__text-off,
.btn-activation--on.disabled .btn-activation__text .btn-activation__text-off,
.btn-activation--on:disabled .btn-activation__text .btn-activation__text-off,
.btn-activation--on:not(:disabled):not(.disabled):focus .btn-activation__text .btn-activation__text-off,
.btn-activation--on:not(:disabled):not(.disabled):hover:focus .btn-activation__text .btn-activation__text-off {
    opacity: 0;
}
.btn-activation--on .btn-activation__text .btn-activation__text-on,
.btn-activation--on.disabled .btn-activation__text .btn-activation__text-on,
.btn-activation--on:disabled .btn-activation__text .btn-activation__text-on,
.btn-activation--on:not(:disabled):not(.disabled):focus .btn-activation__text .btn-activation__text-on,
.btn-activation--on:not(:disabled):not(.disabled):hover:focus .btn-activation__text .btn-activation__text-on {
    opacity: 1;
}

.btn-activation--on:not(:disabled):not(.disabled):hover {
    background-color: var(--rouge-c6);
    border-color: var(--rouge-c6);
    color: var(--rouge);
}
.btn-activation--on:not(:disabled):not(.disabled):hover .btn-activation__icon-parent {
    border-color: var(--rouge);
    background-color: transparent;
}
.btn-activation--on:not(:disabled):not(.disabled):hover .btn-activation__icon-parent svg {
    fill: transparent;
}

.btn-activation--on:not(:disabled):not(.disabled):active,
.btn-activation--on:not(:disabled):not(.disabled):active:focus {
    background-color: var(--rouge);
    border-color: var(--rouge);
    color: var(--blanc);
    box-shadow: 0 0 0 3px var(--rouge-50p);
}
.btn-activation--on:not(:disabled):not(.disabled):active .btn-activation__icon-parent,
.btn-activation--on:not(:disabled):not(.disabled):active:focus .btn-activation__icon-parent {
    border-color: var(--blanc);
    background-color: transparent;
}
.btn-activation--on:not(:disabled):not(.disabled):active .btn-activation__icon-parent svg,
.btn-activation--on:not(:disabled):not(.disabled):active:focus .btn-activation__icon-parent svg {
    fill: transparent;
}

.btn-activation--on:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-off,
.btn-activation--on:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-off,
.btn-activation--on:not(:disabled):not(.disabled):active:focus .btn-activation__text .btn-activation__text-off {
    opacity: 1;
}
.btn-activation--on:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-on,
.btn-activation--on:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-on,
.btn-activation--on:not(:disabled):not(.disabled):active:focus .btn-activation__text .btn-activation__text-on {
    opacity: 0;
}


/*

.btn-activation,
.btn-activation.disabled, .btn-activation:disabled,
.btn-activation:not(:disabled):not(.disabled):hover:focus {
    background-color: var(--rouge-c6);
    border-color: var(--rouge-c6);
    color: var(--rouge);
    fill: var(--rouge);
    stroke: var(--rouge);
}
.btn-activation .btn-activation__text .btn-activation__text-off,
.btn-activation:hover:focus .btn-activation__text .btn-activation__text-off {
    opacity: 1;
}
.btn-activation .btn-activation__text .btn-activation__text-on,
.btn-activation:hover:focus .btn-activation__text .btn-activation__text-on {
    opacity: 0;
}
.btn-activation:not(:disabled):not(.disabled):hover {
    background-color: var(--vert-c6);
    border-color: var(--vert-c6);
    color: var(--vert);
    fill: var(--vert);
    stroke: var(--vert);
}
.btn-activation:not(:disabled):not(.disabled):active,
.btn-activation:not(:disabled):not(.disabled):active:focus {
    background-color: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--vert-50p);
}
.btn-activation:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-off,
.btn-activation:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-off {
    opacity: 0;
}
.btn-activation:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-on,
.btn-activation:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-on {
    opacity: 1;
}



.btn-activation--on,
.btn-activation--on.disabled, .btn-activation--on:disabled,
.btn-activation--on:not(:disabled):not(.disabled):hover:focus {
    background-color: var(--vert-c6);
    border-color: var(--vert-c6);
    color: var(--vert);
    fill: var(--vert);
    stroke: var(--vert);
}
.btn-activation--on .btn-activation__text .btn-activation__text-off {
    opacity: 0;
}
.btn-activation--on .btn-activation__text .btn-activation__text-on {
    opacity: 1;
}
.btn-activation--on:not(:disabled):not(.disabled):hover {
    background-color: var(--rouge-c6);
    border-color: var(--rouge-c6);
    color: var(--rouge);
    fill: var(--rouge);
    stroke: var(--rouge);
}
.btn-activation--on:not(:disabled):not(.disabled):active,
.btn-activation--on:not(:disabled):not(.disabled):active:focus {
    background-color: var(--rouge);
    border-color: var(--rouge);
    color: var(--blanc);
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--rouge-50p);
}
.btn-activation--on:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-off,
.btn-activation--on:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-off {
    opacity: 1;
}
.btn-activation--on:not(:disabled):not(.disabled):hover .btn-activation__text .btn-activation__text-on,
.btn-activation--on:not(:disabled):not(.disabled):active .btn-activation__text .btn-activation__text-on {
    opacity: 0;
}*/



/* Bouton remplacé par "btn-blanc-secondary" mais gardé pour le moment en cas d'utilisation sur l'admin en ligne */
.btn-blanc {
    background-color: var(--blanc) !important;
    border-color: var(--blanc) !important;
    color: var(--violet) !important;
    fill: var(--violet);
    stroke: var(--violet);
}
.btn-blanc:hover, .btn-blanc:focus {
    background-color: var(--gris-c5) !important;
    border-color: var(--gris-c5) !important;
    color: var(--violet) !important;
    fill: var(--violet);
    stroke: var(--violet);
}
.btn-blanc:active {
    background-color: var(--gris) !important;
    border-color: var(--gris) !important;
    color: var(--blanc) !important;
    fill: var(--blanc);
    stroke: var(--blanc);
    box-shadow: 0 0 0 3px var(--gris-50p) !important;
}


/* BOUTON SWITCH */
.btn-switch .form-check {
    padding: 0;
}
.btn-switch input {
    display: none;
}
.btn-switch label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
    color: var(--gris);
    user-select: none;
    --transition-duree-btn-switch: 0.2s;
}
.btn-switch label::before {
    content: '';
    position: static;
    width: 36px;
    height: 24px;
    border-radius: 12px;
    background-color: var(--gris-c5);
    transition: all var(--transition-duree-btn-switch) ease-in-out;
}
.btn-switch input:checked ~ label::before {
    background-color: var(--bleu-c5);
}
.btn-switch label::after {
    content: '';
    position: absolute;
    left: 3px;
    width: 18px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--gris-c3);
    transform: translateX(0);
    transition: all var(--transition-duree-btn-switch) ease-in-out;
}
.btn-switch input:checked ~ label::after {
    background-color: var(--bleu);
    transform: translateX(12px);
}



/* BOUTONS IMPORTATION FICHIERS */
.div-bouton-importer .custom-file {
    height: 100%;
}
.form-importation-fichiers .form-group {
    display: none;
}



/* PILLS SELECTOR */
.pills-selector {
    max-width: 100%;
    user-select: none;
}
.pills-selector .form-check {
    padding: 0;
}
.pills-selector input {
    display: none;
}
.pills-selector label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 99px;
    padding: 8px 10px;
    margin: 0;
    font-weight: 400;
    color: var(--gris);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all var(--transition-duree-pills-selector) ease-in-out;
    --transition-duree-pills-selector: 0.2s
}
.pills-selector input:checked ~ label {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
    color: var(--bleu);
}
.pills-selector label::before {
    content: '';
    position: static;
    min-width: 16px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: transparent;
    border: solid 2px var(--gris-c7);
    outline: solid 1px var(--gris-c3);
    transition: all var(--transition-duree-pills-selector) ease-in-out;
}
.pills-selector input:checked ~ label::before {
    background-color: var(--bleu);
    border: solid 2px var(--bleu-c6);
    outline: solid 1px var(--bleu);
}






.bg-secondary {
    background-color: var(--violet)!important;
}

.btn-carre {
    padding: 10px;
}

/* LIENS */
.btn-link:focus {
    box-shadow: none;
    text-decoration: none;
}

.text.text-danger {
    color: var(--rouge);
}
.text.text-danger svg {
    width: 22px;
    fill: var(--rouge);
}



/* PLUSIEURS BOUTONS */
.div-groupe-boutons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}



/* ----- LES GROUPES DE BOUTONS ----- */
/* ----- ... CLASSIQUE ----- */
.btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 4px;
    background-color: var(--gris-c4);
}
.btn-group .btn {
    border-radius: 4px !important;
    background: none;
    padding: 8px 12px;
    min-width: 40px;
    border-color: transparent;
    color: var(--gris);
}
.btn-group .btn.disabled, .btn-group .btn:disabled {
    filter: none;
    text-decoration: line-through;
    color: var(--gris-c2);
}
.btn-group .btn svg {
    height: 22.5px;
    width: auto;
    fill: var(--gris);
}
.btn-group .btn svg .st0 {
    fill: var(--blanc);
}
.btn-group .btn:not(:disabled):not(.disabled):hover,
.btn-group .btn:not(:disabled):not(.disabled):focus {
    color: var(--gris);
    background-color: var(--gris-c6);
    box-shadow: none;
    border-color: transparent;
}
.btn-group .btn:not(:disabled):not(.disabled):active,
.btn-group .btn:not(:disabled):not(.disabled):active:focus {
    background-color: var(--violet) !important;
    color: var(--blanc) !important;
    box-shadow: 0 0 0 3px var(--violet-50p) !important;
    border-color: transparent;
}
.btn-group .btn:active svg {
    fill: var(--blanc);
}
.btn-group .btn:active svg .st0 {
    fill: var(--violet);
}

.btn-group .btn.selection,
.btn-group .btn.selection:not(:disabled):not(.disabled):focus,
.btn-group .btn.selection:not(:disabled):not(.disabled):active,
.btn-group .btn.selection:not(:disabled):not(.disabled):active:focus {
    background-color: var(--blanc);
    color: var(--violet);
}
.btn-group .btn.selection svg,
.btn-group .btn.selection:not(:disabled):not(.disabled):focus svg,
.btn-group .btn.selection:not(:disabled):not(.disabled):active svg,
.btn-group .btn.selection:not(:disabled):not(.disabled):active:focus svg {
    fill: var(--violet);
}
.btn-group .btn.selection svg .st0,
.btn-group .btn.selection:not(:disabled):not(.disabled):focus svg .st0,
.btn-group .btn.selection:not(:disabled):not(.disabled):active svg .st0,
.btn-group .btn.selection:not(:disabled):not(.disabled):active:focus svg .st0 {
    fill: var(--blanc);
}



.btn-group.btn-group-large .btn svg {
    height: 40px;
}



.btn-group.btn-group-border {
    background-color: var(--blanc);
    border: solid 2px var(--gris-c4);
}
.btn-group.btn-group-border .btn.disabled, .btn-group-border .btn:disabled {
    color: var(--gris-c4);
}
.btn-group.btn-group-border .btn.selection,
.btn-group.btn-group-border .btn.selection:not(:disabled):not(.disabled):focus,
.btn-group.btn-group-border .btn.selection:not(:disabled):not(.disabled):active,
.btn-group.btn-group-border .btn.selection:not(:disabled):not(.disabled):active:focus {
    background-color: var(--gris-c5);
}




/* ----- ... NAVIGATION ----- */
.div-nav-pills {
    display: flex;
}
.div-nav-pills > .nav-pills {
    width: 100%;
    padding: 4px;
    border-radius: 4px;
    background-color: var(--gris-c4);
}
.div-nav-pills > .nav-pills button:focus {
    outline: none;
}
.div-nav-pills > .nav-pills .nav-link {
    width: 100%;
    height: 100%;
    font-weight: 500;
    background-color: var(--gris-c4);
    color: var(--gris);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 8px;
    min-width: 40px;
    text-align: center;
}
.div-nav-pills > .nav-pills li {
    flex: 1;
}
.div-nav-pills > .nav-pills .nav-link.active {
    background-color: var(--blanc);
    color: var(--violet);;
}
.div-nav-pills > .nav-pills .nav-link:hover {
    background-color: var(--gris-c6);
}
.div-nav-pills > .nav-pills .nav-link:active {
    background-color: var(--violet) !important;
    border: none !important;
    color: var(--blanc) !important;
    box-shadow: 0 0 0 3px rgb(61 48 105 / 50%) !important;
}
.div-nav-pills > .nav-pills .nav-link.active:active {
    background-color: var(--blanc) !important;
    color: var(--violet) !important;
}

.ui-tooltip.ui-corner-all.ui-widget-shadow.ui-widget.ui-widget-content {
    display: none;
}





/* ----------
DROPDOWN MENU
---------- */
.div-dropdown .dropdown-menu {
    background-color: var(--blanc);
    border: none;
    box-shadow: 0 4px 6px var(--gris-c4);
    min-width: 150px;
    padding: 4px;
    margin-top: 4px;
    border-radius: 8px;
    overflow: hidden;
}
.div-dropdown .dropdown-menu .dropdown-item {
    color: var(--gris);
    fill: var(--gris);
    font-size: 1em;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}
.div-dropdown .dropdown-menu .dropdown-item:hover,
.div-dropdown .dropdown-menu .dropdown-item:focus {
    background-color: var(--gris-c6);
}
.div-dropdown .dropdown-menu .dropdown-item:active {
    background-color: var(--gris-c5);
}
.div-dropdown .dropdown-menu .dropdown-item svg {
    width: 20px;
}
.div-dropdown .dropdown-menu .dropdown-item.dropdown-item-danger {
    color: var(--rouge);
    fill: var(--rouge);
    font-weight: 500;
}
.div-dropdown .dropdown-menu .dropdown-item.dropdown-item-danger:active {
    background-color: var(--rouge);
    color: var(--blanc);
    fill: var(--blanc);
}
.div-dropdown .dropdown-menu .dropdown-item.disabled {
    color: var(--gris-c3);
    fill: var(--gris-c3);
}
.div-dropdown .dropdown-menu .dropdown-item .div-icone-texte {
    display: flex;
    align-items: center;
    gap: 8px;
}
.div-dropdown .dropdown-menu .dropdown-item .div-titre-texte h4 {
    color: var(--gris);
    font-size: 15px;
    margin: 0;
}
.div-dropdown .dropdown-menu .dropdown-item .div-titre-texte p {
    font-size: 12px;
    margin: 0;
}
.div-dropdown .dropdown-menu .dropdown-item .div-icone-texte p {
    flex: 1;
    margin: 0;
}
.div-dropdown .dropdown-menu .dropdown-divider {
    margin: 0;
    border-color: var(--gris-c5);
    margin: 4px 0;
}

.div-dropdown--purple .dropdown-menu {
    background-color: var(--violet-f2-50p);
    backdrop-filter: blur(3px);
    box-shadow: none;
}
.div-dropdown--purple .dropdown-menu .dropdown-item {
    color: var(--blanc);
    fill: var(--blanc);
}
.div-dropdown--purple .dropdown-menu .dropdown-item:hover,
.div-dropdown--purple .dropdown-menu .dropdown-item:focus {
    background-color: var(--violet-c1-50p);
}
.div-dropdown--purple .dropdown-menu .dropdown-item:active,
.div-dropdown--purple .dropdown-menu .dropdown-item.dropdown-item--active {
    background-color: var(--violet-c2-50p);
}
.div-dropdown .dropdown-menu .dropdown-divider {
    border-color: var(--violet-c1);
}




.fond-violet {
    background-color: var(--violet-c1);
    padding: 15px;
    text-align: center;
}

.fond-violet h2 {
    color: white;
    display: inline;
    font-size: 30px;
    font-weight: 300;
}

.fond-violet h3 {
    color: white;
    display: inline;
    font-size: 20px;
    font-weight: 300;
}

.fond-mauve {
    background-color: var(--gris-c5);
    padding: 15px;
    text-align: center;
}

.fond-mauve h3 {
    color: var(--violet);
    display: inline;
    font-size: 20px;
    font-weight: 300;
}

.fond-mauve h4 {
    font-size: 16px;
}



/* ----------
CROPER
---------- */
.cropit-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 250px;
    height: 250px;
}
.cropit-preview-product {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 425px;
    height: 240px;
}

.cropit-preview-image-container {
    cursor: move;
}

.cropit-preview-image-container img {
    width: initial;
    max-width: initial;
}

.image-size-label {
    margin-top: 10px;
}



/* ----------
SELECT 2
---------- */
#editeur .select2-container{
    display: block !important;
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 38px!important;
    border-radius: 0!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 38px!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px!important;
    width: 30px!important;
}



/* ----------
SELECTION RAPIDE
---------- */
.div-selection-rapide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.div-selection-rapide p {
    color: var(--gris);
    margin: 0;
}
.div-selection-rapide ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.div-selection-rapide ul li {
    color: var(--gris-c3);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.div-selection-rapide ul li.selection {
    background-color: var(--bleu-c6);
    color: var(--bleu);
}



/* ----------
LISTE DES VALEURS D'UN ATTRIBUT
---------- */
.div-liste-valeurs,
.div-liste-valeurs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.div-liste-valeurs li,
.div-liste-valeurs li {
    background-color: var(--gris-c5);
    padding: 4px 8px;
    border-radius: 99px;
    font-size: 12px;
    color: var(--gris);
}



/* ----------
COLOR PICKER
---------- */
.minicolors-theme-bootstrap .minicolors-swatch {
    z-index: 0;
}
.minicolors-theme-bootstrap .minicolors-swatch.minicolors-sprite.minicolors-input-swatch {
    height: 100%;
    width: 40px;
    top: 0;
    right: 0;
    border: 2px solid var(--gris-c4);
    cursor: pointer;
}



/* ----------
MESSAGE ASSISTANTS
---------- */
/* GENERALES */
.card-message-assistant {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 15px;
}
.card-message-assistant .image {
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.card-message-assistant .div-contenu {
    flex: 1;
    min-width: min(200px, 100%);
}
.card-message-assistant .div-contenu h5 {
    display: inline-block;
    margin: 0;
    font-weight: 600;
}
.card-message-assistant .div-contenu p {
    margin: 0;
}
.card-message-assistant .div-contenu a:not(.btn) {
    color: var(--bleu-royal);
    text-decoration: underline;
}
.card-message-assistant .div-contenu ul {
    margin: 0;
}

/* AIDE */
.card-message-assistant.card-message-assistant-aide {
    background-color: var(--bleu-c6);
}
.card-message-assistant.card-message-assistant-aide .image {
    background-color: var(--bleu);
}
.card-message-assistant.card-message-assistant-aide .div-contenu h5,
.card-message-assistant.card-message-assistant-aide .div-contenu p,
.card-message-assistant.card-message-assistant-aide .div-contenu li {
    color: var(--bleu);
}

/* ALERTE */
.card-message-assistant.card-message-assistant-alerte {
    background-color: var(--orange-c6);
}
.card-message-assistant.card-message-assistant-alerte .image {
    background-color: var(--orange);
}
.card-message-assistant.card-message-assistant-alerte .div-contenu h5,
.card-message-assistant.card-message-assistant-alerte .div-contenu p,
.card-message-assistant.card-message-assistant-alerte .div-contenu li {
    color: var(--orange);
}

/* SUCCES */
.card-message-assistant.card-message-assistant-succes {
    background-color: var(--vert-c6);
}
.card-message-assistant.card-message-assistant-succes .image {
    background-color: var(--vert);
}
.card-message-assistant.card-message-assistant-succes .div-contenu h5,
.card-message-assistant.card-message-assistant-succes .div-contenu p,
.card-message-assistant.card-message-assistant-succes .div-contenu li {
    color: var(--vert);
}

/* ERREUR */
.card-message-assistant.card-message-assistant-erreur {
    background-color: var(--rouge-c6);
}
.card-message-assistant.card-message-assistant-erreur .image {
    background-color: var(--rouge);
}
.card-message-assistant.card-message-assistant-erreur .div-contenu h5,
.card-message-assistant.card-message-assistant-erreur .div-contenu p,
.card-message-assistant.card-message-assistant-erreur .div-contenu li {
    color: var(--rouge);
}



/* ----------
NOTIFICATION ASSISTANTS
---------- */
/* GENERALES */
#toast-container .toast-message-assistant {
    background-image: none !important;
    padding: 15px;
    box-shadow: 0 2px 6px var(--gris-c4);
    border-radius: 10px;
}
#toast-container .toast-message-assistant:hover {
    box-shadow: 0 2px 10px var(--gris-c3);
}
.toast-message-assistant .toast-close-button svg {
    width: 16px;
}
.toast-message-assistant .toast-message {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}
.toast-message-assistant .toast-message .image {
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.toast-message-assistant .toast-message .div-contenu {
    flex: 1;
    min-width: min(200px, 100%);
}
.toast-message-assistant .toast-message .div-contenu h5 {
    display: inline-block;
    margin: 0;
    font-weight: 600;
}
.toast-message-assistant .toast-message .div-contenu p {
    margin: 0;
}

/* AIDE */
.toast-message-assistant.toast-message-assistant-aide {
    background-color: var(--bleu-c6);
    color: var(--bleu);
}
.toast-message-assistant.toast-message-assistant-aide .toast-close-button svg {
    fill: var(--bleu);
}
.toast-message-assistant.toast-message-assistant-aide .image {
    background-color: var(--bleu);
}
.toast-message-assistant.toast-message-assistant-aide .div-contenu h5,
.toast-message-assistant.toast-message-assistant-aide .div-contenu p,
.toast-message-assistant.toast-message-assistant-aide .toast-close-button {
    color: var(--bleu);
}
.toast-message-assistant.toast-message-assistant-aide .toast-progress {
    background-color: var(--bleu-c4);
    opacity: 1;
}

/* ALERTE */
.toast-message-assistant.toast-message-assistant-alerte {
    background-color: var(--orange-c6);
    color: var(--bleu);
}
.toast-message-assistant.toast-message-assistant-alerte .toast-close-button svg {
    fill: var(--orange);
}
.toast-message-assistant.toast-message-assistant-alerte .image {
    background-color: var(--orange);
}
.toast-message-assistant.toast-message-assistant-alerte .div-contenu h5,
.toast-message-assistant.toast-message-assistant-alerte .div-contenu p,
.toast-message-assistant.toast-message-assistant-alerte .toast-close-button {
    color: var(--orange);
}
.toast-message-assistant.toast-message-assistant-alerte .toast-progress {
    background-color: var(--orange-c4);
    opacity: 1;
}

/* SUCCES */
.toast-message-assistant.toast-message-assistant-succes {
    background-color: var(--vert-c6);
    color: var(--vert);
}
.toast-message-assistant.toast-message-assistant-succes .toast-close-button svg {
    fill: var(--vert);
}
.toast-message-assistant.toast-message-assistant-succes .image {
    background-color: var(--vert);
}
.toast-message-assistant.toast-message-assistant-succes .div-contenu h5,
.toast-message-assistant.toast-message-assistant-succes .div-contenu p,
.toast-message-assistant.toast-message-assistant-succes .toast-close-button {
    color: var(--vert);
}
.toast-message-assistant.toast-message-assistant-succes .toast-progress {
    background-color: var(--vert-c4);
    opacity: 1;
}

/* ERREUR */
.toast-message-assistant.toast-message-assistant-erreur {
    background-color: var(--rouge-c6);
    color: var(--rouge);
}
.toast-message-assistant.toast-message-assistant-erreur .toast-close-button svg {
    fill: var(--rouge);
}
.toast-message-assistant.toast-message-assistant-erreur .image {
    background-color: var(--rouge);
}
.toast-message-assistant.toast-message-assistant-erreur .div-contenu h5,
.toast-message-assistant.toast-message-assistant-erreur .div-contenu p,
.toast-message-assistant.toast-message-assistant-erreur .toast-close-button {
    color: var(--rouge);
}
.toast-message-assistant.toast-message-assistant-erreur .toast-progress {
    background-color: var(--rouge-c4);
    opacity: 1;
}



/* ----------
TITRES CARD ADMIN
---------- */
.card-titre-1 {
    font-size: 1.5em;
}
.card-titre-2 {
    font-size: 1.1em;
    text-transform: uppercase;
}



/* ----------
BADGES
---------- */
.badge-light {
    background-color: #a3a5a7;
}



/* ----------
TABLEAUX
---------- */
.div-tableau-actions {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: solid 1px var(--gris-c5);
}
.div-tableau-actions .div-input-search {
    min-width: min(250px, 100%);
}
.div-tableau-actions .div-selection-rapide,
.div-tableau-actions .div-groupe-boutons {
    flex-shrink: 2;
}
.div-tableau-actions .div-selection-rapide {
    flex-grow: 1;
}
.div-tableau-actions .div-selection-rapide ul {
    flex-shrink: 3;
}


.div-tableau-parent {
    overflow: auto;
}
.div-tableau-parent .table {
    color: var(--gris);
    margin: 0;
}
.div-tableau-parent .table thead {
    background-color: var(--gris-c6);
    min-width: 100%;
}

.div-tableau-parent .table thead .th-trieur span {
    user-select: none;
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}
.div-tableau-parent .table thead .th-trieur span::before,
.div-tableau-parent .table thead .th-trieur span::after {
    content: '';
    position: absolute;
    right: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    transform: translateY(-50%);
}
.div-tableau-parent .table thead .th-trieur span::before {
    top: calc(50% - 4px);
    border-bottom: 5px solid var(--gris-c3);
}
.div-tableau-parent .table thead .th-trieur span::after {
    top: calc(50% + 4px);
    border-top: 5px solid var(--gris-c3);
}
.div-tableau-parent .table thead .th-trieur.ordre-asc span::before {
    border-bottom-color: var(--gris);
}
.div-tableau-parent .table thead .th-trieur.ordre-desc span::after {
    border-top-color: var(--gris);
}

.div-tableau-parent .table tbody tr {
    transition: all 0.2s ease-in-out;
}
.div-tableau-parent .table tbody tr {
    border-top: solid 1px var(--gris-c5);
}
.div-tableau-parent .table tbody tr.tr-hidden {
    display: none;
}

.div-tableau-parent .table.table-clickable tbody tr:not(.disabled) {
    cursor: pointer;
}

.div-tableau-parent .table.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--blanc);
}
.div-tableau-parent .table.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--gris-c7);
}
.div-tableau-parent .table.table-striped tbody tr.selection {
    background-color: var(--bleu-c6);
}
.div-tableau-parent .table.table-striped tbody tr:not(:hover).selection .btn-clair-primary {
    background: var(--blanc);
    color: var(--bleu);
    fill: var(--bleu);
}

.div-tableau-parent .table.table-hover tbody tr:hover {
    color: inherit;
}
.div-tableau-parent .table.table-hover tbody tr:not(.disabled):hover {
    color: var(--violet);
    background-color: var(--violet-c8);
}
.div-tableau-parent .table.table-hover tbody tr:not(.disabled):hover td:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--violet);
}
.div-tableau-parent .table thead tr th,
.div-tableau-parent .table tbody tr td {
    white-space: nowrap;
}
.div-tableau-parent .table thead tr th {
    color: var(--gris);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 15px 10px 0;
    vertical-align: middle;
    border: none;
}
.div-tableau-parent .table thead tr th:first-child {
    padding-left: 15px;
}
.div-tableau-parent .table tbody tr td {
    position: relative;
    padding: 15px 15px 15px 0;
    vertical-align: middle;
    border: none;
}
.div-tableau-parent .table tbody tr td:first-child {
    padding-left: 15px;
}



/* ICONES */
.div-tableau-parent .table tbody tr td .table__tr-icon {
    width: 20px;
    fill: var(--gris);
}



/* INFO BULLES */
.div-bloc-options .table thead tr th .div-tooltip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.div-bloc-options .table thead tr th .div-tooltip svg {
    fill: var(--gris);
    width: 20px;
    aspect-ratio: 1 / 1;
}


/* TEXTES */
/* Classique */
.div-tableau-parent .table tbody tr td p {
    margin: 0;
}

/* Titre et sous titres */
.div-tableau-parent .table tbody tr td .div-designation {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.div-tableau-parent .table tbody tr td .div-designation:not(.div-designation--wrappable) .designation-titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.div-tableau-parent .table tbody tr td .div-designation .designation-soustitre {
    color: var(--gris-c2);
    font-size: 12px;
}

/* Texte réduit */
.div-tableau-parent .table tbody tr td .div-texte-reduit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}


/* STATUTS */
.div-tableau-parent .table tbody tr td .div-statut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.div-tableau-parent .table tbody tr td .div-statut svg {
    width: 20px;
    min-width: 20px;
    aspect-ratio: 1 / 1;
}


/* IMAGES */
.div-tableau-parent .table .div-image {
    border-radius: 8px;
    border: solid 1px var(--gris-c5);
    overflow: hidden;
    background-image: url('../../assets/images/app/design/fond/fond-transparent.jpg');
    background-position: center;
    background-size: 8px;
    width: 100%;
}
.div-tableau-parent .table .div-image.image-moyenne {
    width: 60px;
}
.div-tableau-parent .table .div-image.image-large {
    width: 80px;
}
.div-tableau-parent .table .div-image img {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
}

/* GROUPE D'IMAGES */
/* 3 images */
.div-tableau-parent .table .div-groupe-3-images {
    display: inline-flex;
    align-items: center;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent {
    position: relative;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(1) {
    z-index: 2;
    width: 60px;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(2) {
    z-index: 1;
    width: 50px;
    margin-left: -25px;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(3) {
    z-index: 0;
    width: 40px;
    margin-left: -25px;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(2) .div-image::before,
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(3) .div-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blanc);
    border-radius: 8px;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(2) .div-image::before {
    opacity: 30%;
}
.div-tableau-parent .table .div-groupe-3-images .div-image-parent:nth-child(3) .div-image::before {
    opacity: 60%;
}

/* 5 images */
.div-tableau-parent .table .div-groupe-5-images {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.div-tableau-parent .table .div-groupe-5-images .div-image-parent {
    position: relative;
    width: 60px;
}
.div-tableau-parent .table .div-groupe-5-images .div-image-parent:nth-child(4) {
    width: 52px;
    opacity: 60%;
}
.div-tableau-parent .table .div-groupe-5-images .div-image-parent:nth-child(5) {
    width: 44px;
    opacity: 30%;
}
.div-tableau-parent .table .div-groupe-5-images .div-image-parent .div-image {
    aspect-ratio: 1 / 1;
}


/* GROUPES DE BOUTONS */
.div-tableau-parent .table tbody tr td .div-groupe-boutons {
    justify-content: flex-end;
    text-wrap: nowrap;
}
.div-tableau-parent .table tbody tr td .div-groupe-boutons:not(.div-groupe-boutons--wrappable) {
    flex-wrap: nowrap;
}
.div-tableau-parent .table tbody tr td .div-groupe-boutons .indicateur-liens {
    flex: 1;
}


/* LIGNE DRAGGABLE */
.div-tableau-parent .table tbody tr.ui-sortable-helper {
    width: 1078px;
    position: absolute;
    z-index: 1;
}
/*.div-tableau-parent .table tbody tr.ui-sortable-helper td:nth-child(2) {
    width: 30%;
    min-width: 200px;
}
.div-tableau-parent .table tbody tr.ui-sortable-helper td:nth-child(3) {
    width: 70%;
    min-width: 400px;
}*/
.div-tableau-parent .table tbody tr.ui-sortable-helper td:nth-child(2) {
    width: 30%;
    min-width: 200px;
}
.div-tableau-parent .table tbody tr.ui-sortable-helper td:nth-child(3) {
    width: 55%;
    min-width: 400px;
}
.div-tableau-parent .table tbody tr.ui-sortable-helper td:nth-child(4) {
    width: 15%;
    min-width: 150px;
}












#sortable .card .ui-sortable-handle:hover {
    cursor: move;
}

.fantom {
    border: 1px dashed #007bff;
    height: 50px;
}
.card-fantom {
    border: dashed 1px var(--bleu);
    background-color: var(--bleu-c6);
    border-radius: 8px;
    margin: 0;
    color: var(--bleu);
    padding: 12px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.card-fantom::before {
    content: "Déposez l'élément";
}
.tr-fantom {
    border: dashed 1px var(--bleu);
    background-color: var(--bleu-c6);
    width: 100%;
}


.header-subtitle a {
    color: #ff7149;
}

h1{
    color: var(--violet);
    font-size: 40px;
    font-weight: 300;
}


.card.bg-warning h3, .card.bg-secondary h3{
    color: white;
}

a .card:hover{
    -webkit-box-shadow: 0 2px 4px rgba(126, 142, 177, .75);
    -moz-box-shadow: 0 2px 4px rgba(126, 142, 177, .75);
    box-shadow: 0 2px 4px rgba(126, 142, 177, .75);
}









/* ----- LES EN-TETES DE L'ADMIN ----- */
/*#liste-pages .div-header {
    position: relative;
}
#liste-pages .div-header .div-arriere-plan {
    background-color: #9285C0;
}
#liste-pages .div-header .div-arriere-plan p {
    color: #A69AD1;
    font-size: 224px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: clip;
    overflow: hidden;
}

#liste-pages .div-header .div-premier-plan {
    position: absolute;
    top: 0;
}
#liste-pages .div-header .div-premier-plan .div-nav {
    display: flex;
    gap: 8px;
}
#liste-pages .div-header .div-premier-plan .div-nav .div-icone {
    width: 24px;
    height: 24px;
    background-color: white;
}
#liste-pages .div-header .div-premier-plan .div-nav .div-icone svg {
    fill: var(--gris);
}
#liste-pages .div-header .div-premier-plan .div-nav .div-fil-ariane {

}
#liste-pages .div-header .div-premier-plan .div-titre h1 {
    font-weight: 700;
    font-size: 48px;
}
#liste-pages .div-header .div-premier-plan .div-titre h1 small {
    display: block;
    font-weight: 500;
    font-size: 0.5em;
}*/



/* ----- LES MODALS ----- */
/*
.modal {
    overflow: auto;
}
.modal-content {
    border-radius: 8px;
}
.modal-header {
    background: var(--violet);
    border-bottom: 3px solid var(--bleu);
}
.modal-title {
    color: white;
}
.modal-header .close {
    color: white;
    opacity: 1;
}

.modal-body {
    background: rgb(248, 248, 248);
}

.modal-body .entete-portion {
    background: rgb(232, 232, 232);
    padding: 10px;
    text-align: center;
}

.modal-body .entete-portion:not(:first-of-type) {
    border-top: 3px solid white;
}

.modal-body .entete-portion .titre-portion {
    color: var(--violet);
    font-weight: 300;
}

.modal-body .cadre-blanc {
    padding: 20px!important;
}
*/


.modal {
    background-color: rgba(57,54,62,0.5);
}
.modal-backdrop {
    opacity: 0 !important;
}
.modal .modal-dialog {
    height: 100vh;
    margin: auto;
    padding: 1.75rem 1rem;
}
.modal .modal-dialog > form {
    height: 100%;
}
.modal .modal-content {
    border-radius: 15px;
    color: var(--gris);
    max-height: 100%;
    overflow: hidden;
}
.modal .modal-header {
    padding: 24px 24px 15px;
    border: none;
    background-color: var(--violet);
}
.modal .modal-header h5 {
    font-size: 24px;
    color: var(--blanc);
    margin: 0;
}
.modal .modal-header p {
    color: var(--violet-c6);
    margin: 0;
}
.modal .modal-header .bouton-fermer {
    background: var(--violet-c3);
    border-color: var(--violet-c3);
    fill: var(--violet-c6);
    aspect-ratio: 1 / 1;
    width: 38px;
    padding: 6px;
    border-radius: 50%;
}
.modal .modal-header .bouton-fermer:hover,
.modal .modal-header .bouton-fermer:focus {
    background: var(--violet-c5);
    border-color: var(--violet-c5);
    fill: var(--blanc);
}
.modal .modal-header .bouton-fermer:active,
.modal .modal-header .bouton-fermer:active:focus {
    background: var(--blanc);
    border-color: var(--blanc);
    fill: var(--violet-c3);
    box-shadow: 0 0 0 3px var(--blanc-50p);
}

.modal .modal-body {
    padding: 15px 24px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal .modal-footer {
    padding: 15px 24px 24px;
    border-top: 1px solid var(--gris-c5);
}
.modal .modal-footer .div-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.modal .modal-footer > * {
    margin: 0;
}



/* ----- LES ETAPES DE CREATION ----- */
.etape-index {
    background: var(--violet);
    padding: 10px 20px;
    width: fit-content;
    border-radius: 10px;
}
@media (max-width: 767px) {
    .etape-index {
        margin-bottom: 25px;
        width: fit-content;
    }
}

@media (min-width: 768px) {
    .etape-index {
        margin-left: -100px;
    }
    .etape-index.last {
        margin-left: -50px;
    }
    .etape-image {
        margin-top: -15%;
        margin-bottom: -15%;
        margin-right: -25%;
        float: right;
    }
}
.etape-index h4 {
    color: var(--blanc);
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 0;
}

/*
@media (max-width: 991.98px) {
    .main {
        width: inherit;
        min-width: inherit;
    }
}*/

#code_promo_dateLimite {
    gap: 8px;
}













/*
-----------------------------------------------
------------------ GENERALES ------------------
-----------------------------------------------
*/
/* ------------
MODALES
------------ */
/* BIENVENUE */
#welcomeWall .modal-content {
    background-color: var(--bleu-c6);
}
#welcomeWall .modal-content p {
    font-weight: 400;
}
#welcomeWall .modal-content .tab-pane {
    padding-bottom: 30px !important;
}
#welcomeWall h2 {
    color: var(--gris);
    text-align: center;
}
#welcomeWall .grilleCartes > div {
    border-radius: 10px;
}
#welcomeWall .grilleCartes > div > div:nth-child(1) {
    border-radius: 10px 10px 0px 0px;
    background-color: white;
    padding: 30px;
}
#welcomeWall .grilleCartes > div > div:nth-child(2) {
    background: var(--bleu-c5);
    border-radius: 0px 0px 10px 10px;
}
#welcomeWall .grilleImgTxt img {
    border-radius: 10px;
}
#welcomeWall .grilleImgTxt > div:nth-child(2)>div {
    background-color: var(--bleu-c5);
    padding: 15px;
    border-radius: 10px;
}
#welcomeWall h3 {
    color: var(--gris);
}

/* Puces */
#welcomeWall .nav {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
}
#welcomeWall .nav .nav-link {
    margin: 0px;
}
#welcomeWall .nav .nav-item,
#welcomeWall .nav .nav-link {
    flex-grow: 0;
}
#welcomeWall .nav {
    margin-bottom: 20px;
}
#welcomeWall .nav:before {
    display: none;
}
#welcomeWall .nav .nav-link {
    height: 20px;
}
#welcomeWall .nav .nav-link:before {
    display: none;
}
#welcomeWall .nav .nav-link:after {
    width: 20px;
    height: 20px;
    top: 0px;
    z-index: 1;
}
#welcomeWall .nav .nav-link.active:after {
    background-color: var(--bleu) !important;
}
#welcomeWall .nav .nav-link.inactive:after {
    background-color: var(--gris-c4);
}
#welcomeWall .nav .nav-link.done:after {
    background-color: var(--bleu-c5);
}

/* Footer */
#welcomeWall .modal-footer {
    display: block;
    position: sticky;
    z-index: 1;
    bottom: 0;
    background-color: var(--bleu-c6);
    border-color: var(--bleu-c4);
    width: 100%;
}
#welcomeWall .modal-footer .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

/* Wizard */
.wizard {
    background: none!important;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
}
.wizard .tab-pane {
    padding-bottom: 100px !important;
}
.wizard .cadre-blanc {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 10px;
    border: 5px solid var(--blanc);
}
.wizard .cadre-blanc p {
    margin-bottom: 0;
}
.wizard .selection .cadre-blanc {
    border: 5px solid #43B0B0;
}
.wizard .selection p {
    color: #43B0B0;
}
.wizard p, .wizard p a {
    font-size: 16px;
    font-weight: 600;
}
.wizard .choix, .wizard .check, .wizard .filtre {
    width: 100%;
    cursor: pointer;
}
.wizard-primary.sw-theme-arrows > .nav .nav-link.active {
    border-color: #5A507C !important;
    background: #5A507C !important;
}
.wizard-primary.sw-theme-arrows > .nav .nav-link.active::after {
    border-left-color: #5A507C !important;
}
.wizard-primary.sw-theme-arrows > .nav .nav-link.done {
    border-color: #9188C1 !important;
    background: #9188C1 !important;
}
.wizard-primary.sw-theme-arrows > .nav .nav-link.done::after {
    border-left-color: #9188C1 !important;
}
.wizard .toolbar-bottom .btn {
    font-size: 16px;
    padding: 10px 35px;
}
.wizard .toolbar-bottom .btn-outline-secondary {
    border-color: var(--violet);
    color: var(--violet);
}
.wizard .toolbar-bottom .btn-outline-secondary:hover {
    border-color: var(--violet);
    background-color: var(--violet);
}
.sw > .tab-content {
    position: initial;
    overflow-y: auto;
}
.cursor-pointer {
    cursor: pointer;
}



/* SELECTION DES LIENS */
#selectlink .modal-content {
    height: 100%;
}
#selectlink .modal-body .div-cadre {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: solid 1px var(--gris-c5);
    border-radius: 10px;
    overflow: hidden;
}
#selectlink .modal-body .div-cadre .card-nav {
    display: flex;
    position: relative;
    z-index: 1;
    background-color: var(--blanc);
    border-bottom: solid 1px var(--gris-c4);
    user-select : none;
    overflow: hidden;
}
#selectlink .modal-body .div-cadre .card-nav .div-icone {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    cursor: pointer;
    background-color: white;
    box-shadow: 0px 0px 20px 20px white;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}
#selectlink .modal-body .div-cadre .card-nav .div-icone:nth-child(1) {
    opacity: 0;
}
#selectlink .modal-body .div-cadre .card-nav .div-icone:nth-child(3) {
    right: 0;
}
#selectlink .modal-body .div-cadre .card-nav .div-icone svg {
    fill: var(--gris-c4);
    width: 20px;
    aspect-ratio: 1 / 1;
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-transform: uppercase;
    border: none;
    padding: 0 15px;
    overflow-y: hidden;
    overflow-x: scroll;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer / Edge */
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs .nav-item {
    text-align: center;
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-c4);
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s ease-in-out;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
#selectlink .modal-body .div-cadre .card-nav.active .nav-tabs .nav-link {
    cursor: grab;
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs .nav-link:hover {
    color: var(--gris-c1);
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs .nav-link.active {
    color: var(--bleu);
    background: none;
    border-bottom-color: var(--bleu);
}
#selectlink .modal-body .div-cadre .card-nav .nav-tabs.active .nav-link {
    cursor: grab;
}
#selectlink .modal-body .div-cadre .card-body {
    padding: 15px;
    flex: 1;
    overflow: auto;
}
#selectlink .modal-body .div-cadre .card-body .div-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 5px;
    padding: 10px 15px;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix.active {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
    outline: solid 1px var(--bleu);
    box-shadow: 0 0 0 4px var(--bleu-50p);
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix-image {
    padding: 10px;
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix-image img {
    width: 40px;
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix.active i,
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix h4 {
    color: var(--gris);
    font-size: 15px;
    margin: 0;
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix h4 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix.active i,
#selectlink .modal-body .div-cadre .card-body .div-grille .div-choix.active h4 {
    color: var(--bleu);
}
#selectlink .modal-body .div-cadre .card-body .div-nav-pills {
    margin-bottom: 15px;
}
#selectlink .modal-body .div-cadre .card-body textarea {
    min-height: 100px;
}



/* IDENTIFICATION DES LIENS */
#lien-identification .div-grille-lien {
    display: grid;
    gap: 15px;
}
#lien-identification .div-grille-lien .card-lien {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#lien-identification .div-grille-lien .card-lien .div-contenu {
    flex: 1;
}
#lien-identification .div-grille-lien .card-lien .div-contenu h5 {
    font-size: 15px;
    color: var(--gris);
    margin-bottom: 4px;
}
#lien-identification .div-grille-lien .card-lien .div-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--gris-c2);
    font-size: 12px;
}
#lien-identification .div-grille-lien .card-lien .div-breadcrumb .div-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    word-wrap: break-word;
}
#lien-identification .div-grille-lien .card-lien .div-breadcrumb .div-breadcrumb-item:not(:last-child) {
    padding-right: 10px;
}
#lien-identification .div-grille-lien .card-lien .div-breadcrumb .div-breadcrumb-item:not(:last-child):after {
    content: '';
    display: inline-block;
    width: 8px;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--gris-c2);
    border-left: none;
    border-top: none;
    transform: rotate(-45deg);
    margin-left: 10px;
}
#lien-identification .div-grille-lien .card-lien .div-breadcrumb .div-breadcrumb-item:last-child {
    font-weight: 600;
}





/*
---------------------------------------------
-------------- PAGES           --------------
-------------- LISTE DES PAGES --------------
---------------------------------------------
*/
/* ------------
MODALES
------------ */
/* DUPLICATION DE PAGE */
#duplicationpage .modal-content {
    height: 100%;
}
#duplicationpage .modal-body .div-colonnes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 100%;
}

#duplicationpage .modal-body .div-sidebar,
#duplicationpage .modal-body .div-iframe {
    border: solid 1px var(--gris-c5);
    border-radius: 10px;
    overflow: hidden;
}
#duplicationpage .modal-body .div-sidebar {
    display: flex;
    flex-direction: column;
    /*flex: 1;*/
}
#duplicationpage .modal-body .div-sidebar .card-nav {
    background-color: var(--blanc);
    padding: 0 15px;
    border-bottom: solid 1px var(--gris-c4);
    position: relative;
    z-index: 1;
}
#duplicationpage .modal-body .div-sidebar .card-nav .nav-tabs {
    text-transform: uppercase;
    border: none;
}
#duplicationpage .modal-body .div-sidebar .card-nav .nav-tabs .nav-item {
    text-align: center;
    flex: 1;
}
#duplicationpage .modal-body .div-sidebar .card-nav .nav-tabs .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-c4);
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s ease-in-out;
    border: none;
    border-bottom: 2px solid transparent;
}
#duplicationpage .modal-body .div-sidebar .card-nav .nav-tabs .nav-link:hover {
    color: var(--gris-c1);
}
#duplicationpage .modal-body .div-sidebar .card-nav .nav-tabs .nav-link.active {
    color: var(--bleu);
    background: none;
    border-bottom-color: var(--bleu);
}
#duplicationpage .modal-body .div-sidebar .card-body {
    padding: 15px;
    flex: 1;
    overflow: auto;
    max-height: 200px;
}
#duplicationpage .modal-body .div-sidebar .card-body .tab-pane .div-grille {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}
#duplicationpage .modal-body .div-sidebar .card-body .tab-pane .card {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 5px;
    padding: 10px 15px;
    margin: 0;
    cursor: pointer;
}
#duplicationpage .modal-body .div-sidebar .card-body .tab-pane .card.active {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
    outline: solid 1px var(--bleu);
    box-shadow: 0 0 0 4px var(--bleu-50p);
}
#duplicationpage .modal-body .div-sidebar .card-body .tab-pane .card h4 {
    color: var(--gris);
    font-size: 15px;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#duplicationpage .modal-body .div-sidebar .card-body .tab-pane .card.active h4 {
    color: var(--bleu);
}
#duplicationpage .modal-body .div-sidebar .card-footer {
    padding: 10px 15px 20px;
    border-top: solid 1px var(--gris-c5);
}
#duplicationpage .modal-body .div-sidebar .card-footer .form-group {
    width: 100%;
    max-width: 250px;
}
#duplicationpage .modal-body .div-sidebar .card-footer .form-control {
    margin: 0;
}
#duplicationpage .modal-body .div-iframe {
    /*display: flex;
    flex: 1;*/
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: 1;
}

#duplicationpage .modal-body .div-iframe iframe {
    /*width: 100%;
    border: none;
    aspect-ratio: 16/9;*/
    width: 1920px;
    border: none;
    transform-origin: top left;
}

@media (min-width: 576px) {
    #duplicationpage .modal-body .div-sidebar .card-body .tab-pane .div-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    #duplicationpage .modal-content {
        height: 100%;
    }
    #duplicationpage .modal-body .div-colonnes {
        flex-direction: row;
        height: 100%;
    }
    #duplicationpage .modal-body .div-sidebar {
        width: 350px;
        flex: none;
    }
    #duplicationpage .modal-body .div-sidebar .card-body {
        max-height: none;
    }
    #duplicationpage .modal-body .div-sidebar .card-body .tab-pane .div-grille {
        grid-template-columns: repeat(1, 1fr);
    }
}





/*
----------------------------------------
-------------- PAGES      --------------
-------------- D'ÉDITIONS --------------
----------------------------------------
*/

.div-entete {
    border-top: solid 3px var(--bleu);
    background-color: var(--violet-c1);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 68px;
    position: sticky;
    top: 0;
    z-index: 3;
}
.div-entete .bouton-retour {
    padding: 7px;
}
.div-entete .bouton-retour svg {
    width: 24px;
}
.div-entete h3 {
    font-size: 20px;
    line-height: normal;
    flex: 1;
    color: white;
    font-weight: 500;
    margin-bottom: 0;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*
COLONNE FRAME
*/
.colonne-frame {
    flex: 1;
    border: none;
    padding-left: 0;
}
.colonne-frame #preview {
    border: 0;
    border-left: 1px solid silver;
}



/*
COLONNE D'EDITION
*/
.colonne-edition {
    height: 100vh;
    background-color: var(--blanc);
    overflow-y: auto;
    padding: 0;
}

.colonne-edition .div-editeur {
    width: 100%;
}



/*.colonne-edition .div-zone-clic {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
}
.colonne-edition .div-zone-clic img {
    width: 30px;
}
.colonne-edition .div-zone-clic .div-titre {
    flex: 1;
    overflow: hidden;
}
.colonne-edition .div-zone-clic .div-titre h2 {
    color: var(--violet);
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.colonne-edition .chevron {
    position: static;
}
.colonne-edition [data-toggle="collapse"]:not(.collapsed) .chevron {
    transform: rotate(45deg);
}*/


/*
BLOC OPTIONS
*/
.div-bloc-options {
    background-color: var(--blanc);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
}








/*
-----------------------------------------------
-------------- PAGES             --------------
-------------- AUTHENTIFICATIONS --------------
-----------------------------------------------
*/
.authentification{
    background-image: url("../images/app/fond-inscriptionHD.png");
    background-position: center center;
    background-size: cover;
}
.authentification body {
    color: white;
    margin: 0;
}


/*
PREMIER PLAN
*/
.authentification .premier-plan {
    position: relative;
    z-index: 1;
}
.authentification .container-fluid {
    padding: 80px;
}
.authentification .div-contenu {
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
    position: sticky;
    top: 80px;
}
.authentification .div-logo img {
    height: 60px;
}
.authentification .div-logo > div {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.authentification .div-logo > div img {
    height: 40px;
}
.authentification .div-logo p {
    text-transform: uppercase;
    color: white;
}

.authentification .div-description {
    max-width: 660px;
}

.authentification h1,
.authentification h2 {
    color: white;
}
.authentification h2 {
    font-weight: 600;
    font-size: 32px;
    text-transform: uppercase;
}
.authentification h1 {
    font-weight: 700;
    font-size: 48px;
}

.authentification .div-formulaire {
    background-color: white;
    color: #3D3069;
    width: 100%;
    min-height: calc(100vh - 160px);
    border-radius: 20px;
}
.authentification .div-formulaire a {
    text-decoration: underline;
}
.authentification .div-formulaire .div-form-header {
    border-bottom: solid 1px #F5F5F6;
}
.authentification .div-formulaire .div-form-header .nav {
    margin: 0 50px;
    gap: 20px;
}
.authentification .div-formulaire .div-form-header .nav li {
    flex: 1;
}
.authentification .div-formulaire .div-form-header .nav li a {
    display: block;
    width: 100%;
    height: calc(100% - 4px);
    padding: 20px;
    font-size: 18px;
    font-weight: 500;
    color: #BEC1C7;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.authentification .div-formulaire .div-form-header .nav li a.active {
    color: #4FBCBF;
    cursor: default;
}
.authentification .div-formulaire .div-form-header .nav li:has(a.active) span.bordure-bas {
    background-color: #4FBCBF;
}
.authentification .div-formulaire .div-form-header .nav li span.bordure-bas {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 4px 4px 0 0;
}

.authentification .div-formulaire .div-form-main {
    padding: 30px 50px;
}
.authentification .div-formulaire .div-form-main .div-msg-information {
    background-color: var(--bleu-c6);
    border-radius: 8px;
    border-left: solid 8px var(--bleu);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    margin-bottom: 20px
}
.authentification .div-formulaire .div-form-main .div-msg-information p {
    font-size: 15px;
    color: var(--bleu);
    margin: 0;
}
.authentification .div-formulaire .div-form-main .div-msg-information p.titre {
    font-size: 18px;
    font-weight: 600;
}
.authentification .div-formulaire .div-form-main .div-msg-information .btn {
    border: solid 1px var(--bleu);
    border-radius: 4px;
    color: var(--bleu);
    text-decoration: none;
    text-transform: uppercase;
}
.authentification .div-formulaire .div-form-main .div-liste-input {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}
.authentification .div-formulaire .div-form-main label {
    font-size: 18px;
    margin: 0;
    margin-bottom: 4px;
}
.authentification .div-formulaire .div-form-main .form-control {
    font-size: 18px;
    padding: 12px 14px !important;
    height: auto;
    background-color: white;
    border-radius: 8px !important;
    margin: 0;
}
.authentification .div-formulaire .div-form-main .form-control:focus {
    border-color: rgb(61 48 105 / 30%);
    box-shadow: 0 0 0 0.2rem rgb(61 48 105 / 30%);
}
.authentification .div-formulaire .div-form-main .form-group {
    margin: 0;
}
.authentification .div-formulaire .div-form-main .div-form-parametres {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.authentification .div-formulaire .div-form-main .div-form-parametres label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    line-height: 1em;
}
.authentification .div-formulaire .div-form-main .div-form-parametres a {
    font-size: 18px;
}
.authentification .div-formulaire .div-form-main .div-form-parametres input {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}
.authentification .div-formulaire .div-form-main .div-form-liens .btn {
    font-size: 18px;
    padding: 12px 14px;
    width: 100%;
    margin: 10px 0 15px;
    border-radius: 8px !important;
}



.authentification .div-formulaire .div-form-main .div-form-liens a {
    font-size: 18px;
    margin: auto;
}
.authentification .div-formulaire .div-form-main .div-form-cgu {
    text-align: center;
}
.authentification .div-formulaire .div-form-main .div-form-cgu p {
    margin: 0;
}
.authentification .div-formulaire .div-form-main .div-input-form-mdp {
    position: relative;
}
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone {
    position: absolute;
    right: 14px;
    top: 12.5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone .icone-voir,
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone.mdp-visible .icone-masquer {
    display: block;
}
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone .icone-masquer,
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone.mdp-visible .icone-voir {
    display: none;
}
.authentification .div-formulaire .div-form-main .div-input-form-mdp .div-form-icone svg {
    fill: var(--gris-c4);
}





/*
------------------------------------
-------------- PAGE ----------------
-------------- NAVBAR --------------
------------------------------------
*/
/*
#page-navbar .div-sortable {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#page-navbar .card-placeholder {
    border: dashed 1px var(--gris-c5);
    border-radius: 8px;
    padding: 8px 16px;
    margin: 0;
}
#page-navbar .card-placeholder p {
    text-align: center;
    margin: 0;
    color: var(--gris-c3);
}
#page-navbar .card-placeholder.highlight {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
}
#page-navbar .card-placeholder.highlight p {
    color: var(--bleu);
}
#page-navbar .div-item-lien {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
*/
#page-footer .div-sortable {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#page-navbar .card-fantom,
#page-footer .card-fantom {
    margin-bottom: 15px;
}
#page-navbar .div-item-lien .card-lien,
#page-footer .div-item-lien .card-lien {
    display: flex;
    flex-direction: row;
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    margin: 0;
}
#page-navbar .div-item-lien .div-sous-menu,
#page-footer .div-item-lien .div-sous-menu {
    margin-left: 30px;
    padding-top: 15px;
}
#page-navbar .card-lien .div-zone-drag,
#page-footer .card-lien .div-zone-drag {
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: grab !important;
}
#page-navbar .card-lien .div-zone-drag svg,
#page-footer .card-lien .div-zone-drag svg {
    width: 30px;
    fill: var(--violet);
}
#page-navbar .card-lien .div-zone-option,
#page-footer .card-lien .div-zone-option {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 10px;
    width: 100%;
    padding: 15px;
    padding-left: 0;
    width: calc(100% - 50px);
}
#page-navbar .card-lien .div-zone-option .div-groupe-input,
#page-footer .card-lien .div-zone-option .div-groupe-input {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#page-navbar .card-lien .div-zone-option .div-groupe-input .input-group {
    width: 100%;
}



@media (min-width: 576px) {
    #page-navbar .card-lien .div-zone-option .div-groupe-input,
    #page-footer .card-lien .div-zone-option .div-groupe-input {
        flex-direction: row;
    }
    #page-navbar .card-lien .div-zone-option .div-groupe-input .input-group:nth-child(1),
    #page-footer .card-lien .div-zone-option .div-groupe-input .input-group:nth-child(1) {
        width: 40%;
    }
    #page-navbar .card-lien .div-zone-option .div-groupe-input .input-group:nth-child(2),
    #page-footer .card-lien .div-zone-option .div-groupe-input .input-group:nth-child(2) {
        width: 60%;
    }
}

@media (min-width: 1200px) {
    #page-navbar .card-lien .div-zone-option,
    #page-footer .card-lien .div-zone-option {
        flex-direction: row;
        align-items: center;
    }
    #page-navbar .card-lien .div-zone-option .div-groupe-input,
    #page-footer .card-lien .div-zone-option .div-groupe-input {
        width: 0px;
    }
}






/*
------------------------------------------------------------------
-------------- PAGES ---------------------------------------------
-------------- MODIFICATION D’UN PRODUIT -------------------------
-------------- MODIFICATION D’UNE CATEGORIE PRODUIT --------------
-------------- MODIFICATION D’UN ATTRIBUT PRODUIT ----------------
------------------------------------------------------------------
*/

/* ------------
GENERALES
------------ */
#modif-produit .div-grille,
#modif-categorie-produits .div-grille,
#apercu-commande .div-grille {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
#modif-produit .div-grille .div-col-main,
#modif-categorie-produits .div-grille .div-col-main,
#apercu-commande .div-grille .div-col-main {
    flex: 2;
    min-width: min(450px, 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#modif-produit .div-grille .div-col-aside,
#modif-categorie-produits .div-grille .div-col-aside,
#apercu-commande .div-grille .div-col-aside {
    flex: 1;
    min-width: min(320px, 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#modif-produit .div-bloc-options,
#modif-categorie-produits .div-bloc-options,
#apercu-commande .div-bloc-options {
    padding: 15px 20px 20px;
}

/* TITRES */
#modif-produit h4,
#modif-categorie-produits h4,
#apercu-commande h4 {
    font-size: 20px;
    font-weight: 500;
    color: var(--gris);
    margin-bottom: 10px;
}

/* TEXTES */
#modif-produit p,
#modif-categorie-produits p,
#apercu-commande p {
    margin-bottom: 0;
}

/* LABEL */
#modif-produit label,
#modif-categorie-produits label {
    margin: 0;
}

/* BOUTONS */
#modif-produit .div-bloc-options > .btn,
#modif-categorie-produits .div-bloc-options > .btn,
#apercu-commande .div-bloc-options > .btn {
    margin-top: 15px;
}
#modif-produit .div-bloc-options > .div-groupe-boutons,
#modif-categorie-produits .div-bloc-options > .div-groupe-boutons,
#apercu-commande .div-bloc-options > .div-groupe-boutons {
    margin-top: 15px;
}

/* FORMULAIRES */
#modif-produit .label-input,
#modif-categorie-produits .label-input {
    font-size: 15px;
    font-weight: 500;
    color: var(--gris);
    margin-bottom: 4px;
}
#modif-produit .form-control,
#modif-produit .tox.tox-tinymce,
#modif-categorie-produits .form-control,
#modif-categorie-produits .tox.tox-tinymce {
    margin: 0;
}
#modif-produit .div-liste-input,
#modif-categorie-produits .div-liste-input {
    display: grid;
    gap: 20px 15px;
}

/* IMAGES */
#edition-attributs-et-valeurs .div-image,
#modif-produit .div-image,
#modif-categorie-produits .div-image {
    border-radius: 8px;
    border: solid 1px var(--gris-c5);
    overflow: hidden;
    background-image: url('../../assets/images/app/design/fond/fond-transparent.jpg');
    background-position: center;
    background-size: 8px;
    width: 100%;
}
#edition-attributs-et-valeurs .div-image img,
#modif-produit .div-image img,
#modif-categorie-produits .div-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* PILLS SELECTOR */
.div-pills-selector-grille {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}



/* ------------
SPECIFIQUES
------------ */
/* IMAGES D'APERCU DU PRODUIT */
#modif-produit .div-options-image-apercu .div-image,
#modif-categorie-produits .div-options-image-apercu .div-image {
    max-width: 420px;
    max-height: 360px;
    width: auto;
}
#modif-categorie-produits .div-options-image-apercu .div-image {
    aspect-ratio: 4 / 3;
}


/* IMAGES DE LA FICHE PRODUIT */
#modif-produit .div-options-images-fiche .div-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
    grid-gap: 10px;
}
@media (min-width: 500px) {
    #modif-produit .div-options-images-fiche .div-grille > div:nth-child(1) {
        grid-area: span 2 / span 2;
    }
}
#modif-produit .div-options-images-fiche .div-grille .div-image {
    position: relative;
    aspect-ratio: 1 / 1;
}
#modif-produit .div-options-images-fiche .div-grille .div-image .indicateur-position {
    position: absolute;
    aspect-ratio: 1 / 1;
    background-color: var(--gris-c6-80p);
    fill: var(--gris-c2);
    color: var(--gris);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin: 0;
    transition: all 0.2s ease-in-out;
    width: 24px;
    top: 5px;
    left: 5px;
    font-weight: 500;
}


/* PRIX ET STOCKS */
#modif-produit .div-options-prix-et-stock {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
#modif-produit .div-options-prix-et-stock .div-options-prix {
    flex: 2;
    min-width: min(300px, 100%);
}
#modif-produit .div-options-prix-et-stock .div-options-prix .div-liste-input {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
#modif-produit .div-options-prix-et-stock .div-options-stock {
    flex: 1;
    min-width: min(200px, 100%);
}


/* INFORMATIONS */
#apercu-commande .div-options-informations {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
#apercu-commande .div-options-informations .div-options-coordonnees {
    flex: 1;
    min-width: min(200px, 100%);
}
#apercu-commande .div-options-informations .div-options-adresse {
    flex: 1;
    min-width: min(200px, 100%);
}
#apercu-commande .div-options-informations .div-options-date {
    flex: 1;
    min-width: min(200px, 100%);
}


/* QUESTION PERSONNALISE */
#modif-produit .div-options-questions p {
    margin-bottom: 15px;
}
#modif-produit .div-options-questions .div-question-item {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
}
#modif-produit .div-options-questions .div-question-item .div-contenu {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}
/*#modif-produit .div-options-questions .div-question-item .div-contenu .form-group {
    flex: 1;
    min-width: min(200px, 100%);
}*/
#modif-produit .div-options-questions .div-question-item .div-contenu .form-group:nth-child(1),
#modif-produit .div-options-questions .div-question-item .div-contenu .form-group:nth-child(2) {
    flex: 2;
    min-width: min(200px, 100%);
}
#modif-produit .div-options-questions .div-question-item .div-contenu .form-group:nth-child(3) {
    flex: 1;
    min-width: min(150px, 100%);
    max-width: 200px;
}


/* ATTRIBUTS */
#modif-produit .div-options-attributs .div-attributs-grille {
    display: grid;
    gap: 15px;
}
#modif-produit .div-options-attributs .div-attributs-grille .div-attribut-item {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#modif-produit .div-options-attributs .div-attributs-grille .div-attribut-item .div-contenu {
    flex: 1;
}
#modif-produit .div-options-attributs .div-attributs-grille .div-attribut-item .div-contenu h5 {
    font-size: 15px;
    color: var(--gris);
    margin-bottom: 4px;
}


/* DECLINAISONS */
#modif-produit .div-options-declinaisons {
    padding: 0;
}
#modif-produit .div-options-declinaisons h4 {
    padding: 15px 20px 10px;
    margin: 0;
    border-bottom: solid 1px var(--gris-c5);
}
#modif-produit .div-options-declinaisons .table thead tr th:nth-child(2) {
    width: 35%;
}
#modif-produit .div-options-declinaisons .table thead tr th:nth-child(3),
#modif-produit .div-options-declinaisons .table thead tr th:nth-child(4) {
    width: 25%;
    min-width: 130px;
    white-space: normal;
}
#modif-produit .div-options-declinaisons .table thead tr th:nth-child(5) {
    width: 15%;
    min-width: 100px;
}
#modif-produit .div-options-declinaisons .table .div-groupe-3-images {
    cursor: pointer;
}
#modif-produit .div-options-declinaisons .table .div-groupe-3-images .div-image-parent .indicateur-changement {
    position: absolute;
    top: 5px;
    left: 55px;
    transform: translateX(-100%);
    width: 24px;
    aspect-ratio: 1 / 1;
    background-color: var(--gris-c6-80p);
    fill: var(--gris-c2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin: 0;
    z-index: 2;
}
#modif-produit .div-options-declinaisons .table .div-groupe-3-images .div-image-parent .indicateur-changement svg {
    width: 18px;
}
#modif-produit .div-options-declinaisons .table tbody tr td .btn-group {
    flex-wrap: nowrap;
}
#modif-produit .div-options-declinaisons .table tbody tr td .div-information {
    display: flex;
    align-items: center;
    gap: 8px;
}
#modif-produit .div-options-declinaisons .table tbody tr td .div-information .div-designation {
    min-width: 110px;
}
#modif-produit .div-options-declinaisons .table tbody tr td .div-information .div-designation .designation-titre {
    overflow: initial;
    text-overflow: initial;
    white-space: initial;
}
#modif-produit .div-options-declinaisons .table tbody tr td .div-information .div-statut {
    padding: 2px 8px;
    font-size: 12px;
    text-transform: uppercase;
    color: white;
    border-radius: 999px;
}
#modif-produit .div-options-declinaisons .table tbody tr td .div-information .div-statut.statut-nouveau {
    background-color: var(--rouge);
}


/* ARTICLES */
#apercu-commande .div-options-articles {
    padding: 0;
}
#apercu-commande .div-options-articles h4 {
    padding: 15px 20px 10px;
    margin: 0;
    border-bottom: solid 1px var(--gris-c5);
}
#apercu-commande .div-options-articles .table thead tr th:nth-child(2) {
    width: 70%;
    min-width: 200px;
}
#apercu-commande .div-options-articles .table tbody tr td:nth-child(2) {
    max-width: 200px;
}
#apercu-commande .div-options-articles .table thead tr th:nth-child(3),
#apercu-commande .div-options-articles .table thead tr th:nth-child(4) {
    width: 15%;
}


/* PRODUITS */
#modif-categorie-produits .div-options-produits .div-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    grid-gap: 10px;
}
#modif-categorie-produits .div-options-produits .div-grille .div-produit {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#modif-categorie-produits .div-options-produits .div-groupe-infos {
    min-width: 110px;
    flex: 1;
}
#modif-categorie-produits .div-options-produits .div-groupe-infos p {
    margin: 0;
}
#modif-categorie-produits .div-options-produits .div-groupe-infos .produit-nom {
    color: var(--gris);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#modif-categorie-produits .div-options-produits .div-groupe-infos .produit-declinaisons {
    color: var(--gris-c2);
    font-size: 12px;
}


/* ------------
MODALES
------------ */
/* IMAGES D'APERCU DU PRODUIT */
#modification-image-apercu .modal-body .div-images-selection .div-image {
    max-width: 350px;
    max-height: 300px;
    width: auto;
}

/* IMAGE D'APERCU ET
IMAGES DE LA FICHE PRODUIT */
#modification-image-apercu .modal-body .div-grille .div-image,
#modification-images-fiche-produit .modal-body .div-grille .div-image,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image {
    position: relative;
    aspect-ratio: 1 / 1;
}
#modification-image-apercu .modal-body .div-grille .div-image img,
#modification-images-fiche-produit .modal-body .div-grille .div-image img,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image img {
    transition: transform 0.1s ease-in-out;
}
#modification-image-apercu .modal-body .div-grille .div-image:hover img,
#modification-images-fiche-produit .modal-body .div-grille .div-image:hover img,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image:hover img {
    transform: scale(120%);
}
#modification-image-apercu .modal-body .div-grille .div-image.selection,
#modification-images-fiche-produit .modal-body .div-grille .div-image.selection,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image.selection {
    border: 2px solid var(--bleu);
    box-shadow: 0 0 0 3px var(--bleu-50p);
}
#modification-image-apercu .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .indicateur-position,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-retirer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-drag,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .indicateur-position,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-retirer,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-drag {
    position: absolute;
    aspect-ratio: 1 / 1;
    background-color: var(--gris-c6-80p);
    fill: var(--gris-c2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin: 0;
    transition: all 0.2s ease-in-out;
}
#modification-image-apercu .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .indicateur-position,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-retirer,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .indicateur-position,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-retirer {
    width: 24px;
}
#modification-image-apercu .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-retirer,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-supprimer,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-retirer {
    top: 5px;
    right: 5px;
    cursor: pointer;
}
#modification-image-apercu .modal-body .div-grille .div-image .bouton-supprimer svg,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-supprimer svg,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-retirer svg,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-supprimer svg,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-retirer svg {
    width: 18px;
}
#modification-image-apercu .modal-body .div-grille .div-image .bouton-supprimer:hover,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-supprimer:hover,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-retirer:hover,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-supprimer:hover,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-retirer:hover {
    background-color: var(--blanc);
    fill: var(--rouge);
}
#modification-image-apercu .modal-body .div-grille .div-image .bouton-supprimer:active,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-supprimer:active,
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-retirer:active,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-supprimer:active,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-retirer:active {
    background-color: var(--rouge);
    fill: var(--blanc);
}
#modification-images-fiche-produit .modal-body .div-grille .div-image .indicateur-position,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .indicateur-position {
    top: 5px;
    left: 5px;
    color: var(--gris);
    font-weight: 500;
}
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-drag,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-drag {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px;
    width: auto;
    opacity: 0;
    cursor: grab;
}
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-drag svg,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-drag svg {
    width: 30px;
}
#modification-images-fiche-produit .modal-body .div-grille .div-image:hover .bouton-drag,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image:hover .bouton-drag {
    opacity: 1;
}
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-drag:hover,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-drag:hover {
    background-color: var(--blanc);
    fill: var(--gris);
}
#modification-images-fiche-produit .modal-body .div-grille .div-image .bouton-drag:active,
#modification-images-fiche-declinaison .modal-body .div-grille .div-image .bouton-drag:active {
    background-color: var(--gris);
    fill: var(--blanc);
}


#modification-images-fiche-produit .modal-body .div-images-selection .div-grille,
#modification-images-fiche-declinaison .modal-body .div-images-selection .div-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
    grid-gap: 10px;
    position: relative;
}
#modification-images-fiche-produit .modal-body .div-images-selection .div-grille .card-fantom,
#modification-images-fiche-declinaison .modal-body .div-images-selection .div-grille .card-fantom {
    aspect-ratio: 1 / 1;
}
@media (min-width: 500px) {
    #modification-images-fiche-produit .modal-body .div-images-selection .div-grille .card-large,
    #modification-images-fiche-declinaison .modal-body .div-images-selection .div-grille .card-large {
        grid-area: span 2 / span 2;
    }
}




#modification-image-apercu .modal-body .div-images-generales,
#modification-images-fiche-produit .modal-body .div-images-generales,
#modification-images-fiche-declinaison .modal-body .div-images-generales {
    padding-top: 15px;
    border-top: solid 1px var(--gris-c5);
    margin-top: 20px;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container {
    display: flex;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-bouton-parent,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-bouton-parent,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-bouton-parent {
    padding: 3px 0;
    margin-right: 7px;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-slider-images,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-slider-images,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-slider-images {
    flex: 1;
    display: flex;
    position: relative;
    user-select : none;
    overflow: hidden;
}

#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone {
    position: absolute;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    cursor: pointer;
    background-color: white;
    box-shadow: 0px 0px 20px 20px white;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone:nth-child(3),
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone:nth-child(3),
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone:nth-child(3) {
    right: 0;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone svg,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone svg,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-slider-images .div-icone svg {
    fill: var(--gris-c4);
    width: 20px;
    aspect-ratio: 1 / 1;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-slider-images .div-grille,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-slider-images .div-grille,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-slider-images .div-grille {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    grid-gap: 10px;
    overflow-x: auto;
    padding: 3px;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer / Edge */
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-slider-images .div-grille::-webkit-scrollbar,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-slider-images .div-grille::-webkit-scrollbar,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-slider-images .div-grille::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}





#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-grille .div-image,
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-bouton-parent .div-bouton,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-grille .div-image,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-bouton-parent .div-bouton,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-grille .div-image,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-bouton-parent .div-bouton {
    width: 100px;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-grille .div-image,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-grille .div-image,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-grille .div-image {
    cursor: pointer;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-bouton,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-bouton,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-bouton {
    aspect-ratio: 1 / 1;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-bouton .form-group,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-bouton .form-group,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-bouton .form-group {
    display: none;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-bouton .btn,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-bouton .btn,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-bouton .btn {
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: inline-block;
}
#modification-image-apercu .modal-body .div-images-generales .div-slider-container .div-bouton .btn svg,
#modification-images-fiche-produit .modal-body .div-images-generales .div-slider-container .div-bouton .btn svg,
#modification-images-fiche-declinaison .modal-body .div-images-generales .div-slider-container .div-bouton .btn svg {
    width: 44px;
}



/* ATTRIBUTS ET VALEURS */
#selection-attributs-et-valeurs .modal-body .accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#selection-attributs-et-valeurs .modal-body .accordion .card {
    margin: 0;
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-header {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px 8px 0 0;
    padding: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition:
            all 0.2s ease-in-out,
            border-radius 0s ease-in-out 0s;
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-header.collapsed {
    border-radius: 8px;
    transition: border-radius 0.2s ease-in-out 0.25s;
}
#selection-attributs-et-valeurs .modal-body .accordion .card.selection .card-header {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-header h6 {
    color: var(--gris);
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}
#selection-attributs-et-valeurs .modal-body .accordion .card.selection .card-header h6 {
    color: var(--bleu);
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-header svg {
    width: 16px;
    aspect-ratio: 1 / 1;
    fill: var(--gris);
    transform: rotate(-90deg);
    transition: all 0.2s ease-in-out;
}
#selection-attributs-et-valeurs .modal-body .accordion .card.selection .card-header svg {
    fill: var(--bleu);
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-header[data-toggle="collapse"]:not(.collapsed) svg {
    transform: rotate(0deg);
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-body {
    background-color: var(--blanc);
    border: solid 1px var(--gris-c5);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 15px;
}
#selection-attributs-et-valeurs .modal-body .accordion .card .card-body .div-selection-rapide {
    margin-bottom: 15px;
}





#edition-attributs-et-valeurs .modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#selection-attributs-et-valeurs .modal-body .btn {
    margin-top: 15px;
}

#edition-attributs-et-valeurs .div-options-template .div-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 10px;
}
#edition-attributs-et-valeurs .div-options-template .div-grille .div-template {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
}
#edition-attributs-et-valeurs .div-options-template .div-grille .div-template.selection {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
    outline: solid 1px var(--bleu);
    box-shadow: 0 0 0 4px var(--bleu-50p);
}
#edition-attributs-et-valeurs .div-options-template .div-grille .div-template p {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--gris);
    text-transform: uppercase;
    margin: 0;
}
#edition-attributs-et-valeurs .div-options-template .div-grille .div-template.selection p {
    color: var(--bleu);
}



#edition-attributs-et-valeurs .div-options-valeurs .div-sortable {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#edition-attributs-et-valeurs .div-options-valeurs .div-item-lien .card-lien {
    display: flex;
    flex-direction: row;
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    margin: 0;
}
.div-zone-drag {
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: grab;
}
.div-zone-drag svg {
    width: 30px;
    fill: var(--violet);
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    padding: 15px;
    padding-left: 0;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input .input-group {
    flex: 1;
    width: auto;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input .input-group .minicolors {
    width: 100%;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input .div-image-parent {
    display: flex;
    align-items: center;
    gap: 5px;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input .div-image-parent .div-image {
    min-width: 48px;
    width: 48px;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input .div-image-parent .div-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}
#edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input .div-image-parent label {
    margin: 0;
}
@media (min-width: 576px) {
    #edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option .div-groupe-input {
        flex-direction: row;
        align-items: center;
    }
}
@media (min-width: 1200px) {
    #edition-attributs-et-valeurs .div-options-valeurs .card-lien .div-zone-option {
        flex-direction: row;
        align-items: center;
    }
}



/* SELECTION PRODUITS */
#selection-produits .modal-body .div-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    grid-gap: 10px;
}
#selection-produits .modal-body .div-grille .div-produit {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
#selection-produits .modal-body .div-grille .div-produit.selection {
    background-color: var(--bleu-c6);
    border-color: var(--bleu);
}
#selection-produits .modal-body .div-groupe-infos {
    min-width: 110px;
    flex: 1;
}
#selection-produits .modal-body .div-groupe-infos p {
    margin: 0;
}
#selection-produits .modal-body .div-groupe-infos .produit-nom {
    color: var(--gris);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#selection-produits .modal-body .div-groupe-infos .produit-declinaisons {
    color: var(--gris-c2);
    font-size: 12px;
}







/*
-------------------------------------------------------
-------------- PAGES LISTE ----------------------------
-------------- DES PAGES ------------------------------
-------------- DES CATEGORIES PRODUITS ----------------
-------------- DES PRODUITS ---------------------------
-------------- DES ATTRIBUTS --------------------------
-------------------------------------------------------
*/
/* ----------
PROPORTION DES TABLEAUX
---------- */
/* Liste des pages */
#liste-pages .div-bloc-options.pages-autos .table thead tr th:nth-child(2) {
    width: 80%;
    min-width: 200px;
}
#liste-pages .div-bloc-options.pages-autos .table tbody tr td:nth-child(2) {
    max-width: 200px;
}
#liste-pages  .div-bloc-options.pages-autos .table thead tr th:nth-child(3) {
    width: 20%;
}


#liste-pages .div-bloc-options .table thead tr th:nth-child(3) {
    width: 80%;
    min-width: 200px;
}
#liste-pages .div-bloc-options .table tbody tr td:nth-child(3) {
    max-width: 200px;
}
#liste-pages .div-bloc-options .table thead tr th:nth-child(4) {
    width: 20%;
}

/* Liste des redirections */
#liste-redirections .div-bloc-options .table thead tr th:nth-child(1) {
    width: 50%;
    min-width: 200px;
}
#liste-redirections .div-bloc-options .table thead tr th:nth-child(2) {
    width: 50%;
    min-width: 200px;
}

/* Liste des articles */
#liste-articles .div-bloc-options .table thead tr th:nth-child(2) {
    width: 60%;
    min-width: 200px;
}
#liste-articles .div-bloc-options .table tbody tr td:nth-child(2) {
    max-width: 200px;
}
#liste-articles .div-bloc-options .table thead tr th:nth-child(3) {
    width: 40%;
}

/* Liste des catégories articles */
#liste-categories-articles .div-bloc-options .table thead tr th:nth-child(1) {
    width: 100%;
    min-width: 200px;
}
#liste-categories-articles .div-bloc-options .table tbody tr td:nth-child(1) {
    max-width: 200px;
}

/* Liste des commandes */
#liste-commandes .div-bloc-options .table thead tr th:nth-child(1),
#liste-commandes .div-bloc-options .table thead tr th:nth-child(2),
#liste-commandes .div-bloc-options .table thead tr th:nth-child(3),
#liste-commandes .div-bloc-options .table thead tr th:nth-child(4) {
    width: 25%;
    min-width: 100px;
}


/* Liste des codes promo */
#liste-codes-promo .div-bloc-options .table thead tr th:nth-child(1) {
    width: 22%;
    min-width: 200px;
}
#liste-codes-promo .div-bloc-options .table thead tr th:nth-child(2),
#liste-codes-promo .div-bloc-options .table thead tr th:nth-child(3) {
    width: 13%;
    min-width: 100px;
}
#liste-codes-promo .div-bloc-options .table thead tr th:nth-child(4),
#liste-codes-promo .div-bloc-options .table thead tr th:nth-child(5),
#liste-codes-promo .div-bloc-options .table thead tr th:nth-child(6) {
    width: 17%;
    min-width: 130px;
}

/* Liste des produits */
#liste-produits .div-bloc-options .table thead tr th:nth-child(2) {
    width: 40%;
    min-width: 200px;
}
#liste-produits .div-bloc-options .table tbody tr td:nth-child(2) {
    max-width: 200px;
}
#liste-produits .div-bloc-options .table thead tr th:nth-child(3) {
    width: 20%;
    min-width: 100px;
}
#liste-produits .div-bloc-options .table thead tr th:nth-child(4) {
    width: 20%;
    min-width: 80px;
}
#liste-produits .div-bloc-options .table thead tr th:nth-child(5) {
    width: 20%;
}

/* Liste des catégories produits */
#liste-categories-produits .div-bloc-options .table thead tr th:nth-child(3) {
    width: 40%;
    min-width: 200px;
}
#liste-categories-produits .div-bloc-options .table tbody tr td:nth-child(3) {
    max-width: 200px;
}
#liste-categories-produits .div-bloc-options .table thead tr th:nth-child(4) {
    width: 60%;
}
/*#liste-categories-produits .div-bloc-options .table thead tr th:nth-child(2) {
    width: 40%;
    min-width: 200px;
}
#liste-categories-produits .div-bloc-options .table tbody tr td:nth-child(2) {
    max-width: 200px;
}
#liste-categories-produits .div-bloc-options .table thead tr th:nth-child(3) {
    width: 60%;
}*/

/* Liste des attributs produits */
/*#liste-attributs .div-bloc-options .table thead tr th:nth-child(1) {
    width: 30%;
    min-width: 200px;
}
#liste-attributs .div-bloc-options .table thead tr th:nth-child(2) {
    width: 70%;
    min-width: 400px;
}*/
#liste-attributs .div-bloc-options .table thead tr th:nth-child(2) {
    width: 30%;
    min-width: 200px;
}
#liste-attributs .div-bloc-options .table thead tr th:nth-child(3) {
    width: 55%;
    min-width: 400px;
}
#liste-attributs .div-bloc-options .table thead tr th:nth-child(4) {
    width: 15%;
    min-width: 150px;
}
/*#liste-attributs .div-bloc-options .table tbody tr td:nth-child(1) {
    max-width: 200px;
}*/
#liste-attributs .div-bloc-options .table tbody tr td:nth-child(2) {
    max-width: 200px;
}


/* Liste des contacts reçus */
#liste-contacts .div-bloc-options .table thead tr th:nth-child(1),
#liste-contacts .div-bloc-options .table thead tr th:nth-child(2) {
    width: 20%;
    min-width: 100px;
}
#liste-contacts .div-bloc-options .table thead tr th:nth-child(3) {
    width: 60%;
    min-width: 400px;
}
#liste-contacts .div-bloc-options .table tbody tr td:nth-child(3) {
    white-space: normal;
}


/* Liste des avis clients */
#liste-avis-clients .div-bloc-options .table thead tr th:nth-child(1) {
    width: 20%;
    min-width: 150px;
}
#liste-avis-clients .div-bloc-options .table thead tr th:nth-child(2) {
    width: 80%;
    min-width: 400px;
}
#liste-avis-clients .div-bloc-options .table tbody tr td:nth-child(2) {
    white-space: normal;
}


/* Liste des questions FAQ */
#liste-faq .div-bloc-options .table thead tr th:nth-child(1) {
    width: 40%;
    min-width: 200px;
}
#liste-faq .div-bloc-options .table thead tr th:nth-child(2) {
    width: 60%;
    min-width: 300px;
}
#liste-faq .div-bloc-options .table tbody tr td:nth-child(1),
#liste-faq .div-bloc-options .table tbody tr td:nth-child(2) {
    white-space: normal;
}

/* Liste des sites */
#liste-sites .div-bloc-options .table thead tr th,
#liste-sites .div-bloc-options .table tbody tr td {
    white-space: normal;
}
#liste-sites .div-bloc-options .table thead tr th:nth-child(1) {
    width: 20%;
    min-width: 150px;
}
#liste-sites .div-bloc-options .table thead tr th:nth-child(2) {
    width: 15%;
    min-width: 150px;
}
#liste-sites .div-bloc-options .table thead tr th:nth-child(3),
#liste-sites .div-bloc-options .table thead tr th:nth-child(4),
#liste-sites .div-bloc-options .table thead tr th:nth-child(5),
#liste-sites .div-bloc-options .table thead tr th:nth-child(6) {
    width: 10%;
    min-width: 120px;
}


/* ----------
CONTENUS DES TABLEAUX
---------- */
/* PRIX */
#liste-produits .div-tableau-parent .table tbody tr td .prix {
    color: var(--gris);
}
#liste-produits .div-tableau-parent .table tbody tr td .prix-plein {
    color: var(--gris-c2);
    font-size: 12px;
    text-decoration: line-through;
}


/* STATUTS */
/* Indexations pages */
.div-tableau-parent .table tbody tr td .div-statut.indexation-off svg {
    fill: var(--orange);
}
.div-tableau-parent .table tbody tr td .div-statut.indexation-on svg {
    fill: var(--vert);
}

/* Statuts produits */
#liste-produits .div-tableau-parent .table tbody tr td .div-statut.statut-masque svg,
#liste-categories-produits .div-tableau-parent .table tbody tr td .div-statut.statut-masque svg {
    fill: var(--orange);
}
#liste-produits .div-tableau-parent .table tbody tr td .div-statut.statut-visible svg,
#liste-categories-produits .div-tableau-parent .table tbody tr td .div-statut.statut-visible svg {
    fill: var(--jaune);
}
#liste-produits .div-tableau-parent .table tbody tr td .div-statut.statut-commandable svg,
#liste-categories-produits .div-tableau-parent .table tbody tr td .div-statut.statut-commandable svg {
    fill: var(--vert);
}

/* Statuts commandes */
#liste-commandes .div-tableau-parent .table tbody tr td .div-statut.statut-annulee svg {
    fill: var(--rouge);
}
#liste-commandes .div-tableau-parent .table tbody tr td .div-statut.statut-attente svg {
    fill: var(--bleu-royal);
}
#liste-commandes .div-tableau-parent .table tbody tr td .div-statut.statut-preparation svg {
    fill: var(--orange);
}
#liste-commandes .div-tableau-parent .table tbody tr td .div-statut.statut-prete svg {
    fill: var(--jaune);
}
#liste-commandes .div-tableau-parent .table tbody tr td .div-statut.statut-envoyee svg {
    fill: var(--vert);
}
#liste-commandes .div-tableau-parent .table tbody tr td .div-statut.statut-livraison svg {
    fill: var(--vert-f2);
}

/* Statuts retrait */
#liste-codes-promo .div-tableau-parent .table tbody tr td .div-statut.disponibilite-oui svg {
    fill: var(--vert);
}
#liste-codes-promo .div-tableau-parent .table tbody tr td .div-statut.disponibilite-non svg {
    fill: var(--rouge);
}

/* Statuts activation */
.div-tableau-parent .table tbody tr td .div-statut.activation-on .div-statut__icon-parent,
.div-tableau-parent .table tbody tr td .div-statut.activation-off .div-statut__icon-parent {
    border-radius: 50%;
    padding: 2px;
    display: flex;
}
.div-tableau-parent .table tbody tr td .div-statut.activation-on .div-statut__icon-parent {
    background-color: var(--vert);
}
.div-tableau-parent .table tbody tr td .div-statut.activation-off .div-statut__icon-parent {
    background-color: var(--rouge);
}
.div-tableau-parent .table tbody tr td .div-statut.activation-on svg,
.div-tableau-parent .table tbody tr td .div-statut.activation-off svg {
    width: 16px;
    fill: var(--blanc);
}







/*
-----------------------------------------
-------------- PAGE        --------------
-------------- MEDIATHEQUE --------------
-----------------------------------------
*/
#mediatheque .div-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 10px;
}
#mediatheque .div-grille .div-choix {
    gap: 10px;
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 5px;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    align-items: center;
}
#mediatheque .div-grille .div-choix img,
#mediatheque .div-grille .div-choix h4,
#mediatheque .div-grille .div-choix .div-groupe-boutons {
    width: max-content;
}
#mediatheque .div-grille .div-choix img {
    width: 40px;
}
#mediatheque .div-grille .div-choix h4 {
    min-width: min(100px, 100%);
    color: var(--gris);
    font-size: 15px;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
}







/*
-------------------------------------------
-------------- PAGE          --------------
-------------- ETABLISSEMENT --------------
-------------------------------------------
*/
#etablissement .div-input-reseauSocial {
    display: flex;
    align-items: center;
    gap: 10px;
}
#etablissement .div-input-reseauSocial input {
    margin: 0;
}







/*
----------------------------------------
-------------- PAGES      --------------
-------------- PARAMETRES --------------
----------------------------------------
*/
/* ------------
MODALES
------------ */
/* MODIFICATION IMAGE PARTAGE SOCIAL */
#modification-image-partage-social .modal-body img {
    display: block;
    border: solid 1px var(--gris-c5);
    border-radius: 10px;
    margin-bottom: 1em;
    max-height: 400px;
}




























.layout-container {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.main {
    overflow: initial;
    width: 100%;
    min-width: 0;
    word-break: break-word;
}

/* ----------------------------------
-------------------------------------
---------- SIDEBAR TOGGLER ----------
-------- (navbar et sidebar) --------
-------------------------------------
---------------------------------- */
.sidebar__toggler {
    background: none;
    border: none;
    padding: 8px;

    --largeur: 30px;
    --hauteur: 20px;
    --epaisseur: 2px;
    --espacement: calc( (var(--hauteur) - 3 * var(--epaisseur)) / 2 );
}
.sidebar__toggler:focus {
    outline: none;
}
.sidebar__toggler .sidebar__toggler-icon {
    display: block;
    width: var(--largeur);
    height: var(--hauteur);
    position: relative;
    transition: .5s ease-in-out;
}
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line {
    display: block;
    position: absolute;
    height: var(--epaisseur);
    width: 100%;
    border-radius: calc(var(--epaisseur) / 2);
    opacity: 1;
    transition: .2s ease-in-out;
}
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line:nth-child(1),
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line:nth-child(4) {
    top: calc( var(--epaisseur) + var(--espacement) );
    width: 0;
    left: 50%;
}
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line:nth-child(2),
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line:nth-child(3) {
    top: calc( var(--epaisseur) + var(--espacement) );
}
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line:nth-child(2) {
    transform: rotate(-45deg);
}
.sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line:nth-child(3) {
    transform: rotate(45deg);
}
.sidebar__toggler--open .sidebar__toggler-icon .sidebar__toggler-line:nth-child(1),
.sidebar__toggler--open .sidebar__toggler-icon .sidebar__toggler-line:nth-child(4) {
    width: 100%;
    left: 0;
}
.sidebar__toggler--open .sidebar__toggler-icon .sidebar__toggler-line:nth-child(1) {
    top: 0;
}
.sidebar__toggler--open .sidebar__toggler-icon .sidebar__toggler-line:nth-child(2),
.sidebar__toggler--open .sidebar__toggler-icon .sidebar__toggler-line:nth-child(3) {
    transform: rotate(0);
    top: calc( var(--epaisseur) + var(--espacement) );
}
.sidebar__toggler--open .sidebar__toggler-icon .sidebar__toggler-line:nth-child(4) {
    top: calc( (var(--epaisseur) + var(--espacement)) * 2 );
}






/* --------------------------
-----------------------------
---------- SIDEBAR ----------
-----------------------------
-------------------------- */
.sidebar {
    display: block;
    color: var(--blanc);
    width: 100%;
    min-width: 100%;
    max-width: none;
    height: 100vh;
    overflow: visible;
    position: fixed;
    top: 0;
    font-size: 15px;
    margin: 0;
    margin-left: -100%;
    z-index: 100;
    transition: all .8s ease;
}
.sidebar--open {
    margin-left: 0;
}
.sidebar [data-toggle=collapse]:before {
    content: none;
}
.sidebar .sidebar__content {
    display: flex;
    flex-direction: column;
    padding: 0px 8px;
    background-color: var(--violet);
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: auto;
    transition: all .8s ease;
}
.sidebar .sidebar__content .sidebar__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
    background-color: var(--violet);
    border-bottom: solid 2px var(--violet-c1);
    overflow: hidden;
    height: 75px;
    min-height: 75px;
}
.sidebar .sidebar__content .sidebar__header .sidebar__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.sidebar .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo {
    width: auto;
    height: auto;
}
.sidebar .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--small {
    display: none;
    max-width: 40px;
    max-height: 100%;
}
.sidebar .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--expand {
    display: block;
    max-width: 200px;
    max-height: 100%;
}
.sidebar .sidebar__content .sidebar__header .sidebar__toggler {
    display: block;
}
.sidebar .sidebar__content .sidebar__header .sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line {
    background-color: var(--blanc);
}

.sidebar .sidebar__content .sidebar__main {
    flex: 1;
    padding-top: 15px;
}

.sidebar .sidebar__content .sidebar__main .sidebar__user {
    margin-bottom: 10px;
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: var(--violet-c1);
    border-radius: 16px;
    padding: 15px;
    transition: all .2s ease;
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil:hover {
    background-color: var(--violet-c2);
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-photo {
    width: 42px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail {
    display: block;
    flex: 1;
    overflow: hidden;
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail .sidebar__user-name,
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail .sidebar__user-company {
    text-align: left;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail .sidebar__user-name {
    font-weight: 400;
    font-size: 16px;
    color: var(--blanc);
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail .sidebar__user-company {
    font-size: 14px;
    color: var(--violet-c6);
}
.sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil svg {
    height: 16px;
    width: 12px;
    fill: var(--blanc);
}

.sidebar .sidebar__content .sidebar__main .sidebar__main-menu {
    background-color: var(--violet-c1);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
}

.sidebar .sidebar__content .sidebar__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item {
    position: relative;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse {
    margin-left: 1em;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:not(:last-child):after,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child > .sidebar__card-link:after,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child > .sidebar__card-header > .sidebar__card-link:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 100%;
    width: 10px;
    border-left: solid 2px var(--violet-c4);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:not(:last-child):after {
    height: 100%;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child > .sidebar__card-link:after,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child > .sidebar__card-header > .sidebar__card-link:after {
    height: 50%;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item .sidebar__card-link:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: auto;
    right: 100%;
    width: 10px;
    aspect-ratio: 10 / 7;
    border-bottom-left-radius: 99px;
    border: solid 2px var(--violet-c4);
    border-top: none;
    border-right: none;
    transform: none;
    padding: 0;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: all .5s ease;
    cursor: pointer;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:not(.sidebar__card-link--disabled):hover {
    background-color: var(--violet-c2);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:not(.sidebar__card-link--disabled):active,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--active:not(.sidebar__card-link--disabled):not(:hover) {
    background-color: var(--violet-c3);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-icon {
    min-width: 1.6em;
    width: 1.6em;
    fill: var(--violet-c6);
    transition: all ease .5s;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:hover .sidebar__card-icon {
    transform: rotate(-10deg) scale(110%);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--disabled .sidebar__card-icon {
    fill: var(--violet-c3);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:not(.sidebar__card-link--disabled):active .sidebar__card-icon,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--active:not(.sidebar__card-link--disabled):not(:hover) .sidebar__card-icon {
    fill: var(--blanc);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-icon .sidebar__card-icon-outline,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-icon .sidebar__card-icon-fill {
    transition: all ease .5s;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-icon .sidebar__card-icon-fill {
    opacity: 0;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:not(.sidebar__card-link--disabled):active .sidebar__card-icon .sidebar__card-icon-outline,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--active:not(.sidebar__card-link--disabled):not(:hover) .sidebar__card-icon .sidebar__card-icon-outline {
    opacity: 0;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:not(.sidebar__card-link--disabled):active .sidebar__card-icon .sidebar__card-icon-fill,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--active:not(.sidebar__card-link--disabled):not(:hover) .sidebar__card-icon .sidebar__card-icon-fill {
    opacity: 1;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-content {
    display: block;
    color: var(--violet-c6);
    overflow: hidden;
    flex: 1;
    line-height: 1em;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--disabled .sidebar__card-content {
    color: var(--violet-c3);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link:active .sidebar__card-content,
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link--active:not(:hover) .sidebar__card-content {
    color: var(--blanc);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-content .sidebar__card-title {
    font-weight: 500;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-chevron {
    min-width: 15px;
    width: 15px;
    fill: var(--violet-c6);
    transition: all .2s ease-out;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link[data-toggle="collapse"]:not(.collapsed) .sidebar__card-chevron {
    transform: rotate(90deg);
}


.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link .sidebar__card-content .sidebar__card-title {
    transform: translateY(50%);
    transition: all .5s ease;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link:hover .sidebar__card-content .sidebar__card-title {
    transform: translateY(0);
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link .sidebar__card-content .sidebar__card-description {
    font-size: 10px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: all .5s ease;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link:hover .sidebar__card-content .sidebar__card-description {
    opacity: 1;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link .sidebar__card-content .sidebar__card-description span {
    display: inline-block;
    padding-right: 1em;
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link:hover .sidebar__card-content .sidebar__card-description span {
    animation: sidebarScrollingDescription 5s linear infinite 1s paused;
}
@keyframes sidebarScrollingDescription {
    0% {
        transform: translateX(0%);
    }
    80%, 100% {
        transform: translateX(-100%);
    }
}
.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--description .sidebar__card-link .sidebar__card-content .sidebar__card-description span::after {
    /*display: none;
    content: attr(data-content);
    margin-left: 1em;*/

    margin-left: 1em;
}


.sidebar .sidebar__content .sidebar__card-list .sidebar__card-item--framed .sidebar__card-link {
    background-color: var(--violet-c1);
}


.sidebar .sidebar__content .sidebar__bottom-menu {
    margin: 10px 0;
}
.sidebar .sidebar__content .sidebar__bottom-menu .sidebar__card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.sidebar .sidebar__content .sidebar__footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: var(--violet);
    padding-bottom: 10px;
    border-radius: 8px 8px 0 0;
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link {
    display: block;
    background-color: var(--pink);
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link:hover {
    background-color: var(--pink-f2);
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content {
    color: var(--violet-f1);
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-title {
    display: block;
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: .2em;
    text-wrap: balance;
    overflow: hidden;
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-description {
    display: block;
    margin-bottom: 0;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: all .5s ease;
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations:hover .sidebar__card-link .sidebar__card-content .sidebar__card-description {
    opacity: 1;
    height: calc(4em * 1.5); /* nbLignes * lineHeight */
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: .5em;
    gap: 8px;
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button .sidebar__card-button-icon {
    min-width: 1.6em;
    width: 1.6em;
    fill: var(--violet-f1);
}
.sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button .sidebar__card-button-text {
    display: block;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



@media (min-width: 425px) {
    .sidebar {
        position: sticky;
        width: 102px;
        min-width: 102px;
        margin-left: 0;
    }
    .sidebar .sidebar__content .sidebar__header {
        justify-content: center;
    }
    .sidebar .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--small {
        display: block;
    }
    .sidebar .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--expand {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__header .sidebar__toggler {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__main .sidebar__main-menu .icone-premium,
    .sidebar .sidebar__content .sidebar__main .sidebar__menu .icone-premium {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse {
        margin-left: 0;
    }
    .sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:not(:last-child):after,
    .sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child .sidebar__card-link:after {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item .sidebar__card-link:before {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-content {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-title {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-description {
        display: none;
    }
    .sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button {
        justify-content: center;
        margin-top: 0;
    }
    .sidebar .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button .sidebar__card-button-text {
        display: none;
    }



    .sidebar:hover .sidebar__content {
        width: 285px;
    }
    .sidebar:hover .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--small {
        display: none;
    }
    .sidebar:hover .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--expand {
        display: block;
    }
    .sidebar:hover .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail {
        display: block;
    }
    .sidebar:hover .sidebar__content .sidebar__main .sidebar__main-menu .icone-premium,
    .sidebar:hover .sidebar__content .sidebar__main .sidebar__menu .icone-premium {
        display: flex;
    }
    .sidebar:hover .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse {
        margin-left: 1em;
    }
    .sidebar:hover .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:not(:last-child):after,
    .sidebar:hover .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child .sidebar__card-link:after {
        display: flex;
    }
    .sidebar:hover .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item .sidebar__card-link:before {
        display: block;
    }
    .sidebar:hover .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-content {
        display: block;
    }
    .sidebar:hover .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-title {
        display: block;
    }
    .sidebar:hover .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-description {
        display: block;
    }
    .sidebar:hover .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button {
        justify-content: flex-start;
        margin-top: .5em;
    }
    .sidebar:hover .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button .sidebar__card-button-text {
        display: block;
    }
}

@media (min-width: 992px) {
    .sidebar[data-expandable="0"] {
        width: 285px;
        min-width: 285px;
    }
    .sidebar[data-expandable="0"] .sidebar__content {
        width: 100%;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--small {
        display: none;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__header .sidebar__brand .sidebar__logo--expand {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__main .sidebar__user .sidebar__user-profil .sidebar__user-detail {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__main .sidebar__main-menu .icone-premium,
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__main .sidebar__menu .icone-premium {
        display: flex;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse {
        margin-left: 1em;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:not(:last-child):after,
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item:last-child .sidebar__card-link:after {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-collapse .sidebar__card-list .sidebar__card-item .sidebar__card-link:before {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__card-list .sidebar__card-item .sidebar__card-link .sidebar__card-content {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-title {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-description {
        display: block;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button {
        justify-content: flex-start;
        margin-top: .5em;
    }
    .sidebar[data-expandable="0"] .sidebar__content .sidebar__footer .sidebar__card-informations .sidebar__card-link .sidebar__card-content .sidebar__card-button .sidebar__card-button-text {
        display: block;
    }
}






/* -------------------------
----------------------------
---------- NAVBAR ----------
----------------------------
------------------------- */
.navbar {
    display: block;
    background-color: var(--blanc);
    border-bottom: solid 1px var(--gris-c4);
    color: var(--gris);
    width: 100%;
    height: 75px;
    position: sticky;
    top: 0;
    z-index: 99;
    margin: 0;
    font-size: 15px;
    padding: 0;
}
.navbar .navbar__content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    height: 100%;
}

.navbar .navbar__content .navbar__search {
    flex: 1;
    position: relative;
}
.navbar .navbar__content .navbar__search .navbar__search-field {
    display: flex;
    align-items: center;
    position: relative;
}
.navbar .navbar__content .navbar__search .navbar__search-field .navbar__search-input {
    background-color: var(--blanc);
    border: 2px solid var(--gris-c4);
    border-radius: 4px;
    font-size: 15px;
    color: var(--gris);
    min-width: min(100px, 100%);
    width: 100%;
    max-width: 600px;
    padding: 7px 14px 7px 36px;
}
.navbar .navbar__content .navbar__search .navbar__search-field .navbar__search-input::placeholder {
    color: var(--gris-c4);
}
.navbar .navbar__content .navbar__search .navbar__search-field svg {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1;
    width: 22px;
    aspect-ratio: 1 / 1;
    fill: var(--gris-c4);
}
.navbar .navbar__content .navbar__search .navbar__search-results {
    display: none;
    padding-top: 5px;
    min-width: min(300px, 100%);
}
.navbar .navbar__content .navbar__search .navbar__search-results .navbar__search-results-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    border-radius: 8px;
    background-color: var(--blanc);
    box-shadow: 0 2px 8px var(--gris-c4);
}
.navbar .navbar__content .navbar__search .navbar__search-results .navbar__search-results-item {
    padding: 4px 10px;
    cursor: pointer;
    transition: all .2s ease;
}
.navbar .navbar__content .navbar__search .navbar__search-results .navbar__search-results-item:hover {
    background-color: var(--gris-c6);
}
.navbar .navbar__content .btn__list {
    display: flex;
    gap: 8px;
}
.navbar .navbar__content .btn__list .btn__text {
    display: none;
}
.navbar .navbar__content .sidebar__toggler {
    display: block;
}
.navbar .navbar__content .sidebar__toggler .sidebar__toggler-icon .sidebar__toggler-line {
    background-color: var(--gris);
}

@media (min-width: 425px) {
    .navbar .navbar__content .sidebar__toggler {
        display: none;
    }
}

@media (min-width: 992px) {
    .navbar .navbar__content .btn__list .btn__text {
        display: block;
    }
}






/* ---------------------------
------------------------------
---------- SECTIONS ----------
------------------------------
--------------------------- */
.section {
    margin-bottom: 3em;
}
.section-card .section-card__title {
    text-transform: uppercase;
    color: var(--gris-c2);
    font-size: 1.1em;
}
.section-card .card__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1em;
}
.section-card .card__list .card__item {
    background-color: var(--gris-c7);
    border: solid 1px var(--gris-c5);
    border-radius: 10px;
    height: 100%;
    overflow: hidden;
    transition: all ease .2s;
}
.section-card .card__list .card__item.card__link {
    display: block;
    height: 100%;
    text-decoration: none;
    cursor: default;
}
.section-card .card__list .card__item--disabled {
    background-color: var(--gris-c6);
}
.section-card .card__list .card__item.card__link:not(.card__item--disabled) {
    cursor: pointer;
}
.section-card .card__list .card__item.card__link:not(.card__item--disabled):hover {
    background-color: var(--violet-c8);
    border-color: var(--violet-c6);
}
.section-card .card__list .card__item .card__content {
    padding: 15px;
    height: 100%;
}
.section-card .card__list .card__item .card__title {
    color: var(--violet);
    font-size: 1.2em;
    margin: 0 0 .2em;
}
.section-card .card__list .card__item .icone-premium__parent .card__title {
    flex: 1;
}
.section-card .card__list .card__item .card__subtitle {
    color: var(--violet-c2);
    text-transform: uppercase;
    font-size: .8em;
    margin: 0 0 .5em;
}
.section-card .card__list .card__item .card__text {
    color: var(--gris);
    margin: 0;
}
.section-card .card__list .card__item--disabled .card__title,
.section-card .card__list .card__item--disabled .card__subtitle,
.section-card .card__list .card__item--disabled .card__text {
    color: var(--gris-c3);
}



/* FONCTIONNALITES */
.section-card .card__list .card-features__item {
    display: flex;
    flex-direction: column;
}
.section-card .card__list .card-features__item .card__illustration {
    height: 80px;
    background-color: var(--bleu);
    overflow: hidden;

    --motif-taille: 20px;
}
.section-card .card__list .card-features__item.card__item--disabled .card__illustration {
    background-color: var(--gris-c4);
}
.section-card .card__list .card-features__item .card__illustration-motif {
    --background-url: url('../../assets/images/app/pages/fonctionnalites/communication/blog.svg');

    opacity: 8%;
    height: 100%;
    background-size: var(--motif-taille) calc(var(--motif-taille) * 2), var(--motif-taille) calc(var(--motif-taille) * 2);
    background-repeat: repeat, repeat;
    background-position: 0px 0px, calc(var(--motif-taille) / 2) var(--motif-taille);
    background-image: var(--background-url), var(--background-url);
}

.section-card .card__list .card-features__item .card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.section-card .card__list .card-features__item .card__logo {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: -39px;
    margin-bottom: .5em;
}
.section-card .card__list .card-features__item .card__logo-icon {
    display: block;
    padding: 6px;
    border-radius: 5px;
    background-color: var(--bleu);
    border: solid 1px var(--bleu);
    outline: solid 3px var(--gris-c7);
}
.section-card .card__list .card-features__item.card__item--disabled .card__logo-icon {
    background-color: var(--blanc);
    border-color: var(--gris-c5);
    outline-color: var(--gris-c6);
}
.section-card .card__list .card-features__item .card__icon {
    width: 32px;
    fill: var(--blanc);
    transition: all ease .2s;
}
.section-card .card__list .card-features__item.card__item--disabled .card__icon {
    fill: var(--gris-c3);
}
.section-card .card__list .card-features__item .card__text {
    flex: 1;
}

#card-features__item__blog .card__illustration-motif {
    --background-url: url('../../assets/images/app/pages/fonctionnalites/communication/blog.svg');
}
#card-features__item__blog:not(.card__item--disabled) .card__illustration {
    background-color: var(--neon-blue-c1);
}
#card-features__item__blog:not(.card__item--disabled) .card__logo-icon {
    background-color: var(--neon-blue-c1);
    border-color: var(--neon-blue-c1);
}

#card-features__item__newsletter .card__illustration-motif {
    --background-url: url('../../assets/images/app/pages/fonctionnalites/communication/newsletter.svg');
}
#card-features__item__newsletter:not(.card__item--disabled) .card__illustration {
    background-color: var(--aquamarine);
}
#card-features__item__newsletter:not(.card__item--disabled) .card__logo-icon {
    background-color: var(--aquamarine);
    border-color: var(--aquamarine);
}

#card-features__item__chat .card__illustration-motif {
    --background-url: url('../../assets/images/app/pages/fonctionnalites/communication/chat.svg');
}
#card-features__item__chat:not(.card__item--disabled) .card__illustration {
    background-color: var(--violet-c4);
}
#card-features__item__chat:not(.card__item--disabled) .card__logo-icon {
    background-color: var(--violet-c4);
    border-color: var(--violet-c4);
}

#card-features__item__catalogue-produits .card__illustration-motif {
    --background-url: url('../../assets/images/app/pages/fonctionnalites/commerce/catalogue-produits.svg');
}
#card-features__item__catalogue-produits:not(.card__item--disabled) .card__illustration {
    background-color: var(--salmon);
}
#card-features__item__catalogue-produits:not(.card__item--disabled) .card__logo-icon {
    background-color: var(--salmon);
    border-color: var(--salmon);
}

#card-features__item__e-commerce .card__illustration-motif {
    --background-url: url('../../assets/images/app/pages/fonctionnalites/commerce/e-commerce.svg');
}
#card-features__item__e-commerce:not(.card__item--disabled) .card__illustration {
    background-color: var(--orange);
}
#card-features__item__e-commerce:not(.card__item--disabled) .card__logo-icon {
    background-color: var(--orange);
    border-color: var(--orange);
}



/* PARAMETRES */
.section-card .card__list .card-parameters__item .card__content {
    display: flex;
    align-items: start;
    gap: 1em;
}
.section-card .card__list .card-parameters__item .card__icon {
    width: 24px;
    fill: var(--violet);
    transition: all ease .2s;
}
.section-card .card__list .card-parameters__item.card__item--disabled .card__icon {
    fill: var(--gris-c3);
}
.section-card .card__list .card-parameters__item:not(.card__item--disabled):hover .card__icon {
    transform: rotate(-10deg) scale(110%);
}
.section-card .card__list .card-parameters__item .card__description {
    flex: 1;
}
.section-card .card__list .card-parameters__item .card__variable {
    color: var(--gris-c3);
    margin: 1em 0 0;
}
.section-card .card__list .card-parameters__item .card__variable .card__variable-label {
    font-weight: 500;
}

.section-card .card__list .card-parameters__item--image .card__description {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: .5em;
}
.section-card .card__list .card-parameters__item--image .card__text-image {
    flex: 1;
    min-width: min(150px, 100%);
}
.section-card .card__list .card-parameters__item--image .card__image {
    width: 80px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border: solid 1px var(--gris-c5);
    border-radius: 5px;
}

.driver-popover {
    all: unset;
    box-sizing: border-box;
    color: #2d2d2d;
    margin: 0;
    padding: 15px;
    border-radius: 5px;
    min-width: 250px;
    max-width: 300px;
    box-shadow: 0 1px 10px #0006;
    z-index: 1000000000;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    pointer-events: auto;
}







/* ---------- LA TODOLIST ---------- */
#todolistsite .progress {
    position: relative;
}
#todolistsite .progress .progress-bar {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background-color: var(--bleu) !important;
}

#todolistsite .btn-group {
    padding: 2px;
}
#todolistsite .btn-group-border {
    border: solid 1px var(--gris-c4);
}
#todolistsite .btn-group-border .btn {
    padding: 0.25rem 0.75rem;
    font-size: 80%;
    line-height: 1.2;
}


#todolistsite.todo .todo-item.completed{
    display: none;
}

#todolistsite.done .todo-item:not(.completed){
    display: none;
}

#todolistsite .todo-item.completed {
    background-color: var(--gris-c5);
    opacity: 0.6;
    text-decoration: line-through;
}
#todolistsite .todo-item .badge.bg-success {
    background-color: var(--pink-f2)!important;
}


#todolistsite .check-toggle-wrapper {
    width: 32px;
    min-width: 32px;
    flex-shrink: 0;
}

#todolistsite .check-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 2px solid var(--gris-c3);
    background-color: white;
    margin-right: 12px;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}
#todolistsite .check-toggle svg {
    position: absolute;
    width: 18px;
    height: 18px;
    fill: var(--violet);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
#todolistsite .check-toggle .icon-check {
    z-index: 1;
}
#todolistsite .check-toggle .icon-cross {
    z-index: 2;
}
#todolistsite .todo-item:not(.completed) .check-toggle:hover .icon-check {
    opacity: 1;
}
#todolistsite .todo-item.completed .check-toggle {
    background-color: var(--violet);
    border-color: var(--violet);
}
#todolistsite .todo-item.completed .check-toggle .icon-check {
    opacity: 1;
    fill: white;
}
#todolistsite .todo-item.completed .check-toggle:hover .icon-check {
    opacity: 0;
}
#todolistsite .todo-item.completed .check-toggle:hover .icon-cross {
    opacity: 1;
    fill: white;
}

#todolistsite .todo-item.completed .btn.dotache{
    display: none;
}