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


/* Main menu1 */
/* Réserve à droite pour la photo + le nom (div.login, absolute) : 50px de padding (styleglobal)
   + 30 + 10 (#wrap_menu) = 90px. Le bloc fait 54px de photo et le nom est plafonné à 80px
   (cf. div.login plus bas) → aucun chevauchement. À 120px, une entrée de menu passait à la ligne
   alors qu'il restait ~50px vides à côté de la photo. */
#tmenu_tooltip{
margin-right:30px ;
}

#menu1{
margin-top: 1px;
list-style: none;
}

#menu1 li
{
float: left;
/* padding: 0 0 10px 0; rapproche les 2 lignes de menu */
padding: 0 0 3px 0;
/* espacement menu menu */
-moz-padding-start: 3px; -moz-padding-end: 3px;
position: relative;
line-height: 0;
}

#menu1 a
{
z-index: 1200;
/* float: left; // Fait de gros boutons */
height: 25px;
padding: 0 15px;
color: #FFFFFF;
text-transform: uppercase;
font: bold  11px/25px arial,tahoma,verdana,helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}


#menu1 li:hover > ul{
/* display: inline-block;*/
display: block;
}

/* Correction hover menu : fond et texte de même couleur = illisible */
.menu_doliplus li ul a:hover {
background-image: none !important;
color: inherit !important;
}
.menu_doliplus > li > a:hover {
color: inherit !important;
}

/* Sub-menu1 */

#menu1 ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
/*top: 55 px 27px; si smartphone ***** Règle la position de la liste sous le menu1 pple */
top:48px ;
z-index: 1300;
}

/*
alignement ul ul G ou D
*/

#menu1 ul ul{
top: 0;
left: 178px;
right: auto;
margin: 0 0 0 2px;
z-index: 2000;
}
#menu1 ul ul.reverse{
top: 0;
right: 178px;
left:auto;
margin: 0 2px 0 0;
z-index: 2000;
}

#menu1 ul li{
z-index: 1300;
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #f5f5f5, 0 2px 0 #777777;
}

#menu1 ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* espace verticaux + taille boutons */
#menu1 ul a {
padding: 9px;
height: 2px;
width: 160px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu1 ul a /* IE6 */
{
height: 10px;
}

*:first-child+html #menu1 ul a /* IE7 */
{
height: 10px;
}

#menu1 ul a:hover
{
}

#menu1 ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
/* fleche dessus*/
#menu1 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 #333333;
}

/* fleche coté vue droite*/
#menu1 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 #333333;
}
/* fleche coté vue gauche*/
#menu1 ul ul.reverse li:first-child a:after{
left: 173px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #333333;
}


#menu1 ul li:first-child a:hover:after
{
border-bottom-color: #357ABD;
}

#menu1 ul ul li:first-child a:hover:after
{
border-right-color: #357ABD;
border-bottom-color: transparent;
}


#menu1 ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

}

/* Clear floated elements */
#menu1:after
{
visibility: hidden;
display: block;
font-size: 0;

clear: both;
height: 0;
}

div.tmenu {
border-bottom: none;
}

/* ============================================================================== */
/* 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.mainmenu.searchmenu {
	background-image: url(/htdocs/theme/common/search.png);
 background-size: 30px 29px;
}
 div.mainmenu.searchloupe {
	background-image: url(/htdocs/theme/common/loupe.png);
 background-size: 30px 29px;
}
 div.mainmenu.menusearch {
	background-image: url(/htdocs/theme/common/menusearch.png);
 background-size: 30px 29px;
}
 div.mainmenu.searchperso {
	background-image: url(/htdocs/theme/common/searchperso.png);
 background-size: 30px 29px;
}
/* ============================================================================== */
/* Menu panel */
/* ============================================================================== */

.cd-panel {
visibility: hidden;
transition: visibility 0s 0.6s;
}

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

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

.cd-panel-container {
/* SOBRE : fond = couleur principale de la page (--dp-bg). Avant : blanc 96% → grosse zone
   blanche criarde en sombre. Fallback PHP fiable (no-cache, session live). */
background: var(--dp-bg, #ffffff) !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
border-radius: 8px;
position: fixed;
width: 220px;
height: 90%;
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);
}

/* Panneau latéral (clone du menu recherche) : il perd l'ancêtre .vmenu donc les règles du
   menu gauche ne s'y appliquent pas → champs blancs, signets blancs, carte version blanche,
   noirs hétérogènes. On le lisse : un seul fond (celui du conteneur) + champs sombres. */
.cd-panel-content,
.cd-panel-content div, .cd-panel-content ul, .cd-panel-content li,
.cd-panel-content table, .cd-panel-content tbody, .cd-panel-content tr, .cd-panel-content td,
.cd-panel-content .menu_titre, .cd-panel-content .menu_contenu,
.cd-panel-content .blockvmenu, .cd-panel-content .blockvmenusearch,
.cd-panel-content .blockvmenupair, .cd-panel-content .blockvmenuimpair,
.cd-panel-content .blockvmenubookmarks, .cd-panel-content .menu_top, .cd-panel-content .menu_end {
background-color: transparent !important;
background-image: none !important;
border-color: var(--dp-border, #e0e6ed) !important;
}
.cd-panel-content,
.cd-panel-content a, .cd-panel-content span, .cd-panel-content font,
.cd-panel-content td, .cd-panel-content div, .cd-panel-content li, .cd-panel-content b {
color: var(--dp-text, #333333) !important;
}
/* Champs de saisie + selects → surface sombre lisible (étaient blancs) */
.cd-panel-content input, .cd-panel-content select, .cd-panel-content textarea,
.cd-panel-content .select2-selection,
.cd-panel-content .select2-selection--single,
.cd-panel-content .select2-selection__rendered {
background-color: var(--dp-surface, #f5f5f5) !important;
background-image: none !important;
color: var(--dp-text, #333333) !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
border-radius: 4px !important;
}
/* Boutons « Go » : surface secondaire, pas de blanc */
.cd-panel-content input.button, .cd-panel-content .button,
.cd-panel-content input[type="submit"], .cd-panel-content input[type="button"] {
background-color: var(--dp-surface-2, #f5f5f5) !important;
color: var(--dp-text, #333333) !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
}
/* Filet bas léger pour séparer les sections au lieu de blocs de fond différents */
.cd-panel-content .menu_titre {
border-left: 2px solid var(--dp-primary, #e0e6ed) !important;
border-bottom: 1px solid var(--dp-border, #e0e6ed) !important;
}

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

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

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

/* Speedfinder icon — prevent overlap with search form below */
.blockvmenusearch .menu_titre {
height: auto !important;
}
.blockvmenusearch .menu_titre a.vsmenu {
display: inline !important;
padding-left: 0 !important;
border-left: none !important;
}
.blockvmenusearch .menu_titre a[href*="speedfinder"] {
display: inline !important;
border-left: none !important;
padding: 0 !important;
margin-left: 4px;
}

/* Décoller l'icône de son libellé dans le menu gauche vertical et le bloc/panneau
   de recherche (.vmenudoli, .blockvmenusearch, .cd-panel). On cible uniquement le
   <span> porteur de l'icône à l'intérieur du lien — l'icône speedfinder vit dans un
   <a href*="speedfinder"> distinct et n'est donc pas affectée. */
.blockvmenusearch .menu_titre a.vsmenu > span,
.cd-panel-content .menu_titre a.vsmenu > span,
.vmenu a.vmenudoli > span {
margin-right: 10px !important;
}

/* Le bouton "Go" (float:left) de l'entrée N se retrouve sur la même ligne que le
   picto de l'entrée N+1 et le touche. styleglobal.css.php force margin-right:0 sur
   ce bouton via `div.blockvmenusearch input.button[type="submit"]` (spécificité 0,3,2) ;
   on surcharge avec une spécificité supérieure (0,4,2) en restant scopé cloudtheme
   (.vmenu / .cd-panel-content) pour ne pas impacter les autres thèmes. */
.vmenu div.blockvmenusearch input.button[type="submit"],
.cd-panel-content div.blockvmenusearch input.button[type="submit"] {
margin-right: 10px !important;
}

/* ============================================================================== */
/* MODE RAIL — Menu compact icônes (CLOUDTHEME_MENU_RAIL_MODE)                   */
/* ============================================================================== */

/* Bouton de bascule mode rail dans #menu_short */
#menu_short li.menu-rail-btn a {
font-size: 16px;
line-height: 1;
padding: 8px 7px;
opacity: 0.7;
transition: opacity 0.15s;
}
#menu_short li.menu-rail-btn a:hover {
opacity: 1;
}
#menu_short li.menu-rail-btn a.rail-active {
opacity: 1;
font-weight: bold;
}

/* --- RAIL HORIZONTAL : barre compacte, icônes seules --- */
#menu_main.rail-h > li > a > span {
display: none;
}
#menu_main.rail-h > li:hover > a > span {
display: inline;
}
#menu_main.rail-h > li > a {
padding: 8px 5px;
}

/* --- RAIL VERTICAL : sidebar icônes dans .vmenu --- */
.vmenu.rail-v {
overflow: visible !important;
width: 44px !important;
min-width: 44px !important;
}
.vmenu.rail-v .menu_doliplus {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
width: 44px !important;
overflow: visible !important;
}
/* Contraindre le <a> à 44px (il hérite 125px du menu horizontal) */
.vmenu.rail-v .menu_doliplus > li > a {
width: 44px !important;
max-width: 44px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
padding: 6px 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Agrandir légèrement l'icône */
.vmenu.rail-v .menu_doliplus > li > a .iconmenu {
width: 22px !important;
height: 22px !important;
flex-shrink: 0 !important;
}
/* Icônes seules par défaut — masquer span ET le &nbsp; */
.vmenu.rail-v .menu_doliplus > li > a > span {
display: none !important;
}
/* Icônes FontAwesome 5 : loupe, hamburger, toggle rail */
div.iconmenu.searchloupe,
div.iconmenu.menusearch,
.menu-rail-btn .iconmenu.view-refresh {
background-image: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
div.iconmenu.searchloupe::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f00e';
font-size: 14px;
line-height: 1;
color: inherit;
}
div.iconmenu.menusearch::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f0c9';
font-size: 14px;
line-height: 1;
color: inherit;
}
.menu-rail-btn .iconmenu.view-refresh {
width: 18px;
height: 18px;
}
.menu-rail-btn .iconmenu.view-refresh::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f58e';
font-size: 14px;
line-height: 1;
color: inherit;
}
/* Toggle rail (view-refresh) : masqué uniquement en largeur smartphone, conservé dès la tablette (≥768px) */
@media only screen and (max-width: 767px) {
.menu-rail-toggle { display: none !important; }
}

/* Bouton toggle et bouton hidemenu : même hauteur que les items modules */
.vmenu.rail-v .menu-rail-btn a,
.vmenu.rail-v .menu-rail-hidemenu a {
width: 44px !important;
max-width: 44px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 4px !important;
min-height: 36px !important;
overflow: hidden !important;
}

/* ============================================================
   RAIL-V : PANNEAU 3 COLONNES
   Col 1 = label (fond sidebar), Col 2 = niveau 1, Col 3 = niveau 2
   ============================================================ */

/* li conserve 36px quand le a passe en absolute */
.vmenu.rail-v .menu_doliplus > li:hover {
min-height: 36px !important;
}

/* Colonne 1 : label "Tiers" en position absolue, fond = gradient sidebar */
.vmenu.rail-v .menu_doliplus > li:hover > a {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 36px !important;
width: 150px !important;
max-width: none !important;
z-index: 10000 !important;
overflow: visible !important;
justify-content: flex-start !important;
padding-left: 12px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
/* NIVEAU 0 (colonne label « Tiers ») : en position:absolute le <a> déborde la sidebar 44px
   jusqu'à 150px → la partie 44→150px flottait SANS fond au-dessus du contenu de page (effet
   « transparence »). On lui donne un fond opaque + bordure pour qu'il forme un panneau continu
   avec le flyout (colonnes 2 & 3). Fallbacks PHP fiables (no-cache, live session). */
background-color: var(--dp-surface, #f5f5f5) !important;
background-image: none !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
border-right: none !important;
}

/* Span "Tiers" : texte visible sur fond sidebar */
.vmenu.rail-v .menu_doliplus > li:hover > a > span {
display: inline !important;
white-space: nowrap !important;
/* Token thème (résout en live selon la variante, insensible au cache de ce CSS) */
color: var(--dp-text, #333333) !important;
font-weight: 600 !important;
font-size: 12px !important;
text-shadow: none !important;
}

/* Colonnes 2 & 3 : flyout jMenu démarre après la colonne label (150px) */
td.vmenu.rail-v #menu_v > li:hover > ul {
left: 150px !important;
z-index: 9999 !important;
}

/* Fond opaque sur tous les sous-niveaux du flyout (tokens thème → dark/clair auto) */
td.vmenu.rail-v #menu_v li:hover > ul,
td.vmenu.rail-v #menu_v li ul li:hover > ul {
background-color: var(--dp-surface, #f5f5f5) !important;
/* fallback bordure réel (était 'transparent' → « pas de bordure » quand les tokens --dp-* sont absents du cache) */
border: 1px solid var(--dp-border, #e0e6ed) !important;
z-index: 9999 !important;
}

/* Items flyout : fond + texte via tokens (cohérent variante, insensible au cache CSS).
   td.vmenu (élément+2classes+id+3élém) out-specifie le core `#menu_v li ul a` (id+3élém)
   → couvre rail-v ET menu vertical complet, sans dépendre de la classe .rail-v.
   IMPORTANT : le core styleglobal.css.php force `border: 2px solid #FFFFFF !important` sur
   chaque item (trait blanc épais, illisible/laid en sombre). On l'écrase par un simple
   séparateur bas, fin et discret, via token. */
td.vmenu #menu_v li ul a {
background-color: var(--dp-surface, #f5f5f5) !important;
/* Le core/thème pose un dégradé rose (linear-gradient) en background-IMAGE par-dessus la
   couleur → le panneau paraissait rose/brouillon malgré background-color correct. On le purge. */
background-image: none !important;
color: var(--dp-text, #333333) !important;
border: 0 !important;
border-bottom: 1px solid var(--dp-border, #e0e6ed) !important;
}
/* Flèche/onglet du 1er item : le core pose un border-top blanc 2px → neutralisé */
td.vmenu #menu_v li ul li:first-child > a {
border-top: 0 !important;
}
td.vmenu #menu_v li ul a:hover {
background-color: var(--dp-bg-hover, #e8eef5) !important;
background-image: none !important;
color: var(--dp-text, #111) !important;
}

/* Garantie anti-transparence : TOUS les niveaux du flyout vertical (0,1,2,3) ont un fond
   opaque, indépendamment du :hover et de l'élément exact (ul/ulmenu).
   + OMBRE & ARRONDI : sans ombre, en mode clair le panneau (#f8fafc) se confond avec la page
   (« sans fond ni bordure »). L'ombre le détache nettement comme un vrai menu flottant. */
td.vmenu #menu_v ul,
td.vmenu #menu_v ul ul,
.vmenu .menu_doliplus ul,
.vmenu.rail-v .menu_doliplus ul {
background-color: var(--dp-surface, #f5f5f5) !important;
background-image: none !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.14) !important;
}

/* Séparateurs de niveaux de menu : fins et discrets (comme une bordure de tableau).
   La bordure prenait la couleur primaire vive (#c2e4ff) → effet "trait blanc épais". */
.vmenu .menu_doliplus a,
.vmenu .menu_doliplus > li > a,
#menu_v a, #menu_v li a,
.menu_doliplus a, .menu_doliplus li a {
border-color: var(--dp-border, #404055) !important;
border-width: 1px !important;
}

/* ============================================================
   RAIL-V TACTILE : ouverture des sous-menus au TAP
   Sur smartphone le :hover n'existe pas → le JS (doliplusMenu.lib.php) pose .rail-tap-open
   sur le <li> tapé. On reproduit ici l'état :hover (colonne label + flyout) de façon
   PERSISTANTE jusqu'au tap suivant. Miroir des règles :hover ci-dessus (650-693).
   ============================================================ */
.vmenu.rail-v .menu_doliplus > li.rail-tap-open {
min-height: 36px !important;
}
.vmenu.rail-v .menu_doliplus > li.rail-tap-open > a {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 36px !important;
width: 150px !important;
max-width: none !important;
z-index: 10000 !important;
overflow: visible !important;
justify-content: flex-start !important;
padding-left: 12px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
background-color: var(--dp-surface, #f5f5f5) !important;
background-image: none !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
border-right: none !important;
}
.vmenu.rail-v .menu_doliplus > li.rail-tap-open > a > span {
display: inline !important;
white-space: nowrap !important;
color: var(--dp-text, #333333) !important;
font-weight: 600 !important;
font-size: 12px !important;
text-shadow: none !important;
}
/* Afficher le sous-menu direct du li ouvert (mirror de .menu_doliplus li:hover ul) */
.menu_doliplus li.rail-tap-open > ul {
display: flex !important;
}
/* Flyout 1er niveau démarre après la colonne label (150px), comme au survol */
td.vmenu.rail-v #menu_v > li.rail-tap-open > ul {
left: 150px !important;
z-index: 9999 !important;
}

/* ============================================================
   RAIL-V TACTILE : APPUI LONG → bulle « nom du module » (équivalent du survol)
   Le JS (doliplusMenu.lib.php) crée/positionne .rail-name-bubble à l'appui long sur une icône.
   Tokens --dp-deep* = surface FONCÉE + texte clair dans LES DEUX variantes → lisible partout.
   ============================================================ */
/* Pas de menu contextuel / sélection iOS lors de l'appui long sur les icônes du rail */
.vmenu.rail-v #menu_v > li > a {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
.rail-name-bubble {
position: fixed !important;
/* DÉCALÉE à ~2,6 cm à droite du rail : le doigt qui balaie le menu ne masque plus la bulle.
   Un trait de liaison (::before) la relie au doigt/icône pour garder le lien visuel. */
left: 100px;
/* z-index maximal : la bulle doit TOUJOURS passer au-dessus de tout (le méga-menu config
   #dp-config-menu monte à 100001, le tiptip à 99999…). On se met au plafond pour ne jamais passer dessous. */
z-index: 2147483646 !important;
/* Surface qui SUIT le thème (claire en clair, sombre en sombre) — cohérent avec le flyout/tiroir.
   Fallbacks live-session fiables (mêmes tokens que le panneau de menu). */
background: var(--dp-surface, #f5f5f5);
color: var(--dp-text, #333333);
border: 1px solid var(--dp-border, #e0e6ed);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
padding: 7px 12px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateX(-6px);
transition: opacity .12s ease, transform .12s ease;
box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.rail-name-bubble.is-visible { opacity: 1; transform: translateX(0); }
/* Trait de liaison : de la bulle (bord gauche à 100px) vers le rail (~44px), à hauteur du doigt */
.rail-name-bubble::before {
content: '';
position: absolute;
left: -56px;
top: 50%;
width: 56px;
height: 0;
border-top: 2px solid var(--dp-border, #e0e6ed);
transform: translateY(-50%);
opacity: .65;
}
/* Petite flèche pleine accolée à la bulle (pointe vers le doigt) */
.rail-name-bubble::after {
content: '';
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-right-color: var(--dp-surface, #f5f5f5);
border-left: 0;
}

/* --- MODE RAIL-V : sidebar commence en haut de page + pas de chevauchement photo/icônes --- */
/* Retire login_block du flux pour que #undertopmenu démarre à y=0 */
/* FIXED (et non absolute) : en rail-v les datatables larges forcent un scroll horizontal ;
   un élément 'absolute right:5px' s'ancre alors sur le bloc élargi et la photo user sort du
   viewport (tronquée). 'fixed' l'ancre au viewport → toujours visible, jamais coupée. */
body.rail-v-mode div.login_block {
position: fixed !important;
top: 1px !important;
right: 5px !important;
float: none !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
/* z-index explicite pour rester au-dessus du contenu de page (table titre, boutons action)
   qui peut apparaître au même niveau y en mode rail-v (contenu démarre à y=0) */
z-index: 200 !important;
/* 60px de marge interne droite pour laisser place à la photo utilisateur */
padding-right: 60px !important;
/* Le bloc était contraint (~170px) → toggles + MA SOCIETE + logout s'empilaient sur 3 lignes,
   le bloc devenait haut et chevauchait les onglets. On le met sur UNE SEULE ligne (flex nowrap,
   largeur auto qui s'étend vers la GAUCHE car ancré à droite) → bloc plus bas, dégage les onglets.
   Fond + bordure + ombre : il se lit comme un panneau net au-dessus du contenu. */
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 2px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: nowrap !important;
background: var(--dp-bg, #ffffff) !important;
border: 1px solid var(--dp-border, #e0e6ed) !important;
border-radius: 0 0 0 10px !important;
box-shadow: -2px 2px 10px rgba(0,0,0,0.28) !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Marge basse : on dégage les onglets/contenu de fiche sous le bloc fixe haut-droite. */
body.rail-v-mode div.fiche {
padding-top: 14px !important;
}

/* Photo user (div.login) AU-DESSUS de la zone logout/print : sinon la zone logout
   recouvre la photo. :has(.photologo) cible précisément le conteneur photo (pas la page login). */
div.login:has(img.photologo) {
/* NE PAS toucher position (déjà absolute) — sinon la photo repasse dans le flux (haut-gauche).
   z-index > 200 : en rail-v, login_block (qui contient logout/print) passe en fixed z:200 ;
   la photo, élément frère, doit le surpasser pour rester au-dessus du logout. */
z-index: 250 !important;
}
/* Nom sous la photo plafonné : sa largeur dépend du prénom (61px « Gérard D », 116px
   « Marie-Christine L ») et fixe la réserve du menu (#tmenu_tooltip). Le nom complet reste
   dans l'infobulle (textwithtooltip, main.inc.php). */
div.login:has(img.photologo) td.classfortooltip {
display: block;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Boutons / pictos du titre (print_fiche_titre : « main tendue » aide/show_doc, doc, etc.) :
   sticky pour rester visibles et NE PAS passer sous le bloc haut-droite (login_block).
   Le bloc, devenu un panneau une-ligne, s'étend jusqu'à ~390px depuis le bord droit
   (mesuré : L976 sur 1366, largeur 375px) → offset 405px = 390 + ~15px de marge. */
body.rail-v-mode div.fiche > table.notopnoleftnoright > tbody > tr:first-child > td[align="right"] {
position: sticky !important;
right: 405px !important;
background: #ffffff !important;
z-index: 10 !important;
}

/* ============================================================
   RAIL-V SUR SMARTPHONE (< 768px)
   Le bloc fixe haut-droite (toggles + logout + photo + pseudo) descend jusqu'à ~70px et
   chevauchait le titre de page (« Espace accueil ») + le badge app. Et l'offset sticky 405px
   (calibré desktop) dépasse la largeur viewport → la cellule titre partait hors écran.
   On dégage le contenu SOUS le bloc et on neutralise le sticky desktop.
   ============================================================ */
@media only screen and (max-width: 767px) {
/* Dégager le contenu de fiche sous le bloc fixe (photo+pseudo ~70px de haut) */
body.rail-v-mode div.fiche {
padding-top: 74px !important;
}
/* L'offset sticky 405px n'a aucun sens < 768px → la cellule des pictos titre reprend le flux */
body.rail-v-mode div.fiche > table.notopnoleftnoright > tbody > tr:first-child > td[align="right"] {
position: static !important;
right: auto !important;
}
/* La photo user retombait SUR le picto ⚙ config + le logout (z-index 250 → bouton config
   masqué, inaccessible). Cause : la photo est en position:absolute ancrée au <body> (qui défile
   horizontalement quand la page déborde), alors que les contrôles sont en position:fixed ancrés
   au viewport → les deux divergent. On passe la photo en fixed elle aussi pour l'aligner au bord
   droit du viewport, APRÈS les contrôles (toggle/menu/config/logout). */
body.rail-v-mode div.login:has(img.photologo) {
position: fixed !important;
top: 3px !important;
right: 3px !important;
left: auto !important;
}

/* ---- Anti-débordement horizontal de page (scroll horizontal parasite) ----
   Deux coupables à 375px : (1) les graphiques dashboard .dolgraph à largeur fixe 400px qui
   débordent leur conteneur (153px) ; (2) les tables dashboard table.noborder en table-layout:auto
   dont les libellés ne reviennent pas à la ligne → ~684px. Résultat : scrollWidth ~917px. */

/* 1. Graphiques responsives : ne dépassent plus la largeur dispo */
.dolgraph,
.dolgraph > div,
.dolgraph svg,
.dolgraph canvas {
max-width: 100% !important;
}
.dolgraph svg,
.dolgraph canvas {
height: auto !important;
}

/* 2. Colonnes dashboard + conteneur fiche : bornés à la largeur dispo */
body.rail-v-mode div.fichecenter,
body.rail-v-mode .fichethirdleft,
body.rail-v-mode .fichetwothirdright,
body.rail-v-mode .fichehalfleft,
body.rail-v-mode .fichehalfright {
max-width: 100% !important;
width: auto !important;
box-sizing: border-box !important;
}

/* 3. Tables dashboard : libellés qui reviennent à la ligne → la table tient dans le viewport
   au lieu de pousser toute la page horizontalement. */
body.rail-v-mode div.fiche table.noborder {
max-width: 100% !important;
}
body.rail-v-mode div.fiche table.noborder td {
white-space: normal !important;
word-break: break-word !important;
}

/* 4. Filet de sécurité : on coupe le scroll horizontal de PAGE. Indispensable pour
   - le tiroir off-canvas #tododoli-drawer (position:fixed translaté +361px hors écran) qui
     étendait la zone scrollable ; il reste pleinement fonctionnel (il glisse en vue via JS),
   - les graphiques SVG à largeur fixe (500px, sans viewBox → max-width sans effet).
   N'affecte PAS le flyout rail-v ni le bloc header (dans le viewport ou en position:fixed). */
html, body {
overflow-x: hidden !important;
max-width: 100% !important;
}

/* 5. Lecture des tableaux/vues larges : la PAGE reste verrouillée (§4, pas de scroll
   horizontal parasite), mais le contenu de fiche défile horizontalement DANS sa propre zone.
   Problème corrigé : la table de layout Dolibarr (table.notopnoleftnoright = rail 54px + cellule
   contenu) prenait la largeur de son contenu (table liste ~788px → total ~875px). Tout ce qui
   dépassait le viewport (370px) était coupé par overflow-x:hidden et donc ILLISIBLE : colonnes de
   droite des listes (Ville, CP, Pays, Téléphone...), bouton « Autres critères », chiffres des
   blocs statistiques de l'accueil. DataTables responsive ne se repliait pas car son conteneur
   n'était pas borné au viewport.
   Solution : borner la table de layout au viewport (table-layout:fixed + width 100%) pour que la
   cellule contenu cesse de grossir, puis rendre div.fiche scrollable en X. Le contenu large
   (listes, dashboard) se lit en glissant le tableau, sans réintroduire de scroll de page. */
/* IMPORTANT : scope au « > » (table de layout EXTERNE = enfant direct de body, celle rail+contenu).
   Sans le « > », la règle touchait aussi les table.notopnoleftnoright INTERNES (barre de titre dans
   div.fiche) → table-layout:fixed écrasait la cellule du titre « Liste des tiers » (tronqué). */
body.rail-v-mode > table.notopnoleftnoright {
width: 100% !important;
max-width: 100vw !important;
table-layout: fixed !important;
}
body.rail-v-mode > table.notopnoleftnoright > tbody > tr > td:last-child {
max-width: 100% !important;
width: auto !important;
overflow: hidden !important;
}
body.rail-v-mode div.fiche {
overflow-x: auto !important;
max-width: 100% !important;
-webkit-overflow-scrolling: touch !important;
}
/* Listes DataTables : en rail-v <=1024px, le JS (doli_dataTable.js) désactive responsive + autoWidth.
   On force la table à sa largeur de contenu pour qu'elle déborde div.fiche et se lise en glissant
   horizontalement. SUR SMARTPHONE on NE fige PAS de colonne (elle mangerait l'écran, peu de scroll
   restant) — le figement est réservé à la tablette (bloc @media 768-1024px plus bas). */
body.rail-v-mode div.fiche table.dataTable {
width: max-content !important;
min-width: 100% !important;
}
}

/* MENU HAUT (hors rail-v) : même bornage de la table de layout au viewport. Sans lui, une liste large
   élargissait la cellule contenu → scroll horizontal de PAGE, barre d'onglets étirée, et le responsive
   DataTables (qui mesure son conteneur) ne repliait aucune colonne (devis/factures à 1024px). La
   zone de défilement des listes est portée par body.dp-list-scroll (bloc plus bas). */
body:not(.rail-v-mode) > table.notopnoleftnoright {
width: 100% !important;
max-width: 100vw !important;
table-layout: fixed !important;
}
/* Barre « Plus de filtres » des listes : héritait du nowrap des titres de liste → une seule ligne
   de 1470px sur devis/factures. Elle passe à la ligne comme les onglets. */
#morefilters td.morefilters {
white-space: normal !important;
}

/* ============================================================
   RAIL-V TACTILE (smartphone + TABLETTE) — défilement du rail + sous-menus en TIROIR vertical
   ⚠ Gardé par body.rail-v-touch (posé par le JS doliplusMenu.lib.php quand rail-v actif ET dpTouch),
   ET NON PLUS par @media (max-width:767px) → s'applique à TOUT appareil tactile quelle que soit la
   largeur (smartphone ET tablette). La SOURIS (PC) ne reçoit pas ce bloc → elle garde le FLYOUT
   2 niveaux d'origine. (Source de vérité UNIQUE : même discriminant dpTouch côté JS et côté CSS,
   pour éviter qu'un appareil hybride tactile soit traité « tablette » en JS mais « PC » en CSS.)
   Résout l'équation « flyout qui doit déborder » VS « scroller un menu trop haut » :
   on ne peut pas avoir overflow-x:visible (flyout) ET overflow-y:auto (scroll) sur le même
   élément (dès qu'un axe n'est pas visible, l'autre clippe). Choix tactile :
     - le rail passe en overflow-y:auto → SCROLL TACTILE NATIF d'un menu plus haut que l'écran ;
     - du coup le flyout latéral (qui débordait) est désactivé → les sous-menus s'ouvrent dans
       le tiroir vertical plein écran .cd-panel (cf. JS doliplusMenu.lib.php, branche dpTouch) ;
     - le NOM d'une icône s'obtient par le SCRUB au doigt (bulle .rail-name-bubble).
   Souris (PC) : inchangé (survol + flyout 2 niveaux + zones de scroll conservés).
   Migré le 27/06/2026 (extension smartphone → tablette, discriminant tactile vs souris).
   ============================================================ */
/* Le <td> du rail RESTE DANS LE FLUX = colonne 44px normale du tableau de layout.
   ⚠ NE PAS mettre le <td> en position:fixed : le tableau réserve quand même sa colonne →
   colonne fantôme (bande vide de ~140px entre le rail et le contenu). Bug vu le 26/06/2026. */
body.rail-v-touch td.vmenu.rail-v {
position: relative !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
padding: 0 !important;
overflow: visible !important;
background: var(--dp-deep, #333333) !important;
}
/* C'est le CONTENU (#menu_v, le <ul> des icônes) qu'on épingle et qu'on rend défilable.
   En fixed il sort du flux → le <td> n'a plus de contenu en flux mais garde sa largeur 44px
   (colonne réservée proprement, sans bande vide). Le rail reste visible et scrollable. */
body.rail-v-touch td.vmenu.rail-v #menu_v {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 44px !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
z-index: 160 !important;
/* fond plein opaque : le contenu de page qui passe dessous au scroll ne transparaît pas */
background: var(--dp-deep, #333333) !important;
scrollbar-width: none !important;
}
body.rail-v-touch td.vmenu.rail-v #menu_v::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
/* Zones de scroll au survol (desktop) inutiles au doigt → masquées (on a le scroll natif) */
body.rail-v-touch #rail-scroll-up, body.rail-v-touch #rail-scroll-down { display: none !important; }
/* Tactile : le rail n'affiche JAMAIS de flyout latéral ni de colonne label, QUEL QUE SOIT l'état
   (le :hover déclenché par le doigt pendant le scrub faisait apparaître « l'ancien panel »). Le
   sous-menu passe par le tiroir vertical plein écran, le nom par le scrub. La copie du sous-menu vit
   dans .cd-panel-content (HORS #menu_v) → non affectée par cette règle. */
body.rail-v-touch td.vmenu.rail-v #menu_v ul {
display: none !important;
}
/* L'icône reste centrée dans ses 44px à tout état (pas d'expansion en colonne label 150px) */
body.rail-v-touch td.vmenu.rail-v #menu_v > li > a,
body.rail-v-touch td.vmenu.rail-v #menu_v > li:hover > a,
body.rail-v-touch td.vmenu.rail-v #menu_v > li.rail-tap-open > a {
position: static !important;
width: 44px !important;
max-width: 44px !important;
min-height: 36px !important;
padding-left: 4px !important;
padding-right: 4px !important;
justify-content: center !important;
background: none !important;
border: 0 !important;
}
body.rail-v-touch td.vmenu.rail-v #menu_v > li > a > span {
display: none !important;
}
/* ENCRE des boutons de tête du rail TACTILE (loupe de recherche, toggle rail).
   Ces deux-là sont des glyphes FA posés en `::before { color: inherit }` : ils prenaient donc
   l'encre du THÈME — foncée en variante claire — alors que le rail tactile est peint sur
   --dp-deep, foncé dans les DEUX variantes (cf. règles #menu_v ci-dessus). Résultat mesuré le
   01/09/2026 sur smartphone : #26241F sur #0A1428 = 1,1:1, la loupe au-dessus d'« Accueil »
   était invisible. Les autres icônes du rail y échappent : elles portent une couleur inline
   par module (fa-home #5194d6, fa-building #51d689…).
   Encre = --dp-deep-on, le pendant CLAIR de --dp-deep (repli = sa valeur, pour les instances
   sans cloudtheme). Scope body.rail-v-touch volontaire : le rail SOURIS garde, lui, le fond
   du thème (--dp-bg) et doit conserver l'encre foncée. */
body.rail-v-touch td.vmenu.rail-v #menu_v > li.menu-rail-btn > a,
body.rail-v-touch td.vmenu.rail-v #menu_v > li.menu-rail-btn .iconmenu,
body.rail-v-touch td.vmenu.rail-v #menu_v > li.menu-rail-btn .iconmenu::before {
color: var(--dp-deep-on, #e8eaed) !important;
}

/* Le tiroir des sous-menus s'ouvre À DROITE du rail fixe (44px), sinon sa bordure gauche et les
   premiers caractères des libellés passent SOUS le rail et sont rognés (« nques » au lieu de
   « Banques »). Bug vu le 26/06/2026. Décalage = largeur rail + petite marge. */
body.rail-v-touch .cd-panel-container {
left: 52px !important;
}

/* Sous-menu déporté dans le tiroir .cd-panel : liste plein écran, lisible et scrollable.
   (.cd-panel-content gère déjà fond/texte via tokens — on ajoute la mise en liste.) */
body.rail-v-touch .cd-panel-content .rail-drawer-title {
font-size: 16px !important;
font-weight: 700 !important;
padding: 14px 16px 10px !important;
border-bottom: 1px solid var(--dp-border, #e0e6ed) !important;
}
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu,
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu li {
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-shadow: none !important;
}
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu a {
display: block !important;
padding: 13px 16px !important;
font-size: 14px !important;
text-decoration: none !important;
border-bottom: 1px solid var(--dp-border, #e0e6ed) !important;
background: none !important;
white-space: normal !important;
}
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu a:active {
background: var(--dp-bg-hover, rgba(127,127,127,.15)) !important;
}
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu span { display: inline !important; }
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu .iconmenu {
width: 18px !important;
height: 18px !important;
margin-right: 10px !important;
vertical-align: middle !important;
display: inline-block !important;
}
/* ---- HIÉRARCHIE 2 NIVEAUX dans le tiroir ----
   Sans distinction visuelle, niveau 1 et niveau 2 paraissaient « à plat » (même gras, même taille,
   seul un léger retrait). On donne au NIVEAU 1 un look d'EN-TÊTE de section, au NIVEAU 2 un look
   d'item normal (indenté, atténué). */
/* Niveau 1 = en-tête de section : gras, fond légèrement teinté, filet d'accent à gauche */
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu > li > a {
font-weight: 700 !important;
font-size: 14px !important;
padding: 13px 16px !important;
background: var(--dp-bg-hover, rgba(127,127,127,.06)) !important;
border-left: 3px solid var(--dp-border, #e0e6ed) !important;
}
/* Niveau 2 (et au-delà) = items : poids normal, plus petits, indentés, légèrement atténués */
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu > li > ul a {
font-weight: 400 !important;
font-size: 13px !important;
padding-left: 34px !important;
background: none !important;
border-left: 0 !important;
opacity: 0.92;
}
/* Méga-menus (Configuration : .mm-mega) : neutraliser le layout en colonnes → simple liste verticale */
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu .mm-mega,
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu .mm-mega li,
body.rail-v-touch .cd-panel-content ul.rail-drawer-menu .mm-mega ul {
display: block !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
float: none !important;
margin: 0 !important;
box-shadow: none !important;
}

/* ============================================================
   RAIL-V SUR TABLETTE (768–1280px) — défilement horizontal des listes AVEC colonne de réf figée.
   Même principe que smartphone (page bornée au viewport, table à largeur naturelle qui défile dans
   div.fiche), mais l'écran est assez large pour FIGER UNE colonne (la référence = « Société », 2e
   colonne après la case à cocher) → l'identité de ligne reste visible en lisant à droite.
   Seuil 1280px : couvre le 10" en portrait ET en paysage. Sur smartphone (<768px) on ne fige pas.
   NB : on n'utilise PAS FixedColumns (incompatible colReorder+serverSide → plante) ; figement en
   position:sticky pur CSS. La case à cocher (1re colonne) n'est PAS figée et défile normalement.
   ============================================================ */
/* Deux classes posées par le JS (doli_dataTable.js), seulement quand la page porte une liste :
   - body.dp-list-scroll : zone de défilement (bornage, overflow, en-tête figé). D'OFFICE dès 768px,
     menu haut comme rail-v. Le repli responsive cachait dans le « + » des colonnes que l'utilisateur
     avait cochées (services nw1 : Vente et Achat, 7 colonnes sur 18 à 1280px — 13/10/2026) ;
   - body.dp-freeze-col : en plus, 1re colonne figée, si l'utilisateur active « Figer la 1re colonne »
     (bouton barre d'outils, mémorisé par liste/par user via la préf <code_pref>_FREEZECOL).
   Sur smartphone (<768px) aucune n'est posée → défilement sans figement (bloc @media ≤767).
   NB : on n'utilise PAS FixedColumns (incompatible colReorder+serverSide → plante) ; figement en
   position:sticky pur CSS. La 1re colonne (position 0) est figée ; on choisit laquelle via colReorder. */
/* Bornage de la page + défilement de la zone de fiche. Scope au « > » : table de layout EXTERNE
   (enfant direct de body) uniquement, sinon table-layout:fixed écrase la barre de titre interne. */
body.dp-list-scroll > table.notopnoleftnoright {
width: 100% !important;
max-width: 100vw !important;
table-layout: fixed !important;
}
body.dp-list-scroll > table.notopnoleftnoright > tbody > tr > td:last-child {
max-width: 100% !important;
width: auto !important;
overflow: hidden !important;
}
html:has(body.dp-list-scroll),
body.dp-list-scroll {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* La cellule des boutons d'action du titre est sticky right:405px (offset calibré DESKTOP) + fond
   opaque + z-index:10 → en mode figé étroit elle se décale sur le titre « Liste des tiers » et le
   RECOUVRE. On la remet en static (le reset desktop d'origine ne vaut que >1280 sans cette classe). */
body.dp-list-scroll div.fiche > table.notopnoleftnoright > tbody > tr:first-child > td[align="right"] {
position: static !important;
right: auto !important;
}
/* div.fiche = ZONE DE DÉFILEMENT 2D bornée : overflow auto sur les 2 axes + max-height. Indispensable
   pour que position:sticky marche À LA FOIS en X (réf figée) et en Y (en-tête figé) — un sticky relatif
   au viewport ne marcherait pas car l'overflow casse le sticking.
   ⚠ max-height = 100vh moins la barre du haut (toggles/logo) ~ 96px — à CALER si besoin. */
body.dp-list-scroll div.fiche {
overflow: auto !important;
max-width: 100% !important;
max-height: calc(100vh - 96px) !important;
-webkit-overflow-scrolling: touch !important;
/* padding-top à 0 : sinon un filet (≈6px) au-dessus de l'en-tête figé laisse voir les lignes qui
   défilent « par-dessus » avant de passer dessous. À 0, le contenu disparaît net sous l'en-tête. */
padding-top: 0 !important;
}
/* Barres de défilement TOUJOURS visibles dans la zone figée. Sinon, en barres "overlay" (0px,
   masquées hors interaction), la barre HORIZONTALE est invisible → l'utilisateur croit qu'il n'y a
   "plus de scroll horizontal". On force une barre classique avec une pastille bien visible. */
body.dp-list-scroll div.fiche {
scrollbar-width: auto !important;
}
body.dp-list-scroll div.fiche::-webkit-scrollbar {
width: 12px !important;
height: 12px !important;
}
body.dp-list-scroll div.fiche::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.35) !important;
border-radius: 6px !important;
}
body.dp-list-scroll div.fiche::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.07) !important;
}
body.dp-list-scroll div.fiche table.dataTable {
width: max-content !important;
min-width: 100% !important;
}
/* UNE colonne figée = la 1re colonne (position 0). Collée au bord gauche ; largeur plafonnée
   (ellipsis). Fond opaque pour masquer le contenu qui défile dessous, ombre séparatrice à droite.
   La ligne de FILTRES de l'en-tête est faite de <td> (pas de <th>) : sans le 2e sélecteur, le filtre
   de la colonne figée défilait hors de l'écran alors que son titre et ses lignes restaient (11/10/2026). */
body.dp-freeze-col div.fiche table.dataTable > thead > tr > th:nth-child(1),
body.dp-freeze-col div.fiche table.dataTable > thead > tr > td:nth-child(1),
body.dp-freeze-col div.fiche table.dataTable > tbody > tr > td:nth-child(1) {
position: sticky !important;
left: 0 !important;
max-width: 280px !important;
z-index: 2;
background-color: var(--dp-surface, #f5f5f5) !important;
box-shadow: 2px 0 5px rgba(0,0,0,0.15);
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* EN-TÊTE figé verticalement : position:sticky sur le <thead> → titres ET ligne de filtres restent
   en haut. PAS l'extension FixedHeader (se désaligne au scroll horizontal). Fond opaque sur les th. */
body.dp-list-scroll div.fiche table.dataTable > thead {
position: sticky !important;
top: 0 !important;
z-index: 3;
}
body.dp-list-scroll div.fiche table.dataTable > thead th,
body.dp-list-scroll div.fiche table.dataTable > thead td {
background-color: var(--dp-surface, #f5f5f5) !important;
}
/* Ligne de TITRES de colonnes : trop tassée (~12px). On la rehausse → plus lisible et masque mieux
   le contenu qui défile dessous. */
body.dp-list-scroll div.fiche table.dataTable > thead > tr:first-child > th {
padding-top: 9px !important;
padding-bottom: 9px !important;
vertical-align: middle !important;
}
/* Coin haut-gauche = intersection en-tête figé × colonne figée : au-dessus des deux. */
body.dp-freeze-col div.fiche table.dataTable > thead > tr > th:nth-child(1),
body.dp-freeze-col div.fiche table.dataTable > thead > tr > td:nth-child(1) {
z-index: 4;
}

/* --- RAIL-V : zones de scroll par hover souris --- */
#rail-scroll-up,
#rail-scroll-down {
display: none;
position: fixed;
left: 0;
width: 44px;
z-index: 9997;
height: 48px;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
opacity: 0;
pointer-events: none;
}
body.rail-v-mode #rail-scroll-up,
body.rail-v-mode #rail-scroll-down {
display: flex;
}
#rail-scroll-up {
top: 0;
cursor: n-resize;
background: linear-gradient(to bottom, #333333dd, transparent);
}
#rail-scroll-down {
bottom: 0;
cursor: s-resize;
background: linear-gradient(to top, #333333dd, transparent);
}
#rail-scroll-up i,
#rail-scroll-down i {
color: #FFFFFF;
font-size: 11px;
opacity: 0.9;
}

/* --- Popup calendrier (jQuery UI datepicker) — ticket #3909 ------------------
 * Deux defauts corriges ici, visibles sur TOUS les select_date() du produit
 * (filtres des listes et champs date : commandes clients, commandes
 * fournisseurs, factures...).
 *
 * 1. Largeur. Le theme smoothness fixe « .ui-datepicker { width: 17em } »,
 *    soit 204px, calibres pour 7 colonnes. select_date() active showWeek:true
 *    (colonne « Semaine » => 8 colonnes) et le tableau interne reclame ~294px :
 *    il debordait du cadre du popup (overflow visible), les colonnes de fin de
 *    semaine sortant de la boite blanche. Effet de bord : jQuery UI borne le
 *    popup a la fenetre d'apres la largeur du CONTENEUR (204px) et non de son
 *    contenu, donc sur un champ situe a droite de l'ecran la fin de semaine
 *    passait carrement hors ecran. width:auto laisse le conteneur suivre son
 *    tableau et retablit du meme coup le repositionnement automatique.
 *
 * 2. Empilement. jQuery UI pose un z-index INLINE valant « z-index de l'input
 *    + 1 », soit 1 en pratique. Les onglets flottants DoliPlus (#chat-tab 1002,
 *    #tododoli-tab 999, #tododoli-drawer 998) passaient donc DEVANT le
 *    calendrier et le recouvraient. Le !important est indispensable : la valeur
 *    1 est posee en inline par la lib.
 */
#ui-datepicker-div.ui-datepicker {
width: auto;
min-width: 17em;
z-index: 1100 !important;
}