/*
 * ==========================================================================
 * WEB PROPULSE - STYLES ADMIN
 * ==========================================================================
 * Styles de l'interface d'administration (espace commercant, admin, etc.)
 *
 * Les tokens (variables CSS) sont définis dans :
 * design-system-admin/_tokens.css
 * ==========================================================================
 */

@import url('design-system-admin/_tokens.css');
@import url('design-system-admin/_sidebar.css');
@import url('design-system-admin/_modals.css');
@import url('design-system-admin/_buttons.css');
@import url('design-system-admin/_messages.css');
@import url('design-system-admin/_forms.css');
@import url('design-system-admin/_clients.css');
@import url('design-system-admin/_loader.css');
@import url('design-system-admin/_tables.css');
@import url('design-system-admin/_dropdowns.css');
@import url('design-system-admin/_tabs.css');



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;
}









.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;
}


.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;
}





/*
 * FORMULAIRES : voir design-system-admin/_forms.css
 */



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



/* ----------
LOADER
---------- */



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



/*
 * BOUTONS : voir design-system-admin/_buttons.css
 */




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

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



/*
 * NAVIGATION (TABS & PILLS) : voir design-system-admin/_tabs.css
 */

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





/*
 * DROPDOWN MENU : voir design-system-admin/_dropdowns.css
 */




.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;
}



/*
 * SELECT2, SELECTION RAPIDE, COLOR PICKER : voir design-system-admin/_forms.css
 */



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






/* ----------
MESSAGE ASSISTANTS
---------- */
/* GENERALES */



/* ----------
NOTIFICATION ASSISTANTS
---------- */
/* GENERALES */



/* ----------
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
---------- */



/* LES SPAMS */
.div-tableau-parent .table.table-striped tbody tr.spam {
    display: none!important;
}
.div-tableau-parent.afficherspams .table.table-striped tbody tr.spam {
    display: table-row!important;
}
.div-tableau-parent .table.table-striped tbody tr.spam {
    background-color: var(--gris-c6);
    color: var(--gris-50p);
    border-top-color: var(--gris-c4);
}
/* Bouton clair primary */
.div-tableau-parent .table.table-striped tbody tr.spam .btn.btn-clair-primary.btn-petit {
    color: var(--bleu-50p);
    border-color: var(--bleu-50p);
    background-color: var(--blanc-50p);
    fill: var(--bleu-50p);
}
.div-tableau-parent .table.table-striped tbody tr.spam .btn.btn-clair-primary.btn-petit:hover,
.div-tableau-parent .table.table-striped tbody tr.spam .btn.btn-clair-primary.btn-petit:focus {
    color: var(--bleu-f1-50p);
    border-color: var(--bleu-f1-50p);
    background-color: var(--bleu-c6);
    box-shadow: none;
}

/* Bouton clair secondary */
.div-tableau-parent .table.table-striped tbody tr.spam .btn.btn-clair-secondary.btn-petit {
    color: var(--gris-50p);
    border-color: var(--gris-c4);
    background-color: var(--gris-c7);
    fill: var(--gris-50p);
}
.div-tableau-parent .table.table-striped tbody tr.spam .btn.btn-clair-secondary.btn-petit:hover,
.div-tableau-parent .table.table-striped tbody tr.spam .btn.btn-clair-secondary.btn-petit:focus {
    color: var(--violet-50p);
    border-color: var(--gris-c3);
    background-color: var(--gris-c6);
    box-shadow: none;
}

.div-tableau-parent .table.table-striped tbody tr:not(.spam) .btn-retirer-spams {
    display: none;
}
.div-tableau-parent .table.table-striped tbody tr.spam .btn-ajouter-spams {
    display: none;
}

.modalspam.js-classer-spams .js-print-sortir-spams{
    display: none;
}
.modalspam.js-sortir-spams .js-print-classer-spams{
    display: none;
}








#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%;
}



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



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 ----- */




/* ----- LES MODALS ----- */



/* ----- 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
------------ */


/* 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%;
}



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

.div-bloc-options h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.div-bloc-options label {
    color: var(--gris);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

/* Sous-sections dans un div-bloc-options */
.div-bloc-options:has(.div-options) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.div-bloc-options .div-options:not(:first-child) {
    padding-top: 16px;
    border-top: solid 1px var(--gris-c4);
}

/* Utilitaires d'espacement */
.gaps-v {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gaps-h {
    display: flex;
    align-items: center;
    gap: 10px;
}







/*
------------------------------------
-------------- PAGE ----------------
-------------- NAVBAR --------------
------------------------------------
*/

#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 .choix-btn-group .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-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(2) {
    max-width: 200px;
}


/* Liste des contacts reçus */
#liste-contacts .div-bloc-options .table thead tr th:nth-child(1){
    width: 12.5%;
    min-width: 100px;
}
#liste-contacts .div-bloc-options .table thead tr th:nth-child(2),
#liste-contacts .div-bloc-options .table thead tr th:nth-child(3) {
    width: 15%;
    min-width: 100px;
}
#liste-contacts .div-bloc-options .table thead tr th:nth-child(4) {
    width: 60%;
    min-width: 400px;
}
#liste-contacts .div-bloc-options .table tbody tr td:nth-child(4) {
    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 : voir design-system-admin/_sidebar.css
 */





/* -------------------------
----------------------------
---------- 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;
}



/*
-------------------------------------------------
-------------- MODALE                 -----------
-------------- DESIGN SYSTEM          -----------
-------------------------------------------------
*/

.modal-design-system .modal-dialog {
    max-width: 700px;
}

.modal-design-system .modal-body {
    padding: 32px;
}

.modal-design-system .charte-explication {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Hero de l'explication */
.modal-design-system .explication-hero {
    text-align: center;
}

.modal-design-system .explication-schema {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 24px;
}

.modal-design-system .schema-source {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--violet-c6), var(--bleu-c6));
    border-radius: 12px;
    border: 2px solid var(--violet);
}

.modal-design-system .schema-source .schema-icone {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-design-system .schema-source .schema-icone svg {
    width: 32px;
    height: 32px;
    color: var(--violet);
}

.modal-design-system .schema-source span {
    font-weight: 600;
    color: var(--violet);
}

.modal-design-system .schema-fleches {
    color: var(--violet);
    height: 60px;
}

.modal-design-system .schema-fleches svg {
    width: 100%;
    height: 60px;
}

.modal-design-system .schema-destinations {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.modal-design-system .schema-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--gris-c7);
    border: 1px solid var(--gris-c5);
    border-radius: 8px;
}

.modal-design-system .schema-page svg {
    width: 24px;
    height: 24px;
    color: var(--gris-c2);
}

.modal-design-system .schema-page span {
    font-size: 0.75rem;
    color: var(--gris-c2);
}

.modal-design-system .explication-texte {
    font-size: 1rem;
    color: var(--gris-f1);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Comparaison */
.modal-design-system .explication-comparaison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.modal-design-system .comparaison-item {
    padding: 20px;
    border-radius: 12px;
}

.modal-design-system .comparaison-item h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.modal-design-system .comparaison-item h4 svg {
    width: 18px;
    height: 18px;
}

.modal-design-system .comparaison-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-design-system .comparaison-item li {
    font-size: 0.875rem;
    line-height: 1.8;
    padding-left: 16px;
    position: relative;
}

.modal-design-system .comparaison-item li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.modal-design-system .comparaison-sans {
    background: var(--rouge-c6);
    border: 1px solid var(--rouge-c5);
}

.modal-design-system .comparaison-sans h4 {
    color: var(--rouge);
}

.modal-design-system .comparaison-sans li::before {
    background: var(--rouge);
}

.modal-design-system .comparaison-avec {
    background: var(--vert-c6);
    border: 1px solid var(--vert-c5);
}

.modal-design-system .comparaison-avec h4 {
    color: var(--vert);
}

.modal-design-system .comparaison-avec li::before {
    background: var(--vert);
}

/* Éléments configurables */
.modal-design-system .explication-elements h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gris-f1);
    text-align: center;
    margin-bottom: 16px;
}

.modal-design-system .elements-grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.modal-design-system .element-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: var(--gris-c7);
    border-radius: 8px;
}

.modal-design-system .element-icone {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--violet-c6);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--violet);
}

.modal-design-system .element-icone-btn {
    background: var(--violet);
    color: white;
    font-size: 0.625rem;
    border-radius: 4px;
}

.modal-design-system .element-item span:last-child {
    font-size: 0.75rem;
    color: var(--gris-f1);
    text-align: center;
}

@media (max-width: 768px) {
    .modal-design-system .explication-comparaison {
        grid-template-columns: 1fr;
    }

    .modal-design-system .elements-grille {
        grid-template-columns: repeat(3, 1fr);
    }
}