@viewport {
width: device-width;
zoom: 1.0;
}

/* 06/2021 : supprimer le message Slow network is detected. Fallback font will be used while loading fa-solid-900.woff2 */
/* * { font-display: block; } */


.drop_zone_doliplus {
border: 2px dashed #ccc;
border-radius: 20px;
width: 60%;
height: 100px;
padding-top: 10px;
padding-left: 3px;
padding-bottom: 5px;
text-align: center;
margin: 10px auto;
}

/* ============================================================================== */
/* Styles par defaut */
/* ============================================================================== */

body {
margin-top: 0;
color: #101010;
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
text-align: left;
direction: ltr;
}

a:link,
a:visited,
a:active {
font-family: arial,tahoma,verdana,helvetica;
font-weight: bold;
color: #27277c;
text-decoration: none;
}

a:hover {
font-family: arial,tahoma,verdana,helvetica;
font-weight: bold;
color: #2c3e50;
text-decoration: none;
}

input {
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
background: #f5f7fa;
border: 1px solid #ACBCBB;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

input.flat {
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
background-color: #f5f7fa;
background-image: linear-gradient(to bottom, #f5f7fa, #fafbfc);
border: 1px solid #ACBCBB;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

/* SelectAutocomplet lib/lib_head.js — combobox modernisé (2026-06) :
   plus de bouton-flèche jQuery UI accolé ; l'apparence "select" vient d'un chevron
   dessiné en fond d'input, la liste complète s'ouvre au clic dans le champ. */
input.flat-combobox-doli {
font-size: 12px ! important;;
font-family: arial,tahoma,verdana,helvetica ! important;;
background-color: #f5f7fa ! important;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a90a0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(to bottom, #f5f7fa, #fafbfc);
background-repeat: no-repeat, repeat;
background-position: right 7px center, 0 0;
line-height: 13.7px ! important;
border: 1.5px solid #ACBCBB ! important;
cursor: pointer;
padding-right: 22px ! important;
}
/* .ui-button-icon-doli : règle supprimée — le bouton-flèche n'est plus généré (lib_head.js) */

input:disabled {
background: #ddd;
}

textarea {
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
background: #f5f7fa;
border: 1px solid #ACBCBB;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

textarea.flat {
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
background: #f5f7fa;
border: 1px solid #ACBCBB;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

textarea:disabled {
background: #ddd;
}

select.flat {
background: #f5f7fa;
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
font-weight: normal;
border: 1px solid #ACBCBB;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

input.button[type=submit],
input.button[type=button] {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
border: 1px solid #e8eef5;
color: #27433f;
padding: 4px 10px;
margin: 4px 10px;
text-decoration: none;
white-space: nowrap;
font-size: 13px;
display: inline-block;
cursor: pointer;
-moz-border-radius: 8px;
border-radius: 8px;
}

input.button[type=submit]:hover,
input.button[type=button]:hover {
background-color: #d0daea;
color: #4A90E2;
font-size: 13px;
}

.button {
font-family: arial,tahoma,verdana,helvetica;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
border: 1px solid #ACBCBB;
padding: 4px 10px;
margin: 0px 0px 0px 0px;
}

.button:focus {
font-family: arial,tahoma,verdana,helvetica;
color: #222244;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
border: 1px solid #ACBCBB;
padding: 0px 2px 0px 2px;
margin: 0px 0px 0px 0px;
}

.buttonajax {
font-family: arial,tahoma,verdana,helvetica;
font-size: 13px;
border: 0px;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

form {
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}

div.float {
float: left;
}

/* For hide object and add pointer cursor */

.hideobject {
display: none;
}

.linkobject {
cursor: pointer;
}

/* For dragging lines */

.dragClass {
color: #002255;
}

td.showDragHandle {
cursor: move;
}

.tdlineupdown {
white-space: nowrap;
}


/* ============================================================================== */
/* Styles de positionnement des zones */
/* ============================================================================== */
div.leftContent {
margin-left: 0px !important;
width: 200px !important;
background-color: #FFF;
}


td.vmenu {
margin-right: 2px;
padding: 0px;
padding-bottom: 0px;
padding-top: 1px;
width: 200px;
}

div.fiche {
margin-left: 5px;
margin-right: 5px;
*/
}

/* ============================================================================== */
/* New */
/* ============================================================================== */

.center {
text-align: center;
margin: 10px auto;
}

.left {
text-align: left;
}

.right {
text-align: right;
}

.justify {
text-align: justify;
}

div.fichecenter {
width: 100%;
clear: both;
}

div.fichecenterbis {
margin-top: 8px;
}


/* Divs 70 - 30 % */
div.fiche_third_left {
float: left;
width: 70%;
padding-bottom: 6px;
}

div.fiche_two_third_right {
float: right;
width: 30%;
padding-bottom: 6px
}

/* Divs 30 - 70 % */
div.fichethirdleft {
float: left;
width: 30%;
padding-bottom: 6px;
}

div.fichetwothirdright {
float: right;
width: 70%;
padding-bottom: 6px
}
/* Divs 50 - 50 % */
div.fichehalfleft {
float: left;
width: 50%;
padding-bottom: 6px;
}

div.fichehalfright {
float: right;
width: 50%;
padding-bottom: 6px
}

div.ficheaddleft {
padding-left: 11px;
}

.table100 {
}

div.undercard {
border-bottom: 1px solid rgb(#2c3e50);
clear: both;
}

/* Force values on one colum for small screen (768px pour conserver 2 colonnes sur tablettes) */
@media only screen and (max-width: 768px) {

div.fichecenter {
width: 100%;
clear: both;
}

div.fichecenterbis {
margin-top: 8px;
}

div.fichethirdleft {
float: none;
width: auto;
padding-bottom: 6px;
}

div.fichetwothirdright {
float: none;
width: auto;
padding-bottom: 6px;
}

div.fichehalfleft {
float: none;
width: auto;
}

div.fichehalfright {
float: none;
width: auto;
}

div.ficheaddleft {
padding-left: 0px;
margin-top: 10px;
}
}

/* ============================================================================== */
/* Overide jquery datepicker */
/* ============================================================================== */

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #2c3e50;
background: #2c3e50;
font-weight: normal;
color: #FFFFFF;
}


/* modig gp .ui-datepicker-today https://stackoverflow.com/questions/15005263/how-to-change-default-highlighted-today-date-in-datepicker */
.ui-state-default .ui-state-highlight {
border: 1px solid #dad55e;
background: #dad55e;
color: #777620;
}

/* ============================================================================== */
/* Menu top et 1ere ligne tableau */
/* ============================================================================== */

div.tmenu {
min-height: 65px;
padding: 0px 50px 0px 0px;
position: relative;
display: block;
white-space: nowrap;
border-bottom: none;
/* t r b l */
/* margin: 0px 30px 0px 0px; */
font-weight: normal;
background: #FFF;
color: #000;
text-decoration: none;
}

#undertopmenu {
/* margin-bottom: 150px !important; */
margin-bottom: 20px !important;
}

table.tmenu {
padding: 0px 0px 5px 0px;
/* t r b l */
margin: 0px 0px 0px 0px;
/* t r b l */
text-align: center;
}

td.tmenu {
width: 70px;text-align: center;
vertical-align: bottom;
white-space: nowrap;
height: 20px;
}

a.tmenudisabled:link,
a.tmenudisabled:visited,
a.tmenudisabled:hover,
a.tmenudisabled:active {
color: #757575;
font-weight: normal;
padding: 0px 5px 0px 5px;
margin: 0px 1px 2px 1px;
cursor: not-allowed;
white-space: nowrap;
}

a.tmenu:link,
a.tmenu:visited,
a.tmenu:hover,
a.tmenu:active {
color: #27433f;
padding: 0px 10px 0px 10px;
/*margin: 0px 1px 0px 1px;*/
/*font-weight: bold;*/
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
white-space: nowrap;
height: 20px;

-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 0px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;

border: 1px solid #2c3e50;
background-color: #e8eef5;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5) !important;
}

a.tmenu:hover,
a.tmenu:active {
color: #4A90E2;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 0px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
background: #e8eef5;
/* old browsers */
}

a.tmenusel:link,
a.tmenusel:visited,
a.tmenusel:hover,
a.tmenusel:active {
color: #4A90E2;
font-weight: bold;
height: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0px 10px 0px 10px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 0px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
background: #e8eef5;
/* old browsers */
}


ul.tmenu {
/* t r b l */
padding: 0px 0px 10px 0px;
margin: 0px 0px 0px 6px;
list-style: none;
}

li.tmenu {
text-align: center;
vertical-align: top;
float: left;
height: 47px;
display: block;
padding: 1px 2px 0px 2px;
margin: 0px 0px 0px 0px;
font-weight: normal;
}



.gecko li.tmenu {
/* uniquement pour firefox */
padding: 4px 2px 4px 2px;
margin: 0px 0px 0px 0px;
}


div.mainmenu {
position: relative;
color: white;
background-repeat: no-repeat;
background-position: center top;
height: 28px;
margin-left: 0px;
}

div.mainmenu.home {
background-image: url(/htdocs/theme/common/img/menus/home.png);
}

div.mainmenu.companies {
background-image: url(/htdocs/theme/common/img/menus/company.png);
}

div.mainmenu.members {
background-image: url(/htdocs/theme/common/img/menus/members.png);
}

div.mainmenu.products {
background-image: url(/htdocs/theme/common/img/menus/products.png);
margin-left: 10px;
}

div.mainmenu.commercial {
background-image: url(/htdocs/theme/common/img/menus/commercial.png);
}

div.mainmenu.accountancy {
background-image: url(/htdocs/theme/common/img/menus/money.png);
}

div.mainmenu.bank {
background-image: url(/htdocs/theme/common/img/menus/bank.png);
}

div.mainmenu.project {
background-image: url(/htdocs/theme/common/img/menus/project.png);
}

div.mainmenu.tools {
background-image: url(/htdocs/theme/common/img/menus/tools.png);
}

div.mainmenu.ftp {
background-image: url(/htdocs/theme/common/img/menus/tools.png);
}

div.mainmenu.members {
background-image: url(/htdocs/theme/common/img/menus/members.png);
}

div.mainmenu.shop {
background-image: url(/htdocs/theme/common/img/menus/shop.png);
}

div.mainmenu.agenda {
background-image: url(/htdocs/theme/common/img/menus/agenda.png);
}

div.mainmenu.ecm {
background-image: url(/htdocs/theme/common/img/menus/ecm.png);
}

div.mainmenu.cashdesk {
background-image: url(/htdocs/theme/common/img/menus/pointofsale.png);
}

div.mainmenu.webcal {
background-image: url(/htdocs/theme/common/img/menus/agenda.png);
}

/* A mainmenu entry but img file support.png not found, so we use a generic one */
div.mainmenu.support {
	background-image: url(/htdocs/custom/support/img/support.png);
	height:28px;
}
/* A mainmenu entry but img file multicompany.png not found, so we use a generic one */
div.mainmenu.multicompany {
	background-image: url(/htdocs/custom/multicompany/img/multicompany.png);
	height:28px;
}
/* A mainmenu entry but img file nginx.png not found, so we use a generic one */
div.mainmenu.nginx {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic1.png);
	height:28px;
}
/* A mainmenu entry but img file fa_icon_ndfp.png not found, so we use a generic one */
div.mainmenu.fa_icon_ndfp {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic2.png);
	height:28px;
}
/* A mainmenu entry but img file fa_icon_nginx.png not found, so we use a generic one */
div.mainmenu.fa_icon_nginx {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic3.png);
	height:28px;
}
/* A mainmenu entry but img file fa_icon_notifi.png not found, so we use a generic one */
div.mainmenu.fa_icon_notifi {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic4.png);
	height:28px;
}
/* A mainmenu entry but img file sepa.png not found, so we use a generic one */
div.mainmenu.sepa {
	background-image: url(/htdocs/custom/sepa/img/sepa.png);
	height:28px;
}
/* A mainmenu entry but img file bankimport.png not found, so we use a generic one */
div.mainmenu.bankimport {
	background-image: url(/htdocs/custom/bankimport/img/bankimport.png);
	height:28px;
}
/* A mainmenu entry but img file contacts.png not found, so we use a generic one */
div.mainmenu.contacts {
	background-image: url(/htdocs/custom/contacts/img/contacts.png);
	height:28px;
}
/* A mainmenu entry but img file incoterm.png not found, so we use a generic one */
div.mainmenu.incoterm {
	background-image: url(/htdocs/custom/incoterm/img/incoterm.png);
	height:28px;
}
/* A mainmenu entry but img file multicurrency.png not found, so we use a generic one */
div.mainmenu.multicurrency {
	background-image: url(/htdocs/custom/multicurrency/img/multicurrency.png);
	height:28px;
}
/* A mainmenu entry but img file catalogue.png not found, so we use a generic one */
div.mainmenu.catalogue {
	background-image: url(/htdocs/custom/catalogue/img/catalogue.png);
	height:28px;
}
/* A mainmenu entry but img file cron.png not found, so we use a generic one */
div.mainmenu.cron {
	background-image: url(/htdocs/custom/cron/img/cron.png);
	height:28px;
}
/* A mainmenu entry but img file facavance.png not found, so we use a generic one */
div.mainmenu.facavance {
	background-image: url(/htdocs/custom/facavance/img/facavance.png);
	height:28px;
}
/* A mainmenu entry but img file formulaire.png not found, so we use a generic one */
div.mainmenu.formulaire {
	background-image: url(/htdocs/custom/formulaire/img/formulaire.png);
	height:28px;
}
/* A mainmenu entry but img file grh.png not found, so we use a generic one */
div.mainmenu.grh {
	background-image: url(/htdocs/custom/grh/img/grh.png);
	height:28px;
}
/* A mainmenu entry but img file caldav.png not found, so we use a generic one */
div.mainmenu.caldav {
	background-image: url(/htdocs/custom/caldav/img/caldav.png);
	height:28px;
}
/* A mainmenu entry but img file marketing.png not found, so we use a generic one */
div.mainmenu.marketing {
	background-image: url(/htdocs/custom/marketing/img/marketing.png);
	height:28px;
}
/* A mainmenu entry but img file messagerie.png not found, so we use a generic one */
div.mainmenu.messagerie {
	background-image: url(/htdocs/custom/messagerie/img/messagerie.png);
	height:28px;
}
/* A mainmenu entry but img file shippableorder.png not found, so we use a generic one */
div.mainmenu.shippableorder {
	background-image: url(/htdocs/custom/shippableorder/img/shippableorder.png);
	height:28px;
}
/* A mainmenu entry but img file ndfp.png not found, so we use a generic one */
div.mainmenu.ndfp {
	background-image: url(/htdocs/custom/ndfp/img/ndfp.png);
	height:28px;
}
/* A mainmenu entry but img file milestone.png not found, so we use a generic one */
div.mainmenu.milestone {
	background-image: url(/htdocs/custom/milestone/img/milestone.png);
	height:28px;
}
/* A mainmenu entry but img file onlyoffice.png not found, so we use a generic one */
div.mainmenu.onlyoffice {
	background-image: url(/htdocs/custom/onlyoffice/img/onlyoffice.png);
	height:28px;
}
/* A mainmenu entry but img file mobile.png not found, so we use a generic one */
div.mainmenu.mobile {
	background-image: url(/htdocs/custom/mobile/img/mobile.png);
	height:28px;
}
/* A mainmenu entry but img file archives.png not found, so we use a generic one */
div.mainmenu.archives {
	background-image: url(/htdocs/custom/archives/img/archives.png);
	height:28px;
}
/* A mainmenu entry but img file chat.png not found, so we use a generic one */
div.mainmenu.chat {
	background-image: url(/htdocs/custom/chat/img/chat.png);
	height:28px;
}
/* A mainmenu entry but img file calling.png not found, so we use a generic one */
div.mainmenu.calling {
	background-image: url(/htdocs/custom/calling/img/calling.png);
	height:28px;
}
/* A mainmenu entry but img file factory.png not found, so we use a generic one */
div.mainmenu.factory {
	background-image: url(/htdocs/custom/factory/img/factory.png);
	height:28px;
}
/* A mainmenu entry but img file stockplus.png not found, so we use a generic one */
div.mainmenu.stockplus {
	background-image: url(/htdocs/custom/stockplus/img/stockplus.png);
	height:28px;
}
/* A mainmenu entry but img file cloud.png not found, so we use a generic one */
div.mainmenu.cloud {
	background-image: url(/htdocs/custom/cloud/img/cloud.png);
	height:28px;
}
/* A mainmenu entry but img file barcodeplus.png not found, so we use a generic one */
div.mainmenu.barcodeplus {
	background-image: url(/htdocs/custom/barcodeplus/img/barcodeplus.png);
	height:28px;
}
/* A mainmenu entry but img file tri.png not found, so we use a generic one */
div.mainmenu.tri {
	background-image: url(/htdocs/custom/tri/img/tri.png);
	height:28px;
}
/* A mainmenu entry but img file speedfinder.png not found, so we use a generic one */
div.mainmenu.speedfinder {
	background-image: url(/htdocs/custom/speedfinder/img/speedfinder.png);
	height:28px;
}
/* A mainmenu entry but img file ticketsup.png not found, so we use a generic one */
div.mainmenu.ticketsup {
	background-image: url(/htdocs/custom/ticketsup/img/ticketsup.png);
	height:28px;
}
/* A mainmenu entry but img file cr.png not found, so we use a generic one */
div.mainmenu.cr {
	background-image: url(/htdocs/custom/cr/img/cr.png);
	height:28px;
}
/* A mainmenu entry but img file linkweb.png not found, so we use a generic one */
div.mainmenu.linkweb {
	background-image: url(/htdocs/custom/linkweb/img/linkweb.png);
	height:28px;
}
/* A mainmenu entry but img file brevo.png not found, so we use a generic one */
div.mainmenu.brevo {
	background-image: url(/htdocs/custom/brevo/img/brevo.png);
	height:28px;
}
/* A mainmenu entry but img file categorycontact.png not found, so we use a generic one */
div.mainmenu.categorycontact {
	background-image: url(/htdocs/custom/categorycontact/img/categorycontact.png);
	height:28px;
}
/* A mainmenu entry but img file outils.png not found, so we use a generic one */
div.mainmenu.outils {
	background-image: url(/htdocs/custom/outils/img/outils.png);
	height:28px;
}
/* A mainmenu entry but img file lead.png not found, so we use a generic one */
div.mainmenu.lead {
	background-image: url(/htdocs/custom/lead/img/lead.png);
	height:28px;
}
/* A mainmenu entry but img file inventory.png not found, so we use a generic one */
div.mainmenu.inventory {
	background-image: url(/htdocs/custom/inventory/img/inventory.png);
	height:28px;
}
/* A mainmenu entry but img file accountingex.png not found, so we use a generic one */
div.mainmenu.accountingex {
	background-image: url(/htdocs/custom/accountingex/img/accountingex.png);
	height:28px;
}
/* A mainmenu entry but img file notifi.png not found, so we use a generic one */
div.mainmenu.notifi {
	background-image: url(/htdocs/custom/notifi/img/notifi.png);
	height:28px;
}
/* A mainmenu entry but img file cloudtheme.png not found, so we use a generic one */
div.mainmenu.cloudtheme {
	background-image: url(/htdocs/custom/cloudtheme/img/cloudtheme.png);
	height:28px;
}
/* A mainmenu entry but img file box.png not found, so we use a generic one */
div.mainmenu.box {
	background-image: url(/htdocs/custom/box/img/box.png);
	height:28px;
}
/* A mainmenu entry but img file statistic.png not found, so we use a generic one */
div.mainmenu.statistic {
	background-image: url(/htdocs/custom/statistic/img/statistic.png);
	height:28px;
}
/* A mainmenu entry but img file moncloud.png not found, so we use a generic one */
div.mainmenu.moncloud {
	background-image: url(/htdocs/custom/moncloud/img/moncloud.png);
	height:28px;
}
/* A mainmenu entry but img file carddav.png not found, so we use a generic one */
div.mainmenu.carddav {
	background-image: url(/htdocs/custom/carddav/img/carddav.png);
	height:28px;
}
/* A mainmenu entry but img file ai.png not found, so we use a generic one */
div.mainmenu.ai {
	background-image: url(/htdocs/custom/ai/img/ai.png);
	height:28px;
}
/* A mainmenu entry but img file resource.png not found, so we use a generic one */
div.mainmenu.resource {
	background-image: url(/htdocs/custom/resource/img/resource.png);
	height:28px;
}
/* A mainmenu entry but img file tododoli.png not found, so we use a generic one */
div.mainmenu.tododoli {
	background-image: url(/htdocs/custom/tododoli/img/tododoli.png);
	height:28px;
}
/* A mainmenu entry but img file office.png not found, so we use a generic one */
div.mainmenu.office {
	background-image: url(/htdocs/custom/office/img/office.png);
	height:28px;
}
/* A mainmenu entry but img file sepavir.png not found, so we use a generic one */
div.mainmenu.sepavir {
	background-image: url(/htdocs/custom/sepavir/img/sepavir.png);
	height:28px;
}
/* A mainmenu entry but img file googlemaps.png not found, so we use a generic one */
div.mainmenu.googlemaps {
	background-image: url(/htdocs/custom/googlemaps/img/googlemaps.png);
	height:28px;
}
/* A mainmenu entry but img file maintenance.png not found, so we use a generic one */
div.mainmenu.maintenance {
	background-image: url(/htdocs/custom/maintenance/img/maintenance.png);
	height:28px;
}
.tmenuimage {
padding: 0 0 0 0 !important;
margin: 0 0px 0 0 !important;
}

/* Login */
div.login {
position: absolute;
top: 3px;
white-space: nowrap;
font-weight: bold;
;
right: 5px;
}

/* voir aussi 3682 pour mobile */
div.login_block {
position: relative;
float: right;
margin-right: 5px;
margin-bottom: 10px;
margin-top: 1px;
font-weight: bold;
;
}

div.login a {
color: #234046;
}

div.login a:hover {
color: black;
text-decoration: underline;
}

img.login,
img.printer,
img.entity {
padding: 8px 0px 0px 0px;
margin: 0px 0px 0px 8px;
text-decoration: none;
color: white;
font-weight: bold;
}

img.entity {
cursor: pointer;
}

/* ============================================================================== */
/* Menu gauche */
/* ============================================================================== */

a.vmenu:link {
font-size: 12px;
text-align: left;
font-weight: normal;
color: #FFFFFF;
margin: 1px 1px 1px 4px;
}

a.vmenu:visited {
font-size: 12px;
text-align: left;
font-weight: normal;
color: #FFFFFF;
margin: 1px 1px 1px 4px;
}

a.vmenu:active {
font-size: 12px;
text-align: left;
font-weight: normal;
color: #FFFFFF;
margin: 1px 1px 1px 4px;
}

a.vmenu:hover {
font-size: 12px;
text-align: left;
font-weight: normal;
color: #d7ffac;
margin: 1px 1px 1px 4px;
}

font.vmenudisabled {
font-size: 12px;
text-align: left;
font-weight: normal;
color: #FFFFFF;
margin: 1px 1px 1px 4px;
}

a.vsmenu:link {
font-size: 11px;
text-align: left;
font-weight: normal;
color: #202020;
margin: 1px 1px 1px 4px;
}

a.vsmenu:visited {
font-size: 11px;
text-align: left;
font-weight: normal;
color: #202020;
margin: 1px 1px 1px 4px;
}

a.vsmenu:active {
font-size: 11px;
text-align: left;
font-weight: normal;
color: RGB(94, 148, 181);
margin: 1px 1px 1px 4px;
}

a.vsmenu:hover {
font-size: 11px;
text-align: left;
font-weight: normal;
color: #7F0A29;
margin: 1px 1px 1px 4px;
}

font.vsmenudisabled {
font-size: 11px;
text-align: left;
font-weight: normal;
color: #202020;
margin: 1px 1px 1px 4px;
}

a.help:link {
font-size: 10px;
font-weight: bold;
background: #FFFFFF;
border: 1px solid #8CACBB;
color: #68ACCF;
padding: 0em 0.7em;
margin: 0em 0.5em;
text-decoration: none;
white-space: nowrap;
}

a.help:visited {
font-size: 10px;
font-weight: bold;
background: #FFFFFF;
border: 1px solid #8CACBB;
color: #68ACCF;
padding: 0em 0.7em;
margin: 0em 0.5em;
text-decoration: none;
white-space: nowrap;
}

a.help:active {
font-size: 10px;
font-weight: bold;
background: #FFFFFF;
border: 1px solid #8CACBB;
color: #6198BA;
padding: 0em 0.7em;
margin: 0em 0.5em;
text-decoration: none;
white-space: nowrap;
}

a.help:hover {
font-size: 10px;
font-weight: bold;
background: #FFFFFF;
border: 1px solid #8CACBB;
color: #6198BA;
padding: 0em 0.7em;
margin: 0em 0.5em;
text-decoration: none;
white-space: nowrap;
}



div.blockvmenupair {

background-position: top right;
vertical-align: text-top;
border-bottom: 1px solid #D0D0D0;
border-left: 1px solid #D0D0D0;
border-right: 1px solid #D0D0D0;
border-top: 1px solid #D0D0D0;
border: 1px solid #D0D0D0;

-moz-border-radius: 10px;
border-radius: 10px;
border-spacing: 0px 0px;
padding: 0 0px 8px 0px;
width: 200px;
}

div.blockvmenuimpair {

background-position: top right;
vertical-align: text-top;
border-bottom: 1px solid #D0D0D0;
border-left: 1px solid #D0D0D0;
border-right: 1px solid #D0D0D0;
border-top: 1px solid #D0D0D0;
border: 1px solid #D0D0D0;
-moz-border-radius: 10px;
border-radius: 10px;
border-spacing: 0px 0px;
padding: 0 0px 8px 0px;
width: 200px;
}

img.logocompany {
margin-top: 22px;
border-spacing: 0px;
padding: 0px;
}

div.blockvmenuimpair form a.vmenu,
div.blockvmenupair form a.vmenu {
width: 166px;
border-spacing: 0px;
color: #000000;
text-align: left;
text-decoration: none;
padding: 4px;
margin: 0px;
background: #FFFFFF;
margin-bottom: -12px;
}

div.menu_titre {
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
background-position: top right;
vertical-align: text-top;
margin: 5px 0px;
padding: 4px 0px;
text-align: left;
font-size: 12px;
color: #4A90E2;
font-weight: bold;

}

div.menu_titre a.vmenu {
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #234046;
}

div.menu_titre a.vmenu:hover {
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4A90E2;

}

div.blockvmenusearch {

background-position: top right;
vertical-align: text-top;
border-bottom: 1px solid #D0D0D0;
border-left: 1px solid #D0D0D0;
border-right: 1px solid #D0D0D0;
border-top: 1px solid #D0D0D0;
border: 1px solid #D0D0D0;
-moz-border-radius: 10px;
border-radius: 10px;
border-spacing: 0px 0px;
margin: 3px 0px 15px 0px;
padding: 25px 0px 2px 2px;
width: 200px;

}

div.blockvmenusearch input[type="text"] {
float: left;
width: 130px;
border: 1px solid #333;
font-size: 10px;
height: 16px;
}

div.blockvmenusearch input.button[type="submit"] {
float: left;

padding-right: 10px !important;
padding-left: 10px !important;
padding-bottom: 1px !important;
padding-top: 1px !important;

margin-right: 0px !important;
margin-left: 10px !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
}

div.blockvmenusearch div.menu_titre {
margin-top: 5px;
}

#blockvmenusearch div.menu_titre,
#blockvmenusearch form {
padding-top: 1px;
padding-bottom: 1px;
height: 20px;
}


div.blockvmenubookmarks {

background-position: top right;
vertical-align: text-top;
border-bottom: 1px solid #D0D0D0;
border-left: 1px solid #D0D0D0;
border-right: 1px solid #D0D0D0;
border-top: 1px solid #D0D0D0;
border: 1px solid #D0D0D0;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 0px;
border-spacing: 0px;
padding: 0px;
margin-bottom: 15px;
}

div.blockvmenuhelp {
text-align: center;
border-spacing: 0px;
width: 162px;
background: transparent;
font-family: arial,tahoma,verdana,helvetica;
color: #000000;
text-decoration: none;
padding-left: 0px;
padding-right: 1px;
padding-top: 3px;
padding-bottom: 3px;
margin: 1px 0px 0px 0px;
}

div.menu_contenu {
margin: 0px;
padding: 1px;

padding-right: 8px;
font-size: 11px;
font-weight: normal;
color: #000000;
text-align: left;
}

div.menu_end {
/* border-top: 1px solid #436981; */
margin: 0px;
padding: 0px;
height: 6px;
width: 165px;
background-repeat: no-repeat;
display: none;
}


td.barre {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #b3c5cc;
font-family: arial,tahoma,verdana,helvetica;
color: #000000;
text-align: left;
text-decoration: none;
}

td.barre_select {
background: #b3c5cc;
color: #000000;
}

td.photo {
background: #F4F4F4;
color: #000000;
border: 1px solid #b3c5cc;
}


/* ============================================================================== */
/* Panes for Main */
/* ============================================================================== */

/*
* PANES and CONTENT-DIVs
*/

#mainContent {}

#mainContent,
#leftContent .ui-layout-pane {
padding: 0px;
overflow: auto;
}

#mainContent,
#leftContent .ui-layout-center {
padding: 0px;
position: relative;
/* contain floated or positioned elements */
overflow: auto;
/* add scrolling to content-div */
}

/* ============================================================================== */
/* Barre de redmiensionnement menu */
/* ============================================================================== */

.ui-layout-resizer-west-open {
/*left: 200px !important;*/
}

.ui-layout-north {
height: 57px !important;
}

/* ============================================================================== */
/* Toolbar for ECM or Filemanager */
/* ============================================================================== */

.toolbar {
border: 1px solid #BBB !important;
}

.toolbarbutton {
margin-top: 2px;
margin-left: 4px;
/* border: solid 1px #AAAAAA;
width: 34px;*/
height: 34px;
/* background: #FFFFFF;*/
}


/* ============================================================================== */
/* Panes for ECM or Filemanager */
/* ============================================================================== */

#containerlayout .layout-with-no-border {
border: 0 !important;
border-width: 0 !important;
}

#containerlayout .layout-padding {
padding: 2px !important;
}

/*
* PANES and CONTENT-DIVs
*/
#containerlayout .ui-layout-pane {
/* all 'panes' */
background: #FFF;
border: 1px solid #BBB;
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
otherwise you may get double-scrollbars - on the pane AND on the content-div
*/
padding: 0px;
overflow: auto;
}

/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
#containerlayout .ui-layout-content {
padding: 10px;
position: relative;
/* contain floated or positioned elements */
overflow: auto;
/* add scrolling to content-div */
}

/*
* RESIZER-BARS
*/
.ui-layout-resizer {
/* all 'resizer-bars' */
background: #FFF;
border: 1px solid #BBB;
border-width: 0;
}

.ui-layout-resizer-drag {
/* REAL resizer while resize in progress */
}

.ui-layout-resizer-hover {
/* affects both open and closed states */
}

/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
otherwise color shifts while dragging when bar can't keep up with mouse */
/*.ui-layout-resizer-open-hover ,*/
/* hover-color to 'resize' */
.ui-layout-resizer-dragging {
/* resizer beging 'dragging' */
background: #AAA;
}

.ui-layout-resizer-dragging {
/* CLONED resizer being dragged */
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
}

/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit {
/* CLONED resizer at min or max size-limit */
background: #E1A4A4;
/* red */
}

.ui-layout-resizer-closed-hover {
/* hover-color to 'slide open' */
background: #EBD5AA;
}

.ui-layout-resizer-sliding {
/* resizer when pane is 'slid open' */
opacity: .10;
/* show only a slight shadow */
filter: alpha(opacity=10);
}

.ui-layout-resizer-sliding-hover {
/* sliding resizer - hover */
opacity: 1.00;
/* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}

/* sliding resizer - add 'outside-border' to resizer on-hover
* this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover {
border-bottom-width: 1px;
}

.ui-layout-resizer-south-sliding-hover {
border-top-width: 1px;
}

.ui-layout-resizer-west-sliding-hover {
border-right-width: 1px;
}

.ui-layout-resizer-east-sliding-hover {
border-left-width: 1px;
}

/*
* TOGGLER-BUTTONS
*/
.ui-layout-toggler {
border: 0px solid #27433f;
/* match pane-border */
background-color: #2c3e50;
}

.ui-layout-resizer-hover .ui-layout-toggler {
opacity: .60;
filter: alpha(opacity=60);
}

.ui-layout-resizer-hover .ui-layout-toggler-hover {
/* need specificity */
background-color: #FC6;
opacity: 1.00;
filter: alpha(opacity=100);
}

.ui-layout-toggler-north,
.ui-layout-toggler-south {
border-width: 0 1px;
/* left/right borders */
}

.ui-layout-toggler-west,
.ui-layout-toggler-east {
border-width: 1px 0;
/* top/bottom borders */
}

/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding ui-layout-toggler {
display: none;
}

/*
* style the text we put INSIDE the togglers
*/
.ui-layout-toggler .content {
color: #666;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex;
/* to 'vertically center' text inside text-span */
}

.ecm-in-layout-center {
border-left: 0px !important;
border-right: 0px !important;
border-top: 0px !important;
}

.ecm-in-layout-south {
border-left: 0px !important;
border-right: 0px !important;
border-bottom: 0px !important;
padding: 4px 0 4px 4px !important;
}


/* ============================================================================== */
/* Onglets */
/* ============================================================================== */

div.tabs {
box-sizing: initial !important;
margin: 10px 0px 0px 0px;
text-align: left;
vertical-align: bottom;
width: 100%;
background-image: linear-gradient(to bottom, "hsl(0, 0%, 99%)", hsl(0, 0%, 100%));
height: 32px;
border-bottom: 2px solid #2c3e50;
background-repeat: repeat-x;
background-position: bottom;
}

div.tabs a.tabTitle {
box-sizing: initial !important;
position: relative;
float: left;
height: 18px;
color: #2c3e50;
font-family: arial,tahoma,verdana,helvetica;
font-weight: bold;
padding: 4px 2px 0px 6px;
margin: 0px 10px 0px 0px;
text-decoration: none;
white-space: nowrap;
}

div.tabs a.tab {
box-sizing: initial !important;
display: block;
width: auto;
font-size: 12px;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
height: 18px;
background-position: right;
line-height: 18px;
color: #27433f;
text-decoration: none;
position: relative;
float: left;
padding: 4px 6px;
margin: 5px 2px 0px 2px;
margin-bottom: 2px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 0px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
}

div.tabs a.tab#active {
box-sizing: initial !important;
color: #4A90E2;
padding: 0px 6px 0px 6px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 0px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
padding: 4px 6px;
margin: 5px 2px 0px 2px;
}

div.tabs a.tab:hover {
box-sizing: initial !important;
color: #4A90E2;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 0px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
background-color: #e8eef5;
}

div.tabBar {
box-sizing: initial !important;
color: #234046;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin: 6px 0px 6px 0px;
-moz-border-radius: 8px;
border-radius: 8px;
border-right: 1px solid #555555;
border-bottom: 1px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
background: #fafbfc;
}

div.tabsAction {
box-sizing: initial !important;
margin: 20px 0em 1px 0em;
padding: 0em 0em;
text-align: right;
/* - fix bottom */
}

div.spacefooter {
margin: 30px;
}

td.tab {
background: #dee7ec;
}

span.tabspan {
box-sizing: initial !important;
background: #dee7ec;
color: #434956;
font-family: arial,tahoma,verdana,helvetica;
padding: 0px 6px;
margin: 0em 0.2em;
text-decoration: none;
white-space: nowrap;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-right: 1px solid #555555;
border-left: 1px solid #D8D8D8;
border-top: 1px solid #D8D8D8;
}

/* ============================================================================== */
/* Boutons actions */
/* ============================================================================== */

/* Nouvelle syntaxe a utiliser */

label.butAction,
.butAction:link,
.butAction:visited,
.butAction:hover,
.butAction:active,
.butActionDelete,
.butActionRefused,
.butActionDelete:link,
.butActionDelete:visited,
.butActionDelete:hover,
.butActionDelete:active,
.butActionOk,
.butActionOk:link,
.butActionOk:visited,
.butActionOk:hover,
.butActionOk:active,
.butActionBlue,
.butActionBlue:link,
.butActionBlue:visited,
.butActionBlue:hover,
.butActionBlue:active {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
border: 1px solid #e8eef5;
-moz-border-radius: 8px;
border-radius: 8px;
color: #27433f;
padding: 4px 10px;
margin: 4px 10px;
text-decoration: none;
white-space: nowrap;
font-size: 13px;
cursor: pointer;
display: inline-block;
}

.butAction:hover {
background-color: #d0daea;
color: #4A90E2;
}

.butActionDelete {
border: 1px solid red;
}

.butActionDelete:link,
.butActionDelete:visited,
.butActionDelete:hover,
.butActionDelete:active {
border: 2px solid red;
}

.butActionOk {
border: 1px solid green;
}

.butActionOk:link,
.butActionOk:visited,
.butActionOk:hover,
.butActionOk:active {
border: 2px solid green;
}

.butActionBlue {
border: 1px solid blue;
}

.butActionBlue:link,
.butActionBlue:visited,
.butActionBlue:hover,
.butActionBlue:active {
border: 2px solid blue;
}

.butActionDelete:hover {
background: #FFe7ec;
color: #961400;
}

.butActionRefused {
background: #f9dbe1;
color: #666;
}

span.butAction,
span.butActionDelete {
cursor: pointer;
}


/* ============================================================================== */
/* Tables */
/* ============================================================================== */


.nocellnopadd {
list-style-type: none;
margin: 0px;
padding: 0px;

}

.notopnoleft {
border-collapse: collapse;
border: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 6px;
padding-bottom: 0px;
margin: 0px 0px;
}

.notopnoleftnoright {
border-collapse: collapse;
border: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0px 0px 0px 0px;
}


table.border {
border: 1px solid #9CACBB;
border-collapse: collapse;
}

table.border td {
padding: 1px 2px;
border: 1px solid #e0e6ed;
border-collapse: collapse;
}

td.border {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

/* Main boxes */

table.noborder {
background-color: #f5f7fa;
background-image: linear-gradient(to bottom, #f5f7fa, #fafbfc);
background-position: top right;
vertical-align: text-top;
/*border-right: 1px solid #555555;
border-bottom: 1px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;*/
border: 1px solid #D0D0D0;
-moz-border-radius: 10px;
/*-moz-border-radius-topright:8px;*/
border-radius: 10px;
border-spacing: 0px 0px;
padding: 0 0px 8px 0px;
/*border-collapse: collapse;*/
}

table.noborder tr {}

table.noborder td {}

#graph {
padding: 1px 1px;
}

table.nobordernopadding {
border: 0px;
border-spacing: 0px 0px;
}

table.nobordernopadding tr {
border: 0px;
padding: 0px 0px;
}

table.nobordernopadding td {
border: 0px;
padding: 0px 0px !important;
}

/* my_form_ajax pour formulaire ajax */
table.doliplus_form_ajax td,
table.doliplus_form_ajax th {
padding-top: 8px !important;
padding-bottom: 7px !important;
padding-left: 12px !important;
padding-right: 12px !important;

}

/* For lists */

table.liste {
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
background-position: top right;
vertical-align: text-top;
border-bottom: 1px solid #555555;
border-left: 1px solid #D0D0D0;
border-top: 1px solid #D8D8D8;
border: 1px solid #D0D0D0;

-moz-border-radius: 10px;
border-radius: 10px;
border-spacing: 0px 0px;
padding: 0 0px 8px 0px;

}

table.liste td {
padding-right: 2px;
}

tr.liste_titre {
height: 20px;
color: #27433f;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-radius: 8px;
line-height: 18px;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
background-color: #f5f7fa;
background-image: linear-gradient(to bottom, #f5f7fa, #fafbfc);
}

tr.liste_titre td {
padding-left: 6px;
padding-right: 6px;
/*vertical-align: text-top;*/
}

td.liste_titre_sel {
background-position: top right;
color: #2c3e50;
font-weight: bold;
white-space: nowrap;
}

input.liste_titre {
background: #FFF;
background-repeat: no-repeat;
background-position: top right;
border: 0px;
}

tr.liste_total td {
border-top: 1px solid #e0e6ed;
background-image: linear-gradient(to bottom, #f5f7fa, #fafbfc);
color: #332266;
font-weight: bold;
white-space: nowrap;
}

th {
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5) !important;
color: #334444;
font-family: arial,tahoma,verdana,helvetica;
font-weight: bold;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
white-space: nowrap;
}

.impair {
/* background: #eaeaea;*/
background: hsl(240, 10%, 93%);
font-family: arial,tahoma,verdana,helvetica;
border: 0px;
}

.impair:hover {
/* background: #c0c4c7;*/
background: hsl(240, 10%, 88%);
border: 0px;
}

.pair {
background: #FFFFFF;
font-family: arial,tahoma,verdana,helvetica;
border: 0px;
}

.pair:hover {
/* background: #c0c4c7;*/
background: hsl(240, 10%, 88%);
border: 0px;
}

.pair td,
.impair td {
padding: 2px;
}

/*
* Boxes
*/

.box {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 4px;
}

tr.box_titre {
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
color: #27433f;
font-weight: normal;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
white-space: nowrap;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

tr.box_impair {
/* background: #e6ebed; */
background: #eaeaea;
font-family: arial,tahoma,verdana,helvetica;
}

tr.box_impair:hover {
background: #c0c4c7;
border: 0px;
}

tr.box_pair {
/* background: #d0d4d7; */
background: #f4f4f4;
font-family: arial,tahoma,verdana,helvetica;
}

tr.box_pair:hover {
background: #c0c4c7;
border: 0px;
}

tr.fiche {
font-family: arial,tahoma,verdana,helvetica;
}

/*
* Ok, Warning, Error
*/
.ok {
color: #114466;
}

.warning {
color: #887711;
}

.error {
color: #550000;
font-weight: bold;
}

div.ok {
color: #114466;
}

div.warning {
color: #e8860f;
padding: 0.2em 0.2em 0.2em 0.2em;
margin: 0.5em 0em 0.5em 0em;
border: 1px solid #e0e0d0;
-moz-border-radius: 6px;
border-radius: 6px;
background: #efefd4;
}

div.error {
color: #550000;
font-weight: bold;
padding: 0.2em 0.2em 0.2em 0.2em;
margin: 0.5em 0em 0.5em 0em;
border: 1px solid #8C9CAB;
-moz-border-radius: 6px;
border-radius: 6px;
}

/* Info admin */
div.info {
color: #707070;
padding: 0.2em 0.2em 0.2em 0.2em;
margin: 0.5em 0em 0.5em 0em;
border: 1px solid #e0e0d0;
-moz-border-radius: 6px;
border-radius: 6px;
background: #efefd4;

}


/*
* Liens Payes/Non payes
*/

a.normal:link {
font-weight: normal
}

a.normal:visited {
font-weight: normal
}

a.normal:active {
font-weight: normal
}

a.normal:hover {
font-weight: normal
}

a.impayee:link {
font-weight: bold;
color: #550000;
}

a.impayee:visited {
font-weight: bold;
color: #550000;
}

a.impayee:active {
font-weight: bold;
color: #550000;
}

a.impayee:hover {
font-weight: bold;
color: #550000;
}



/*
* Other
*/

.fieldrequired {
font-weight: bold;
color: #000055;
}

#pictotitle {
}

.photo {
border: 0px;
/* filter:alpha(opacity=55); */
/* opacity:.55; */
}

div.titre {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #27433f;
font-size: 20px;
text-decoration: none;
margin-left: 20px;
}


/* ============================================================================== */
/* Formulaire confirmation (When Ajax JQuery is used) */
/* ============================================================================== */

.ui-dialog-titlebar {}

.ui-dialog-content {
font-size: 12px !important;
}

/* ============================================================================== */
/* Formulaire confirmation (When HTML is used) */
/* ============================================================================== */

table.valid {
border-top: solid 1px #E6E6E6;
border-left: solid 1px #E6E6E6;
border-right: solid 1px #444444;
border-bottom: solid 1px #555555;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0px 0px;
background: #d0daea;
;
}

.validtitre {
background: #d0daea;
;
font-weight: bold;
}


/* ============================================================================== */
/* Tooltips */
/* ============================================================================== */

#tooltip {
position: absolute;
width: 450px;
border-top: solid 1px #BBBBBB;
border-left: solid 1px #BBBBBB;
border-right: solid 1px #444444;
border-bottom: solid 1px #444444;
padding: 2px;
z-index: 3000;
background-color: #FFFFF0;
opacity: 1;
-moz-border-radius: 6px;
border-radius: 6px;

}


/* ============================================================================== */
/* Calendar */
/* ============================================================================== */
.bodyline {
padding: 0px;
margin-bottom: 5px;
z-index: 3000;
}

table.dp {
width: 180px;
background-color: #FFFFFF;
border-top: solid 2px #DDDDDD;
border-left: solid 2px #DDDDDD;
border-right: solid 1px #222222;
border-bottom: solid 1px #222222;

-moz-border-radius: 8px;
border-radius: 8px;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);

}

.dp td,
.tpHour td,
.tpMinute td {
padding: 2px;
font-size: 10px;
}

/* Barre titre */
.dpHead,
.tpHead,
.tpHour td:Hover .tpHead {
font-weight: bold;
color: white;
font-size: 11px;
cursor: auto;

}

/* Barre navigation */
.dpButtons,
.tpButtons {
text-align: center;
background-color: #e8eef5;
color: black;
font-weight: bold;
border: 1px outset black;
cursor: pointer;
}

.dpButtons:Active,
.tpButtons:Active {
border: 1px outset black;
}

.dpDayNames td,
.dpExplanation {
background-color: #d7ffac;
font-weight: bold;
text-align: center;
font-size: 11px;
}

.dpExplanation {
font-weight: normal;
font-size: 11px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;

}

.dpWeek td {
text-align: center;
border-bottom: 1px solid #555555;
}

.dpToday,
.dpReg,
.dpSelected {
cursor: pointer;
}

.dpToday {
font-weight: bold;
color: black;
background-color: #DDDDDD;
}

.dpReg:Hover,
.dpToday:Hover {
background-color: #2c3e50;
color: #d7ffac;
font-weight: bold;
}

/* Jour courant */
.dpSelected {
color: white;
font-weight: bold;
background-color: #2c3e50;
/* old browsers */
}

.tpHour {
border-top: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}

.tpHour td {
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
cursor: pointer;
}

.tpHour td:Hover {
background-color: black;
color: white;
}

.tpMinute {
margin-top: 5px;
}

.tpMinute td:Hover {
background-color: black;
color: white;
}

.tpMinute td {
background-color: #D9DBE1;
text-align: center;
cursor: pointer;
}

/* Bouton X fermer */
.dpInvisibleButtons {
border-style: none;
background-color: transparent;
padding: 0px;
font-size: 9px;
border-width: 0px;
color: black;
vertical-align: middle;
cursor: pointer;
text-align: right;
font-weight: bold;
}

/* ============================================================================== */
/* Afficher/cacher */
/* ============================================================================== */

div.visible {
display: block;
}

div.hidden {
display: none;
}

.display_none {
display: none !important;
}

tr.visible {
display: block;
}

td.hidden {
display: none;
}


/* ============================================================================== */
/* Module agenda */
/* ============================================================================== */

.cal_other_month {
background: #DDDDDD;
border: solid 1px #ACBCBB;
padding-left: 2px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
}

.cal_past_month {
background: #EEEEEE;
border: solid 1px #ACBCBB;
padding-left: 2px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
}

.cal_current_month {
background: #FFFFFF;
border: solid 1px #ACBCBB;
padding-left: 2px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
}

.cal_today {
background: #FFFFFF;
border: solid 2px #6C7C7B;
padding-left: 2px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
}

table.cal_event {
border-collapse: collapse;
margin-bottom: 1px;
}

table.cal_event td {
border: 0px;
padding-left: 0px;
padding-right: 2px;
padding-top: 0px;
padding-bottom: 0px;
}

.cal_event a:link {
font-size: 11px;
font-weight: bold !important;
}

.cal_event a:visited {
font-size: 11px;
font-weight: bold !important;
}

.cal_event a:active {
font-size: 11px;
font-weight: bold !important;
}

.cal_event a:hover {
font-size: 11px;
font-weight: bold !important;
}



/* ============================================================================== */
/* Afficher/cacher */
/* ============================================================================== */

#evolForm input.error {
font-weight: bold;
border: solid 1px #FF0000;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
}

#evolForm input.focuserr {
font-weight: bold;
background: #FAF8E8;
color: black;
border: solid 1px #FF0000;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
}


#evolForm input.focus {
/*** Mise en avant des champs en cours d'utilisation ***/
background: #FAF8E8;
color: black;
border: solid 1px #000000;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
}

#evolForm input.normal {
/*** Retour a l'etat normal apres l'utilisation ***/
background: white;
color: black;
border: solid 1px white;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
}



/* ============================================================================== */
/* Ajax - Liste deroulante de l'autocompletion */
/* ============================================================================== */

.ui-autocomplete-loading {
background: white url(/htdocs/theme/common/img/working.gif) right center no-repeat;
}

.ui-autocomplete {
position: absolute;
width: auto;
font-size: 1.0em;
background-color: white;
border: 1px solid #888;
margin: 0px;
padding: 0px;
}

.ui-autocomplete ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

.ui-autocomplete ul li.selected {
background-color: #D3E5EC;
}

.ui-autocomplete ul li {
list-style-type: none;
display: block;
margin: 0;
padding: 2px;
height: 16px;
cursor: pointer;
}

/* ============================================================================== */
/* Ajax - In place editor */
/* ============================================================================== */

form.inplaceeditor-form {
/* The form */
}

form.inplaceeditor-form input[type="text"] {
/* Input box */
}

form.inplaceeditor-form textarea {
/* Textarea, if multiple columns */
background: #FAF8E8;
color: black;
}

form.inplaceeditor-form input[type="submit"] {
/* The submit button */
font-size: 100%;
font-weight: normal;
border: 0px;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
cursor: pointer;
}

form.inplaceeditor-form a {
/* The cancel link */
margin-left: 5px;
font-size: 11px;
font-weight: normal;
border: 0px;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
cursor: pointer;
}



/* ============================================================================== */
/* Admin Menu */
/* ============================================================================== */

/* CSS for treeview */

/* Lien plier /deplier tout */
.arbre-switch {
text-align: right;
padding: 0 5px;
margin: 0 0 -18px 0;
}

/* Arbre */
ul.arbre {
padding: 5px 10px;
}

/* strong : A modifier en fonction de la balise choisie */
ul.arbre strong {
font-weight: normal;
padding: 0 0 0 20px;
margin: 0 0 0 -7px;
background-image: url(/htdocs/theme/common/treemenu/branch.gif);
background-repeat: no-repeat;
background-position: 1px 50%;
}

ul.arbre strong.arbre-plier {
background-image: url(/htdocs/theme/common/treemenu/plus.gif);
cursor: pointer;
}

ul.arbre strong.arbre-deplier {
background-image: url(/htdocs/theme/common/treemenu/minus.gif);
cursor: pointer;
}

ul.arbre ul {
padding: 0;
margin: 0;
}

ul.arbre li {
padding: 0;
margin: 0;
list-style: none;
}

/* This is to create an indent */
ul.arbre li li {
margin: 0 0 0 16px;
}

/* Classe pour masquer */
.hide {
display: none;
}

img.menuNew {
display: block;
border: 0px;
}

img.menuEdit {
border: 0px;
display: block;
}

img.menuDel {
display: none;
border: 0px;
}

div.menuNew {
margin-top: -20px;
margin-left: 270px;
height: 20px;
padding: 0px;
width: 30px;
position: relative;
}

div.menuEdit {
margin-top: -15px;
margin-left: 250px;
height: 20px;
padding: 0px;
width: 30px;
position: relative;

}

div.menuDel {
margin-top: -20px;
margin-left: 290px;
height: 20px;
padding: 0px;
width: 30px;
position: relative;

}

div.menuFleche {
margin-top: -16px;
margin-left: 320px;
height: 20px;
padding: 0px;
width: 30px;
position: relative;

}


/* ============================================================================== */
/* Show Excel tabs */
/* ============================================================================== */

.table_data {
border-style: ridge;
border: 1px solid;
}

.tab_base {
background: #C5D0DD;
font-weight: bold;
border-style: ridge;
border: 1px solid;
cursor: pointer;
}

.table_sub_heading {
background: #CCCCCC;
font-weight: bold;
border-style: ridge;
border: 1px solid;
}

.table_body {
background: #F0F0F0;
font-weight: normal;
font-family: sans-serif;
border-style: ridge;
border: 1px solid;
border-spacing: 0px;
border-collapse: collapse;
}

.tab_loaded {
background: #222222;
color: white;
font-weight: bold;
border-style: groove;
border: 1px solid;
cursor: pointer;
}

/* ============================================================================== */
/* CSS for color picker */
/* ============================================================================== */

A.color,
A.color:active,
A.color:visited {
position: relative;
display: block;
text-decoration: none;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0px;
padding: 0px;
border: 1px inset white;
}

A.color:hover {
border: 1px outset white;
}

A.none,
A.none:active,
A.none:visited,
A.none:hover {
position: relative;
display: block;
text-decoration: none;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0px;
padding: 0px;
cursor: default;
border: 1px solid #b3c5cc;
}

.tblColor {
display: none;
}

.tdColor {
padding: 1px;
}

.tblContainer {
background-color: #b3c5cc;
}

.tblGlobal {
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: #b3c5cc;
border: 2px outset;
}

.tdContainer {
padding: 5px;
}

.tdDisplay {
width: 50%;
height: 20px;
line-height: 20px;
border: 1px outset white;
}

.tdDisplayTxt {
width: 50%;
height: 24px;
line-height: 12px;
font-family: arial,tahoma,verdana,helvetica;
font-size: 8pt;
color: black;
text-align: center;
}

.btnColor {
width: 100%;
font-family: arial,tahoma,verdana,helvetica;
font-size: 10pt;
padding: 0px;
margin: 0px;
}

.btnPalette {
width: 100%;
font-family: arial,tahoma,verdana,helvetica;
font-size: 8pt;
padding: 0px;
margin: 0px;
}


/* Style to overwrites JQuery styles */
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: .2em .4em;
line-height: 1.5;
zoom: 1;
font-weight: normal;
font-family: arial,tahoma,verdana,helvetica;
font-size: 1em;
}

.ui-widget {
font-family: arial,tahoma,verdana,helvetica;
font-size: 12px;
}

.ui-button {
margin-left: -1px;
}

.ui-button-icon-only .ui-button-text {
height: 8px;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
padding: 2px 0px 6px 0px;
}

.ui-button-text {
line-height: 1em !important;
}

.ui-autocomplete-input {
margin: 0;
padding: 1px;
}


/* ============================================================================== */
/* CKEditor */
/* ============================================================================== */

.cke_editor table,
.cke_editor tr,
.cke_editor td {
border: 0px solid #FF0000 !important;
}

span.cke_skin_kama {
padding: 0 !important;
}

.cke_wrapper {
padding: 4px !important;
}


/* ============================================================================== */
/* Image user ronde */
/* ============================================================================== */
.roundedImage,
.roundedImageShadow,
.roundedImageBorder {
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50%;
border-radius: 50px;
}

.roundedImageShadow {
-moz-box-shadow: 0px 0px 10px #e8eef5;
-webkit-box-shadow: 0px 0px 10px #e8eef5;
-o-box-shadow: 0px 0px 10px #e8eef5;
box-shadow: 0px 0px 10px #e8eef5;
}

.roundedImageBorder {
border: 1px solid #e8eef5;
}

/* ============================================================================== */
/* Graph flot */
/* ============================================================================== */

.dolgraphtitle {
margin-top: 6px;
margin-bottom: 4px;
}

.dolgraphtitlecssboxes {
margin: 0px;
}

.legendColorBox,
.legendLabel {
border: none !important;
}

div.dolgraph div.legend,
div.dolgraph div.legend div {
background-color: rgba(255, 255, 255, 0) !important;
}

div.dolgraph div.legend table tbody tr {
height: auto;
}

/* ============================================================================== */
/* Tel */
/* ============================================================================== */
.call_on {
position: relative;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-bottom: 15px;
background-image: url(/htdocs/theme/common/call.png);
}

.call_off {
position: relative;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-bottom: 15px;
background-image: url(/htdocs/theme/common/call_out.png);
}

/* ============================================================================== */
/* ProjetPlus */
/* ============================================================================== */
.taskover {
font-weight: bold;
color: red;
}

.taskdue {
font-weight: bold;
color: green;
}

.printbold {
font-weight: bold;
}

/* ============================================================================== */
/* Readonly , disabled */
/* ============================================================================== */
.locked,
.readonly {
background-color: lightgray;
}

/* ============================================================================== */
/* picto gestion multi ligne devis cde... */
/* ============================================================================== */
.ck_on {
color: #2c3e50;
}

/* ============================================================================== */
/* switch-button */
/* ============================================================================== */
.switch-button-label {
float: left;
font-size: 12px;
cursor: pointer;
border: groove;
margin: 5px;
color: #adadad;
}

.switch-button-label.off {
font-family: arial,tahoma,verdana,helvetica;
color: #adadad;
color: red;
}

.switch-button-label.on {
font-family: arial,tahoma,verdana,helvetica;
color: #101010;
}

.switch-button-background {
float: left;
position: relative;
background: #f5f7fa;
border: 1px solid #aaa;
margin: 1px 10px;
cursor: pointer;
border-radius: 4px;
}

.switch-button-button {
position: absolute;
left: -1px;
top: -1px;
background: #e8eef5;
border: 1px solid #aaa;
border-radius: 4px;
}

/* ============================================================================== */
/* switch-button 2 */
/* ============================================================================== */
.switch-slider-doli {
position: relative;
display: inline-block;
width: var(--width_slider);
height: 24px;
}

.switch-slider-doli input {
display: none;
}

.slider-button-doli {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--off);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
border-radius: 34px;
}

.slider-button-doli:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input:checked+.slider-button-doli {
background-color: var(--on);
}

input:focus+.slider-button-doli {
box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider-button-doli:before {
transform: translateX(var(--translate_slider));
}

.slider-button-doli:after {
content: attr(content_on);
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked+.slider-button-doli:after {
content: attr(content_off);
}

/* ============================================================================== */
/* Tool tip en Css */
/* ============================================================================== */
.tooltips {
position: relative;
display: inline-block;
/*border-bottom: 1px dotted black;*/
}

.tooltips .tooltipstext {
visibility: hidden;
max-width: 300px;
background-color: #f5f7fa;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}

.tooltips .tooltipstext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #f5f7fa transparent transparent transparent;
}

.tooltips:hover .tooltipstext {
visibility: visible;
opacity: 1;
}


/* ============================================================================== */
/* conteneditable */
/* ============================================================================== */
.cellEditing {
background-color: white;
border: 1px solid #CCC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 0.25em 0.5em;
min-height: 1.5em;
appearance: field;
-moz-appearance: textfield;
-webkit-appearance: field;
}

.cellEditing:focus {
border: 1px solid #69F;
-moz-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
-webkit-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
}

/*==============================*/
/* slider */
/*==============================*/

input[type=range].slider {
-webkit-appearance: none;
width: 90%;
/** largeur pour XX % *****/
margin: 3px 3px;
}

input[type=range].slider:focus {
outline: none;
}

input[type=range].slider::-webkit-slider-runnable-track {
width: 100%;
height: 22px;
/** taille *****/
cursor: pointer;
background: #e8eef5;
border-radius: 0px;
border: 0px solid black;
}

input[type=range].slider::-webkit-slider-thumb {

border: 2.5px solid black;
height: 22px;
width: 22px;
border-radius: 4px;
background: #e8eef5;
cursor: pointer;
-webkit-appearance: none;
margin-top: 0px;
}

input[type=range].slider:focus::-webkit-slider-runnable-track {
background: #e8eef5;
}

input[type=range].slider::-moz-range-track {
width: 100%;
height: 22px;
cursor: pointer;
background: #e8eef5;
border-radius: 0px;
border: 0px solid #010101;
}

input[type=range].slider::-moz-range-thumb {
border: 2.5px solid black;
height: 22px;
width: 22px;
border-radius: 4px;
background: #e8eef5;
cursor: pointer;
}

/* ============================================================================== */
/* Tableau en div ex voir ajax/bati_ajax_do */
/* ============================================================================== */

.Ttable {
display: table;
border-spacing: 0.5rem;
border-collapse: collapse;
}

.Tcell {
display: table-cell;
padding: 0.5rem;
border: 1px solid #e0e6ed;
}

.Trow {
display: table-row;
}

.TrowNoWrap {
white-space: nowrap;
}

/* Fonds par le THÈME (--dp-*), ancienne couleur en repli : codés en dur, ils restaient clairs
   en mode sombre sous une encre devenue claire — texte illisible (dialogue de réservation de
   custom/rent, constaté par GP le 11/10/2026 : encre rgb(230,240,250) sur fond #FFFFFF). */
.Trow:nth-child(odd) {
background: var(--dp-surface-2, #eaeaea);
}

.Trow:nth-child(even) {
background: var(--dp-card, #FFFFFF);
}

/* Modificateur : tableau en div posé sur une « carte » (dialogues — réservation custom/rent).
   Remplace un style inline blanc codé en dur : le fond suit le thème clair / sombre. */
.Ttable.dp-surface-card .Trow,
.Ttable.dp-surface-card .Tcell {
background: var(--dp-card, #FFFFFF) !important;
border: none !important;
}

.Trow:hover {
background: #c0c4c7;
cursor: pointer;
}

.Tcol {
display: table-column;
}

.Tbody {
display: table-row-group
}

.Tcolgroup {
display: table-column-group;
}

.Tfoot {
display: table-footer-group;
font-weight: bold;
background-color: #f5f7fa;
}

.Tthead {
background-image: linear-gradient(to bottom, #d0daea, #e8eef5);
color: #27433f;
display: table-header-group;
font-weight: bold;
}

.Tlegend {
display: table-caption;
caption-side: top;
background-color: #f5f7fa;
}

.Tcenter {
text-align: center;
}

.Tright {
text-align: right;
}

.Tleft {
text-align: left;
}

.centpercent {
width: 100%;
}


/* ============================================================================== */
/* Select2 */
/* ============================================================================== */

.select2-container--focus span.select2-selection.select2-selection--single {
border-bottom: 1px solid #666 !important;
}

.blockvmenusearch .select2-container--default .select2-selection--single,
.blockvmenubookmarks .select2-container--default .select2-selection--single {
background-color: unset;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: unset;
}

.select2-default {
color: #999 !important;
}

.select2-choice,
.select2-container .select2-choice {
border-bottom: solid 1px rgba(0, 0, 0, .4);
}

.select2-container .select2-choice>.select2-chosen {
margin-right: 23px;
}

.select2-container .select2-choice .select2-arrow {
border-radius: 0;
background: transparent;
}

.select2-container-multi .select2-choices {
background-image: none;
}

.select2-container .select2-choice {
color: #000;
border-radius: 0;
}

.selectoptiondisabledwhite {
background: #FFFFFF !important;
}

.select2-arrow {
border: none;
border-left: none !important;
background: none !important;
}

.select2-choice {
border-top: none !important;
border-left: none !important;
border-right: none !important;
}

.select2-drop.select2-drop-above {
box-shadow: none !important;
}

.select2-container--open .select2-dropdown--above {
border-bottom: solid 1px rgba(0, 0, 0, .2);
}

.select2-drop.select2-drop-above.select2-drop-active {
border-top: 1px solid #ccc;
border-bottom: solid 1px rgba(0, 0, 0, .2);
}

.select2-container--default .select2-selection--single {
outline: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 1px rgba(0, 0, 0, .2);
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

.select2-container--default .select2-selection--multiple {
border: solid 1px rgba(0, 0, 0, .2);
border-radius: 0 !important;
}

.select2-search__field {
outline: none;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 1px rgba(0, 0, 0, .2) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
outline: none;
border-top: none;
border-left: none;
border-bottom: none;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

.select2-dropdown-open {
background-color: #fff;
}

.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
outline: none;
border-top: none;
border-left: none;
border-bottom: none;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background-color: #fff;
}

.select2-disabled {
color: #888;
}

.select2-drop.select2-drop-above.select2-drop-active,
.select2-drop {
border-radius: 0;
}

.select2-drop.select2-drop-above {
border-radius: 0;
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
background-image: none;
border-radius: 0 !important;
}

div.select2-drop-above {
background: #fff;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

.select2-drop-active {
border: 1px solid #ccc;
padding-top: 4px;
}

.select2-search input {
border: none;
}

a span.select2-chosen {
font-weight: normal !important;
}

.select2-container .select2-choice {
background-image: none;
/* line-height: 24px; */
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
background: #FFFFFF;
}

.select2-results {
max-height: 400px;
}

.select2-container.select2-container-disabled .select2-choice,
.select2-container-multi.select2-container-disabled .select2-choices {
background-color: #FFFFFF;
background-image: none;
border: none;
cursor: default;
}

.select2-container-disabled .select2-choice .select2-arrow b {
opacity: 0.5;
}

.select2-container-multi .select2-choices .select2-search-choice {
margin-bottom: 3px;
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices,
.select2-container-multi .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
border-bottom: 1px solid #ccc;
border-right: none;
border-top: none;
border-left: none;

}

.select2-container--default .select2-results>.select2-results__options {
max-height: 400px;
}

/* Special case for the select2 add widget */
#addbox .select2-container .select2-choice>.select2-chosen,
#actionbookmark .select2-container .select2-choice>.select2-chosen {
text-align: left;
opacity: 0.4;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: unset;
opacity: 0.5;
}

span#select2-boxbookmark-container,
span#select2-boxcombo-container {
text-align: left;
opacity: 0.5;
}

.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 6px;
}

/* Style used before the select2 js is executed on boxcombo */
#boxbookmark.boxcombo,
#boxcombo.boxcombo {
text-align: left;
opacity: 0.4;
border-bottom: solid 1px rgba(0, 0, 0, .4) !important;
height: 26px;
line-height: 24px;
padding: 0 0 2px 0;
vertical-align: top;
}

/* To emulate select 2 style */
.select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr {
padding: 2px 5px 1px 5px;
margin: 0 0 2px 3px;
position: relative;
line-height: 13px;
color: #333;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* <!-- cloud1 -->*/
    border: 1px solid #2c3e50;

background-color: #e8eef5;
background-image: linear-gradient(to bottom, #d0daea, #e8eef5) !important;

}
/* To emulate select 2 style with var() */
.select2-search-choice-dolibarr-var{
padding: 2px 5px 1px 5px;
margin: 0 0 2px 3px;
position: relative;
line-height: 13px;
color: #333;
cursor: default;

border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* <!-- cloud1 -->*/
border: 1px solid #aaaaaa;
border: 1px solid #2c3e50;

background-color: var(--degrade1);
background-image: linear-gradient(to bottom, var(--degrade2), var(--degrade1)) !important;

}

.select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr a {
font-weight: normal;
}

.select2-container-multi-dolibarr .select2-choices-dolibarr li {
float: left;
list-style: none;
}

.select2-container-multi-dolibarr .select2-choices-dolibarr {
height: auto !important;
height: 1%;
margin: 0;
padding: 0 5px 0 0;
position: relative;
cursor: text;
overflow: hidden;
}

/* ============================================================================== */
/* Notification events */
/* ============================================================================== */

.notification {
flex: flex-grow;
height: 125px;
min-width: 410px;
position: relative;
float: right;
border-radius: 10px;
z-index: 1;
color: #101010;
right: 2%;
bottom: 16px;
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
background-color: #f5f7fa;
}

#notification {
width: 100%;
z-index: 5;
flex-direction: column;
display: inline-block;
position: fixed;
bottom: 20px;
right: 3px;
}

.notification h2 {
padding: 20px 0 0 0px;
font-family: arial,tahoma,verdana,helvetica;
font-size: 15px;
}

.notification p {
color: #101010;
padding: 5px 0 0 0;
clear: both;
margin: 0 0 0 20px;
max-width: 300px;
font-size: 12px;
font-family: arial,tahoma,verdana,helvetica;
}

.notification img {
float: left;
padding: 10px 15px 0 15px;
width: 60px;
}

.notification_buttons a {
display: block;
width: 60px;
margin: 5px;
padding: 8px;
position: absolute;
border: 1px solid #999;
border-radius: 5px;

color: #27433f;
font-size: 13px;
font-family: arial,tahoma,verdana,helvetica;
text-align: center;
text-decoration: none;

-webkit-box-shadow: 0px 1px 1px #fff;
box-shadow: 0px 1px 1px #fff;
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(235, 235, 235, 0.5));
}

.notification_buttons a:hover {
background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(235, 235, 235, 1));
}

.notification_buttons a:nth-child(odd) {
right: 10px;
top: 50px;
}

.notification_buttons a:nth-child(even) {
right: 10px;
top: 8px;
}

/* ============================================================================== */
/* Onglet achat sur cde client */
/* ============================================================================== */
.bt-radios {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #e8eef5;
-moz-border-radius: 10px;
border-radius: 10px;
color: #27433f;
padding: 4px 10px;
margin: 4px 10px;
text-decoration: none;
white-space: nowrap;
font-size: 12px;
cursor: pointer;
display: inline-block;
}

/* ============================================================================== */
/* Menu panel left and right */
/* ============================================================================== */
.cd-panel,
.cd-panel-right {
visibility: hidden;
transition: visibility 0s 0.6s;
}

.cd-panel.is-visible,
.cd-panel-right.is-visible {
visibility: visible;
transition: visibility 0s 0s;
}

.is-visible {
top: 0;
transition: top 0.3s 0.3s;
}

.cd-panel-container {
background: rgba(255, 255, 255, 0.96);
position: fixed;
width: 220px;
height: 97%;
top: 40px;
left: 5px;
overflow: scroll;
transition-property: transform;
transition-duration: 0.3s;
transition-delay: 0.3s;
/* -100 gauche +100 droite */
transform: translate3d(-100%, 0, 0);
}

.cd-panel-container-right {
background: rgba(255, 255, 255, 0.96);
position: fixed;
width: 25%;
height: 90%;
top: 40px;
right: 5px;
overflow: scroll;
transition-property: transform;
transition-duration: 0.3s;
transition-delay: 0.3s;
border: solid 3px #2c3e50;
/* -100 gauche +100 droite */
transform: translate3d(0, 0, -100px);
}

.is-visible .cd-panel-container,
.is-visible .cd-panel-container-right {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}

/* close*/
.cd-panel-close,
.cd-panel-right-close {
height: 18px;
width: 100%;
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;

}

.closeButton,
.closeButton-right {
position: absolute;
right: 5px;
width: 22px;
height: 22px;
background: url('/htdocs/theme/common/close-button.png') no-repeat right center;
}

/* ============================================================================== */
/* Btn floating tchat */
/* ============================================================================== */

.fab-container-chat {
position: fixed;
top: 50px;
right: 80px;
cursor: pointer;
transition: all .3s;
}

.fab-container-chat-menu {
position: fixed;
top: 210px;
left: 73px;
cursor: pointer;
transition: all .3s;
}

.fab-container-chat-less-menu {
position: fixed;
top: 50px;
left: 10px;
cursor: pointer;
transition: all .3s;
}

.iconbutton-chat {
width: 50px;
height: 50px;
border-radius: 100%;
background: #FF4F79;
}

.iconbutton-chat i {
display: flex;
align-items: center;
justify-content: center;
height: 55%;
color: white;
}

.button-chat {
border-radius: 50%;
box-shadow: 0 0 0 7px #d0daea;
background: #2c3e50;
}

.button-chat:before {
content: attr(data-count);
width: 17px;
height: 17px;
line-height: 18px;
display: flex;
align-items: center;
justify-content: center;
display: block;
border-radius: 50%;
background: #d0daea;
border: 1px solid #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 0 2px #2c3e50;
color: #2c3e50;
position: relative;
transition: all .3s;
display: flex;
}

.button-chat.badge-bottom-left-chat:before {
top: auto;
bottom: -3px;
}

/*
*******************************
Version Btn menu
*******************************
*/
.iconbutton-chat-menu {
border-radius: 100%;
background: #FF4F79;
}

.iconbutton-chat-menu i {
position: relative;
top: 2px;
align-items: center;
justify-content: center;
color: white;
}

.button-chat-menu {
/* diametre btn icone chat */
display: inline-block;
width: 22px;
height: 22px;
background: #A11692;
}

/* ============================================================================== */
/* Badge notification */
/* ============================================================================== */
/* Margin / padding left icon - text */
.badge-menu-doli {
position: relative;
top: 1px;
padding-left: 25px;
}
/* badge shape */
.badge-menu-doli:before {
content: attr(data-count);
position: absolute;
/* diametre badge */
width: 20px;
height: 20px;
font-size: 9px;
line-height: 18px;
text-align: center;
display: block;
border-radius: 50%;
background: rgb(67, 151, 232);
border: 1px solid #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
color: #FFF;
}
/* badge Position */
.badge-menu-doli.badge-doli-position:before {
top: auto;
/*position hauteur badge */
bottom: 0px;
left: 0px;
}

/* ============================================================================== */
/* Badge notification */
/* ============================================================================== */
.notify-badge-doli {
position: relative;
right: -3px;
top: -13px;
background: var(--color);
text-align: center;
border-radius: 9px 9px 9px 9px;
color: white;
padding: 3px 6px;
font-size: 8px;
}

/* ============================================================================== */
/* Menu small icons */
/* ============================================================================== */


/***************************************/
/* Container #tmenu_tooltip */
/***************************************/


#wrap_menu {
position: relative;
box-sizing: border-box;
margin-right: 10px;
display: inline-flex;
}

/***************************************/
/* GESTION MENU 0 */
/***************************************/
#menu_short,
#menu_mob,
#menu_vertical {
list-style: none;
margin: 0px;
padding: 0px;
display: flex;
}

#menu_short a,
#menu_mob a,
#menu_vertical a {
color: #101010;
padding: 8px;
text-decoration: none;
text-align: center;
display: block;
border: 1px solid;
/* tag MODIF_GP MENU CLAIR 2026 */
border-color: #f5f7fa #d0daea #d0daea #f5f7fa;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #f5f7fa, #d0daea);
}

#menu_vertical {
display: none;
}

/***************************************/
/* GESTION MENU HORIZONTAL */
/***************************************/

/*Menu1 ul*/
.menu_doliplus {
list-style: none;
margin: 0px;
/* important pour eviter les bordures*/
padding: 0px;
/* important pour eviter les bordures*/
align-items: center;
display: flex;
flex-flow: row wrap;
}

/* Any Sub Menu */
.menu_doliplus ul {
position: static;
display: none;
list-style: none;
margin: 0px;
padding: 0px;
height: auto;
z-index: 2000;
min-width: 160px;
}

/* position:relative so that the submenu can be placed relative to its parent li */
.menu_doliplus li {
position: relative;
}

.menu_doliplus a {
color: #101010;
padding: 8px;
/* hauteur box*/
text-decoration: none;
text-align: center;
display: block;
border: 1px solid;
/* tag MODIF_GP MENU CLAIR 2026 */
border-color: #f5f7fa #d0daea #d0daea #f5f7fa;
background-color: #d0daea;
background-image: linear-gradient(to bottom, #f5f7fa, #d0daea);
}

/* Display First Sub Menu */
.menu_doliplus li:hover ul {
display: flex;
flex-flow: column wrap;
position: absolute;
top: 100%;
left: 0;
z-index: 2000;
}

/* Hide Second Sub Menu until ready */
.menu_doliplus li:hover ul ul {
display: none;
}

/* Display Second Sub Menu */
.menu_doliplus li ul li ul {
display: none;
height: auto;
}

/* Hover Display Second Sub Menu */
.menu_doliplus li ul li:hover ul {
display: flex;
flex-flow: column;
position: absolute;
top: 0;
left: 100%;
}

/* Taille box Sub Menu */
.menu_doliplus li ul a {

padding: 13px !important;
border: 1px solid !important;
border-color: #FFFFFF !important;
}

.menu_doliplus li ul a:hover {
background-image: linear-gradient(to bottom, #d0daea, #d0daea) !important;
}

/* Arrow above */
.menu_doliplus li ul li:first-child>a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #2c3e50;
}

/* top border dessus - Arrow above*/
.menu_doliplus li ul li:first-child>a {
border-top: 2px solid #2c3e50 !important;
;
}

/* fleche coté vue droite*/
.menu_doliplus ul ul li:first-child a:after {
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #2c3e50;
}

/* bordure gauche - fleche coté vue droite*/
.menu_doliplus ul ul li:first-child>a {
border-top: 2px solid #FFFFFF !important;
border-left: 2px solid #2c3e50 !important;
}

/***************************************/
/* GESTION REVERSE */
/***************************************/

/* UL reverse gestion bord droit*/
.menu_doliplus ul.reverse {
position: static;
}

/* Hover Display Second Sub Menu - Reverse*/
.menu_doliplus li ul li:hover ul.reverse {
position: absolute;
display: flex;
flex-flow: column wrap;
top: 0;
width: 195px;
left: -190px;
}

/* fleche coté vue gauche - Reverse*/
.menu_doliplus ul ul.reverse li:first-child a:after {
left: 185px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #2c3e50;
}

/* bordure droite - fleche coté vue gauche*/
.menu_doliplus ul ul.reverse li:first-child>a {
border-top: 2px solid #FFFFFF !important;
border-left: 2px solid #FFFFFF !important;
border-right: 2px solid #2c3e50 !important;
}

/* Large screens */
@media all and (min-width: 800px) {
#menu_mob {
display: none;
}

}

/* Small screens */
@media all and (max-width: 799px) {

/* core\tpl\login.tpl.php*/
#menu_short,
#menu_main {
display: none;
}

.menu_doliplus {
position: static;
flex-flow: column wrap;
text-align: left;
align-items: flex-start;

}

.menu_doliplus ul {
min-width: 60px;
}

.menu_doliplus a {
text-align: left;
min-width: 118px;
display: inline-block;
}

/* Taille box Sub Menu */
.menu_doliplus li ul a {
width: 50px;
padding: 13px !important;
border: 2px solid !important;
border-color: #FFFFFF !important;
}

.menu_doliplus li:hover ul {
top: 0;
left: 100%;
}

.menu_doliplus li ul li:hover ul {
top: 0;
left: 100%;
}

/* Arrow above */
.menu_doliplus li ul li:first-child>a:after {
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #2c3e50;
}

/* top border dessus - Arrow above*/
.menu_doliplus li ul li:first-child>a {
border-top: 2px solid #FFFFFF !important;
border-left: 2px solid #2c3e50 !important;
}

.cd-panel-container {
width: 380px;
top: 30px;
left: 1px;
}

div.login_block {
position: absolute;
width: 150px;
float: none;
top: 5px;
left: 120px;
}

.closeButton {
position: absolute;
left: 0300px;
right: 0px;
width: 35px;
}
}


/* Ligne « Taux: 20,00% » des rapports de TVA (compta/tva/quadri_detail*.php, clients_detail.php).
   Le blanc posé sur le <tr> était écrasé par la couleur de texte des <td> du thème : texte foncé sur
   fond foncé, taux illisible (constaté le 05/10/2026, parcours « Préparer sa déclaration de TVA »).
   tr.tax_rate td (0,1,2) l'emporte sur « .noborder td » (0,1,1) du thème doliplus, chargé après. */
.tax_rate, tr.tax_rate td {
background-color: #2c3e50;
color: white;
}

/***************************************/
/* GESTION MENU VERTICAL */
/***************************************/

#menu_v {
position: static;
flex-flow: column wrap;
text-align: left;
align-items: flex-start;

div.login_block {
position: absolute;
width: 200px;
float: none;
top: 0px;
left: 120px;
}

}
#menu_v ul {
min-width: 70px;
}

#menu_v a {
color: #101010;
text-align: left;
min-width: 125px;
display: inline-block;
}

/* Taille box Sub Menu */
#menu_v li ul a {
color: #101010;
min-width: 105px;
padding: 13px !important;
border: 2px solid !important;
border-color: #FFFFFF !important;
}

#menu_v li:hover ul {
top: 0;
left: 100%;
}

#menu_v li ul li:hover ul {
top: 0;
left: 100%;
}

/* Arrow above */
#menu_v li ul li:first-child>a:after {
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #2c3e50;
}

/* top border dessus - Arrow above*/
#menu_v li ul li:first-child>a {
border-top: 2px solid #FFFFFF !important;
border-left: 2px solid #2c3e50 !important;
}

/* ============================================================================== */
/* Icon button */
/* ============================================================================== */

div.iconmenu {
display: inline-block;
/* none /inline-block; ::ici pour logo dessus */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
/* padding:1px; ::ici agrandir */
}

div.iconmenu.searchmenu {
	background-image: url(/htdocs/theme/common/search.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.searchloupe {
	background-image: url(/htdocs/theme/common/loupe.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.menusearch {
	background-image: url(/htdocs/theme/common/menusearch.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.searchperso {
	background-image: url(/htdocs/theme/common/searchperso.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.home {
	background-image: url(/htdocs/theme/common/img/menus/home.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.companies {
	background-image: url(/htdocs/theme/common/img/menus/company.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.products {
	background-image: url(/htdocs/theme/common/img/menus/products.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.commercial {
	background-image: url(/htdocs/theme/common/img/menus/commercial.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.accountancy {
	background-image: url(/htdocs/theme/common/img/menus/money.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.bank {
	background-image: url(/htdocs/theme/common/img/menus/bank.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.project {
	background-image: url(/htdocs/theme/common/img/menus/project.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.tools {
	background-image: url(/htdocs/theme/common/img/menus/tools.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ftp {
	background-image: url(/htdocs/theme/common/img/menus/tools.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.members {
	background-image: url(/htdocs/theme/common/img/menus/members.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.shop {
	background-image: url(/htdocs/theme/common/img/menus/shop.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.agenda {
	background-image: url(/htdocs/theme/common/img/menus/agenda.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ecm {
	background-image: url(/htdocs/theme/common/img/menus/ecm.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.webcal {
	background-image: url(/htdocs/theme/common/img/menus/generic1.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cashdesk {
	background-image: url(/htdocs/theme/common/img/menus/generic2.png);
	height: 18px;
	width: 18px;
}
div.iconmenu. {
	background-image: url(/htdocs/theme/common/img/menus/generic3.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.support {
	background-image: url(/htdocs/custom/support/img/support.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.multicompany {
	background-image: url(/htdocs/custom/multicompany/img/multicompany.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.nginx {
	background-image: url(/htdocs/theme/common/img/menus/generic4.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.sepa {
	background-image: url(/htdocs/custom/sepa/img/sepa.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.bankimport {
	background-image: url(/htdocs/custom/bankimport/img/bankimport.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.contacts {
	background-image: url(/htdocs/custom/contacts/img/contacts.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.incoterm {
	background-image: url(/htdocs/custom/incoterm/img/incoterm.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.multicurrency {
	background-image: url(/htdocs/custom/multicurrency/img/multicurrency.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.catalogue {
	background-image: url(/htdocs/custom/catalogue/img/catalogue.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cron {
	background-image: url(/htdocs/custom/cron/img/cron.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.facavance {
	background-image: url(/htdocs/custom/facavance/img/facavance.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.formulaire {
	background-image: url(/htdocs/custom/formulaire/img/formulaire.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.grh {
	background-image: url(/htdocs/custom/grh/img/grh.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.caldav {
	background-image: url(/htdocs/custom/caldav/img/caldav.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.marketing {
	background-image: url(/htdocs/custom/marketing/img/marketing.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.messagerie {
	background-image: url(/htdocs/custom/messagerie/img/messagerie.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.shippableorder {
	background-image: url(/htdocs/custom/shippableorder/img/shippableorder.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ndfp {
	background-image: url(/htdocs/custom/ndfp/img/ndfp.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.milestone {
	background-image: url(/htdocs/custom/milestone/img/milestone.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.onlyoffice {
	background-image: url(/htdocs/custom/onlyoffice/img/onlyoffice.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.mobile {
	background-image: url(/htdocs/custom/mobile/img/mobile.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.archives {
	background-image: url(/htdocs/custom/archives/img/archives.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.chat {
	background-image: url(/htdocs/custom/chat/img/chat.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.calling {
	background-image: url(/htdocs/custom/calling/img/calling.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.factory {
	background-image: url(/htdocs/custom/factory/img/factory.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.stockplus {
	background-image: url(/htdocs/custom/stockplus/img/stockplus.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cloud {
	background-image: url(/htdocs/custom/cloud/img/cloud.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.barcodeplus {
	background-image: url(/htdocs/custom/barcodeplus/img/barcodeplus.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.tri {
	background-image: url(/htdocs/custom/tri/img/tri.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.speedfinder {
	background-image: url(/htdocs/custom/speedfinder/img/speedfinder.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ticketsup {
	background-image: url(/htdocs/custom/ticketsup/img/ticketsup.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cr {
	background-image: url(/htdocs/custom/cr/img/cr.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.linkweb {
	background-image: url(/htdocs/custom/linkweb/img/linkweb.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.brevo {
	background-image: url(/htdocs/custom/brevo/img/brevo.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.categorycontact {
	background-image: url(/htdocs/custom/categorycontact/img/categorycontact.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.outils {
	background-image: url(/htdocs/custom/outils/img/outils.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.lead {
	background-image: url(/htdocs/custom/lead/img/lead.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.inventory {
	background-image: url(/htdocs/custom/inventory/img/inventory.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.accountingex {
	background-image: url(/htdocs/custom/accountingex/img/accountingex.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.notifi {
	background-image: url(/htdocs/custom/notifi/img/notifi.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cloudtheme {
	background-image: url(/htdocs/custom/cloudtheme/img/cloudtheme.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.box {
	background-image: url(/htdocs/custom/box/img/box.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.statistic {
	background-image: url(/htdocs/custom/statistic/img/statistic.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.moncloud {
	background-image: url(/htdocs/custom/moncloud/img/moncloud.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.carddav {
	background-image: url(/htdocs/custom/carddav/img/carddav.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ai {
	background-image: url(/htdocs/custom/ai/img/ai.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.resource {
	background-image: url(/htdocs/custom/resource/img/resource.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.tododoli {
	background-image: url(/htdocs/custom/tododoli/img/tododoli.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.office {
	background-image: url(/htdocs/custom/office/img/office.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.sepavir {
	background-image: url(/htdocs/custom/sepavir/img/sepavir.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.googlemaps {
	background-image: url(/htdocs/custom/googlemaps/img/googlemaps.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.maintenance {
	background-image: url(/htdocs/custom/maintenance/img/maintenance.png);
	height: 18px;
	width: 18px;
}

/* ============================================================================== */
/* Icon button inline-toggle-button-buttonstrip - lib/lib_head.js */
/* ============================================================================== */
.switch-button {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
border: solid 1px #2c3e50;
}

.switch-button-label {
display: flex;
background-color: #d0daea;
align-items: center;
justify-content: center;
padding-left: 1.5em;
padding-right: 1.5em;
}

/* Rounded sliders */
.slider-button.round {
border-radius: 34px;
}

.slider-button.round:before {
border-radius: 50%;
}

.switch-button input {
display: none;
}

.slider-button {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider-button:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider-button {
background-color: #d0daea;
}

input:focus+.slider-button {
box-shadow: 0 0 1px #d0daea;
}

input:checked+.slider-button:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Cercle user + content */
.doli-circle {
/* (A) PERCENTAGE WIDTH & BORDER RADIUS */
width: var(--my-size-circle);
border-radius: 50%;

/* (B) BACKGROUND COLOR */
background-color: var(--my-color-back);

/* (C) NECESSARY TO POSITION TEXT BLOCK */
line-height: 0;
position: relative;
}

/* (D) MATCH HEIGHT */
.doli-circle::after {
content: "";
display: block;
padding-bottom: 100%;
}

/* (E) TEXT BLOCK */
.doli-circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;

/* (E2) THE FONT - NOT REALLY IMPORTANT */
/* font-family: arial, sans-serif; */
font-weight: bold;
}

/* ============================================================================== */
/* Tableau des produits - Entetes fixes sur devis commande facture */
/* ============================================================================== */

table.table_sticky {
position: relative;
border-collapse: collapse;
}

.sticky_head_alternate {
position: -webkit-sticky;
/* for Safari */
position: sticky;
top: 0;
z-index: 3;
}

.sticky_head tr.sticky_row {
position: -webkit-sticky;
/* for Safari */
position: sticky;
top: 0;
z-index: 1;
}

/* Adaptation de la largeur a l'ecran (devis/commande/facture) — scope table_sticky
   pour ne pas toucher les autres tables reutilisant l'id #tablelines (contrat, customs).
   1) Les entetes peuvent passer sur 2 lignes au lieu d'elargir leur colonne
      (annule le white-space:nowrap herite de tr.liste_titre) */
table.table_sticky tr.liste_titre td,
table.table_sticky tr.liste_titre th {
white-space: normal;
padding-left: 3px;
padding-right: 3px;
vertical-align: middle;
}

/* 2) Cellules compactees : paddings reduits sur les colonnes de donnees */
table.table_sticky tbody.tablelines2 > tr > td {
padding-left: 3px;
padding-right: 3px;
}

/* 3) Formulaire d'ajout de ligne : le champ recherche produit (size=120 en dur dans
   obj_create.tpl.php) imposait ~870px incompressibles a toute la page. Fluide via CSS,
   l'attribut size ne sert plus que de repli sans CSS. calc(-28px) = place du picto info. */
.predefinedproductline input#search_idprod {
width: calc(100% - 28px);
min-width: 220px;
box-sizing: border-box;
}

/* 4) Ecrans etroits : champs numeriques du formulaire d'ajout compactes (les width:5em
   poses en style inline dans obj_create.tpl.php imposaient ~1220px incompressibles
   -> scroll horizontal sous ~1280px). !important requis : styles inline. */
@media (max-width: 1366px) {
.predefinedproductline input#search_idprod {
min-width: 150px;
}
input#np_price, input#qty, input#long, input#larg, input#np_price_multicurrency {
width: 3.6em ! important;
}
input#btpunitval, input#btpunit {
width: 3em ! important;
}
input#remise_percent {
width: 2.6em ! important;
}
/* L'entete "Ajouter une nouvelle ligne - ..." (nowrap herite de tr.liste_titre)
   imposait ~435px a la premiere colonne du formulaire d'ajout */
div[id^="tab_"] table.noborder tr.liste_titre td {
white-space: normal;
}
/* Paddings reduits sur les cellules du formulaire d'ajout (meme esprit que les
   colonnes de donnees du tableau des lignes) */
div[id^="tab_"] table.noborder td {
padding-left: 3px;
padding-right: 3px;
}
/* Encart Total/Marges de l'entete de fiche : ses titres nowrap (PRIX DE VENTE,
   PRIX DE REVIENT...) depassaient la demi-colonne droite (~360px) */
div.fichehalfright tr.liste_titre td,
div.fichehalfright tr.liste_titre th,
div.ficheaddleft table.nobordernopadding {
white-space: normal;
max-width: 100%;
}
div.fichecenter {
flex-wrap: wrap;
}
div.fichecenter > div.fichehalfleft,
div.fichecenter > div.fichehalfright {
min-width: 0;
}
}

/* Sous 1280px : les deux demi-colonnes des fiches (fichecenter en flex) s'empilent.
   La page etant une <table> heritee, le wrap flex seul ne suffit pas (Chrome calcule
   le min-content sans tenir compte du wrap et elargit la table) — ex. bloc
   Modele/Generer + CGV des propales (691px) + Evenements (364px) = scroll horizontal. */
@media (max-width: 1280px) {
div.fichecenter > div.fichehalfleft,
div.fichecenter > div.fichehalfright {
flex: 1 1 100%;
max-width: 100%;
}
}

/* ============================================================================== */
/* Disco Myfield class */
/* ============================================================================== */

fieldset.fieldset-red{
border: 2px solid red !important;
}

.action_button{
border: 1px solid #e8eef5;
-moz-border-radius: 8px;
border-radius: 8px;
color: #27433f;
padding: 4px 10px;
margin: 4px 5px;
text-decoration: none;
cursor: pointer;
display: inline-block;
}

/* ============================================================================== */
/* function selectarray_image */
/* ============================================================================== */
/* Fonds et bordure en TOKENS (repli = valeurs historiques) : l'encre vient du thème,
   claire en mode sombre — un fond blanc en dur rendait le choix illisible
   (rent_planning.php, sélecteur Environnement, 11/10/2026). */
.select_with_image {
width: 200px;
height: 22px;
line-height: 22px;
vertical-align: middle;
position: relative;
background: var(--dp-card, white);
color: var(--dp-text, inherit);
border: 1px solid var(--dp-border, #ccc);
overflow: hidden;
}
.select_with_image::after {
content: "▼";
font-size: 0.5em;
font-family: arial;
position: absolute;
top: 50%;
right: 5px;
transform: translate(0, -50%);
}
.select_with_image:hover::after {
content: "";
}
.select_with_image:hover {
overflow: visible;
}
.select_with_image:hover .options_with_image .option_with_image label {
display: inline-block;
}
.select_with_image:hover .options_with_image {
background: var(--dp-card, white);
border: 1px solid var(--dp-border, #ccc);
position: absolute;
bottom: 0px;
width: 100%;
height: auto;
overflow-y: scroll;
z-index:3;
}
.select_with_image .options_with_image .option_with_image {
overflow: hidden;
}
.select_with_image:hover .options_with_image .option_with_image {
height: 22px;
overflow: hidden;
}
.select_with_image .options_with_image .option_with_image img {
vertical-align: middle;
}
.select_with_image .options_with_image .option_with_image span.span_option_with_image {
display: none;
}
.select_with_image .options_with_image .option_with_image input {
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
left: -10000px;
}
.select_with_image .options_with_image .option_with_image input:checked + span.span_option_with_image {
display: block;
width: 100%;
}
.select_with_image:hover .options_with_image .option_with_image input + span.span_option_with_image {
display: block;
}
/* En sombre $degrade2 vaut souvent le fond de la liste : le trait (couleur du texte,
   donc toujours contrasté) garde l'option cochée repérable dans les deux variantes. */
.select_with_image:hover .options_with_image .option_with_image input:checked + span.span_option_with_image {
background: #d0daea;
box-shadow: inset 3px 0 0 currentColor;
}

/* ============================================================================== */
/* Header vertical */
/* ============================================================================== */
div.vertical_header {
margin-left: -85px;
position: absolute;
width: 215px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}

th.vertical_header {
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
/* ============================================
DOLIPLUS 2026 - VARIABLES CSS MODERNES
============================================ */
:root {
--dp-primary: #4A90E2;
/* ⚠ --dp-primary est la primaire BRUTE du client : chez beaucoup elle est PASTEL. Un module qui
   fait `background: var(--dp-primary); color:#fff` fabrique donc un bouton illisible (mesuré
   1,47:1 sur la bannière du chat le 31/07). --dp-primary-btn est la MÊME teinte passée par
   ensureButtonContrast() (assombrissement en HSL, teinte et saturation conservées) : ≥ 4,5:1
   avec du blanc, garanti. C'est la valeur qu'utilisent déjà les .butAction du thème.
   RÈGLE : fond primaire + texte blanc ⇒ TOUJOURS --dp-primary-btn, jamais --dp-primary. */
--dp-primary-btn: #2275d7;
--dp-primary-dark: #357ABD;
--dp-primary-light: #4A90E2cc;
--dp-primary-hover: #357ABD;
--dp-success: #52C41A;
--dp-warning: #FAAD14;
--dp-danger: #F5222D;
--dp-info: #1890FF;
--dp-text: #333333;
/* Branchés sur les variables PHP (voir le bloc sombre) : des copies en dur avaient
   déjà fait diverger le token du reste du thème. */
--dp-text-light: #666666;
--dp-text-muted: #6b7280;
/* ── Tokens des BRIQUES DE TRAVAIL PARTAGÉES (aperçu, Signaux ✦, fiches Essentiel/Complet,
   lignes de facture dépliées). Ils venaient de la grammaire « papier & encre » de l'Atelier ;
   depuis l'arbitrage GP du 2026-08-02 ces briques servent AUSSI en Classique, donc leurs
   tokens doivent exister ici. L'Atelier les redéfinit dans sa couche avec sa propre palette.
   ⚠ Sans eux, mesuré le 02/08 : « 3 fact. échues » sortait BLANC SUR BLANC (--dp-pencil est
   la seule occurrence sans repli chaîné) et le bouton « Ouvrir la fiche » retombait sur la
   couleur en dur `#2382c8`, qui ne correspondait plus à l'encre calculée sur $menuAccent
   (4,23:1). Définir les tokens vaut mieux que rustiner chaque règle. */
--dp-accent: #4A90E2;
--dp-paper: #fafbfc;
--dp-paper2: #f8fafc;
/* ── Encres SÉMANTIQUES et FONDS de LIGNES (voir le bloc de calcul plus haut).
   Publiés en tokens pour que les feuilles des MODULES cessent d'écrire ces teintes en dur :
   une feuille de module est chargée APRÈS le thème, donc c'est elle qui gagne — le thème ne
   peut pas rattraper ce qu'elle pose. Usage : var(--dp-row-amber, #FFFFB2), le repli étant la
   valeur historique du module, ce qui rend l'ordre rsync/cycle indifférent. */
--dp-ink-success: #347c10;
--dp-ink-danger: #e40a16;
--dp-ink-info: #1f57ff;
--dp-ink-stat: #cc006c;
--dp-row-green: #99FF99;
--dp-row-green-strong: #008000;
--dp-row-amber: #FFFFB2;
--dp-row-blue: #E5F0FF;
--dp-row-paper: #ffffff;
--dp-row-green-strong-ink: #ffffff;
--dp-ink: #333333;
--dp-pencil: #6b7280;
--dp-text-hover: #ffffff;
--dp-bg: #ffffff;
--dp-bg-light: #f8fafc;
--dp-bg-dark: #f1f5f9;
--dp-bg-hover: #f1f5f9;
/* SURLIGNEUR DE LIGNE (« suivi de ligne ») — bande jaune franche, plus marquée que
   --dp-bg-hover, pour suivre une ligne à travers un tableau large (admin/modules.php et
   ses colonnes par entité). C'est un TOKEN et pas une couleur en dur parce que le texte
   posé dessus vient du thème : en sombre il est CLAIR, et un jaune pâle le rendait
   invisible (mesuré 1,01:1 le 31/07). Repli pour les instances sans cloudtheme = la
   valeur historique, donc aucun changement là-bas. */
--dp-rowtrack: #fff3b0;
/* Surfaces (cartes/panneaux/sections) — à consommer par les modules pour un dark auto */
--dp-card: #ffffff;
--dp-surface: #f8fafc;
--dp-surface-2: #f1f5f9;
--dp-surface-danger: #fef5f4;
/* Surface PROFONDE — toujours foncée, dans les DEUX variantes (= $backgroundtresfonce,
   constante CLOUDTHEME_BACKGROUND_DARK : navy clair-mode / quasi-noir dark-mode). Sert aux
   éléments qui doivent RESSORTIR du fond pastel clair (drawers chat/todo, panneaux flottants).
   Texte associé = --dp-deep-on (clair, lisible sur les deux). */
--dp-deep: #2c3e50;
--dp-deep-on: #e8eaed;
--dp-deep-muted: #9aa3b0;
--dp-deep-border: rgba(255,255,255,0.10);
--dp-deep-hover: rgba(255,255,255,0.07);
--dp-border: #e0e6ed;
--dp-border-light: #e8e8e8;
--dp-border-dark: #b3b3b3;
--dp-link: #4A90E2;
--dp-radius: 4px;
--dp-radius-sm: 2px;
--dp-radius-lg: 8px;
--dp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--dp-shadow-md: 0 2px 8px rgba(0,0,0,0.1);
--dp-shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
--dp-transition: 0.2s ease;
}

/* Utilitaire de largeur manquant dans ce thème (le thème de base Dolibarr/eldy
   n'est pas présent ici). Référencé par plusieurs pages admin
   (ai/setup, ai/custom_prompt, stripe, stancer) mais jusqu'ici sans effet.
   max-width:100% + box-sizing => pas de débordement sur mobile. */
.minwidth500 { min-width: 500px; max-width: 100%; box-sizing: border-box; }


/* === UTILITAIRES CSS 2026 === */
.dp-shadow { box-shadow: var(--dp-shadow-md); }
.dp-rounded { border-radius: var(--dp-radius); }
.dp-transition { transition: all var(--dp-transition); }


/* ============================================
THEME CLOUD - Variante: lightPrimary: #4A90E2Accent: #357ABDRadius: 4px
============================================ */

/* === RESET GLOBAL POUR MODE SOMBRE === */

/* === BASE === */
html, body {
background-color: #ffffff !important;
color: #333333 !important;
}

body {
font-family: arial,tahoma,verdana,helvetica;
}

/* === LIENS === */
a, a:link, a:visited {
color: #4A90E2;
}

a:hover, a:focus {
color: #3375b5;
}

/* === BOUTONS MODERNISÉS === */
/* IMPORTANT: Couleurs auto-assombries pour contraste WCAG AA (4.5:1) avec texte blanc */
.button, .butAction,
.butActionOk, .butActionDelete, .butActionBlue,
input.button, input[type="submit"],
button[type="submit"],
.btn-primary,
a.button, a.butAction,
a.butActionOk, a.butActionDelete, a.butActionBlue,
span.button, span.butAction {
background: linear-gradient(135deg, #2275d7, #3375b5) !important;
border: 1px solid #3375b5 !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 5px 12px !important;
font-weight: 600 !important;
font-size: 12px !important;
text-shadow: none !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}

.button:hover, .butAction:hover,
.butActionOk:hover, .butActionBlue:hover,
input.button:hover, input[type="submit"]:hover,
button[type="submit"]:hover,
a.button:hover, a.butAction:hover,
a.butActionOk:hover, a.butActionBlue:hover,
span.button:hover, span.butAction:hover {
background: linear-gradient(135deg, #3375b5, #2275d7) !important;
border-color: #2275d7 !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.button:active, .butAction:active,
.butActionOk:active, .butActionBlue:active,
input.button:active, input[type="submit"]:active {
transform: translateY(0) !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.butActionDelete, .btn-danger {
background: linear-gradient(135deg, #dc3545, #c82333) !important;
border-color: #c82333 !important;
color: #ffffff !important;
border-radius: 4px !important;
}

.butActionDelete:hover, .btn-danger:hover {
background: linear-gradient(135deg, #c82333, #dc3545) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(220,53,69,0.3) !important;
}

.butActionRefused, .btn-secondary {
background: linear-gradient(135deg, #6c757d, #5a6268) !important;
border-color: #5a6268 !important;
color: #ffffff !important;
border-radius: 4px !important;
cursor: not-allowed;
}

/* Bouton OK (vert) */
.butActionOk, a.butActionOk {
background: linear-gradient(135deg, #208637, #218838) !important;
border-color: #218838 !important;
color: #ffffff !important;
border-radius: 4px !important;
}

.butActionOk:hover, a.butActionOk:hover {
background: linear-gradient(135deg, #218838, #208637) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(40,167,69,0.3) !important;
}

/* Bouton Bleu */
.butActionBlue, a.butActionBlue {
background: linear-gradient(135deg, #0071eb, #0069d9) !important;
border-color: #0069d9 !important;
color: #ffffff !important;
border-radius: 4px !important;
}

.butActionBlue:hover, a.butActionBlue:hover {
background: linear-gradient(135deg, #0069d9, #0071eb) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0,123,255,0.3) !important;
}

/* === TABLEAUX === */
table, .noborder, .tagtable, .border {
background-color: #ffffff;
border-color: #e0e6ed;
border-radius: 4px !important;
}

/* nobordernopadding = conteneur de layout (labels imbriqués, chips, barres de titre) : il ne
   doit JAMAIS porter de fond ni d'arrondi. Le sélecteur large "table {...}" ci-dessus leur
   posait un fond clair + radius → bloc blanc arrondi laid quand la ligne a un fond coloré
   (ex. séparateurs de champs personnalisés "myfield" : petit pavé blanc dans la barre verte).
   Le bloc dark neutralisait déjà ces tables ; on applique le même reset dans LES DEUX variantes. */
table.nobordernopadding,
table.nobordernopadding > tbody > tr,
table.nobordernopadding > tbody > tr > td,
table.nobordernopadding td,
td.nobordernopadding {
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
}

/* En-têtes de tableaux avec gradient subtil */
.noborder tr.liste_titre td,
.noborder tr.liste_titre th,
tr.liste_titre td,
tr.liste_titre th,
.liste_titre,
thead th, thead td {
background: linear-gradient(180deg, #f1f5f9, #f1f5f9) !important;
color: #333333 !important;
border-color: #e0e6ed !important;
font-weight: 600 !important;
text-transform: uppercase !important;
font-size: 11px !important;
letter-spacing: 0.5px !important;
padding: 5px 7px !important;
}

.noborder td, .noborder th,
table td, table th {
border-color: #e0e6ed !important;
color: #333333;
background-color: transparent;
padding: 5px 7px !important;
font-size: 12px !important;
transition: all 0.15s ease !important;
}

tr.oddeven, tr.pair, tr.impair {
background-color: #ffffff;
transition: all 0.15s ease !important;
}

tr.oddeven:nth-child(even), tr.pair {
background-color: #f8fafc;
}

/* Hover amélioré sur les lignes - EXCLURE tbody tr:hover trop générique.
   PAS de transform:scale() ici : agrandir la ligne au survol déplace les éléments
   interactifs (cases à cocher…) sous le curseur → le :hover oscille en boucle et
   la case « tressaute » (vu sur comm/action/fiche.php, case Événement sur la journée). */
tr.oddeven:hover, tr.pair:hover, tr.impair:hover,
.fiche tbody tr:hover, #id-right tbody tr:hover {
background-color: #f1f5f9 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Bandeaux de titre (print_fiche_titre/print_barre_liste = table.notopnoleftnoright) :
   PAS d'effet de survol — le gris hover sur le titre est moche et sans signification
   (un titre n'est pas une ligne de données). Rester neutre comme le fond. */
.fiche table.notopnoleftnoright tbody tr:hover,
#id-right table.notopnoleftnoright tbody tr:hover,
table.notopnoleftnoright tr:hover {
background-color: transparent !important;
box-shadow: none !important;
}

/* Annuler l'effet hover sur la page de login */
#login tr:hover,
#login tbody tr:hover,
.login_center tr:hover,
.login_block tr:hover {
background-color: transparent !important;
transform: none !important;
box-shadow: none !important;
}

/* === LIGNES COLORÉES ADOUCIES (inline styles) === */
/* Neutraliser les fonds colorés agressifs et les remplacer par des versions pastel */

/* Rouge vif (#f26e6e) → Rose pastel */
tr[style*="background-color: #f26e6e"],
tr[style*="background-color:#f26e6e"],
tr[style*="background: #f26e6e"] {
background-color: #fff5f5 !important;
border-left: 3px solid #ff6b6b !important;
}

tr[style*="background-color: #f26e6e"] td,
tr[style*="background-color:#f26e6e"] td {
color: #c0392b !important;
}

/* Autres fonds colorés courants - adoucir vers des pastels */
/* Rouge générique */
tr[style*="background-color: red"],
tr[style*="background-color: #ff0000"],
tr[style*="background-color:#ff0000"] {
background-color: #ffebee !important;
border-left: 3px solid #f44336 !important;
}

/* Jaune/Orange vifs → Jaune pastel */
tr[style*="background-color: #ffcc00"],
tr[style*="background-color: #ffa500"],
tr[style*="background-color: orange"],
tr[style*="background-color: yellow"] {
background-color: #fff8e1 !important;
border-left: 3px solid #ffc107 !important;
}

/* Vert vif → Vert pastel */
tr[style*="background-color: #00ff00"],
tr[style*="background-color: green"],
tr[style*="background-color: lime"] {
background-color: #e8f5e9 !important;
border-left: 3px solid #4caf50 !important;
}

/* Bleu vif → Bleu pastel */
tr[style*="background-color: #0000ff"],
tr[style*="background-color: blue"] {
background-color: #e3f2fd !important;
border-left: 3px solid #2196f3 !important;
}

/* Gris foncé → Gris clair */
tr[style*="background-color: #333"],
tr[style*="background-color: #666"],
tr[style*="background-color: gray"] {
background-color: #f5f5f5 !important;
border-left: 3px solid #9e9e9e !important;
}

/* === FORMULAIRES MODERNISÉS === */
input, textarea, select,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="time"],
.flat, .flatinput {
background-color: #ffffff !important;
color: #333333 !important;
border: 1px solid #d0d7de !important;
border-radius: 4px !important;
padding: 5px 8px !important;
font-size: 12px !important;
transition: all 0.2s ease !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

input:hover, textarea:hover, select:hover,
.flat:hover, .flatinput:hover {
border-color: #4A90E280 !important;
}

input:focus, textarea:focus, select:focus,
.flat:focus, .flatinput:focus {
border-color: #4A90E2 !important;
outline: none !important;
box-shadow: 0 0 0 3px #4A90E225, inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

input::placeholder, textarea::placeholder {
color: #6b7280;
opacity: 0.7;
}

select option {
background-color: #ffffff;
color: #333333;
padding: 8px;
}

/* Input color - ne pas changer le fond */
input[type="color"] {
background-color: transparent !important;
padding: 2px;
cursor: pointer;
}

/* Checkbox et radio : ANNULER la "modernisation" générique des inputs ci-dessus
   (padding, bordure, radius, box-shadow, transition). Sur un contrôle NATIF, ces
   propriétés rendent le rendu Chrome instable : la taille saute entre rendu natif
   (13×13) et rendu stylé (27×21) → cases qui « tremblent » au chargement et au
   survol (vu sur comm/action/fiche.php et la colonne gauche de l'agenda toastui).
   Seul accent-color est sûr pour thémer un contrôle natif. */
input[type="checkbox"], input[type="radio"] {
accent-color: #4A90E2;
cursor: pointer;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
transition: none !important;
}

/* === BOUTONS DROPDOWN AUTOCOMPLETE (jQuery UI) === */
/* Correction alignement bouton dropdown avec input */
.ui-autocomplete-input + button.ui-button-icon-only,
button.ui-button.ui-button-icon-only.ui-corner-right {
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
padding: 0 6px !important;
box-sizing: border-box !important;
vertical-align: middle !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #f8fafc !important;
border: 1px solid #d0d7de !important;
border-left: none !important;
border-radius: 0 4px 4px 0 !important;
margin-left: -1px !important;
}

.ui-autocomplete-input + button.ui-button-icon-only:hover,
button.ui-button.ui-button-icon-only.ui-corner-right:hover {
background-color: #f1f5f9 !important;
border-color: #4A90E280 !important;
}

/* Icône à l'intérieur du bouton dropdown - centrage parfait */
.ui-autocomplete-input + button.ui-button-icon-only .ui-icon,
button.ui-button.ui-button-icon-only.ui-corner-right .ui-icon {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
}

/* Input autocomplete - ajuster le border-radius pour s'accorder avec le bouton */
input.ui-autocomplete-input {
border-radius: 4px 0 0 4px !important;
}

/* Boutons dans les formulaires de filtre */
form[name="formfilter"] button.ui-button-icon-only {
height: 26px !important;
min-height: 26px !important;
}

/* Menu déroulant des résultats autocomplete */
.ui-autocomplete, .ui-menu {
background-color: #ffffff !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
padding: 4px 0 !important;
max-height: 300px !important;
overflow-y: auto !important;
z-index: 9999 !important;
}

.ui-autocomplete .ui-menu-item,
.ui-menu .ui-menu-item {
padding: 0 !important;
margin: 0 !important;
}

.ui-autocomplete .ui-menu-item-wrapper,
.ui-menu .ui-menu-item-wrapper {
padding: 8px 12px !important;
color: #333333 !important;
transition: all 0.15s ease !important;
cursor: pointer !important;
}

/* jQuery UI (thème smoothness) applique des fonds clairs/jaunes + images PNG (ui-bg_glass_*.png,
   ui-state-highlight = #fbf9ee crème) sur .ui-widget-content et .ui-state-* . Dans les dropdowns
   autocomplete, ça produit le bandeau jaune qui pollue une partie de la liste (bug dans les DEUX
   modes, jQuery UI n'étant pas theme-aware). On neutralise images + fonds des états dans le
   contexte menu/autocomplete et on les réaligne sur le thème. */
.ui-autocomplete, .ui-menu,
.ui-autocomplete .ui-menu-item, .ui-menu .ui-menu-item,
.ui-autocomplete .ui-menu-item-wrapper, .ui-menu .ui-menu-item-wrapper,
.ui-autocomplete .ui-widget-content, .ui-menu .ui-widget-content,
.ui-autocomplete .ui-state-default, .ui-menu .ui-state-default,
.ui-autocomplete .ui-state-highlight, .ui-menu .ui-state-highlight {
background-image: none !important;
background-color: #ffffff !important;
color: #333333 !important;
border-color: #e0e6ed !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus,
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
/* Survol d'un item : on garde la couleur d'accent de l'utilisateur ($primaryColor/$accentColor)
   en fond, mais le TEXTE est auto-contrasté via bestTextColor() — noir sur accent clair
   (pastel #e1ccff), blanc sur accent foncé. Forcer le blanc rendait le libellé illisible sur
   les accents clairs (cas signalé sur le dropdown « Liste des Destinataire(s) »). */
background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
background-image: linear-gradient(135deg, #4A90E2, #357ABD) !important;
color: #1a1a1a !important;
border: none !important;
}


/* === MENU HAUT MODERNISÉ === */
/* Background géré par cloudtheme/theme/doliplus/style.css.php */
.tmenu, #tmenu_tooltip, .topmenu,
div.tmenu, #id-top {
background: transparent !important;
border-color: #e0e6ed !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.tmenu a, .topmenu a {
color: #333333 !important;
/* padding: 8px 12px !important; taille menu haut padding: 10px 4px !important;*/
padding: 10px 4px !important;
position: relative !important;
}

.tmenu a:hover, .topmenu a:hover {
color: #4A90E2 !important;
background-color: #f1f5f9 !important;
}

.tmenu .mainmenuaspan.active,
.tmenu a.tmenusel,
.mainmenuaspan.active {
border-bottom: 3px solid #4A90E2 !important;
color: #4A90E2 !important;
font-weight: 600 !important;
}

/* Menu déroulant modernisé */
.tmenudiv, .menu_contenu, ul.dropdown-menu {
background-color: #ffffff !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px !important;
/* box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;*/
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
padding: 8px 0 !important;
margin-top: 4px !important;
}

.tmenudiv a, .menu_contenu a {
color: #333333 !important;
padding: 10px 16px !important;
display: block !important;
transition: all 0.15s ease !important;
}

.tmenudiv a:hover, .menu_contenu a:hover {
background-color: #f1f5f9 !important;
color: #4A90E2 !important;
padding-left: 20px !important;
}

/* === MENU GAUCHE MODERNISÉ ET ULTRA-COMPACT === */

/* MENU GAUCHE — SOBRE & LISSE : un seul fond = couleur principale de la page (--dp-bg).
   Avant : .vmenu en $backgroundSecondary, .menu_contenu en navy, titres en dégradé pastel
   → empilement de noirs/zones différentes. On aplatit tout sur le fond de page, séparé du
   contenu par une simple bordure droite. */
.vmenu, #id-left, .blockvmenu, .blockvmenusearch {
background-color: var(--dp-bg, #ffffff) !important;
background-image: none !important;
border: none !important;
border-right: 1px solid var(--dp-border, #e0e6ed) !important;
font-size: 12px !important;
}
/* Les LIENS du menu portent aussi la classe "vmenu" (ex. <a class="vmenu vmenudoli"> dans
   .menu_titre) → la bordure droite ci-dessus, prévue pour le CONTENEUR, les frappait aussi.
   On la retire des liens : elle ne doit séparer que le menu du contenu, pas chaque entrée. */
a.vmenu, .menu_titre a.vmenu, .vmenu a.vmenu, #id-left a.vmenu, .blockvmenu a.vmenu {
border-right: 0 !important;
}
/* Tous les conteneurs internes transparents → le fond unique de .vmenu transparaît partout */
.vmenu .menu_contenu, #id-left .menu_contenu, .blockvmenu .menu_contenu,
.blockvmenupair, .blockvmenuimpair,
.blockvmenupair > div, .blockvmenuimpair > div,
.blockvmenupair .menu_contenu, .blockvmenuimpair .menu_contenu,
.menu_top, .menu_end, .blockvmenubookmarks,
.vmenu table, .vmenu tr, .vmenu td,
#id-left table, #id-left tr, #id-left td {
background-color: transparent !important;
background-image: none !important;
}

/* Titres de sections du menu - ULTRA-COMPACT */
.blockvmenupair .blockvmenutitle,
.blockvmenuimpair .blockvmenutitle,
.menu_titre {
background: transparent !important;
border-left: 2px solid #4A90E2 !important;
padding: 5px 10px !important;
margin: 0 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 10px !important;
letter-spacing: 0.3px !important;
color: #333333 !important;
line-height: 1.3 !important;
}

/* Liens du menu - ULTRA-COMPACT */
.vmenu a, #id-left a,
.blockvmenu a,
.menu_contenu a {
color: #333333 !important;
padding: 4px 10px !important;
display: block !important;
transition: all 0.15s ease !important;
border-left: 2px solid transparent !important;
font-size: 12px !important;
line-height: 1.3 !important;
margin: 0 !important;
}

.vmenu a:hover, #id-left a:hover,
.blockvmenu a:hover,
.menu_contenu a:hover {
color: #4A90E2 !important;
background-color: #f1f5f9 !important;
border-left-color: #4A90E2 !important;
padding-left: 14px !important;
}

/* Élément actif du menu */
.vmenu a.vsmenu.active,
.blockvmenu a.active,
#id-left a.active,
.menu_contenu a.active {
color: #4A90E2 !important;
background-color: #4A90E210 !important;
border-left-color: #4A90E2 !important;
font-weight: 600 !important;
}


/* Blocs de menu - espacement minimal */
.blockvmenuimpair,
.blockvmenupair {
padding: 0 !important;
padding-bottom: 2px !important;
margin: 0 !important;
margin-bottom: 2px !important;
border: none !important;
}

/* Contenu des blocs de menu */
.blockvmenuimpair .menu_contenu,
.blockvmenupair .menu_contenu {
padding: 0 !important;
margin: 0 !important;
border: none !important;
}

/* Bordures transparentes menu gauche - TOUTES */
.blockvmenupair,
.blockvmenuimpair,
.blockvmenupair > div,
.blockvmenuimpair > div,
.blockvmenupair .menu_titre,
.blockvmenuimpair .menu_titre,
.blockvmenupair .menu_top,
.blockvmenuimpair .menu_top,
.blockvmenupair .menu_contenu,
.blockvmenuimpair .menu_contenu,
.blockvmenupair .menu_end,
.blockvmenuimpair .menu_end,
.menu_titre,
.menu_top,
.menu_end {
border: none !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
border-color: transparent !important;
}

/* Liens bookmarks (.vsmenu) - ULTRA COMPACT */
.menu_contenu a.vsmenu {
padding: 1px 8px !important;
line-height: 1.1 !important;
font-size: 11px !important;
display: inline-block !important;
margin: 0 !important;
}

/* Supprimer l'espace des <br> dans menu_contenu */
.menu_contenu br {
display: none !important;
}

/* Images bookmarks plus petites */
.menu_contenu a.vsmenu img {
max-width: 12px !important;
max-height: 12px !important;
margin-right: 4px !important;
vertical-align: middle !important;
}

/* Liste ul dans les menus */
.vmenu ul, .blockvmenu ul,
#id-left ul, .menu_contenu ul {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}

/* Éléments li dans les menus */
.vmenu li, .blockvmenu li,
#id-left li, .menu_contenu li {
padding: 0 !important;
margin: 0 !important;
line-height: 1.3 !important;
}

/* Recherche dans le menu */
.blockvmenusearch {
padding: 4px 10px !important;
margin: 0 !important;
}

.blockvmenusearch input {
background-color: #ffffff !important;
border-color: #d0d7de !important;
color: #333333 !important;
border-radius: 4px !important;
padding: 4px 10px !important;
font-size: 12px !important;
height: auto !important;
line-height: 1.3 !important;
}

/* Icônes dans le menu - réduire leur taille en mode compact (SAUF logo) */

/* Logo du menu gauche - taille préservée.
   #menu_contenu_logo img : le logo du menu (eldy.lib.php, doliplusMenu.lib.php) n'a jamais porté
   .logocompany — le plafond 14px du mode compact l'écrasait à 14x3 (ticket madis 12/10/2026).
   L'id l'emporte sur `.menu_contenu img:not(...)` à !important égal. */
img.logocompany,
#menu_contenu_logo img {
max-width: 100% !important;
max-height: none !important;
width: auto !important;
height: auto !important;
}

/* === BOOKMARKS ULTRA-COMPACTS === */
div.blockvmenubookmarks {
padding: 4px 10px !important;
margin: 0 !important;
margin-bottom: 2px !important;
border-radius: 4px !important;
border: 1px solid #e0e6ed !important;
}

/* Select2 des bookmarks - compact */
.blockvmenubookmarks .select2-container {
font-size: 12px !important;
}

.blockvmenubookmarks .select2-container--default .select2-selection--single {
height: 24px !important;
min-height: 24px !important;
padding: 0 !important;
line-height: 1.3 !important;
border-radius: 4px !important;
}

.blockvmenubookmarks .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 22px !important;
padding-left: 6px !important;
padding-right: 20px !important;
font-size: 12px !important;
}

.blockvmenubookmarks .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 22px !important;
top: 0 !important;
}

/* Box bookmark natif - compact */
#boxbookmark.boxcombo,
select#boxbookmark {
height: 24px !important;
line-height: 22px !important;
font-size: 12px !important;
padding: 0 4px !important;
border-radius: 4px !important;
}

/* Dropdown bookmarks - ULTRA compact */
.blockvmenubookmarks .select2-dropdown {
font-size: 12px !important;
min-width: 150px !important;
}

.blockvmenubookmarks .select2-results__option,
.blockvmenubookmarks .select2-results__option--selectable {
font-size: 9px !important;
padding: 0px 4px !important;
line-height: 1.0 !important;
min-height: 12px !important;
max-height: 14px !important;
height: 12px !important;
overflow: hidden !important;
}

/* Liste résultats Select2 bookmarks */
.blockvmenubookmarks .select2-results {
max-height: 250px !important;
}

.blockvmenubookmarks .select2-results__options {
padding: 0 !important;
margin: 0 !important;
}

/* Hover sur les options bookmarks */
.blockvmenubookmarks .select2-results__option--highlighted {
background-color: #4A90E2 !important;
color: #ffffff !important;
}

/* === ONGLETS MODERNISÉS === */
/* Surcharger la height fixe de styleglobal pour permettre multi-lignes */
div.tabs {
overflow: hidden !important; /* Clearfix pour contenir les floats */
height: auto !important; /* Annule height fixe de styleglobal */
min-height: 30px !important;
margin-bottom: 0 !important;
border-bottom: 1px solid #e0e6ed !important;
}

.div-table-responsive-no-min {
overflow: visible !important;
}

/* Onglets cliquables - garder float/display de base pour multi-lignes */
div.tabs a.tab,
div.tabs a.tab#active,
div.tabs a.tabactive {
box-sizing: border-box !important;
/* Ne pas forcer display/float - laisser le comportement de base pour multi-lignes */
height: 30px !important;
padding: 0 6px !important;
margin: 0 2px !important;
margin-bottom: 0 !important;
line-height: 30px !important;
font-size: 12px !important;
vertical-align: middle !important;
white-space: nowrap !important;
background-color: #f8fafc !important;
background-image: none !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px 4px 0 0 !important;
color: #333333 !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}

/* tabTitle = TITRE de la fiche (ex: "Proposition commerciale") - NON cliquable */
div.tabs a.tabTitle,
div.tabs span.tabTitle {
/* Ne pas forcer display - garder float:left de base */
height: 30px !important;
line-height: 30px !important;
padding: 0 8px 0 0 !important;
margin: 0 6px 0 0 !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #333333 !important;
background: transparent !important;
border: none !important;
border-right: 2px solid #4A90E2 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}

/* Icônes dans les onglets - taille fixe */
div.tabs a.tab img,
div.tabs a.tab .imgnotab,
div.tabs a.tab .pictofixedwidth {
height: 16px !important;
max-height: 16px !important;
width: auto !important;
margin-right: 6px !important;
vertical-align: middle !important;
}

/* Hover - fond primaire + texte foncé
   ⚠ PIÈGE GÉOMÉTRIE (corrigé 21/09/2026) : styleglobal.css.php:1453 pose
   `box-sizing: initial !important` sur `div.tabs a.tab:hover`. Sa spécificité (0-0-2-2) bat
   celle de la règle de base ci-dessus (`div.tabs a.tab`, 0-0-1-2), donc l'onglet SURVOLÉ
   repassait en content-box : height + paddings + bordures = 39px au lieu des 26px du repos.
   Les onglets sont des `float: left` : un float plus haut bloque le pavage de la ligne
   suivante, qui se décalait à droite et débordait sur une ligne de plus. Le symptôme
   apparaissait "au clic" parce que le curseur reste sur l'onglet après le clic.
   → On réaffirme ici la géométrie de la règle de base (mêmes valeurs, état survolé). */
div.tabs a.tab:hover,
div.tabs a.tab:focus,
div.tabs a.tab:active {
box-sizing: border-box !important;
height: 30px !important;
line-height: 30px !important;
}

div.tabs a.tab:hover {
background-color: #4A90E2 !important;
color: #000000 !important;
border-top: 3px solid #4A90E2 !important;
}

.tab, .tabunactive,
div.tabs div.tab {
background-color: #f8fafc;
border-color: #e0e6ed;
transition: all 0.2s ease !important;
}

/* Onglet actif - double bordure haute et basse
   Les deux filets prennent $tabActiveInk, pas la primaire brute : voir le commentaire de
   cette variable. Une primaire pastel laissait le repère de sélection à 1,17:1. */
div.tabs a.tab#active,
div.tabs a#active,
div.tabs a.tabactive {
background-color: #ffffff !important;
border: 1px solid #e0e6ed !important;
border-top: 4px solid #2275d7 !important;
border-bottom: 3px solid #2275d7 !important;
color: #333333 !important;
font-weight: 700 !important;
}

/* === BOUTONS D'ACTION (tabsAction) - BARRE FIXE EN BAS - TOUJOURS VISIBLE === */
/* Surcharge forcée de styleglobal.css.php qui met background-color: transparent */
div.tabsAction,
body div.tabsAction,
#id-right div.tabsAction,
.fiche div.tabsAction {
position: fixed !important;
top: auto !important; /* ⭐ IMPORTANT : annule le top défini ailleurs */
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
/* Forcer le fond opaque - JAMAIS transparent */
background: #ffffff !important;
background-color: #ffffff !important;
border-top: 2px solid #4A90E2 !important;
box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
padding: 6px 8px !important;
margin: 0 !important;
text-align: center !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
min-height: 50px !important;
height: auto !important;
max-height: none !important;
/* Forcer visibilité - pas de hover nécessaire */
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition: none !important;
/* Annuler les positions partielles de styleglobal */
box-sizing: border-box !important;
}

/* Désactiver tout comportement hover qui cacherait/montrerait la barre */
div.tabsAction:hover,
body div.tabsAction:hover {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background-color: #ffffff !important;
}

/* Boutons dans tabsAction */
div.tabsAction a.butAction,
div.tabsAction a.butActionDelete,
div.tabsAction a.butActionRefused,
div.tabsAction span.butAction,
div.tabsAction span.butActionRefused {
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 5px 12px !important;
font-size: 12px !important;
}

.tabBar, .tabBarWithBottom {
background-color: #ffffff !important;
border: 1px solid #e0e6ed !important;
border-top: 1px solid #e0e6ed !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
border-radius: 0 0 4px 4px !important;
position: relative !important;
z-index: 0 !important;
}

/* === FICHES ET CARTES MODERNISÉES === */
.fiche, #id-right {
background-color: #fafbfc !important;
padding: 8px !important;
}

/* Espace en bas du contenu pour ne pas être masqué par la barre d'actions fixe.
   ⚠️ CE BLOC DOIT RESTER APRÈS la règle ci-dessus : elle écrit `padding` en RACCOURCI, ce qui
   remet padding-bottom à $paddingLg (6px) et annulait donc la compensation, qui était posée
   plus haut dans le fichier. Défaut mesuré le 2026-08-25 : `.fiche` calculait 6px alors que
   `div.tabsAction` occupe une bande FIXE de 52 px en bas de fenêtre — les dernières lignes d'un
   tableau passaient sous les boutons, illisibles. Vaut pour TOUTE page portant une tabsAction,
   pas seulement le requêteur. */
.fiche, #id-right, .fichecenter {
padding-bottom: 70px !important;
}

/* Quand il n'y a pas de barre d'actions, l'espace ne se justifie pas. */
body:not(:has(div.tabsAction)) .fiche,
body:not(:has(div.tabsAction)) #id-right {
padding-bottom: 8px !important;
}

.fichecenter, .fichehalfright, .fichehalfleft,
.ficheaddleft, .underbanner {
background-color: #ffffff !important;
border-radius: 4px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
padding: 6px !important;
margin-bottom: 6px !important;
}



/* Cartes avec effet de survol subtil */
.fichecenter:hover, .fichehalfright:hover, .fichehalfleft:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* === FIX DÉCALAGE COLONNES (Float Collapse) === */
/* Clearfix pour contenir les floats */
.fichecenter::after {
content: "" !important;
display: table !important;
clear: both !important;
}

.fichecenter {
overflow: visible !important;
}

/* Layout Flexbox moderne pour les colonnes */
.fichecenter {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
align-items: flex-start !important;
}

/* Colonnes gauche/droite 50/50 - annuler les floats */
.fichehalfleft,
.fichehalfright,
.ficheaddleft {
float: none !important;
flex: 1 1 calc(50% - 6px) !important;
min-width: 300px !important;
box-sizing: border-box !important;
}

/* Fix: fichehalfleft élargi à 65% quand elle contient table.formdoc
(la table dépasse 651px à cause des cellules white-space:nowrap,
fichehalfright de droite la masquait) */
.fichecenter:has(table.formdoc) .fichehalfleft {
flex: 0 1 65% !important;
}
.fichecenter:has(table.formdoc) .fichehalfright {
flex: 1 1 30% !important;
}
/* Sous 1280px : formdoc (~650px incompressibles, cellules nowrap) + colonne droite
ne tiennent plus côte à côte. La page étant une <table> héritée, le flex-wrap seul
n'empêche pas la table de s'élargir (scroll horizontal) → on empile explicitement. */
@media (max-width: 1280px) {
.fichecenter:has(table.formdoc) .fichehalfleft,
.fichecenter:has(table.formdoc) .fichehalfright {
flex: 1 1 100% !important;
}
}

/* Colonnes 30/70 - layout responsive */
.fichethirdleft {
float: none !important;
flex: 0 0 30% !important;
min-width: 250px !important;
box-sizing: border-box !important;
}

.fichetwothirdright {
float: none !important;
flex: 1 1 65% !important;
min-width: 400px !important;
box-sizing: border-box !important;
}

/* Responsive : empiler sur petits écrans (768px pour conserver 2 colonnes sur tablettes) */
@media (max-width: 768px) {
.fichethirdleft,
.fichetwothirdright,
.fichehalfleft,
.fichehalfright {
flex: 1 1 100% !important;
min-width: 100% !important;
}
}

/* Fallback pour anciens navigateurs */
@supports not (display: flex) {
.fichecenter::before,
.fichecenter::after {
content: "" !important;
display: table !important;
clear: both !important;
}

.fichehalfleft,
.fichehalfright {
float: left !important;
width: 48% !important;
}

.fichehalfright {
float: right !important;
}
}

/* === TITRES === */
.titre, .fiche_title, td.titre, h1, h2, h3, h4,
.titreref, .refid, .refidno {
color: #333333 !important;
}

/* === BADGES ET STATUTS MODERNISÉS === */
/* Contraste garanti WCAG AA avec les couleurs auto-assombries */
.badge, .badge-status {
background: linear-gradient(135deg, #2275d7, #3375b5) !important;
color: #ffffff !important;
border-radius: 20px !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Badges sémantiques Bootstrap/Dolibarr avec contraste garanti */
.badge-primary {
background: linear-gradient(135deg, #0056b3, #004494) !important;
color: #ffffff !important;
}

.badge-secondary, .badge-status-secondary {
background: linear-gradient(135deg, #5a6268, #494f54) !important;
color: #ffffff !important;
}

.badge-success, .badge-status-success {
background: linear-gradient(135deg, #218838, #1e7e34) !important;
color: #ffffff !important;
}

.badge-danger, .badge-status-danger {
background: linear-gradient(135deg, #c82333, #b21f2d) !important;
color: #ffffff !important;
}

.badge-warning, .badge-status-warning {
background: linear-gradient(135deg, #d39e00, #c69500) !important;
color: #212529 !important; /* Texte foncé sur fond jaune */
}

.badge-info, .badge-status-info {
background: linear-gradient(135deg, #117a8b, #0f6674) !important;
color: #ffffff !important;
}

/* Badge statuts numériques Dolibarr */
.badge-status0, span.badge-status0 {
background: linear-gradient(135deg, #5a6268, #494f54) !important;
color: #ffffff !important;
}

.badge-status1, span.badge-status1 {
background: linear-gradient(135deg, #d39e00, #c69500) !important;
color: #212529 !important;
}

.badge-status4, span.badge-status4 {
background: linear-gradient(135deg, #218838, #1e7e34) !important;
color: #ffffff !important;
}

.badge-status5, span.badge-status5,
.badge-status6, span.badge-status6,
.badge-status8, span.badge-status8,
.badge-status9, span.badge-status9 {
background: linear-gradient(135deg, #c82333, #b21f2d) !important;
color: #ffffff !important;
}

/* Statuts avec couleurs sémantiques et dégradés */
.statut0, .statusref0 {
background: linear-gradient(135deg, #6c757d, #5a6268) !important;
color: #fff !important;
}
.statut1, .statusref1 {
background: linear-gradient(135deg, #ffc107, #e0a800) !important;
color: #000 !important;
}
.statut2, .statusref2 {
background: linear-gradient(135deg, #128294, #138496) !important;
color: #fff !important;
}
.statut3, .statusref3 {
background: linear-gradient(135deg, #208637, #218838) !important;
color: #fff !important;
}
.statut4, .statusref4 {
background: linear-gradient(135deg, #208637, #218838) !important;
color: #fff !important;
}
.statut5, .statusref5 {
background: linear-gradient(135deg, #dc3545, #c82333) !important;
color: #fff !important;
}
.statut6, .statusref6 {
background: linear-gradient(135deg, #dc3545, #c82333) !important;
color: #fff !important;
}

/* === MESSAGES MODERNISÉS === */
/* Boîte (padding/fond/bordure) UNIQUEMENT sur div.x + jnotify : le cœur utilise aussi
   <font class="ok|warning|error"> comme simple texte coloré inline (ex. valeurs Oui/Non
   myfield sur les fiches) → ne pas transformer ces inline en boîtes parasites */
.ok, .info {
color: #206cc5;
}
div.ok, div.info {
color: #206cc5;
border-radius: 4px !important;
padding: 12px 16px !important;
border-left: 4px solid #4A90E2 !important;
background-color: #eaf1f8 !important;
}

.warning {
color: #856404;
}
div.warning {
color: #856404;
background-color: #fff3cd !important;
border-left: 4px solid #f0ad4e !important;
border-radius: 4px !important;
padding: 12px 16px !important;
}

.error {
color: #721c24;
}
div.error {
color: #721c24;
background-color: #f8d7da !important;
border-left: 4px solid #dc3545 !important;
border-radius: 4px !important;
padding: 12px 16px !important;
}

/* PAGE DE LOGIN : le message « Identifiants login ou mot de passe incorrects » s'affiche
   sur le fond (souvent sombre) de la page de connexion → le rouge foncé sur rose devenait
   illisible. On force un bandeau rouge plein + texte BLANC, lisible quel que soit le fond.
   IMPORTANT : le div.error est rendu APRÈS </form> (hors de #login) dans core/tpl/login.tpl.php
   → on cible toute la page de login via body:has(#login). */
body:has(#login) .error {
color: #ffffff !important;
background-color: #dc3545 !important;
border-left: 4px solid #a71d2a !important;
border-radius: 4px !important;
padding: 12px 16px !important;
text-shadow: none !important;
}
body:has(#login) .error a { color: #ffffff !important; text-decoration: underline !important; }

/* ========== TOASTS JNOTIFY (notifications flottantes) ==========
   Signalé GP le 2026-08-24 : « les messages de notifications en mode dark ne sont pas
   lisibles ». Mesuré au bridge (Atelier + sombre, 4 toasts sticky) AVANT correctif :
     succès / information : #446548 sur #1f3326 = 2,05:1
     erreur               : #a72947 sur #1f3326 = 1,96:1
     avertissement (CLAIR): #c2a928 sur #f8f6f8 = 2,17:1   ← même cause, variante claire

   DEUX causes, aucune corrigible en tâtonnant sur les couleurs :

   1. SPÉCIFICITÉ. Le plugin (includes/jquery/plugins/jnotify/jquery.jnotify-alt.min.css,
      chargé par main.inc.php:1183) écrit ses couleurs sur des sélecteurs à TROIS classes —
      `.jnotify-container .jnotify-notification-error .jnotify-message{color:#a72947!important}`
      — alors que le thème n'écrivait que `.jnotify-message` (une classe). Le plugin gagnait :
      les toasts gardaient ses 3 encres codées en dur (#446548 vert, #c2a928 moutarde,
      #a72947 rouge), calibrées pour SON fond clair, quelle que soit la variante.
      ⇒ Il faut au minimum la même spécificité + !important. On préfixe par `body`.

   2. SÉLECTEURS MORTS. Le thème visait `.jnotify-warning` / `.jnotify-error`, classes qui
      N'EXISTENT PAS. Le markup réel du plugin (jquery.jnotify.min.js) est :
        <div class="jnotify-notification jnotify-notification-TYPE">
          <div class="jnotify-background"></div><a class="jnotify-close">×</a>
          <div class="jnotify-message"><div>…</div></div>
        </div>
      Le type vit sur le PARENT (`jnotify-notification-error`), jamais sur le message. Ces
      deux règles n'ont donc jamais rien peint : seul `.jnotify-message` s'appliquait, et il
      donnait le MÊME fond vert à tous les types — erreur et avertissement compris.

   Le fond réel est peint sur DEUX couches empilées : `.jnotify-background` (absolute,
   z-index 1, #e3f0db/#fff7d1/#d79eac en dur) et `.jnotify-message` (z-index 2). On peint
   les deux de la même teinte, sinon la couche du plugin ressort sur les coins arrondis.

   Types relevés dans le code DoliPlus (~380 appels) : error/errors, warning/warn,
   success/mesgs, info/information. Le plugin n'en connaît que deux (-error, -warning) :
   `errors` et `warn` tombaient sur son style par défaut, donc peints en VERT SUCCÈS.
   On les rattache ici à leur famille. */
body .jnotify-container .jnotify-notification .jnotify-message,
body .jnotify-container .jnotify-notification .jnotify-message *,
body .jnotify-container .jnotify-notification a.jnotify-close {
color: #1e5631 !important;
}
body .jnotify-container .jnotify-notification .jnotify-message {
background-color: #e8f5ec !important;
border-left: 4px solid #2f9e5a !important;
border-radius: 4px !important;
padding: 12px 16px !important;
}
body .jnotify-container .jnotify-notification .jnotify-background {
background-color: #e8f5ec !important;
opacity: 1 !important;
}
    body .jnotify-container .jnotify-notification-success .jnotify-message,
body .jnotify-container .jnotify-notification-success .jnotify-message *,
body .jnotify-container .jnotify-notification-success a.jnotify-close,
body .jnotify-container .jnotify-notification-mesgs .jnotify-message,
body .jnotify-container .jnotify-notification-mesgs .jnotify-message *,
body .jnotify-container .jnotify-notification-mesgs a.jnotify-close {
color: #1e5631 !important;
}
    body .jnotify-container .jnotify-notification-success .jnotify-message,
body .jnotify-container .jnotify-notification-mesgs .jnotify-message {
background-color: #e8f5ec !important;
border-left: 4px solid #2f9e5a !important;
}
    body .jnotify-container .jnotify-notification-success .jnotify-background,
body .jnotify-container .jnotify-notification-mesgs .jnotify-background {
background-color: #e8f5ec !important;
opacity: 1 !important;
}
    body .jnotify-container .jnotify-notification-info .jnotify-message,
body .jnotify-container .jnotify-notification-info .jnotify-message *,
body .jnotify-container .jnotify-notification-info a.jnotify-close,
body .jnotify-container .jnotify-notification-information .jnotify-message,
body .jnotify-container .jnotify-notification-information .jnotify-message *,
body .jnotify-container .jnotify-notification-information a.jnotify-close {
color: #1b4d80 !important;
}
    body .jnotify-container .jnotify-notification-info .jnotify-message,
body .jnotify-container .jnotify-notification-information .jnotify-message {
background-color: #e7f1ff !important;
border-left: 4px solid #4a90e2 !important;
}
    body .jnotify-container .jnotify-notification-info .jnotify-background,
body .jnotify-container .jnotify-notification-information .jnotify-background {
background-color: #e7f1ff !important;
opacity: 1 !important;
}
    body .jnotify-container .jnotify-notification-warning .jnotify-message,
body .jnotify-container .jnotify-notification-warning .jnotify-message *,
body .jnotify-container .jnotify-notification-warning a.jnotify-close,
body .jnotify-container .jnotify-notification-warn .jnotify-message,
body .jnotify-container .jnotify-notification-warn .jnotify-message *,
body .jnotify-container .jnotify-notification-warn a.jnotify-close {
color: #7a5b00 !important;
}
    body .jnotify-container .jnotify-notification-warning .jnotify-message,
body .jnotify-container .jnotify-notification-warn .jnotify-message {
background-color: #fff3cd !important;
border-left: 4px solid #f0ad4e !important;
}
    body .jnotify-container .jnotify-notification-warning .jnotify-background,
body .jnotify-container .jnotify-notification-warn .jnotify-background {
background-color: #fff3cd !important;
opacity: 1 !important;
}
    body .jnotify-container .jnotify-notification-error .jnotify-message,
body .jnotify-container .jnotify-notification-error .jnotify-message *,
body .jnotify-container .jnotify-notification-error a.jnotify-close,
body .jnotify-container .jnotify-notification-errors .jnotify-message,
body .jnotify-container .jnotify-notification-errors .jnotify-message *,
body .jnotify-container .jnotify-notification-errors a.jnotify-close {
color: #721c24 !important;
}
    body .jnotify-container .jnotify-notification-error .jnotify-message,
body .jnotify-container .jnotify-notification-errors .jnotify-message {
background-color: #f8d7da !important;
border-left: 4px solid #dc3545 !important;
}
    body .jnotify-container .jnotify-notification-error .jnotify-background,
body .jnotify-container .jnotify-notification-errors .jnotify-background {
background-color: #f8d7da !important;
opacity: 1 !important;
}

/* Animations pour les notifications */
.jnotify-message, .jnotify-notification {
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
animation: slideIn 0.3s ease !important;
}

@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

/* === TOOLTIPS MODERNISÉS === */
/* Vrais tooltips (infobulles) - fond sombre.
 * NE PAS cibler span.classfortooltip[title] : c'est l'élément DÉCLENCHEUR inline
 * (picto getNomUrl, textwithtooltip...), pas la bulle. Le fond #333 le rendait illisible
 * (ex. picto code-barres cyan des lots/séries sur fond noir). Les vraies bulles sont
 * .ui-tooltip / .tippy-box / .tooltip / [data-tooltip]. */
div.classfortooltip,
.tooltip, .tippy-box,
[data-tooltip], .ui-tooltip {
background-color: #333333 !important;
color: #ffffff !important;
border: none !important;
border-radius: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
padding: 8px 12px !important;
font-size: 12px !important;
}

/* Cellules de tableau avec classfortooltip - style badge discret (PAS de fond noir) */
td.classfortooltip,
th.classfortooltip,
table .classfortooltip:not([title]) {
background-color: transparent !important;
color: #333333 !important;
border: none !important;
box-shadow: none !important;
padding: inherit !important;
font-size: inherit !important;
}

/* Contenu dans les cellules avec badge optionnel */
td.classfortooltip span,
th.classfortooltip span {
background-color: #f5f5f5 !important;
color: #333333 !important;
padding: 4px 8px !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 500 !important;
display: inline-block !important;
line-height: 1.4 !important;
}

/* === INFO BOX MODERNISÉES === */
.info-box, .box, .boxtable {
background-color: #ffffff !important;
border: 1px solid #e0e6ed !important;
color: #333333 !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
}

.info-box:hover, .box:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
transform: translateY(-2px) !important;
}

/* Icône des info-box */
.info-box-icon {
background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
color: #ffffff !important;
}

.info-box-content, .info-box-text, .info-box-number {
color: #333333 !important;
}

.info-box-icon {
background-color: #4A90E2 !important;
color: #ffffff !important;
}

/* === MODALS MODERNISÉS === */
/* Conteneur : carte qui suit la variante, délimitée par un filet — sans bordure,
   le modal se fond dans l'overlay en mode sombre. */
.modal, .modal-content, .ui-dialog, .jnotify-container {
/* jQuery UI smoothness pose un PNG BLANC (ui-bg_flat_75_ffffff) en repeat-x sur
   .ui-widget-content → bande blanche au milieu du dialog si on ne le retire pas */
background-image: none !important;
background-color: #ffffff !important;
color: #333333 !important;
border: 1px solid #e0e6ed !important;
border-radius: 8px !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.28) !important;
}

/* En-tête : surface NEUTRE qui suit la variante — jamais le dégradé des couleurs
   custom (calibrées pastel clair → bandeau criard/illisible, cf. rules_global
   « couleurs custom = accents, jamais fonds »). */
/* Hauteurs COMPACTES (réf. magicmenu / jQuery UI stock : .4em 1em) — formconfirm()
   passe une hauteur FIXE au widget : tout padding d'entête/footer se déduit de la
   zone contenu → scroll sur le message si on aère trop. */
.modal-header, .ui-dialog .ui-dialog-titlebar {
background: #f8fafc !important;
color: #333333 !important;
border: none !important;
border-bottom: 1px solid #e0e6ed !important;
padding: 5px 12px !important;
border-radius: 8px 8px 0 0 !important;
}

.ui-dialog .ui-dialog-title {
font-size: 13px !important;
font-weight: 600 !important;
margin: 2px 16px 2px 0 !important;
color: #333333 !important;
}

/* Croix de fermeture discrète (l'état jQuery UI par défaut est un bouton gris massif) */
.ui-dialog .ui-dialog-titlebar-close {
background: transparent !important;
border: none !important;
border-radius: 4px !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
background: #f1f5f9 !important;
}

.modal-body {
padding: 20px !important;
}

/* Corps du dialog : transparent (la carte est portée par le conteneur), compact */
.ui-dialog .ui-dialog-content {
background: transparent !important;
color: #333333 !important;
border: none !important;
padding: 8px 14px !important;
line-height: 1.45 !important;
}

.modal-footer {
border-top: 1px solid #e0e6ed !important;
padding: 16px 20px !important;
background-color: #f8fafc !important;
}

/* jQuery UI dialog — barre de boutons (footer). jQuery UI laisse .ui-dialog-buttonpane en clair
   (non couvert par le bloc .ui-dialog ci-dessus) → bande blanche + boutons gris illisibles en
   mode sombre (ex. dialogue « Créer une tâche » de tododoli). On l'aligne sur le reste du modal. */
.ui-dialog .ui-dialog-buttonpane {
background-color: #f8fafc !important;
border-top: 1px solid #e0e6ed !important;
border-radius: 0 0 8px 8px !important;
margin-top: 0 !important;
padding: 4px 12px !important;
}
/* Boutons alignés à droite avec un vrai espacement (jQuery UI les colle en float) */
.ui-dialog .ui-dialog-buttonset {
display: flex !important;
justify-content: flex-end !important;
gap: 8px !important;
float: none !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button,
.ui-dialog .ui-dialog-buttonset button {
background: #f1f5f9 !important;
color: #333333 !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px !important;
padding: 3px 12px !important;
min-width: 60px !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
cursor: pointer !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
}
/* jQuery UI 1.x enveloppe le libellé dans .ui-button-text avec son propre padding */
.ui-dialog .ui-dialog-buttonset button .ui-button-text {
padding: 0 !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:hover,
.ui-dialog .ui-dialog-buttonset button:hover {
background: #2275d7 !important;
color: #ffffff !important;
border-color: #2275d7 !important;
}
/* Le bouton focus (= choix par défaut du formconfirm) doit se voir : anneau primaire.
   .ui-state-focus = classe posée par jQuery UI sur focus (couvre aussi le cas où le
   pseudo :focus n'est pas peint, fenêtre sans focus OS). */
.ui-dialog .ui-dialog-buttonpane .ui-button:focus,
.ui-dialog .ui-dialog-buttonset button:focus,
.ui-dialog .ui-dialog-buttonset button.ui-state-focus {
outline: none !important;
border-color: #2275d7 !important;
box-shadow: 0 0 0 3px #2275d740 !important;
}
/* Bouton primaire « Créer » mis en avant (couleur primaire à contraste garanti) */
.ui-dialog .ui-dialog-buttonpane .ui-button-primary,
.ui-dialog .ui-dialog-buttonset .ui-button-primary {
background: #2275d7 !important;
color: #ffffff !important;
border-color: #2275d7 !important;
}

/* Overlay du modal */
.modal-backdrop, .ui-widget-overlay {
background-color: rgba(0,0,0,0.5) !important;
backdrop-filter: blur(4px) !important;
}

/* === CALENDAR / DATEPICKER MODERNISÉ === */
/* jQuery UI (smoothness + custom) peint les jours via .ui-state-* avec fonds/PNG
   calibrés clair ET la couleur primaire custom → pastilles pastel à chiffres
   invisibles en dark. On neutralise TOUT (fond + image + couleur) dans le scope
   .ui-datepicker et on réaligne sur les tokens de variante. */
.ui-datepicker, .flatpickr-calendar {
background-color: #ffffff !important;
background-image: none !important;
color: #333333 !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
padding: 8px !important;
}

/* En-tête : surface neutre qui suit la variante (jamais le dégradé custom pastel) */
.ui-datepicker .ui-datepicker-header {
background: #f8fafc !important;
color: #333333 !important;
border: none !important;
border-radius: 2px !important;
margin-bottom: 6px !important;
padding: 4px !important;
}
.ui-datepicker .ui-datepicker-title {
color: #333333 !important;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
background: #ffffff !important;
color: #333333 !important;
border: 1px solid #d0d7de !important;
border-radius: 2px !important;
padding: 2px 4px !important;
}

/* Flèches mois précédent/suivant */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
background: transparent !important;
border: none !important;
border-radius: 2px !important;
cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
background: #f1f5f9 !important;
}

/* En-têtes de colonnes (LU MA ME…) + colonne numéro de semaine */
.ui-datepicker th {
background: transparent !important;
color: #666666 !important;
font-size: 11px !important;
}
.ui-datepicker td.ui-datepicker-week-col,
.ui-datepicker th.ui-datepicker-week-col {
background: transparent !important;
background-image: none !important;
color: #6b7280 !important;
}

/* Jours : pastille neutre, chiffre LISIBLE */
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
background: #f1f5f9 !important;
background-image: none !important;
color: #333333 !important;
border: 1px solid transparent !important;
border-radius: 2px !important;
text-align: center !important;
transition: background 0.15s ease !important;
}
.ui-datepicker td a.ui-state-default:hover {
background: #2275d7 !important;
color: #ffffff !important;
}
/* Aujourd'hui : repère discret ; jour sélectionné : plein */
.ui-datepicker td.ui-datepicker-today a {
border-color: #2275d7 !important;
}
.ui-datepicker td a.ui-state-active,
.ui-datepicker .ui-datepicker-current-day a,
.flatpickr-day.selected {
background: #2275d7 !important;
color: #ffffff !important;
border-color: #2275d7 !important;
}
/* Jours hors mois / non sélectionnables */
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-datepicker-unselectable span {
background: transparent !important;
color: #6b7280 !important;
}

.flatpickr-day {
color: #333333 !important;
border-radius: 2px !important;
}
.flatpickr-day:hover {
background-color: #f1f5f9 !important;
}

/* Boutons bas (Maintenant / Fermer) — alignés sur les boutons de dialog.
   .ui-priority-secondary pose opacity .7 → forcer 1 sinon bouton fantôme. */
.ui-datepicker .ui-datepicker-buttonpane {
background: transparent !important;
border-top: 1px solid #e0e6ed !important;
margin-top: 6px !important;
}
.ui-datepicker .ui-datepicker-buttonpane button {
background: #f1f5f9 !important;
background-image: none !important;
color: #333333 !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px !important;
padding: 3px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
opacity: 1 !important;
cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
background: #2275d7 !important;
color: #ffffff !important;
border-color: #2275d7 !important;
}

/* === DIVERS === */
hr {
border-color: #e0e6ed;
}

fieldset {
border: 1px solid #e0e6ed;
background-color: #ffffff;
border-radius: 4px !important;
padding: 16px !important;
}

legend {
color: #333333;
font-weight: 600;
padding: 0 8px;
}

pre, code {
background-color: #f1f5f9;
color: #333333;
border: 1px solid #e0e6ed;
border-radius: 4px !important;
padding: 12px !important;
font-family: 'Monaco', 'Consolas', monospace;
}

blockquote {
border-left: 4px solid #4A90E2;
background-color: #f1f5f9;
border-radius: 0 4px 4px 0 !important;
padding: 12px 16px !important;
margin: 16px 0 !important;
font-style: italic;
}

/* === PAGINATION MODERNISÉE === */
.pagination a, .pagination span,
.pageprevious, .pagenext, .paginationafterarrows {
background-color: #f8fafc;
color: #333333;
border: 1px solid #e0e6ed;
border-radius: 4px !important;
padding: 8px 12px !important;
margin: 0 2px !important;
transition: all 0.2s ease !important;
}

.pagination a:hover, .pageprevious:hover, .pagenext:hover {
background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
color: #ffffff !important;
border-color: #4A90E2 !important;
transform: translateY(-1px) !important;
}

.pagination .active, .paginationa.active {
background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
color: #ffffff !important;
border-color: #4A90E2 !important;
}

/* === SELECT2 MODERNISÉ === */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background-color: #ffffff !important;
border: 1px solid #d0d7de !important;
border-radius: 4px !important;
min-height: 36px !important;
transition: all 0.2s ease !important;
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
border-color: #4A90E280 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: #4A90E2 !important;
box-shadow: 0 0 0 3px #4A90E225 !important;
}

.select2-dropdown {
background-color: #ffffff !important;
border: 1px solid #e0e6ed !important;
border-radius: 4px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
margin-top: 4px !important;
}

.select2-container--default .select2-results__option {
padding: 10px 12px !important;
transition: all 0.15s ease !important;
color: #333333 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
/* Texte auto-contrasté (noir sur accent clair, blanc sur accent foncé) au lieu de #fff
   forcé : sur un accent pastel clair, le libellé blanc était illisible (dropdown
   « Liste des emails disponibles » du formulaire messagerie). */
color: #1a1a1a !important;
}
/* Le libellé d'option contient souvent un span/font coloré (notation email) : on force aussi
   les enfants à la couleur contrastée, sinon l'email reste dans sa teinte d'origine (illisible). */
.select2-container--default .select2-results__option--highlighted[aria-selected] * {
color: #1a1a1a !important;
}

/* Option DÉJÀ SÉLECTIONNÉE. Le fond n'étant qu'une teinte à 8 % de l'accent (donc quasi
   le fond de la liste), le texte ne peut PAS être l'accent lui-même : sur un accent pastel
   il tombait à 1,33:1 — la ligne sélectionnée était invisible (mesuré 2026-07-31).
   RÈGLE ERP : on ne signale jamais un état par une couleur ATTÉNUÉE. Les gens lisent ces
   écrans toute la journée. La sélection se marque par la GRAISSE, le texte garde sa
   couleur pleine. Même famille de correctif que l'option survolée juste au-dessus. */
/* ⚠️ `:not(--highlighted)` OBLIGATOIRE : à l'ouverture, select2 surligne l'option déjà
   sélectionnée — elle porte donc les DEUX états. Or la règle de survol ci-dessus a la même
   spécificité (2 classes + 1 attribut) et vient AVANT : sans cette exclusion, la couleur
   ci-dessous gagne et se retrouve posée sur le dégradé d'accent, soit 1,27:1 en sombre. */
.select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
background-color: #4A90E215 !important;
color: #333333 !important;
font-weight: 700 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #333333 !important;
line-height: 34px !important;
}

/* === SCROLLBAR MODERNE (tous les modes) === */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f8fafc;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #e0e6ed;
border-radius: 4px;
transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: #4A90E2;
}
::-webkit-scrollbar-corner {
background: #f8fafc;
}

/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #e0e6ed #f8fafc;
}

/* === CORRECTIONS MODE SOMBRE === */


/* === CORRECTIONS MODE CONTRASTE === */

/* === BORDURES ARRONDIES GLOBALES === */
    /* Éléments avec bords arrondis */
    .noborder, .tagtable, .border,
    .button, .butAction, .butActionDelete, .butActionRefused,
    .btn, .btn-primary, .btn-secondary, .btn-danger,
    input, select, textarea,
    input.flat, select.flat, textarea.flat,
    .badge, .info-box, .box,
    .fiche, .tabsAction,
    .dropdown-menu, .select2-container--default .select2-selection,
    .modal-content, .ui-dialog,
    .jnotify-message, .tooltip-inner,
    div.tabBar, .fichecenter,
    .ui-widget-content, .ui-corner-all,
    .card, .card-body, .panel {
    border-radius: 4px !important;
    }

    /* Boutons avec padding ajusté pour les arrondis */
    .button, .butAction, input[type="submit"], button[type="submit"] {
    padding: 6px 12px !important;
    }

/* === ÉLÉMENTS SUPPLÉMENTAIRES MODERNISÉS === */

/* Progress bars */
.progress, progress {
background-color: #f1f5f9 !important;
border-radius: 20px !important;
overflow: hidden !important;
height: 8px !important;
}

.progress-bar, progress::-webkit-progress-value {
background: linear-gradient(90deg, #4A90E2, #357ABD) !important;
border-radius: 20px !important;
transition: width 0.4s ease !important;
}

progress::-webkit-progress-bar {
background-color: #f1f5f9 !important;
border-radius: 20px !important;
}

/* Barres de progression avec animation */
.progress-bar-animated {
animation: progressAnimation 2s linear infinite !important;
background-size: 40px 40px !important;
background-image: linear-gradient(
45deg,
rgba(255,255,255,.15) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.15) 50%,
rgba(255,255,255,.15) 75%,
transparent 75%,
transparent
) !important;
}

@keyframes progressAnimation {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}

/* Dashboard widgets */
.box-flex-container {
gap: 16px !important;
}

.box-flex-item {
background-color: #ffffff !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
transition: all 0.2s ease !important;
padding: 16px !important;
}

.box-flex-item:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
transform: translateY(-2px) !important;
}

/* Graphiques / Charts */
.chartjs-render-monitor, .chart-container, canvas {
border-radius: 4px !important;
}

/* Liens d'action rapide */
.quicklinks a, .linkto a {
color: #4A90E2 !important;
transition: all 0.2s ease !important;
}

.quicklinks a:hover, .linkto a:hover {
color: #3375b5 !important;
text-decoration: none !important;
}

/* Loading / Spinners */
.loader, .spinner, .loading {
border-color: #e0e6ed !important;
border-top-color: #4A90E2 !important;
}

/* Accordéons */
.accordion, .collapse-toggle {
border-radius: 4px !important;
overflow: hidden !important;
}

.accordion-header {
background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
padding: 12px 16px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}

.accordion-header:hover {
background: linear-gradient(135deg, #f1f5f9, #f8fafc) !important;
}

/* Impression - masquer les effets visuels */
@media print {
*, *::before, *::after {
box-shadow: none !important;
text-shadow: none !important;
background: transparent !important;
color: #000 !important;
}

.button, .butAction {
border: 1px solid #000 !important;
}
}

/* === FILE UPLOAD / DRAG & DROP MODERNISÉ === */
/* .dropzone:not(td) : la classe .dropzone est aussi utilisée par le planning
   (rent/resource) sur des cellules <td> comme cible de drag-drop de réservations.
   Sans :not(td), le padding:24px + bordure ci-dessous gonflaient chaque cellule
   du planning -> lignes illisibles et tableau débordant la fenêtre. */
.areaforfileupload, .zone-upload, .dropzone:not(td),
input[type="file"]::file-selector-button {
background-color: #f8fafc !important;
border: 2px dashed #e0e6ed !important;
border-radius: 4px !important;
padding: 24px !important;
text-align: center !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}

.areaforfileupload:hover, .zone-upload:hover, .dropzone:not(td):hover {
border-color: #4A90E2 !important;
background-color: #4A90E208 !important;
}

.areaforfileupload.dragover, .zone-upload.dragover, .dropzone.dz-drag-hover:not(td) {
border-color: #4A90E2 !important;
background-color: #4A90E215 !important;
transform: scale(1.01) !important;
}

input[type="file"]::file-selector-button {
background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
color: #ffffff !important;
border: none !important;
padding: 8px 16px !important;
margin-right: 12px !important;
cursor: pointer !important;
}

input[type="file"]::file-selector-button:hover {
opacity: 0.9 !important;
}

/* === FIL D'ARIANE (BREADCRUMB) === */
.refidno, .valignmiddle .refidno,
.arearefnobottom, .refid {
color: #666666 !important;
font-size: 11px !important;
}

.refid a, .refidno a {
color: #4A90E2 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}

.refid a:hover, .refidno a:hover {
color: #3375b5 !important;
text-decoration: underline !important;
}

/* Séparateurs du fil d'Ariane */
.refid span.fa-chevron-right,
.refidno span.fa-chevron-right {
color: #6b7280 !important;
font-size: 9px !important;
margin: 0 6px !important;
}

/* === AIDE CONTEXTUELLE / FIELD DESCRIPTION === */
.classfortooltip[title]:hover,
span.classfortooltip:hover {
cursor: help !important;
}

/* Asterisque "champ requis" — uniquement sur les libelles simples (formulaires).
   Exclut les cellules contenant un tableau imbrique (fiches : libelle + picto edition),
   ou l'asterisque retombait seul a la ligne comme un point rouge orphelin. */
.fieldrequired:not(:has(> table))::after {
content: " *";
color: #dc3545 !important;
font-weight: bold !important;
}

td.titlefield, td.titlefieldcreate,
.titlefield, .titlefieldcreate {
color: #666666 !important;
font-weight: 600 !important;
font-size: 12px !important;
white-space: nowrap !important;
vertical-align: top !important;
}

td.valuefield, .valuefield {
color: #333333 !important;
}

/* Description sous les champs */
.small, .opacitymedium {
color: #6b7280 !important;
font-size: 11px !important;
}

/* === ZONE DE RÉFÉRENCE FICHE === */
.arearef, .arearefnobottom {
background-color: #f8fafc !important;
padding: 16px !important;
border-radius: 4px 4px 0 0 !important;
border-bottom: 1px solid #e0e6ed !important;
margin-bottom: 0 !important;
}

.arearef .refidno, .arearefnobottom .refidno {
padding: 4px 0 !important;
}

/* === TABLEAUX DE DÉTAIL FICHE === */
.border.centpercent.tableforfield,
table.border.tableforfield {
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: var(--dp-shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
}

.border.centpercent.tableforfield td,
table.border.tableforfield td {
padding: 10px 12px !important;
vertical-align: middle !important;
}

.border.centpercent.tableforfield tr:hover,
table.border.tableforfield tr:hover {
background-color: #f1f5f9 !important;
}

/* === AMÉLIORATION TREEVIEW === */
.jstree, .treeview, .fancytree-container {
background-color: #ffffff !important;
border-radius: 4px !important;
padding: 8px !important;
}

.jstree-default .jstree-hovered,
.fancytree-active {
background-color: #4A90E215 !important;
border-radius: 2px !important;
}

.jstree-default .jstree-clicked,
.fancytree-selected {
background-color: #4A90E225 !important;
color: #4A90E2 !important;
}

/* === TRANSITIONS GLOBALES === */
button, input, select, textarea,
.button, .butAction, .badge, .tab,
.info-box, .box, .fichecenter {
transition: all 0.2s ease !important;
}

/* Pas de transition sur les liens menu — hover instantané */
#menu_main a, .tmenu a, .topmenu a,
.menu_doliplus > li > a {
transition: none !important;
}

/* === AMÉLIORATION FOCUS ACCESSIBILITÉ === */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus {
outline: 2px solid #4A90E250 !important;
outline-offset: 2px !important;
}

/* Supprimer l'outline par défaut au clic */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
outline: none !important;
}

/* === SOUS-MENUS DÉROULANTS HORIZONTAUX (niveaux 2 & 3) ======================
   Le menu du HAUT (niveau 1) reste collé. Mais les items des panneaux déroulants
   empilaient un double-liseré legacy (border-top 2px #37332f + border-bottom 1px blanc)
   qui se touchait d'un item à l'autre → effet lourd/bordures qui se collent.
   On allège : un seul séparateur discret + léger décollement vertical.
   Ciblé sur #menu_main li ul (uniquement les déroulants ; les entrées de 1er niveau
   sont #menu_main > li > a et ne sont pas touchées). */
#menu_main li ul a {
border: 0 !important;
border-bottom: 1px solid var(--dp-border, #404055) !important;
/* Pas de marge horizontale : les boutons remplissent toute la largeur de leur
   colonne. Sans ce retrait de 4px/côté, la colonne niveau 2 et la colonne
   niveau 3 (positionnée à left:100%, cf. styleglobal.css.php) SE TOUCHENT au
   lieu de laisser une bande de 8px où la page transparaissait (jeu perturbant
   au survol). On ne garde que 3px sous chaque item pour séparer les lignes. */
margin: 0 0 3px 0 !important;
border-radius: 4px !important;
}
#menu_main li ul li:last-child > a {
border-bottom: 0 !important;
margin-bottom: 0 !important;
}

/* PANNEAUX DES DÉROULANTS OPAQUES — dans les DEUX variantes.
   La règle d'opacité d'origine (« pour que le contenu derrière ne transparaisse
   pas ») n'existait QUE dans le bloc `if ($variant === 'dark')`. En thème CLAIR
   les panneaux `ul` restaient donc transparents (mesuré : background rgba(0,0,0,0))
   → la PAGE du dessous apparaissait dans le moindre interstice du menu (le « jeu »
   perturbant entre les niveaux). On force ici un fond opaque, variante-aware, qui
   masque définitivement la page derrière tout déroulant, quel que soit le thème. */
#menu_main li ul,
#menu_main ul ul,
.menu_doliplus li ul {
background-color: #f8fafc !important;
}

/* === MÉGA-MENU CONFIGURATION (Accueil ▸ Configuration) =====================
   Le flyout « Configuration » empilait ~18 entrées → liste trop longue à
   scroller. On le transforme en panneau large à colonnes thématiques.
   Principe : on NE re-skinne PAS les items (rendu natif du menu, dark déjà géré)
   — uniquement de la MISE EN PAGE (colonnes + en-têtes), et on neutralise le
   sous-flyout interne qui repartirait en position absolue.
   Panneau/en-têtes en --dp-deep* (foncé dans les 2 variantes → en-têtes lisibles
   quel que soit le mode). */

/* Panneau : colonnes côte à côte au lieu d'une seule colonne verticale.
   NB : on ne pose PAS display ici (le flux reste piloté par le base
   .menu_doliplus li ul { display:none } + l'affichage au survol ci-dessous),
   sinon le panneau resterait affiché en permanence. flex-flow est inerte tant
   que l'élément est masqué. */
ul.mm-mega {
flex-flow: row nowrap !important;
align-items: flex-start !important;
max-width: 92vw !important;
padding: 6px !important;
gap: 2px !important;
/* Fond opaque qui suit la variante : blanc en clair, surface foncée en sombre. */
background: var(--dp-card, #ffffff) !important;
border: 1px solid var(--dp-border, #d0d5dd) !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}

/* Affichage UNIQUEMENT au survol de l'entrée « Configuration » (comportement natif). */
.menu_doliplus li ul li:hover ul.mm-mega {
display: flex !important;
}

/* Une colonne = un <li> : statique, pas de comportement flyout, largeur bornée. */
.mm-mega > li.mm-col {
position: static !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
min-width: 190px !important;
max-width: 230px !important;
margin: 0 !important;
padding: 0 6px !important;
}
.mm-mega > li.mm-col + li.mm-col {
border-left: 1px solid var(--dp-border, #d0d5dd) !important;
}

/* En-tête de colonne : petite capitale discrète qui suit la variante
   (gris foncé sur fond blanc en clair, clair en sombre). */
.mm-mega .mm-head {
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
color: var(--dp-text-muted, #8a90a0) !important;
padding: 6px 8px 8px 8px;
white-space: nowrap;
}

/* Liste interne de chaque colonne : reste statique (jamais en flyout absolu),
   même au survol (override de .menu_doliplus li ul li:hover ul et li ul li ul). */
.mm-mega .mm-col > ul,
.mm-mega .mm-col li:hover > ul {
display: flex !important;
flex-flow: column nowrap !important;
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}

/* Items : alignés à gauche, padding resserré ; on retire les flèches/bordures
   décoratives propres au flyout vertical natif. */
.mm-mega .mm-col ul a {
text-align: left !important;
padding: 8px 12px !important;
margin: 0 0 3px 0 !important;
white-space: nowrap;
}
.mm-mega li:first-child > a {
border-top: 0 !important;
}
.mm-mega li:first-child > a:after,
.mm-mega ul ul li:first-child a:after {
content: none !important;
display: none !important;
}

/* Repli étroit (tablette / fenêtre réduite) : retour à une seule colonne. */
@media all and (max-width: 760px) {
.menu_doliplus li ul li:hover ul.mm-mega,
ul.mm-mega {
flex-flow: column nowrap !important;
max-width: 86vw !important;
}
.mm-mega > li.mm-col {
min-width: 0 !important;
max-width: none !important;
width: 100% !important;
}
.mm-mega > li.mm-col + li.mm-col {
border-left: 0 !important;
border-top: 1px solid var(--dp-border, #d0d5dd) !important;
margin-top: 4px !important;
padding-top: 4px !important;
}
}

/* === AGENDA / CALENDRIER ===================================================
   Les styles core (styleglobal.css.php) codent en dur des cellules blanches/grises
   (#FFF/#DDD/#EEE) et ne fixent pas la couleur du texte des vignettes. En sombre :
   cellules claires illisibles + texte clair (#e0e0e0) du thème sur la couleur (souvent
   pastel) de la vignette d'événement → illisible. */

/* Vignettes d'événement : fond = couleur de l'événement (style inline, ex #56ffff). On force
   un texte FONCÉ lisible (comportement du mode clair), toutes variantes. */
table.cal_event, table.cal_event td, table.cal_event span, table.cal_event font,
table.cal_event a, table.cal_event a:link, table.cal_event a:visited,
table.cal_event a:active, table.cal_event a:hover {
color: #1a1a1a !important;
}


/* === DATATABLES : popup « Traitement… » =====================================
   Par défaut DataTables affiche un overlay avec texte NOIR + dégradé blanc
   (linear-gradient rgba(255,255,255,...)) → blob gris/blanc illisible en sombre.
   On le passe en panneau plein, piloté par les tokens (clair/sombre auto). */
.dataTables_processing,
div.dataTables_processing,
table.dataTable .dataTables_processing {
background: var(--dp-card, #ffffff) !important;
background-image: none !important;
color: var(--dp-text, #333333) !important;
border: 1px solid var(--dp-border, #d0d7de) !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

/* === DATATABLES : popover « Autres colonnes » / Sélection / Export ==========
   Par défaut (DatatablestyleDoli.css.php) : panneau BLANC + boutons en dégradé
   gris à texte sombre — illisible sur page sombre (signalé GP 11/08). Bloc porté
   de la couche notion (qui l'avait depuis le 21/07) : carte du thème, état actif
   visible. Les variables suivent la variante ET le mode (notion inclut cloud). */
div.dt-button-collection {
background: #fafbfc !important;
border: 1px solid #e0e6ed !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
padding: 4px !important;
}
div.dt-button-collection .dt-button {
background: transparent !important;
background-image: none !important;
border: none !important;
color: #333333 !important;
border-radius: 6px !important;
box-shadow: none !important;
text-shadow: none !important;
font-weight: 500 !important;
}
div.dt-button-collection .dt-button:hover { background: #f1f5f9 !important; }
div.dt-button-collection .dt-button.active {
background: color-mix(in srgb, #4A90E2 10%, transparent) !important;
color: #333333 !important;
}

/* === ÉDITEUR CKEDITOR 4 : boutons IA en Font Awesome (les DEUX variantes) ===
   Les plugins ai_corrector/ai_assistant livrent des PNG couleur 16px (convention CKEditor 4,
   comme tout le sprite). On les remplace par un glyphe FA5 — même patron que les icônes de
   menu (cloudtheme.md : background-image:none + ::before) : vectoriel, encre du thème,
   homogène avec la barre, et le mode sombre les traite comme le sprite (flatten commun).
   ⚠ Noms FA5 uniquement (un nom FA6 = carré vide silencieux, §4octies portage_colonne). */
.cke_button__aicorrector_icon, a.cke_button .cke_button__aicorrector_icon,
.cke_button__aiassistant_icon, a.cke_button .cke_button__aiassistant_icon {
background-image: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.cke_button__aicorrector_icon::before,
.cke_button__aiassistant_icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 900; /* solid */
font-size: 13px;
color: inherit;
}
.cke_button__aicorrector_icon::before { content: "\f891"; } /* fa-spell-check : AB✓ */
.cke_button__aiassistant_icon::before { content: "\f0d0"; } /* fa-magic : baguette */


/* === TOGGLES EN-TÊTE (clair/sombre, menu, ⚙ config) + toast =================
   Déplacé depuis le <style> inline de magic_tpl.php : en mode rail-v, le JS du menu
   reconstruit la zone et SUPPRIMAIT ce <style> inline → toggles non stylés (dropdown
   display:block → bloc qui déborde/illisible). Ici (CSS thème, dans <head>) c'est persistant. */
#dp-theme-toggle{display:inline-flex;align-items:center;cursor:pointer;width:46px;height:22px;
  border-radius:11px;background:rgba(128,128,128,0.22);position:relative;vertical-align:middle;
  margin:0 12px 0 4px;padding:0 5px;box-sizing:border-box;border:1px solid rgba(128,128,128,0.4);
  flex:0 0 auto;}
#dp-theme-toggle i{font-size:11px;line-height:20px;z-index:1;}
#dp-theme-toggle .fa-sun{color:#f1c40f;}
#dp-theme-toggle .fa-moon{color:#9bb4d6;margin-left:auto;}
#dp-theme-toggle .dp-knob{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.45);transition:transform .2s ease;}
#dp-theme-toggle[data-variant="dark"] .dp-knob{transform:translateX(23px);}

/* Bascule MODE DE TRAVAIL — Classique / Atelier (Lot 6, §4bis étape 2).
   ⚠ FORME ARBITRÉE À LA MESURE, pas au principe (2026-08-02). La pilule du clair/sombre a
   d'abord été clonée (consigne GP « sur le modèle exact de la bascule clair/sombre »), puis
   ÉCARTÉE après rendu au gabarit RÉEL : dans une pilule de 46 px, la pastille blanche RECOUVRE
   le picto de gauche — la paire n'est donc lisible que si les deux glyphes sont colorés, ce qui
   sauve soleil (jaune) / lune (bleu) mais pas deux pictos de mise en page. Rendus côte à côte,
   la pilule non colorée donnait une tache grise illisible.
   Retenu : le gabarit de #dp-menu-toggle — 26×22, UN picto = le mode COURANT. C'est aussi son
   plus proche voisin par le SENS (« comment DoliPlus est disposé »), donc la même forme est
   juste. La consigne GP est respectée sur le fond : une préférence utilisateur, un bouton.
   Pictos : fa-table (Classique = listes et tableaux) / fa-feather (Atelier = papier & encre).
   FA5 obligatoire — un nom FA6 rend un carré vide sans erreur console (§4octies). */
#dp-skin-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  min-width:26px;height:22px;padding:0 7px;gap:5px;border-radius:6px;background:rgba(128,128,128,0.22);
  border:1px solid rgba(128,128,128,0.4);vertical-align:middle;margin:0 8px 0 0;flex:0 0 auto;}
#dp-skin-toggle i{font-size:12px;line-height:20px;color:inherit;}
#dp-skin-toggle .dp-skin-label{font-size:11px;line-height:20px;white-space:nowrap;} /* nom du mode visible (GP 29/09) */
@media (max-width:767px){#dp-skin-toggle .dp-skin-label{display:none;}} /* barre du haut d'un téléphone : picto seul, faute de place */
#dp-skin-toggle:hover{background:rgba(128,128,128,0.35);}

#dp-menu-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:26px;height:22px;border-radius:6px;background:rgba(128,128,128,0.22);
  border:1px solid rgba(128,128,128,0.4);vertical-align:middle;margin:0 8px 0 0;flex:0 0 auto;}
#dp-menu-toggle i{font-size:12px;line-height:20px;color:inherit;}
#dp-menu-toggle:hover{background:rgba(128,128,128,0.35);}

#dp-config-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:26px;height:22px;border-radius:6px;background:rgba(128,128,128,0.22);
  border:1px solid rgba(128,128,128,0.4);vertical-align:middle;margin:0 8px 0 0;flex:0 0 auto;position:relative;}
#dp-config-toggle i{font-size:12px;line-height:20px;color:inherit;}
#dp-config-toggle:hover{background:rgba(128,128,128,0.35);}
#dp-config-menu{position:absolute;top:100%;right:0;margin-top:6px;z-index:100001;min-width:210px;
  background:var(--dp-card,#fff);color:var(--dp-text,#222);border:1px solid var(--dp-border,#d0d7de);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.32);padding:6px;display:none;}
#dp-config-menu.dp-open{display:block;}
#dp-config-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
  color:var(--dp-text,#222) !important;text-decoration:none;font-size:13px;white-space:nowrap;}
#dp-config-menu a:hover{background:var(--dp-bg-hover,#eef2f7);}
#dp-config-menu a i{width:16px;text-align:center;color:var(--dp-primary,#1976d2);}
#dp-config-menu .dp-cfg-sep{height:1px;background:var(--dp-border,#e0e6ed);margin:5px 2px;}
#dp-config-menu .dp-cfg-head{font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  opacity:.6;padding:4px 10px 2px;}

#dp-menu-toast{position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(-8px);
  z-index:100000;min-width:280px;max-width:90vw;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  background:var(--dp-card,#fff);color:var(--dp-text,#222);
  border:1px solid var(--dp-border,#d0d7de);border-left:4px solid var(--dp-primary,#1976d2);
  border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,0.35);padding:12px 16px;font-size:13px;line-height:1.5;}
#dp-menu-toast.dp-show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#dp-menu-toast .dp-toast-title{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
#dp-menu-toast ol{margin:6px 0 0 0;padding-left:20px;}
#dp-menu-toast li{margin:2px 0;}
#dp-menu-toast li.dp-active{font-weight:700;color:var(--dp-primary,#1976d2);}
#dp-menu-toast li.dp-active::after{content:" \2190 activé";font-weight:600;}
#dp-menu-toast .dp-toast-hint{margin-top:8px;font-size:11px;opacity:.75;}
#dp-menu-toast .dp-toast-close{position:absolute;top:6px;right:9px;cursor:pointer;opacity:.6;font-size:14px;}
#dp-menu-toast .dp-toast-close:hover{opacity:1;}

/* === SÉLECTION DE TEXTE === */
/* DÉSACTIVÉ - causait des problèmes de copier-coller
::selection {
background-color: #4A90E230 !important;
color: #333333 !important;
}

::-moz-selection {
background-color: #4A90E230 !important;
color: #333333 !important;
}
*/

/* === ANIMATIONS SUBTILES === */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideUp {
from { transform: translateY(10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.fiche, .fichecenter, .tabBar {
animation: fadeIn 0.3s ease !important;
}

/* .jnotify-warning / .jnotify-error n'existent pas dans le markup du plugin (le type vit
   sur le parent .jnotify-notification-TYPE) — cf. bloc TOASTS JNOTIFY plus haut. */
.jnotify-message, .jnotify-notification {
animation: slideUp 0.3s ease !important;
}

/* Menu DoliPlus : utilise le CSS
de magicmenu (chargé via doliplusMenu.lib.php)
*/
/* ============================================================================
   BRIQUES DE TRAVAIL PARTAGÉES — aperçu latéral, Signaux ✦, fiches
   Essentiel/Complet, lignes de facture dépliées.
   ============================================================================
   ⚠ CES RÈGLES VIVAIENT DANS LA COUCHE ATELIER — descendues ici le 2026-08-02.
   Arbitrage GP : « mêmes fonctionnalités de part et d'autre ». Les quatre briques
   ne sont plus réservées au mode Atelier, elles servent aussi en Classique : leur
   CSS doit donc vivre dans le skin de base. L'Atelier les garde automatiquement,
   puisqu'il INCLUT ce fichier (cf. §4bis étape 1).

   Elles restent INERTES tant que le JS de `cloudnotion` n'a rien construit : tous
   les sélecteurs sont accrochés à des classes que lui seul pose (#dp-peek, .dp-fch,
   .dp-ec-*, .dp-sigcol). Une instance sans ce module ne voit rien changer.

   ℹ️ Les tokens papier/encre de l'Atelier (--dp-paper, --dp-ink, --dp-pencil) sont
   consommés ici avec des REPLIS CHAÎNÉS sur ceux de cloud — écriture d'origine, qui
   est précisément ce qui rend ce déplacement sûr. En Classique le repli s'applique,
   en Atelier les tokens papier reprennent la main (les variables CSS se résolvent à
   l'USAGE, pas à la définition : la couche peut donc les poser plus bas).
   ============================================================================ */

/* ==========================================================================
   PHASE 3 — COLONNE « SIGNAUX ✦ » (liste tiers, opt-in colvis par user)
   Cellule = .dp-sig .dp-ai .dp-ai-u (tokens crayon existants) ; ici seulement
   l'en-tête graphite et le calibrage télégraphique de la cellule.
   ========================================================================== */
table.dataTable th.dp-sigcol { color: var(--dp-pencil) !important; font-weight: 500; }
table.dataTable td.dp-sigcol { white-space: nowrap; }
table.dataTable td.dp-sigcol .dp-sig { font-size: 12px; letter-spacing: 0.01em; }

/* ==========================================================================
   PHASE 3 — FICHE TIERS « ESSENTIEL / COMPLET » (notion-tiers-essentiel.js)
   Doctrine : épinglées visibles, les autres COMPTÉES (« N autres → »),
   jamais masquées sèchement. Épingles ☆/★ composables en mode Complet.
   ========================================================================== */
.dp-ec-bar { display: flex; align-items: center; gap: 12px; margin: 10px 2px 8px; }
.dp-seg { display: inline-flex; border: 1px solid var(--dp-border, #E6E3DD); border-radius: 8px; overflow: hidden; background: var(--dp-paper2, transparent); }
.dp-seg button { border: 0; background: transparent; padding: 4px 12px; font-size: 12.5px; cursor: pointer; color: inherit; opacity: 0.65; }
/* Distinction actif/inactif par SURFACE seule mesurée insuffisante (§ audit 2026-08-03) :
   --dp-paper (fond carte) et --dp-paper2 (zébrage table, forcément proche du fond ambiant
   par construction) sont deux tons neutres trop voisins pour se distinguer à l'œil — 1,02 à
   1,27:1 selon skin/variante, quel que soit le token neutre choisi (mesuré : --dp-paper,
   --dp-paper2 ET --dp-hoverBg donnent tous une distinction <1,3:1). Un signal de teinte
   NEUTRE ne peut pas porter cette distinction ; ajout d'un soulignement dans l'accent
   --dp-primary-btn (déjà garanti contrasté, cf. §terdecies) — visible quelle que soit la
   proximité des tons neutres du skin. */
.dp-seg button.on { background: var(--dp-paper, #fff) !important; opacity: 1; font-weight: 600; box-shadow: inset 0 0 0 1px var(--dp-border, #E6E3DD), inset 0 -2px 0 var(--dp-primary-btn, #4A90E2); }
.dp-ec-count { font-size: 12px; color: #6b7280; }
/* Tagedit — pastilles LISIBLES en thème sombre.
   Le composant fige le fond de sa pastille en clair (#DEE7F8, jquery.tagedit.css) ; en
   variante sombre, l'encre héritée du thème est claire elle aussi → texte quasi blanc sur
   fond quasi blanc, contraste mesuré 1.05, pastilles illisibles. Constaté le 2026-09-02
   sur outils > Interface essentielle ET sur sav > savSetup : ce n'est pas le défaut d'une
   page, c'est celui du composant sur TOUTES ses pages (closio, dict, mollie, cashdoli…).
   Le fond étant figé, on fige l'encre avec lui. */
.tagedit-list li.tagedit-listelement-old,
.tagedit-list li.tagedit-listelement-old span,
.tagedit-list li.tagedit-listelement-old input { color: #1F2937 !important; }
/* La zone de saisie, elle, est posée sur le fond de la page : elle suit le thème. */
.tagedit-list li.tagedit-listelement-new input { color: var(--dp-ink, inherit); background: transparent; }

/* Retour au défaut de la maison : une sortie de secours, pas une action mise en avant —
   d'où la taille réduite, l'encre atténuée et le renvoi en bout de barre. */
.dp-ec-reset { margin-left: auto; font-size: 11.5px; color: #6b7280 !important; text-decoration: none; border-bottom: 1px dotted #6b7280; }
.dp-ec-reset:hover { color: #4A90E2 !important; border-bottom-color: #4A90E2; }
.fiche tr.dp-ec-hid { display: none; }
tr.dp-ec-more td { border-bottom: none !important; }
tr.dp-ec-more a { color: #4A90E2 !important; font-size: 12.5px; text-decoration: none; }
tr.dp-ec-more a:hover { text-decoration: underline; }
/* Épingles ☆/★ — l'ÉTAT doit se lire, pas se deviner.
   Jusqu'au 2026-09-03 les deux glyphes étaient rendus à l'identique (même encre
   atténuée, opacité 0,25, 13 px) : contraste effectif mesuré 1,79:1 pour l'un COMME
   pour l'autre, seule la forme les séparait. Un client l'a signalé (ticket #4013) :
   « il est difficile de discerner une étoile pleine d'une étoile vide ».
   Trois signaux au lieu d'un seul : la couleur (accent contre encre atténuée),
   l'opacité, et la forme. Tokens AVEC repli — jamais de couleur en dur.
   ⚠ PIÈGE DE JETON, mesuré : `--dp-ink-muted` N'EST PAS une encre atténuée en variante
   sombre — il y vaut `#e1ccff`, soit exactement l'accent. S'en servir pour l'étoile VIDE
   inversait la hiérarchie : la vide sortait à 7,64:1 et l'épinglée à 4,59:1, l'inverse de
   l'intention. D'où `--dp-accent` (qui s'adapte : #8733ff en clair, #e1ccff en sombre)
   pour l'ÉPINGLÉE, et `--dp-ink` atténué par l'opacité pour la VIDE — une encre neutre
   ne peut pas usurper l'accent. */
.dp-ec-pin { float: right; text-decoration: none !important; color: var(--dp-ink, #6b7280) !important; opacity: 0.45; font-size: 14px; line-height: 1; padding: 0 2px; }
.dp-ec-pin.on { color: var(--dp-accent, #4A90E2) !important; opacity: 1; font-size: 15px; }
.fiche table.border tr:hover .dp-ec-pin { opacity: 0.85; }
.fiche table.border tr:hover .dp-ec-pin.on { opacity: 1; }
body.dp-ec-essential .dp-ec-pin { display: none; }

/* ==========================================================================
   PHASE 3 — SPLIT VIEW « PEEK » LISTE TIERS (notion-list.js + ajax/peek.php)
   Panneau fixe 392px à droite, ligne active à filet accent inset.
   NB tokens : --dp-paper/--dp-ink n'existent pas (encore) — fallbacks chaînés
   sur les tokens réels --dp-bg/--dp-text/--dp-border (variant nuit compris).
   ========================================================================== */
#dp-peek { position: fixed; top: 0; right: 0; width: 392px; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding: 20px; background: var(--dp-paper, var(--dp-bg, #fff)); color: var(--dp-ink, var(--dp-text, #37352f)); border-left: 1px solid var(--dp-border, #e0e0e0); box-shadow: var(--dp-shadow-md, 0 2px 8px rgba(0,0,0,0.1)); z-index: 10010; font-size: 14px; }
#dp-peek[hidden] { display: none; }
#dp-peek .dp-peek-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#dp-peek .dp-peek-name { margin: 0; font-size: 1.15em; font-weight: 600; line-height: 1.3; color: inherit; }
#dp-peek .dp-peek-type { display: block; margin-top: 3px; font-size: 0.75em; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dp-text-muted, #999); }
#dp-peek .dp-peek-close { flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: var(--dp-radius-sm, 4px); color: var(--dp-text-muted, #999); }
#dp-peek .dp-peek-close:hover { background: var(--dp-bg-hover, var(--dp-surface, #f1f1ef)); color: var(--dp-ink, var(--dp-text, #37352f)); }
#dp-peek .dp-peek-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#dp-peek .dp-peek-loading { color: var(--dp-pencil, var(--dp-text-muted, #999)); font-style: italic; margin-bottom: 10px; }
#dp-peek .dp-peek-meta { color: var(--dp-text-light, var(--dp-text-muted, #777)); line-height: 1.5; margin-bottom: 10px; }
#dp-peek .dp-peek-links a { display: block; margin: 2px 0; color: var(--dp-link, var(--dp-accent, #2382c8)); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dp-peek .dp-peek-links a:hover { text-decoration: underline; }
#dp-peek .dp-peek-sec { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--dp-border-light, var(--dp-border, #ececea)); }
#dp-peek .dp-peek-sec-label { font-size: 0.72em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dp-text-muted, #999); margin-bottom: 6px; }
#dp-peek .dp-peek-sec-body { line-height: 1.6; }
#dp-peek .dp-peek-empty { color: var(--dp-text-muted, #999); }
#dp-peek .dp-peek-contacts { list-style: none; margin: 0; padding: 0; line-height: 1.6; }
/* Encre CALCULÉE sur le fond réel du bouton. `--dp-deep-on` (#e8eaed) était une encre CLAIRE
   posée sur l'accent d'entité : en nuit constellation l'accent EST la primaire pastel, donc
   encre et fond se confondaient — mesuré **1:1, bouton invisible** le 2026-08-02 (4,41:1 en
   clair, sous le seuil aussi). Même règle que la pastille du logo. */
#dp-peek .dp-peek-open { display: inline-block; margin-top: 18px; padding: 8px 14px; background: var(--dp-accent, #2382c8); color: #1a1a1a !important; border-radius: var(--dp-radius, 6px); text-decoration: none; font-weight: 500; }
#dp-peek .dp-peek-open:hover { filter: brightness(1.08); }
#dp-peek .dp-peek-foot { flex: 0 0 auto; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--dp-border-light, var(--dp-border, #ececea)); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72em; color: var(--dp-text-muted, #999); }
#listtable tbody tr.dp-peek-row td { background: rgba(35, 130, 200, 0.08) !important; background: color-mix(in srgb, var(--dp-accent, #2382c8) 8%, transparent) !important; }
/* ⚠ ENCRE de la ligne d'aperçu — mesuré BLANC SUR BLANC (1:1) le 2026-08-02 en Classique.
   Le JS pose la classe `selected` de DataTables sur la ligne surlignée, et la feuille
   DataTables (`table.dataTable tbody tr.selected > *`, DatatablestyleDoli.css.php) y peint
   le texte en BLANC — couleur prévue pour SON fond de sélection foncé. Or l'aperçu remplace
   justement ce fond par une teinte à 8 % : le texte disparaissait.
   On rétablit donc l'encre du thème. `> *` pour battre le sélecteur de DataTables, qui a la
   même forme, et `!important` parce que le sien en porte un. */
#listtable tbody tr.dp-peek-row > * { color: var(--dp-ink, var(--dp-text, #333333)) !important; }
#listtable tbody tr.dp-peek-row td:first-child { box-shadow: inset 3px 0 0 0 var(--dp-accent, #2382c8); }

/* ==========================================================================
   TACTILE (pointer: coarse — tablette/iPad) : pas de survol au doigt.
   Épingles fiche visibles d'office + zones de tap élargies dans la sidebar.
   (Limite connue consignée : les tooltips title des Signaux ✦ restent
   inaccessibles au doigt — détail au tap prévu en phase 2b.)
   ========================================================================== */
@media (pointer: coarse) {
.dp-ec-pin { opacity: 0.6; padding: 0 8px; }
.dp-ec-pin.on { opacity: 1; }
}

/* ==========================================================================
   PHASE 3 — CHILD ROWS LISTE FACTURES (notion-facture-child.js + facturerow.php)
   Panneau « Lignes + Paiements » déplié sous la ligne (DataTables natif).
   ========================================================================== */
tr.dp-fch-childtr > td { background: var(--dp-paper2, #FBFAF8) !important; padding: 0 !important; border-top: none !important; }
tr.dp-child-open > td { background: var(--dp-bg-hover, var(--dp-surface, #F1F1EF)) !important; }
.dp-fch { padding: 14px 18px 16px; color: var(--dp-ink, var(--dp-text, #37352F)); font-size: 13px; border-left: 2px solid var(--dp-accent, var(--dp-primary, #D97706)); }
.dp-fch-loading { color: var(--dp-pencil, var(--dp-text-muted, #6B675E)); font-style: italic; padding: 4px 0; }
.dp-fch-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px 28px; }
@media (max-width: 900px) { .dp-fch-cols { grid-template-columns: 1fr; } }
.dp-fch-label { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-size: 12px; color: var(--dp-pencil, var(--dp-text-muted, #6B675E)); margin-bottom: 4px; }
.dp-fch-lignes, .dp-fch-paiements { list-style: none; margin: 0; padding: 0; }
.dp-fch-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; border-bottom: 1px dotted var(--dp-border, #E6E3DD); }
.dp-fch-ligne:last-child { border-bottom: none; }
.dp-fch-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-fch-chiffres { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dp-ink, var(--dp-text, #37352F)); }
.dp-fch-paiement { padding: 2px 0; font-variant-numeric: tabular-nums; }
.dp-fch-empty, .dp-fch-more { color: var(--dp-pencil, var(--dp-text-muted, #6B675E)); font-style: italic; padding: 2px 0; }
/* Encres sémantiques passées au filtre (cf. atelier_vars.inc.php) : les tokens --dp-danger /
   --dp-success sont calibrés pour des pastilles, pas pour de l'encre sur papier. */
.dp-fch-reste { margin-top: 6px; font-weight: 600; color: #e40a16; }
.dp-fch-reste-zero { color: #347c10; }
.dp-fch-totaux { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--dp-border, #E6E3DD); color: var(--dp-pencil, var(--dp-text-muted, #6B675E)); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   PHASE 2b — POPOVER TACTILE « SIGNAUX ✦ » (notion-list.js, #dp-sig-pop)
   Lève la limite consignée au bloc TACTILE : au doigt le title des .dp-sig
   est inaccessible → un tap ouvre ce popover (position fixed posée par le
   JS, clampée au viewport). Papier/encre NETS — jamais de gris pâle, aucun
   text-shadow. Sous le peek (10010) et la palette (10020).
   NB tokens : --dp-paper/--dp-ink fallbacks chaînés sur --dp-bg/--dp-text
   (variant nuit compris), comme le bloc PEEK.
   ========================================================================== */
#dp-sig-pop {
position: fixed;
z-index: 10005;
max-width: 280px;
box-sizing: border-box;
padding: 8px 10px;
background: var(--dp-paper, var(--dp-bg, #fff));
color: var(--dp-ink, var(--dp-text, #26241F));
border: 1px solid var(--dp-border, #E6E3DD);
border-radius: var(--dp-radius, 6px);
box-shadow: var(--dp-shadow-md, 0 4px 14px rgba(0,0,0,0.12));
font-size: 12px;
line-height: 1.5;
white-space: pre-line;
overflow-wrap: break-word;
text-shadow: none;
}
#dp-sig-pop[hidden] { display: none; }

/* ============================================================================
   MODE COLONNE (CLOUDTHEME_MENU_RAIL_MODE = 3) — PC UNIQUEMENT
   Portage du chantier « Atelier calme » (skin notion abandonné) : seule la
   COLONNE est conservée, aux couleurs de CloudTheme. Plan de chantier :
   custom/cloudtheme/.claude/portage_colonne.md
   Construite par cloudtheme/js/cloudtheme_column.js, qui DÉPLACE (jamais de
   clonage) #menu_main, div.vmenudoli, les recherches, les favoris et
   .login/.login_block dans <aside id="dp-col">, masque #tmenu_tooltip et
   td.vmenu, puis pose body.dp-col-on.
   - En-tête espace de travail (logo D+, DoliPlus, entité) ;
   - champ « Rechercher… ⌘K » → palette (navigation + Doli_Ai si hub ai actif) ;
   - FAVORIS, puis MODULES (icône + label + compteur) ; clic sur un module à
     sous-menu → TIROIR NIVEAU 2 accolé à droite ; au-delà de 8 entrées, repli
     « N autres modules… » ;
   - pied : utilisateur, entité/déconnexion, version.
   ⚠ TOUT ce bloc est INERTE tant que la colonne n'est pas construite : chaque
   règle est portée par #dp-col ou body.dp-col-on, qui n'existent qu'après le JS.
   Le PRÉ-LAYOUT anti-scintillement (masquage des barres + réserve des 248px)
   n'est PAS ici mais dans cloudtheme/theme/doliplus/style.css.php : ce fichier-ci
   est mis en cache par le navigateur, un marqueur d'état posé ici pourrait être
   périmé (même raisonnement que pour le rail).
   ============================================================================ */
#dp-col {
position: fixed;
left: 0; top: 0; bottom: 0;
width: 248px;
background: #f8fafc;
border-right: 1px solid #e0e6ed;
z-index: 900;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
padding: 10px 0 0;
font-size: 13px;
}
body.dp-col-on { padding-left: 248px !important; }
@media print {
#dp-col { display: none !important; }
body.dp-col-on { padding-left: 0 !important; }
}
/* La barre d actions fixe compose avec la sidebar (left + right, jamais de width figée) */
body.dp-col-on div.tabsAction { left: 248px !important; right: 0 !important; width: auto !important; }
/* Liens sans objet dans une sidebar permanente */
#dp-col a#hidemenu, #dp-col .blockvmenupair a[href*="hide"] { display: none !important; }
/* ⚠ Bascule des 4 modes : elle DOIT rester visible dans la colonne.
   Le bouton natif (#menu_rail) vit dans la barre haute, que la colonne masque : le
   seul chemin de RETOUR est le duplicata #dp-menu-toggle que magic_tpl injecte dans
   .login_block. Le chantier notion le masquait — la colonne y était liée au skin,
   donc sans retour possible ; ici c'est un MODE, l'utilisateur doit pouvoir en sortir.
   Ne jamais réintroduire un display:none dessus.
   Le sélecteur couvre les DEUX emplacements : la barre d'outils du haut (position
   actuelle, demande GP 27/07) et le pied (position d'origine) — ainsi la règle survit
   à un déplacement du bouton. */
#dp-col #dp-menu-toggle { display: inline-flex !important; }

/* --- Barre d'outils du haut : clair/sombre · mode de menu · réglages ---
   Ces trois boutons portent déjà leurs styles propres (plus haut dans ce fichier) ;
   ici on ne fait que les aligner et les séparer du reste. Vide tant que magic_tpl
   n'a pas injecté (ready+900ms) : :empty évite un filet et un espace fantômes. */
#dp-col .dp-col-tools {
display: flex;
align-items: center;
gap: 8px;
flex: none;
padding: 8px 12px 10px;
border-bottom: 1px solid #e0e6ed;
}
#dp-col .dp-col-tools:empty { display: none; }

/* --- En-tête espace de travail : logo, produit, entité --- */
#dp-col .dp-col-head {
display: flex;
align-items: center;
gap: 9px;
padding: 2px 12px 10px;
border-bottom: 1px solid #e0e6ed;
margin-bottom: 4px;
flex: none;
}
#dp-col .dp-col-logo {
flex: none;
width: 28px; height: 28px;
border-radius: 8px;
background: #4A90E2;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
}
#dp-col .dp-col-headtxt { min-width: 0; display: flex; flex-direction: column; }
#dp-col .dp-col-title { font-weight: 700; font-size: 13.5px; color: #333333; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dp-col .dp-col-entity { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Champ « Rechercher… ⌘K » : déclencheur de la palette --- */
#dp-col .dp-col-k { flex: none; margin: 6px 10px 2px; }
#dp-col .dp-col-ksum {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
background: #fafbfc;
border: 1px solid #d0d7de;
border-radius: 8px;
padding: 6px 10px;
font-size: 12.5px;
color: #6b7280;
}
#dp-col .dp-col-ksum:hover { color: #333333; border-color: #6b7280; }
#dp-col .dp-col-kbd {
margin-left: auto;
font-size: 10px;
line-height: 1;
padding: 3px 5px;
border: 1px solid #d0d7de;
border-radius: 5px;
background: #f8fafc;
color: #6b7280;
}

/* ============================================================
   PALETTE ⌘K (bi-mode : naviguer / demander à Doli_Ai si le hub ai est actif)
   ============================================================ */
#dp-k-overlay {
position: fixed;
inset: 0;
z-index: 10020;
background: rgba(0, 0, 0, .38);
}
#dp-k {
width: min(580px, calc(100vw - 32px));
margin: 12vh auto 0;
background: #fafbfc;
border: 1px solid #e0e6ed;
border-radius: 12px;
box-shadow: 0 18px 50px rgba(0,0,0,.28);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 70vh;
}
#dp-k-input {
width: 100%;
box-sizing: border-box;
border: none !important;
border-bottom: 1px solid #e0e6ed !important;
border-radius: 0 !important;
background: transparent !important;
padding: 14px 18px !important;
font-size: 15px !important;
color: #333333 !important;
outline: none !important;
box-shadow: none !important;
height: auto !important;
}
#dp-k-list { padding: 6px; overflow-y: auto; }
#dp-k .dp-k-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
border-radius: 7px;
font-size: 13px;
color: #333333 !important;
text-decoration: none !important;
cursor: pointer;
}
#dp-k .dp-k-row:hover, #dp-k .dp-k-row.dp-k-selected { background: #f1f5f9; }
#dp-k .dp-k-sec {
margin-left: auto;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280;
}
/* Fond survolé/sélectionné = $hoverBg, pas le fond de base : $textMuted seul y échoue
   parfois (4,26-4,37:1) — cf. $textMutedOnHover calculé plus haut. */
#dp-k .dp-k-row:hover .dp-k-sec, #dp-k .dp-k-row.dp-k-selected .dp-k-sec { color: #666d7a; }
/* Rangée « Demander à Doli_Ai » : le geste IA, au crayon + accent aurore */
#dp-k .dp-k-askrow {
color: #666666 !important;
border-top: 1px solid #e0e6ed;
border-radius: 0 0 7px 7px;
margin-top: 4px;
}
#dp-k .dp-k-askrow.dp-k-selected, #dp-k .dp-k-askrow:hover { color: #333333 !important; }
/* Réponse Doli_Ai : grammaire du brief (crayon + filet aurore) */
#dp-k-answer {
position: relative;
margin: 0 12px 12px;
padding: 10px 14px 9px 16px;
background: #f8fafc;
border: 1px solid #e0e6ed;
border-radius: 9px;
overflow: hidden;
}
#dp-k-answer::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: #4A90E2;
}
#dp-k-answer .dp-k-text { color: #666666; font-size: 13px; line-height: 1.6; }
#dp-k-answer .dp-k-wait { color: #6b7280; font-style: italic; font-size: 12.5px; }
#dp-k-answer .dp-k-listlink {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 5px 11px;
border: 1px solid color-mix(in srgb, #4A90E2 45%, transparent);
border-radius: 7px;
font-size: 12.5px;
font-weight: 600;
color: #4A90E2 !important;
text-decoration: none !important;
background: color-mix(in srgb, #4A90E2 7%, transparent);
}
#dp-k-answer .dp-k-listlink:hover { background: color-mix(in srgb, #4A90E2 14%, transparent); }
#dp-k-answer .dp-k-src { margin-top: 6px; font-size: 11px; color: #666666; }
#dp-k-answer .dp-k-prov {
margin-top: 5px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10px;
color: #6b7280;
}
/* Recherches par type (formulaires existants), repliées en pied de palette */
#dp-k-forms { border-top: 1px solid #e0e6ed; padding: 6px 12px 10px; overflow-y: auto; }
#dp-k-forms > summary {
cursor: pointer;
list-style: none;
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: #6b7280;
padding: 4px 2px;
}
#dp-k-forms > summary::-webkit-details-marker { display: none; }
#dp-k-forms > summary::after { content: " ⌄"; font-weight: 400; }
#dp-k-forms[open] > summary::after { content: " ⌃"; }
#dp-k-forms[open] { max-height: 40vh; }

/* Bloc #blockvmenusearch gardé DANS LE DOM mais hors écran : ses `.dp-search-target` sont
   la SOURCE des lignes « Chercher "x" dans … » de la liste principale (le JS les lit au
   querySelectorAll). Le retirer ferait disparaître ces lignes ; l'AFFICHER ferait doublon
   avec elles, avec un second champ de saisie en prime. D'où : présent, invisible. */
#dp-k .dp-k-srconly { display: none; }

/* Le bloc #blockvmenusearch est DÉPLACÉ ici depuis le menu gauche (largeur ~200 px) :
   sans reprise, il garde cette largeur au milieu d'une palette de ~580 px et son contenu
   part en flux — champ minuscule, libellés à la queue leu leu, icônes surdimensionnées.
   Ne concerne QUE la forme legacy : la forme moderne, elle, n'est plus affichée (ci-dessus).
   Rien n'est posé hors de #dp-k-forms, pour ne pas toucher aux deux AUTRES dispositions qui
   consomment ce même bloc (menu gauche classique, tiroir du rail — cf. printSearchBox()).
   .blockvmenusearch impose son padding en !important : on ne le combat pas, on neutralise
   seulement la largeur et les marges héritées. */
#dp-k-forms #blockvmenusearch {
width: auto;
max-width: none;
margin: 0;
padding: 2px 0 0;
}

/* --- Forme LEGACY : instances dont main.inc.php n'a pas encore printSearchBox()
   (empilement div.menu_titre + form, ex. matrice avant le rsync du 28/07). Sans ceci les
   formulaires s'étalent en flux et le bouton de soumission part à la ligne. --- */
#dp-k-forms #blockvmenusearch > div.menu_titre {
margin: 8px 0 2px;
padding: 0;
font-size: 12px;
font-weight: 600;
background: none;
border: 0;
}
#dp-k-forms #blockvmenusearch > form {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 6px;
}
#dp-k-forms #blockvmenusearch > form input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* img_object() écrit `style="font-size:1.4em"` EN LIGNE sur le <span> porteur de l'icône :
   sans !important l'icône reste 40 % trop grosse et casse l'alignement des puces. */
#dp-k-forms #blockvmenusearch span[style] { font-size: 1em !important; line-height: 1; }
#dp-k-forms #blockvmenusearch i { font-size: 12px !important; }

@media print { #dp-k-overlay { display: none !important; } }

/* --- Étiquettes de section --- */
#dp-col .dp-col-label {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: #6b7280;
padding: 12px 14px 3px;
flex: none;
}

/* --- Favoris : lignes fines (les cartes du menu gauche sont écrasées ici),
   titre interne « Marque-pages » redondant masqué --- */
#dp-col div.blockvmenubookmarks { flex: none; padding: 0 8px; }
#dp-col .blockvmenubookmarks .menu_titre,
#dp-col .blockvmenubookmarks .menu_top { display: none !important; }
#dp-col #bookmarks-menu-list .menu_contenu {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 7px !important;
}
#dp-col #bookmarks-menu-list .menu_contenu > a.vsmenu {
display: flex !important;
align-items: center;
gap: 8px;
padding: 4px 10px !important;
margin: 1px 0 !important;
border-radius: 7px !important;
font-size: 12.5px !important;
color: #666666 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: transparent !important;
}
#dp-col #bookmarks-menu-list .menu_contenu > a.vsmenu:hover {
background: #f1f5f9 !important;
color: #333333 !important;
}
/* Repli « N autres favoris… » (même modèle que les modules) */
#dp-col #bookmarks-menu-list .menu_contenu.dp-col-hid { display: none !important; }
#dp-col div.blockvmenubookmarks.dp-col-open #bookmarks-menu-list .menu_contenu.dp-col-hid { display: block !important; }
#dp-col a.dp-col-morefav {
display: flex !important;
align-items: center;
padding: 4px 10px !important;
margin: 1px 0 !important;
border-radius: 7px !important;
font-size: 12px !important;
color: #6b7280 !important;
cursor: pointer;
text-decoration: none !important;
}
#dp-col a.dp-col-morefav:hover { background: #f1f5f9 !important; color: #333333 !important; }

/* --- Sous-menu à plat (repli si le module actif est introuvable) --- */
#dp-col .dp-col-left { flex: none; padding-bottom: 2px; }

/* --- Modules : icône + label + compteur, accordéon sur le module actif --- */
#dp-col .dp-col-modules { flex: none; }
#dp-col ul#menu_main.menu_doliplus {
display: block !important;
flex-flow: initial !important;
padding: 0 8px !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
width: auto !important;
}
#dp-col #menu_main > li {
display: block !important;
position: static !important;
float: none !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
width: auto !important;
}
#dp-col #menu_main > li > a.menu1 {
display: flex !important;
align-items: center !important;
gap: 9px;
padding: 5px 10px !important;
margin: 1px 0 !important;
border-radius: 7px !important;
color: #333333 !important;
font-size: 13px !important;
line-height: 1.4 !important;
background: transparent !important;
background-image: none !important;
border: none !important;
text-shadow: none !important;
white-space: nowrap;
overflow: hidden;
}
#dp-col #menu_main > li > a.menu1 > span {
display: inline-block !important;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
text-align: left !important;
}
#dp-col #menu_main > li > a.menu1:hover { background: #f1f5f9 !important; color: #333333 !important; }
#dp-col #menu_main > li > a.menu1.menu1sel {
background: color-mix(in srgb, #4A90E2 11%, transparent) !important;
color: #4A90E2 !important;
font-weight: 600 !important;
}
#dp-col #menu_main .iconmenu {
width: 18px !important;
height: 18px !important;
min-width: 18px;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 13px;
background-size: contain;
margin: 0 !important;
float: none !important;
}
/* Dropdowns et méga-menus : neutralisés (naviguer = ouvrir l'accordéon).
   Ciblage li > ul DIRECT : le vmenudoli imbriqué (.dp-col-sub) reste hors champ. */
#dp-col #menu_main li > ul,
#dp-col #menu_main ul.mm-mega {
display: none !important;
}
/* Compteur (badge notifi) : à droite du label, discret — le :before styleglobal
   (content:attr(data-count)) est remis dans le flux, débarrassé de sa pastille */
#dp-col #menu_main a.menu1 > span.badge-menu-doli {
padding-left: 0 !important;
position: static !important;
top: auto !important;
display: flex !important;
align-items: center;
}
#dp-col #menu_main a.menu1 > span.badge-menu-doli:before {
position: static !important;
order: 2;
margin-left: auto;
width: auto !important; height: auto !important;
line-height: 1 !important;
font-size: 11px !important;
padding-left: 6px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #6b7280 !important;
}
#dp-col #menu_main a.menu1 > span.badge-menu-doli[data-count="0"]:before { display: none !important; }

/* --- Sous-menu du module actif (.dp-col-sub) : servi dans le tiroir niveau 2.
   Les cartes du menu gauche redeviennent des lignes plates --- */
#dp-col .dp-col-sub {
margin: 1px 0 6px 18px;
padding-left: 9px;
border-left: 1px solid #e0e6ed;
}
#dp-col .dp-col-sub .vmenudoli {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
#dp-col .dp-col-sub .menu_contenu {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
#dp-col .dp-col-sub .menu_contenu > a.vsmenu {
display: block !important;
padding: 3px 9px !important;
margin: 1px 0 !important;
border-radius: 6px !important;
font-size: 12.5px !important;
color: #666666 !important;
background: transparent !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left !important;
}
#dp-col .dp-col-sub .menu_contenu > a.vsmenu:hover {
background: #f1f5f9 !important;
color: #333333 !important;
}
#dp-col .dp-col-sub .menu_contenu br { display: none; }
/* Titres de groupe du sous-menu : petites étiquettes calmes */
#dp-col .dp-col-sub .menu_titre {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 8px 9px 2px !important;
margin: 0 !important;
}
#dp-col .dp-col-sub .menu_titre,
#dp-col .dp-col-sub .menu_titre a.vmenu {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280 !important;
text-align: left !important;
}
#dp-col .dp-col-sub #menu_titre_logo { display: none !important; }
#dp-col .dp-col-sub .menu_top, #dp-col .dp-col-sub .menu_end { display: none !important; }

/* --- Repli « N autres modules… » : compté, jamais masqué --- */
#dp-col #menu_main > li.dp-col-hid { display: none !important; }
#dp-col #menu_main.dp-col-open > li.dp-col-hid { display: block !important; }
#dp-col #menu_main li.dp-col-moreli > a {
display: flex !important;
align-items: center;
padding: 5px 10px !important;
margin: 1px 0 !important;
border-radius: 7px !important;
font-size: 12.5px !important;
color: #6b7280 !important;
cursor: pointer;
text-decoration: none !important;
background: transparent !important;
background-image: none !important;
border: none !important;
}
#dp-col #menu_main li.dp-col-moreli > a:hover { background: #f1f5f9 !important; color: #333333 !important; }

/* --- Pied : user / entité / logout / version --- */
#dp-col .dp-col-foot {
margin-top: auto;
flex: none;
border-top: 1px solid #e0e6ed;
padding: 8px 12px 10px;
background: #f8fafc;
}
#dp-col .dp-col-foot div.login {
position: static !important;
top: auto !important; right: auto !important;
display: flex !important;
align-items: center;
gap: 8px;
padding: 2px 0 6px;
}
#dp-col .dp-col-foot div.login img { border-radius: 50%; max-width: 30px; max-height: 30px; }
#dp-col .dp-col-foot div.login a { color: #333333 !important; font-size: 12.5px; font-weight: 600; }
#dp-col .dp-col-foot div.login_block {
float: none !important;
position: static !important;
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 7px;
padding: 2px 0;
}
#dp-col .dp-col-foot div.login_block a { color: #666666 !important; }
#dp-col .dp-col-foot div.login_block a:hover { color: #4A90E2 !important; }
#dp-col .dp-col-foot #blockvmenuhelp { text-align: left !important; padding: 4px 0 0; }
#dp-col .dp-col-foot #blockversion { margin-top: 4px !important; text-align: left !important; }

/* Scrollbar discrète de la sidebar */
#dp-col::-webkit-scrollbar { width: 8px; }
#dp-col::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 8px; }

/* ==========================================================================
   SIDEBAR ITÉRATION 5 — TIROIR NIVEAU 2 (#dp-col-drawer, demande GP 21/07)
   Le sous-menu ne s'insère plus inline (l'accordéon allongeait la sidebar →
   scroll) : clic module → panneau fixe ACCOLÉ à droite de la sidebar (248px),
   pattern tiroir rail-v cloudtheme. Contenu : vmenudoli contextuel (module
   actif, enveloppé .dp-col-sub → règles d'aplatissement existantes) ou clone
   du <ul> mm du module (.dp-col-drawer-mm). Sous la palette (10020), au-dessus
   du peek (10010) — les deux ne cohabitent jamais côté gauche.
   ========================================================================== */
#dp-col .dp-col-drawer-store { display: none; }
#dp-col-drawer {
display: none;
position: fixed;
top: 0; bottom: 0; left: 248px;
width: 288px;
z-index: 10012;
background: var(--dp-paper, var(--dp-bg, #fff));
border-right: 1px solid #e0e6ed;
box-shadow: 14px 0 34px rgba(38, 36, 31, .10);
overflow-y: auto;
overscroll-behavior: contain;
}
#dp-col-drawer.dp-col-drawer-on { display: block; animation: dpNsbDrawerIn .16s ease; }
@keyframes dpNsbDrawerIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
#dp-col-drawer .dp-col-drawer-head {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px 10px;
background: var(--dp-paper, var(--dp-bg, #fff));
border-bottom: 1px solid #e0e6ed;
}
#dp-col-drawer .dp-col-drawer-title {
flex: 1; min-width: 0;
font-size: 13px; font-weight: 600;
color: #333333;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dp-col-drawer a.dp-col-drawer-openlink {
font-size: 12px; font-weight: 600; white-space: nowrap;
color: #4A90E2 !important;
text-decoration: none;
}
#dp-col-drawer a.dp-col-drawer-openlink:hover { text-decoration: underline; }
#dp-col-drawer a.dp-col-drawer-close {
font-size: 12px; line-height: 1;
color: #6b7280 !important;
text-decoration: none;
padding: 4px 7px; border-radius: 6px;
}
#dp-col-drawer a.dp-col-drawer-close:hover { background: #f1f5f9; color: #333333 !important; }
/* vmenudoli contextuel : les règles .dp-col-sub existantes s'appliquent (le tiroir
   vit DANS #dp-col) — on neutralise seulement l'indentation d'accordéon */
#dp-col-drawer .dp-col-sub { margin: 6px 6px 14px; padding-left: 0; border-left: none; }
/* …et dans le TIROIR, les sous-titres reprennent la présentation cloudtheme
   (gras, fond teinté, filet — plus les petites capitales de l'accordéon) ;
   les items s'indentent sous leur section. Spécificité égale aux règles
   .dp-col-sub d'origine → le tail gagne, !important compris. */
#dp-col-drawer .dp-col-sub .menu_titre {
background: #f1f5f9 !important;
border-left: 3px solid #e0e6ed !important;
border-radius: 6px;
margin: 8px 0 2px !important;
padding: 8px 12px !important;
}
#dp-col-drawer .dp-col-sub .menu_titre,
#dp-col-drawer .dp-col-sub .menu_titre a.vmenu {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: none;
letter-spacing: 0;
color: #333333 !important;
}
#dp-col-drawer .dp-col-sub .menu_contenu > a.vsmenu {
padding: 4px 9px 4px 30px !important;
opacity: .92;
white-space: normal;
}
/* Clone du <ul> mm : sections = ancres href="#" (étiquettes), liens = lignes */
#dp-col-drawer .dp-col-drawer-mm,
#dp-col-drawer .dp-col-drawer-mm ul { list-style: none; margin: 0; padding: 0 4px 10px; }
#dp-col-drawer .dp-col-drawer-mm ul { padding: 0; }
#dp-col-drawer .dp-col-drawer-mm a {
display: block;
padding: 5px 14px;
margin: 1px 6px;
border-radius: 6px;
font-size: 12.5px; line-height: 1.5;
color: #333333 !important;
text-decoration: none !important;
text-shadow: none !important;
white-space: normal;
}
#dp-col-drawer .dp-col-drawer-mm a:hover { background: #f1f5f9; }
/* Hiérarchie 2 niveaux — présentation reprise du tiroir cloudtheme (demande GP) :
   niveau 1 = EN-TÊTE DE SECTION en gras, fond légèrement teinté, filet gauche ;
   niveau 2 = item indenté, poids normal, légèrement atténué */
#dp-col-drawer .dp-col-drawer-mm a[href="#"] {
pointer-events: none;
margin: 8px 6px 2px;
padding: 8px 12px;
font-size: 13px; font-weight: 700;
background: #f1f5f9;
border-left: 3px solid #e0e6ed;
border-radius: 6px;
color: #333333 !important;
}
#dp-col-drawer .dp-col-drawer-mm ul a:not([href="#"]) {
padding-left: 30px;
font-size: 12.5px;
font-weight: 400;
opacity: .92;
}
#dp-col-drawer .dp-col-drawer-mm a img,
#dp-col-drawer .dp-col-drawer-mm a .iconmenu { display: none !important; }
/* Affordance : chevron discret sur les entrées à tiroir, entrée ouverte marquée */
#dp-col #menu_main > li.dp-col-hasdrawer > a.menu1::after {
content: '›';
padding-left: 6px;
color: #6b7280;
opacity: 0;
}
#dp-col #menu_main > li.dp-col-hasdrawer:hover > a.menu1::after { opacity: .85; }
#dp-col #menu_main > li.dp-col-draweron > a.menu1 { background: #f1f5f9 !important; }
#dp-col #menu_main > li.dp-col-draweron > a.menu1::after { opacity: .85; }
/* Tactile : chevron toujours visible (pas de survol au doigt) */
@media (pointer: coarse) {
    #dp-col #menu_main > li.dp-col-hasdrawer > a.menu1::after { opacity: .55; }
}

/* Pages-enveloppes (iframe#doliplus : messagerie/Roundcube, MonCloud, webscrap) :
   sous la colonne, le cadre remplit la hauteur (le height:800px inline perd
   contre le !important de la feuille). */
body.dp-col-on iframe#doliplus { height: calc(100vh - 40px) !important; width: 100% !important; display: block; }

/* Barre de titre (print_barre_liste) en mode scroll horizontal : sans borne, elle
   suit la largeur du TABLEAU et ses extras de droite partent hors viewport. Bornée
   à l'écran et collante au défilement horizontal, en tenant compte des 248px. */
body.dp-col-on table.notopnoleftnoright:has(> tbody > tr > td > div.titre) {
max-width: calc(100vw - 296px);
position: sticky;
left: 248px;
z-index: 5;
}


/* ============================================================================
   BOUTONS D'ACTION — LE DERNIER MOT (mode clair ET mode sombre)
   ----------------------------------------------------------------------------
   Ce bloc est en FIN DE FICHIER volontairement : il doit passer APRÈS le bloc
   « if ($variant === 'dark') », qui contient une règle fourre-tout
   `a, a:link, a:visited { color: $linkColor !important }`. À spécificité égale
   (a:link = a.butAction = 0-1-1) et avec !important des deux côtés, c'est l'ORDRE
   qui tranche : cette règle volait le texte blanc de TOUS les boutons d'action en
   mode sombre (texte lilas #ccd5ff sur fond bouton → 3,1:1 au lieu de 4,5:1).
   Ici les sélecteurs sont en `a.butAction:link` (0-2-1) : ils gagnent toujours.

   Second défaut corrigé : la règle générique des boutons liste `a.butActionDelete`
   (0-1-1) alors que la règle rouge ne dit que `.butActionDelete` (0-1-0) → le bouton
   Supprimer perdait son rouge et prenait le dégradé de la primaire, dans les DEUX
   modes. Les variantes sémantiques sont donc redites ici en `a.`/`span.`.
   ============================================================================ */

/* Texte TOUJOURS blanc franc — jamais la couleur de lien, jamais un blanc cassé */
a.button, a.button:link, a.button:visited, a.button:hover, a.button:focus, a.button:active,
a.butAction, a.butAction:link, a.butAction:visited, a.butAction:hover, a.butAction:focus, a.butAction:active,
a.butActionDelete, a.butActionDelete:link, a.butActionDelete:visited, a.butActionDelete:hover, a.butActionDelete:focus, a.butActionDelete:active,
a.butActionOk, a.butActionOk:link, a.butActionOk:visited, a.butActionOk:hover, a.butActionOk:focus, a.butActionOk:active,
a.butActionBlue, a.butActionBlue:link, a.butActionBlue:visited, a.butActionBlue:hover, a.butActionBlue:focus, a.butActionBlue:active,
a.butActionRefused, a.butActionRefused:link, a.butActionRefused:visited, a.butActionRefused:hover,
span.button, span.butAction, span.butActionDelete, span.butActionOk, span.butActionBlue, span.butActionRefused,
label.butAction, input.button, input[type="submit"], button[type="submit"] {
color: #ffffff !important;
text-shadow: none !important;
}

/* Supprimer — rouge, dans les deux modes */
a.butActionDelete, a.butActionDelete:link, a.butActionDelete:visited,
span.butActionDelete, .butActionDelete {
background: linear-gradient(135deg, #dc3545, #c82333) !important;
border: 1px solid #c82333 !important;
}

a.butActionDelete:hover, a.butActionDelete:focus, a.butActionDelete:active {
background: linear-gradient(135deg, #c82333, #a71d2a) !important;
border-color: #a71d2a !important;
}

/* Valider — vert */
a.butActionOk, a.butActionOk:link, a.butActionOk:visited, span.butActionOk {
background: linear-gradient(135deg, #208637, #218838) !important;
border: 1px solid #218838 !important;
}

a.butActionOk:hover, a.butActionOk:focus, a.butActionOk:active {
background: linear-gradient(135deg, #218838, #1b6e2d) !important;
border-color: #1b6e2d !important;
}

/* Bleu */
a.butActionBlue, a.butActionBlue:link, a.butActionBlue:visited, span.butActionBlue {
background: linear-gradient(135deg, #0071eb, #0069d9) !important;
border: 1px solid #0069d9 !important;
}

a.butActionBlue:hover, a.butActionBlue:focus, a.butActionBlue:active {
background: linear-gradient(135deg, #0069d9, #0056b3) !important;
border-color: #0056b3 !important;
}

/* Refusé/désactivé — gris uni assumé, pas un bouton actif délavé */
a.butActionRefused, span.butActionRefused, .butActionRefused {
background: #6c757d !important;
background-image: none !important;
border: 1px solid #6c757d !important;
opacity: .6 !important;
cursor: not-allowed !important;
box-shadow: none !important;
transform: none !important;
}

/* ============================================================================
   FONDS CHOISIS PAR L'UTILISATEUR & IMAGES TECHNIQUES
   ----------------------------------------------------------------------------
   Deux familles que le thème ne doit JAMAIS recolorer à l'aveugle : les pastilles
   dont le fond vient d'une donnée (couleur d'une catégorie) et les images qui
   doivent rester lisibles par une machine (codes-barres, QR).
   ============================================================================ */

/* --- Puces de catégories (Form::showCategories, rendermode=1) ---------------
   Le fond est la couleur de la CATÉGORIE, libre. Le texte est un <a> : il prenait
   donc $linkColor (pastel clair en sombre) → turquoise sur pastille claire =
   illisible. La couleur lisible est calculée en PHP (dolBestTextColorOn) et posée
   en ligne dans --catfg ; ici on la fait gagner contre le fourre-tout `a:link`
   du bloc sombre (li.x a:link = 0-2-2 > a:link = 0-1-1). */
li.select2-search-choice-dolibarr-var,
li.select2-search-choice-dolibarr-var a,
li.select2-search-choice-dolibarr-var a:link,
li.select2-search-choice-dolibarr-var a:visited,
li.select2-search-choice-dolibarr-var a:hover,
li.select2-search-choice-dolibarr-var a:focus,
li.select2-search-choice-dolibarr-var span,
li.select2-container-multi-dolibarr .select2-search-choice-dolibarr,
li.select2-container-multi-dolibarr .select2-search-choice-dolibarr a {
color: var(--catfg, #1a1a1a) !important;
}

/* Le halo blanc interne faisait passer une puce sans couleur pour une pastille
   claire sur fond sombre. Bordure franche à la place, dans la teinte du texte. */
li.select2-search-choice-dolibarr-var {
box-shadow: none !important;
border: 1px solid rgba(0, 0, 0, .25) !important;
}

/* Le picto étiquette est colorisé par img_object() : il doit suivre le texte. */
li.select2-search-choice-dolibarr-var i,
li.select2-search-choice-dolibarr-var .fa,
li.select2-search-choice-dolibarr-var img {
color: var(--catfg, #1a1a1a) !important;
}

/* --- Codes-barres et QR : fond blanc obligatoire ---------------------------
   Les images générées par viewimage.php sont des barres NOIRES sur fond
   TRANSPARENT. Posées sur la page sombre (#1e1e2e), elles deviennent
   inexploitables — y compris par un lecteur optique. Le fond blanc et la marge
   sont posés dans les DEUX modes : une zone de silence blanche autour du code
   fait partie de la spécification des codes-barres, elle ne gêne pas en clair. */
img[src*="modulepart=barcode"],
img[src*="genbarcode"],
img[src*="modulepart=qrcode"],
img[src*="qrcode.php"],
.barcode img, .barcodeimg, td.barcode img {
background: #ffffff !important;
padding: 10px !important;
border-radius: 3px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important;
}


/* Drapeau « prix sous le PA mini » de la liste produits. Était un
   `style="color:blue !important"` EN LIGNE dans products_liste_ajax.php : une couleur
   inline en !important ne peut être corrigée par AUCUNE feuille de style, il fallait
   donc toucher le PHP. Le bleu pur (#0000ff) donnait 1,91:1 sur la page sombre. */
.dp-pamini-flag {
color: #1d4ed8 !important;
font-weight: 600 !important;
}

/* Poignée de réordonnancement des lignes de document (grip.png, theme/common/img — PNG PARTAGÉ
   par tout Dolibarr, gris FIXE #909090, non recolorable par une règle CSS classique). Mesuré au
   bridge le 2026-08-03 (propal.php?id=466, lignes de devis) : 2,71:1 en Atelier clair et 2,91:1
   en Classique clair, sous le seuil AA non-texte (3:1) — signalé illisible par GP. En sombre le
   PNG est déjà ≥3,7:1 (fond foncé), donc ce correctif reste CLAIR UNIQUEMENT.
   ⚠ Premier correctif (filter: invert() sur .tdlineupdown lui-même) INSUFFISANT — re-signalé par
   GP sur les lignes de SOUS-TOTAL (module milestone) : `filter` s'applique à la boîte ENTIÈRE de
   l'élément (fond + image COMPOSITÉS ensemble), pas seulement à l'image. Sur une ligne normale
   (cellule transparente, le fond vient d'un ANCÊTRE non filtré) ça marche : seuls les points gris
   sont inversés, le fond reste inchangé, le contraste s'améliore réellement. Sur une ligne
   milestone, la cellule porte SON PROPRE `background-color:var(--dp-surface-2)` **sur le même
   élément filtré** : le fond ET les points sont inversés ENSEMBLE, ce qui préserve leur contraste
   RELATIF (~2,7:1) au lieu de l'améliorer — invisible avant, invisible après, juste d'une autre
   couleur. Corrigé en peignant l'icône sur un **pseudo-élément séparé** (masque CSS), qui ne
   touche jamais le fond du parent quel qu'il soit. `.lineupdown img` (flèches haut/bas au survol)
   n'a pas ce problème (une <img> n'a pas de fond propre) : filtre conservé pour elles. */
.lineupdown img {
filter: invert(1) brightness(0.85);
}
.tdlineupdown { background-image: none !important; position: relative; }
.tdlineupdown::after {
content: "";
position: absolute;
inset: 0;
-webkit-mask-image: url(/htdocs/theme/common/img/grip.png);
mask-image: url(/htdocs/theme/common/img/grip.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #333333;
pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   GED elFinder — habillage CloudTheme                      (chantier §16, 24/08)

   L'explorateur de documents (custom/cloud, elFinder 2.1.65) arrivait habillé
   en jQuery-UI « smoothness » : un cadre gris de 2013, étranger au reste du
   logiciel. Ce bloc lui fait porter les jetons --dp-*, donc le preset de
   l'entité, la variante claire/sombre et la densité, sans rien coder de neuf.

   ⚠ TOUT est scopé sous `.elfinder` : les classes jQuery-UI (`ui-state-default`,
     `ui-widget-content`…) sont utilisées PARTOUT dans DoliPlus — une règle non
     scopée repeindrait des dizaines d'écrans sans rapport.

   ⚠ `!important` est NÉCESSAIRE, pas décoratif : en variante sombre, elFinder
     charge son propre thème `js/explorer/themes/dark.css` À L'EXÉCUTION (option
     `themes` de cloud/main.js) — il arrive donc APRÈS cette feuille dans le
     <head> et gagnerait la cascade autrement.

   ⚠ Fonds d'action : --dp-primary-btn, JAMAIS --dp-primary (cette dernière est
     la primaire BRUTE du client, pastel chez beaucoup — cf. §4terdecies).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cadre général ──────────────────────────────────────────────────────── */
.elfinder {
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    background: var(--dp-card) !important;
    color: var(--dp-text) !important;
    box-shadow: var(--dp-shadow-sm);
}

/* ── Barre d'outils ─────────────────────────────────────────────────────── */
.elfinder .elfinder-toolbar {
    background: var(--dp-surface) !important;
    border-bottom: 1px solid var(--dp-border) !important;
    border-radius: 0 !important;
    padding: 6px 8px !important;
    /* En flux jQuery-UI la barre débordait sur deux lignes dès que les boutons
       portent leur nom. En flex elle tient sur une ligne et se replie proprement
       quand la fenêtre est étroite. */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px;
}

/* Les groupes de boutons ne doivent porter AUCUN décor : quand tous leurs
   boutons sont masqués (cf. règle ci-dessous), un groupe vide laissait sinon un
   petit trait gris flottant dans la barre. Sans décor, il tombe à 0 de large. */
.elfinder .elfinder-toolbar .elfinder-buttonset {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Les boutons INERTES disparaissent au lieu de s'afficher en gris.
   C'est la pièce maîtresse : la barre se pilote toute seule par le getstate()
   d'elFinder, sans liste en dur à maintenir quand un module ajoute une commande.
   Effet mesuré au repos : 21 boutons rendus → 8 visibles ; les actions
   apparaissent à la sélection.
   ⚠ Ceci SUPPOSE le correctif de réveil de la barre posé dans cloud/main.js
     (elFinder ne rafraîchit l'état des boutons que sur 'select', jamais à
     l'ouverture). Sans lui, la barre serait VIDE à l'arrivée sur la page. */
.elfinder .elfinder-toolbar .elfinder-button.ui-state-disabled {
    display: none !important;
}

/* ⚠ CE QUE CETTE RÈGLE A COÛTÉ, et pourquoi elle reste quand même (25/08, GP :
   « la possibilité de se connecter à un connecteur a été supprimée »).
   `netmount` — le geste de connexion à un stockage externe — n'est pas inerte par
   intermittence comme Renommer ou Supprimer, qui reviennent à la première sélection :
   le serveur n'enregistre son driver que pour les comptes portant des identifiants
   Microsoft (2 sur 15 en base sur le master). Masqué, il ne revenait donc JAMAIS.
   Essais MESURÉS pour le remettre dans la barre, tous abandonnés : libellé complet
   (170 px) et libellé court « OneDrive » (104 px) la font repasser à DEUX lignes à
   1280 px avec un fichier sélectionné — la régression corrigée la veille ; en icône
   seule elle tient, mais l'icône du sprite elFinder à 50 % d'opacité ne se distingue
   pas. Le clic droit ne compense pas non plus : il filtre pareil (ui/contextmenu.js
   l.403). Le geste vit donc désormais dans le RAIL — « + Connecter un compte », posé
   par cloud/main.js sous les comptes liés, où rien ne dépend de `getstate()`. */

.elfinder .elfinder-toolbar .elfinder-button {
    background: var(--dp-card) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    color: var(--dp-text) !important;
    height: 28px !important;
    padding: 0 10px !important;
    margin: 2px 3px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
}
.elfinder .elfinder-toolbar .elfinder-button:hover {
    background: var(--dp-bg-hover) !important;
    border-color: var(--dp-border-dark) !important;
}
/* ⚠ `:not(.elfinder-button-search)` OBLIGATOIRE. Le champ de recherche EST un
   `.elfinder-button`, et `ui/searchbutton.js` lui pose `ui-state-active` dès qu'il
   prend le FOCUS (l.82 et 86). Sans cette exclusion, taper dans la recherche
   remplissait tout le champ de violet #9347ff, sous une encre restée à #333 —
   mesuré à 2,76:1, sous le seuil AA, et visuellement faux. */
.elfinder .elfinder-toolbar .elfinder-button.ui-state-active:not(.elfinder-button-search) {
    background: var(--dp-primary-btn) !important;
    border-color: var(--dp-primary-btn) !important;
    color: #fff !important;
}

/* Champ de recherche au focus : on marque la bordure, on ne repeint pas le fond. */
.elfinder .elfinder-toolbar .elfinder-button-search.ui-state-active {
    background: var(--dp-card) !important;
    border-color: var(--dp-primary-btn) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-primary-btn) 22%, transparent);
}
.elfinder .elfinder-toolbar .elfinder-button-text {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: inline !important;
    /* elFinder coupe le libellé à la largeur du bouton (overflow hidden hérité) :
       « Importer » sortait tronqué en « Importe ». */
    overflow: visible !important;
    text-overflow: clip !important;
}
.elfinder .elfinder-toolbar .elfinder-button { overflow: visible !important; }

/* ── UNE SEULE LIGNE, recherche au milieu (conformité à la maquette, 25/08) ────
   Mesuré à 1280 px avec un fichier sélectionné : les groupes de boutons réclamaient
   1 104 px et la recherche 278, pour 1 246 disponibles. La barre passait donc à DEUX
   lignes (86 px au lieu de 48) et la recherche — le seul contrôle qui fonctionnait
   dans l'ancienne barre — se retrouvait reléguée sur la seconde, à droite. La maquette
   la veut sur une ligne unique, élastique, entre les actions et la bascule de vue.

   Deux gestes, dont aucun ne touche à la clarté des libellés d'action :

   1. la bascule de vue passe en ICÔNE SEULE. C'est déjà ce que montre la maquette
      (contrôle segmenté à deux pictos, sans texte) et son libellé — « Vue par liste »
      ou « Vue par icônes » selon l'état — ne dit rien que l'icône ne dise déjà. Le
      `title` reste, donc l'infobulle aussi.
   2. la recherche devient élastique. Elle réclamait 260 px de base fixe : dès qu'il
      restait moins que ça, elle basculait. Elle prend désormais la place libre. */
/* ⚠ elFinder ne pose AUCUNE classe de commande sur ses boutons : ils sont tous
   `.elfinder-button` tout court (vérifié sur l'instance le 25/08 — seul le champ de
   recherche fait exception avec `.elfinder-button-search`). C'est l'ICÔNE qui porte
   le nom de la commande. On vise donc le libellé par son frère immédiat, jamais par
   une hypothétique `.elfinder-button-view` : elle n'existe pas.
   Balisage réel : <span class="…icon …icon-view …"></span><span class="…text">…</span> */
.elfinder .elfinder-toolbar .elfinder-button-icon-view + .elfinder-button-text {
    display: none !important;
}
/* ⚠ PAS de `flex-grow` ici. Essayé le 25/08 en `1 1 180px`, mesuré, abandonné :
   la recherche absorbait tout l'espace libre de la ligne (jusqu'à 1 225 px sur 1 246,
   soit 98 %), ne laissait plus la place aux boutons, et se retrouvait SEULE sur sa
   ligne — l'inverse exact du but. Base fixe modeste + rétrécissement autorisé : elle
   tient sur la ligne des actions et cède du terrain quand la fenêtre se resserre. */
.elfinder .elfinder-toolbar .elfinder-button-search {
    flex: 0 1 200px !important;
    min-width: 160px !important;
}
/* ⚠ NE PAS repousser la bascule de vue derrière la recherche avec un `order`.
   Essayé le 25/08, mesuré, ABANDONNÉ : la recherche est élastique, elle absorbe donc
   tout l'espace restant de la ligne — et le groupe placé APRÈS elle n'a plus la place
   d'y tenir. Résultat : la barre repassait à deux lignes, avec 44 px de bascule seuls
   sur la seconde. Un `flex-grow` et un `order` qui se suivent ne cohabitent pas.
   La bascule reste donc AVANT la recherche (elFinder lui donne `order: 99`, elle finit
   la ligne). Écart assumé à la maquette, qui la plaçait tout à droite : une barre sur
   UNE ligne avec une recherche de 224 px vaut mieux qu'un ordre exact sur deux lignes. */

/* ── Marqueur « lecture seule » : le dernier morceau d'habillage étranger ─────
   Écart n°10 de la matrice de conformité (§16ter), relevé par le comité du 25/08.

   La maquette retirait la colonne « Permissions » — 122 px constants, « Lecture et
   Écriture » sur 23 lignes sur 23 — et compensait par une PASTILLE, affichée seulement
   quand les droits diffèrent. La colonne est bien partie ; la pastille n'a jamais été
   écrite. L'information survit malgré tout, parce qu'elFinder pose de lui-même
   `.elfinder-ro .elfinder-perms` (vérifié au bridge : visible en liste ET en grille).

   Mais ce badge vient de la feuille de sprites d'elFinder
   (`js/explorer/css/common.css` : `background-position: 0 -64px`). Autrement dit, la
   SEULE information que le lot B devait ré-exprimer en langage DoliPlus était la seule
   encore rendue dans l'habillage qu'il prétendait remplacer.

   ⚠ Pourquoi PAS un libellé texte en `content:` — la voie qui semblait évidente :
   cette feuille est mise en cache par `CLOUDTHEME_CSS_VERSION`, qui ne varie PAS avec
   la langue de l'utilisateur. Un « lecture seule » écrit ici serait servi tel quel à un
   hispanophone. Le mot juste vit dans `main.js` (panneau de droite, ligne « Permissions »,
   déjà traduite) ; ici on habille le repère visuel, on n'invente pas de texte.

   On garde donc le cadenas d'elFinder — il est neutre et lisible dans les deux
   variantes — et on le pose dans une pastille aux jetons du thème. */
.elfinder .elfinder-cwd .elfinder-ro .elfinder-perms,
.elfinder .elfinder-cwd .elfinder-na .elfinder-perms {
    background-color: var(--dp-bg-hover) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 9px !important;
    box-sizing: content-box !important;
}

/* Écran étroit : la recherche prend toute la largeur au lieu d'être repoussée à droite. */
@media (max-width: 700px) {
    .elfinder .elfinder-toolbar .elfinder-button {
        height: auto !important;
        min-height: 30px !important;
        padding: 5px 9px !important;
    }
    .elfinder .elfinder-toolbar .elfinder-button-text {
        white-space: normal !important;
    }
    .elfinder .elfinder-toolbar .elfinder-button-search {
        order: 0;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }
}

/* TÉLÉPHONE — la barre rendait les libellés sur plusieurs lignes et mangeait
   204 px sur 598, soit 34 % de l'écran : il ne restait que 337 px de liste
   (mesuré le 25/08 à 390×844). Sous 600 px elle repasse donc en ICÔNES SEULES.
   Rien n'est perdu : chaque bouton garde son `title`, donc son libellé à l'appui
   long, et la barre est de toute façon révélée volontairement par balayage. */
@media (max-width: 600px) {
    .elfinder .elfinder-toolbar .elfinder-button-text {
        display: none !important;
    }
    .elfinder .elfinder-toolbar .elfinder-button {
        min-height: 34px !important;
        padding: 0 9px !important;
    }
    .elfinder .elfinder-toolbar {
        padding: 4px 6px !important;
        gap: 3px;
    }
}

/* Le champ de recherche : c'était une boîte de 70 px collée à droite. */
.elfinder .elfinder-toolbar .elfinder-button-search {
    background: var(--dp-card) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    height: 28px !important;
    padding: 0 8px !important;
    /* Toujours en fin de barre, et compressible : c'est lui qui faisait passer
       la barre sur deux lignes quand il gardait une largeur fixe. */
    order: 99;
    margin-left: auto !important;
    flex: 0 1 260px;
    min-width: 170px !important;
}
.elfinder .elfinder-toolbar .elfinder-button-search input[type="text"] {
    background: transparent !important;
    border: 0 !important;
    color: var(--dp-text) !important;
    width: 100% !important;
    font-size: 12.5px !important;
}
.elfinder .elfinder-toolbar .elfinder-button-search input::placeholder {
    color: var(--dp-text-muted) !important;
}

/* ── Colonne de gauche : volumes, favoris, aperçu docké ─────────────────── */
.elfinder .elfinder-navbar {
    background: var(--dp-surface) !important;
    border-color: var(--dp-border) !important;
    color: var(--dp-text) !important;
}
.elfinder .elfinder-navbar .ui-state-hover,
.elfinder .elfinder-navbar .elfinder-navbar-dir:hover {
    background: var(--dp-bg-hover) !important;
    border-radius: var(--dp-radius-sm) !important;
    color: var(--dp-text) !important;
}
.elfinder .elfinder-navbar .ui-state-active,
.elfinder .elfinder-navbar .elfinder-navbar-dir.ui-state-active {
    background: var(--dp-primary-btn) !important;
    color: #fff !important;
    border-radius: var(--dp-radius-sm) !important;
}
.elfinder .elfinder-places .elfinder-places-head {
    background: transparent !important;
    color: var(--dp-text-muted) !important;
    border-bottom: 1px solid var(--dp-border) !important;
}

/* Le dock d'elFinder est STRUCTURELLEMENT à gauche (sa largeur est asservie à
   celle de l'arbre : ui/navbar.js → navdock.width(nav.outerWidth() - deltaW)).
   Vide, il laissait une petite boîte grise sous les volumes, avec deux pastilles
   et rien dedans. L'aperçu vit désormais dans #dp-ged-side, à DROITE.
   elFinder masque déjà ce dock tant qu'il est vide ; on retire simplement le
   bouton qui permettait d'y envoyer l'aperçu, devenu redondant et trompeur —
   il l'aurait renvoyé à gauche, sous les volumes, alors que l'aperçu vit
   maintenant à droite. Le bouton de fermeture, lui, reste. */
.elfinder-quicklook .elfinder-quicklook-titlebar .elfinder-icon-minimize {
    display: none !important;
}

/* ── Outils d'exploitation de la GED (bloc AdminDoli de cloud/ged.php) ─────
   Ces actions lisent l'occupation disque de TOUTE l'instance : elles sont
   réservées à l'équipe DoliPlus et le restent. L'habillage le DIT — bande
   discrète, libellé explicite — pour qu'on ne les confonde jamais avec des
   fonctions client. */
.dp-ged-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin: 14px 0 0;
    padding: 8px 12px;
    background: var(--dp-surface);
    border: 1px dashed var(--dp-border-dark, var(--dp-border));
    border-radius: var(--dp-radius);
}
.dp-ged-admin-label {
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dp-text-muted);
}
.dp-ged-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dp-ged-admin-actions .butAction { margin: 0 !important; }

/* ── Panneau d'options de la recherche (« Ici / Volume / Tous », « Nom du
      fichier / Type MIME ») ────────────────────────────────────────────────
   Il est construit par ui/searchbutton.js en `buttonset` jQuery-UI et posé dans
   la racine elFinder : sans habillage il sortait en blanc pur avec les bordures
   grises de 2013, par-dessus la liste — et illisible en variante sombre. */
.elfinder-button-search-menu {
    background: var(--dp-card) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    box-shadow: var(--dp-shadow-md) !important;
    color: var(--dp-text) !important;
    padding: 8px !important;
}
.elfinder-button-search-menu .buttonset {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 6px;
}
.elfinder-button-search-menu .buttonset:last-child { margin-bottom: 0; }
.elfinder-button-search-menu .ui-button {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius-sm) !important;
    color: var(--dp-text) !important;
    font-size: 12.5px !important;
    padding: 4px 11px !important;
    margin: 0 !important;
}
.elfinder-button-search-menu .ui-button:hover {
    background: var(--dp-bg-hover) !important;
}
/* L'option retenue : fond d'action + encre blanche. --dp-primary-btn, jamais
   --dp-primary (pastel chez beaucoup de clients). */
.elfinder-button-search-menu .ui-button.ui-state-active {
    background: var(--dp-primary-btn) !important;
    border-color: var(--dp-primary-btn) !important;
    color: #fff !important;
    font-weight: 500;
}

/* Intertitres du rail (posés par cloud/main.js) : Emplacements · Comptes liés.
   Même graisse et même encre que l'en-tête « Favoris » d'elFinder, pour qu'ils se
   lisent comme des repères et non comme des entrées cliquables. */
.elfinder .elfinder-navbar .dp-rail-titre {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dp-text-muted);
    padding: 12px 12px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--dp-border);
    cursor: default;
    user-select: none;
}
.elfinder .elfinder-navbar .dp-rail-titre:first-child {
    border-top: 0;
    margin-top: 0;
}

/* « + Connecter un compte » — posé en fin de rail par cloud/main.js.
   Il porte le SEUL geste de connexion à un stockage externe : le bouton `netmount`
   de la barre ne se montre que si le serveur a déjà un driver réseau à monter, ce
   qui n'est vrai que pour les comptes portant des identifiants Microsoft. Ici, il
   est visible pour tout le monde, tout le temps.
   Discret par défaut, il s'affirme au survol : c'est un geste rare, pas une action
   du quotidien — il ne doit pas concurrencer les volumes du dessus. */
.elfinder .elfinder-navbar .dp-rail-connect {
    display: block;
    margin: 6px 8px 12px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--dp-text-muted);
    background: transparent;
    border: 1px dashed var(--dp-border);
    border-radius: var(--dp-radius);
    cursor: pointer;
    user-select: none;
}
.elfinder .elfinder-navbar .dp-rail-connect:hover {
    background: var(--dp-bg-hover);
    border-color: var(--dp-border-dark);
    color: var(--dp-text);
}

/* « ✕ » de retrait d'un compte lié — posé par cloud/main.js sur la seule racine OneDrive.
   Il porte le geste INVERSE de « + Connecter un compte », qui n'existait nulle part :
   elFinder ne démonte que les volumes « netmount », et OneDrive est monté en racine
   statique (connector_universal.php) — sa commande `netunmount` est donc inerte.

   ⚠ VISIBLE EN PERMANENCE, pas au survol. Un ✕ qui n'apparaît qu'au hover n'existe pas
   sur tablette, et la GED est utilisée sur tablette. Discret au repos (opacité), franc
   au survol : c'est un geste rare, il ne doit pas concurrencer le nom du volume.

   ⚠ EN LIGNE, PAS `position:absolute; right:0`. Essayé et MESURÉ au bridge le 2026-08-26 :
   le rail DÉFILE horizontalement, et les racines elFinder s'étirent à la largeur de leur
   contenu — la racine mesurait 432 px pour un rail visible de 250. Le ✕ calé à droite
   atterrissait à x=426, donc hors écran : présent dans le DOM, invisible à l'usage.
   Posé à la suite du nom, il suit le texte quel que soit le défilement. */
.elfinder .elfinder-navbar .dp-rail-deconnecter {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    border-radius: 50%;
    color: var(--dp-text-muted);
    opacity: .55;
    cursor: pointer;
    user-select: none;
}
.elfinder .elfinder-navbar .dp-rail-deconnecter:hover {
    opacity: 1;
    background: var(--dp-bg-hover);
    color: var(--dp-text);
}

/* ── Panneau d'aperçu, à droite (posé par cloud/main.js) ────────────────── */
/* ⚠ POSITIONNÉ, pas flottant — et c'est le correctif du défaut majeur relevé le
   25/08 : en flottant avec une hauteur posée en JS, le panneau dépassait la zone
   visible de 28 px (barre d'état elFinder + bordures) et le DERNIER BOUTON était
   coupé, sans barre de défilement pour le rattraper. Calé top/bottom dans la
   workzone (qui est en position:relative), il fait toujours exactement la hauteur
   visible et son overflow-y mord réellement. La place lui est faite par le
   padding-right ci-dessous : la liste se rétrécit, l'arbre flottant n'en souffre pas. */
.elfinder .elfinder-workzone.dp-has-side { padding-right: 264px; }

.elfinder #dp-ged-side {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 264px;
    box-sizing: border-box;
    padding: 14px;
    /* Surface DISTINCTE de la liste : en Atelier sombre, --dp-surface valait
       exactement le fond de .elfinder-cwd (1,00:1) — le panneau ne se voyait pas. */
    background: var(--dp-card);
    border-left: 1px solid var(--dp-border);
    color: var(--dp-text);
    overflow-y: auto;
    flex-direction: column;
    gap: 12px;
    z-index: 2;
}
.elfinder .elfinder-workzone.dp-has-side #dp-ged-side { display: flex; }
.elfinder #dp-ged-side .dp-side-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    color: var(--dp-text);
}
.elfinder #dp-ged-side .dp-side-facts {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
}
.elfinder #dp-ged-side .dp-side-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.elfinder #dp-ged-side .dp-side-line span:first-child { color: var(--dp-text-muted); }
.elfinder #dp-ged-side .dp-side-line span:last-child {
    color: var(--dp-text);
    text-align: right;
    word-break: break-word;
}
/* Les actions restent atteignables même si les métadonnées poussent : elles
   collent au bas du panneau au lieu de sortir du champ. */
.elfinder #dp-ged-side .dp-side-acts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: auto;
    position: sticky;
    bottom: -14px;
    padding: 10px 0 0;
    background: var(--dp-card);
}
.elfinder #dp-ged-side .dp-side-btn {
    font: inherit;
    font-size: 12.5px;
    height: 31px;
    padding: 0 12px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background: var(--dp-card);
    color: var(--dp-text);
    cursor: pointer;
}
.elfinder #dp-ged-side .dp-side-btn:hover { background: var(--dp-bg-hover); }
.elfinder #dp-ged-side .dp-side-btn:focus-visible {
    outline: 2px solid var(--dp-primary-btn);
    outline-offset: 1px;
}
/* Fond d'action : --dp-primary-btn, JAMAIS --dp-primary (pastel chez beaucoup).
   ⚠ !important OBLIGATOIRE : sans lui, mesuré le 25/08, la règle générique
   .dp-side-btn l'emportait en variante SOMBRE et le bouton principal devenait
   IDENTIQUE aux secondaires (fond #353548 en Classique, surface à 1,08:1 sur le
   fond en Atelier — invisible). Seule la graisse les distinguait encore. */
.elfinder #dp-ged-side .dp-side-btn-main {
    background: var(--dp-primary-btn) !important;
    border-color: var(--dp-primary-btn) !important;
    color: #fff !important;
    font-weight: 500;
}

/* Écran étroit : le panneau prendrait toute la place utile de la liste.
   Il s'efface — l'aperçu reste accessible par le bouton « Aperçu ». */
@media (max-width: 1100px) {
    .elfinder #dp-ged-side { display: none !important; }
}

/* ── Liste des fichiers ─────────────────────────────────────────────────── */
.elfinder .elfinder-cwd {
    background: var(--dp-card) !important;
    color: var(--dp-text) !important;
}
.elfinder .elfinder-cwd table thead td,
.elfinder .elfinder-cwd .elfinder-cwd-view-th,
.elfinder .elfinder-cwd [class*="elfinder-cwd-view-th-"] {
    background: var(--dp-surface) !important;
    color: var(--dp-text-muted) !important;
    border-color: var(--dp-border) !important;
    font-weight: 600 !important;
}
.elfinder .elfinder-cwd-file {
    border-bottom: 1px solid var(--dp-border) !important;
    color: var(--dp-text) !important;
}
/* ⚠ Le fond se pose sur les CELLULES, pas sur la ligne : en vue liste chaque
   <td> porte sa propre classe jQuery-UI `ui-state-hover`, dont le fond gris
   #dadada RECOUVRE celui du <tr>. Peindre le texte en blanc sans peindre la
   cellule donnait du blanc sur gris pâle — mesuré 1,6:1, illisible. */
.elfinder .elfinder-cwd-file:hover > td,
.elfinder .elfinder-cwd-file > td.ui-state-hover,
.elfinder .elfinder-cwd-file.ui-state-hover {
    background: var(--dp-bg-hover) !important;
    color: var(--dp-text) !important;
}
.elfinder .elfinder-cwd-file.ui-selected,
.elfinder .elfinder-cwd-file.ui-state-active,
.elfinder .elfinder-cwd-file.ui-selected > td,
.elfinder .elfinder-cwd-file.ui-selected > td.ui-state-hover,
.elfinder .elfinder-cwd-file.ui-selected .elfinder-cwd-filename {
    background: var(--dp-primary-btn) !important;
    color: #fff !important;
}
/* Vue grille : la sélection est portée par la vignette, pas par une cellule. */
.elfinder .elfinder-cwd-file.ui-selected .elfinder-cwd-filename,
.elfinder .elfinder-cwd .elfinder-cwd-file.ui-selected .elfinder-cwd-filename {
    border-radius: var(--dp-radius-sm) !important;
}

/* ── Barre d'état et fil d'Ariane ───────────────────────────────────────── */
.elfinder .elfinder-statusbar {
    background: var(--dp-surface) !important;
    border-top: 1px solid var(--dp-border) !important;
    color: var(--dp-text-light) !important;
    border-radius: 0 0 var(--dp-radius) var(--dp-radius) !important;
}
.elfinder .elfinder-path,
.elfinder .elfinder-stat-size,
.elfinder .elfinder-stat-selected {
    color: var(--dp-text-light) !important;
}

/* ── Menu contextuel et fenêtres ────────────────────────────────────────── */
.elfinder-contextmenu {
    background: var(--dp-card) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    box-shadow: var(--dp-shadow-md) !important;
    color: var(--dp-text) !important;
}
.elfinder-contextmenu .elfinder-contextmenu-item {
    color: var(--dp-text) !important;
}
.elfinder-contextmenu .elfinder-contextmenu-item:hover,
.elfinder-contextmenu .ui-state-hover {
    background: var(--dp-bg-hover) !important;
    color: var(--dp-text) !important;
}
.elfinder-dialog {
    background: var(--dp-card) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    color: var(--dp-text) !important;
}
.elfinder-dialog .ui-dialog-titlebar {
    background: var(--dp-surface) !important;
    border-bottom: 1px solid var(--dp-border) !important;
    color: var(--dp-text) !important;
}