/* =================================================================
   THÈME DU CRM — feuille principale de l'habillage
   -----------------------------------------------------------------
   SEULE feuille maison de base du CRM depuis le 12/11/2026 :
     PARTIE 1 — SOCLE : l'ancien main.css (Bootstrap + template ProUI
                retouché + couche v2), expose les jetons --ln-*, --crm-*, --cc-* ;
     PARTIE 2 — THÈME : remappe ces jetons sur une palette unique (--t3-*)
                et habille chaque écran. Trois ambiances + mode sombre.
   La partie 2 ne s'applique que sous body.t3 (pas sur login.php).

   Classes posées sur <body> par inc/theme.php : "t3" (thème actif),
   "t3-azur|t3-espana|t3-menthe" (ambiance), "v2-dark" (mode sombre).
   Pages sans thème : liste dans inc/theme.php (login.php).

   Avant toute retouche, poser un instantané HORS du site :
       ~/sauvegardes_sib/theme_instantanes/
   Historique du portage et correctifs déjà résolus :
       ~/sauvegardes_sib/theme_docs/

   12/11/2026 : renommée (theme-v3.css → theme.css) ; règles visant
   des écrans d'un autre CRM retirées (offres, liasse, suivi de
   dossier, frise des statuts, tableaux surfaces/luminaires…).
   ================================================================= */

/* #################################################################
   PARTIE 1 — SOCLE (ancien css/main.css, fusionné le 12/11/2026)
   ################################################################# */

/*
 *  Document   : main.css
 *  Author     : pixelcave
 *  Description: The main stylesheet of the template
 *
 *  Structure (with shortcodes):
 *      (#m01mls) MAIN LAYOUT
 *      (#m02hds) HEADER
 *      (#m03sns) SIDEBAR/NAVIGATION
 *      (#m04mcs) MAIN CONTENT
 *      (#m05pgs) PAGES
 *      (#m06bos) BOOTSTRAP OVERWRITE/EXTEND STYLES
 *      (#m07hes) HELPERS
 *      (#m08ths) THEMES
 *      (#m09res) RESPONSIVE
 *      (#m10rts) RETINA
 *      (#m11prs) PRINT
 */

/*
=================================================================
(#m01mls) MAIN LAYOUT
=================================================================
*/

/* Include Inter font from Google Web Fonts (loaded via template_start.php, fallback @import) */
/* Police : auto-hébergée, voir css/fonts-locales.css (11/11/2026) — l'@import vers Google bloquait l'affichage tant que Google ne répondait pas */

/* Preloader */
#page-wrapper.page-loading {
    overflow: hidden;
}

#page-wrapper.page-loading .preloader {
    display: block;
}

#page-wrapper.page-loading #page-container {
    opacity: 0;
}

.preloader {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333333;
    z-index: 99999;
}

.preloader .inner {
    position: fixed;
    top: 20%;
    left: 50%;
    margin: 0 0 0 -50px;
    width: 100px;
    height: 100px;
    text-align: center;
}

.preloader-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid transparent;
    border-left-color: #ffffff;
    border-right-color: #ffffff;
    border-top-color: #ffffff;
    border-radius: 50%;
    -webkit-animation: nprogress-spinner .4s linear infinite;
    -moz-animation: nprogress-spinner .4s linear infinite;
    -ms-animation: nprogress-spinner .4s linear infinite;
    -o-animation: nprogress-spinner .4s linear infinite;
    animation: nprogress-spinner .4s linear infinite;
}

.preloader-spinner {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-width: 3px;
}

/* Main Structure */
body {
    font-family: "Inter", "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1e293b;
    font-size: 13px;
    background-color: #0f172a;
}

#page-container,
#main-container,
#page-content + footer {
    min-width: 320px;
}

#page-container {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    overflow-x: hidden;
    -webkit-transition: background-color 0.2s ease-out, opacity 0.3s ease-out;
    transition: background-color 0.2s ease-out, opacity 0.3s ease-out;
}

#sidebar,
#sidebar-alt {
    background-color: transparent;
}

#sidebar,
#sidebar-alt {
    width: 0;
    position: absolute;
    overflow: hidden;
}

#sidebar-alt {
    right: 0;
}

#sidebar,
#sidebar-alt,
#main-container,
.header-fixed-top header,
.header-fixed-bottom header,
.footer-fixed #page-content + footer {
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#page-content {
    padding: 10px 5px 1px;
    background-color: transparent;
    min-height:1000px;
}

#page-content + footer {
    padding: 9px 10px;
    font-size: 11px;
    background-color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: #475569;
    -webkit-backdrop-filter: blur(10px);}

/* Fixed Header */
#page-container.header-fixed-top {
    padding: 50px 0 0;
}

#page-container.header-fixed-bottom {
    padding: 0 0 50px;
}

/* Sidebar + Static Header */
.sidebar-visible-xs #sidebar {
    width: 200px;
}

.sidebar-visible-xs #main-container {
    margin-left: 200px;
    margin-right: -200px;
}

/* Sidebar + Fixed Header */
.header-fixed-top #sidebar,
.header-fixed-bottom #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}

.header-fixed-top .sidebar-content,
.header-fixed-bottom .sidebar-content {
    padding-bottom: 50px;
}

.sidebar-visible-xs.header-fixed-top header.navbar-fixed-top,
.sidebar-visible-xs.header-fixed-bottom header.navbar-fixed-bottom {
    left: 200px;
    right: -200px;
}

/* Alternative Sidebar + Static Header */
.sidebar-alt-visible-xs #sidebar-alt {
    width: 200px;
}

.sidebar-alt-visible-xs #main-container {
    margin-right: 200px;
    margin-left: -200px;
}

/* Alternative Sidebar + Fixed Header */
.header-fixed-top #sidebar-alt,
.header-fixed-bottom #sidebar-alt {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
}

.sidebar-alt-visible-xs.header-fixed-top header.navbar-fixed-top,
.sidebar-alt-visible-xs.header-fixed-bottom header.navbar-fixed-bottom {
    right: 200px;
    left: -200px;
}

/* Fixed Footer */
.footer-fixed #page-content + footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

.footer-fixed #page-content {
    padding-bottom: 41px;
}

.footer-fixed.sidebar-visible-xs #page-content + footer {
    right: -200px;
    left: 200px;
}

.footer-fixed.sidebar-alt-visible-xs #page-content + footer {
    right: 200px;
    left: -200px;
}

.footer-fixed.header-fixed-bottom #page-content + footer {
    bottom: 50px;
}

/*
=================================================================
(#m02hds) HEADER
=================================================================
*/

header.navbar-default,
header.navbar-inverse {
    padding: 0;
    margin: 0;
    min-width: 320px;
    border: none;
}

header.navbar-default.navbar-fixed-bottom {
    border-top: 1px solid #eaedf1;
}

header.navbar-inverse.navbar-fixed-bottom {
    border-top: 1px solid #394263;
}

/* Header Nav */
.navbar-default .navbar-nav > li > a {
    color: #394263;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #1bbae1;
}

.navbar-inverse .collapse.in .navbar-nav .open .dropdown-menu > li > a {
    color: #dddddd;
}

.nav.navbar-nav-custom {
    float: left;
    margin: 0;
}

.nav.navbar-nav-custom > li {
    min-height: 50px;
    float: left;
}

.nav.navbar-nav-custom > li > a {
    min-width: 50px;
    padding: 5px 7px;
    line-height: 40px;
    text-align: center;
    color: #394263;
    position: relative;
}

.nav.navbar-nav-custom > li > a .gi,
.nav.navbar-nav-custom > li > a .hi,
.nav.navbar-nav-custom > li > a .si,
.nav.navbar-nav-custom > li > a .fi {
    margin-top: -3px;
}

.nav.navbar-nav-custom > li > a .label-indicator {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0;
    font-weight: 600;
}

.navbar-fixed-bottom .nav.navbar-nav-custom > li > a .label-indicator {
    top: auto;
    bottom: 0;
}

.navbar-inverse .nav.navbar-nav-custom > li > a {
    color: #ffffff;
}

.nav.navbar-nav-custom > li.open > a,
.nav.navbar-nav-custom > li > a:hover,
.nav.navbar-nav-custom > li > a:focus {
    background-color: #1bbae1;
    color: #ffffff;
}

.nav.navbar-nav-custom > li > a > img {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 20px;
    vertical-align: top;
}

/* Header Search */
.navbar-form {
    margin: 7px 0;
}

.collapsing .navbar-form,
.collapse.in .navbar-form {
    margin-left: -15px;
    margin-right: -15px;
}

.collapsing .navbar-form .form-group,
.collapse.in .navbar-form .form-group {
    margin-bottom: 0;
}

/*
=================================================================
(#m03sns) SIDEBAR/NAVIGATION
=================================================================
*/

/* Sidebar Content */
.sidebar-content {
    width: 200px;
    /* Fix couleur mode light - couleur sombre par défaut */
    color: #334155;
    /* Flexbox pour tous les écrans - fix responsive */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sidebar-section {
    padding: 10px;
}

/* Fix responsive - Sidebar et Sidebar Scroll pour tous les écrans */
#sidebar,
#sidebar-alt {
    height: 100%;
}

#sidebar-scroll,
#sidebar-alt-scroll {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-scroll > .sidebar-content,
#sidebar-alt-scroll > .sidebar-content {
    height: 100%;
    min-height: 0;
    flex: 1;
}

/* Sidebar Brand + Title */
.sidebar-brand {
    /* Fix responsive - hauteur auto pour s'adapter au contenu */
    height: auto;
    min-height: 50px;
    line-height: 1.4;
    padding: 10px;
    margin: 0;
    font-weight: 300;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fix couleur mode light - couleur sombre par défaut */
    color: #1e3a5f;
    background: url('../img/template/ie8_opacity_dark_15.png') repeat;
    background: rgba(0, 0, 0, 0.15);
    /* Fix positionnement - ordre flex pour tous les écrans */
    order: 1;
    flex-shrink: 0;
}

a.sidebar-brand:hover,
a.sidebar-brand:focus {
    background-color: #1bbae1;
    color: #ffffff;
    text-decoration: none;
}

.sidebar-brand i {
    font-size: 14px;
    display: inline-block;
    width: 18px;
    text-align: center;
    margin-right: 10px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

/* Fix responsive - Contrôle de la taille de l'image du logo */
.sidebar-brand img {
    max-width: 100%;
    height: auto !important; /* Override inline style */
    max-height: 80px;
    object-fit: contain;
}

/* Sur petits écrans, logo plus petit */
@media screen and (max-width: 991px) {
    .sidebar-brand img {
        max-height: 60px;
    }
    
    .sidebar-brand {
        padding: 8px;
    }
}

/* Sur très petits écrans, logo encore plus petit */
@media screen and (max-width: 575px) {
    .sidebar-brand img {
        max-height: 50px;
    }
}

/* Sidebar User */
.sidebar-user {
    padding-left: 88px;
    background: url('../img/template/ie8_opacity_light_10.png') repeat;
    background: rgba(255, 255, 255, 0.1);
    /* Fix positionnement - ordre flex pour tous les écrans */
    order: 3;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.sidebar-user-avatar {
    width: 68px;
    height: 68px;
    float: left;
    padding: 2px;
    margin-left: -78px;
    border-radius: 34px;
    background: url('../img/template/ie8_opacity_light_75.png') repeat;
    background: rgba(255, 255, 255, 0.75);
}

.sidebar-user-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 32px;
}

.sidebar-user-name {
    font-size: 17px;
    font-weight: 300;
    margin-top: 10px;
    line-height: 26px;
    /* Fix couleur mode light - appliqué à tous les écrans */
    color: #1e293b;
}

.sidebar-user-links a {
    /* Fix couleur mode light - appliqué à tous les écrans */
    color: #475569;
    opacity: 0.6;
    filter: alpha(opacity=60);
    margin-right: 5px;
}

.sidebar-user-links a:hover,
.sidebar-user-links a:focus {
    color: #475569;
    text-decoration: none;
    opacity: 1;
    filter: alpha(opacity=100);
}

.sidebar-user-links a > i {
    font-size: 14px;
}

/* Sidebar Navigation */
.sidebar-nav {
    list-style: none;
    margin: 0;
    /* Padding moderne pour tous les écrans */
    padding: 10px 10px 8px;
    /* Fix responsive - ordre et overflow pour tous les écrans */
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav .sidebar-header:first-child {
    margin-top: 0;
}

.sidebar-nav a {
    display: block;
    /* Fix couleur mode light - couleur sombre par défaut */
    color: #334155;
    padding: 0 10px;
    min-height: 35px;
    line-height: 35px;
    /* Styles modernes pour tous les écrans */
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 2px;
}

.sidebar-nav a:hover,
.sidebar-nav a:focus,
.sidebar-nav a.open,
.sidebar-nav li.active > a {
    /* Fix couleur mode light - couleur sombre au survol */
    color: #1e3a5f;
    text-decoration: none;
    /* Styles modernes pour tous les écrans */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
    transform: translateX(2px);
}

.sidebar-nav a.active {
    /* Style moderne pour tous les écrans */
    color: #1d4ed8;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-left: 3px solid #3b82f6;
    padding-left: 11px;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sidebar-nav a > .sidebar-nav-icon {
    margin-right: 10px;
}

.sidebar-nav a > .sidebar-nav-indicator {
    float: right;
    line-height: inherit;
    margin-left: 4px;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.sidebar-nav a > .sidebar-nav-icon,
.sidebar-nav a > .sidebar-nav-indicator {
    display: inline-block;
    /* Opacité améliorée pour meilleure visibilité */
    opacity: 0.85;
    filter: alpha(opacity=85);
    width: 18px;
    font-size: 14px;
    text-align: center;
}

.sidebar-nav a:hover,
.sidebar-nav a:hover > .sidebar-nav-icon,
.sidebar-nav a:hover > .sidebar-nav-indicator,
.sidebar-nav a.active,
.sidebar-nav a.active > .sidebar-nav-icon,
.sidebar-nav a.active > .sidebar-nav-indicator,
.sidebar-nav a.open,
.sidebar-nav a.open > .sidebar-nav-icon,
.sidebar-nav a.open > .sidebar-nav-indicator,
.sidebar-nav li.active > a,
.sidebar-nav li.active > a > .sidebar-nav-icon,
.sidebar-nav li.active > a > .sidebar-nav-indicator {
    opacity: 1;
    filter: alpha(opacity=100);
}

.sidebar-nav a.active > .sidebar-nav-indicator,
.sidebar-nav a.open > .sidebar-nav-indicator,
.sidebar-nav li.active > a > .sidebar-nav-indicator {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    /* Styles modernes pour tous les écrans */
    margin-top: 2px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
}

.sidebar-nav li.active > ul {
    display: block;
}

.sidebar-nav ul a {
    margin: 0;
    font-size: 12px;
    padding-left: 15px;
    min-height: 32px;
    line-height: 32px;
}

.sidebar-nav ul a.active,
.sidebar-nav ul a.active:hover {
    /* Style moderne pour tous les écrans */
    color: #1d4ed8;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-left: 3px solid #3b82f6;
    padding-left: 11px;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sidebar-nav ul ul {
    /* Styles modernes pour tous les écrans */
    background: rgba(0, 0, 0, 0.05);
}

.sidebar-nav ul ul a {
    padding-left: 25px;
}

.sidebar-nav ul ul a.active,
.sidebar-nav ul ul a.active:hover {
    padding-left: 20px;
}

/* Sidebar Header */
.sidebar-header {
    margin: 10px 0 0;
    /* Styles modernes pour tous les écrans */
    padding: 10px 12px 8px;
    line-height: 12px;
}

.sidebar-header + .sidebar-section {
    padding-top: 0px;
    padding-bottom: 0px;
}

.sidebar-header .sidebar-header-title {
    /* Styles modernes pour tous les écrans */
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.85;
    filter: alpha(opacity=85);
    letter-spacing: 0.08em;
}

.sidebar-header-options {
    float: right;
    display: inline-block;
}

.sidebar-header-options > a,
.sidebar-nav .sidebar-header-options a {
    float: right;
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: inherit;
    display: block;
    min-width: 18px;
    text-align: center;
    color: #ffffff;
    /* Opacité améliorée pour tous les écrans */
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.sidebar-header-options a.active,
.sidebar-header-options a:hover,
.sidebar-header-options a:focus,
.sidebar-nav .sidebar-header-options a.active,
.sidebar-nav .sidebar-header-options a:hover,
.sidebar-nav .sidebar-header-options a:focus {
    background: none;
    color: #ffffff;
    opacity: 1;
    filter: alpha(opacity=100);
}

.sidebar-header-options a > i {
    font-size: 14px;
}

/*
=================================================================
(#m04mcs) MAIN CONTENT
=================================================================
*/

/* Content Header */
.content-header {
    background-color: #ffffff;
    border-top: 1px solid #eaedf1;
    border-bottom: 1px solid #dbe1e8;
}

.content-header h1,
.content-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
}

.content-header small
.content-header small{
    font-size: 17px;
}

.content-header {
    margin: -10px -5px 10px;
}

/* Blocks */
.block {
    margin: 0 0 10px;
    padding: 20px 15px 1px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.block-title {
    margin: -20px -15px 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.block-title h1,
.block-title h2,
.block-title h3,
.block-title h4,
.block-title h5,
.block-title h6 {
    display: inline-block;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 10px 16px 7px;
    font-weight: normal;
}

.block-title h1,
.block-title h2,
.block-title h3 {
    padding-left: 15px;
    padding-right: 15px;
}

.block-title .nav-tabs,
.block-options {
    min-height: 40px;
    line-height: 38px;
}

.block-title .nav-tabs {
    padding: 3px 1px 0;
    border-bottom: none;
}

.block-title .nav-tabs > li > a {
    margin-bottom: 0;
}

.block-title .nav-tabs > li > a:hover {
    background: none;
}

.block-title .nav-tabs > li.active > a,
.block-title .nav-tabs > li.active > a:hover,
.block-title .nav-tabs > li.active > a:focus {
    border: 1px solid #eaedf1;
    border-bottom-color: #ffffff;
    background-color: #ffffff;
}

.block-title code {
    padding: 2px 3px;
}

.block-options {
    margin: 0 6px;
    line-height: 37px;
}

.block-options .label {
    display: inline-block;
    padding: 6px;
    vertical-align: middle;
    font-size: 13px;
}

.block.block-fullscreen {
    position: fixed;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    z-index: 1031;
    margin-bottom: 0;
    overflow-y: auto;
}

/* Widgets */
.widget {
    background-color: transparent;
    margin-bottom: 10px;
}

/* Link Widgets */
a.widget {
    display: block;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

a.widget:hover,
a.widget:focus,
a.widget:active {
    text-decoration: none;
}

/* Scroll to top link */
#to-top {
    display: none;
    position: fixed;
    bottom: 55px;
    left: 5px;
    border-radius: 3px;
    padding: 0 12px;
    font-size: 28px;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
    opacity: 0.1;
    filter: alpha(opacity=10);
}

#to-top:hover {
    color: #ffffff;
    background-color: #1bbae1;
    text-decoration: none;
    opacity: 1;
    filter: alpha(opacity=100);
}
/*
=================================================================
(#m05pgs) PAGES
=================================================================
*/

#login-container {
    position: absolute;
    width: 300px;
    top: 10px;
    left: 50%;
    margin-left: -150px;
    z-index: 1000;
}

#login-container > .block {
    border: none;
}

/* Gallery */
.gallery img, .gallery a img, .gallery-image img, a[data-toggle="lightbox-image"] img {
    max-width: 100%;
}

a[data-toggle="lightbox-image"],
a.gallery-link {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.gallery a:hover img,
.gallery-image:hover img,
a[data-toggle="lightbox-image"]:hover img {
    opacity: 0.75;
    filter: alpha(opacity=75);
}

.gallery-image {
    position: relative;
}

.gallery-image-options {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    padding: 10px;
}

.gallery-image:hover .gallery-image-options {
    display: block;
}

.gallery > .row > div {
    margin-bottom: 15px;
}

.chart {
    height: 360px;
}

.legend table td {
    padding: 4px;
    font-size: 14px;
}

/* Timeline */
.timeline {
    position: relative;
}

/*
=================================================================
(#m06bos) BOOTSTRAP OVERWRITE/EXTEND STYLES
=================================================================
*/

/* Navbar */
.navbar.navbar-default {
    background-color: transparent;
}

.navbar.navbar-inverse {
    background-color: #4c5471;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    border-width: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Inter", "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small,
.h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
    font-weight: 300;
    color: #777777;
}

h1, h2, h3 {
    margin-bottom: 15px;
}

.text-primary:hover,
a.text-primary {
    color: #1bbae1;
}

.text-danger:hover,
a.text-danger {
    color: #e74c3c;
}

.text-success:hover,
a.text-success {
    color: #27ae60;
}

.text-info:hover,
a.text-info {
    color: #3498db;
}

.text-muted,
.text-muted:hover,
a.text-muted,
a.text-muted:hover,
a.text-muted:focus {
    color: #999999;
}

.text-light,
.text-light:hover,
a.text-light,
a.text-light:hover,
a.text-light:focus {
    color: #ffffff;
}

b, strong {
    font-weight: 600;
}

ul,
ol {
    padding-left: 30px;
}

p {
    line-height: 1.6;
}

article p {
    font-size: 16px;
    line-height: 1.8;
}

.well {
    background-color: #f9f9f9;
    border: 1px solid #eeeeee;
}

.page-header {
    border-bottom-width: 1px;
    border-bottom-color: #dddddd;
    margin: 30px 0 20px;
}

blockquote {
    border-left-width: 3px;
}

blockquote {
    margin: 20px 0;
    padding: 30px 60px 30px 20px;
    position: relative;
    width: 100%;
    border-color: #eaedf1;
}

blockquote:before {
    display: block;
    content: "\201C";
    font-family: serif;
    font-size: 96px;
    position: absolute;
    right: 10px;
    top: -30px;
    color: #eaedf1;
}

blockquote.pull-right:before {
    left: 10px;
    right: auto;
}

/* Forms */
label {
    font-weight: 600;
}

fieldset legend {
    font-size: 16px;
    padding: 30px 0 10px;
    border-bottom: 2px solid #eaedf1;
}

input[type="file"] {
    padding-top: 7px;
}

input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
textarea.form-control {
    -webkit-appearance: none;
}

.form-control {
    font-size: 13px;
    max-width: 100%;}
/* fusion 12/11/2026 : priorité inchangée (:where) ; ces propriétés restent à la grille (JDGrid.css passait après) */
.form-control:where(:not(.jdgliveinp > *)) {
    margin: 1px 0;
}

.input-group {
    margin-top: 1px;
    margin-bottom: 1px;
}

.input-group .form-control {
    margin-top: 0;
}

.help-block {
    color: #777777;
    font-weight: 400;
}

.input-group-addon {
    min-width: 45px;
    text-align: center;}

.form-horizontal .control-label {
    margin-bottom: 5px;
}

.form-bordered {
    margin: -15px -15px -1px;
}

.modal-body .form-bordered {
    margin-bottom: -20px;
}

.form-bordered fieldset legend {
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.form-bordered .form-group {
    margin: 0;
    border: none;
    padding: 15px;
    border-bottom: 1px dashed #eaedf1;
}

.form-horizontal.form-bordered .form-group {
    padding-left: 0;
    padding-right: 0;
}

.form-bordered .help-block {
    margin-bottom: 0;
}

.has-warning .form-control,
.has-error .form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.has-warning .input-group-addon,
.has-warning .checkbox,
.has-warning .checkbox-inline,
.has-warning .radio,
.has-warning .radio-inline {
    color: #e67e22;
}

.has-warning .input-group-addon {
    border-color: #e67e22;
    background-color: #ffffff;
}

.has-error .input-group-addon,
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .radio,
.has-error .radio-inline {
    color: #e74c3c;
}

.has-error .input-group-addon {
    border-color: #e74c3c;
    background-color: #ffffff;
}

/* Form Select Switches */
.switch {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}
/* fusion 12/11/2026 : priorité inchangée (:where) ; ces propriétés restent à la grille (JDGrid.css passait après) */
.switch:where(:not(.jdgliveinp > *)) {
    margin: 1px 0;
}

.switch input {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
}

/* ─── Switches – Crystal Clear / Glassmorphism ─── */
.switch span {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    border-radius: 28px;
    background-color: #dee2e6;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08);
    -webkit-transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.switch span:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 1px;
    bottom: 1px;
    width: 24px;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.08);
    -webkit-transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.switch input:checked + span:after {
    left: 24px;
    border: none;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.switch input:checked + span {
    background-color: #dee2e6;
}

/* switch-primary : bleu */
.switch-primary span {
    border-color: rgba(59, 130, 246, 0.18);
}
.switch-primary input:checked + span {
    background-color: #bde0fe;
    border-color: rgba(0, 119, 182, 0.25);
    box-shadow: inset 0 2px 4px rgba(0, 119, 182, 0.10), 0 0 8px rgba(0, 119, 182, 0.08);
}
.switch-primary input:checked + span:after {
    box-shadow: 0 1px 4px rgba(0, 119, 182, 0.20), 0 0 0 1px rgba(0, 119, 182, 0.10);
}

/* switch-success : vert teal */
.switch-success span {
    border-color: rgba(10, 147, 150, 0.18);
}
.switch-success input:checked + span {
    background-color: #cbf3f0;
    border-color: rgba(10, 147, 150, 0.25);
    box-shadow: inset 0 2px 4px rgba(10, 147, 150, 0.10), 0 0 8px rgba(10, 147, 150, 0.08);
}
.switch-success input:checked + span:after {
    box-shadow: 0 1px 4px rgba(10, 147, 150, 0.20), 0 0 0 1px rgba(10, 147, 150, 0.10);
}

/* switch-danger : rouge/rose */
.switch-danger span {
    border-color: rgba(201, 24, 74, 0.18);
}
.switch-danger input:checked + span {
    background-color: #ffb3c6;
    border-color: rgba(201, 24, 74, 0.25);
    box-shadow: inset 0 2px 4px rgba(201, 24, 74, 0.10), 0 0 8px rgba(201, 24, 74, 0.08);
}
.switch-danger input:checked + span:after {
    box-shadow: 0 1px 4px rgba(201, 24, 74, 0.20), 0 0 0 1px rgba(201, 24, 74, 0.10);
}

/* Hover glow sur tous les switches */
.switch:hover span {
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.switch-success:hover span { box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(10, 147, 150, 0.10); }
.switch-danger:hover span  { box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(201, 24, 74, 0.10); }
.switch-primary:hover span { box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(0, 119, 182, 0.10); }

.lt-ie9 .switch input {
    position: static;
    opacity: 1;
    filter: alpha(opacity=100);
}

.lt-ie9 .switch span,
.lt-ie9 .switch span:after {
    display: none !important;
}

/* Tables */
.table.table-vcenter th,
.table.table-vcenter td {
    vertical-align: middle;
}

.table thead > tr > th > small {
    font-weight: 400;
    font-size: 75%;
}

.table thead > tr > th,
.table thead > tr > td,
.table tfoot > tr > th,
.table tfoot > tr > td {
    padding-top: 14px;
    padding-bottom: 14px;
}

.table-borderless tbody > tr > th,
.table-borderless tbody > tr > td {
    border-top-width: 0;
}

.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td,
.table tbody + tbody,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-color: #eaedf1;
}

/* List Group */
.list-group-item {
    border-color: #eaedf1;
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: #f9fafc;
}

a.list-group-item.active > .badge {
    background: url('../img/template/ie8_opacity_dark_40.png') repeat;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

/* Navs */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    color: #fff;
    background-color: #1bbae1;
}

.nav > li i {
    font-size: 14px;
}

.nav-pills > .active > a > .badge {
    color: #1bbae1;
}

.nav-stacked > li > a {
    margin: 4px 0 0;
}

.nav .caret,
.nav a:hover .caret,
.nav a:focus .caret {
    border-top-color: #1bbae1;
    border-bottom-color: #1bbae1;
}

.nav-tabs {
    border-bottom-color: #eaedf1;
}

.nav-tabs > li {
    margin-bottom: 0;
}

.nav-tabs > li > a {
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: -1px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #394263;
    border-color: #eaedf1;
    border-bottom-color: transparent;
}

.nav-pills > li.active > a > .badge {
    background: url('../img/template/ie8_opacity_dark_20.png') repeat;
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.dropdown-menu {
    padding: 0;
    font-size: 13px;
    border-color: #dbe1e8;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.dropdown-menu i {
    opacity: 0.2;
    filter: alpha(opacity=20);
    line-height: 17px;
}

.dropdown-menu a:hover i {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.dropdown-menu .divider {
    margin: 2px 0;
    padding: 0 !important;
    background-color: #f0f0f0;
}

li.dropdown-header {
    padding: 5px 10px;}

.dropdown-menu li:first-child.dropdown-header {
    border-top: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.dropdown-menu.dropdown-custom {
    min-width: 200px;
}

.dropdown-menu.dropdown-custom > li {
    padding: 8px 10px;
    font-size: 12px;
}

.dropdown-menu.dropdown-custom > li > a {
    border-radius: 3px;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
}

.collapse.in .dropdown.open .dropdown-menu {
    display: block;
    position: static;
    margin: 0 0 0 15px;
    left: auto;
    top: auto;
}

.left-submenu {
	float: none;
}

.left-submenu > .dropdown-menu {
    border-radius: 6px 0px 6px 6px;
    left: auto;
    margin-left: 10px;
    right: 98%;
}
.navbar-fixed-top .dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

.pagination > li > a,
.pagination > li > span  {
    color: #1bbae1;
    margin-left: 5px;
    margin-right: 5px;
    border: none !important;
    border-radius: 25px !important;
}

.pager > li > a,
.pager > li > span {
    border-color: #eaedf1;
}

.pager > li > a:hover {
    background-color: #1bbae1;
    border-color: #1bbae1;
    color: #ffffff;
}

.pager > li.disabled > a:hover {
    border-color: #eaedf1;
}

/* Popover */
.popover-title {
    background: none;
    border: none;
    font-size: 17px;
    font-weight: 600;
}

/* ─── PILE D'EMPILEMENT ───────────────────────────────────────────────
   Bootstrap 3 laisse .modal à 1050 et .modal-backdrop à 1040. Or ce CRM
   a plusieurs éléments de la barre du haut au-dessus de cette valeur —
   le champ de recherche (2000), ses menus déroulants (2001), la liste de
   résultats #searchres (3002) — et le sélecteur de dates (3001). Une
   modale ouverte passait donc DERRIÈRE eux.
   On remonte la couche des modales au-dessus de tout ce petit monde.

   Ordre voulu, du fond vers l'avant :
       99999  .preloader
       10060  #holdon-overlay      (voile « chargement »)
       10050  calendriers et autocomplétions accrochés à <body>
       10002  .tooltip
       10001  .modal
       10000  .modal-backdrop
        3002  #searchres
        2001  menus de la barre du haut
        1040  cluster droit de la barre du haut

   Les deux règles suivantes ne sont pas décoratives : sans elles, tout
   ce qui s'accroche à <body> pour se poser AU-DESSUS d'un champ situé
   dans une modale (calendrier, autocomplétion d'adresse) disparaît
   derrière elle. Voir ~/sauvegardes_sib/theme_docs/THEME_V3_INSTALLATION_SIB.md.
   ------------------------------------------------------------------ */
.modal-backdrop { z-index: 10000; }
.modal          { z-index: 10001; }
.tooltip        { z-index: 10002; }

/* Le voile « chargement » doit couvrir la modale, pas passer dessous. */
#holdon-overlay { z-index: 10060 !important; }

/* Les messages (bootstrap-growl) se posent en z-index 9999 en style inline :
   une erreur renvoyée par une modale passait sous son voile, illisible. */
.bootstrap-growl { z-index: 10070 !important; }

.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

.tooltip-inner {
    padding: 4px 6px;
    background-color: #000000;
    color: #ffffff;
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    border-top-color: #000000;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #000000;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #000000;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #000000;
}

/* Breadcrumps */
.breadcrumb {
    background-color: #ffffff;
}

.breadcrumb i {
    font-size: 14px;
}

.breadcrumb > li + li:before {
    content: "\203a";
}

/* Progress Bars */
.progress,
.progress-bar {
    height: 20px;
    line-height: 20px;
}

.progress-bar-danger {
    background-color: #e74c3c;
}

.progress-bar-warning {
    background-color: #f39c12;
}

.progress-bar-success {
    background-color: #2ecc71;
}

.progress-bar-info {
    background-color: #3498db;
}

.modal-body .nav-tabs {
    margin: 0 -15px 15px;
    padding: 0 5px !important;
}

.modal-footer {
    margin-top: 0;
    padding: 14px 15px 15px;
    background-color: #f9f9f9;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;}

/* Buttons */
.btn {
    background-color: #ffffff;
}
/* fusion 12/11/2026 : priorité inchangée (:where) ; ces propriétés restent à la grille (JDGrid.css passait après) */
.btn:where(:not(.jdgliveinp > *)) {
    margin: 1px 0;
}

.btn .gi,
.btn .hi,
.btn .si,
.btn .fi {
    line-height: 1;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.block-options .btn,
.input-group .btn,
.modal-content .btn {
    margin-top: 0;
    margin-bottom: 0;
}

.btn-default:active:hover,
.btn-default:active:focus,
.btn-default.active:hover,
.btn-default.active:focus,
.open .btn-default.dropdown-toggle:hover,
.open .btn-default.dropdown-toggle:focus,
.open .btn-default.dropdown-toggle.focus {
    background-color: #eaedf1;
    border-color: #eaedf1;
}

.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled].active,
.btn-default[disabled]:active:focus,
.btn-default[disabled].active:focus,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active,
fieldset[disabled] .btn-default:active:focus,
fieldset[disabled] .btn-default.active:focus {
    background-color: #eaedf1;
    border-color: #eaedf1;
}

.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.open .btn-primary.dropdown-toggle:hover,
.open .btn-primary.dropdown-toggle:focus,
.open .btn-primary.dropdown-toggle.focus {
    background-color: #1bbae1;
    border-color: #1bbae1;
    color: #ffffff;
}

.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled].focus,
.btn-primary[disabled]:active,
.btn-primary[disabled].active,
.btn-primary[disabled]:active:focus,
.btn-primary[disabled].active:focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active,
fieldset[disabled] .btn-primary:active:focus,
fieldset[disabled] .btn-primary.active:focus {
    background-color: #1bbae1;
    border-color: #1bbae1;
    color: #ffffff;
}

.btn-danger:active:hover,
.btn-danger:active:focus,
.btn-danger.active:hover,
.btn-danger.active:focus,
.open .btn-danger.dropdown-toggle:hover,
.open .btn-danger.dropdown-toggle:focus,
.open .btn-danger.dropdown-toggle.focus {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #ffffff;
}

.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled].focus,
.btn-danger[disabled]:active,
.btn-danger[disabled].active,
.btn-danger[disabled]:active:focus,
.btn-danger[disabled].active:focus,
fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger.focus,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active,
fieldset[disabled] .btn-danger:active:focus,
fieldset[disabled] .btn-danger.active:focus {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #ffffff;
}

.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled].focus,
.btn-warning[disabled]:active,
.btn-warning[disabled].active,
.btn-warning[disabled]:active:focus,
.btn-warning[disabled].active:focus,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning.focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active,
fieldset[disabled] .btn-warning:active:focus,
fieldset[disabled] .btn-warning.active:focus {
    background-color: #f39c12;
    border-color: #f39c12;
    color: #ffffff;
}

.btn-success:active:hover,
.btn-success:active:focus,
.btn-success.active:hover,
.btn-success.active:focus,
.open .btn-success.dropdown-toggle:hover,
.open .btn-success.dropdown-toggle:focus,
.open .btn-success.dropdown-toggle.focus {
    background-color: #7db831;
    border-color: #7db831;
    color: #ffffff;
}

.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled].focus,
.btn-success[disabled]:active,
.btn-success[disabled].active,
.btn-success[disabled]:active:focus,
.btn-success[disabled].active:focus,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success.focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active,
fieldset[disabled] .btn-success:active:focus,
fieldset[disabled] .btn-success.active:focus {
    background-color: #7db831;
    border-color: #7db831;
    color: #ffffff;
}

.btn-info {
    background-color: #7abce7;
    border-color: #3498db;
    color: #ffffff;
}

.btn-info:active:hover,
.btn-info:active:focus,
.btn-info.active:hover,
.btn-info.active:focus,
.open .btn-info.dropdown-toggle:hover,
.open .btn-info.dropdown-toggle:focus,
.open .btn-info.dropdown-toggle.focus {
    background-color: #3498db;
    border-color: #3498db;
    color: #ffffff;
}

.btn-info.disabled,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled]:hover,
.btn-info[disabled]:focus,
.btn-info[disabled].focus,
.btn-info[disabled]:active,
.btn-info[disabled].active,
.btn-info[disabled]:active:focus,
.btn-info[disabled].active:focus,
fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info.focus,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active,
fieldset[disabled] .btn-info:active:focus,
fieldset[disabled] .btn-info.active:focus {
    background-color: #3498db;
    border-color: #3498db;
    color: #ffffff;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link.btn-icon:hover,
.btn-link.btn-icon:focus {
    color: #1bbae1;
}

.btn-link.btn-icon {
    color: #999999;
}

.btn-link.btn-icon:hover,
.btn-link.btn-icon:focus {
    text-decoration: none;
}

.block-options .btn {
    border-radius: 15px;
    padding-right: 8px;
    padding-left: 8px;
    min-width: 30px;
    text-align: center;
}

/* Panels */
.panel {
    margin-bottom: 20px;
}

.panel-heading {
    padding: 15px;
}

.panel-default > .panel-heading {
    background-color: #f9f9f9;
}

/* Pre, Code */
pre {
    background: #151515;
    overflow: scroll;
}

code {
    border: 1px solid #fad4df;
    margin: 1px 0;
    display: inline-block;
}

.btn code {
    display: inline;
    margin: 0;
}

/* Alerts */
.alert {
    border-top-width: 0;
    border-right-width: 2px;
    border-bottom-width: 0;
    border-left-width: 2px;
}

.alert-danger {
    color: #e74c3c;
    background-color: #ffd1cc;
    border-color: #ffb8b0;
}

.alert-danger .alert-link {
    color: #e74c3c;
}

.alert-success {
    color: #27ae60;
    background-color: #daf2e4;
    border-color: #b8e5cb;
}

.alert-success .alert-link {
    color: #27ae60;
}

.alert-info {
    color: #3498db;
    background-color: #dae8f2;
    border-color: #b8d2e5;
}

.alert-info .alert-link {
    color: #3498db;
}

.alert-dismissable .close {
    top: -5px;
    right: -25px;
}

.close {
    text-shadow: none;
}

/* Alternative Alerts */
.alert.alert-alt {
    margin: 0 0 2px;
    padding: 5px;
    font-size: 12px;
    border-width: 0;
    border-left-width: 2px;
}

.alert.alert-alt small {
    opacity: 0.75;
    filter: alpha(opacity=75);
}

.alert-alt.alert-dismissable .close {
    right: 0;
}

.alert-alt.alert-dismissable .close:hover {
    color: #ffffff;
}

.alert-danger.alert-alt {
    border-color: #e74c3c;
}

.alert-warning.alert-alt {
    border-color: #e67e22;
}

.alert-success.alert-alt {
    border-color: #27ae60;
}

.alert-info.alert-alt {
    border-color: #3498db;
}

.sidebar-content .alert.alert-alt {
    margin-left: -10px;
    padding-left: 10px;
    background: transparent;
    color: #ffffff;
}

#sidebar-alt .sidebar-content .alert.alert-alt {
    margin-left: 0;
    margin-right: -10px;
    padding-left: 0;
    padding-right: 10px;
}

#sidebar-alt .sidebar-content .alert.alert-alt {
    border-width: 0;
    border-right-width: 2px;
}

/* Bootstrap Growl — semi-transparent glassmorphism notifications */
.bootstrap-growl,
body > .alert[style*="position: fixed"],
body > .alert[style*="z-index"] {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    border-width: 0 !important;
    border-left-width: 4px !important;
    font-size: 13px;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

body > .alert-danger[style*="position: fixed"],
body > .alert-danger[style*="z-index"] {
    background-color: rgba(254, 226, 226, 0.88) !important;
    color: #991b1b !important;
    border-color: #ef4444 !important;
}

body > .alert-success[style*="position: fixed"],
body > .alert-success[style*="z-index"] {
    background-color: rgba(220, 252, 231, 0.88) !important;
    color: #166534 !important;
    border-color: #22c55e !important;
}

body > .alert-warning[style*="position: fixed"],
body > .alert-warning[style*="z-index"] {
    background-color: rgba(254, 243, 199, 0.88) !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
}

body > .alert-info[style*="position: fixed"],
body > .alert-info[style*="z-index"] {
    background-color: rgba(219, 234, 254, 0.88) !important;
    color: #1e40af !important;
    border-color: #3b82f6 !important;
}

.badge {
    background: url('../img/template/ie8_opacity_dark_30.png') repeat;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 6px;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
    background-color: #ff5542;
}

.label-success[href]:hover,
.label-success[href]:focus {
    background-color: #2cc76c;
}

.label-info[href]:hover,
.label-info[href]:focus {
    background-color: #2f92d4;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #5ac5e0;
}

.label-default[href]:hover,
.label-default[href]:focus {
    background-color: #777777;
}

.label-rainbow {
    background: transparent;
    border: 1px solid;
    border-image: linear-gradient(to right, rgb(0, 101, 255), rgb(191, 99, 243), rgb(240, 180, 90)) 1;
    background: linear-gradient(to right, rgb(0, 101, 255), rgb(191, 99, 243), rgb(240, 180, 90));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 4px;
}

.label-rainbow:hover,
.label-rainbow[href]:hover,
.label-rainbow[href]:focus {
    background: linear-gradient(to right, rgb(0, 101, 255), rgb(191, 99, 243), rgb(240, 180, 90));
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: #fff;
    background-clip: border-box;
    color: #fff;
    border-image: none;
    border-color: transparent;
}

/* Bottom Margin */
p, .table, .alert, .carousel {
    margin-bottom: 20px;
}

/* Removing shadows and radius */
.navbar-form,
.navbar-collapse,
.form-control,
.form-control:focus,
.has-warning .form-control:focus,
.has-error .form-control:focus,
.popover,
.progress,
.progress-bar,
.btn.active,
.open .btn.dropdown-toggle,
.panel {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar,
.tooltip-inner,
.breadcrumb,
.alert.alert-alt {
    border-radius: 0;
}
/*
=================================================================
(#m07hes) HELPERS
=================================================================
*/

.push {
    margin-bottom: 15px !important;
}

.push-top-bottom {
    margin-top: 40px;
    margin-bottom: 40px;
}

.display-none {
    display: none;
}

.remove-margin {
    margin: 0 !important;
}

.remove-margin-bottom {
    margin-bottom: 0 !important;
}

.remove-padding {
    padding: 0 !important;
}

.remove-radius {
    border-radius: 0 !important;
}

.remove-box-shadow {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.remove-transition {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.lt-ie9 .hidden-lt-ie9,
.lt-ie10 .hidden-lt-ie10 {
    display: none !important;
}

.visible-lt-ie9,
.visible-lt-ie10 {
    display: none;
}

.lt-ie9 .visible-lt-ie9,
.lt-ie10 .visible-lt-ie10 {
    display: block;
}

:focus {
    outline: 0 !important;
}

/*
=================================================================
(#m08ths) THEMES
=================================================================
*/

/* Alternative Main Style */
.style-alt #page-content {
    background-color: #ffffff;
}

.style-alt .block {
    border-color: #dbe1e8;
}

.style-alt .block-title {
    background-color: #dbe1e8;
    border-bottom-color: #dbe1e8;
}

.style-alt #page-content + footer {
    background-color: #f9fafc;
}

.style-alt .content-header {
    border-bottom-color: #eaedf1;
}

.style-alt #page-content + footer {
    border-top-color: #eaedf1;
}

.style-alt .widget {
    background-color: #f6f6f6;
}

.themed-background {
    background-color: #1bbae1;
}

/*
=================================================================
(#m09res) RESPONSIVE
=================================================================
*/

/* Small devices, Tablets (>767px) */
@media screen and (min-width: 768px) {

    /* General */
    #login-background {
        height: 400px;
    }

    #login-background > img {
        top: 0;
    }

    #login-container,
    #login-alt-container {
        width: 480px;
        top: 80px;
        margin-left: -240px;
    }

    .full-page-container {
        width: 740px;
        top: 120px;
        padding: 20px;
        margin-left: -370px;
    }

    .full-page-section {
        padding: 50px 0;
        margin: 50px -20px;
    }

    #page-content {
        padding: 20px 20px 1px;
    }

    .header-section,
    .breadcrumb-top,
    .block,
    .block.full,
    .modal-body,
    #page-content + footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .block .block-content-full {
        margin: -20px -20px -1px;
    }

    .block.full .block-content-full {
        margin: -20px;
    }

    .content-header,
    .content-top,
    .breadcrumb-top {
        margin: -20px -20px 20px;
    }

    .content-header + .breadcrumb-top,
    .breadcrumb-top + .content-header {
        margin-top: -21px;
    }

    .block,
    .widget {
        margin-bottom: 20px;
    }

    .block-title,
    .block-top {
        margin-left: -20px;
        margin-right: -20px;
    }

    .draggable-placeholder {
        margin-bottom: 20px;
    }

    .navbar-fixed-top .dropdown-menu {
        max-height: none;
        overflow-y: visible;
    }

    /* Forms */
    .form-bordered {
        margin-left: -20px;
        margin-right: -20px;
    }

    .form-bordered .form-group {
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-horizontal.form-bordered .form-group {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Tabs */
    .nav-tabs > li > a {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 3px;
        margin-right: 3px;
    }

    /* Chat UI */
    .chatui-people,
    .chatui-talk,
    .chatui-input {
        position: absolute;
    }

    .chatui-talk,
    .chatui-input {
        right: 250px;
        left: 0;
    }

    .chatui-people {
        top: 0;
        right: 0;
        bottom: 0;
        width: 250px;
        height: auto;
    }

    .chatui-talk {
        height: auto;
    }

    .chatui-talk .chatui-talk-msg {
        width: 50%;
        margin-left: 50%;
    }

    .chatui-talk .chatui-talk-msg.chatui-talk-msg-highlight {
        margin-left: 0;
        margin-right: 50%;
    }

    .chatui-input {
        bottom: 0;
    }
}

/* Medium devices, Desktops (>991px) */
@media screen and (min-width: 992px) {

    /* General */
    #login-alt-container {
        display: block;
    }

    /* Sidebar Animations */
    .sidebar-no-animations #sidebar,
    .sidebar-no-animations #sidebar-alt {
        -webkit-transition: opacity 0.5s linear, background-color 0.2s ease-out;
        transition: opacity 0.5s linear, background-color 0.2s ease-out;
    }

    .sidebar-no-animations #main-container,
    .sidebar-no-animations.header-fixed-top header.navbar-fixed-top,
    .sidebar-no-animations.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-no-animations.footer-fixed #page-content + footer {
        -webkit-transition: none;
        transition: none;
    }

    /* Reset sidebar classes used only on small screens */
    .sidebar-visible-xs #sidebar,
    .sidebar-alt-visible-xs #sidebar-alt {
        width: 0;
    }

    .sidebar-visible-xs #main-container,
    .sidebar-alt-visible-xs #main-container {
        margin-left: 0;
        margin-right: 0;
    }

    .sidebar-visible-xs.header-fixed-top header.navbar-fixed-top,
    .sidebar-visible-xs.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-alt-visible-xs.header-fixed-top header.navbar-fixed-top,
    .sidebar-alt-visible-xs.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-visible-xs.footer-fixed #page-content + footer,
    .sidebar-alt-visible-xs.footer-fixed #page-content + footer {
        right: 0;
        left: 0;
    }

    /* Both Sidebars */
    #sidebar,
    #sidebar-alt,
    .sidebar-partial #sidebar,
    .sidebar-alt-partial #sidebar-alt {
        width: 0;
        opacity: 0.2;
        filter: alpha(opacity=20);
    }

    .sidebar-partial #sidebar,
    .sidebar-alt-partial #sidebar-alt {
        width: 65px;
    }

    .sidebar-partial #sidebar:hover,
    .sidebar-visible-lg #sidebar,
    .sidebar-visible-lg.sidebar-partial #sidebar,
    .sidebar-alt-partial #sidebar-alt:hover,
    .sidebar-alt-visible-lg #sidebar-alt,
    .sidebar-alt-visible-lg.sidebar-alt-partial #sidebar-alt {
        width: 200px;
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .sidebar-partial #sidebar .sidebar-brand i,
    .sidebar-alt-partial #sidebar-alt .sidebar-brand i {
        display: none;
    }

    .sidebar-partial #sidebar:hover .sidebar-brand i,
    .sidebar-visible-lg #sidebar .sidebar-brand i,
    .sidebar-alt-partial #sidebar-alt:hover .sidebar-brand i,
    .sidebar-alt-visible-lg #sidebar-alt .sidebar-brand i {
        display: inline-block;
    }

    /* Main Sidebar */
    .sidebar-partial #main-container {
        margin-left: 65px;
    }

    .sidebar-partial #sidebar:hover + #main-container,
    .sidebar-visible-lg #main-container {
        margin-left: 200px;
    }

    .sidebar-partial.footer-fixed #main-container #page-content + footer,
    .sidebar-partial.header-fixed-top header.navbar-fixed-top,
    .sidebar-partial.header-fixed-bottom header.navbar-fixed-bottom {
        left: 65px;
    }

    .sidebar-partial #sidebar:hover + #main-container header.navbar-fixed-top,
    .sidebar-partial #sidebar:hover + #main-container header.navbar-fixed-bottom,
    .sidebar-partial #sidebar:hover + #main-container #page-content + footer,
    .sidebar-visible-lg.header-fixed-top header.navbar-fixed-top,
    .sidebar-visible-lg.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-visible-lg.footer-fixed #main-container #page-content + footer {
        left: 200px;
    }

    /* Alternative Sidebar */
    .sidebar-alt-partial #main-container {
        margin-right: 65px;
    }

    .sidebar-alt-partial #sidebar-alt:hover ~ #main-container,
    .sidebar-alt-visible-lg #main-container {
        margin-right: 200px;
    }

    .sidebar-alt-partial.footer-fixed #main-container #page-content + footer,
    .sidebar-alt-partial.header-fixed-top header.navbar-fixed-top,
    .sidebar-alt-partial.header-fixed-bottom header.navbar-fixed-bottom {
        right: 65px;
    }

    .sidebar-alt-partial #sidebar-alt:hover ~ #main-container header.navbar-fixed-top,
    .sidebar-alt-partial #sidebar-alt:hover ~ #main-container header.navbar-fixed-bottom,
    .sidebar-alt-partial #sidebar-alt:hover ~ #main-container #page-content + footer,
    .sidebar-alt-visible-lg.header-fixed-top header.navbar-fixed-top,
    .sidebar-alt-visible-lg.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-alt-visible-lg.footer-fixed #main-container #page-content + footer {
        right: 200px;
    }

    /* Main Sidebar - Mini mode */
    .sidebar-mini.sidebar-visible-lg-mini #main-container {
        margin-left: 40px;
    }

    .sidebar-mini.sidebar-visible-lg-mini #main-container header.navbar-fixed-top,
    .sidebar-mini.sidebar-visible-lg-mini #main-container header.navbar-fixed-bottom,
    .sidebar-mini.sidebar-visible-lg-mini #main-container #page-content + footer {
        left: 40px;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar {
        overflow: visible;
        opacity: 1;
        filter: alpha(opacity=100);
        z-index: 1029;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-content {
        width: 40px;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav-mini-hide,
    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-header > span {
        display: none;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-header {
        padding: 0;
        margin: 5px 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav li {
        position: relative;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav .sidebar-nav-menu + ul {
        position: absolute;
        width: 220px;
        top: 0;
        right: -220px;
        margin: 0;
        padding: 6px 5px;
        border-left: 3px solid #1bbae1;
        background-color: #394263;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav ul a {
        margin: 0;
        padding-left: 10px;
        border-left: none;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav ul ul {
        margin-left: 0;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav > li.active > ul {
        display: none;
    }

    .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav .sidebar-nav-menu.open + ul {
        display: block !important;
    }

    /* Nav Horizontal */
    .nav-horizontal a {
        text-align: center;
        min-width: 130px;
        padding: 12px 15px;
    }

    .nav-horizontal i {
        display: block;
        height: 55px;
        margin-right: 0;
        margin-bottom: 10px;
        font-size: 42px;
        padding: 10px;
    }
}

/* Large devices, Desktops (>1199px) */
@media screen and (min-width: 1200px) {

    /* Main Layout */
    .header-fixed-top .sidebar-content,
    .header-fixed-bottom .sidebar-content {
        padding-bottom: 0;
    }

    /* General */
    article p {
        font-size: 19px;
        line-height: 1.9;
    }
}

/*
=================================================================
(#m10rts) RETINA
=================================================================
*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    /* If you did use a CSS image background, you can put your high resolution image here */

}

/*
=================================================================
(#m11prs) PRINT
=================================================================
*/

@media print {
    #sidebar, #sidebar-alt, .content-header, .breadcrumb-top, .block-title .block-options, #page-content + footer, #to-top {display: none !important;}
    #page-content {min-height: 0 !important; height: auto !important; padding: 0 !important;}
    #main-container {margin: 0 !important;}
    .block, .block.full {border: none !important; padding: 0 !important;}
    .block-title {margin: 0 0 20px !important;}
}

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #3498db #dfeffc;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {    width: 7px;	height	: 7px;  }

  *::-webkit-scrollbar-track {    background: #dfeffc;  }

  *::-webkit-scrollbar-thumb {   
	background: #DFEFFC;
	background: -webkit-radial-gradient(center, #DFEFFC, #3599DB);
	background: -moz-radial-gradient(center, #DFEFFC, #3599DB);
	background: radial-gradient(ellipse at center, #DFEFFC, #3599DB);
    border-radius: 10px;
    border: 1px solid #DFEFFC;
  }

::-webkit-scrollbar-thumb:hover {
	border: 2px solid #3498db;
}

::-webkit-scrollbar-thumb:active {
   border: 2px solid #666666;
}

.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {vertical-align:middle;}
.ui-jqgrid .ui-jqgrid-htable th {height:35px;}
.ui-jqgrid tr.jqgrow td {height:35px;}
.ui-jqgrid body, .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-size:12px; font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;}
.jqgrow td > a > img, .jqgrow td > img {border-radius: 30px;max-height: 40px;}

.ui-widget-content a.lnk {color:#e38e7b !important; }

#map {height:200px; width:100%;}
.page-lap #map {height:400px; width:100%;}
.page-dashboard #map, .page-dashboard #map2 {height:520px; width:100%;}
.page-installator #comment, .page-entrepot #comment {height:200px; width:100%;}
/* Suggestions Google Places : posées dans <body>, elles doivent passer
   au-dessus d'une modale (adresse d'intervention SAV). Voir la pile
   d'empilement plus haut dans ce fichier. */
.pac-container {z-index:10050 !important;}

.fc-time-grid-event {overflow:auto;}
.fc-content .fc-time {background-color: #e38e7b;}
.fc-title b {background-color: #778;display: block;}

.tooltip {position: fixed;}
.fc-title a {color:#fff;}

div#searchres {display:none;position: absolute;left: 10px;border: solid 1px #eee;padding: 20px;background: #fff;right: 10px;top: 52px;z-index:9;max-height: 400px;overflow: auto;box-shadow: 2px 2px 5px #ccc;z-index:200}
li.media {border-bottom: solid 1px #eee;cursor:pointer;}
li.media:hover{background-color:#eee;}
.media a > i {font-size:30px;}
.media>.pull-left {margin: 20px 10px 0;}
#tbclimsg td:first-child {width: 150px;white-space: nowrap;vertical-align: top;}

.page-contact .nav-tabs li .badge {display: initial;}
.page-contact .nav-tabs li .badge:empty {display: none;}
.page-contact #frminfousr .form-group, .page-contact #frminfoquest .form-group {padding:2px !important;}

#modal-rapport .modal-body {max-height: 500px;overflow: auto;}
#modal-columns .modal-dialog{width:1100px;}
#modal-columns .modal-body{overflow:auto;height:500px;}

.fc-content span.label {margin-top: 1px;display: inline-block;}
.simudisdel{font-size:12px;text-align: right;margin-top: 10px;/*position: absolute;top: 10px;left: 0;right: 0;*/}
.simudisdel > span {box-shadow: 0px 0px 7px 1px #999;height: 20px;line-height: 22px;margin: 0 5px;border:solid 1px #fff;}
/* .blrzone{filter: blur(1px);opacity: 0.45;} */
.icordvstatut {font-size: 16px;padding: 0 5px;}
.btchent{font-size:11px;margin-top:5px;}

#selcross_chosen {min-width: 150px;}

#lstcolumns .chosen-container .chosen-drop {
    left: 0;
    opacity:0;
    height:0;
    overflow: hidden;
}
#lstcolumns .chosen-container.chosen-with-drop .chosen-drop {
    opacity:1;
    height:auto;
}
/* Fix: Chosen dropdown z-index — elevate parent block when dropdown is open */
.chosen-container.chosen-with-drop {
    z-index: 1050;
}
/* .block:has(.chosen-container.chosen-with-drop),
fieldset:has(.chosen-container.chosen-with-drop) {
    position: relative;
    z-index: 1050;
} */

.block:not(:has(.modal)):has(.chosen-container.chosen-with-drop),
fieldset:not(:has(.modal)):has(.chosen-container.chosen-with-drop) {
    position: relative;
    z-index: 1050;
}

/* ────────────────────────────────────────────────────────────────
   Fix générique : listes déroulantes (Chosen) tronquées dans les modals
   Le .modal-content a "overflow: hidden" (border-radius / backdrop-filter)
   ce qui découpe le .chosen-drop quand il dépasse en bas du modal.
   On autorise le débordement UNIQUEMENT quand un Chosen est ouvert,
   et on élève le z-index du dropdown au-dessus du modal (z=1050).
   ──────────────────────────────────────────────────────────────── */
.modal:has(.chosen-container.chosen-with-drop),
.modal-dialog:has(.chosen-container.chosen-with-drop),
.modal-content:has(.chosen-container.chosen-with-drop),
.modal-body:has(.chosen-container.chosen-with-drop),
.modal-body:has(.chosen-container.chosen-with-drop) form,
.modal-body:has(.chosen-container.chosen-with-drop) fieldset,
.modal-body:has(.chosen-container.chosen-with-drop) .form-group,
.modal-body:has(.chosen-container.chosen-with-drop) .row,
.modal-body:has(.chosen-container.chosen-with-drop) [class*="col-"] {
    overflow: visible !important;
}
.modal .chosen-container.chosen-with-drop .chosen-drop {
    z-index: 1060;
}
/* Même correctif pour les <select> natifs Bootstrap-select / selectpicker
   et autres listes déroulantes custom (au cas où) */
.modal-content:has(.dropdown.open),
.modal-content:has(.bootstrap-select.open),
.modal-body:has(.dropdown.open),
.modal-body:has(.bootstrap-select.open) {
    overflow: visible !important;
}
.modal .dropdown.open .dropdown-menu {
    z-index: 1060;
}

#principal table tr:nth-child(2n) td {background-color: #eee;padding: 3px 3px;}
#principal table td.espace{display: none;}

legend .block-options {min-height: 0;line-height: 0;}

/* Autocomplétion d'adresse BAN : idem, posée dans <body>. */
#jdautoc{position: absolute;background-color: #fff;border: solid 1px #eee;padding: 10px;box-shadow: 0 0 5px #eee;border-radius: 3px;z-index:10050}
#jdautoc > div {border-bottom: solid 1px #eee;padding: 3px 7px;cursor: pointer;}
#jdautoc > div:hover {background-color: #1bbae1;border-radius: 5px;color: #fff;}
#jdautoc > div:last-child {border: 0;padding-bottom: 0;}
#jdautoc > div .l1{font-weight:600;}

/** modif pour taille de la recherche */
div[aria-describedby*="colchooser_list"] .ui-resizable{height: 550px !important;}
div[aria-describedby*="colchooser_list"] .ui-multiselect-checkboxes .ui-helper-reset{height: 391px !important;}
div[aria-describedby*="colchooser_list"] .ui-multiselect-menu{height: 349px !important;}
div[aria-describedby*="colchooser_list"] .ui-multiselect-checkboxes {height: 315px !important;}
div[id*="colchooser_list"] {height: 400px !important;}
div[aria-describedby*="colchooser_list"] .ui-multiselect-menu {display: block !important;}
#serachcolchoz{width:102%;border:solid 1px #ddd;border-radius:3px;margin-bottom: 5px;}

.sidebarnotif{
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.jdshadow{
    box-shadow: 0px 0px 5px #999;
}

/* ========================================
   Contact Page Styles
   ======================================== */

/* Style pour le sous-menu imbriqué */
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: -100%;
	margin-top: -6px;
	margin-left: -1px;
	border-radius: 0 6px 6px 6px;
	min-width: 180px;
}

/* Style spécifique pour le bouton Imprimer */
#optgen .dropdown-submenu > .dropdown-menu {
	top: 0 !important;
	left: -112% !important;
	right: 100% !important;
	margin-top: 0px !important;
	margin-left: 0px !important;
	border-radius: 0 6px 6px 6px !important;
	min-width: 180px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block !important;
}

.dropdown-submenu > a {
	white-space: nowrap;
}

.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 5px 5px 0;
	border-right-color: #ccc;
	margin-top: 5px;
	margin-left: 10px;
}

.dropdown-submenu:hover > a:after {
	border-right-color: #fff;
}

/* ========================================
   Modal Animations
   ======================================== */

/* Animation pour le modal */
.modal.fade .modal-dialog {
	transform: scale(0.8);
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal.fade.in .modal-dialog {
	transform: scale(1);
	opacity: 1;
}
/* =================================================================
   NAVBAR CRM - Unified header navigation (blue light theme)
   Design system: UI UX Pro Max
   Palette: #caf0f8 → #bbd0ff gradient
   ================================================================= */

/* --- Header layout: hamburger | nav scrollable | right actions --- */
.navbar-crm-header {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 50px;
}

.navbar-crm-header__left {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.navbar-crm-header__hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	font-size: 16px;
	transition: background-color 200ms ease, color 200ms ease;}

.navbar-crm-header__hamburger:hover,
.navbar-crm-header__hamburger:focus {
	text-decoration: none;}

/* Center scrollable nav container */
.navbar-crm-header__center {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
}

.navbar-crm-nav {
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
    scroll-padding-left: 8px;
	flex: 1;
	min-width: 0;
}

/* Arrow scroll buttons */
.navbar-crm-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 50px;
	flex-shrink: 0;
	color: #1d4e89;
	font-size: 12px;
	background: transparent;
	cursor: pointer;
	transition: opacity 200ms ease, color 200ms ease;
	text-decoration: none;
	z-index: 2;
}

.navbar-crm-arrow:hover,
.navbar-crm-arrow:focus {
	color: #0b3d91;
	text-decoration: none;
	background: transparent;
}

.navbar-crm-arrow--hidden {
	opacity: 0;
	pointer-events: none;
    width: 0;
    overflow: hidden;
}

/* Inline search (replaces nav in center zone) */
.navbar-crm-search-inline {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.navbar-crm-search-inline__form {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 12px;
	margin: 0;
	position: relative;
}

.navbar-crm-search-inline__icon {
	color: #5b9bd5;
	margin-right: 10px;
	font-size: 14px;
	flex-shrink: 0;
}

.navbar-crm-search-inline__input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	color: #0b3d91;
	outline: none;
	height: 42px;
	padding: 0;
	min-width: 0;
}

.navbar-crm-search-inline__close {
	color: #999;
	margin-left: 10px;
	font-size: 14px;
	flex-shrink: 0;
	transition: color 200ms ease;
}

.navbar-crm-search-inline__close:hover {
	color: #d32f2f;
	text-decoration: none;
}

.navbar-crm-nav__list {
	list-style: none;
    margin: 0;
    padding: 0 8px;
	display: flex;
	align-items: stretch;
    justify-content: center;
	flex-wrap: nowrap;
}

.navbar-crm-nav__item {
	flex-shrink: 0;
}

.navbar-crm-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	height: 50px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 2px solid transparent;}

.navbar-crm-nav__link:hover,
.navbar-crm-nav__link:focus {
	text-decoration: none;}

.navbar-crm-nav__link:focus {
	outline: 2px solid #90caf9;
	outline-offset: -2px;
}

.navbar-crm-nav__link i {
	font-size: 14px;
	opacity: 0.75;
	transition: opacity 200ms ease;
	width: 16px;
	text-align: center;
}

.navbar-crm-nav__link span {
	line-height: 1.2;
}

/* Right actions */
.navbar-crm-header__right {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin: 0;
	float: none !important;
}

/* Search toggle icon */
.navbar-crm-search-toggle a {
	color: #1d4e89;
	transition: background-color 200ms ease, color 200ms ease;
}

/* searchres dropdown inherits existing styles from main.css line ~4317 */

/* --- Apply blue theme to the header bar itself --- */
header.navbar {
	background: linear-gradient(135deg, #caf0f8 0%, #bbd0ff 100%);
	border-bottom: 1px solid #bbd0ff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- Responsive --- */
@media screen and (max-width: 991px) {
    .navbar-crm-header {
        flex-wrap: wrap;
    }

    .navbar-crm-header__left {
        order: 1;
    }

    .navbar-crm-header__right {
        order: 2;
        margin-left: auto;
    }

    .navbar-crm-header__center {
        order: 3;
        width: 100%;
        flex: none;
        border-top: 1px solid #bbd0ff;
    }

    .navbar-crm-nav__list {
        justify-content: center;
        margin: 0;
        padding: 0 4px;
    }

	.navbar-crm-nav__link {
		padding: 0 10px;
		height: 40px;
		font-size: 12px;
		gap: 4px;
	}

	.navbar-crm-nav__link i {
		font-size: 13px;
		opacity: 1;
	}

	.navbar-crm-nav__link span {
		display: inline;
		font-size: 11px;
	}

	.navbar-crm-arrow {
		height: 40px;
		width: 24px;
	}
}

/* ============================================================
 * Lucid Navigator v2 – SaaS Tonal Modern (Bootstrap 3 / ProUI)
 * ============================================================ */

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Brand */
    --ln-primary:          #3b82f6;
    --ln-primary-dark:     #1d4ed8;
    --ln-primary-bg:       rgba(59, 130, 246, 0.10);
    --ln-primary-hover-bg: rgba(59, 130, 246, 0.18);

    /* Violet */
    --ln-violet:           #8b5cf6;
    --ln-violet-dark:      #7c3aed;
    --ln-violet-bg:        rgba(139, 92, 246, 0.10);
    --ln-violet-hover-bg:  rgba(139, 92, 246, 0.18);

    /* Secondary (alias to violet) */
    --ln-secondary:        #8b5cf6;
    --ln-secondary-dark:   #7c3aed;
    --ln-secondary-bg:     rgba(139, 92, 246, 0.10);
    --ln-secondary-hover-bg: rgba(139, 92, 246, 0.18);

    /* Success */
    --ln-success:          #22c55e;
    --ln-success-dark:     #16a34a;
    --ln-success-bg:       rgba(34, 197, 94, 0.10);
    --ln-success-hover-bg: rgba(34, 197, 94, 0.18);

    /* Warning */
    --ln-warning:          #f59e0b;
    --ln-warning-dark:     #d97706;
    --ln-warning-bg:       rgba(245, 158, 11, 0.10);
    --ln-warning-hover-bg: rgba(245, 158, 11, 0.18);

    /* Yellow (extra semantic) */
    --ln-yellow:           #eab308;
    --ln-yellow-dark:      #ca8a04;
    --ln-yellow-bg:        rgba(234, 179, 8, 0.10);
    --ln-yellow-hover-bg:  rgba(234, 179, 8, 0.18);

    /* Danger */
    --ln-danger:           #ef4444;
    --ln-danger-dark:      #dc2626;
    --ln-danger-bg:        rgba(239, 68, 68, 0.10);
    --ln-danger-hover-bg:  rgba(239, 68, 68, 0.18);

    /* Info */
    --ln-info:             #06b6d4;
    --ln-info-dark:        #0891b2;
    --ln-info-bg:          rgba(6, 182, 212, 0.10);
    --ln-info-hover-bg:    rgba(6, 182, 212, 0.18);

    /* Default */
    --ln-default-bg:       rgba(0, 0, 0, 0.03);
    --ln-default-dark:     #334155;
    --ln-default-hover-bg: rgba(0, 0, 0, 0.06);

    /* Neutrals – glassmorphism LIGHT theme */
    --ln-bg:               #eef2f9;
    --ln-surface:          rgba(255, 255, 255, 0.55);
    --ln-border:           rgba(0, 0, 0, 0.08);
    --ln-divider:          rgba(0, 0, 0, 0.05);
    --ln-text:             #1e293b;
    --ln-text-muted:       #64748b;

    /* Shadows */
    --ln-shadow-card:  0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --ln-shadow-hover: 0 8px 32px rgba(59, 130, 246, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Glass tokens – light mode */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-bg-strong: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: 16px;
    --glass-blur-strong: 24px;
}

/* ─── Base / Typo ────────────────────────────────────────────── */
body {
    font-family: "Inter", "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ln-text);
    background: linear-gradient(135deg, #e8edf5 0%, #dfe6f6 35%, #eae4f6 70%, #e8edf5 100%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--ln-text);
    line-height: 1.3;
}

a {
    color: #3b82f6;
    font-weight: 600;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #1d4ed8;
    text-decoration: none;
}

.content-header {
    border-top: none;
    border-bottom: none !important;
}

#main-container {
    background-color: transparent;
}

/* ─── Global Transitions ─────────────────────────────────────── */
.btn,
.nav > li > a,
.form-control,
.pagination > li > a,
.list-group-item {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* ─── Blocks / Cards ─────────────────────────────────────────── */
.block,
.block.full {
    margin: 0 0 20px;
    padding: 20px 18px 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--ln-primary);
    border-radius: 16px;
    box-shadow: var(--ln-shadow-card);
    overflow: visible;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    -webkit-transition: box-shadow 0.25s ease, -webkit-transform 0.25s ease;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.block:not(.block-fullscreen):hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: var(--ln-shadow-hover);
}

/* JDGrid host blocks: avoid transform (prevents Bootstrap modal positioning issues) */
.block:has([id^="grid_"]):not(.block-fullscreen),
.block:has([id^="grid_"]):not(.block-fullscreen):hover {
    -webkit-transform: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Block-title: modern blue header band */
.block-title {
    margin: -20px -18px 20px;
    margin-left: -22px;
    padding: 0 18px 0 22px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(99, 102, 241, 0.03) 50%, rgba(236, 72, 153, 0.02) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    min-height: 48px;
    overflow: visible;
    position: relative;
}

.block-title h1,
.block-title h2,
.block-title h3,
.block-title h4,
.block-title h5,
.block-title h6 {
    display: inline-flex;
    align-items: center;
    /* 11/11/2026 : était 10px — en flex, ce gap écartait aussi « Liste des » et le <strong>.
       0.3em = une espace normale ; l'icône <i> garde ses 10px par sa marge ci-dessous. */
    gap: 0.3em;
    font-size: 14px;
    font-weight: 600;
    color: #1e3a5f;
    padding: 13px 0 12px;
    margin: 0;
    letter-spacing: 0.01em;
    text-transform: none;
}

.block-title h1 i,
.block-title h2 i,
.block-title h3 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(10px - 0.3em); /* + le gap = 10px comme avant */
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.10) 100%);
    color: #3b82f6;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

.block-title h1 strong,
.block-title h2 strong,
.block-title h3 strong {
    font-weight: 700;}

.block-title h1 small,
.block-title h2 small,
.block-title h3 small,
.block-title h4 small,
.block-title h5 small,
.block-title h6 small {
    font-size: 11px;
    font-weight: 500;
    color: var(--ln-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ─── Tab-pane h2 — navbar active style ──────────────────────── */
.tab-pane > h2 {
    font-weight: 600;
    color: #1d4ed8;
    margin: 0 0 20px;
    padding: 8px 16px;
    letter-spacing: -0.01em;
    display: inline-block;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

body.v2-dark .tab-pane > h2 {
    color: #93c5fd;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(139, 92, 246, 0.12) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

/* ─── Nested Blocks – no double accent / no lift ─────────────────────── */
.block .block,
.block .block.full {
    padding: 16px;
    border-left-color: rgba(59, 130, 246, 0.15);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(8px);}

.block .block:not(.block-fullscreen):hover {
    -webkit-transform: none;
    transform: none;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.block .block-title,
.block .block .block-title {
    background: rgba(255, 255, 255, 0.25);
    margin: -16px -16px 16px;
    padding: 0 14px;
}

/* ─── Buttons — Tonal (pastel bg, dark text) ─────────────────── */
.btn {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    border: none;
    box-shadow: none;
    text-shadow: none;}

.btn:active,
.btn.active {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    box-shadow: none;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open .btn-default.dropdown-toggle {
    background-color: var(--ln-default-hover-bg);
    border-color: var(--ln-border);
    color: var(--ln-text);
}
.btn-primary.btn-alt {
    border: 1px solid #bcd0e8;}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
    background-color: var(--ln-primary-bg);
    color: #94c9e8;
    opacity: 0.6;
}

.btn-primary.btn-alt:hover,
.btn-primary.btn-alt:focus,
.btn-primary.btn-alt.focus,
.btn-primary.btn-alt:active,
.btn-primary.btn-alt.active,
.open .btn-primary.btn-alt.dropdown-toggle {
    background-color: #e3edf9;
    border-color: #a9c2df;
    color: #244563;
}

/* Success – tonal green */
.btn-success {
    background-color: var(--ln-success-bg);
    border-color: transparent;
    color: var(--ln-success-dark);
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open .btn-success.dropdown-toggle {
    background-color: var(--ln-success-hover-bg);
    border-color: transparent;
    color: var(--ln-success-dark);
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
    background-color: var(--ln-success-bg);
    color: var(--ln-success-dark);
    opacity: 0.55;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning {
    background-color: var(--ln-warning-bg);
    color: var(--ln-warning-dark);
    opacity: 0.55;
}

/* Danger – tonal red */
.btn-danger {
    background-color: var(--ln-danger-bg);
    border-color: transparent;
    color: var(--ln-danger-dark);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open .btn-danger.dropdown-toggle {
    background-color: var(--ln-danger-hover-bg);
    border-color: transparent;
    color: var(--ln-danger-dark);
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger {
    background-color: var(--ln-danger-bg);
    color: var(--ln-danger-dark);
    opacity: 0.55;
}

/* Info – tonal sky */
.btn-info {
    /* background-color: #d5e2f2;
    border-color: #b7cbe3;
    color: #2e4a6a; */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.18);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open .btn-info.dropdown-toggle {
    background-color: #c4d6ec;
    border-color: #9fb9d7;
    color: #233f5e;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info {
    background-color: #d5e2f2;
    color: #2e4a6a;
    opacity: 0.55;
}

/* Violet and Yellow extras */
.btn-violet {
    background-color: var(--ln-violet-bg);
    border-color: transparent;
    color: var(--ln-violet-dark);
}
.btn-violet:hover,
.btn-violet:focus,
.btn-violet.focus,
.btn-violet:active,
.btn-violet.active,
.open .btn-violet.dropdown-toggle {
    background-color: var(--ln-violet-hover-bg);
    border-color: transparent;
    color: var(--ln-violet-dark);
}

.btn-yellow {
    background-color: var(--ln-yellow-bg);
    border-color: transparent;
    color: var(--ln-yellow-dark);
}
.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow.focus,
.btn-yellow:active,
.btn-yellow.active,
.open .btn-yellow.dropdown-toggle {
    background-color: var(--ln-yellow-hover-bg);
    border-color: transparent;
    color: var(--ln-yellow-dark);
}

/* ─── Semantic Labels & Badges ───────────────────────────────── */
.label,
.badge {
    font-weight: 600;
    font-size: 11px;
    padding: 3px 9px;
    letter-spacing: 0.03em;
    line-height: 1.5;}

.badge,
.label-default {
    background-color: var(--ln-default-bg);
    color: var(--ln-default-dark);
}

.label-info,
.badge-info {
    background-color: var(--ln-info-bg);
    color: var(--ln-info-dark);
}

.label-violet {
    background-color: var(--ln-violet-bg);
    color: var(--ln-violet-dark);
}

.label-yellow {
    background-color: var(--ln-yellow-bg);
    color: var(--ln-yellow-dark);
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
    border: none;
    border-left: 4px solid;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);}
.alert-success {
    background-color: var(--ln-success-bg);
    border-left-color: var(--ln-success);
    color: var(--ln-success-dark);
}
.alert-warning {
    background-color: var(--ln-warning-bg);
    border-left-color: var(--ln-warning);
    color: var(--ln-warning-dark);
}
.alert-danger {
    background-color: var(--ln-danger-bg);
    border-left-color: var(--ln-danger);
    color: var(--ln-danger-dark);
}
.alert-info {
    background-color: var(--ln-info-bg);
    border-left-color: var(--ln-info);
    color: var(--ln-info-dark);
}

/* ─── Navigation & Dropdowns ─────────────────────────────────── */
.nav > li > a:hover,
.nav > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--ln-primary-bg);
    color: var(--ln-primary-dark);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--ln-primary-bg);
    color: var(--ln-primary-dark);
    font-weight: 700;
}

.nav-pills > li > a,
a[data-toggle="pill"] {
    color: #64748b;
    font-weight: 500;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus,
a[data-toggle="pill"]:hover,
a[data-toggle="pill"]:focus {
    color: #1e293b;
    background-color: rgba(0, 0, 0, 0.04);
}

.nav-pills > li.active > a[data-toggle="pill"],
.nav-pills > li.active > a[data-toggle="pill"]:hover,
.nav-pills > li.active > a[data-toggle="pill"]:focus {
    background-color: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
}

/* ─── Tabs ───────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.nav-tabs > li > a {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #64748b;
    font-weight: 500;
    padding: 10px 16px;
    margin-bottom: -2px;
    background: transparent;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--ln-primary);
    color: #1e293b;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid var(--ln-primary);
    color: var(--ln-primary-dark);
    font-weight: 700;
}

/* block-title tabs */
.block-title .nav-tabs {
    border-bottom: none;
    margin-bottom: -2px;
}

.block-title .nav-tabs > li > a {
    color: var(--ln-text-muted);
    border-bottom: 3px solid transparent;
    background: transparent;
}

.block-title .nav-tabs > li.active > a,
.block-title .nav-tabs > li.active > a:hover,
.block-title .nav-tabs > li.active > a:focus {
    border: none;
    border-bottom: 3px solid var(--ln-primary);
    background: transparent;
    color: var(--ln-primary-dark);
    font-weight: 700;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
    border-color: var(--ln-border);
    color: var(--ln-text);
    font-weight: 500;
    padding: 7px 13px;
    background-color: var(--ln-surface);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: var(--ln-primary-bg);
    border-color: var(--ln-primary);
    color: var(--ln-primary-dark);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--ln-primary-bg);
    border-color: var(--ln-primary);
    color: var(--ln-primary-dark);
    font-weight: 700;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    background-color: var(--ln-default-bg);
    border-color: var(--ln-border);
    color: var(--ln-text-muted);
}

/* ─── List Group ─────────────────────────────────────────────── */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: var(--ln-primary-bg);
    border-color: var(--ln-primary);
    color: var(--ln-primary-dark);
}

/* ─── Text helpers ───────────────────────────────────────────── */
.text-primary, a.text-primary:hover, a.text-primary:focus { color: var(--ln-primary-dark); }
.text-success, a.text-success:hover, a.text-success:focus { color: var(--ln-success-dark); }
.text-danger,  a.text-danger:hover,  a.text-danger:focus  { color: var(--ln-danger-dark);  }
.text-info,    a.text-info:hover,    a.text-info:focus    { color: var(--ln-info-dark);    }

/* ─── Form Actions / modal bottom rows ──────────────────────── */
.form-bordered .form-group.form-actions {
    background-color: transparent;
    border-top: 1px dashed var(--ln-divider);
    border-bottom: none;
    padding: 14px 18px;
}

.block .form-bordered .form-group.form-actions {
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    border-top: 1px dashed var(--ln-divider);
}

.modal-body .form-bordered {
    margin: 0;
}

.modal-body .form-bordered .form-group.form-actions:last-child {
    margin: 0 -15px -15px;
    padding: 14px 15px 15px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: rgba(0, 0, 0, 0.015);
}

.modal-body > form > .form-group.form-actions,
.modal-body > .row .form-group.form-actions {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ─── Widgets (modern cards) ────────────────────────────────── */
.widget,
a.widget {
    margin-bottom: 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--ln-primary);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    -webkit-transition: box-shadow 0.25s ease, -webkit-transform 0.25s ease;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.widget:hover,
a.widget:focus {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.widget small {
    color: var(--ln-text-muted);
}

.widget .themed-background {
    background-color: var(--ln-primary) !important;
    color: #ffffff !important;
}

.widget.themed-background,
a.widget.themed-background {
    background-color: var(--ln-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.widget .text-light,
.widget a.text-light,
.widget a.text-light:hover,
.widget a.text-light:focus {
    color: #ffffff !important;
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-family: inherit;
    height: auto;
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease;}
textarea.form-control {
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-family: inherit;
    height: auto;
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease;}
/* fusion 12/11/2026 : priorité inchangée (:where) ; ces propriétés restent à la grille (JDGrid.css passait après) */
textarea.form-control:where(:not(.jdgridbox textarea)) {
    min-height: 38px;
}
/* Fusion du 12/11/2026 : ce socle passe APRÈS JDGrid.css. Les champs texte/nombre
   sont à égalité de priorité avec « .jdgridtb input[type=…] » (JDGrid.css) : les
   5 propriétés que la grille fixe ne s'appliquent donc qu'HORS des grilles (:where
   ne change pas la priorité), comme quand main.css passait avant JDGrid.css. */
input[type="text"].form-control,
input[type="number"].form-control {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease;}
input[type="text"].form-control:where(:not(.jdgridtb input)),
input[type="number"].form-control:where(:not(.jdgridtb input)) {
    color: var(--ln-text);
    font-size: 14px;
    height: auto;
    min-height: 38px;
    padding: 8px 4px;
}

.form-control::-webkit-input-placeholder { color: var(--ln-text-muted); opacity: 0.6; }
.form-control::-moz-placeholder          { color: var(--ln-text-muted); opacity: 0.6; }
.form-control:-ms-input-placeholder      { color: var(--ln-text-muted); opacity: 0.6; }

.input-group-addon {
    font-size: 14px;}
.has-warning .form-control:focus {
    border-color: var(--ln-warning);}
.has-error .form-control:focus {
    border-color: var(--ln-danger);}
.has-warning .control-label, .has-warning .help-block { color: var(--ln-warning-dark); }
.has-error   .control-label, .has-error   .help-block { color: var(--ln-danger-dark);  }

/* Select Chosen avant initialisation : le <select> natif reste invisible mais
   garde sa place d'une ligne (un <select multiple> natif fait 4 lignes), le
   temps que app.js pose Chosen. Classe html.chosen-attente : posée dans <head>
   (inc/template_start.php), retirée par app.js. */
html.chosen-attente select.select-chosen,
html.chosen-attente select.select-chosen2 {
    visibility: hidden !important;
    height: 34px !important;
}

/* Select2 / Chosen harmonisation */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ln-text);
}

/* Chosen multi-select tags - inspired by tab-pane > h2 style */
.chosen-container-multi .chosen-choices li.search-choice {
    font-weight: 600 !important;
    padding: 6px 22px 6px 10px !important;
    margin: 3px 5px 3px 0 !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s ease !important;}

.chosen-container-multi .chosen-choices li.search-choice:hover {
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px) !important;}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #1d4ed8 !important;
    opacity: 0.7 !important;
    font-weight: bold !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
    opacity: 1 !important;
    color: #dc2626 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
    border-color: var(--ln-primary) !important;
    box-shadow: 0 2px 0 0 var(--ln-primary) !important;
}

/* Chosen dropdown panel spacing and rounded menu */
.chosen-container .chosen-drop {
    margin-top: 5px !important;
    -webkit-backdrop-filter: blur(20px);}

.chosen-container .chosen-results {
    border-radius: 8px !important;
}

.chosen-container .chosen-results li {
    border-radius: 0 !important;
}

.chosen-container .chosen-results li:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.chosen-container .chosen-results li:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Input-group compatibility fixes */
.input-group-btn .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .input-group-btn + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}

.input-group .form-control:first-child:not(.input-timepicker24) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group.bootstrap-timepicker .form-control,
.input-group .input-timepicker24 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group.bootstrap-timepicker .input-group-btn {
    display: table-cell !important;
    width: auto !important;
    vertical-align: middle !important;
}

.input-group.bootstrap-timepicker .input-group-btn .btn {
    border-radius: 0 8px 8px 0 !important;
}

.input-group .form-control + .input-group-addon {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
}

.input-group .input-group-addon + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
    margin-left: -1px;
}

/* Remove seams between input, addon and button in all orders */
.input-group .form-control + .input-group-btn,
.input-group .input-group-addon + .input-group-btn,
.input-group .input-group-btn + .input-group-addon,
.input-group .input-group-btn + .form-control {
    margin-left: -1px !important;
}

.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
    margin-right: -1px !important;
}

.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
    margin-left: -1px !important;
}

.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn > .btn {
    position: relative;
    z-index: 2;
}

.input-group > .form-control:focus {
    z-index: 3;
}

.input-group-addon {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table {
    background-color: transparent;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 13px 12px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: middle;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background-color: rgba(0, 0, 0, 0.02);
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: rgba(59, 130, 246, 0.08);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-left: 0;
    border-right: 0;
}

/* ─── Modals ─────────────────────────────────────────────────── */
.modal-content {
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    overflow: hidden;}

.modal-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 16px 22px;}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 20px 22px;
}

.modal-footer {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: rgba(0, 0, 0, 0.015);
    padding: 14px 22px;}

/* ─── Dropdowns ──────────────────────────────────────────────── */
.dropdown.open,
.btn-group.open {
    position: relative;
    z-index: 1000;
}

.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
    padding: 6px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    z-index: 1050;}

.dropdown-menu > li > a {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--ln-text);
}

.dropdown-menu > .divider {
    background-color: rgba(0, 0, 0, 0.06);
    margin: 5px 0;
}

/* ─── Panels ─────────────────────────────────────────────────── */
.panel {
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--ln-primary);
    box-shadow: var(--ln-shadow-card);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));}

.panel-heading {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 700;
    color: #1e293b;
}

/* ─── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }

    .block:hover,
    .btn:active,
    .btn.active {
        -webkit-transform: none;
        transform: none;
    }
}

/* =================================================================
   CRM Shell Refresh - Floating navbar + sidebar (legacy-safe)
   ================================================================= */

:root {
    --crm-shell-bg-top: rgba(255, 255, 255, 0.55);
    --crm-shell-bg-bottom: rgba(240, 235, 255, 0.55);
    --crm-shell-border: rgba(0, 0, 0, 0.06);
    --crm-shell-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

    --crm-accent: #3b82f6;
    --crm-accent-soft: rgba(59, 130, 246, 0.08);
    --crm-accent-strong: #1d4ed8;

    --crm-text-main: #1e293b;
    --crm-text-muted: #64748b;

    --crm-sidebar-bg-top: rgba(255, 255, 255, 0.6);
    --crm-sidebar-bg-bottom: rgba(240, 235, 255, 0.6);
    --crm-sidebar-border: rgba(0, 0, 0, 0.06);
    --crm-sidebar-item-hover: rgba(0, 0, 0, 0.04);
    --crm-sidebar-item-active: rgba(59, 130, 246, 0.10);
}

header.navbar {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 20px;
}

#page-container {
    background-color: transparent !important;
}

#main-container {
    background: transparent;
}

#page-content {
    background-color: transparent !important;
}

.navbar-crm-header {
    min-height: 50px;
    overflow: visible;
    position: relative;}

.navbar-crm-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    z-index: 0;
    pointer-events: none;}

/* .navbar-crm-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #43bcfd;
    z-index: 1;
    pointer-events: none;
} */
.navbar-crm-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;}

.navbar-crm-header > * {
    position: relative;
    z-index: 2;
}

/* Le cluster de droite (entité, notifs, thème, user) porte des menus déroulants.
   La règle ci-dessus les enfermait dans un contexte z-index:2 → quand le header
   n'est pas fixe, le contenu de la page (bandeau-titre) passait devant et coupait
   le menu. On élève ce cluster au-dessus du contenu (sélecteur plus spécifique que
   « .navbar-crm-header > * » pour gagner). Sous la couche des modals (1050+). */
.navbar-crm-header > .navbar-crm-header__right {
    z-index: 1040;
}

header.navbar.navbar-fixed-top,
header.navbar-default.navbar-fixed-top,
header.navbar-inverse.navbar-fixed-top {
    border-bottom: none !important;
    z-index: 1050;
    overflow: visible;
}

.navbar-crm-header__hamburger,
.navbar-crm-arrow,
.navbar-crm-search-toggle a,
.navbar-crm-header__right > li > a {
    color: var(--crm-text-main);
}

.navbar-crm-header__hamburger:hover,
.navbar-crm-header__hamburger:focus,
.navbar-crm-arrow:hover,
.navbar-crm-arrow:focus,
.navbar-crm-search-toggle a:hover,
.navbar-crm-search-toggle a:focus,
.navbar-crm-header__right > li.open > a,
.navbar-crm-header__right > li > a:hover,
.navbar-crm-header__right > li > a:focus {
    background-color: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}

.navbar-crm-header .nav.navbar-nav-custom > li.open > a,
.navbar-crm-header .nav.navbar-nav-custom > li > a:hover,
.navbar-crm-header .nav.navbar-nav-custom > li > a:focus {
    background-color: rgba(59, 130, 246, 0.08) !important;
    color: #1d4ed8 !important;
}

.navbar-crm-nav {
    padding: 0 4px;
}

.navbar-crm-nav__link {
    height: 44px;
    margin: 3px 2px;
    padding: 0 12px;
    border-bottom: none;}

.navbar-crm-nav__link i {
    opacity: 0.85;
}

.navbar-crm-header__right > li > a {
    min-width: 44px;
    line-height: 40px;
    border-radius: 10px;
    margin: 4px 2px;
}

.navbar-crm-header__right > li > a > img {
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(17, 51, 84, 0.18);
}

.navbar-crm-header__right > li.dropdown {
    position: relative;
}

.navbar-crm-header__right .dropdown-menu {
    margin-top: 8px;
    z-index: 2001;
    pointer-events: auto;}

.navbar-crm-header__right .dropdown-menu > li > a,
.navbar-crm-header__right .dropdown-menu.dropdown-custom > li > a {
    display: block;
    padding: 8px 14px;
    color: #334155;
    border-radius: 8px;
    margin: 2px 6px;
    position: relative;
    z-index: 1;
}

.navbar-crm-header__right .dropdown-menu > li > a:hover,
.navbar-crm-header__right .dropdown-menu.dropdown-custom > li > a:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    text-decoration: none;
}

/* Sélecteur d'entité : cap la hauteur + scroll quand il y a beaucoup d'entités
   (sinon le menu déborde sur toute la grille). Scopé à ce seul menu. */
#btn-change-entity {
    max-height: 60vh;
    overflow-y: auto;
}

.navbar-crm-header__right .dropdown-menu .dropdown-header {
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;}

.navbar-crm-search-inline {
    position: relative;
    overflow: visible;
    z-index: 3;
}

.navbar-crm-header__center {
    overflow: visible;
    z-index: 3;
}

#searchres {
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 3002;
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));}

.navbar-crm-search-inline__form {
    height: 50px;
    padding: 0 14px;
}

.navbar-crm-search-inline__input {
    color: var(--crm-text-main);
}

.navbar-crm-search-inline__input::placeholder {
    color: #94a3b8;
}

@media screen and (min-width: 992px) {
    #sidebar,
    #sidebar-alt,
    #page-container.sidebar-partial #sidebar,
    #page-container.sidebar-visible-lg #sidebar,
    #page-container.sidebar-alt-partial #sidebar-alt,
    #page-container.sidebar-alt-visible-lg #sidebar-alt {
        background: transparent !important;
    }

    #sidebar-scroll {
        margin: 10px 10px 12px 10px;
        overflow-y: hidden;
        overflow-x: hidden;
        position: relative;
        isolation: isolate;
        height: calc(100vh - 24px);
        -webkit-backdrop-filter: blur(54px) saturate(1.9) brightness(1.06);
        scrollbar-width: none;
        -ms-overflow-style: none;}

    #sidebar-scroll::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 380px;
        pointer-events: none;
        z-index: 1;
        background:
            linear-gradient(to top, rgba(239, 246, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
            url('/crm/img/logo_sib_small.png') center bottom / cover no-repeat;
        /* background:
            linear-gradient(to top, rgba(239, 246, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
            url('/crm/img/background_skyscraper.png') center bottom / cover no-repeat; */
        /* background:
            linear-gradient(to top, rgba(239, 246, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
            url('/crm/img/background-leaf2.jpg') center bottom / cover no-repeat; */
        opacity: 0.38;
        -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.94) 40%, transparent 100%);
        mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.94) 40%, transparent 100%);
    }

    #sidebar-scroll > * {
        position: relative;
        z-index: 2;
    }

    #sidebar-scroll > .sidebar-content {
        height: 100%;
        min-height: 0;
    }

    #sidebar-scroll .sidebar-brand {
        order: 1;
        flex-shrink: 0;
    }

    #sidebar-scroll .sidebar-nav {
        order: 2;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 10px 120px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #sidebar-scroll .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    #sidebar-scroll .sidebar-section.sidebar-user.clearfix.sidebar-nav-mini-hide {
        order: 3;
        margin-top: 0;
        flex-shrink: 0;
        position: relative;
        z-index: 3;
    }

    #sidebar-scroll::-webkit-scrollbar {
        display: none;
    }

    #sidebar-alt-scroll {
        margin: 10px 10px 12px 10px;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 24px);
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(var(--glass-blur-strong));
        -webkit-backdrop-filter: blur(var(--glass-blur-strong));
        scrollbar-width: none;
        -ms-overflow-style: none;}

    #sidebar-alt-scroll::-webkit-scrollbar {
        display: none;
    }

    .sidebar-content {
        width: 200px;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    #sidebar-alt .sidebar-content {
        color: #475569;
    }

    #sidebar-alt .sidebar-content.sidebarnotif {
        width: 100%;
        height: 100%;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar-brand {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
        border-bottom: 1px solid rgba(59, 130, 246, 0.08);
        color: #1e3a5f;
        font-weight: 700;
        letter-spacing: 0.01em;
        height: auto;
        line-height: 1.4;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        font-size: 15px;
        border-radius: 22px 22px 0 0;
    }

    .sidebar-brand i {
        width: auto;
        margin-right: 8px;
        opacity: 0.7;
        color: #3b82f6;
    }

    /* Logo plus grand sur les grands écrans */
    .sidebar-brand img {
        max-height: 90px !important;
    }

    #sidebar-alt .sidebar-brand {
        background: rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        color: #334155;
    }

    .sidebar-user {
        border-bottom: none;}

    .sidebar-user-links a {
        opacity: 0.6;}

    .sidebar-user-links a:hover,
    .sidebar-user-links a:focus {
        color: #1e293b;
        opacity: 1;
    }

    #sidebar-alt .sidebar-user {
        background: rgba(0, 0, 0, 0.02);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    #sidebar-alt .sidebar-user-name {
        color: #334155;
    }

    #sidebar-alt .sidebar-user-links a {
        color: #64748b;
        opacity: 0.6;
    }

    .sidebar-nav {
        padding: 10px 10px 8px;
    }

    .sidebar-nav a {
        margin-bottom: 3px;
        padding: 0 14px;
        min-height: 38px;
        line-height: 38px;
        font-size: 13px;
        background: transparent;}

    #sidebar-alt .sidebar-nav a {
        color: #64748b;
    }

    .sidebar-nav a:hover,
    .sidebar-nav a:focus,
    .sidebar-nav a.open,
    .sidebar-nav li.active > a {
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);}

    #sidebar-alt .sidebar-nav a:hover,
    #sidebar-alt .sidebar-nav a:focus,
    #sidebar-alt .sidebar-nav a.open,
    #sidebar-alt .sidebar-nav li.active > a {
        color: #334155;
        background: rgba(0, 0, 0, 0.04);
    }

    .sidebar-nav a.active,
    .sidebar-nav ul a.active,
    .sidebar-nav ul a.active:hover {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);}

    #sidebar-alt .sidebar-nav a.active,
    #sidebar-alt .sidebar-nav ul a.active,
    #sidebar-alt .sidebar-nav ul a.active:hover {
        color: #1d4ed8;
        background: rgba(59, 130, 246, 0.08);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
    }

    .sidebar-nav a > .sidebar-nav-icon,
    .sidebar-nav a > .sidebar-nav-indicator {
        opacity: 0.85;
    }

    .sidebar-nav ul {
        margin-top: 2px;}

    #sidebar-alt .sidebar-nav ul {
        background: rgba(0, 0, 0, 0.02);
    }

    .sidebar-nav ul a {
        padding-left: 18px;
    }

    .sidebar-nav ul ul a {
        padding-left: 28px;
    }

    .sidebar-header {
        padding: 10px 12px 8px;
    }

    .sidebar-header .sidebar-header-title {
        text-transform: uppercase;}

    #sidebar-alt .sidebar-header .sidebar-header-title {
        color: #94a3b8;
        opacity: 1;
    }

    .sidebar-header-options > a,
    .sidebar-nav .sidebar-header-options a {
        opacity: 0.7;
    }
}

@media screen and (max-width: 991px) {
    header.navbar {
        padding: 0;
    }

    .navbar-crm-header {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
}

/* =================================================================
   CRM Login Refresh - Theme aligned
   ================================================================= */

/* (Login styles unified in login-bg-v2 section below) */

/* =================================================================
   Login V2 - Glassmorphism with leaf background
   ================================================================= */

@keyframes loginV2Gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes loginV2Float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -20px) scale(1.05); }
    66%      { transform: translate(-20px, 15px) scale(0.97); }
}

/* Login button - CRM v2 blue primary */
.btn-login-v2 {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    background: #3b82f6;
    border: 1px solid #3b82f6;
    color: #fff;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.btn-login-v2:hover,
.btn-login-v2:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.btn-login-v2:active {
    transform: translateY(0);
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* Responsive */
@media screen and (max-width: 767px) {
    #login-container.login-container-v2 {
        width: calc(100% - 24px);
        left: 12px;
        right: 12px;
        margin-left: 0;
        top: 16px;
    }

    .login-title.login-title-v2 img {
        width: 260px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .full-bg.login-bg-v2,
    .full-bg.login-bg-v2::before {
        animation: none;
    }
}

/* =================================================================
   Contact Page - Legends refresh
   ================================================================= */

.page-contact #frminfodir fieldset > legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 6px);
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-contact #frminfodir fieldset > legend > i {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.10);
}

.page-contact #frminfodir fieldset > legend .pull-right {
    float: none !important;
    margin-top: 0;
    margin-left: auto;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    .page-contact #frminfodir fieldset > legend {
        font-size: 13px;
        padding: 8px 10px;
    }

    .page-contact #frminfodir fieldset > legend .pull-right {
        float: none !important;
        display: block;
        margin-top: 8px;
    }
}

/* =================================================================
   DARK MODE — activated via body.v2-dark
   ================================================================= */

/* Toggle button styles */
.v2-theme-toggle {
    cursor: pointer;
}

.v2-theme-toggle a {
    font-size: 16px !important;
}

/* ── Dark tokens ─────────────────────────────────────────────── */
body.v2-dark {
    --ln-bg:               #0f172a;
    --ln-surface:          rgba(255, 255, 255, 0.06);
    --ln-border:           rgba(255, 255, 255, 0.12);
    --ln-divider:          rgba(255, 255, 255, 0.08);
    --ln-text:             #e2e8f0;
    --ln-text-muted:       #94a3b8;
    --ln-default-bg:       rgba(255, 255, 255, 0.08);
    --ln-default-dark:     #e2e8f0;
    --ln-default-hover-bg: rgba(255, 255, 255, 0.15);
    --ln-shadow-card:  0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --ln-shadow-hover: 0 8px 40px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-bg-strong: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.15);

    --crm-shell-bg-top: rgba(15, 23, 42, 0.6);
    --crm-shell-bg-bottom: rgba(30, 27, 75, 0.6);
    --crm-shell-border: rgba(255, 255, 255, 0.12);
    --crm-shell-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    --crm-accent: #60a5fa;
    --crm-accent-soft: rgba(96, 165, 250, 0.12);
    --crm-accent-strong: #93c5fd;
    --crm-text-main: #e2e8f0;
    --crm-text-muted: #94a3b8;
    --crm-sidebar-bg-top: rgba(30, 27, 75, 0.7);
    --crm-sidebar-bg-bottom: rgba(49, 46, 129, 0.7);
    --crm-sidebar-border: rgba(255, 255, 255, 0.15);
    --crm-sidebar-item-hover: rgba(255, 255, 255, 0.1);
    --crm-sidebar-item-active: rgba(59, 130, 246, 0.2);

    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    background-attachment: fixed;
}

/* ── Dark links ──────────────────────────────────────────────── */
body.v2-dark a { color: #60a5fa; }
body.v2-dark a:hover, body.v2-dark a:focus { color: #93c5fd; }

/* ── Dark block-title ────────────────────────────────────────── */
body.v2-dark .block-title {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.03) 50%, rgba(139, 92, 246, 0.03) 100%);
    border-bottom-color: rgba(59, 130, 246, 0.12);
}

body.v2-dark .block-title h1,
body.v2-dark .block-title h2,
body.v2-dark .block-title h3,
body.v2-dark .block-title h4,
body.v2-dark .block-title h5,
body.v2-dark .block-title h6 {
    color: #e2e8f0;
}

body.v2-dark .block-title h1 i,
body.v2-dark .block-title h2 i,
body.v2-dark .block-title h3 i {
    color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.14) 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

body.v2-dark .block-title h1 strong,
body.v2-dark .block-title h2 strong,
body.v2-dark .block-title h3 strong {
    color: #93c5fd;
}

/* ── Dark nested blocks ──────────────────────────────────────── */
body.v2-dark .block .block,
body.v2-dark .block .block.full {
    border-left-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

body.v2-dark .block .block-title,
body.v2-dark .block .block .block-title {
    background: rgba(255, 255, 255, 0.03);
}

/* ── Dark tabs & pills ───────────────────────────────────────── */
body.v2-dark .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.v2-dark .nav-tabs > li > a { color: #94a3b8; }
body.v2-dark .nav-tabs > li > a:hover,
body.v2-dark .nav-tabs > li > a:focus { color: #e2e8f0; }

body.v2-dark .nav-pills > li > a,
body.v2-dark a[data-toggle="pill"] { color: #94a3b8; }
body.v2-dark .nav-pills > li > a:hover,
body.v2-dark a[data-toggle="pill"]:hover { color: #e2e8f0; background-color: rgba(255, 255, 255, 0.06); }
body.v2-dark .nav-pills > li.active > a[data-toggle="pill"] { background-color: rgba(59, 130, 246, 0.15); color: #93c5fd; }
/* ── Dark forms ──────────────────────────────────────────────── */

/* Dark mode - Style des options dans les select */
body.v2-dark select option {
    background-color: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    padding: 8px 12px;
}

body.v2-dark select option:hover,
body.v2-dark select option:focus,
body.v2-dark select option:checked {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.18) 100%);
    color: #bfdbfe;
}

body.v2-dark select option:disabled {
    background-color: rgba(30, 41, 59, 0.50);
    color: #64748b;
    opacity: 0.6;
}

body.v2-dark .input-group-addon {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
}

body.v2-dark .select2-container--default .select2-selection--single,
body.v2-dark .select2-container--default .select2-selection--multiple,
body.v2-dark .chosen-container-single .chosen-single,
body.v2-dark .chosen-container-multi .chosen-choices {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.v2-dark .chosen-container .chosen-drop {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;}

/* Dark mode - Options dans les dropdowns Chosen */
body.v2-dark .chosen-container .chosen-results li {
    background-color: transparent !important;}

body.v2-dark .chosen-container .chosen-results li.highlighted,
body.v2-dark .chosen-container .chosen-results li.active-result.highlighted {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.18) 100%) !important;
    color: #bfdbfe !important;
}

body.v2-dark .chosen-container .chosen-results li.disabled-result {
    color: #64748b !important;
    opacity: 0.6;
}

/* Dark mode - Dropdowns Select2 */
body.v2-dark .select2-dropdown {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

body.v2-dark .select2-results__option {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

body.v2-dark .select2-results__option--highlighted,
body.v2-dark .select2-results__option[aria-selected="true"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.18) 100%) !important;
    color: #bfdbfe !important;
}

body.v2-dark .select2-results__option--disabled {
    color: #64748b !important;
    opacity: 0.6;
}

body.v2-dark .select2-search--dropdown .select2-search__field {
    background-color: rgba(30, 41, 59, 0.60) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

/* ── Dark tables ─────────────────────────────────────────────── */
body.v2-dark .table > thead > tr > th,
body.v2-dark .table > thead > tr > td {
    background-color: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
}

body.v2-dark .table > thead > tr > th,
body.v2-dark .table > tbody > tr > td,
body.v2-dark .table > tfoot > tr > td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Dark modals ─────────────────────────────────────────────── */
body.v2-dark .modal-content {
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);}

body.v2-dark .modal-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.v2-dark .modal-title { color: #f1f5f9; }

body.v2-dark .modal-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.v2-dark .modal-body .form-bordered .form-group.form-actions:last-child {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ── Dark dropdowns ──────────────────────────────────────────── */
body.v2-dark .dropdown-menu {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

body.v2-dark .dropdown-menu > .divider {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ── Dark panels ─────────────────────────────────────────────── */
body.v2-dark .panel-heading {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

/* ── Dark navbar ─────────────────────────────────────────────── */
body.v2-dark .navbar-crm-header {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 82, 0.4) 50%, rgba(30, 27, 75, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}

body.v2-dark .navbar-crm-header::after {
    background: #43bcfd;
}

body.v2-dark .navbar-crm-header__hamburger:hover,
body.v2-dark .navbar-crm-header__hamburger:focus,
body.v2-dark .navbar-crm-arrow:hover,
body.v2-dark .navbar-crm-arrow:focus,
body.v2-dark .navbar-crm-search-toggle a:hover,
body.v2-dark .navbar-crm-search-toggle a:focus,
body.v2-dark .navbar-crm-header__right > li.open > a,
body.v2-dark .navbar-crm-header__right > li > a:hover,
body.v2-dark .navbar-crm-header__right > li > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #93c5fd;
}

body.v2-dark .navbar-crm-header .nav.navbar-nav-custom > li.open > a,
body.v2-dark .navbar-crm-header .nav.navbar-nav-custom > li > a:hover,
body.v2-dark .navbar-crm-header .nav.navbar-nav-custom > li > a:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #93c5fd !important;
}

body.v2-dark .navbar-crm-nav__link:hover,
body.v2-dark .navbar-crm-nav__link:focus {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #93c5fd;
}

body.v2-dark .navbar-crm-nav__item--active .navbar-crm-nav__link,
body.v2-dark .navbar-crm-nav__item--active .navbar-crm-nav__link:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(139, 92, 246, 0.12) 100%);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

body.v2-dark .navbar-crm-nav__item--active .navbar-crm-nav__link i {
    color: #60a5fa;
}

body.v2-dark .navbar-crm-header__right .dropdown-menu {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

body.v2-dark .navbar-crm-header__right .dropdown-menu > li > a,
body.v2-dark .navbar-crm-header__right .dropdown-menu.dropdown-custom > li > a {
    color: #cbd5e1;
}

body.v2-dark .navbar-crm-header__right .dropdown-menu > li > a:hover,
body.v2-dark .navbar-crm-header__right .dropdown-menu.dropdown-custom > li > a:hover {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

body.v2-dark .navbar-crm-header__right .dropdown-menu .dropdown-header {
    color: #64748b;
}

body.v2-dark #searchres {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ── Dark sidebar ────────────────────────────────────────────── */
@media screen and (min-width: 992px) {
    body.v2-dark #sidebar-scroll {
        border-color: rgba(255, 255, 255, 0.07);
        background: linear-gradient(165deg,
            rgba(30, 41, 82, 0.22) 0%,
            rgba(20, 30, 60, 0.18) 30%,
            rgba(25, 20, 55, 0.16) 60%,
            rgba(15, 23, 42, 0.2) 100%);
        box-shadow:
            0 12px 48px rgba(0, 0, 0, 0.28),
            0 0 0 0.5px rgba(255, 255, 255, 0.05),
            0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
            inset 0 30px 60px rgba(255, 255, 255, 0.02),
            inset 0 -30px 60px rgba(0, 0, 0, 0.08);
    }

    body.v2-dark #sidebar-scroll::after {
        background:
            linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 60%),
            url('/crm/img/logo_sib_small.png') center bottom / cover no-repeat;
        /* background:
            linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 60%),
            url('/crm/img/background_skyscraper.png') center bottom / cover no-repeat; */
        /* background:
            linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 60%),
            url('/crm/img/background-leaf2.jpg') center bottom / cover no-repeat; */
        opacity: 0.3;
        filter: saturate(0.8) brightness(0.7) hue-rotate(-8deg);
    }

    body.v2-dark #sidebar-alt-scroll {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(15, 23, 42, 0.6);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    body.v2-dark #sidebar-alt .sidebar-content { color: #cbd5e1; }

    body.v2-dark .sidebar-brand,
    body.v2-dark .sidebar-title {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
        border-bottom-color: rgba(59, 130, 246, 0.15);
        color: #e2e8f0;
        font-weight: 700;
    }

    body.v2-dark .sidebar-brand i,
    body.v2-dark .sidebar-title i {
        color: #60a5fa;
    }

    body.v2-dark #sidebar-alt .sidebar-brand,
    body.v2-dark #sidebar-alt .sidebar-title {
        background: rgba(255, 255, 255, 0.05);
        border-bottom-color: rgba(255, 255, 255, 0.1);
        color: #cbd5e1;
    }

    body.v2-dark .sidebar-user {
        background: rgba(255, 255, 255, 0.04);
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.v2-dark #sidebar-alt .sidebar-user {
        background: rgba(255, 255, 255, 0.04);
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.v2-dark .sidebar-nav a { color: #cbd5e1; }
    body.v2-dark #sidebar-alt .sidebar-nav a { color: #94a3b8; }

    body.v2-dark .sidebar-nav a:hover,
    body.v2-dark .sidebar-nav a:focus,
    body.v2-dark .sidebar-nav a.open,
    body.v2-dark .sidebar-nav li.active > a {
        color: #f1f5f9;
        background: rgba(59, 130, 246, 0.08);
    }

    body.v2-dark #sidebar-alt .sidebar-nav a:hover,
    body.v2-dark #sidebar-alt .sidebar-nav a:focus,
    body.v2-dark #sidebar-alt .sidebar-nav a.open,
    body.v2-dark #sidebar-alt .sidebar-nav li.active > a {
        color: #e2e8f0;
        background: rgba(255, 255, 255, 0.08);
    }

    body.v2-dark .sidebar-nav a.active,
    body.v2-dark .sidebar-nav ul a.active,
    body.v2-dark .sidebar-nav ul a.active:hover {
        color: #ffffff;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(139, 92, 246, 0.15) 100%);
        border-left: 3px solid #60a5fa;
        padding-left: 11px;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
        font-weight: 600;
    }

    body.v2-dark #sidebar-alt .sidebar-nav a.active,
    body.v2-dark #sidebar-alt .sidebar-nav ul a.active {
        color: #f1f5f9;
        background: rgba(59, 130, 246, 0.15);
    }

    body.v2-dark .sidebar-nav ul { background: rgba(0, 0, 0, 0.2); }
    body.v2-dark #sidebar-alt .sidebar-nav ul { background: rgba(0, 0, 0, 0.15); }
    body.v2-dark #sidebar-alt .sidebar-header .sidebar-header-title { color: #64748b; }

    body.v2-dark .sidebar-user-name { color: #e2e8f0; }
    body.v2-dark .sidebar-user-links a { color: #ffffff; opacity: 0.3; }
    body.v2-dark .sidebar-user-links a:hover { color: #ffffff; opacity: 1; }
    body.v2-dark #sidebar-alt .sidebar-user-name { color: #cbd5e1; }
    body.v2-dark #sidebar-alt .sidebar-user-links a { color: #ffffff; opacity: 0.3; }
    
    /* Fix couleurs mode dark pour sidebar-content et sidebar-brand */
    body.v2-dark .sidebar-content { color: #cbd5e1; }
    body.v2-dark .sidebar-brand,
    body.v2-dark .sidebar-title { color: #e2e8f0; }
}

/* ── Dark footer ─────────────────────────────────────────────── */
body.v2-dark #page-content + footer {
    background-color: rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

body.v2-dark #page-content + footer a {
    color: rgba(255, 255, 255, 0.7);
}

body.v2-dark #login-container .input-group .form-control { color: #e2e8f0; }
body.v2-dark #login-container .input-group-addon { color: #94a3b8; }
body.v2-dark #login-container .input-group-addon a { color: #94a3b8; }
body.v2-dark #login-container .input-group-addon a:hover { color: #e2e8f0; }

/* ── Dark contact legends ────────────────────────────────────── */
body.v2-dark .page-contact #frminfodir fieldset > legend {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

body.v2-dark .page-contact #frminfodir fieldset > legend > i {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
}

/* ========================================
   SETTINGS PAGE - MODERN DESIGN
   ======================================== */

/* Settings Sidebar */
.settings-sidebar-modern {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: sticky;
    top: 20px;
}

.settings-sidebar-header {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
    color: #1d4ed8;
    padding: 2rem 1.75rem;
    text-align: center;
    color: #1d4ed8;
}

.settings-sidebar-header i {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    display: block;
}

.settings-sidebar-header h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1d4ed8 !important;
}

/* Settings Navigation */
.settings-nav-modern {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-nav-modern li {
    margin: 0;
    border-bottom: 1px solid #f3f4f6;
}

.settings-nav-modern li:last-child {
    border-bottom: none;
}

.settings-nav-modern li a {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.75rem;
    color: #4b5563;
    text-decoration: none;
    transition: all 0.3s ease;
    /* font-size: 1.15rem; */
    font-weight: 500;
}

.settings-nav-modern li a i {
    font-size: 1.5rem;
    margin-right: 1.25rem;
    width: 28px;
    text-align: center;
    color: #9ca3af;
    transition: all 0.3s ease;
    display: inline-block;
    font-family: FontAwesome !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.settings-nav-modern li a span {
    flex: 1;
}

.settings-nav-modern li a:hover {
    background: #f9fafb;
    color: #667eea;
    padding-left: 2rem;
}

.settings-nav-modern li a:hover i {
    color: #667eea;
    transform: scale(1.15);
}

.settings-nav-modern li.active a {
    background: lavender !important;
    color: #667eea !important;
    font-weight: 600;
    border-left: 4px solid #667eea;
    padding-left: calc(1.75rem - 4px);
}

.settings-nav-modern li.active a i {
    color: #667eea;
}

/* Responsive Settings */
@media (max-width: 991px) {
    .settings-sidebar-modern {
        position: static;
        margin-bottom: 2rem;
    }

    .settings-nav-modern li a {
        font-size: 1.05rem;
        padding: 1rem 1.5rem;
    }
}

/* Page Icons in block-title */
.block-title .page-icon {
    height: 60px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    margin-left: 15px;
    vertical-align: middle;
}

/* Responsive adjustments for page icons */
@media (max-width: 768px) {
    .block-title .page-icon {
        height: 45px;
        max-width: 60px;
        margin-left: 10px;
    }
}

@media (max-width: 480px) {
    .block-title .page-icon {
        height: 35px;
        max-width: 50px;
        margin-left: 5px;
    }
}

/* Page Icons in content-header (alternative option) */
.content-header .page-header-icon {
    text-align: center;
    padding: 20px 0;
}

.content-header .page-header-icon img {
    height: 80px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.content-header .page-header-icon h1 {
    margin: 10px 0 0 0;
    font-size: 24px;
    font-weight: 600;
    color: #394263;
}

/* Responsive adjustments for content-header icons */
@media (max-width: 768px) {
    .content-header .page-header-icon img {
        height: 60px;
        max-width: 90px;
    }
    
    .content-header .page-header-icon h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .content-header .page-header-icon {
        padding: 15px 0;
    }
    
    .content-header .page-header-icon img {
        height: 50px;
        max-width: 70px;
    }
    
    .content-header .page-header-icon h1 {
        font-size: 18px;
    }
}

/* légende des cadres */
.cadre-legend {
  padding: 8px 12px;
  margin-bottom: 12px;
    /* font-weight: 600; */}

/* Commentaires - Nouveau design */
#tabs-coment .comment-item {
	transition: all 0.2s ease;
}

#tabs-coment .comment-item:hover {
	background: rgba(0,0,0,0.04) !important;
}

#tabs-coment #comment:focus {
	border-color: #428bca !important;
	box-shadow: 0 0 0 3px rgba(66, 139, 202, 0.1) !important;
	outline: none !important;
}

.btdelcomment:hover {
	background: rgba(220, 53, 69, 0.1) !important;
}

/* Scroll personnalisé pour la liste des commentaires */
#comments-list::-webkit-scrollbar {
	width: 8px;
}

#comments-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

#comments-list::-webkit-scrollbar-thumb {
	background: #428bca;
	border-radius: 4px;
}

#comments-list::-webkit-scrollbar-thumb:hover {
	background: #3071a9;
}

/* END - PAGE CONTACT - Refonte visuelle */

body.dragging, body.dragging *, td.crosh {cursor: move !important;}
.cursor-pointer{
    cursor: pointer;
}
.crosh{
    cursor: move !important;
}

#frminfodir .control-label{text-align:left}

.ui-multiselect-menu{z-index: 999;}

/* .gridlbl{display: block; padding: 7px;} */
.gridlbl{
    display: inline-block !important;
    width: 100%;
    text-align: center;
    margin-left: -3px;
    padding: 7px;
    border-radius: 15px;
}
.gridlblinline{display: inline-block !important; padding: 2px 4px; border-radius: 15px;}
.ui-state-default {font-weight: inherit !important;}
.bottomrad15px{border-radius: 0 0 15px 15px;}
.rad15px{border-radius: 15px;}
.rad30px{border-radius: 30px;}
.paddingside5px{padding:0 5px;}
.roundicon{
    border-radius: 15px;
    padding-right: 8px;
    padding-left: 8px;
    min-width: 30px;
    text-align: center;
}
/* GAB CUSTOM CSS BTN  */

/* Variante douce (ex alt) */
.colpurple-alt {
    background: linear-gradient(135deg, #e8ecfc 0%, #d4ddf9 100%) !important;
    color: #5568d3 !important;
    border: 1px solid rgba(85, 104, 211, 0.2) !important;
    /* backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); */
    transition: all 0.25s ease;
}

.colpurple-alt:hover {
    background: linear-gradient(135deg, #d4ddf9 0%, #c2cff7 100%) !important;
    border-color: rgba(85, 104, 211, 0.35) !important;
    color: #3f51c7 !important;
}

/* Texte */
.text-colpurple,
.text-colpurple:hover,
a.text-colpurple,
a.text-colpurple:hover,
a.text-colpurple:focus {
    color: #5568d3 !important;
}
/* Variante douce (alt) */
.colgreencan-alt {
    background: linear-gradient(135deg, #e7fbf9 0%, #d4f3f0 100%) !important;
    color: #008f88 !important;
    border: 1px solid rgba(0, 143, 136, 0.2) !important;
    /* backdrop-filter: blur(6px); */
    /* -webkit-backdrop-filter: blur(6px); */
    transition: all 0.25s ease;
}

.colgreencan-alt:hover {
    background: linear-gradient(135deg, #d4f3f0 0%, #bff0ea 100%) !important;
    color: #006f69 !important;
    border-color: rgba(0, 143, 136, 0.35) !important;
}

/* Variante principale */
.colgreencan {
    background: linear-gradient(135deg, #00aaa0 0%, #00c2b5 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 170, 160, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 170, 160, 0.25);
    transition: all 0.25s ease;
}

.colgreencan:hover {
    background: linear-gradient(135deg, #00968d 0%, #00b3a6 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 170, 160, 0.35);
    color: #fff !important;
}

/* Texte */
.text-colgreencan,
.text-colgreencan:hover,
a.text-colgreencan,
a.text-colgreencan:hover,
a.text-colgreencan:focus {
    color: #008f88 !important;
}

.colcornflowerblue-alt{
    color:cornflowerblue;
    border-color: cornflowerblue;
    background-color: #fff;
}
.colcornflowerblue-alt:hover{
    background-color:cornflowerblue;
    color:#fff
}

.colcornflowerblue{
    background-color:cornflowerblue;
    /* border-color: cornflowerblue; */
    color: #fff;
}
.colcornflowerblue:hover{
    color:cornflowerblue;
    background-color:#fff
}

.text-colcornflowerblue,
.text-colcornflowerblue:hover,
a.text-colcornflowerblue,
a.text-colcornflowerblue:hover,
a.text-colcornflowerblue:focus {
    color: cornflowerblue;
}

.text-colorangeflash,
.text-colorangeflash:hover,
a.text-colorangeflash,
a.text-colorangeflash:hover,
a.text-colorangeflash:focus {
    color: #e96b55 !important;
}

.colfushia-alt {
    background: linear-gradient(135deg, #ffe6f1 0%, #ffd0e6 100%) !important;
    color: #b10b5a !important;
    border: 1px solid rgba(197, 13, 102, 0.2) !important;
    /* backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); */
    transition: all 0.25s ease;
}

.colfushia-alt:hover {
    background: linear-gradient(135deg, #ffd0e6 0%, #ffb7d6 100%) !important;
    color: #8f0948 !important;
}

.text-colfushia,
.text-colfushia:hover,
a.text-colfushia,
a.text-colfushia:hover,
a.text-colfushia:focus {
    color: #b10b5a !important;
}

.default-alt{
    color: #999;
    background-color: #fff;
    border: 1px solid #999;
}

/* Boutons frais */

.btn-primary.fresh {
  border: none !important;
  /* border-radius: 30px !important; */
}

.btn-info.fresh {
  background: #dfe7fd !important;
  color: #003566 !important;
  border: none !important;
  /* border-radius: 30px !important; */
}
.btn-info.fresh:hover,
.btn-info.fresh:focus {
  background: #003566 !important;
  color: #fff !important;
}

.btn-success.fresh {
  background: #cbf3f0 !important;
  color: #0a9396 !important;
  border: none !important;
  /* border-radius: 30px !important; */
}
.btn-success.fresh:hover,
.btn-success.fresh:focus {
  background: #0a9396 !important;
  color: #fff !important;
}

.btn-danger.fresh {
  background: #ffb3c6 !important;
  color: #c9184a !important;
  border: none !important;
  /* border-radius: 30px !important; */
}
.btn-danger.fresh:hover,
.btn-danger.fresh:focus {
  background: #c9184a !important;
  color: #fff !important;
}

.btn-warning.fresh {
  background: #ffe5d9 !important;
  color: #f3722c !important;
  border: none !important;
  /* border-radius: 30px !important; */
}
.btn-warning.fresh:hover,
.btn-warning.fresh:focus {
  background: #f3722c !important;
  color: #fff !important;
}

.btn-default.fresh {
  background: #dee2e6 !important;
  color: #6c757d !important;
  border: none !important;
  /* border-radius: 30px !important; */
}
.btn-default.fresh:hover,
.btn-default.fresh:focus {
  background: #6c757d !important;
  color: #fff !important;
}

/* BTN ALT – Couleurs inversées par défaut, hover revient à clair */

.btn-primary.btn-alt.fresh {
  background: #0077b6 !important;
  color: #fff !important;
}
.btn-primary.btn-alt.fresh:hover,
.btn-primary.btn-alt.fresh:focus {
  background: #bde0fe !important;
  color: #0077b6 !important;
}

.btn-info.btn-alt.fresh {
  background: #003566 !important;
  color: #fff !important;
}
.btn-info.btn-alt.fresh:hover,
.btn-info.btn-alt.fresh:focus {
  background: #dfe7fd !important;
  color: #003566 !important;
}

.btn-success.btn-alt.fresh {
  background: #0a9396 !important;
  color: #fff !important;
}
.btn-success.btn-alt.fresh:hover,
.btn-success.btn-alt.fresh:focus {
  background: #cbf3f0 !important;
  color: #0a9396 !important;
}

.btn-danger.btn-alt.fresh {
  background: #c9184a !important;
  color: #fff !important;
}
.btn-danger.btn-alt.fresh:hover,
.btn-danger.btn-alt.fresh:focus {
  background: #ffb3c6 !important;
  color: #c9184a !important;
}

.btn-warning.btn-alt.fresh {
  background: #f3722c !important;
  color: #fff !important;
}
.btn-warning.btn-alt.fresh:hover,
.btn-warning.btn-alt.fresh:focus {
  background: #ffe5d9 !important;
  color: #f3722c !important;
}

.btn-default.btn-alt.fresh {
  background: #6c757d !important;
  color: #fff !important;
}
.btn-default.btn-alt.fresh:hover,
.btn-default.btn-alt.fresh:focus {
  background: #dee2e6 !important;
  color: #6c757d !important;
}

/* LABEL ALT – même logique */

.label-info.btn-alt.fresh {
  background: #003566 !important;
  color: #fff !important;
}
.label-info.btn-alt.fresh:hover,
.label-info.btn-alt.fresh:focus {
  background: #dfe7fd !important;
  color: #003566 !important;
}

.label-success.btn-alt.fresh {
  background: #0a9396 !important;
  color: #fff !important;
}
.label-success.btn-alt.fresh:hover,
.label-success.btn-alt.fresh:focus {
  background: #cbf3f0 !important;
  color: #0a9396 !important;
}

.label-danger.btn-alt.fresh {
  background: #c9184a !important;
  color: #fff !important;
}
.label-danger.btn-alt.fresh:hover,
.label-danger.btn-alt.fresh:focus {
  background: #ffb3c6 !important;
  color: #c9184a !important;
}

.label-warning.btn-alt.fresh {
  background: #f3722c !important;
  color: #fff !important;
}
.label-warning.btn-alt.fresh:hover,
.label-warning.btn-alt.fresh:focus {
  background: #ffe5d9 !important;
  color: #f3722c !important;
}

.label-default.btn-alt.fresh {
  background: #6c757d !important;
  color: #fff !important;
}
.label-default.btn-alt.fresh:hover,
.label-default.btn-alt.fresh:focus {
  background: #dee2e6 !important;
  color: #6c757d !important;
}

/* Alertes Fresh */
.alert.fresh {
    border-top-width: 0 !important;
    border-right-width: 2px !important;
    border-bottom-width: 0 !important;
    border-left-width: 2px !important;
    border-radius: 15px !important;
    border-style: solid !important;
}

.alert-danger.fresh {
    background: #ffccd5 !important;   /* plus clair que #ffd1cc */
    color: #c9184a !important;        /* rouge plus profond */
    border-color: #ff8fab !important;
}

.alert-danger.fresh .alert-link {
    color: #c9184a !important;
}

.alert-danger.fresh:hover,
.alert-danger.fresh:focus {
    background: #c9184a !important;
    color: #fff !important;
}

.alert-warning.fresh {
    background: #fff1e6 !important;   /* plus clair que #ffe4cc */
    color: #f3722c !important;
    border-color: #ffd6b2 !important;
}

.alert-warning.fresh .alert-link {
    color: #f3722c !important;
}

.alert-warning.fresh:hover,
.alert-warning.fresh:focus {
    background: #f3722c !important;
    color: #fff !important;
}

.alert-success.fresh {
    background: #e6f6ef !important;   /* plus clair que #daf2e4 */
    color: #0a9396 !important;
    border-color: #b8e5cb !important;
}

.alert-success.fresh .alert-link {
    color: #0a9396 !important;
}

.alert-success.fresh:hover,
.alert-success.fresh:focus {
    background: #0a9396 !important;
    color: #fff !important;
}

.alert-info.fresh {
    background: #edf2fb !important;   /* plus clair que #dae8f2 */
    color: #003566 !important;
    border-color: #b8d2e5 !important;
}

.alert-info.fresh .alert-link {
    color: #003566 !important;
}

.alert-info.fresh:hover,
.alert-info.fresh:focus {
    background: #003566 !important;
    color: #fff !important;
}

/* ── Warning global override (fresh colors) ── */
.btn-warning {
    background-color: #ffe5d9;
    border-color: #ffe5d9;
    color: #f3722c;
}
.btn-warning:hover {
    background-color: #f3722c;
    border-color: #f3722c;
    color: #fff;
}
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning:active:hover,
.btn-warning:active:focus,
.btn-warning.active,
.btn-warning.active:hover,
.btn-warning.active:focus,
.open .btn-warning.dropdown-toggle,
.open .btn-warning.dropdown-toggle:hover,
.open .btn-warning.dropdown-toggle:focus,
.open .btn-warning.dropdown-toggle.focus {
    background-color: #f3722c;
    border-color: #f3722c;
    color: #fff;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
    background-color: #f3722c;
    color: #fff;
}

.text-warning,
.text-warning:hover,
a.text-warning,
a.text-warning:hover,
a.text-warning:focus {
    color: #f3722c;
}

.alert-warning {
    background-color: #ffe5d9;
    border-color: #ffd6b2;
    color: #f3722c;
}
.alert-warning .alert-link {
    color: #f3722c;
}

/* =================================================================
   Crystal Clear Design System — Global Tokens & Components
   ================================================================= */
/* Police : auto-hébergée, voir css/fonts-locales.css (11/11/2026) — l'@import vers Google bloquait l'affichage tant que Google ne répondait pas */

:root {
    /* ── Fond ── */
    --cc-bg: #F1F5F9;
    --cc-bg-alt: #E2E8F0;

    /* ── Surfaces glass ── */
    --cc-glass: rgba(255, 255, 255, 0.6);
    --cc-glass-heavy: rgba(255, 255, 255, 0.82);
    --cc-border: rgba(255, 255, 255, 0.4);
    --cc-border-subtle: rgba(148, 163, 184, 0.18);
    --cc-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    --cc-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.10);
    --cc-blur: blur(20px);

    /* ── Texte ── */
    --cc-text: #0F172A;
    --cc-text-secondary: #475569;
    --cc-text-muted: #94A3B8;

    /* ── Accent bleu-violet ── */
    --cc-accent: #3B82F6;
    --cc-accent-soft: rgba(59, 130, 246, 0.12);
    --cc-accent-hover: #1d4ed8;
    --cc-accent-secondary: rgba(139, 92, 246, 0.10);
    --cc-accent-border: rgba(59, 130, 246, 0.18);
    --cc-accent-shadow: rgba(59, 130, 246, 0.1);
    --cc-accent-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);

    /* ── Statuts ── */
    --cc-success: #059669;
    --cc-warning: #D97706;
    --cc-danger: #DC2626;
    --cc-info: #0284C7;

    /* ── Rayons ── */
    --cc-radius: 16px;
    --cc-radius-sm: 10px;
}

/* ── Sticky Header Bar ── */
.page-header-bar {
    background: var(--cc-glass-heavy);
    -webkit-backdrop-filter: var(--cc-blur);
    border-bottom: 1px solid var(--cc-border);
    padding: 18px 28px;
    margin: -15px -15px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    margin: 5px;}
.page-header-bar .page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-text);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-header-bar .page-title i {
    color: var(--cc-accent);
    font-size: 22px;
}
.page-header-bar .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Glass Block ── */
.cc-block {
    background: var(--cc-glass);
    -webkit-backdrop-filter: var(--cc-blur);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    margin-bottom: 20px;}
.cc-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--cc-border-subtle);
}
.cc-block-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--cc-text);
    letter-spacing: -0.2px;
}
.cc-block-header h2 strong { font-weight: 800; }
.cc-block-body { padding: 20px 22px; }

/* ── Buttons Crystal Clear ── */
.btn-crystal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: var(--cc-radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-crystal-sm { padding: 7px 16px; font-size: 12px; }

.btn-crystal-teal {
    background: var(--cc-accent-gradient);
    color: var(--cc-accent-hover);
    border: 1px solid var(--cc-accent-border);
    box-shadow: 0 2px 8px var(--cc-accent-shadow);
}
.btn-crystal-teal:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(139, 92, 246, 0.18) 100%);
    color: #1e3a8a;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.2);
}

.btn-crystal-ghost {
    background: var(--cc-accent-gradient);
    color: var(--cc-accent-hover);
    border: 1px solid var(--cc-accent-border);
    box-shadow: 0 2px 8px var(--cc-accent-shadow);
}
.btn-crystal-ghost:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(139, 92, 246, 0.18) 100%);
    color: #1e3a8a;
}

.btn-crystal-success {
    background: var(--cc-success);
    color: #fff;
}
.btn-crystal-success:hover {
    background: #047857;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
    color: #fff;
}

.btn-crystal-warning {
    background: #ffe5d9;
    color: #f3722c;
    border: none;
}
.btn-crystal-warning:hover {
    background: #f3722c;
    color: #fff;
}

.btn-crystal-danger {
    background: rgba(220, 38, 38, 0.08);
    color: var(--cc-danger);
}
.btn-crystal-danger:hover {
    background: rgba(220, 38, 38, 0.16);
}

/* ── Sub-tabs pills (Crystal Clear) ── */
.cc-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
    border: none;
}
.cc-sub-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-secondary);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--cc-border-subtle);
    text-decoration: none;
    transition: all 0.2s;
}
.cc-sub-tabs li a:hover {
    background: var(--cc-accent-soft);
    color: var(--cc-accent);
    border-color: var(--cc-accent-border);
}
.cc-sub-tabs li.active a,
.cc-sub-tabs li a:focus {
    background: var(--cc-accent-gradient);
    color: var(--cc-accent-hover);
    border-color: var(--cc-accent-border);
    font-weight: 600;
}
.cc-sub-tabs li a i {
    font-size: 12px;
}

/* ── Alert Crystal Clear ── */
.cc-alert-info {
    background: var(--cc-accent-soft);
    border: 1px solid var(--cc-accent-border);
    border-radius: var(--cc-radius-sm);
    padding: 12px 18px;
    color: var(--cc-text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}
.cc-alert-info strong { color: var(--cc-accent-hover); }
.cc-alert-info i { color: var(--cc-accent); margin-right: 6px; }

/* ── Tables Crystal Clear ── */
.propal-custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.propal-custom-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 11px 16px;
    background: rgba(241, 245, 249, 0.92);
    backdrop-filter: blur(8px);
    color: var(--cc-text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid var(--cc-border-subtle);
}
.propal-custom-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    color: var(--cc-text);
    vertical-align: middle;
}
.propal-custom-table tbody tr {
    transition: background 0.15s;
}
.propal-custom-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.5);
}
.propal-custom-table .small-muted {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--cc-text-muted);
}

/* ── Modals Crystal Clear ── */
.modal .modal-content.cc-modal,
.page-settings .modal .modal-content,
.page-rights-management .modal .modal-content {
    background: var(--cc-glass-heavy);
    backdrop-filter: var(--cc-blur);
    -webkit-backdrop-filter: var(--cc-blur);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-lg);
    border-top: 3px solid var(--cc-accent);
}

/* ── Form Controls Crystal Clear ── */
.page-settings .form-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--cc-border-subtle);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}
/* fusion 12/11/2026 : priorité inchangée (:where) ; ces propriétés restent à la grille (JDGrid.css passait après) */
.page-settings .form-control:where(:not(.jdgridtb .form-control, .form-control.jdgliveinp)) {
    font-size: 13px;
    color: var(--cc-text);
}
.page-settings .form-control:focus {
    border-color: var(--cc-accent);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04), 0 0 0 3px var(--cc-accent-soft);
    outline: none;
}

/* ── Custom Scrollbar Crystal Clear ── */
.cc-block::-webkit-scrollbar { width: 6px; height: 6px; }
.cc-block::-webkit-scrollbar-track { background: transparent; }
.cc-block::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; }

/* ── Animation Crystal Clear ── */
@keyframes ccFadeSlide {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive Crystal Clear ── */
@media (max-width: 768px) {
    .page-header-bar { flex-direction: column; gap: 12px; padding: 14px 18px; }
    .cc-sub-tabs { flex-direction: column; }
    .cc-sub-tabs li a { width: 100%; justify-content: center; }
}

/* ── Toolbar ── */
.fc-toolbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 18px;}
.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
}
.fc-toolbar h2 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;}

/* ── Buttons — reset plugins.css .fc button (height:2.1em fixe + padding:0) ── */
.fc button {
    height: auto;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Buttons (surcharge plugins.css .fc-state-default) ── */
.fc .fc-state-default {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;}
.fc .fc-state-hover {
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
    text-decoration: none;
    background-position: 0 0;}
.fc .fc-state-down,
.fc .fc-state-active {
    text-shadow: none;}
.fc .fc-state-disabled {
    box-shadow: none;
    opacity: 0.5;
    cursor: not-allowed;}
/* Corner radius on groups — keep only outer edges rounded */
.fc .fc-button-group > .fc-state-default.fc-corner-left  { border-radius: 10px 0 0 10px; }
.fc .fc-button-group > .fc-state-default.fc-corner-right { border-radius: 0 10px 10px 0; }
.fc .fc-button-group > .fc-state-default:not(.fc-corner-left):not(.fc-corner-right) { border-radius: 0; }

/* ── Column headers / day cells ── */
.fc-day-header,
.fc-axis {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    text-transform: uppercase;}
.fc-axis.fc-time span {
    font-size: 10px;
    font-weight: 500;}

/* ── Resource area — typographie uniquement, pas de background imposé ── */
.fc-resource-area th {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

/* ── Events ── */
.fc .fc-event,
.fc .fc-event:hover {
    font-family: 'Inter', sans-serif;
    transition: transform 0.15s, box-shadow 0.15s;}
.fc .fc-event .fc-title {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.fc .fc-event .fc-time {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}
.fc-time-grid-event:hover {
    min-height: 100px;
    min-width: 200px;
    transform: translateY(-2px) scale(1.01);
    left: 0px !important;
    opacity: 0.98;
    z-index: 999 !important;}

/* ── List view ── */
.fc-list-heading td {
    font-family: 'Inter', sans-serif;
    font-size: 12px;}
.fc-list-item-title a {
    font-weight: 600;}

/* ── Scrollbars ── */
.fc-scroller::-webkit-scrollbar { width: 5px; height: 5px; }
.fc-scroller::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════════════════════════════════
   DARK MODE — body.v2-dark
   ════════════════════════════════════════════════ */
body.v2-dark .fc-toolbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);}

body.v2-dark .fc .fc-state-default {
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);}
body.v2-dark .fc .fc-state-hover {
    background-image: linear-gradient(135deg, rgba(96,165,250,.28) 0%, rgba(167,139,250,.22) 100%);
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.22);
    background-position: 0 0;}
body.v2-dark .fc .fc-state-down,
body.v2-dark .fc .fc-state-active {
    background-image: linear-gradient(135deg, #3B82F6 0%, #7C3AED 100%);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);}
body.v2-dark .fc .fc-state-disabled {
    background-image: none;}
body.v2-dark .fc-resource-area th {
    color: #94a3b8;
}

/* ── Tabler Icons – Utilitaires (remplacement des modificateurs FA) ── */

/* Taille de base (+25% pour compenser les marges internes des glyphes Tabler vs FA/Glyphicons) */
.ti { font-size: inherit; vertical-align: -0.125em; line-height: 1; }

/* Tailles relatives */
.ti-lg  { font-size: 1.6em; line-height: 0.75em; vertical-align: -15%; }
.ti-2x  { font-size: 2em; }
.ti-3x  { font-size: 3em; }
.ti-4x  { font-size: 4em; }
.ti-5x  { font-size: 5em; }

/* Largeur fixe (comme fa-fw) */
.ti-fw  { width: 1.28571429em; text-align: center; }

/* Animation spinner */
@keyframes ti-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.ti-spin { animation: ti-spin 1s linear infinite; display: inline-block; }

/* ================================================================
   Sidebar nav : texte long → ligne unique + défilement au survol
   ================================================================ */

/* Clip overflow ET interdiction de retour à la ligne sur le lien.
   Sans white-space:nowrap sur le <a>, le span en inline-block
   bascule à la ligne dès que son max-width est levé au survol. */
.sidebar-nav > li > a {
    overflow: hidden;
    white-space: nowrap;
}

/* Seul le <span> (pas le <i> indicateur) reçoit les styles de texte.
   display:inline-block + max-width permettent l'ellipsis au repos
   et le transform translateX pour le défilement au survol. */
.sidebar-nav > li > a > span.sidebar-nav-mini-hide {
    display: inline-block;
    vertical-align: middle;
    /* réserve la place pour l'icône + l'indicateur flottant */
    max-width: calc(100% - 36px);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: none; /* pas de transition parasite */
}

/* Au survol : on lève le clip et on lance l'animation.
   --scroll-dist est calculé en JS (mouseenter) pour connaître
   exactement le débordement réel du texte. */
.sidebar-nav > li > a:hover > span.sidebar-nav-mini-hide {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    animation: sidebar-nav-scroll 2.5s 0.15s ease-in-out infinite alternate;
}

@keyframes sidebar-nav-scroll {
    0%,  15% { transform: translateX(0); }
    85%, 100% { transform: translateX(var(--scroll-dist, 0px)); }
}

/* Niveaux inférieurs (sous-menus) — texte brut dans le <a>,
   troncature simple (pas de marquee sans wrapper span). */
.sidebar-nav ul a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =============================================================
   DARK MODE — Crystal Clear Design System
   Redéfinition des tokens --cc-* + overrides composants
   ============================================================= */

/* ── Tokens CSS : surcharge des variables --cc-* ── */
body.v2-dark {
    --cc-bg:               #0f172a;
    --cc-bg-alt:           #1e293b;
    --cc-glass:            rgba(255, 255, 255, 0.06);
    --cc-glass-heavy:      rgba(15, 23, 42, 0.92);
    --cc-border:           rgba(255, 255, 255, 0.10);
    --cc-border-subtle:    rgba(255, 255, 255, 0.08);
    --cc-shadow:           0 8px 32px rgba(0, 0, 0, 0.35);
    --cc-shadow-lg:        0 16px 48px rgba(0, 0, 0, 0.45);
    --cc-text:             #e2e8f0;
    --cc-text-secondary:   #94a3b8;
    --cc-text-muted:       #64748b;
    --cc-accent:           #60a5fa;
    --cc-accent-soft:      rgba(96, 165, 250, 0.15);
    --cc-accent-hover:     #93c5fd;
    --cc-accent-secondary: rgba(139, 92, 246, 0.15);
    --cc-accent-border:    rgba(96, 165, 250, 0.30);
    --cc-accent-shadow:    rgba(96, 165, 250, 0.15);
    --cc-accent-gradient:  linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(139, 92, 246, 0.12) 100%);
}

/* ── page-header-bar (settings, rights, stocks…) ── */
body.v2-dark .page-header-bar {
    background: rgba(15, 23, 42, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ── cc-block ── */
body.v2-dark .cc-block {
    background: rgba(15, 23, 42, 0.60);
    border-color: rgba(255, 255, 255, 0.08);
}
body.v2-dark .cc-block-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.v2-dark .cc-block-header h2 { color: #e2e8f0; }

/* ── propal-custom-table ── */
body.v2-dark .propal-custom-table th {
    background: rgba(15, 23, 42, 0.88);
    color: #64748b;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.v2-dark .propal-custom-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.v2-dark .propal-custom-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
body.v2-dark .propal-custom-table .small-muted   { color: #64748b; }

/* ── cc-sub-tabs ── */
body.v2-dark .cc-sub-tabs li a {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Crystal Clear form controls ── */
body.v2-dark .page-settings .form-control {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
}
/* fusion 12/11/2026 : priorité inchangée (:where) ; ces propriétés restent à la grille (JDGrid.css passait après) */
body.v2-dark .page-settings .form-control:where(:not(.jdgridtb .form-control)) {
    color: #e2e8f0;
}

/* ── Rights : éléments à couleurs en dur ── */
body.v2-dark .rights-matrix th,
body.v2-dark .rights-matrix td { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.v2-dark .rights-matrix thead th {
    background: rgba(15, 23, 42, 0.92);
    color: #64748b;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.v2-dark .rights-matrix th.resource-header {
    background: rgba(15, 23, 42, 0.95);
    color: #94a3b8;
}
body.v2-dark .rights-matrix td.resource-name {
    background: rgba(15, 23, 42, 0.80);
    color: #e2e8f0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
}
body.v2-dark .rights-matrix td.resource-name:hover { background: rgba(30, 41, 59, 0.90); }
body.v2-dark .rights-matrix td.resource-name .small-muted { color: #64748b; }
body.v2-dark .rights-matrix tbody tr:hover td:not(.resource-name) { background: rgba(96, 165, 250, 0.06); }
body.v2-dark .rights-matrix .perm-checkbox {
    background: rgba(30, 41, 59, 0.80);
    border-color: rgba(255, 255, 255, 0.15);
}
body.v2-dark .rights-matrix .btn-view-user:hover { color: #93c5fd; }

/* ── Filter selects (rights.php — couleurs en dur) ── */
body.v2-dark .filter-group select {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}
/* =============================================================
   DARK MODE — Dashboard (crm/index.php)
   Composants dash-glass-* glassmorphism
   ============================================================= */

body.v2-dark .dash-glass-btn:hover {
    border-color: rgba(96, 165, 250, 0.40);
    text-decoration: none;}
body.v2-dark .dash-glass-kpi .dash-kpi-helper:hover { color: rgba(226, 232, 240, 0.80); }
/* =============================================================
   DARK MODE — Planning V2 (crm/v2planning.php)
   ============================================================= */

body.v2-dark .span_produit {
    background-color: rgba(15, 23, 42, 0.65);
    border-color: rgba(96, 165, 250, 0.40);
    color: #93c5fd;
}

/* =============================================================
   DARK MODE — Stocks (crm/stocks.php)
   ============================================================= */
body.v2-dark #page-content.page-lottery .block.full {
    border-color: rgba(255, 255, 255, 0.10);
}
body.v2-dark #page-content.page-lottery .block-title {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.85) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.v2-dark #page-content.page-lottery .block-title h2 { color: #e2e8f0; }

/* =============================================================
   DARK MODE — project.php
   ============================================================= */

/* Legends : Bootstrap force color:#333333, on surcharge globalement */
body.v2-dark fieldset legend {
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* Spans avec couleur pastel en inline style — on rend lisible avec !important */
body.v2-dark #blocproject fieldset legend span {
    color: #cbd5e1 !important;
}

/* #tabs-ope-mo → #contdevislines fond blanc inline */
body.v2-dark #contdevislines {
    background-color: rgba(15, 23, 42, 0.70) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) !important;
}

/* =============================================================================
   UI partagée — 2 composants indépendants :
     1. .kpi-*  : cartes KPI — désormais dans css/page-liste.css (11/11/2026)
     2. .prio-* : picker segmenté de priorité (sav.php, sav_ticket.php)

   Les box-shadow, opacity du halo et border-radius sont calibrés : ne pas les
   retoucher. La coloration passe uniquement par les variables inline
   --card-accent (KPI) et --prio-color / --prio-bg (picker).
   Dark mode : body.v2-dark (posé par inc/template_start.php).
   ============================================================================= */

/* ── KPI cards ──────────────────────────────────────────────────
   11/11/2026 : déplacées dans css/page-liste.css (charte des pages-listes),
   en « relief + verre » sur les jetons du thème (l'ancienne version avait un
   gris fixe #eef1f5 qui ne suivait ni España, ni Menthe, ni le verre).
   Copie de l'ancienne recette : ~/sauvegardes_sib/2026-11-11_charte/main.css */

/* ── Priority picker ──────────────────────────────────────────── */
.prio-picker { display: flex; gap: 8px; }

.prio-opt {
    flex: 1;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 9px 6px;
    background: rgba(0,0,0,.04);
    color: #64748b;
    cursor: pointer;
    font-size: .87em;
    font-weight: 600;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.prio-opt .ti { font-size: 1.3em; }

.prio-opt:hover {
    border-color: var(--prio-color);
    color: var(--prio-color);
}
.prio-opt.selected {
    border-color: var(--prio-color);
    background: var(--prio-bg);
    color: var(--prio-color);
}

/* Dark mode */
body.v2-dark .prio-opt          { background: rgba(255,255,255,.06); color: #94a3b8; }
body.v2-dark .prio-opt.selected { background: var(--prio-bg); color: var(--prio-color); }

/* #################################################################
   PARTIE 2 — THÈME (ex theme-v3.css)
   ################################################################# */

/* Police : auto-hébergée, voir css/fonts-locales.css (11/11/2026) — l'@import vers Google bloquait l'affichage tant que Google ne répondait pas */

/* =================================================================
   1. PRIMITIVES COMMUNES
   -----------------------------------------------------------------
   DEUX RÔLES DE COULEUR, à ne pas confondre :

   --t3-brand*   FIXE, identique dans les trois thèmes.
                 Alimente les composants : .btn-primary,
                 .label-primary, --ln-primary*, le focus des champs
                 et les liens. Ce qui porte une sémantique de
                 produit ne doit pas changer avec la déco.

   --t3-accent*  VARIABLE selon le thème choisi.
                 Alimente le chrome : fond, orbes, bordures des
                 blocs, sidebar et navbar, états actifs de
                 navigation, ombres colorées.

   Le focus des champs est volontairement sur brand : sur le thème
   Espagne, une bordure rouge au focus se lirait comme une erreur
   de saisie.
   ================================================================= */

body.t3 {
    /* ── Typo ── */
    --t3-font: "Manrope", "Inter", -apple-system, "Segoe UI", sans-serif;
    --t3-size: 13.5px;
    --t3-lh: 1.55;
    --t3-tracking: -0.014em;
    --t3-weight-strong: 700;

    /* --t3-brand* est défini par thème (section 2) : c'est la
       couleur d'action du produit, pas un signal sémantique. */

    /* ── Verre ── */
    --t3-glass: rgba(255, 255, 255, 0.42);
    --t3-glass-hi: rgba(255, 255, 255, 0.68);
    --t3-glass-lo: rgba(255, 255, 255, 0.28);
    --t3-border: rgba(255, 255, 255, 0.75);
    --t3-blur: 26px;
    --t3-blur-hi: 40px;

    /* ── Rayons ── Volontairement sobres : le caractère vient du
       verre et de la couleur, pas de l'arrondi. ── */
    --t3-radius: 10px;
    --t3-radius-sm: 7px;
    --t3-radius-lg: 14px;

    /* Chevron des selects — voir section 14. Deux traces identiques,
       seule la couleur du trait change. */
    --t3-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234c5670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --t3-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239aa5bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.t3.v2-dark {
    --t3-glass: rgba(255, 255, 255, 0.07);
    --t3-glass-hi: rgba(255, 255, 255, 0.13);
    --t3-glass-lo: rgba(255, 255, 255, 0.045);
    --t3-border: rgba(255, 255, 255, 0.16);
}

/* =================================================================
   2. THÈMES D'AMBIANCE
   -----------------------------------------------------------------
   Sélection par une seconde classe sur <body> :
       t3-azur     bleu / rose      (défaut, thème actuel)
       t3-espana   rouge / or       (palette de la page de login)
       t3-menthe   vert / lime

   Sans seconde classe, Azur s'applique.
   ================================================================= */

/* ─────────────────────────────────────────────────────────────────
   AZUR — le thème actuel
   ───────────────────────────────────────────────────────────────── */
body.t3,
body.t3.t3-azur {
    --t3-bg-1: #e6ecfa;
    --t3-bg-2: #e9e6f9;
    --t3-bg-3: #e4edf7;
    --t3-orb-1: rgba(37, 99, 235, 0.20);
    --t3-orb-2: rgba(236, 72, 153, 0.14);
    --t3-orb-3: rgba(139, 92, 246, 0.18);

    --t3-brand: #2563eb;
    --t3-brand-hi: #3b82f6;
    --t3-brand-lo: #1d4ed8;
    --t3-brand-on: #ffffff;

    --t3-accent: #2563eb;
    --t3-accent-hi: #3b82f6;
    --t3-accent-lo: #1d4ed8;
    --t3-accent-2: #ec4899;
    --t3-accent-on: #ffffff;
    --t3-tertiary: #8b5cf6;
    --t3-tertiary-hi: #a78bfa;
    --t3-tertiary-lo: #7c3aed;

    --t3-text: #131a2e;
    --t3-text-2: #4c5670;
    /* text-3 vise 5.2:1 et non 4.5 : la marge absorbe les surfaces
       legerement teintees (panneau du tableau de bord, en-tetes) sans
       repasser sous le seuil AA. */
    --t3-text-3: #5f6883;

    --t3-border-sub: rgba(19, 26, 46, 0.07);
    --t3-solid: #ffffff;
    --t3-solid-alt: #f5f8fd;

    --t3-sh-1: 0 1px 2px rgba(19, 26, 46, 0.05);
    --t3-sh-2: 0 8px 28px rgba(19, 26, 46, 0.08), 0 2px 6px rgba(19, 26, 46, 0.04);
    --t3-sh-3: 0 16px 44px rgba(37, 99, 235, 0.16), 0 4px 12px rgba(19, 26, 46, 0.08);
}

body.t3.v2-dark,
body.t3.t3-azur.v2-dark {
    --t3-bg-1: #0b1226;
    --t3-bg-2: #141033;
    --t3-bg-3: #0a1024;
    --t3-orb-1: rgba(59, 130, 246, 0.26);
    --t3-orb-2: rgba(236, 72, 153, 0.18);
    --t3-orb-3: rgba(139, 92, 246, 0.24);

    --t3-brand: #60a5fa;
    --t3-brand-hi: #93c5fd;
    --t3-brand-lo: #7fb4fb;
    --t3-brand-on: #0b1226;

    --t3-accent: #60a5fa;
    --t3-accent-hi: #93c5fd;
    --t3-accent-lo: #5d98f8;
    --t3-accent-2: #f472b6;
    --t3-accent-on: #0b1226;
    --t3-tertiary: #a78bfa;
    --t3-tertiary-hi: #c4b5fd;
    --t3-tertiary-lo: #8b5cf6;

    --t3-text: #e3e9f5;
    --t3-text-2: #9aa5bd;
    --t3-text-3: #9099ad;

    --t3-border-sub: rgba(255, 255, 255, 0.09);
    --t3-solid: #0f1729;
    --t3-solid-alt: #16203a;

    --t3-sh-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --t3-sh-2: 0 8px 28px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.24);
    --t3-sh-3: 0 16px 44px rgba(59, 130, 246, 0.24), 0 4px 12px rgba(0, 0, 0, 0.36);
}

/* ─────────────────────────────────────────────────────────────────
   ESPANA — repris de la page de login
   Rouge #c60b1e | Or #f1bf00 | Marine #1a2744, sur fond crème.
   Le marine sert de couleur de texte : c'est lui qui empêche
   l'ensemble de virer au pastel publicitaire.
   ───────────────────────────────────────────────────────────────── */
body.t3.t3-espana {
    --t3-bg-1: #fdf6f0;
    --t3-bg-2: #fff9f0;
    --t3-bg-3: #fff1f1;
    --t3-orb-1: rgba(198, 11, 30, 0.16);
    --t3-orb-2: rgba(241, 191, 0, 0.20);
    --t3-orb-3: rgba(26, 39, 68, 0.10);

    --t3-brand: #23406b;
    --t3-brand-hi: #35578a;
    --t3-brand-lo: #172c4a;
    --t3-brand-on: #ffffff;

    --t3-accent: #c60b1e;
    --t3-accent-hi: #e0102a;
    --t3-accent-lo: #9d0817;
    --t3-accent-2: #f1bf00;
    --t3-accent-on: #ffffff;
    --t3-tertiary: #1a2744;
    --t3-tertiary-hi: #2d4269;
    --t3-tertiary-lo: #111a2e;

    --t3-text: #1a2744;
    --t3-text-2: #55607a;
    --t3-text-3: #606b85;

    --t3-border-sub: rgba(26, 39, 68, 0.09);
    --t3-solid: #fffdfb;
    --t3-solid-alt: #fdf4ec;

    --t3-sh-1: 0 1px 2px rgba(26, 39, 68, 0.05);
    --t3-sh-2: 0 8px 28px rgba(26, 39, 68, 0.09), 0 2px 6px rgba(26, 39, 68, 0.04);
    --t3-sh-3: 0 16px 44px rgba(198, 11, 30, 0.15), 0 4px 12px rgba(26, 39, 68, 0.09);
}

body.t3.t3-espana.v2-dark {
    --t3-bg-1: #17110f;
    --t3-bg-2: #1d1512;
    --t3-bg-3: #140f0e;
    --t3-orb-1: rgba(198, 11, 30, 0.24);
    --t3-orb-2: rgba(241, 191, 0, 0.16);
    --t3-orb-3: rgba(26, 39, 68, 0.28);

    --t3-brand: #7ea8e0;
    --t3-brand-hi: #a8c5ec;
    --t3-brand-lo: #9bbce8;
    --t3-brand-on: #141010;

    --t3-accent: #f2596a;
    --t3-accent-hi: #f98c98;
    --t3-accent-lo: #f57383;
    --t3-accent-2: #f5cf4a;
    --t3-accent-on: #141010;
    --t3-tertiary: #93a9d1;
    --t3-tertiary-hi: #b6c6e3;
    --t3-tertiary-lo: #7089b5;

    --t3-text: #f0e7e2;
    --t3-text-2: #b6a89f;
    --t3-text-3: #a59b94;

    --t3-border-sub: rgba(255, 255, 255, 0.10);
    --t3-solid: #1c1512;
    --t3-solid-alt: #241b17;

    --t3-sh-1: 0 1px 2px rgba(0, 0, 0, 0.34);
    --t3-sh-2: 0 8px 28px rgba(0, 0, 0, 0.36), 0 2px 6px rgba(0, 0, 0, 0.26);
    --t3-sh-3: 0 16px 44px rgba(198, 11, 30, 0.26), 0 4px 12px rgba(0, 0, 0, 0.36);
}

/* ─────────────────────────────────────────────────────────────────
   MENTHE — vert émeraude / lime
   ───────────────────────────────────────────────────────────────── */
body.t3.t3-menthe {
    /* Fonds légèrement décalés vers le chaud : #edf6e9 tirait vers le
       lime, il tire maintenant vers le bois. */
    --t3-bg-1: #e7f4ee;
    --t3-bg-2: #e8f2ec;
    --t3-bg-3: #f0f4e8;
    --t3-orb-1: rgba(5, 150, 105, 0.18);
    --t3-orb-2: rgba(132, 204, 22, 0.16);
    /* Le 3e orbe passe du teal au bois : c'est lui qui réchauffe le
       fond, et c'est l'effet le plus visible du rééquilibrage. */
    --t3-orb-3: rgba(107, 74, 47, 0.15);

    --t3-brand: #0f766e;
    --t3-brand-hi: #14958b;
    --t3-brand-lo: #0a5751;
    --t3-brand-on: #ffffff;

    --t3-accent: #059669;
    --t3-accent-hi: #10b981;
    --t3-accent-lo: #047857;
    --t3-accent-2: #84cc16;
    --t3-accent-on: #ffffff;

    /* Bois foncé — 3e teinte d'ambiance du thème */
    --t3-tertiary: #6b4a2f;
    --t3-tertiary-hi: #8a6440;
    --t3-tertiary-lo: #4e3521;

    /* Textes glissés du vert pur vers le vert-taupe : la lecture se
       réchauffe sans perdre en contraste (15.45 / 6.97 / 4.57). */
    --t3-text: #16241c;
    --t3-text-2: #4f5a48;
    --t3-text-3: #666c5d;

    --t3-border-sub: rgba(52, 38, 26, 0.10);
    --t3-solid: #fdfdfa;
    --t3-solid-alt: #f4f4ea;

    /* Ombres sur base brune plutôt que verte : invisible en soi, mais
       c'est ce qui ancre toutes les surfaces du thème. */
    --t3-sh-1: 0 1px 2px rgba(52, 38, 26, 0.06);
    --t3-sh-2: 0 8px 28px rgba(52, 38, 26, 0.10), 0 2px 6px rgba(52, 38, 26, 0.05);
    --t3-sh-3: 0 16px 44px rgba(107, 74, 47, 0.18), 0 4px 12px rgba(52, 38, 26, 0.10);
}

body.t3.t3-menthe.v2-dark {
    --t3-bg-1: #071612;
    --t3-bg-2: #0a1c17;
    --t3-bg-3: #06120f;
    --t3-orb-1: rgba(16, 185, 129, 0.22);
    --t3-orb-2: rgba(132, 204, 22, 0.16);
    /* En sombre le bois porte mieux : on peut monter l'opacité. */
    --t3-orb-3: rgba(146, 100, 62, 0.26);

    --t3-brand: #2dd4bf;
    --t3-brand-hi: #5eead4;
    --t3-brand-lo: #5eead4;
    --t3-brand-on: #062018;

    --t3-accent: #34d399;
    --t3-accent-hi: #6ee7b7;
    --t3-accent-lo: #10b981;
    --t3-accent-2: #a3e635;
    --t3-accent-on: #062018;

    --t3-tertiary: #c9a882;
    --t3-tertiary-hi: #ddc2a3;
    --t3-tertiary-lo: #a8875f;

    --t3-text: #e6efe4;
    --t3-text-2: #a3b09a;
    --t3-text-3: #99a38f;

    --t3-border-sub: rgba(255, 255, 255, 0.09);
    /* Surfaces pleines très légèrement brunies */
    --t3-solid: #0a1a13;
    --t3-solid-alt: #10221a;

    --t3-sh-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --t3-sh-2: 0 8px 28px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.24);
    --t3-sh-3: 0 16px 44px rgba(146, 100, 62, 0.24), 0 4px 12px rgba(0, 0, 0, 0.36);
}

/* =================================================================
   3. REMAP DES TOKENS LEGACY
   C'est ce bloc qui repeint les 13 000 lignes de main.css.
   ================================================================= */

body.t3 {

    /* ── Famille --ln-* (socle Lucid Navigator) ── */
    /* Composants : brand fixe, ne suit pas le thème d'ambiance */
    --ln-primary:           var(--t3-brand);
    --ln-primary-dark:      var(--t3-brand-lo);
    --ln-primary-bg:        color-mix(in srgb, var(--t3-brand) 10%, transparent);
    --ln-primary-hover-bg:  color-mix(in srgb, var(--t3-brand) 18%, transparent);

    --ln-secondary:         var(--t3-accent-2);
    --ln-secondary-dark:    var(--t3-accent-2);
    --ln-secondary-bg:      color-mix(in srgb, var(--t3-accent-2) 10%, transparent);
    --ln-secondary-hover-bg: color-mix(in srgb, var(--t3-accent-2) 18%, transparent);
    --ln-violet:            var(--t3-accent-2);
    --ln-violet-dark:       var(--t3-accent-2);
    --ln-violet-bg:         color-mix(in srgb, var(--t3-accent-2) 10%, transparent);
    --ln-violet-hover-bg:   color-mix(in srgb, var(--t3-accent-2) 18%, transparent);

    --ln-bg:                var(--t3-bg-1);
    --ln-surface:           var(--t3-glass);
    --ln-border:            var(--t3-border-sub);
    --ln-divider:           color-mix(in srgb, var(--t3-text) 7%, transparent);
    --ln-text:              var(--t3-text);
    --ln-text-muted:        var(--t3-text-2);
    --ln-default-bg:        color-mix(in srgb, var(--t3-text) 4%, transparent);
    --ln-default-dark:      var(--t3-text-2);
    --ln-default-hover-bg:  color-mix(in srgb, var(--t3-text) 8%, transparent);

    --ln-shadow-card:       var(--t3-sh-2);
    --ln-shadow-hover:      var(--t3-sh-3);

    --glass-bg:             var(--t3-glass);
    --glass-bg-strong:      var(--t3-glass-hi);
    --glass-border:         var(--t3-border);
    --glass-blur:           var(--t3-blur);
    --glass-blur-strong:    var(--t3-blur-hi);

    /* ── Famille --crm-shell-* (navbar + sidebar flottantes) ── */
    --crm-shell-bg-top:     var(--t3-glass-hi);
    --crm-shell-bg-bottom:  var(--t3-glass);
    --crm-shell-border:     var(--t3-border-sub);
    --crm-shell-shadow:     var(--t3-sh-2);

    --crm-accent:           var(--t3-accent);
    --crm-accent-soft:      color-mix(in srgb, var(--t3-accent) 9%, transparent);
    --crm-accent-strong:    var(--t3-accent-lo);

    --crm-text-main:        var(--t3-text);
    --crm-text-muted:       var(--t3-text-2);

    --crm-sidebar-bg-top:   var(--t3-glass-hi);
    --crm-sidebar-bg-bottom: var(--t3-glass);
    --crm-sidebar-border:   var(--t3-border-sub);
    --crm-sidebar-item-hover:  color-mix(in srgb, var(--t3-text) 5%, transparent);
    --crm-sidebar-item-active: color-mix(in srgb, var(--t3-accent) 12%, transparent);

    /* ── Famille --cc-* (blocs de fiche Crystal Clear) ── */
    --cc-bg:                var(--t3-bg-1);
    --cc-bg-alt:            var(--t3-bg-2);

    --cc-glass:             var(--t3-glass);
    --cc-glass-heavy:       var(--t3-glass-hi);
    --cc-border:            var(--t3-border);
    --cc-border-subtle:     var(--t3-border-sub);
    --cc-shadow:            var(--t3-sh-2);
    --cc-shadow-lg:         var(--t3-sh-3);
    --cc-blur:              blur(var(--t3-blur));

    --cc-text:              var(--t3-text);
    --cc-text-secondary:    var(--t3-text-2);
    --cc-text-muted:        var(--t3-text-3);

    --cc-accent:            var(--t3-accent);
    --cc-accent-soft:       color-mix(in srgb, var(--t3-accent) 12%, transparent);
    --cc-accent-hover:      var(--t3-accent-lo);
    --cc-accent-secondary:  color-mix(in srgb, var(--t3-accent-2) 10%, transparent);
    --cc-accent-border:     color-mix(in srgb, var(--t3-accent) 20%, transparent);
    --cc-accent-shadow:     color-mix(in srgb, var(--t3-accent) 14%, transparent);
    --cc-accent-gradient:   linear-gradient(135deg,
                                color-mix(in srgb, var(--t3-accent) 13%, transparent) 0%,
                                color-mix(in srgb, var(--t3-accent-2) 11%, transparent) 100%);

    --cc-radius:            var(--t3-radius);
    --cc-radius-sm:         var(--t3-radius-sm);

    /* ── Famille --crm-* d'origine (bandeau logo) ── */
    --crm-primary:          var(--t3-accent-lo);
}

/* =================================================================
   4. TYPOGRAPHIE
   ================================================================= */

body.t3 {
    font-family: var(--t3-font);
    font-size: var(--t3-size);
    line-height: var(--t3-lh);
    letter-spacing: var(--t3-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.t3 input,
body.t3 select,
body.t3 textarea,
body.t3 button {
    font-family: var(--t3-font);
    letter-spacing: inherit;
}

body.t3 h1, body.t3 h2, body.t3 h3,
body.t3 h4, body.t3 h5 {
    font-family: var(--t3-font);
    font-weight: var(--t3-weight-strong);
    letter-spacing: -0.021em;
    line-height: 1.25;
    color: var(--t3-text);
}

/* Chiffres alignés en colonnes : indispensable sur un CRM plein de
   tableaux de montants. Inter ne l'activait pas. */
body.t3 table,
body.t3 .num,
body.t3 input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

body.t3 thead th,
body.t3 .control-label {
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--t3-text-2);
}

/* =================================================================
   5. FOND — dégradé de base + orbes floutés fixes
   ================================================================= */

/* PERFORMANCE (2026-10-21) : le dégradé était posé sur le body en
   « background-attachment: fixed ». Chrome et Edge abandonnent alors le
   défilement accéléré et repeignent toute la fenêtre à chaque image. Il
   est désormais la dernière couche du calque fixe body::before, sous les
   orbes : même rendu, composé sans repeindre. Le body garde la teinte
   médiane en couleur unie, visible seulement en « rebond » de défilement. */
body.t3 {
    background: var(--t3-bg-2);
    position: relative;
}

body.t3::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(48vw 48vw at 12% 8%,  var(--t3-orb-1) 0%, transparent 62%),
        radial-gradient(42vw 42vw at 88% 18%, var(--t3-orb-2) 0%, transparent 60%),
        radial-gradient(52vw 52vw at 62% 92%, var(--t3-orb-3) 0%, transparent 64%),
        linear-gradient(150deg,
            var(--t3-bg-1) 0%,
            var(--t3-bg-2) 45%,
            var(--t3-bg-3) 100%);
}

/* =================================================================
   6. FINITIONS GLASS
   ================================================================= */

body.t3 .cc-block {
    position: relative;
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Liseré spéculaire : c'est ce qui fait lire la surface comme du
   verre épais plutôt que comme une carte blanche translucide. */
body.t3 .cc-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 50%,
        transparent 100%);
}

body.t3.v2-dark .cc-block::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.30) 50%,
        transparent 100%);
}

body.t3 .cc-block:hover {
    box-shadow: var(--t3-sh-3);
}

body.t3 .page-header-bar {
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    border-radius: var(--t3-radius);
}

body.t3 .btn {
    border-radius: var(--t3-radius-sm);
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Les champs sont traités en section 14 (surfaces de verre). */

/* Liens sur brand : ils portent du sens de navigation, pas de la déco.

   Les exclusions ne sont pas cosmétiques. « body.t3 a » pèse (0,2,1) et
   main.css déclare la couleur du texte des boutons sur la classe seule,
   donc (0,1,0) : sans elles, tout <a class="btn btn-warning"> recevait
   le bleu de brand par-dessus son fond orange. Or une grande partie des
   boutons du CRM sont des <a>, pas des <button>.

   Ne PAS écrire :not([class*="btn-"]) — btn-sm, btn-xs et btn-block
   contiennent tous « btn- » et seraient exclus eux aussi. */
body.t3 a:not(.btn):not(.label):not(.badge)               { color: var(--t3-brand); }
body.t3 a:not(.btn):not(.label):not(.badge):hover         { color: var(--t3-brand-lo); }
body.t3.v2-dark a:not(.btn):not(.label):not(.badge):hover { color: var(--t3-brand-hi); }

/* Un <a class="btn"> hérite de la couleur de sa variante, comme un
   <button>. Aucune couleur imposée ici : chaque variante a la sienne. */
body.t3 a.btn:hover,
body.t3 a.btn:focus { text-decoration: none; }

/* =================================================================
   7. NAVBAR
   -----------------------------------------------------------------
   main.css code la navbar en dur (#43bcfd, #a78bfa, #1d4ed8,
   rgba(59,130,246,…)) : elle ne suit donc PAS les tokens. On la
   rebranche ici sur la palette.
   ================================================================= */

body.t3 .navbar-crm-header {
    border-radius: var(--t3-radius-lg);
    background: linear-gradient(135deg,
        var(--t3-glass-hi) 0%,
        var(--t3-glass) 55%,
        var(--t3-glass-hi) 100%);
    border: 1px solid var(--t3-border);
    box-shadow:
        var(--t3-sh-2),
        0 1px 0 0 rgba(255, 255, 255, 0.65) inset;
}

body.t3 .navbar-crm-header::before {
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
}

/* Le filet lumineux du bas : signature visuelle la plus repérable
   de la navbar. Passe accent → accent-2 (bleu → rose). */
body.t3 .navbar-crm-header::after {
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--t3-accent) 18%,
        var(--t3-accent-2) 50%,
        var(--t3-accent) 82%,
        transparent 100%);
    opacity: 0.85;
}

body.t3 .navbar-crm-arrow:hover,
body.t3 .navbar-crm-header__right > li > a:hover,
body.t3 .navbar-crm-header__right > li.open > a {
    background-color: color-mix(in srgb, var(--t3-accent) 10%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 .navbar-crm-header .nav.navbar-nav-custom > li > a:hover,
body.t3 .navbar-crm-header .nav.navbar-nav-custom > li.open > a {
    background-color: color-mix(in srgb, var(--t3-accent) 10%, transparent) !important;
    color: var(--t3-accent-lo) !important;
}

body.t3 .navbar-crm-header__right .dropdown-menu > li > a:hover {
    background: color-mix(in srgb, var(--t3-accent) 10%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 #searchres {
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    box-shadow: var(--t3-sh-3);
    background: var(--t3-glass-hi);
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
}

/* ── Onglets centraux de la navbar ──
   Ils étaient restés sur le bleu hard-codé de main.css alors que le
   conteneur suivait déjà la palette : c'était le décalage le plus
   visible de la barre. */
body.t3 .navbar-crm-nav__link {
    border-radius: var(--t3-radius-sm);
    color: var(--t3-text-2);
    transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .navbar-crm-nav__link:hover,
body.t3 .navbar-crm-nav__link:focus {
    background: color-mix(in srgb, var(--t3-accent) 9%, transparent);
    color: var(--t3-accent-lo);
    transform: none;
}

body.t3 .navbar-crm-nav__item--active .navbar-crm-nav__link,
body.t3 .navbar-crm-nav__item--active .navbar-crm-nav__link:hover {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--t3-accent) 15%, transparent) 0%,
        color-mix(in srgb, var(--t3-accent-2) 10%, transparent) 100%);
    color: var(--t3-accent-lo);
    border: 1px solid color-mix(in srgb, var(--t3-accent) 20%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--t3-accent) 13%, transparent);
}

body.t3 .navbar-crm-nav__item--active .navbar-crm-nav__link i {
    color: var(--t3-accent);
    opacity: 1;
}

/* Les dropdowns étaient en background:#fff opaque — ils cassaient
   l'effet de verre et devenaient illisibles en dark. */
body.t3 .navbar-crm-header__right .dropdown-menu {
    border-radius: var(--t3-radius);
    border: 1px solid var(--t3-border-sub);
    background: var(--t3-glass-hi);
    box-shadow: var(--t3-sh-3);
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
}

body.t3 .navbar-crm-header__right .dropdown-menu > li > a {
    color: var(--t3-text-2);
    border-radius: var(--t3-radius-sm);
}

body.t3 .navbar-crm-header__right .dropdown-menu .dropdown-header {
    color: var(--t3-text-3);
}

/* =================================================================
   8. SIDEBAR
   -----------------------------------------------------------------
   Même problème que la navbar. Les règles cibles vivent dans
   @media (min-width:992px) : on reste dans le même breakpoint pour
   ne pas toucher au mobile.
   ================================================================= */

@media screen and (min-width: 992px) {

    /* ── Le panneau ── */
    body.t3 #sidebar-scroll {
        border-radius: var(--t3-radius-lg);
        border: 1px solid var(--t3-border);
        background: linear-gradient(165deg,
            var(--t3-glass-hi) 0%,
            var(--t3-glass) 45%,
            var(--t3-glass-lo) 100%);
        box-shadow:
            var(--t3-sh-3),
            0 1px 0 0 rgba(255, 255, 255, 0.7) inset;
        backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
        -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    }

    body.t3 #sidebar-alt-scroll {
        border-radius: var(--t3-radius-lg);
        border: 1px solid var(--t3-border);
        background: var(--t3-glass);
        box-shadow: var(--t3-sh-2);
    }

    /* ── Brand : on retire le lavis bleu, on garde un simple filet ── */
    body.t3 #sidebar-scroll .sidebar-brand {
        background: transparent;
        border-bottom: 1px solid var(--t3-border-sub);
        color: var(--t3-text);
        border-radius: var(--t3-radius-lg) var(--t3-radius-lg) 0 0;
        letter-spacing: -0.015em;
    }

    body.t3 #sidebar-scroll .sidebar-brand i {
        color: var(--t3-accent);
        opacity: 1;
    }

    /* ── Items au repos ── */
    body.t3 .sidebar-nav a {
        border-radius: var(--t3-radius-sm);
        color: var(--t3-text-2);
        font-weight: 500;
        position: relative;
        transition: background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                    color 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ── Hover : fond seul. Le translateX(2px) d'origine fait
       tressauter toute la colonne au survol. ── */
    body.t3 .sidebar-nav a:hover,
    body.t3 .sidebar-nav a:focus,
    body.t3 .sidebar-nav a.open,
    body.t3 .sidebar-nav li.active > a {
        background: color-mix(in srgb, var(--t3-text) 5%, transparent);
        color: var(--t3-text);
        transform: none;
    }

    /* ── Item actif : rail lumineux au lieu du border-left 3px.
       Le border-left oblige à compenser le padding (11px vs 14px),
       ce qui décale le texte de 3px à l'activation. Un ::before
       absolu ne touche pas au flux : plus de saut. ── */
    body.t3 .sidebar-nav a.active,
    body.t3 .sidebar-nav ul a.active,
    body.t3 .sidebar-nav ul a.active:hover {
        color: var(--t3-accent-lo);
        background: linear-gradient(100deg,
            color-mix(in srgb, var(--t3-accent) 16%, transparent) 0%,
            color-mix(in srgb, var(--t3-accent-2) 10%, transparent) 100%);
        border-left: none;
        padding-left: 14px;
        box-shadow: 0 2px 12px color-mix(in srgb, var(--t3-accent) 13%, transparent);
        font-weight: 600;
    }

    body.t3 .sidebar-nav a.active::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 55%;
        border-radius: 2px;
        background: var(--t3-accent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--t3-accent) 65%, transparent);
    }

    body.t3 .sidebar-nav a.active > .sidebar-nav-icon {
        color: var(--t3-accent);
        opacity: 1;
    }

    /* ── Sous-menus ── */
    body.t3 .sidebar-nav ul {
        border-radius: var(--t3-radius-sm);
        background: color-mix(in srgb, var(--t3-text) 3%, transparent);
    }

    /* ── En-têtes de groupe ── */
    body.t3 .sidebar-header .sidebar-header-title {
        color: var(--t3-text-3);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.09em;
        opacity: 1;
    }

    /* ── Bloc utilisateur en pied ── */
    body.t3 .sidebar-user {
        background: color-mix(in srgb, var(--t3-text) 3%, transparent);
        border-top: 1px solid var(--t3-border-sub);
    }

    body.t3 .sidebar-user-name       { color: var(--t3-text); }
    body.t3 .sidebar-user-links a    { color: var(--t3-text-2); }
    body.t3 .sidebar-user-links a:hover { color: var(--t3-accent); opacity: 1; }

    /* Le .clearfix générique de main.css arrondit à 10px tout ce
       qui porte la classe, un peu partout. On calme ça. */
    body.t3 #sidebar-scroll .clearfix {
        border-radius: var(--t3-radius-sm);
    }
}

/* =================================================================
   9. RAYONS — reprise des arrondis hérités
   main.css pose des rayons généreux en dur (18px navbar, 24px
   sidebar, 22px brand, 14px #searchres…). Tout est ramené sur
   l'échelle sobre définie plus haut.
   ================================================================= */

body.t3 .block,
body.t3 .panel,
body.t3 .well,
body.t3 .alert,
body.t3 .dropdown-menu,
body.t3 .table-responsive {
    border-radius: var(--t3-radius);
}

body.t3 .badge,
body.t3 .label {
    border-radius: var(--t3-radius-sm);
}
/* .btn-group est traité en section 37 : arrondir chaque bouton d'un
   groupe décolle les jonctions. */

/* =================================================================
   10. BOUTONS
   -----------------------------------------------------------------
   .btn-primary était en #6ad2eb / #1bbae1 : un turquoise hérité du
   template ProUI d'origine, étranger à la palette. C'est l'élément
   le plus cliqué d'un CRM, donc celui qui datait le plus.
   Les variantes sémantiques (success / danger / warning / info)
   gardent leurs couleurs : elles portent du sens, pas du style.
   ================================================================= */

/* Bouton neutre.
   Première version trop discrète : un fond --t3-glass-hi (blanc à 68 %)
   posé sur un fond de page déjà clair, avec une bordure à 7 % de noir,
   donnait un bouton fantôme — on ne le voyait qu'au survol. Un bouton
   doit se voir AVANT qu'on le survole : fond quasi plein, bordure à
   16 %, et un léger relief.

   Le sélecteur :not([class*="btn-"]) qui accompagnait .btn-default ne
   servait à rien : « btn-sm », « btn-xs » ou « btn-block » contiennent
   tous « btn- », donc il excluait la quasi-totalité des boutons au lieu
   de rattraper ceux sans variante. Remplacé par une exclusion explicite
   des variantes de COULEUR. */
body.t3 .btn-default,
body.t3 .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link) {
    background-color: color-mix(in srgb, var(--t3-solid) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--t3-text) 16%, transparent);
    color: var(--t3-text-2);
    box-shadow: var(--t3-sh-1);
}

body.t3 .btn-default:hover,
body.t3 .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):hover {
    background-color: color-mix(in srgb, var(--t3-accent) 10%, var(--t3-solid));
    border-color: color-mix(in srgb, var(--t3-accent) 40%, transparent);
    color: var(--t3-accent-lo);
}

/* Bouton primaire : aplat d'accent + ombre colorée. L'ombre teintée
   est ce qui l'ancre dans le style verre plutôt que de le faire
   flotter comme un bouton Bootstrap. */
body.t3 .btn-primary {
    background-color: var(--t3-brand);
    border-color: var(--t3-brand);
    /* En dark, brand est clair : un texte blanc y tomberait à 1.9:1 */
    color: var(--t3-brand-on);
    font-weight: 600;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--t3-brand) 30%, transparent);
}

body.t3 .btn-primary:hover,
body.t3 .btn-primary:focus,
body.t3 .btn-primary.focus,
body.t3 .btn-primary:active,
body.t3 .btn-primary:active:hover,
body.t3 .btn-primary:active:focus,
body.t3 .btn-primary.active,
body.t3 .open .btn-primary.dropdown-toggle {
    background-color: var(--t3-brand-lo);
    border-color: var(--t3-brand-lo);
    color: var(--t3-brand-on);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--t3-brand) 42%, transparent);
}

body.t3 .btn-primary.btn-alt {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--t3-brand) 40%, transparent);
    color: var(--t3-brand);
    box-shadow: none;
}

body.t3 .btn-primary.btn-alt:hover {
    background-color: color-mix(in srgb, var(--t3-brand) 10%, transparent);
    border-color: var(--t3-brand);
    color: var(--t3-brand-lo);
}

/* Anneau de focus clavier cohérent avec celui des champs */
body.t3 .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-brand) 30%, transparent);
}

/* =================================================================
   11. TABLEAUX
   Le pied de tableau était en #f9fafc opaque : visible comme une
   bande blanche sur le fond teinté, et cassé en dark.
   ================================================================= */

body.t3 .table tfoot > tr > th,
body.t3 .table tfoot > tr > td {
    background-color: color-mix(in srgb, var(--t3-text) 4%, transparent);
    color: var(--t3-text);
}

/* Pas de text-transform ici, et c'est voulu.
   J'avais mis `uppercase` : lisible sur « Nom » ou « Date », illisible
   des que l'en-tete est un libelle technique. « Deperdition thermique
   apres (W/K) » en capitales a 12px dans une colonne de 13 % passe sur
   trois lignes et se dechiffre au lieu de se lire.

   Le role d'un en-tete se marque par la graisse et le filet inferieur,
   pas par la casse. Couleur --t3-text-2 et non text-3 : un en-tete se
   lit, ce n'est pas une mention secondaire. */
body.t3 .table thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--t3-text-2);
    border-bottom: 2px solid var(--t3-border-sub);
    vertical-align: middle;
}

body.t3 .table > tbody > tr > td {
    border-top-color: var(--t3-border-sub);
}

body.t3 .table-hover > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--t3-accent) 6%, transparent);
}

/* =================================================================
   12. LABELS — le style ".fresh" devient le style par défaut
   -----------------------------------------------------------------
   .fresh était le modificateur le plus utilisé (~44 occurrences)
   mais pas systématique : deux labels de même statut pouvaient
   s'afficher différemment selon que la classe était présente ou non.
   On applique son style à tous les .label-*, avec ou sans .fresh.
   La classe devient donc sans effet — inutile de la retirer du
   markup, elle peut disparaître au fil des retouches.

   Les teintes de texte sont assombries au minimum nécessaire pour
   atteindre 4.5:1 (AA petit texte). Teinte et saturation d'origine
   conservées : même identité, juste lisible.
       success  #0a9396 → #087679   3.13:1 → 4.54:1
       danger   #c9184a → #a5143d   3.37:1 → 4.52:1
       warning  #f3722c → #b5460a   2.41:1 → 4.54:1
       default  #6c757d → #5e656c   3.60:1 → 4.54:1
       info     #003566 inchangé    9.99:1
   Pour retrouver les teintes exactes d'origine, remplacer la
   couleur de chaque bloc ci-dessous par celle de gauche.

   !important est nécessaire pour repasser devant celui de main.css.
   ================================================================= */

body.t3 .label-info,
body.t3 .label-info.fresh,
body.t3 .label-success,
body.t3 .label-success.fresh,
body.t3 .label-danger,
body.t3 .label-danger.fresh,
body.t3 .label-warning,
body.t3 .label-warning.fresh,
body.t3 .label-default,
body.t3 .label-default.fresh {
    display: inline-block !important;
    padding: 2px 11px !important;
    font-weight: 600;
    border: none !important;
}

body.t3 .label-info,
body.t3 .label-info.fresh {
    background: #dfe7fd !important;
    color: #003566 !important;
}
body.t3 .label-info:hover,
body.t3 .label-info.fresh:hover,
body.t3 a.label-info:focus,
body.t3 .label-info.fresh:focus {
    background: #003566 !important;
    color: #ffffff !important;
}

body.t3 .label-success,
body.t3 .label-success.fresh {
    background: #cbf3f0 !important;
    color: #087679 !important;
}
body.t3 .label-success:hover,
body.t3 .label-success.fresh:hover,
body.t3 a.label-success:focus,
body.t3 .label-success.fresh:focus {
    background: #0a9396 !important;
    color: #ffffff !important;
}

body.t3 .label-danger,
body.t3 .label-danger.fresh {
    background: #ffb3c6 !important;
    color: #a5143d !important;
}
body.t3 .label-danger:hover,
body.t3 .label-danger.fresh:hover,
body.t3 a.label-danger:focus,
body.t3 .label-danger.fresh:focus {
    background: #c9184a !important;
    color: #ffffff !important;
}

body.t3 .label-warning,
body.t3 .label-warning.fresh {
    background: #ffe5d9 !important;
    color: #b5460a !important;
}
body.t3 .label-warning:hover,
body.t3 .label-warning.fresh:hover,
body.t3 a.label-warning:focus,
body.t3 .label-warning.fresh:focus {
    background: #f3722c !important;
    color: #ffffff !important;
}

body.t3 .label-default,
body.t3 .label-default.fresh {
    background: #dee2e6 !important;
    color: #5e656c !important;
}
body.t3 .label-default:hover,
body.t3 .label-default.fresh:hover,
body.t3 a.label-default:focus,
body.t3 .label-default.fresh:focus {
    background: #6c757d !important;
    color: #ffffff !important;
}

/* .label-primary n'avait pas de variante .fresh : on l'aligne sur
   l'accent du thème pour qu'il ne reste pas seul en style ancien. */
body.t3 .label-primary {
    background: color-mix(in srgb, var(--t3-brand) 16%, transparent) !important;
    color: var(--t3-brand) !important;
    display: inline-block !important;
    padding: 2px 11px !important;
    font-weight: 600;
}
body.t3 .label-primary:hover,
body.t3 a.label-primary:focus {
    background: var(--t3-brand) !important;
    color: var(--t3-brand-on) !important;
}

/* Les variantes .btn-alt.fresh (couleurs inversées) restent
   intactes : elles sont explicitement demandées dans le markup. */

/* =================================================================
   13. DARK MODE — statuts et surfaces opaques
   -----------------------------------------------------------------
   main.css redéfinit une vingtaine de tokens sous body.v2-dark mais
   AUCUN des tokens sémantiques (success / warning / danger / info).
   Ils gardent donc leurs valeurs claires sur fond sombre.

   Contrastes mesurés avant correction, texte sur fond composé :
       .label-success  4.66:1   ok
       .label-warning  4.83:1   ok
       .label-danger   3.39:1   sous le seuil AA (4.5:1)
       .label-info     4.16:1   sous le seuil AA

   Correction : teintes 400 pour le texte, fond porté à 16 %.
   Contrastes obtenus : 7.80 / 8.13 / 5.56 / 7.61.
   ================================================================= */

body.t3.v2-dark {
    --ln-success:      #4ade80;
    --ln-success-dark: #4ade80;
    --ln-success-bg:   rgba(34, 197, 94, 0.16);
    --ln-success-hover-bg: rgba(34, 197, 94, 0.26);

    --ln-warning:      #fbbf24;
    --ln-warning-dark: #fbbf24;
    --ln-warning-bg:   rgba(245, 158, 11, 0.16);
    --ln-warning-hover-bg: rgba(245, 158, 11, 0.26);

    --ln-yellow:       #fde047;
    --ln-yellow-dark:  #fde047;
    --ln-yellow-bg:    rgba(234, 179, 8, 0.16);
    --ln-yellow-hover-bg: rgba(234, 179, 8, 0.26);

    --ln-danger:       #f87171;
    --ln-danger-dark:  #f87171;
    --ln-danger-bg:    rgba(239, 68, 68, 0.16);
    --ln-danger-hover-bg: rgba(239, 68, 68, 0.26);

    --ln-info:         #22d3ee;
    --ln-info-dark:    #22d3ee;
    --ln-info-bg:      rgba(6, 182, 212, 0.16);
    --ln-info-hover-bg: rgba(6, 182, 212, 0.26);
}

/* ── Labels ".fresh" ──
   C'est la variante de loin la plus utilisée (~44 occurrences dans
   les vues). Elle est écrite en fonds clairs figés avec !important
   (#cbf3f0, #ffb3c6, #ffe5d9…), donc elle reste en pastilles
   lumineuses sur fond sombre. On la transpose en dark uniquement :
   la version claire garde volontairement ses teintes d'origine,
   c'est un choix de style, pas un défaut.
   Il faut !important pour repasser devant celui de main.css. */

body.t3.v2-dark .label-success,
body.t3.v2-dark .label-success.fresh {
    background: rgba(10, 147, 150, 0.20) !important;
    color: #5eead4 !important;
}
body.t3.v2-dark .label-success:hover,
body.t3.v2-dark .label-success.fresh:hover,
body.t3.v2-dark a.label-success:focus,
body.t3.v2-dark .label-success.fresh:focus {
    background: #0a9396 !important;
    color: #ffffff !important;
}

body.t3.v2-dark .label-danger,
body.t3.v2-dark .label-danger.fresh {
    background: rgba(201, 24, 74, 0.22) !important;
    color: #fda4af !important;
}
body.t3.v2-dark .label-danger:hover,
body.t3.v2-dark .label-danger.fresh:hover,
body.t3.v2-dark a.label-danger:focus,
body.t3.v2-dark .label-danger.fresh:focus {
    background: #c9184a !important;
    color: #ffffff !important;
}

body.t3.v2-dark .label-info,
body.t3.v2-dark .label-info.fresh {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
body.t3.v2-dark .label-info:hover,
body.t3.v2-dark .label-info.fresh:hover,
body.t3.v2-dark a.label-info:focus,
body.t3.v2-dark .label-info.fresh:focus {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

body.t3.v2-dark .label-warning,
body.t3.v2-dark .label-warning.fresh {
    background: rgba(243, 114, 44, 0.20) !important;
    color: #fdba74 !important;
}
body.t3.v2-dark .label-warning:hover,
body.t3.v2-dark .label-warning.fresh:hover,
body.t3.v2-dark a.label-warning:focus,
body.t3.v2-dark .label-warning.fresh:focus {
    background: #f3722c !important;
    color: #ffffff !important;
}

body.t3.v2-dark .label-default,
body.t3.v2-dark .label-default.fresh {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #cbd5e1 !important;
}
body.t3.v2-dark .label-default:hover,
body.t3.v2-dark .label-default.fresh:hover,
body.t3.v2-dark a.label-default:focus,
body.t3.v2-dark .label-default.fresh:focus {
    background: #64748b !important;
    color: #ffffff !important;
}

/* Surfaces restées opaques en dark */
body.t3.v2-dark .table tfoot > tr > th,
body.t3.v2-dark .table tfoot > tr > td {
    background-color: rgba(255, 255, 255, 0.05);
}

body.t3.v2-dark .btn-default,
body.t3.v2-dark .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link) {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--t3-text-2);
    box-shadow: none;
}

body.t3.v2-dark .btn-default:hover,
body.t3.v2-dark .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):hover {
    background-color: color-mix(in srgb, var(--t3-accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--t3-accent) 45%, transparent);
    color: var(--t3-accent-hi);
}

/* =================================================================
   14. CHAMPS DE FORMULAIRE — surfaces de verre
   -----------------------------------------------------------------
   main.css les traitait en style Material : pas de bordure, fond
   transparent, border-bottom 2px, radius 0. C'était le dernier
   élément à parler un langage plat dans une interface passée aux
   surfaces de verre.

   Le champ devient une surface, comme les blocs et les boutons.
   ================================================================= */

body.t3 .form-control,
body.t3 input[type="text"].form-control,
body.t3 input[type="password"].form-control,
body.t3 input[type="email"].form-control,
body.t3 input[type="number"].form-control,
body.t3 input[type="tel"].form-control,
body.t3 input[type="url"].form-control,
body.t3 input[type="search"].form-control,
body.t3 textarea.form-control,
body.t3 select.form-control {
    background-color: var(--t3-glass-hi);
    border: 1px solid var(--t3-border-sub);
    border-bottom: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius-sm);
    color: var(--t3-text);
    /* le padding passe de 4px à 12px : il y a une boîte, maintenant */
    padding: 8px 12px;
    min-height: 38px;
    box-shadow: none;
    /* Pas de backdrop-filter ici, volontairement : un formulaire dense
       en poserait 40 sur la même page pour un gain nul sur une boîte
       de 38px. Le fond semi-opaque suffit à donner le verre. */
    transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 textarea.form-control {
    min-height: 84px;
    line-height: 1.55;
}

/* Survol : la bordure se marque, sans bouger la mise en page */
body.t3 .form-control:hover:not(:focus):not([disabled]) {
    border-color: color-mix(in srgb, var(--t3-text) 18%, transparent);
}

body.t3 .form-control:focus,
body.t3 input[type="text"].form-control:focus,
body.t3 input[type="password"].form-control:focus,
body.t3 input[type="email"].form-control:focus,
body.t3 textarea.form-control:focus,
body.t3 select.form-control:focus {
    border-color: color-mix(in srgb, var(--t3-brand) 55%, transparent);
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-brand) 15%, transparent);
    outline: none;
}

body.t3 .form-control[disabled],
body.t3 .form-control[readonly] {
    background-color: color-mix(in srgb, var(--t3-text) 4%, transparent);
    border-color: var(--t3-border-sub);
    color: var(--t3-text-3);
    cursor: not-allowed;
}

body.t3 .form-control::placeholder {
    color: var(--t3-text-3);
    opacity: 1;
}

/* ── Selects ──
   main.css pose appearance:none sans image de remplacement : le
   chevron natif disparaissait et un select était indistinguable
   d'un champ texte. On le redessine en SVG inline. */
body.t3 select.form-control {
    padding-right: 32px;
    /* main.css:6337 pose `appearance: none` sur les selects, ce qui
       supprime le chevron du systeme. Sans remplacement, un select est
       indiscernable d'un champ texte — d'ou ce chevron dessine.
       Le trace est dans --t3-chevron / --t3-chevron-dark (section 1),
       plutot que recopie ici et dans la regle sombre. */
    background-image: var(--t3-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: pointer;
}

body.t3 select.form-control[multiple] {
    background-image: none;
    padding-right: 12px;
}

/* ── Groupes de champs ──
   main.css annulait les rayons des extrémités pour coller l'addon
   au champ ; avec une bordure complète il faut les rétablir. */
body.t3 .input-group-addon {
    background-color: color-mix(in srgb, var(--t3-text) 4%, transparent);
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius-sm);
    color: var(--t3-text-2);
    padding: 6px 12px;
}

body.t3 .input-group .form-control:first-child,
body.t3 .input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

body.t3 .input-group .form-control:last-child,
body.t3 .input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

body.t3 .has-warning .form-control {
    border-color: color-mix(in srgb, var(--ln-warning) 55%, transparent);
    background-color: color-mix(in srgb, var(--ln-warning) 7%, var(--t3-glass-hi));
}
body.t3 .has-warning .form-control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ln-warning) 18%, transparent);
}

body.t3 .has-error .form-control {
    border-color: color-mix(in srgb, var(--ln-danger) 55%, transparent);
    background-color: color-mix(in srgb, var(--ln-danger) 7%, var(--t3-glass-hi));
}
body.t3 .has-error .form-control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ln-danger) 18%, transparent);
}

/* ── Dark ── */
body.t3.v2-dark .form-control,
body.t3.v2-dark input[type="text"].form-control,
body.t3.v2-dark input[type="password"].form-control,
body.t3.v2-dark input[type="email"].form-control,
body.t3.v2-dark input[type="number"].form-control,
body.t3.v2-dark textarea.form-control,
body.t3.v2-dark select.form-control {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--t3-text);
}

body.t3.v2-dark .form-control:hover:not(:focus):not([disabled]) {
    border-color: rgba(255, 255, 255, 0.22);
}

body.t3.v2-dark .form-control:focus,
body.t3.v2-dark textarea.form-control:focus,
body.t3.v2-dark select.form-control:focus {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: color-mix(in srgb, var(--t3-brand) 65%, transparent);
}

body.t3.v2-dark .form-control[disabled],
body.t3.v2-dark .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--t3-text-3);
}

/* Meme trace, teinte claire : sur fond sombre le gris d'origine
   disparaissait.
   Repetition, position et taille sont redonnees ici et pas seulement
   l'image : main.css:10179 (body.v2-dark .page-settings .form-control)
   pose un raccourci `background:` plus specifique que la regle claire,
   qui remet repeat / 0 0 / auto. Avec l'image seule, le chevron se
   repetait en mosaique sur tout le champ (select SMTP_PROTOCOL des
   Parametres, vu « zebre »). */
body.t3.v2-dark select.form-control {
    background-image: var(--t3-chevron-dark);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

/* La regle ci-dessus, de meme specificite, venait apres celle du
   select multiple et lui rendait un chevron en mode sombre. */
body.t3.v2-dark select.form-control[multiple] {
    background-image: none;
}

body.t3.v2-dark .input-group-addon {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* =================================================================
   15. ÉLÉMENTS HÉRITÉS RESTÉS HORS THÈME
   -----------------------------------------------------------------
   Six familles conservaient leurs couleurs d'origine et trahissaient
   le thème sélectionné. Elles passent toutes sur --t3-accent :
   ce sont des éléments de chrome, pas des actions.
   ================================================================= */

/* ── Avatars à initiales (navbar + sidebar) ──
   Les dimensions restent en style inline dans page_head.php ; seules
   les couleurs sont exposées ici, avec les valeurs d'origine en
   fallback pour que le rendu tienne même sans cette feuille. */
body.t3 {
    --t3-avatar-bg: color-mix(in srgb, var(--t3-accent) 12%, transparent);
    --t3-avatar-fg: var(--t3-accent-lo);
    --t3-avatar-ring: color-mix(in srgb, var(--t3-accent) 22%, transparent);
}

body.t3 .t3-avatar {
    background: var(--t3-avatar-bg) !important;
    color: var(--t3-avatar-fg) !important;
    box-shadow: inset 0 0 0 1px var(--t3-avatar-ring);
}

/* ── Filet vertical des blocs ──
   .block portait border-left: 4px solid var(--ln-primary) : il suivait
   donc la couleur d'action. C'est une marque d'ambiance, pas un
   bouton — il suit le thème. */
/* main.css:5424 pose « border-left: 4px solid var(--ln-primary) » sur
   chaque .block. Repeint à l'accent PLEIN, cela faisait une colonne de
   barres très saturées sur une page qui en empile plusieurs — surtout
   sur España (rouge vif). Ce filet marque une appartenance, il n'annonce
   pas une action : il n'a pas besoin de cette intensité.
   55 % en sombre et non 45 % : sur fond foncé une couleur diluée
   s'efface plus vite. */
body.t3 .block {
    border-left-color: color-mix(in srgb, var(--t3-accent) 45%, transparent);
    border-left-width: 3px;
}

body.t3.v2-dark .block {
    border-left-color: color-mix(in srgb, var(--t3-accent) 55%, transparent);
}

/* ── Titres de bloc : le <strong> était figé sur #2563eb ── */
body.t3 .block-title h1 strong,
body.t3 .block-title h2 strong,
body.t3 .block-title h3 strong {
    color: var(--t3-accent-lo);
}

/* ── Hamburger : était figé sur #1d4e89 ── */
body.t3 .navbar-crm-header__hamburger {
    color: var(--t3-accent-lo);
}

body.t3 .navbar-crm-header__hamburger:hover,
body.t3 .navbar-crm-header__hamburger:focus {
    background-color: color-mix(in srgb, var(--t3-accent) 12%, transparent);
    color: var(--t3-accent);
}

/* ── JDGrid ──
   jdgrid/css/JDGrid.css est chargé APRÈS cette feuille : le préfixe
   body.t3 est ce qui fait gagner ces règles par spécificité.
   Là où JDGrid utilise !important, il faut le reprendre.
   En-tête OPAQUE (--t3-solid, plus --t3-glass-hi) : il est collant
   (position: sticky), les lignes défilaient visibles au travers.
   Même teinte que les colonnes figées de la section 18. (10/11/2026) */
body.t3 .jdgridtb thead td,
body.t3 .jdgridtb thead th {
    background: color-mix(in srgb, var(--t3-accent) 7%, var(--t3-solid));
    border-bottom: 1px solid var(--t3-border-sub);
    color: var(--t3-text-2);
}

body.t3 .jdgridtb tbody tr:hover td {
    background-color: color-mix(in srgb, var(--t3-accent) 8%, transparent);
}

body.t3 .jdgridtb .separator {
    background-color: var(--t3-accent);
}

/* Boutons JDGrid : traités en section 18 (vraies classes). */

/* ── Dark ── */
body.t3.v2-dark .jdgridtb thead td,
body.t3.v2-dark .jdgridtb thead th {
    background: color-mix(in srgb, var(--t3-accent) 12%, var(--t3-solid));
    color: var(--t3-text-2);
}

/* ── Ligne de filtres : flèche des listes et croix d'effacement ──
   Le chevron des select (section 14 : 12 × 8, à 12 px du bord) tombait
   pile sous la croix .jdclearfilter de JDGrid (absolue, right:12px,
   top:16px fixe). Ici : croix centrée verticalement au bord droit,
   chevron réduit (9 × 6) posé à sa gauche, place réservée dans le champ.
   Idem pour les listes Chosen (selectchosen), dont la flèche est en
   !important section « Chosen ». Voir ~/sauvegardes_sib/theme_docs/retours_theme_v3/
   RETOURS_DE_PORTAGE.md §2.1. (10/11/2026) */
body.t3 .jdgridtb tr.filterrow td .jdclearfilter {
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
}
body.t3 .jdgridtb tr.filterrow td select.form-control:not([multiple]) {
    background-size: 9px 6px;
    background-position: right 9px center;
    padding-right: 24px;
}
body.t3 .jdgridtb tr.filterrow td:has(.jdclearfilter) select.form-control:not([multiple]) {
    background-position: right 26px center;
    padding-right: 40px;
}
body.t3 .jdgridtb tr.filterrow td:has(.jdclearfilter) .chosen-container-single .chosen-single { padding-right: 40px; }
body.t3 .jdgridtb tr.filterrow td:has(.jdclearfilter) .chosen-container-single .chosen-single div { right: 18px; }
/* Champ du filtre multiple : la croix est posée dessus, on lui garde la place. */
body.t3 .jdgridtb tr.filterrow td:has(.jdclearfilter) .jdinpselmul { padding-right: 24px; }

/* =================================================================
   16. PANNEAU APPARENCE (User Dropdown)
   -----------------------------------------------------------------
   Switch clair/sombre + trois pastilles de thème. Le bouton
   clair/sombre qui vivait dans la navbar a été déplacé ici.
   ================================================================= */

body.t3 .t3-appearance {
    padding: 4px 14px 10px;
}

body.t3 .t3-appearance__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

body.t3 .t3-appearance__row--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

body.t3 .t3-appearance__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3-text-2);
    white-space: nowrap;
}

body.t3 .t3-appearance__label i {
    font-size: 14px;
    color: var(--t3-text-3);
}

/* ── Switch clair / sombre ── */
body.t3 a.t3-switch {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 21px;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t3-text) 16%, transparent);
    transition: background-color 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 a.t3-switch:hover,
body.t3 a.t3-switch:focus {
    background: color-mix(in srgb, var(--t3-text) 24%, transparent);
}

body.t3 a.t3-switch.is-on,
body.t3 a.t3-switch.is-on:hover {
    background: var(--t3-accent);
}

body.t3 .t3-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 a.t3-switch.is-on .t3-switch__knob {
    transform: translateX(17px);
}

/* ── Pastilles de thème ──
   Chaque pastille montre son propre couple accent / accent-2 : on
   choisit sur l'aperçu, pas sur un nom. Les couleurs sont écrites
   en dur ici, volontairement — une pastille doit montrer SA palette,
   pas celle du thème actif. */
body.t3 .t3-swatches {
    display: flex;
    gap: 10px;
    padding-left: 21px;
}

body.t3 a.t3-swatch {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--t3-border-sub);
    box-shadow: var(--t3-sh-1);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 a.t3-swatch:hover {
    transform: scale(1.12);
    box-shadow: var(--t3-sh-2);
}

body.t3 a.t3-swatch--azur   { background: linear-gradient(135deg, #2563eb 0%, #2563eb 50%, #ec4899 50%, #ec4899 100%); }
body.t3 a.t3-swatch--espana { background: linear-gradient(135deg, #c60b1e 0%, #c60b1e 50%, #f1bf00 50%, #f1bf00 100%); }
/* Menthe montre ses trois teintes : le bois fait partie de la palette,
   la pastille doit le dire. */
body.t3 a.t3-swatch--menthe { background: linear-gradient(135deg, #059669 0%, #059669 38%, #84cc16 38%, #84cc16 68%, #6b4a2f 68%, #6b4a2f 100%); }

body.t3 a.t3-swatch.is-active {
    box-shadow: 0 0 0 2px var(--t3-glass-hi),
                0 0 0 4px var(--t3-accent);
}

/* La coche n'apparaît que sur la pastille active */
body.t3 .t3-swatch__check {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

body.t3 a.t3-swatch.is-active .t3-swatch__check {
    display: flex;
}

/* Le dropdown Bootstrap colore les <a> de son menu : on neutralise
   pour le switch et les pastilles, qui ne sont pas des liens texte. */
body.t3 .navbar-crm-header__right .dropdown-menu > li > .t3-appearance a.t3-switch:hover,
body.t3 .navbar-crm-header__right .dropdown-menu > li > .t3-appearance a.t3-swatch:hover,
body.t3 .t3-appearance a:hover,
body.t3 .t3-appearance a:focus {
    text-decoration: none;
}
/* =================================================================
   17. ONGLETS CONTACT + CADRE-LEGEND + TITRES DE RÉGLAGES
   -----------------------------------------------------------------
   Tout est écrit en !important dans main.css / settings.php : il faut
   le reprendre pour repasser devant.
   ================================================================= */

/* ── Titres de la page de réglages ──
   Le texte suivait déjà le thème (il utilise var(--cc-text)), mais le
   titre n'avait aucune marque d'accent. On ajoute un court filet sous
   le libellé, en plus du trait de séparation existant. */
body.t3 .page-settings .settings-content h2 {
    position: relative;
    border-bottom-color: var(--t3-border-sub);
}

body.t3 .page-settings .settings-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--t3-accent) 0%, var(--t3-accent-2) 100%);
}

/* =================================================================
   18. JDGRID — barre d'outils, colonnes figées, pagination
   -----------------------------------------------------------------
   Les boutons sont des .btn-xs portant des classes sémantiques que
   JDGrid emploie comme un simple nuancier (refresh: btn-warning,
   export: btn-info, showcolumns: btn-primary…). Résultat : une barre
   arc-en-ciel où la couleur ne veut rien dire.

   On les unifie en boutons d'outil qui suivent l'accent. Seul
   .btn-danger garde sa teinte : là, le rouge signifie vraiment
   quelque chose (suppression).

   Mes sélecteurs de la section 15 (.jdgridtools, .jdgrid-btn) ne
   correspondaient à aucune classe réelle et ne faisaient rien ;
   les vraies classes sont .jdgridbtns et .jdviewsbar.
   ================================================================= */

/* ── Barre d'en-tête des grilles (11/11/2026) ──
   12/11/2026 : tailles en variables (--jdg-*), qui suivent l'écran : plus
   fines sur écran de bureau, plus grandes au doigt (pointeur « coarse »).
   Même langage que les fenêtres mm et les en-têtes Factures / Stocks :
   outils, bouton « vues », pagination, plein écran = capsules de verre
   où les boutons sont transparents et se soulèvent au survol. Les
   catégories et vues sont dans le panneau latéral (bloc suivant).
   La couleur de chaque action (reinit = vert, rafraîchir = orange,
   export = cyan…) reste, mais sur l'ICÔNE seulement : on retrouve le
   bouton sans la barre arc-en-ciel de carrés pleins.
   Les !important reprennent ceux de main.css / Bootstrap sur .btn. */

/* Tailles de la barre : une seule source, réglée par taille d'écran plus bas */
body.t3 .jdghead {
    --jdg-h: 24px;        /* boutons d'outils, bouton des vues */
    --jdg-hp: 22px;       /* flèches, n° de page, lignes par page */
    --jdg-ico: 14px;      /* icônes */
    --jdg-px: 6px;        /* marge latérale d'un bouton */
    --jdg-fs: 12px;       /* textes */
    --jdg-fs2: 11.5px;    /* compteur, « sur N » */
    gap: 6px 10px;
    padding: 2px 2px 6px;
}
@media (max-width: 1440px) {
    body.t3 .jdghead { --jdg-h: 22px; --jdg-hp: 20px; --jdg-ico: 13px; --jdg-px: 5px; --jdg-fs: 11.5px; --jdg-fs2: 11px; }
}
@media (min-width: 2200px) {
    body.t3 .jdghead { --jdg-h: 28px; --jdg-hp: 26px; --jdg-ico: 16px; --jdg-px: 7px; --jdg-fs: 13px; --jdg-fs2: 12px; }
}
/* Écran tactile : assez grand pour le doigt, quelle que soit la largeur */
@media (pointer: coarse) {
    body.t3 .jdghead { --jdg-h: 32px; --jdg-hp: 30px; --jdg-ico: 16px; --jdg-px: 8px; --jdg-fs: 12.5px; --jdg-fs2: 12px; }
}

/* Capsules (outils, pagination, catégories, plein écran) */
body.t3 .jdghead .jdgridbtns,
body.t3 .jdghead .jdgridpager,
body.t3 .jdghead .jdgviewsopen-wrap,
body.t3 .jdghead .jdgtoprightbtns {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 11px;
    border: 1px solid var(--t3-border-sub);
    background: var(--t3-glass-lo);
}

/* Bouton d'outil : transparent, icône colorée, se soulève au survol */
body.t3 .jdghead :is(.jdgridbtns, .jdgtoprightbtns) a.btn {
    --jdg-ico-c: var(--t3-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--jdg-h);
    height: var(--jdg-h);
    padding: 0 var(--jdg-px);
    margin: 0;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--t3-text-2) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: var(--jdg-fs);
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    transition: background-color .2s cubic-bezier(0.22, 1, 0.36, 1),
                color .2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.t3 .jdghead :is(.jdgridbtns, .jdgtoprightbtns) a.btn > i {
    font-size: var(--jdg-ico);
    line-height: 1;
    color: var(--jdg-ico-c);
}
body.t3 .jdghead :is(.jdgridbtns, .jdgtoprightbtns) a.btn:hover,
body.t3 .jdghead :is(.jdgridbtns, .jdgtoprightbtns) a.btn:focus-visible,
body.t3 .jdghead .jdgridbtns .open > a.btn {
    background: var(--t3-solid) !important;
    color: var(--t3-text) !important;
    outline: none;
    box-shadow: 0 1px 2px rgba(19, 26, 46, 0.08), 0 3px 10px rgba(19, 26, 46, 0.06) !important;
}
/* Teinte d'icône par action (classes de JDGrid, cf. defaultBtnCss) */
body.t3 .jdghead a.btn.btn-primary { --jdg-ico-c: var(--t3-brand); }
body.t3 .jdghead a.btn.btn-success { --jdg-ico-c: #15803d; }
body.t3 .jdghead a.btn.btn-warning { --jdg-ico-c: #c2680a; }
body.t3 .jdghead a.btn.btn-info    { --jdg-ico-c: #0e7490; }
body.t3 .jdghead a.btn.btn-danger  { --jdg-ico-c: #dc2626; }
body.t3 .jdghead a.btn.colgreencan-alt { --jdg-ico-c: #0f766e; } /* reinit, cf. js/JDGrid-btnscss.js */

/* Pagination : flèches transparentes, n° de page en champ blanc */
body.t3 .jdghead .jdgridpager > div { display: inline-flex; align-items: center; }
body.t3 .jdghead .jdgridpager > div > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--jdg-hp);
    height: var(--jdg-hp);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 8px;
    color: var(--t3-text-2);
    background: transparent;
}
body.t3 .jdghead .jdgridpager > div > a:not(.disabled):hover {
    background: var(--t3-solid) !important;
    color: var(--t3-accent-lo) !important;
    box-shadow: 0 1px 2px rgba(19, 26, 46, 0.08), 0 3px 10px rgba(19, 26, 46, 0.06);
}
body.t3 .jdghead .jdgridpager > div > a.disabled { color: var(--t3-text-3); opacity: .4; }
body.t3 .jdghead .jdgridpager .jdgridnumpage {
    width: calc(var(--jdg-hp) + 12px);
    height: var(--jdg-hp);
    margin: 0 2px;
    border: 1px solid var(--t3-border-sub);
    border-radius: 8px;
    background: var(--t3-solid);
    color: var(--t3-text);
    font-size: var(--jdg-fs);
    font-weight: 700;
    text-align: center;
}
body.t3 .jdghead .jdgridpager .jdgridnbpage {
    width: auto;
    min-width: 0;
    max-width: 78px;
    field-sizing: content;
    height: var(--jdg-hp);
    padding: 0 6px 0 2px;
    border: 0;
    background: transparent;
    color: var(--t3-text-3);
    font-size: var(--jdg-fs2);
    font-weight: 600;
}
body.t3 .jdghead .jdgridpager .jdgridnbbypage {
    height: var(--jdg-hp);
    margin-left: 4px;
    padding: 0 20px 0 8px;
    border: 1px solid var(--t3-border-sub);
    border-radius: 8px;
    background: var(--t3-solid) var(--t3-chevron) no-repeat right 8px center / 9px 6px;
    color: var(--t3-text-2);
    font-size: var(--jdg-fs);
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Compteur « Enregistrement x - y sur N » */
body.t3 .jdghead .jdgridrecords {
    color: var(--t3-text-3);
    font-size: var(--jdg-fs2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Sombre ── */
body.t3.v2-dark .jdghead :is(.jdgridbtns, .jdgtoprightbtns) a.btn:hover,
body.t3.v2-dark .jdghead :is(.jdgridbtns, .jdgtoprightbtns) a.btn:focus-visible,
body.t3.v2-dark .jdghead .jdgridbtns .open > a.btn,
body.t3.v2-dark .jdghead .jdgridpager > div > a:not(.disabled):hover {
    background: var(--t3-glass-hi) !important;
    box-shadow: none !important;
}
body.t3.v2-dark .jdghead a.btn.btn-primary { --jdg-ico-c: var(--t3-brand-hi); }
body.t3.v2-dark .jdghead a.btn.btn-success { --jdg-ico-c: #4ade80; }
body.t3.v2-dark .jdghead a.btn.btn-warning { --jdg-ico-c: #fbbf24; }
body.t3.v2-dark .jdghead a.btn.btn-info    { --jdg-ico-c: #22d3ee; }
body.t3.v2-dark .jdghead a.btn.btn-danger  { --jdg-ico-c: #f87171; }
body.t3.v2-dark .jdghead a.btn.colgreencan-alt { --jdg-ico-c: #2dd4bf; }
body.t3.v2-dark .jdghead .jdgridpager .jdgridnumpage,
body.t3.v2-dark .jdghead .jdgridpager .jdgridnbbypage {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}
body.t3.v2-dark .jdghead .jdgridpager .jdgridnbbypage { background-image: var(--t3-chevron-dark); }


/* ── Bouton « vues » : juste après les outils ── */
body.t3 .jdghead .jdgviewsopen {
    --jdg-col: var(--t3-accent);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 280px;
    height: var(--jdg-h);
    padding: 0 calc(var(--jdg-px) + 4px) 0 calc(var(--jdg-px) + 2px);
    border-radius: 8px;
    color: var(--t3-text-2);
    font-size: var(--jdg-fs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s cubic-bezier(0.22, 1, 0.36, 1), color .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.t3 .jdghead .jdgviewsopen > i { font-size: var(--jdg-ico); color: var(--t3-accent); }
body.t3 .jdghead .jdgviewsopen-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in srgb, var(--jdg-col) 62%, var(--t3-text));
}
body.t3 .jdghead .jdgviewsopen-cat::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--jdg-col);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jdg-col) 20%, transparent);
}
body.t3 .jdghead .jdgviewsopen-vue { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--t3-text); }
body.t3 .jdghead .jdgviewsopen-vue:not(:empty)::before { content: "·"; margin-right: 7px; color: var(--t3-text-3); }
body.t3 .jdghead .jdgviewsopen-vue:empty { display: none; }
body.t3 .jdghead .jdgviewsopen:hover,
body.t3 .jdghead .jdgviewsopen:focus-visible,
body.t3 .jdgviews-ouvert .jdghead .jdgviewsopen {
    background: var(--t3-solid);
    color: var(--t3-text);
    outline: none;
    box-shadow: 0 1px 2px rgba(19, 26, 46, 0.08), 0 3px 10px rgba(19, 26, 46, 0.06);
}
body.t3.v2-dark .jdghead .jdgviewsopen:hover,
body.t3.v2-dark .jdghead .jdgviewsopen:focus-visible,
body.t3.v2-dark .jdgviews-ouvert .jdghead .jdgviewsopen { background: var(--t3-glass-hi); box-shadow: none; }
body.t3.v2-dark .jdghead .jdgviewsopen-cat { color: color-mix(in srgb, var(--jdg-col) 55%, #ffffff); }

/* ── Panneau des vues : glisse depuis la gauche, par-dessus la grille ──
   Même feuille que les fenêtres mm (halos, verre, liseré). Fermé, il est
   hors champ (transform) et inerte (visibility) : rien ne l'atteint au
   clavier ni au survol. */
body.t3 .jdgviews-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    width: min(310px, calc(100% - 24px));
    color: var(--t3-text);
    background:
        radial-gradient(70% 30% at 0% 0%, var(--t3-orb-1, rgba(37, 99, 235, 0.16)), transparent 72%),
        radial-gradient(60% 30% at 100% 100%, var(--t3-orb-3, rgba(139, 92, 246, 0.14)), transparent 72%),
        var(--t3-solid);
    border: 1px solid var(--t3-border-sub);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(19, 26, 46, 0.18), 0 4px 12px rgba(19, 26, 46, 0.08);
    transform: translateX(calc(-100% - 20px));
    visibility: hidden;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .3s;
}
body.t3 .jdgviews-ouvert > .jdgviews-panel {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
body.t3 .jdgviews-voile {
    position: absolute;
    inset: 0;
    z-index: 149;
    border-radius: 14px;
    background: rgba(19, 26, 46, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.t3 .jdgviews-ouvert > .jdgviews-voile { opacity: 1; pointer-events: auto; }
/* Une grille presque vide doit laisser la place au panneau */
body.t3 .jdgridbox.jdgviews-ouvert { min-height: 440px; }

body.t3 .jdgvp-tete { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
body.t3 .jdgvp-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: 11px; font-size: 18px;
    color: var(--t3-accent);
    background: color-mix(in srgb, var(--t3-accent) 13%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.t3 .jdgvp-titre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.t3 .jdgvp-titre strong { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--t3-text); }
body.t3 .jdgvp-titre small { font-size: 11.5px; color: var(--t3-text-3); }
body.t3 .jdgvp-fermer {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 10px; font-size: 17px;
    color: var(--t3-text-3); border: 1px solid transparent; text-decoration: none;
}
body.t3 .jdgvp-fermer:hover, body.t3 .jdgvp-fermer:focus-visible {
    background: var(--t3-glass-hi); border-color: var(--t3-border-sub); color: var(--t3-text); outline: none;
}
body.t3 .jdgvp-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 12px 12px; }
body.t3 .jdgvp-label {
    margin: 12px 4px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--t3-text-3);
}
body.t3 .jdgvp-corps > .jdgvp-label:first-child { margin-top: 2px; }
body.t3 .jdgviews-panel .jdviewscats,
body.t3 .jdgviews-panel .jdviewsbtns { display: flex; flex-direction: column; gap: 3px; }
body.t3 .jdgviews-panel .jdviewscats {
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--t3-border-sub);
    background: var(--t3-glass-lo);
}
body.t3 .jdgvp-vide { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--t3-text-3); }
body.t3 .jdgviews-panel .jdviewsbtns:has(> .jdgloadview:not(.display-none)) + .jdgvp-vide { display: none; }

/* Une ligne de catégorie ou de vue */
body.t3 .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview) {
    --jdg-col: var(--t3-accent);
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px 6px 11px;
    margin: 0;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--t3-text-2) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    white-space: normal;
    transition: background-color .2s cubic-bezier(0.22, 1, 0.36, 1), color .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1), border-color .2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.t3 .jdgviews-panel a.jdgloadview.display-none { display: none; }
body.t3 .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview)::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jdg-col);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jdg-col) 20%, transparent);
}
body.t3 .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview) > span { flex: 1 1 auto; min-width: 0; }
body.t3 .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview) > i { flex: none; font-size: 14px; }
body.t3 .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview):hover,
body.t3 .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview):focus-visible {
    background: var(--t3-glass-hi) !important;
    color: var(--t3-text) !important;
    outline: none;
}
body.t3 .jdgviews-panel a.jdgloadcat.jdgcurcat {
    background: var(--t3-solid) !important;
    color: color-mix(in srgb, var(--jdg-col) 62%, var(--t3-text)) !important;
    box-shadow: 0 1px 2px rgba(19, 26, 46, 0.08), 0 3px 10px rgba(19, 26, 46, 0.06) !important;
}
body.t3 .jdgviews-panel a.jdgloadview.jdgcurview {
    background: color-mix(in srgb, var(--jdg-col) 12%, var(--t3-solid)) !important;
    border-color: color-mix(in srgb, var(--jdg-col) 40%, transparent) !important;
    color: color-mix(in srgb, var(--jdg-col) 62%, var(--t3-text)) !important;
}
/* Partage / modifier / supprimer : au survol de la ligne (JDGrid.css) */
body.t3 .jdgviews-panel :is(.jdgupdcat, .jdgdelcat, .jdgupdview, .jdgdelview) {
    padding: 4px;
    border-radius: 6px;
}
body.t3 .jdgviews-panel :is(.jdgupdcat, .jdgdelcat, .jdgupdview, .jdgdelview):hover { background: var(--t3-glass-hi); }

/* Pied : actions sur les vues */
body.t3 .jdgvp-pied {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-top: 1px solid var(--t3-border-sub);
}
body.t3 .jdgvp-pied a.btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px dashed color-mix(in srgb, var(--t3-text) 18%, transparent) !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--t3-text-2) !important;
    box-shadow: none !important;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
}
body.t3 .jdgvp-pied a.btn > i { font-size: 16px; color: var(--t3-accent); }
body.t3 .jdgvp-pied a.btn:hover, body.t3 .jdgvp-pied a.btn:focus-visible {
    border-style: solid !important;
    border-color: var(--t3-border-sub) !important;
    background: var(--t3-solid) !important;
    color: var(--t3-text) !important;
    outline: none;
}

body.t3.v2-dark .jdgviews-panel { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); }
body.t3.v2-dark .jdgviews-voile { background: rgba(0, 0, 0, 0.35); }
body.t3.v2-dark .jdgvp-ico { box-shadow: none; }
body.t3.v2-dark .jdgviews-panel a.jdgloadcat.jdgcurcat {
    background: var(--t3-glass-hi) !important;
    color: color-mix(in srgb, var(--jdg-col) 55%, #ffffff) !important;
    box-shadow: none !important;
}
body.t3.v2-dark .jdgviews-panel a.jdgloadview.jdgcurview {
    background: color-mix(in srgb, var(--jdg-col) 20%, transparent) !important;
    color: color-mix(in srgb, var(--jdg-col) 55%, #ffffff) !important;
}
body.t3.v2-dark .jdgviews-panel :is(a.jdgloadcat, a.jdgloadview)::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
body.t3.v2-dark .jdgvp-pied a.btn:hover { background: var(--t3-glass-hi) !important; }

@media (prefers-reduced-motion: reduce) {
    body.t3 .jdgviews-panel, body.t3 .jdgviews-ouvert > .jdgviews-panel, body.t3 .jdgviews-voile { transition: none; }
}

/* ── Barres de défilement de la grille : visibles au survol seulement ──
   Fines et transparentes au repos, elles apparaissent quand la souris
   entre dans la grille (ou que le tableau a le focus). Vaut aussi pour la
   barre du haut (double défilement, js/double-scroll.js).
   scrollbar-color : Chrome / Edge 121+, Firefox ; ::-webkit-* : Safari. */
body.t3 .jdgridbox :is(.jdgridtbbox, .doubleScroll-scroll-wrapper) {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
body.t3 .jdgridbox:is(:hover, :focus-within) :is(.jdgridtbbox, .doubleScroll-scroll-wrapper) {
    scrollbar-color: color-mix(in srgb, var(--t3-accent) 45%, transparent) transparent;
}
body.t3 .jdgridbox :is(.jdgridtbbox, .doubleScroll-scroll-wrapper)::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
body.t3 .jdgridbox :is(.jdgridtbbox, .doubleScroll-scroll-wrapper)::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
body.t3 .jdgridbox:is(:hover, :focus-within) :is(.jdgridtbbox, .doubleScroll-scroll-wrapper)::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--t3-accent) 38%, transparent);
}

/* ── Listes déroulantes de la grille (filtres, lignes par page) ──
   Le menu d'un <select> natif est dessiné par le système : sous Windows,
   Edge et Chrome le montraient « à l'ancienne ». appearance: base-select
   (Chrome / Edge 135+) rend ce menu stylable ; ailleurs, rien ne change. */
@supports (appearance: base-select) {
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen),
    body.t3 .jdghead .jdgridpager .jdgridnbbypage {
        appearance: base-select;
    }
    /* base-select pose son propre alignement : on recentre la valeur */
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen),
    body.t3 .jdghead .jdgridpager .jdgridnbbypage {
        display: inline-flex;
        align-items: center;
        line-height: 1.2;
        padding-top: 0;
        padding-bottom: 0;
    }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen) { display: flex; width: 100%; }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen)::picker-icon,
    body.t3 .jdghead .jdgridpager .jdgridnbbypage::picker-icon { display: none; }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen)::picker(select),
    body.t3 .jdghead .jdgridpager .jdgridnbbypage::picker(select) {
        appearance: base-select;
        margin-top: 4px;
        padding: 5px;
        min-width: anchor-size(width);
        max-height: min(340px, 60vh);
        border: 1px solid var(--t3-border-sub);
        border-radius: 12px;
        background: var(--t3-solid);
        box-shadow: 0 16px 44px rgba(19, 26, 46, 0.18), 0 4px 12px rgba(19, 26, 46, 0.08);
        color: var(--t3-text);
        font-family: inherit;
    }
    /* Dans la ligne de filtres, Chrome ouvrait le menu AU-DESSUS du champ
       (le champ est dans un en-tête collant, dans un cadre qui défile) alors
       que la place ne manque pas dessous : la ligne de filtres est toujours
       en haut de la grille, on fixe le menu en dessous. */
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen)::picker(select) {
        position-area: bottom span-right;
        position-try-fallbacks: none;
    }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen) option,
    body.t3 .jdghead .jdgridpager .jdgridnbbypage option {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 32px;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--t3-text-2);
        background: transparent;
        cursor: pointer;
    }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen) option:is(:hover, :focus-visible),
    body.t3 .jdghead .jdgridpager .jdgridnbbypage option:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--t3-accent) 10%, transparent);
        color: var(--t3-text);
        outline: none;
    }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen) option:checked,
    body.t3 .jdghead .jdgridpager .jdgridnbbypage option:checked {
        font-weight: 700;
        color: var(--t3-accent-lo);
    }
    body.t3 .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen) option::checkmark,
    body.t3 .jdghead .jdgridpager .jdgridnbbypage option::checkmark { order: 1; margin-left: auto; color: var(--t3-accent); }
    body.t3.v2-dark .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen)::picker(select),
    body.t3.v2-dark .jdghead .jdgridpager .jdgridnbbypage::picker(select) {
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
    }
    body.t3.v2-dark .jdgridtb tr.filterrow td > select.form-control:not(.select-chosen) option:checked,
    body.t3.v2-dark .jdghead .jdgridpager .jdgridnbbypage option:checked { color: var(--t3-accent-hi); }
}

/* Items des menus déroulants export / mode d'affichage */
body.t3 .jdgridbtns .dropdown-menu,
body.t3 .jdviewsbar .dropdown-menu {
    border-radius: var(--t3-radius);
    border: 1px solid var(--t3-border-sub);
    background: var(--t3-glass-hi);
    box-shadow: var(--t3-sh-3);
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
}

body.t3 .jdgridbtns .dropdown-menu > li > a:hover,
body.t3 .jdviewsbar .dropdown-menu > li > a:hover {
    background: color-mix(in srgb, var(--t3-accent) 10%, transparent);
    color: var(--t3-accent-lo);
    border-radius: var(--t3-radius-sm);
}

/* ── Colonnes figées ──
   Elles DOIVENT rester opaques : elles glissent au-dessus des autres
   cellules pendant le défilement horizontal, et la moindre
   transparence rendrait les deux couches illisibles. D'où les tokens
   --t3-solid / --t3-solid-alt, une valeur pleine par thème.

   En dark, JDGrid.css les figeait sur rgba(15,23,42,1) : le marine
   d'Azur, qui apparaissait tel quel sur les fonds bruns d'Espana et
   verts de Menthe. */
body.t3 .jdgridtb tbody td.jdgridfreez {
    background-color: var(--t3-solid);
}

body.t3 .jdgridtb tbody tr:nth-child(2n+1) > td.jdgridfreez {
    background-color: var(--t3-solid-alt);
}

body.t3 .jdgridtb tbody tr:hover td.jdgridfreez {
    background-color: color-mix(in srgb, var(--t3-accent) 14%, var(--t3-solid));
}

body.t3 .jdgridtb thead th.jdgridfreez,
body.t3 .jdgridtb thead td.jdgridfreez {
    background-color: color-mix(in srgb, var(--t3-accent) 7%, var(--t3-solid));
    color: var(--t3-text-2);
}

body.t3.v2-dark .jdgridtb tbody td.jdgridfreez {
    background-color: var(--t3-solid);
}

body.t3.v2-dark .jdgridtb tbody tr:nth-child(2n+1) > td.jdgridfreez {
    background-color: var(--t3-solid-alt);
}

body.t3.v2-dark .jdgridtb tbody tr:hover td.jdgridfreez {
    background-color: color-mix(in srgb, var(--t3-accent) 26%, var(--t3-solid));
}

body.t3.v2-dark .jdgridtb thead th.jdgridfreez,
body.t3.v2-dark .jdgridtb thead td.jdgridfreez {
    background-color: color-mix(in srgb, var(--t3-accent) 12%, var(--t3-solid));
    color: var(--t3-text-2);
}

/* Ombre de séparation des colonnes figées */
body.t3 .jdshadowleft {
    box-shadow: 3px 0 8px color-mix(in srgb, var(--t3-text) 10%, transparent);
}

/* =================================================================
   19. BARRES DE DÉFILEMENT
   -----------------------------------------------------------------
   main.css posait sur « * » un scrollbar-color: #3498db #dfeffc et,
   côté WebKit, un pouce en radial-gradient bleu. C'était visible sur
   chaque zone scrollable et totalement indépendant du thème.
   ================================================================= */

body.t3 * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--t3-accent) 45%, transparent) transparent;
}

body.t3 *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

body.t3 *::-webkit-scrollbar-track {
    background: transparent;
}

body.t3 *::-webkit-scrollbar-thumb {
    /* Pouce plein, sans dégradé : le radial-gradient d'origine
       « bavait » sur 7px de large. */
    background: color-mix(in srgb, var(--t3-accent) 38%, transparent);
    border-radius: 999px;
    /* Bordure transparente = marge intérieure, le pouce ne colle pas
       au bord de la piste. */
    border: 2px solid transparent;
    background-clip: content-box;
}

body.t3 *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--t3-accent) 62%, transparent);
    border: 2px solid transparent;
    background-clip: content-box;
}

body.t3 *::-webkit-scrollbar-thumb:active {
    background: var(--t3-accent);
    border: 2px solid transparent;
    background-clip: content-box;
}

body.t3 *::-webkit-scrollbar-corner {
    background: transparent;
}

/* Les zones qui masquaient volontairement leur barre le restent :
   navbar défilante, sidebar, listes internes. */
body.t3 .navbar-crm-nav::-webkit-scrollbar,
body.t3 #sidebar-scroll::-webkit-scrollbar,
body.t3 #sidebar-scroll .sidebar-nav::-webkit-scrollbar,
body.t3 #sidebar-alt-scroll::-webkit-scrollbar {
    display: none;
}
/* =================================================================
   20. CONTACT.PHP — cartes, sélecteur de prestations, onglets
   -----------------------------------------------------------------
   .cc-card, .kc-card et .prestelm portaient des dégradés et des
   fonds clairs codés en dur, sans AUCUNE règle body.v2-dark :
   ils restaient lumineux en mode sombre. .cc-card est la languette
   affichée quand #contact-left est replié, d'où l'impression que
   c'est la colonne qui reste claire.
   ================================================================= */

/* ── Carte compacte de #contact-left (languette repliée) ── */
body.t3 .cc-card {
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--t3-accent) 7%, var(--t3-solid)) 0%,
        var(--t3-solid) 46%,
        color-mix(in srgb, var(--t3-accent-2) 6%, var(--t3-solid)) 100%);
    color: var(--t3-text-2);
}

body.t3 .cc-card:hover,
body.t3 .cc-card:focus-visible {
    box-shadow: var(--t3-sh-2);
}

/* ── Bandeau kc-card ── */
body.t3 .kc-card {
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    background: linear-gradient(125deg,
        color-mix(in srgb, var(--t3-accent) 7%, var(--t3-solid)) 0%,
        var(--t3-solid) 52%,
        color-mix(in srgb, var(--t3-accent-2) 6%, var(--t3-solid)) 100%);
}

/* L'onglet actif et la zone du dossier partagent une meme surface, prise
   au theme : --t3-solid-alt, definie pour chacun des six thèmes en clair
   comme en sombre. Ni blanc pur — trop dur — ni le fond de page, dont le
   cadre doit se detacher.

   Aucune bordure : c'est la continuite de fond entre la languette et le
   contenu qui porte l'etat, pas un trait. */
body.t3 #contact-right {
    /* En clair c'est --t3-solid qui se detache le mieux du fond de page ;
       en sombre c'est --t3-solid-alt. Mesure faite sur les six themes :
       aucun des deux ne gagne dans les deux modes. */
    --presta-fond: var(--t3-solid);
    --presta-ombre: color-mix(in srgb, var(--t3-text) 22%, transparent);
}

body.t3.v2-dark #contact-right {
    --presta-fond: var(--t3-solid-alt);
    --presta-ombre: rgba(0, 0, 0, .55);
}

/* Le code de prestation garde ses couleurs : elles sont posées en
   JS par prestation et servent à l'identifier. */

/* =================================================================
   21. CADRE-LEGEND — en-têtes de sections repliables
   -----------------------------------------------------------------
   main.css définit .cadre-legend trois fois ; c'est le bloc de la
   ligne 11368 qui gagne. Il portait :
       background: #f9fafc            gris clair figé
       color: #333
       border-bottom: 1px solid #eee
       box-shadow: 3px 3px 6px rgba(0, 123, 255, 0.4)

   Cette dernière ligne était le vrai coupable : une ombre BLEUE à
   40 %, dure et décalée de 3px, visible sur chaque en-tête de section
   quel que soit le thème.

   Une règle body.v2-dark existait déjà (main.css:11813) mais figée sur
   la palette Azur — fond slate et ombre bleu clair — donc fausse sur
   Espana et Menthe. Elle utilise !important : il faut le reprendre.

   L'ombre portée décalée est conservée comme signature du CRM, mais
   ramenée à l'accent et adoucie (18 % au lieu de 40 %).
   ================================================================= */

body.t3 .cadre-legend {
    background: color-mix(in srgb, var(--t3-accent) 5%, var(--t3-glass-hi)) !important;
    color: var(--t3-text) !important;
    border-bottom: 1px solid var(--t3-border-sub) !important;
    border-radius: var(--t3-radius-sm);
    box-shadow: 2px 2px 8px color-mix(in srgb, var(--t3-accent) 18%, transparent) !important;
    transition: background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .cadre-legend:hover {
    background-color: color-mix(in srgb, var(--t3-accent) 11%, var(--t3-glass-hi)) !important;
    box-shadow: 2px 2px 10px color-mix(in srgb, var(--t3-accent) 26%, transparent) !important;
}

body.t3 .cadre-legend .chevron-toggle {
    color: var(--t3-text-3) !important;
}

body.t3 .cadre-legend:hover .chevron-toggle {
    color: var(--t3-accent) !important;
}

/* ── Dark ── */
body.t3.v2-dark .cadre-legend {
    background: color-mix(in srgb, var(--t3-accent) 12%, var(--t3-solid)) !important;
    color: var(--t3-text) !important;
    border-bottom-color: var(--t3-border-sub) !important;
    box-shadow: 2px 2px 8px color-mix(in srgb, var(--t3-accent) 24%, transparent) !important;
}

body.t3.v2-dark .cadre-legend:hover {
    background-color: color-mix(in srgb, var(--t3-accent) 20%, var(--t3-solid)) !important;
}

/* ── Pastille d'icône de l'en-tête ──
   Les cadre-legend portent un .btn-info.fresh.roundicon qui n'est pas
   un bouton « info » mais une puce décorative : elle suit l'accent.
   Ciblage limité aux cadre-legend pour ne pas toucher aux vrais
   boutons .btn-info d'ailleurs dans l'application. */
body.t3 .cadre-legend .btn.fresh.roundicon,
body.t3 .cadre-legend .btn.roundicon {
    background: color-mix(in srgb, var(--t3-accent) 16%, transparent) !important;
    color: var(--t3-accent-lo) !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.t3 .cadre-legend:hover .btn.fresh.roundicon,
body.t3 .cadre-legend .btn.fresh.roundicon:hover,
body.t3 .cadre-legend .btn.roundicon:hover {
    background: var(--t3-accent-lo) !important;
    color: var(--t3-accent-on) !important;
}

body.t3.v2-dark .cadre-legend .btn.fresh.roundicon,
body.t3.v2-dark .cadre-legend .btn.roundicon {
    background: color-mix(in srgb, var(--t3-accent) 22%, transparent) !important;
    color: var(--t3-accent-hi) !important;
}

body.t3.v2-dark .cadre-legend:hover .btn.fresh.roundicon,
body.t3.v2-dark .cadre-legend .btn.roundicon:hover {
    background: var(--t3-accent) !important;
    color: var(--t3-accent-on) !important;
}

/* ── Boutons .btn-*.fresh en dark ──
   Même défaut que les labels traités en section 12 : fonds clairs
   figés avec !important, donc pastilles lumineuses sur fond sombre.
   Les teintes claires restent inchangées, c'est un choix de style. */
body.t3.v2-dark .btn-info.fresh {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
body.t3.v2-dark .btn-info.fresh:hover,
body.t3.v2-dark .btn-info.fresh:focus {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

body.t3.v2-dark .btn-success.fresh {
    background: rgba(10, 147, 150, 0.20) !important;
    color: #5eead4 !important;
}
body.t3.v2-dark .btn-success.fresh:hover,
body.t3.v2-dark .btn-success.fresh:focus {
    background: #0a9396 !important;
    color: #ffffff !important;
}

body.t3.v2-dark .btn-danger.fresh {
    background: rgba(201, 24, 74, 0.22) !important;
    color: #fda4af !important;
}
body.t3.v2-dark .btn-danger.fresh:hover,
body.t3.v2-dark .btn-danger.fresh:focus {
    background: #c9184a !important;
    color: #ffffff !important;
}

body.t3.v2-dark .btn-warning.fresh {
    background: rgba(243, 114, 44, 0.20) !important;
    color: #fdba74 !important;
}
body.t3.v2-dark .btn-warning.fresh:hover,
body.t3.v2-dark .btn-warning.fresh:focus {
    background: #f3722c !important;
    color: #ffffff !important;
}

body.t3.v2-dark .btn-default.fresh {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #cbd5e1 !important;
}
body.t3.v2-dark .btn-default.fresh:hover,
body.t3.v2-dark .btn-default.fresh:focus {
    background: #64748b !important;
    color: #ffffff !important;
}

/* .btn-primary.fresh relève de l'identité : il suit brand, en clair
   comme en sombre. */
body.t3 .btn-primary.fresh {
    background: color-mix(in srgb, var(--t3-brand) 16%, transparent) !important;
    color: var(--t3-brand) !important;
}
body.t3 .btn-primary.fresh:hover,
body.t3 .btn-primary.fresh:focus {
    background: var(--t3-brand) !important;
    color: var(--t3-brand-on) !important;
}

/* =================================================================
   22. RD-SECTION / KD-CARD / DROPDOWN-HEADER
   -----------------------------------------------------------------
   Trois familles sans aucune règle body.v2-dark : fonds blancs ou
   très clairs codés en dur, donc lumineux en mode sombre.

   Deux exceptions volontaires, signalées par main.css lui-même :
     .rd-section-pastille  ses teintes viennent de section.php
                           ('fond'/'teinte') — une section = une
                           couleur, déclarée avec elle.
     .kd-fiche             mêmes couleurs que dans le sélecteur de
                           prestations, posées côté serveur.
   On ne touche qu'à leur ombre, pas à leur couleur.
   ================================================================= */

/* ── .rd-section : sections repliables ── */
body.t3 .rd-section {
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    background: var(--t3-solid);
}

/* ── li.dropdown-header ──
   Portait background-color: #f9fafc + bordures #eaedf1. La couleur du
   texte suivait déjà le thème (var(--crm-primary)), pas le fond. */
body.t3 li.dropdown-header {
    background-color: color-mix(in srgb, var(--t3-accent) 6%, transparent);
    border-top: 1px solid var(--t3-border-sub);
    border-bottom: 1px solid var(--t3-border-sub);
    color: var(--t3-accent-lo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.t3.v2-dark li.dropdown-header {
    background-color: color-mix(in srgb, var(--t3-accent) 14%, transparent);
    color: var(--t3-accent-hi);
}
/* =================================================================
   23. DV-TOTAUX / PASTILLES DE PIED / SLIDER / CC-EXPAND
   ================================================================= */

/* ── Pastilles de totaux du pied de tableau ──
   Ce sont des <span style="background:#caf0f8"> écrits en dur dans les
   vues nuevo_archivo_*, sans couleur de texte.

   AUCUNE retouche de ces fichiers : on atteint le span englobant avec
   :has(), depuis l'id de la valeur qu'il contient. main.css utilise
   déjà :has() 19 fois, le procédé est donc acquis ici.

   En clair, rien à corriger : le texte hérite de --t3-text, sombre sur
   pastel. Le défaut n'existe qu'en sombre, où ce même texte devient
   clair sur un fond resté pastel. On ne touche donc qu'au sombre.

   Le background inline impose !important.
   Le code couleur est conservé : bleu = surface, rose = déperditions,
   vert = coefficients. */

body.t3 span:has(> [id^="footer_"]) {
    border-radius: var(--t3-radius-sm) !important;
    font-variant-numeric: tabular-nums;
}

body.t3 [id^="footer_"] {
    font-variant-numeric: tabular-nums;
}

body.t3.v2-dark span:has(> #footer_total_surface_value) {
    background: rgba(6, 182, 212, 0.18) !important;
    color: #7fdbee !important;
    box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.28);
}

body.t3.v2-dark span:has(> #footer_total_deperd_before_value) {
    background: rgba(244, 114, 154, 0.16) !important;
    color: #f9a8c4 !important;
    box-shadow: inset 0 0 0 1px rgba(244, 114, 154, 0.26);
}

body.t3.v2-dark span:has(> #footer_total_deperd_after_value) {
    background: rgba(236, 72, 128, 0.22) !important;
    color: #fbb6ce !important;
    box-shadow: inset 0 0 0 1px rgba(236, 72, 128, 0.32);
}

body.t3.v2-dark span:has(> #footer_ki_value) {
    background: rgba(52, 199, 123, 0.16) !important;
    color: #86e0aa !important;
    box-shadow: inset 0 0 0 1px rgba(52, 199, 123, 0.26);
}

body.t3.v2-dark span:has(> #footer_kf_value) {
    background: rgba(52, 199, 123, 0.24) !important;
    color: #a7ecc2 !important;
    box-shadow: inset 0 0 0 1px rgba(52, 199, 123, 0.36);
}

/* La valeur en gras reprend la couleur de sa pastille */
body.t3.v2-dark span:has(> [id^="footer_"]) > [id^="footer_"] {
    color: inherit !important;
}

/* ── .cc-expand ──
   Fond rgba(255,255,255,.55) et texte #7d93a8 : sur fond sombre, un
   voile blanc à 55 % avec un gris moyen dessus, donc quasi illisible.
   Le hover vert #2d6a4f était aussi indépendant du thème.
   C'est le bouton « Modifier la fiche » : il doit se voir. */
body.t3 .cc-expand {
    border-top: 1px solid var(--t3-border-sub);
    background: color-mix(in srgb, var(--t3-accent) 8%, transparent);
    color: var(--t3-text-2);
    border-radius: 0 0 var(--t3-radius) var(--t3-radius);
    transition: background .18s cubic-bezier(0.22, 1, 0.36, 1),
                color .18s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .cc-expand:hover,
body.t3 .cc-expand:focus-visible {
    background: color-mix(in srgb, var(--t3-accent) 18%, transparent);
    color: var(--t3-accent-lo);
    outline: none;
}

body.t3.v2-dark .cc-expand {
    background: color-mix(in srgb, var(--t3-accent) 16%, transparent);
    color: var(--t3-text);
}

body.t3.v2-dark .cc-expand:hover,
body.t3.v2-dark .cc-expand:focus-visible {
    background: color-mix(in srgb, var(--t3-accent) 28%, transparent);
    color: var(--t3-accent-hi);
}
/* =================================================================
   24. DV-REPART / DV-L-RAC / CC-IDENT
   ================================================================= */

/* ── .cc-ident (carte compacte de #contact-left) ──
   .cc-ident ne porte qu'un min-width ; l'illisibilité vient de ses
   deux enfants, dont les couleurs sont figées :
       .cc-nom  #16324f   bleu nuit, invisible sur fond sombre
       .cc-nif  #8496a8   gris moyen, trop faible dans les deux modes
   C'est le nom du contact : la première chose qu'on lit sur la fiche. */
body.t3 .cc-ident .cc-nom,
body.t3 .cc-nom {
    color: var(--t3-text);
}

body.t3 .cc-l,
body.t3 .cc-liste {
    color: var(--t3-text-2);
}

/* =================================================================
   25. #modal-multiope — ajout d'une opération
   -----------------------------------------------------------------
   Couleurs relevées dans main.css (11001-11135) :
       #frmmat / #frmquickmat champs   border #d1d1d1
                                       box-shadow 2px 2px 4px rgba(0,0,0,.15)
       focus                           border #007bff
                                       box-shadow 3px 3px 6px rgba(0,123,255,.4)
       .chosen-drop                    border #d1d1d1
       .chosen-results .highlighted    #dfe7fd / #154674
       .input-group-addon              #f5f5f5 / #d1d1d1
       #frmmat label                   #333

   Ces champs contredisaient la section 14 : rayon 6px en !important et
   ombre portée décalée, alors que tous les autres champs du CRM sont
   des surfaces de verre plates. On les y ramène — le focus part sur
   brand comme partout ailleurs, l'accent restant réservé au chrome.
   ================================================================= */

/* ── Champs des deux formulaires du modal ── */
body.t3 #frmmat .form-control,
body.t3 #frmmat .chosen-container .chosen-single,
body.t3 #frmmat .chosen-container-multi .chosen-choices {
    border-radius: var(--t3-radius-sm) !important;
    border: 1px solid var(--t3-border-sub) !important;
    background-color: var(--t3-glass-hi);
    color: var(--t3-text);
    /* L'ombre portée décalée disparaît : un champ est une surface, pas
       un objet posé au-dessus. */
    box-shadow: none;
}

body.t3 #frmmat .form-control:focus,
body.t3 #frmmat .chosen-container-active .chosen-single {
    border-color: color-mix(in srgb, var(--t3-brand) 55%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-brand) 15%, transparent);
}

body.t3 #frmmat label {
    color: var(--t3-text-2);
    font-weight: 600;
}

body.t3 #frmmat .input-group-addon {
    background-color: color-mix(in srgb, var(--t3-text) 5%, transparent);
    border: 1px solid var(--t3-border-sub);
    color: var(--t3-text-2);
    box-shadow: none;
}

/* ── Liste déroulante Chosen du modal ──
   Traitée comme les autres menus : verre, flou, ombre du thème. */
body.t3 #modal-multiope .chosen-container .chosen-drop {
    border-radius: var(--t3-radius) !important;
    border: 1px solid var(--t3-border-sub) !important;
    background: var(--t3-glass-hi);
    box-shadow: var(--t3-sh-3);
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
}

body.t3 #modal-multiope .chosen-container .chosen-results {
    border-radius: var(--t3-radius) !important;
}

body.t3 #modal-multiope .chosen-container .chosen-results li:first-child {
    border-radius: var(--t3-radius) var(--t3-radius) 0 0 !important;
}

body.t3 #modal-multiope .chosen-container .chosen-results li:last-child {
    border-radius: 0 0 var(--t3-radius) var(--t3-radius) !important;
}

body.t3 #modal-multiope .chosen-container .chosen-results li {
    color: var(--t3-text-2);
}

/* Option survolée / sélectionnée : c'est de la navigation dans une
   liste, donc du chrome — elle suit l'accent. */
body.t3 #modal-multiope .chosen-container .chosen-results li.highlighted,
body.t3 #modal-multiope .chosen-container .chosen-results li.result-selected {
    /* 12% et non 14% : au-delà, l'accent-lo de Menthe tombait à 4.46:1
       sur le fond composé, juste sous le seuil AA. */
    background-color: color-mix(in srgb, var(--t3-accent) 12%, transparent) !important;
    background-image: none !important;
    color: var(--t3-accent-lo) !important;
}

body.t3.v2-dark #modal-multiope .chosen-container .chosen-results li.highlighted,
body.t3.v2-dark #modal-multiope .chosen-container .chosen-results li.result-selected {
    background-color: color-mix(in srgb, var(--t3-accent) 24%, transparent) !important;
    color: var(--t3-accent-hi) !important;
}

/* ── Cadre et en-tête du modal ──
   Le fond vient de la section 26 : dans une modale, une surface
   translucide capte le noir du backdrop et grise. */
body.t3 #modal-multiope .modal-header {
    border-bottom: 1px solid var(--t3-border-sub);
    background: color-mix(in srgb, var(--t3-accent) 6%, transparent);
    border-radius: var(--t3-radius) var(--t3-radius) 0 0;
}

body.t3 #modal-multiope .modal-title {
    color: var(--t3-text);
    font-weight: var(--t3-weight-strong);
    letter-spacing: -0.02em;
}

body.t3 #modal-multiope .modal-title i {
    color: var(--t3-accent);
}

/* =================================================================
   26. MODALES — le verre ne marche pas au-dessus d'un voile noir
   -----------------------------------------------------------------
   Bootstrap pose :
       .modal-backdrop.in { background-color: #000; opacity: .5 }

   Toute surface translucide placée par-dessus laisse remonter ce noir.
   Un --t3-glass-hi (blanc à 68 %) devient donc un gris sale, et non un
   blanc laiteux : le glassmorphism suppose un arrière-plan clair.

   Correction en deux temps :
     1. le backdrop cesse d'être noir — il devient un voile teinté du
        thème AVEC un flou, ce qui donne le vrai effet de profondeur
        (on devine la page derrière au lieu de l'éteindre) ;
     2. .modal-content devient quasi opaque (--t3-solid), donc lisible
        quoi qu'il y ait derrière. Le verre reste porté par le liseré
        clair et le highlight spéculaire, pas par la transparence.
   ================================================================= */

body.t3 .modal-backdrop,
body.t3 .modal-backdrop.in {
    /* opacity ramené à 1 : c'est la couleur qui porte la transparence,
       sinon le flou ne s'applique qu'à moitié. Le fondu à l'ouverture
       reste assuré par .fade (opacity 0 → 1). */
    opacity: 1;
    background-color: color-mix(in srgb, var(--t3-text) 42%, transparent);
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
}

body.t3.v2-dark .modal-backdrop,
body.t3.v2-dark .modal-backdrop.in {
    background-color: rgba(0, 0, 0, 0.62);
}

/* Fond uni, sans teinte : une modale est une feuille posée devant la
   page, pas une vitre. Le mix d'accent que j'avais mis ici salissait
   le blanc pour rien.

   La spécificité doit dépasser (0,3,0) : main.css impose déjà
       .page-settings .modal .modal-content { background: var(--cc-glass-heavy) }
       .page-rights-management .modal .modal-content { ... }
   qui repassaient devant un simple `body.t3 .modal-content` et
   remettaient une surface translucide — donc le gris. */
body.t3 .modal .modal-content,
body.t3 .modal-content {
    border-radius: var(--t3-radius);
    border: 1px solid var(--t3-border-sub);
    background: var(--t3-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--t3-sh-3);
    color: var(--t3-text);
}

body.t3.v2-dark .modal .modal-content,
body.t3.v2-dark .modal-content {
    border-color: var(--t3-border-sub);
}

body.t3 .modal-header {
    border-bottom: 1px solid var(--t3-border-sub);
}

body.t3 .modal-footer {
    border-top: 1px solid var(--t3-border-sub);
}
/* =================================================================
   28. EMPILEMENT DES SÉLECTEURS DE DATE AU-DESSUS DES MODALES
   -----------------------------------------------------------------
   Paysage des z-index du CRM :
       100000  alertes fixes
        99999  .preloader
        10002  .tooltip
        10001  .modal
        10000  .modal-backdrop
         9999  .dropdown-menu.dropdown-custom
         3001  .daterangepicker      <- sous la modale
         1051  .datepicker           <- sous la modale

   Les deux sélecteurs de date sont attachés au <body>, donc frères de
   la modale, et passaient dessous. Le défaut préexistait : la modale
   étant translucide, on devinait le calendrier à travers. En la
   rendant opaque (section 26), je l'ai rendu totalement invisible —
   c'est donc bien mon changement qui a révélé le problème.

   plugins.css impose `.datepicker { z-index: 1051 !important }`, ce
   qui écrase le calcul que bootstrap-datepicker fait normalement
   depuis ses parents. D'où le !important repris ici.

   Valeur retenue : 10050. Au-dessus de la modale et des dropdowns,
   mais sous le preloader et les alertes système, qui doivent rester
   prioritaires. Appliqué partout et pas seulement dans les modales :
   un calendrier ouvert est toujours le dernier élément avec lequel
   l'utilisateur interagit.
   ================================================================= */

body.t3 .datepicker,
body.t3 .datepicker.dropdown-menu {
    z-index: 10050 !important;
}

body.t3 .daterangepicker {
    z-index: 10050 !important;
}

/* jQuery UI pose son propre z-index en inline ; .ui-front le plafonne
   à 100, ce qui le mettrait aussi sous la modale. */
body.t3 .ui-datepicker,
body.t3 .ui-datepicker.ui-front {
    z-index: 10050 !important;
}

/* ── Second cas de figure ──
   js/plugins.js contient à la fois `container:"body"` et un
   `appendTo(t.parent())` : selon le chemin de code, le calendrier peut
   être inséré DANS la modale. Là, aucun z-index ne le sauve — il est
   rogné par l'`overflow: hidden` que mandator.php et settings.php
   posent sur #modal-deal .modal-content pour arrondir les coins.

   On retire ce rognage et on reporte l'arrondi sur l'en-tête et le
   pied, qui sont les seuls éléments à toucher les angles. Rendu
   identique, mais plus rien n'est coupé. */
body.t3 .modal .modal-content,
body.t3 #modal-multiope .modal-content {
    overflow: visible;
}

body.t3 .modal .modal-content > .modal-header:first-child {
    border-top-left-radius: var(--t3-radius);
    border-top-right-radius: var(--t3-radius);
}

body.t3 .modal .modal-content > .modal-footer:last-child {
    border-bottom-left-radius: var(--t3-radius);
    border-bottom-right-radius: var(--t3-radius);
}

/* Un .modal-body qui défile doit garder son propre rognage, sinon le
   contenu déborde du cadre arrondi pendant le scroll. */
body.t3 .modal .modal-body[style*="overflow"] {
    border-radius: var(--t3-radius-sm);
}

/* =================================================================
   29. CHOSEN — select simples et multiples
   -----------------------------------------------------------------
   Trois couches se superposaient :

   plugins.css (base Chosen)  tout bâti sur #1bbae1, le turquoise
                              ProUI : bordure du panneau, option
                              survolée, bordure active, contour des
                              étiquettes. Champs en #ffffff opaque.
   main.css                   a modernisé les étiquettes du multiple,
                              mais en bleu figé (#1d4ed8 + dégradé
                              rgba(59,130,246)).
   main.css body.v2-dark      10 règles pour le sombre, elles aussi
                              figées sur la palette Azur — donc bleues
                              sur Espana et Menthe.

   Tout passe ici sur les tokens. Les deux couches précédentes usent
   de !important : on le reprend, avec body.t3(.v2-dark) qui gagne en
   spécificité.

   Les flèches, croix et loupe étaient des morceaux de chosen-sprite.png
   — une image ne peut pas suivre un thème, et elle disparaît sur fond
   sombre. Elles sont redessinées en SVG inline.

   Les champs fermés adoptent le langage de la section 14 : ce sont des
   champs de formulaire, ils doivent ressembler aux autres.
   ================================================================= */

/* ── Champ fermé, simple et multiple ── */
body.t3 .chosen-container-single .chosen-single,
body.t3 .chosen-container-multi .chosen-choices {
    background-color: var(--t3-glass-hi) !important;
    background-image: none !important;
    border: 1px solid var(--t3-border-sub) !important;
    border-radius: var(--t3-radius-sm) !important;
    color: var(--t3-text);
    box-shadow: none !important;
    min-height: 38px;
    transition: border-color .22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .22s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .chosen-container-single .chosen-single span {
    color: var(--t3-text);
}

body.t3 .chosen-container-single .chosen-single.chosen-default span,
body.t3 .chosen-container-multi .chosen-choices li.search-field .default {
    color: var(--t3-text-3);
}

body.t3 .chosen-container-single .chosen-single:hover,
body.t3 .chosen-container-multi .chosen-choices:hover {
    border-color: color-mix(in srgb, var(--t3-text) 18%, transparent) !important;
}

/* Ouvert / actif : anneau brand, comme le focus des autres champs.
   L'accent reste réservé au chrome. */
body.t3 .chosen-container-active .chosen-single,
body.t3 .chosen-container-active .chosen-choices,
body.t3 .chosen-container-active.chosen-with-drop .chosen-single {
    border: 1px solid color-mix(in srgb, var(--t3-brand) 55%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-brand) 15%, transparent) !important;
}

/* ── Flèche du select simple ──
   Remplace le sprite. Le retournement à l'ouverture se fait par
   rotation, plus par décalage de sprite. */
body.t3 .chosen-container-single .chosen-single div {
    width: 26px;
}

body.t3 .chosen-container-single .chosen-single div b {
    background: var(--t3-chevron) no-repeat center center !important;
    background-size: 12px 8px !important;
    width: 100%;
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: center center !important;
    transform: rotate(180deg);
}

body.t3.v2-dark .chosen-container-single .chosen-single div b {
    background-image: var(--t3-chevron-dark) !important;
}

/* ── Croix de désélection du select simple ── */
body.t3 .chosen-container-single .chosen-single abbr {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 1L9 9M9 1L1 9' stroke='%238d95ac' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 10px 10px !important;
    opacity: .8;
    transition: opacity .15s ease;
}

body.t3 .chosen-container-single .chosen-single abbr:hover {
    background-position: center center !important;
    opacity: 1;
}

/* ── Panneau déroulant ── */
body.t3 .chosen-container .chosen-drop {
    border: 1px solid var(--t3-border-sub) !important;
    border-top: 1px solid var(--t3-border-sub) !important;
    border-radius: var(--t3-radius) !important;
    background: var(--t3-glass-hi) !important;
    box-shadow: var(--t3-sh-3) !important;
    backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--t3-blur-hi)) saturate(180%);
    margin-top: 5px;
    overflow: hidden;
}

/* Dans une modale, le fond est un voile : le verre y capterait du
   noir. On repasse sur la surface pleine (voir section 26). */
body.t3 .modal .chosen-container .chosen-drop {
    background: var(--t3-solid) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Champ de recherche interne ── */
body.t3 .chosen-container-single .chosen-search input[type="text"] {
    border: 1px solid var(--t3-border-sub) !important;
    border-radius: var(--t3-radius-sm) !important;
    background: var(--t3-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Ccircle cx='5.5' cy='5.5' r='4.2' stroke='%238d95ac' stroke-width='1.5'/%3E%3Cpath d='M8.8 8.8L12 12' stroke='%238d95ac' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center !important;
    background-size: 13px 13px !important;
    color: var(--t3-text);
}

body.t3 .chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: color-mix(in srgb, var(--t3-brand) 55%, transparent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--t3-brand) 14%, transparent) !important;
    outline: none;
}

/* ── Options ── */
body.t3 .chosen-container .chosen-results {
    color: var(--t3-text-2);
    margin: 4px;
    padding: 0;
}

body.t3 .chosen-container .chosen-results li {
    color: var(--t3-text-2) !important;
    background-color: transparent !important;
    border-radius: var(--t3-radius-sm);
    padding: 7px 10px;
    transition: background-color .12s ease, color .12s ease;
}

/* Option survolée : même dégradé bichrome que les autres états
   actifs du CRM (sidebar, onglets, navbar). */
body.t3 .chosen-container .chosen-results li.highlighted,
body.t3 .chosen-container .chosen-results li.active-result.highlighted {
    /* 12% : au-dela, l'accent-lo de Menthe passe sous 4.5:1 — meme
       plafond que pour les listes de #modal-multiope (section 25). */
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--t3-accent) 12%, transparent) 0%,
        color-mix(in srgb, var(--t3-accent-2) 8%, transparent) 100%) !important;
    color: var(--t3-accent-lo) !important;
}

body.t3 .chosen-container .chosen-results li.result-selected,
body.t3 .chosen-container .chosen-results li.result-selected.active-result {
    background: color-mix(in srgb, var(--t3-accent) 10%, transparent) !important;
    color: var(--t3-accent-lo) !important;
    font-weight: 600;
}

/* Titre de groupe : capitales espacées, comme les en-têtes de
   colonnes et les titres de section de la sidebar. */
body.t3 .chosen-container .chosen-results li.group-result {
    color: var(--t3-text-3) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: transparent !important;
    padding-top: 10px;
}

body.t3 .chosen-container .chosen-results li.disabled-result {
    color: var(--t3-text-3) !important;
    opacity: .55;
}

body.t3 .chosen-container .chosen-results li.no-results {
    background: color-mix(in srgb, var(--t3-text) 5%, transparent) !important;
    color: var(--t3-text-2) !important;
}

/* ── Étiquettes du select multiple ── */
body.t3 .chosen-container-multi .chosen-choices li.search-choice {
    background: color-mix(in srgb, var(--t3-accent) 10%, transparent) !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--t3-accent) 24%, transparent) !important;
    border-radius: var(--t3-radius-sm) !important;
    color: var(--t3-accent-lo) !important;
    box-shadow: none !important;
    font-weight: 500;
    transition: background .18s cubic-bezier(0.22, 1, 0.36, 1),
                border-color .18s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .chosen-container-multi .chosen-choices li.search-choice span {
    color: var(--t3-accent-lo) !important;
}

body.t3 .chosen-container-multi .chosen-choices li.search-choice:hover {
    background: color-mix(in srgb, var(--t3-accent) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--t3-accent) 42%, transparent) !important;
}

/* Croix de retrait : elle vire au rouge, c'est une suppression.
   Chosen dessine sa croix d'origine en texte « x » (plugins.css, :before,
   recolorée en bleu par main.css) : on la masque, sinon elle se superpose
   au SVG ci-dessous et on voit deux croix (11/11/2026). */
body.t3 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
    content: none !important;
}
body.t3 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M1 1L8 8M8 1L1 8' stroke='%234c5670' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 9px 9px !important;
    opacity: .65;
    transition: opacity .15s ease;
}

body.t3 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M1 1L8 8M8 1L1 8' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    opacity: 1;
}

body.t3 .chosen-container-multi .chosen-choices li.search-choice-disabled {
    background: color-mix(in srgb, var(--t3-text) 6%, transparent) !important;
    border-color: var(--t3-border-sub) !important;
    color: var(--t3-text-3) !important;
}

body.t3 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: var(--t3-text) !important;
    background: transparent !important;
}

/* ── Sombre ──
   Les 10 règles v2-dark de main.css sont figées sur Azur ; body.t3
   passe devant par spécificité. */
body.t3.v2-dark .chosen-container-single .chosen-single,
body.t3.v2-dark .chosen-container-multi .chosen-choices {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--t3-text);
}

body.t3.v2-dark .chosen-container .chosen-drop {
    background: var(--t3-solid) !important;
    border-color: var(--t3-border-sub) !important;
}

body.t3.v2-dark .chosen-container .chosen-results li {
    color: var(--t3-text-2) !important;
}

body.t3.v2-dark .chosen-container .chosen-results li.highlighted {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--t3-accent) 26%, transparent) 0%,
        color-mix(in srgb, var(--t3-accent-2) 16%, transparent) 100%) !important;
    color: var(--t3-accent-hi) !important;
}

body.t3.v2-dark .chosen-container .chosen-results li.result-selected {
    background: color-mix(in srgb, var(--t3-accent) 18%, transparent) !important;
    color: var(--t3-accent-hi) !important;
}

body.t3.v2-dark .chosen-container .chosen-results li.no-results {
    background: rgba(255, 255, 255, 0.06) !important;
}

body.t3.v2-dark .chosen-container-multi .chosen-choices li.search-choice,
body.t3.v2-dark .chosen-container-multi .chosen-choices li.search-choice:hover {
    background: color-mix(in srgb, var(--t3-accent) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--t3-accent) 40%, transparent) !important;
    color: var(--t3-accent-hi) !important;
}

body.t3.v2-dark .chosen-container-multi .chosen-choices li.search-choice span {
    color: var(--t3-accent-hi) !important;
}

body.t3.v2-dark .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M1 1L8 8M8 1L1 8' stroke='%239aa5bd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body.t3.v2-dark .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M1 1L8 8M8 1L1 8' stroke='%23f87171' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body.t3.v2-dark .chosen-container-single .chosen-search input[type="text"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Ccircle cx='5.5' cy='5.5' r='4.2' stroke='%239aa5bd' stroke-width='1.5'/%3E%3Cpath d='M8.8 8.8L12 12' stroke='%239aa5bd' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.t3.v2-dark .chosen-container-single .chosen-single abbr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 1L9 9M9 1L1 9' stroke='%239aa5bd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* =================================================================
   30. FULLCALENDAR (v3, API jQuery)
   -----------------------------------------------------------------
   L'habillage glassmorphism existant est repris tel quel dans sa
   forme — surfaces translucides, boutons arrondis, ombres douces —
   et rebranché sur les tokens. Il était intégralement écrit sur la
   palette Azur : #3B82F6, rgba(59,130,246,…), #0F172A, #94A3B8,
   rgba(241,245,249,…), et côté sombre rgba(96,165,250,…), #e2e8f0,
   rgba(15,23,42,…). main.css en compte 76 règles dont 19 pour le
   sombre : toutes restaient bleues sur España et Menthe.

   UN DÉFAUT D'ACCESSIBILITÉ AU PASSAGE — les en-têtes de colonnes
   (.fc-day-header, .fc-axis), c'est-à-dire les noms de jours et
   l'échelle horaire, étaient illisibles dans les DEUX modes :
       clair   #94A3B8 sur rgba(241,245,249,.90) → 2.32:1
       sombre  #475569 sur fond composé          → 2.41:1
   Sur un calendrier c'est l'information de repérage principale. Ils
   passent sur --t3-text-2 (6 à 7:1) et non text-3 : ce sont des
   libellés qu'on lit, pas des mentions discrètes.
   ================================================================= */

/* Police : l'habillage imposait 'Inter' à tout le calendrier. */
body.t3 .fc {
    font-family: var(--t3-font);
}

/* ── Barre d'outils ── */
body.t3 .fc-toolbar {
    background: var(--t3-glass-hi);
    border-radius: var(--t3-radius);
    border: 1px solid var(--t3-border-sub);
}

body.t3 .fc-toolbar h2 {
    color: var(--t3-text);
    font-weight: var(--t3-weight-strong);
    letter-spacing: -0.02em;
}

/* ── Boutons de navigation (mois / semaine / jour, précédent…) ──
   FullCalendar v3 les nomme .fc-state-*, pas .btn. */
body.t3 .fc .fc-state-default {
    background-color: color-mix(in srgb, var(--t3-accent) 10%, transparent);
    background-image: none;
    border-color: color-mix(in srgb, var(--t3-accent) 22%, transparent);
    color: var(--t3-accent-lo);
    border-radius: var(--t3-radius-sm);
    text-shadow: none;
    box-shadow: none;
    transition: background-color .2s cubic-bezier(0.22, 1, 0.36, 1),
                color .2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .fc .fc-state-hover {
    background-color: color-mix(in srgb, var(--t3-accent) 18%, transparent);
    background-image: none;
    color: var(--t3-accent-lo);
}

/* Vue courante : aplat plein, c'est le seul état qui doit trancher. */
body.t3 .fc .fc-state-down,
body.t3 .fc .fc-state-active {
    /* accent-lo et non accent : en clair, du blanc sur l'accent de
       Menthe ne donnait que 3.77:1. Sur accent-lo on remonte a 5.48. */
    background-color: var(--t3-accent-lo);
    background-image: none;
    border-color: var(--t3-accent-lo);
    color: var(--t3-accent-on);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--t3-accent) 32%, transparent);
}

body.t3 .fc .fc-state-disabled {
    background-color: color-mix(in srgb, var(--t3-text) 6%, transparent);
    background-image: none;
    border-color: var(--t3-border-sub);
    color: var(--t3-text-3);
}

body.t3 .fc-toolbar button:focus,
body.t3 .fc button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-accent) 20%, transparent);
    outline: none;
}

/* ── En-têtes de colonnes et échelle horaire ──
   Le contraste est le sujet : voir l'en-tête de section. */
body.t3 .fc-day-header,
body.t3 .fc-axis {
    background: color-mix(in srgb, var(--t3-text) 4%, transparent);
    color: var(--t3-text-2);
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.t3 .fc-axis.fc-time span,
body.t3 .fc-time-grid .fc-slats td.fc-time span {
    color: var(--t3-text-2);
}

/* ── Aujourd'hui ── */
body.t3 .fc-today {
    background: color-mix(in srgb, var(--t3-accent) 7%, transparent) !important;
}

body.t3 .fc-day-header.fc-today {
    color: var(--t3-accent-lo);
    background: color-mix(in srgb, var(--t3-accent) 12%, transparent);
}

/* ── Lignes de grille ── */
body.t3 .fc td,
body.t3 .fc th {
    border-color: var(--t3-border-sub);
}

body.t3 .fc-unthemed .fc-divider,
body.t3 .fc-unthemed .fc-popover .fc-header {
    background: color-mix(in srgb, var(--t3-text) 5%, transparent);
}

/* ── Événements ──
   Leur couleur de fond vient du JS (eventColor / couleur par type) :
   on ne touche qu'à l'ombre et au rayon, jamais au fond. */
body.t3 .fc .fc-event,
body.t3 .fc .fc-event:hover {
    border-radius: var(--t3-radius-sm);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--t3-text) 14%, transparent);
}

body.t3 .fc-time-grid-event:hover {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--t3-text) 22%, transparent);
}

/* ── Vue liste ── */
body.t3 .fc-list-heading td {
    background: color-mix(in srgb, var(--t3-accent) 7%, transparent);
    border-color: var(--t3-border-sub);
    color: var(--t3-text);
    font-weight: 600;
}

body.t3 .fc-list-item:hover td {
    background: color-mix(in srgb, var(--t3-accent) 8%, transparent);
}

body.t3 .fc-list-item-title a {
    color: var(--t3-text);
}

body.t3 .fc-list-empty {
    background: transparent;
    color: var(--t3-text-3);
}

/* ── Barres de défilement internes ── */
body.t3 .fc-scroller::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--t3-accent) 32%, transparent);
    border-radius: 999px;
}

body.t3 .fc-scroller::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--t3-accent) 58%, transparent);
}

/* ── Bulle « + N autres » ── */
body.t3 .fc-unthemed .fc-popover {
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    background: var(--t3-solid);
    box-shadow: var(--t3-sh-3);
}

/* ── Sombre ──
   Les 19 règles v2-dark de main.css sont figées sur Azur ; body.t3
   passe devant par spécificité. */
body.t3.v2-dark .fc-toolbar {
    background: color-mix(in srgb, var(--t3-solid) 80%, transparent);
    border-color: var(--t3-border-sub);
}

body.t3.v2-dark .fc-toolbar h2,
body.t3.v2-dark .fc-list-item-title a,
body.t3.v2-dark .fc-list-heading td {
    color: var(--t3-text);
}

body.t3.v2-dark .fc .fc-state-default {
    background-color: color-mix(in srgb, var(--t3-accent) 14%, transparent);
    background-image: none;
    border-color: color-mix(in srgb, var(--t3-accent) 28%, transparent);
    color: var(--t3-accent-hi);
}

body.t3.v2-dark .fc .fc-state-hover {
    background-color: color-mix(in srgb, var(--t3-accent) 24%, transparent);
    color: var(--t3-accent-hi);
}

body.t3.v2-dark .fc .fc-state-down,
body.t3.v2-dark .fc .fc-state-active {
    /* En sombre l'accent est clair : l'aplat le garde, le texte fonce. */
    background-color: var(--t3-accent);
    border-color: var(--t3-accent);
    color: var(--t3-accent-on);
}

body.t3.v2-dark .fc .fc-state-disabled {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--t3-border-sub);
    color: var(--t3-text-3);
}

body.t3.v2-dark .fc td,
body.t3.v2-dark .fc th {
    border-color: var(--t3-border-sub);
}

/* C'est ici que le 2.41:1 est corrigé. */
body.t3.v2-dark .fc-day-header,
body.t3.v2-dark .fc-axis,
body.t3.v2-dark .fc-axis.fc-time span {
    color: var(--t3-text-2);
}

body.t3.v2-dark .fc-day-header,
body.t3.v2-dark .fc-axis {
    background: rgba(255, 255, 255, 0.04);
}

body.t3.v2-dark .fc-today {
    background: color-mix(in srgb, var(--t3-accent) 12%, transparent) !important;
}

body.t3.v2-dark .fc .fc-event {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.t3.v2-dark .fc-list-heading td {
    background: color-mix(in srgb, var(--t3-accent) 14%, transparent);
    border-color: var(--t3-border-sub);
}

body.t3.v2-dark .fc-list-item:hover td {
    background: color-mix(in srgb, var(--t3-accent) 14%, transparent);
}

body.t3.v2-dark .fc-unthemed .fc-popover {
    background: var(--t3-solid);
    border-color: var(--t3-border-sub);
}

/* =================================================================
   31. TABLEAU DE BORD — famille dash-glass-* (index.php)
   -----------------------------------------------------------------
   Les styles vivent dans un <style> de index.php, le sombre dans
   main.css. Deux palettes étrangères au thème s'y croisaient :

     flat UI     #2c3e50 (texte), #7f8c8d (secondaire),
                 rgba(44,62,80,.45) (aide), rgba(200,210,220,.5)
                 (bordures)
     périwinkle  #667eea / #5b72e8 pour les boutons primaires et le
                 focus des selects, plus l'orbe du haut
     emerald     rgba(16,185,129,.10) pour l'orbe du bas

   Le sombre de main.css existait et était complet, mais figé sur Azur
   (rgba(15,23,42,…), rgba(96,165,250,…), #e2e8f0).

   Les styles de index.php sont chargés après cette feuille : c'est le
   préfixe body.t3 qui fait gagner ces règles par spécificité.
   ================================================================= */

/* ── Panneau ──
   Il porte un fond opaque plus soutenu que celui de la page : c'est ce
   qui le détache en tant que panneau. On garde ce principe, en le
   dérivant des fonds du thème plutôt que d'un gris-bleu figé. */
body.t3 .dash-glass-wrap {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--t3-accent) 7%, var(--t3-bg-1)) 0%,
        color-mix(in srgb, var(--t3-tertiary) 9%, var(--t3-bg-2)) 50%,
        color-mix(in srgb, var(--t3-accent) 6%, var(--t3-bg-3)) 100%);
    border-radius: var(--t3-radius-lg);
    border: 1px solid var(--t3-border-sub);
}

/* Les deux halos reprennent la bichromie du thème, comme le filet de
   navbar et les états actifs. */
body.t3 .dash-glass-wrap::before {
    background: radial-gradient(circle,
        color-mix(in srgb, var(--t3-accent) 16%, transparent) 0%,
        transparent 70%);
}

body.t3 .dash-glass-wrap::after {
    background: radial-gradient(circle,
        color-mix(in srgb, var(--t3-accent-2) 13%, transparent) 0%,
        transparent 70%);
}

/* ── Cartes ── */
body.t3 .dash-glass-card {
    background: var(--t3-glass-hi);
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
    box-shadow: var(--t3-sh-2),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.t3 .dash-glass-card:hover {
    box-shadow: var(--t3-sh-3),
                inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* ── Barre d'outils ── */
body.t3 .dash-glass-toolbar {
    background: var(--t3-glass);
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
}

body.t3 .dash-glass-toolbar h2 {
    color: var(--t3-text);
    font-weight: var(--t3-weight-strong);
    letter-spacing: -0.02em;
}

/* ── Sélecteurs et boutons ──
   Alignés sur les champs de la section 14 : le focus part sur brand,
   l'accent restant réservé au chrome. */
body.t3 .dash-glass-select {
    background: var(--t3-glass-hi);
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius-sm);
    color: var(--t3-text);
}

body.t3 .dash-glass-select:focus {
    border-color: color-mix(in srgb, var(--t3-brand) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-brand) 15%, transparent);
    outline: none;
}

body.t3 .dash-glass-btn {
    background: var(--t3-glass-hi);
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius-sm);
    color: var(--t3-text-2);
}

body.t3 .dash-glass-btn:hover {
    background: color-mix(in srgb, var(--t3-accent) 9%, var(--t3-glass-hi));
    border-color: color-mix(in srgb, var(--t3-accent) 30%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 .dash-glass-btn-primary {
    background: color-mix(in srgb, var(--t3-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--t3-accent) 30%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 .dash-glass-btn-primary:hover {
    background: color-mix(in srgb, var(--t3-accent) 20%, transparent);
    border-color: var(--t3-accent);
    color: var(--t3-accent-lo);
}

/* ── Indicateurs ── */
body.t3 .dash-glass-kpi .dash-kpi-value {
    color: var(--t3-text);
    font-variant-numeric: tabular-nums;
}

body.t3 .dash-glass-kpi .dash-kpi-label {
    color: var(--t3-text-3);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* L'aide était à rgba(44,62,80,.45), soit environ 3:1 : un point
   d'interrogation qu'on ne voit pas ne sert à rien. */
body.t3 .dash-glass-kpi .dash-kpi-helper {
    color: var(--t3-text-3);
}

body.t3 .dash-glass-kpi .dash-kpi-helper:hover {
    color: var(--t3-accent);
}

body.t3 .dash-kpi-icon {
    color: var(--t3-accent);
}

/* ── Mini-cartes ──
   .mc-dot garde sa couleur : elle est posée par statut, c'est de
   l'information. On ne reprend que son ombre. */
body.t3 .dash-minicard {
    background: var(--t3-glass);
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius-sm);
    box-shadow: var(--t3-sh-1);
}

body.t3 .dash-minicard:hover {
    background: var(--t3-glass-hi);
    border-color: color-mix(in srgb, var(--t3-accent) 26%, transparent);
    box-shadow: var(--t3-sh-2);
}

body.t3 .dash-minicard .mc-name {
    color: var(--t3-text);
}

body.t3 .dash-minicard .mc-count {
    color: var(--t3-text);
    font-variant-numeric: tabular-nums;
}

body.t3 .dash-minicard .mc-details {
    color: var(--t3-text-3);
}

body.t3 .dash-minicard .mc-dot {
    box-shadow: 0 0 6px color-mix(in srgb, var(--t3-text) 22%, transparent);
}

/* ── Sombre ── */
body.t3.v2-dark .dash-glass-wrap {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--t3-accent) 10%, var(--t3-bg-1)) 0%,
        color-mix(in srgb, var(--t3-tertiary) 12%, var(--t3-bg-2)) 50%,
        color-mix(in srgb, var(--t3-accent) 8%, var(--t3-bg-3)) 100%);
    border-color: var(--t3-border-sub);
}

body.t3.v2-dark .dash-glass-wrap::before {
    background: radial-gradient(circle,
        color-mix(in srgb, var(--t3-accent) 20%, transparent) 0%,
        transparent 70%);
}

body.t3.v2-dark .dash-glass-wrap::after {
    background: radial-gradient(circle,
        color-mix(in srgb, var(--t3-accent-2) 15%, transparent) 0%,
        transparent 70%);
}

body.t3.v2-dark .dash-glass-card,
body.t3.v2-dark .dash-minicard {
    background: color-mix(in srgb, var(--t3-solid) 70%, transparent);
    border-color: var(--t3-border-sub);
    box-shadow: var(--t3-sh-2),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.t3.v2-dark .dash-glass-card:hover,
body.t3.v2-dark .dash-minicard:hover {
    box-shadow: var(--t3-sh-3),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.t3.v2-dark .dash-glass-toolbar {
    background: color-mix(in srgb, var(--t3-solid) 80%, transparent);
    border-color: var(--t3-border-sub);
}

body.t3.v2-dark .dash-glass-toolbar h2,
body.t3.v2-dark .dash-glass-kpi .dash-kpi-value,
body.t3.v2-dark .dash-minicard .mc-name,
body.t3.v2-dark .dash-minicard .mc-count {
    color: var(--t3-text);
}

body.t3.v2-dark .dash-glass-select,
body.t3.v2-dark .dash-glass-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--t3-border-sub);
    color: var(--t3-text-2);
}

body.t3.v2-dark .dash-glass-select {
    color: var(--t3-text);
}

body.t3.v2-dark .dash-glass-btn:hover {
    background: color-mix(in srgb, var(--t3-accent) 16%, transparent);
    color: var(--t3-accent-hi);
}

body.t3.v2-dark .dash-glass-btn-primary {
    background: color-mix(in srgb, var(--t3-accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--t3-accent) 38%, transparent);
    color: var(--t3-accent-hi);
}

body.t3.v2-dark .dash-glass-btn-primary:hover {
    background: color-mix(in srgb, var(--t3-accent) 30%, transparent);
    border-color: var(--t3-accent);
    color: var(--t3-accent-hi);
}

body.t3.v2-dark .dash-glass-kpi .dash-kpi-label,
body.t3.v2-dark .dash-glass-kpi .dash-kpi-helper,
body.t3.v2-dark .dash-minicard .mc-details {
    color: var(--t3-text-3);
}

body.t3.v2-dark .dash-minicard .mc-dot {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
/* =================================================================
   35. PASTILLES D'ÉTAPE, ENCART D'AIDE, COLONNE IA
   -----------------------------------------------------------------
   Trois reliquats bleus repérés à l'usage, dans deux composants.
   ================================================================= */

/* .upl-ai-badge garde ses couleurs : « en attente » et « validé »
   sont des états de vérification, pas de la décoration. */

/* =================================================================
   36. MENUS DÉROULANTS SOUS LES CARTES COLLANTES
   -----------------------------------------------------------------
   #cards-droite (.cd-slot) est `position: sticky` avec `z-index: 15`
   (main.css:13337), et .cl-collant fait de même.

   Un menu Bootstrap ouvert dans un .block ne peut pas passer au-dessus :
   le .block porte un backdrop-filter, ce qui crée un stacking context.
   Le menu y est enfermé, et c'est le z-index du .block — `auto`, donc 0
   — qui est comparé aux 15 de la carte collante. Le z-index 9999 du
   .dropdown-menu ne joue qu'à l'intérieur du bloc, il ne le fait pas
   sortir.

   Le cas concret : le menu « Imprimer » de l'onglet Documents
   (dossiers/_communs.php:616), un .btn-group dans un .block.

   On applique la solution déjà retenue dans le projet pour les listes
   Chosen (main.css:4607) : élever le bloc porteur pendant l'ouverture.
   Bootstrap 3 pose .open sur le .dropdown ou le .btn-group.

   L'exclusion :not(:has(.modal)) est reprise telle quelle, et pour la
   raison qui y est documentée : élever un bloc contenant une modale
   crée un contexte à 1050 qui piège la modale (10001) sous son propre
   voile (10000).
   ================================================================= */

body.t3 .block:not(:has(.modal)):has(> .block-title .dropdown.open),
body.t3 .block:not(:has(.modal)):has(> .block-title .btn-group.open),
body.t3 .block:not(:has(.modal)):has(.dropdown.open),
body.t3 .block:not(:has(.modal)):has(.btn-group.open),
body.t3 fieldset:not(:has(.modal)):has(.dropdown.open),
body.t3 fieldset:not(:has(.modal)):has(.btn-group.open) {
    position: relative;
    z-index: 1050;
}

/* Le débordement doit aussi être autorisé : un .block qui rogne son
   contenu couperait le menu au lieu de le laisser dépasser. */
body.t3 .block:has(.dropdown.open),
body.t3 .block:has(.btn-group.open),
body.t3 .block:has(.dropdown.open) .block-title,
body.t3 .block:has(.btn-group.open) .block-title,
body.t3 .block:has(.dropdown.open) .block-content,
body.t3 .block:has(.btn-group.open) .block-content {
    overflow: visible;
}

/* Pendant l'ouverture, le backdrop-filter du bloc est neutralisé : il
   est la cause du stacking context, et sa disparition d'une fraction de
   seconde ne se voit pas alors qu'un menu couvre la zone. */
body.t3 .block:not(:has(.modal)):has(.dropdown.open),
body.t3 .block:not(:has(.modal)):has(.btn-group.open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Menus de la barre de navigation ──
   main.css pose sur la navbar :

       .navbar-crm-header > * { position: relative; z-index: 2; }

   Chaque enfant direct devient donc un stacking context à z=2 — la
   règle sert à passer au-dessus du ::before flouté (z=0) et du filet
   ::after (z=3). Mais elle plafonne aussi tout ce qu'ils contiennent :
   le .dropdown-menu à z=2001 ne vaut 2001 qu'À L'INTÉRIEUR de son
   conteneur. Ce qui est comparé aux 15 de .cd-slot, c'est le 2 du
   conteneur — et la carte collante l'emporte.

   La navbar n'a pas de z-index propre : $template['header'] vaut ''
   dans inc/config.php, donc la classe navbar-fixed-top est absente et
   la règle qui lui donnerait z=1050 (main.css) ne s'applique jamais.

   On élève donc le conteneur pendant l'ouverture seulement, pour ne pas
   perturber l'empilement interne de la barre le reste du temps. */
body.t3 .navbar-crm-header > *:has(.open),
body.t3 .navbar-crm-header__right:has(.open),
body.t3 .navbar-crm-header__center:has(.open),
body.t3 .navbar-crm-header:has(.open) {
    z-index: 1060;
}

/* Même mécanique pour le panneau de recherche, qui n'est pas un
   .dropdown Bootstrap : il s'affiche sans classe .open. */
body.t3 .navbar-crm-header__center:has(#searchres:not(:empty)),
body.t3 .navbar-crm-header:has(#searchres:not(:empty)) {
    z-index: 1060;
}

/* =================================================================
   37. GROUPES DE BOUTONS ET VARIANTES « alt »
   -----------------------------------------------------------------
   Deux régressions de mes propres règles, corrigées ici.

   1. J'avais mis `border-radius: var(--t3-radius-sm)` sur
      `.btn-group > .btn` avec les badges et les addons. Or dans un
      groupe, seuls les DEUX BOUTS s'arrondissent : arrondir chaque
      bouton décolle visuellement les jonctions, alors que le groupe
      doit se lire comme une seule pièce segmentée. Bootstrap gère ce
      cas nativement — il a fallu le lui reprendre parce que ma règle
      passait devant.

   2. Les variantes `.btn-alt` de ProUI valent `background: #ffffff`
      avec la couleur sémantique en texte, et AUCUNE bordure. Sur le
      fond clair du thème, elles se lisaient comme du texte posé, pas
      comme des boutons — c'est le cas de .btaddsurface et .btaddmo
      (btn-warning btn-alt) dans prestation.php. On leur rend un
      contour, dans leur propre teinte.
   ================================================================= */

/* ── Géométrie du groupe ── */
body.t3 .btn-group > .btn,
body.t3 .btn-group > .btn-group > .btn {
    border-radius: 0;
}

body.t3 .btn-group > .btn:first-child,
body.t3 .btn-group > .btn-group:first-child > .btn:first-child {
    border-top-left-radius: var(--t3-radius-sm);
    border-bottom-left-radius: var(--t3-radius-sm);
}

body.t3 .btn-group > .btn:last-child,
body.t3 .btn-group > .btn.dropdown-toggle:last-child,
body.t3 .btn-group > .btn-group:last-child > .btn:last-child {
    border-top-right-radius: var(--t3-radius-sm);
    border-bottom-right-radius: var(--t3-radius-sm);
}

/* Un bouton seul dans un groupe reste arrondi des deux côtés. */
body.t3 .btn-group > .btn:only-child {
    border-radius: var(--t3-radius-sm);
}

/* Les bordures se chevauchent d'un pixel : sans ça, deux bordures
   voisines en font une de 2px à la jonction. */
body.t3 .btn-group > .btn + .btn,
body.t3 .btn-group > .btn + .btn-group,
body.t3 .btn-group > .btn-group + .btn {
    margin-left: -1px;
}

/* Le bouton survolé ou actif passe au-dessus, sinon sa bordure colorée
   est recouverte par celle du voisin. */
body.t3 .btn-group > .btn:hover,
body.t3 .btn-group > .btn:focus,
body.t3 .btn-group > .btn.active,
body.t3 .btn-group > .btn:active {
    position: relative;
    z-index: 2;
}

/* Groupes verticaux : même principe, sur l'autre axe. */
body.t3 .btn-group-vertical > .btn {
    border-radius: 0;
}
body.t3 .btn-group-vertical > .btn:first-child {
    border-top-left-radius: var(--t3-radius-sm);
    border-top-right-radius: var(--t3-radius-sm);
}
body.t3 .btn-group-vertical > .btn:last-child {
    border-bottom-left-radius: var(--t3-radius-sm);
    border-bottom-right-radius: var(--t3-radius-sm);
}
body.t3 .btn-group-vertical > .btn + .btn {
    margin-left: 0;
    margin-top: -1px;
}

/* ── Variantes « alt » : fond clair, couleur sémantique en texte ──
   On garde le principe et la teinte — c'est un bouton secondaire — mais
   on lui donne le contour qui lui manquait. */
body.t3 .btn-warning.btn-alt {
    background-color: color-mix(in srgb, var(--ln-warning) 16%, var(--t3-solid));
    border: 1px solid color-mix(in srgb, #8f5c06 72%, transparent);
    /* Pas --ln-warning-dark : ce token vise du texte sur blanc pur et
       ne donne que 2.95:1 sur ce fond teinté. Même teinte, assombrie. */
    color: #8f5c06;
    box-shadow: var(--t3-sh-1);
}
body.t3 .btn-warning.btn-alt:hover,
body.t3 .btn-warning.btn-alt:focus {
    background-color: color-mix(in srgb, var(--ln-warning) 26%, var(--t3-solid));
    border-color: var(--ln-warning);
    color: #8f5c06;
}

body.t3 .btn-success.btn-alt {
    background-color: color-mix(in srgb, var(--ln-success) 16%, var(--t3-solid));
    border: 1px solid color-mix(in srgb, #147538 70%, transparent);
    color: #147538;
    box-shadow: var(--t3-sh-1);
}
body.t3 .btn-success.btn-alt:hover,
body.t3 .btn-success.btn-alt:focus {
    background-color: color-mix(in srgb, var(--ln-success) 26%, var(--t3-solid));
    border-color: var(--ln-success);
    color: #147538;
}

body.t3 .btn-danger.btn-alt {
    background-color: color-mix(in srgb, var(--ln-danger) 16%, var(--t3-solid));
    border: 1px solid color-mix(in srgb, #c21111 60%, transparent);
    color: #c21111;
    box-shadow: var(--t3-sh-1);
}
body.t3 .btn-danger.btn-alt:hover,
body.t3 .btn-danger.btn-alt:focus {
    background-color: color-mix(in srgb, var(--ln-danger) 22%, var(--t3-solid));
    border-color: var(--ln-danger);
    color: #c21111;
}

body.t3 .btn-info.btn-alt {
    background-color: color-mix(in srgb, var(--t3-accent) 16%, var(--t3-solid));
    border: 1px solid color-mix(in srgb, var(--t3-accent) 38%, transparent);
    color: var(--t3-accent-lo);
    box-shadow: var(--t3-sh-1);
}
body.t3 .btn-info.btn-alt:hover,
body.t3 .btn-info.btn-alt:focus {
    background-color: color-mix(in srgb, var(--t3-accent) 20%, var(--t3-solid));
    border-color: var(--t3-accent);
    color: var(--t3-accent-lo);
}

body.t3 .btn-default.btn-alt {
    background-color: color-mix(in srgb, var(--t3-solid) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--t3-text) 16%, transparent);
    color: var(--t3-text-2);
}

/* En sombre, ces variantes gardent leur teinte mais sur fond sombre. */
body.t3.v2-dark .btn-warning.btn-alt {
    background-color: color-mix(in srgb, var(--ln-warning) 16%, transparent);
    border-color: color-mix(in srgb, var(--ln-warning) 38%, transparent);
    color: var(--ln-warning);
}
body.t3.v2-dark .btn-success.btn-alt {
    background-color: color-mix(in srgb, var(--ln-success) 16%, transparent);
    border-color: color-mix(in srgb, var(--ln-success) 38%, transparent);
    color: var(--ln-success);
}
body.t3.v2-dark .btn-danger.btn-alt {
    background-color: color-mix(in srgb, var(--ln-danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--ln-danger) 38%, transparent);
    color: var(--ln-danger);
}
body.t3.v2-dark .btn-info.btn-alt {
    background-color: color-mix(in srgb, var(--t3-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--t3-accent) 40%, transparent);
    color: var(--t3-accent-hi);
}
body.t3.v2-dark .btn-default.btn-alt {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--t3-text-2);
}

/* =================================================================
   38. ACCESSIBILITÉ
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    body.t3 * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =================================================================
   COMMANDES DE REPLI DE LA FICHE — degrade anime
   -----------------------------------------------------------------
   #cc-expand (pied de la carte contact) et #cl-replier (barre
   d'actions du formulaire) commandent la meme chose : ouvrir ou
   replier la fiche beneficiaire. Neutres, ils se confondaient avec
   leur fond.

   Ces regles sont ICI et non dans main.css : cette feuille est
   chargee apres, et « body.t3 .cc-expand » y pose deja un raccourci
   « background » qui remet background-image a none. Une regle
   equivalente dans main.css ne s'appliquait donc jamais.

   MECANIQUE DU DEFILEMENT
   La bande fait deux fois la largeur de l'element et se repete. En
   pourcentage, background-position se calcule sur (conteneur - image),
   donc 200 % deplace exactement d'une largeur de motif : la boucle est
   sans raccord. Ne PAS ajouter background-repeat: no-repeat — le motif
   sortirait du cadre et l'element resterait vide la majeure partie du
   cycle.

   La teinte vient de --t3-accent : azur, espana et menthe repeignent
   les deux boutons, mode sombre compris, sans qu'une valeur soit
   ecrite ici.
   ================================================================= */

/* PERFORMANCE (2026-10-21) : l'animation déplaçait background-position,
   ce qui repeint le bouton et recalcule son style à chaque image, tant
   que la fiche est ouverte. La bande est maintenant un pseudo-élément qui
   glisse en transform, composé sans repeindre.
   Géométrie identique à l'ancienne : le motif fait deux largeurs de
   bouton (100 % / 3 d'une bande de 600 %) et glisse d'un motif sur la
   durée du cycle (33,333 % de la bande). La bande démarre deux largeurs à
   gauche pour couvrir le bouton pendant tout le trajet. */
@keyframes t3-degrade-file {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333333%); }
}

body.t3 .cc-expand,
body.t3 #cl-replier {
    --t3-degrade-cmd: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--t3-accent) 16%, transparent) 25%,
        color-mix(in srgb, var(--t3-accent) 30%, transparent) 50%,
        color-mix(in srgb, var(--t3-accent) 16%, transparent) 75%,
        transparent 100%
    );

    /* isolation : la bande (z-index -1) reste au-dessus du fond du
       bouton et sous son texte. overflow: clip la rogne au bouton sans en
       faire un conteneur de défilement ; la marge border-box la laisse
       passer sous le liseré, comme l'ancien fond. Même teinte d'accent des
       deux côtés : l'ordre de superposition ne change pas la couleur. */
    background-image: none;
    position: relative;
    isolation: isolate;
    overflow: clip;
    overflow-clip-margin: border-box;
}

/* .cc-expand : en clair, ui-fiche.css (chargée après) repose un fond uni
   par-dessus le dégradé, qui ne s'est donc jamais vu ; seule la règle
   sombre ci-dessous le faisait apparaître. La bande suit ce rendu : elle
   n'existe qu'en sombre pour .cc-expand, partout pour #cl-replier. */
body.t3.v2-dark .cc-expand::before,
body.t3 #cl-replier::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -200%;
    width: 600%;
    z-index: -1;
    pointer-events: none;
    background-image: var(--t3-degrade-cmd);
    background-size: calc(100% / 3) 100%;
    animation: t3-degrade-file 4s linear infinite;
}

/* Le survol change la teinte de fond, pas le mouvement : l'animation
   tourne en permanence, elle n'est pas un retour au survol. Il faut en
   revanche REDECLARER le degrade — les regles de survol d'origine
   utilisent le raccourci background, qui l'effacerait. */
body.t3 .cc-expand:hover,
body.t3 .cc-expand:focus-visible {
    background-image: none;
    background-color: color-mix(in srgb, var(--t3-accent) 18%, transparent);
    color: var(--t3-accent-lo);
}

body.t3.v2-dark .cc-expand,
body.t3.v2-dark .cc-expand:hover,
body.t3.v2-dark .cc-expand:focus-visible {
    background-image: none;
}

/* #cl-replier porte « btn-default fresh », et main.css pose dessus
   « background: #dee2e6 !important » — un RACCOURCI, donc
   background-image: none !important par la meme occasion. Aucune
   specificite ne passe devant un !important sans en etre un : le degrade
   ne s'affichait pas, alors qu'il s'affichait sur .cc-expand.

   D'ou les !important ci-dessous. Ils sont limites a ce bouton : l'ID
   suffit a les borner, aucun autre .btn-default.fresh n'est touche. */
body.t3 #cl-replier {
    background-image: none !important;
    background-color: color-mix(in srgb, var(--t3-accent) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--t3-accent) 30%, transparent) !important;
    color: var(--t3-accent) !important;
}

body.t3 #cl-replier:hover,
body.t3 #cl-replier:focus,
body.t3 #cl-replier:focus-visible {
    background-image: none !important;
    background-color: color-mix(in srgb, var(--t3-accent) 14%, transparent) !important;
    border-color: var(--t3-accent) !important;
    color: var(--t3-accent-lo) !important;
}
/* =================================================================
   39. RAPPELS CLIENTS — pile de notifications .rcl-*
   -----------------------------------------------------------------
   Le rappel passait par une modale plein écran (voile compris) que
   js/app-in.js ouvrait sur #modal-display-recall. Deux défauts :

   1. Ce balisage a disparu de inc/page_footer.php, qui est tronqué.
      L'appel AJAX répondait bien, mais .modal() s'appliquait à une
      sélection vide — rien ne s'affichait, sans la moindre erreur.
   2. Même en état de marche, il coupait le travail en cours par un
      voile modal pour deux lignes d'information.

   Le composant devient une pile de cartes en haut à droite, calée
   sur la géométrie de $.bootstrapGrowl (20px des deux bords) déjà
   employée ailleurs dans le CRM. Le balisage est monté en JS : plus
   aucune dépendance à un include.

   Ces règles ne sont PAS préfixées par `body.t3`, contrairement au
   reste de la feuille. Le composant est neuf, il n'a aucun style
   hérité de main.css à écraser, et il ne doit pas se retrouver sans
   mise en page si la couche t3 est retirée. Les couleurs passent
   donc par var(--t3-*, repli) — les trois ambiances (Azur, España,
   Menthe) et le mode sombre suivent d'eux-mêmes, le repli étant la
   palette Azur claire.
   ================================================================= */

.rcl-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 348px;
    max-width: calc(100vw - 40px);
    /* Au-dessus des modales (10001) et des sélecteurs de date
       (10050, section 28), sous le preloader (99999) : un rappel doit
       rester lisible par-dessus une fiche ouverte, c'est justement ce
       qui permet de ne plus bloquer l'écran. */
    z-index: 10060;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* La pile couvre une bande verticale entière : sans ça elle
       intercepterait les clics de la page sous les cartes. */
    pointer-events: none;
}

.rcl-toast {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    padding: 13px 15px 14px 18px;
    border-radius: var(--t3-radius-lg, 14px);
    background: var(--t3-solid, #ffffff);
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.07));
    box-shadow: var(--t3-sh-3, 0 16px 44px rgba(19, 26, 46, 0.16), 0 4px 12px rgba(19, 26, 46, 0.08));
    color: var(--t3-text, #131a2e);
    font-family: var(--t3-font, inherit);
    font-size: 13px;
    line-height: 1.45;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.rcl-toast.rcl-in  { opacity: 1; transform: none; }
.rcl-toast.rcl-out { opacity: 0; transform: translateX(18px); }

/* Pendant l'aller-retour serveur : on neutralise les commandes sans
   poser de voile HoldOn, qui reprendrait tout l'écran. */
.rcl-toast.rcl-busy .rcl-actions,
.rcl-toast.rcl-busy .rcl-delays {
    opacity: 0.45;
    pointer-events: none;
}

/* Filet d'accent collé au bord gauche — c'est lui qui donne la
   couleur du thème à la carte, le fond restant neutre. */
.rcl-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
                var(--t3-accent, #2563eb),
                var(--t3-accent-2, #ec4899));
}

.rcl-close {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--t3-text-3, #5f6883);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rcl-close:hover,
.rcl-close:focus-visible {
    background: color-mix(in srgb, var(--t3-text, #131a2e) 8%, transparent);
    color: var(--t3-text, #131a2e);
}

/* ── En-tête : pastille + nature du message + heure ── */

.rcl-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 24px;   /* place pour la croix */
}

.rcl-ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 13%, transparent);
    color: var(--t3-accent, #2563eb);
    font-size: 16px;
}

.rcl-head-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rcl-kind {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--t3-accent, #2563eb);
}

.rcl-when {
    font-size: 11.5px;
    color: var(--t3-text-3, #5f6883);
}

/* Le retard est la seule information réellement urgente : il garde
   la teinte d'accent alors que le reste de la ligne est en gris. */
.rcl-late { color: var(--t3-accent, #2563eb); font-weight: 600; }

/* ── Identité du client ── */

.rcl-name {
    display: block;
    margin-top: 9px;
    font-size: 15px;
    font-weight: var(--t3-weight-strong, 700);
    line-height: 1.25;
    color: var(--t3-text, #131a2e);
    text-decoration: none;
}

.rcl-name:hover,
.rcl-name:focus {
    color: var(--t3-accent, #2563eb);
    text-decoration: none;
}

.rcl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.rcl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t3-text, #131a2e) 5%, transparent);
    color: var(--t3-text-2, #4c5670);
    font-size: 11.5px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.rcl-chip:hover,
a.rcl-chip:focus {
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 12%, transparent);
    color: var(--t3-accent, #2563eb);
    text-decoration: none;
}

/* Le commentaire vient de la base et peut être long : deux lignes au
   plus, la fiche a le texte complet. */
.rcl-note {
    margin: 8px 0 0;
    color: var(--t3-text-2, #4c5670);
    font-size: 12.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Commandes ── */

.rcl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
    transition: opacity 0.15s ease;
}

.rcl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.07));
    border-radius: var(--t3-radius-sm, 7px);
    background: color-mix(in srgb, var(--t3-text, #131a2e) 4%, transparent);
    color: var(--t3-text, #131a2e);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.1s ease;
}

.rcl-btn:hover,
.rcl-btn:focus-visible {
    background: color-mix(in srgb, var(--t3-text, #131a2e) 9%, transparent);
}

.rcl-btn:active { transform: translateY(1px); }

.rcl-btn-main {
    background: var(--t3-accent, #2563eb);
    border-color: var(--t3-accent, #2563eb);
    color: var(--t3-accent-on, #ffffff);
}

.rcl-btn-main:hover,
.rcl-btn-main:focus-visible {
    background: var(--t3-accent-lo, #1d4ed8);
    border-color: var(--t3-accent-lo, #1d4ed8);
    color: var(--t3-accent-on, #ffffff);
}

.rcl-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--t3-text-3, #5f6883);
    font-weight: 500;
}

/* Reports alternatifs : lisibles, mais nettement en retrait des
   trois commandes principales. */
.rcl-delays {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.07));
    font-size: 11.5px;
    color: var(--t3-text-3, #5f6883);
    transition: opacity 0.15s ease;
}

.rcl-delay {
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t3-text, #131a2e) 5%, transparent);
    color: var(--t3-text-2, #4c5670);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rcl-delay:hover,
.rcl-delay:focus-visible {
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 14%, transparent);
    color: var(--t3-accent, #2563eb);
}

/* Erreur serveur affichée dans la carte plutôt qu'en alert() : la
   notification n'a plus de raison d'ouvrir une boîte système. */
.rcl-err {
    margin-top: 8px;
    padding: 5px 9px;
    border-radius: var(--t3-radius-sm, 7px);
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    font-size: 11.5px;
}

/* ── Sombre ──
   Les tokens suivent seuls ; restent les deux valeurs en dur : le
   bloc d'erreur, et la surface pleine qui doit se détacher du fond
   sombre par un liseré clair plutôt que par une ombre invisible. */
body.v2-dark .rcl-toast {
    border-color: rgba(255, 255, 255, 0.12);
}

body.v2-dark .rcl-err {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
}

/* ── Écrans étroits ──
   La carte prend la largeur utile : à 348px fixes elle débordait sur
   un téléphone en portrait. */
@media (max-width: 480px) {
    .rcl-stack {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
}

/* =================================================================
   40. COMMENTAIRES — onglet Commentaires d'un dossier
   -----------------------------------------------------------------
   L'onglet dessine ses commentaires en styles INLINE, et en trois
   endroits qui doivent rester d'accord : dossiers/_communs.php (la
   fiche), crmajax.php > display-comments (la modale) et contact.php
   (la ligne inseree sans rechargement).

   Un style inline gagne sur toute feuille : impossible de corriger le
   mode sombre depuis ici sans !important partout. Les valeurs en dur
   ont donc ete remplacees, sur place, par des var() — ce qui rend le
   balisage theme-aware sans rien changer au rendu en mode clair, la
   valeur de repli etant l'ancienne couleur.

   Deux teintes ne pouvaient pas se contenter d'un token existant :
   le violet du controle IA et l'orange du rappel client. A 5% sur un
   fond sombre, elles repassaient sous le seuil de lisibilite. Elles
   sont donc declarees ici, avec leur variante nuit.
   ================================================================= */

body.t3 {
    --cmt-ia: #8b5cf6;              /* commentaire systeme (controle IA) */
    --cmt-ia-bg: rgba(139, 92, 246, 0.05);
    --cmt-ia-avatar: rgba(139, 92, 246, 0.12);

    --cmt-recall: #fb8500;          /* rappel client */
    --cmt-recall-bg: rgba(255, 243, 205, 0.5);
    --cmt-recall-avatar: rgba(251, 133, 0, 0.1);

    --cmt-user: #428bca;            /* commentaire ordinaire */
    --cmt-user-avatar: rgba(66, 139, 202, 0.1);
    --cmt-bg: rgba(0, 0, 0, 0.02);
}

body.t3.v2-dark {
    /* Teintes eclaircies : #8b5cf6 sur --t3-solid (#0f1729) tombe a
       4.0:1, sous le seuil AA du petit texte. */
    --cmt-ia: #a78bfa;
    --cmt-ia-bg: rgba(139, 92, 246, 0.14);
    --cmt-ia-avatar: rgba(139, 92, 246, 0.22);

    --cmt-recall: #fbbf24;
    --cmt-recall-bg: rgba(251, 191, 36, 0.10);
    --cmt-recall-avatar: rgba(251, 191, 36, 0.18);

    --cmt-user: #7ea8e0;
    --cmt-user-avatar: rgba(126, 168, 224, 0.16);
    --cmt-bg: rgba(255, 255, 255, 0.04);
}
/* =================================================================
   41. SÉLECTEURS D'INDICATIF TÉLÉPHONIQUE
   -----------------------------------------------------------------
   Le CRM en a DEUX implémentations, de structure différente :

   Référence — .tel1-prefix-select / .tel2-prefix-select
     Un <select class="form-control"> dans un .input-group-btn.
     Présent dans mandator.php, installator.php et les dix vues
     nuevo_archivo_*. Style dans main.css:12181, entièrement en
     !important et figé sur du bleu : dégradé #dfe7fd → #b8d4f1,
     texte et bordure #003566. Son pendant sombre existe mais est
     lui aussi calé sur Azur (#93c5fd, rgba(96,165,250,…)).

   Variante — .nc-prefix-addon / .nc-prefix-select
     Un <select> nu dans un .input-group-addon, utilisé par
     inc/form_new_case.php, donc par prestations.php et new_case.php.
     Style main.css:12836 : addon gris #f8f9fa, select sans bordure
     ni fond. Résultat, le même champ ne se ressemble pas d'un écran
     à l'autre.

   On tokenise la référence, puis on aligne la variante dessus. Comme
   sa structure diffère, c'est l'ADDON qui porte le décor (fond,
   bordure, rayon) et le select redevient transparent à l'intérieur —
   sinon le fond serait peint deux fois, avec un liseré au milieu.

   La largeur n'est pas alignée : la référence impose min-width 145px
   parce que ses options sont longues (« 🇪🇸 Espagne (+34) ») alors que
   la variante n'affiche que « +34 ». Lui imposer 145px laisserait un
   grand vide à droite du texte.
   ================================================================= */

/* Le champ qui suit : main.css lui pose un border-radius inline
   « 0 4px 4px 0 » dans les vues. On l'accorde au rayon du thème. */
body.t3 .input-group:has(.tel1-prefix-select) > .form-control,
body.t3 .input-group:has(.tel2-prefix-select) > .form-control {
    border-radius: 0 var(--t3-radius-sm) var(--t3-radius-sm) 0 !important;
}

/* Le champ voisin reprend le rayon du thème de l'autre côté. */
body.t3 .input-group:has(.nc-prefix-addon) > .form-control {
    border-radius: 0 var(--t3-radius-sm) var(--t3-radius-sm) 0;
}

/* =================================================================
   42. FORMULAIRES DE RÉGLAGES — #tabs-company et ses voisins
   -----------------------------------------------------------------
   Les onglets de settings.php posent un `.form-bordered` dans un
   `.settings-card`. Trois choses s'y contredisent :

   1. .form-bordered .form-group porte
        border-bottom: 1px dashed #eaedf1
      un gris figé : correct sur blanc, invisible en mode sombre.

   2. .form-bordered .form-group.form-actions porte
        background-color: #f9fafc
      même problème, et la barre de boutons ressort en blanc cassé
      sur une carte teintée.

   3. Surtout : .form-bordered s'étire par des marges négatives
      (-15px puis -20px selon les règles) pour que ses séparateurs
      touchent les bords du bloc qui l'accueille. Mais .settings-card
      a un padding de 24px. Les traits s'arrêtent donc à 4px des
      bords, ni collés ni alignés sur le texte — c'est ce décalage
      qui fait « bancal ».

   On accorde les marges au padding réel de la carte, et on tokenise
   le reste. Les règles visent .page-settings pour ne pas toucher aux
   .form-bordered du reste du CRM, calés sur d'autres conteneurs.
   ================================================================= */

body.t3 .page-settings .settings-card .form-bordered {
    /* Exactement le padding de .settings-card : les séparateurs vont
       d'un bord à l'autre au lieu de s'arrêter à 4px. */
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
}

body.t3 .page-settings .settings-card .form-bordered .form-group {
    padding-left: 24px;
    padding-right: 24px;
    border-bottom: 1px solid var(--t3-border-sub);
}

body.t3 .page-settings .settings-card .form-bordered .form-group:last-child {
    border-bottom: none;
}

body.t3 .page-settings .settings-card legend {
    padding-left: 0;
    padding-right: 0;
    color: var(--t3-accent-lo);
    border-bottom: 2px solid color-mix(in srgb, var(--t3-accent) 22%, transparent);
    font-family: var(--t3-font);
}

/* Barre d'actions : teintée d'accent plutôt que grise, et arrondie en
   bas pour épouser le coin de la carte — elle en est le dernier
   élément, marges négatives comprises. */
body.t3 .page-settings .settings-card .form-bordered .form-group.form-actions {
    background-color: color-mix(in srgb, var(--t3-accent) 6%, transparent);
    border-top: 1px solid var(--t3-border-sub);
    border-bottom: none;
    border-radius: 0 0 var(--t3-radius) var(--t3-radius);
    padding-top: 16px;
    padding-bottom: 16px;
}

body.t3.v2-dark .page-settings .settings-card .form-bordered .form-group.form-actions {
    background-color: color-mix(in srgb, var(--t3-accent) 12%, transparent);
}

/* Le libellé d'un champ, aligné sur la ligne de base de sa saisie :
   avec des champs devenus des boîtes de 38px, un label sans padding
   flottait un peu haut. */
body.t3 .page-settings .control-label {
    color: var(--t3-text-2);
    font-family: var(--t3-font);
    padding-top: 9px;
}

body.t3 .page-settings .settings-card .text-muted {
    color: var(--t3-text-3);
}

/* Les <option> sont dessinees par le systeme : sans couleurs explicites
   elles restent blanches sur blanc en mode sombre sur plusieurs
   navigateurs. */
body.t3.v2-dark select.form-control option {
    background-color: #1b2233;
    color: #e3e9f5;
}

/* ── Cadres des formulaires de réglages ──
   settings.php reprend le motif .cadre / .cadre-legend de contact.php
   pour découper ses formulaires. Deux ajustements propres à ce
   contexte :

   - dans une .settings-card, .form-bordered s'étire par marges
     négatives jusqu'aux bords ; un cadre doit au contraire respirer,
     donc on lui redonne une marge intérieure ;
   - le repli au clic n'existe pas ici : son JS vit dans contact.php
     (ligne 1435) et n'est pas chargé sur cette page. Les cadres y sont
     donc purement visuels — pas de chevron, pas de curseur main, rien
     qui laisse croire qu'ils s'ouvrent. */
body.t3 .page-settings .settings-card .cadre {
    margin: 0 0 18px;
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    background: color-mix(in srgb, var(--t3-text) 2%, transparent);
    overflow: hidden;
}

body.t3 .page-settings .settings-card .cadre:last-of-type {
    margin-bottom: 0;
}

body.t3 .page-settings .settings-card .cadre-legend {
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--t3-border-sub) !important;
    box-shadow: none !important;
    cursor: default;
    padding: 10px 16px;
}

body.t3 .page-settings .settings-card .cadre-legend:hover {
    /* Pas de réaction au survol : rien n'est cliquable ici. */
    background-color: color-mix(in srgb, var(--t3-accent) 5%, var(--t3-glass-hi)) !important;
    box-shadow: none !important;
}

body.t3.v2-dark .page-settings .settings-card .cadre {
    background: rgba(255, 255, 255, 0.03);
}

body.t3.v2-dark .page-settings .settings-card .cadre-legend:hover {
    background-color: color-mix(in srgb, var(--t3-accent) 12%, var(--t3-solid)) !important;
}

/* Les lignes du formulaire retrouvent leur marge à l'intérieur d'un
   cadre : les marges négatives de .form-bordered les collaient au bord. */
body.t3 .page-settings .settings-card .cadre .form-group {
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid var(--t3-border-sub);
}

body.t3 .page-settings .settings-card .cadre .form-group:last-child {
    border-bottom: none;
}

/* La barre d'actions est hors des cadres : elle vaut pour tout le
   formulaire. Elle reprend donc la pleine largeur de la carte. */
body.t3 .page-settings .settings-card .form-bordered > .form-group.form-actions {
    margin-top: 18px;
}

/* =================================================================
   43. TABLEAUX DE SAISIE — surfaces, matériels, luminaires
   -----------------------------------------------------------------
   #table_surface (.tblsurface), #table_ope_multi (.tbmomat) et
   #table_light (.tbllights) partagent la même structure : un tableau
   dont chaque cellule contient un champ, alimenté ligne par ligne
   depuis le JS des vues nuevo_archivo_*.

   Aucun n'a de style propre — ils héritent des seules classes
   Bootstrap. D'où deux problèmes une fois le thème posé :

   1. Les champs font 38px de haut avec 8px/12px de marge intérieure
      (section 14). C'est la bonne taille pour un formulaire, pas pour
      un tableau « condensed » où chaque ligne en compte six ou huit :
      les lignes devenaient hautes et le tableau illisible.
   2. table-striped et table-hover se superposent au fond des cellules
      de saisie, ce qui fait clignoter les champs au survol.

   On compacte les champs À L'INTÉRIEUR de ces trois tableaux
   seulement, sans toucher aux formulaires. Le reste — en-têtes,
   filets, pastilles de totaux — est déjà traité en sections 11 et 23.
   ================================================================= */

body.t3 .tbmomat {
    border-color: var(--t3-border-sub);
}

/* ── Champs compactés ── */
body.t3 .tbmomat tbody .form-control {
    min-height: 30px;
    height: 30px;
    padding: 4px 8px;
    font-size: 12.5px;
    border-radius: var(--t3-radius-sm);
}

body.t3 .tbmomat tbody select.form-control {
    padding-right: 24px;
    background-position: right 8px center;
    background-size: 10px 7px;
}

/* Les valeurs saisies sont des nombres : chiffres à largeur fixe pour
   qu'une colonne reste alignée d'une ligne à l'autre. */
body.t3 .tbmomat tbody input[type="text"].form-control,
body.t3 .tbmomat tbody input[type="number"].form-control {
    font-variant-numeric: tabular-nums;
}

/* Champs calculés par le JS : ils ne se saisissent pas, ils se lisent. */
body.t3 .tbmomat tbody .form-control[readonly] {
    background-color: color-mix(in srgb, var(--t3-text) 5%, transparent);
    border-color: transparent;
    font-weight: 600;
    color: var(--t3-text);
}

/* ── Cellules resserrées ── */
body.t3 .tbmomat tbody > tr > td {
    padding: 5px 6px;
    vertical-align: middle;
    border-color: var(--t3-border-sub);
}

/* Le zébrage et le survol restent sur la LIGNE, pas sous les champs :
   sinon le fond de la cellule transparaît à travers eux et les fait
   clignoter au passage de la souris. */
body.t3 .tbmomat.table-hover > tbody > tr:hover > td {
    background-color: color-mix(in srgb, var(--t3-accent) 6%, transparent);
}

body.t3 .tbmomat.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: color-mix(in srgb, var(--t3-text) 3%, transparent);
}

/* ── Numéro de ligne ── */
body.t3 .tbmomat tbody > tr > td:first-child {
    color: var(--t3-text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ── Ligne « aucune donnée » ── */
body.t3 .tbmomat tbody > tr[id$="-no-line"] td {
    color: var(--t3-text-3);
    font-style: italic;
    text-align: center;
    padding: 18px 6px;
    background: transparent;
}

/* ── En-tête et pied ── */
/* En-tete neutre plutot que teinte d'accent : ces tableaux comptent
   jusqu'a neuf colonnes, un bandeau colore sur toute la largeur pesait
   plus que les donnees qu'il annonce. Le gris laisse l'accent aux
   elements qui portent vraiment une action. */
body.t3 .tbmomat thead th,
body.t3 .tbmomat thead td {
    background: color-mix(in srgb, var(--t3-text) 4%, transparent);
    color: var(--t3-text-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    vertical-align: middle;
    padding: 9px 7px;
    border-bottom: 2px solid var(--t3-border-sub);
}

body.t3 .tbmomat tfoot > tr > td {
    border-top: 2px solid color-mix(in srgb, var(--t3-accent) 20%, transparent);
    font-weight: 600;
    color: var(--t3-text);
}

/* ── Sombre ── */
body.t3.v2-dark .tbmomat tbody .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.07);
}

body.t3.v2-dark .tbmomat.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255, 255, 255, 0.035);
}

body.t3.v2-dark .tbmomat thead th,
body.t3.v2-dark .tbmomat thead td {
    background: rgba(255, 255, 255, 0.05);
}
/* =================================================================
   44. BOUTON « RÉPARTIR LE RESTE À CHARGE » — #btn_repartir_rac
   -----------------------------------------------------------------
   Un .btn.btn-info.fresh, donc figé sur #dfe7fd / #003566 par
   main.css:9036. Seul son pendant sombre avait été transposé
   (section 21) ; en clair il restait bleu quel que soit le thème.

   C'est une action de calcul, pas une action destructive ni la
   soumission du formulaire : il suit l'accent, en version teintée
   plutôt qu'en aplat, pour ne pas rivaliser avec le bouton
   d'enregistrement.
   ================================================================= */

/* ── Grille allégée sur les tableaux de saisie ──
   .table-bordered dessine un filet autour de CHAQUE cellule. Comme
   chaque cellule contient déjà un champ encadré, on lisait deux
   grilles superposées, décalées de quelques pixels.

   Les filets verticaux disparaissent : les champs délimitent les
   colonnes tout seuls. Restent les filets horizontaux, qui séparent
   les lignes — c'est ce qu'on suit du regard en saisissant. */
body.t3 .tbmomat.table-bordered > tbody > tr > td {
    border-left: 0;
    border-right: 0;
}

body.t3 .tbmomat.table-bordered > thead > tr > th,
body.t3 .tbmomat.table-bordered > thead > tr > td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

body.t3 .tbmomat.table-bordered > tfoot > tr > td {
    border-left: 0;
    border-right: 0;
}

body.t3 .tbmomat.table-bordered {
    border: 1px solid var(--t3-border-sub);
    border-radius: var(--t3-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* Les champs portent une bordure plus discrète dans ce contexte : la
   ligne du tableau structure déjà, le champ n'a qu'à se signaler. */
body.t3 .tbmomat tbody .form-control {
    border-color: color-mix(in srgb, var(--t3-text) 11%, transparent);
}

body.t3 .tbmomat tbody .form-control:hover:not(:focus):not([readonly]) {
    border-color: color-mix(in srgb, var(--t3-text) 22%, transparent);
}

/* =================================================================
   45. CORRECTIFS SI BUREAUTIQUE
   -----------------------------------------------------------------
   Écarts propres à cette installation, écrits en fin de fichier :
   à spécificité égale, la dernière règle gagne. Tout ce qui est ici
   corrige une différence entre le CRM d'origine et le nôtre, pas un
   défaut du thème.
   ================================================================= */

/* ── .cadre-legend : le repli est arrivé le 26/08 ──
   J'avais d'abord neutralisé la réaction au survol de la section 21 :
   à l'époque rien ne se repliait dans ce CRM (ni .chevron-toggle, ni
   .cadre-content-wrapper, ni le JS), et un en-tête qui a l'air cliquable
   sans l'être est pire que pas de repli du tout.

   Ce n'est plus vrai : js/ui-fiche.js pose le chevron, enveloppe le
   contenu dans .cadre-content-wrapper et mémorise l'état dans
   localStorage (clé « crm.fiche.cadres »). Les cadres de contact.php se
   replient réellement. La neutralisation a donc été retirée — le survol
   de la section 21 redevient juste.

   css/ui-fiche.css est chargé APRÈS cette feuille (template_start.php) et
   pose sa propre géométrie : position, cursor:pointer, chevron en absolu.
   On ne la contredit pas : elle structure, la section 21 colore. */

/* ── fieldset.rd-section : ce n'est PAS une carte ici ──
   La section 22 traite .rd-section comme une carte autonome :

       body.t3 .rd-section { border: 1px solid …;
                             border-radius: …;
                             background: var(--t3-solid); }

   C'est juste sur le CRM d'origine, où .rd-section est un <div>
   conteneur. Chez nous, l'autre chantier a posé cette classe sur les
   huit <fieldset> existants de project.php, pour leur donner le repli
   (js/ui-fiche.js §3, l'en-tête est la <legend>). Et chaque fieldset est
   déjà DANS un .block :

       <div class="block">                    ← carte de verre du thème
           <fieldset class="rd-section">      ← recevait la carte n°2
               <legend style="box-shadow: 3px 3px 6px rgb(239,195,230)">

   Résultat : un aplat OPAQUE peint par-dessus le verre du bloc — le
   glassmorphism disparaissait sur tout l'onglet Contrat — et un second
   cadre en retrait du premier.

   Ici .rd-section est un regroupement sémantique à l'intérieur d'une
   carte, pas une carte. C'est la <legend> qui porte le poids visuel,
   avec son ombre colorée propre à chaque section (rose pour Contrat,
   mauve pour Intervenants…). Ces teintes viennent du contenu : on n'y
   touche pas, exactement comme la section 22 le dit déjà de
   .rd-section-pastille.

   Ciblé sur `fieldset.rd-section` et non `.rd-section` : si un jour un
   <div class="rd-section"> arrive, il retrouvera le traitement carte. */
body.t3 fieldset.rd-section {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ── Sélecteur d'entités de la navbar ──
   Le balisage (inc/page_head.php) est un <label class="btn btn-primary">
   posé dans un <a class="dropdown-toggle">, avec un style en attribut :

       <label class="btn btn-primary" style="background-color:<?= $curcol ?>">

   Deux pannes selon l'état de l'utilisateur, et $curcol ne vaut jamais
   qu'une des deux (la ligne qui lisait la couleur de l'entité est
   commentée dans page_head.php) :

   - $curcol = 'transparent'  (une entité est sélectionnée)
     Le fond est tué par l'attribut, mais .btn-primary garde son
     color:#ffffff et son border-color:#1bbae1 → nom d'entité BLANC sur
     le verre clair de la navbar : 1.02 à 1.07:1 sur les trois thèmes
     clairs. Invisible.

   - $curcol = ''             (aucune entité courante)
     L'attribut est invalide donc ignoré, .btn-primary reprend la main →
     une pastille pleine de couleur au milieu d'une barre qui n'a que
     des liens-icônes transparents. C'est le « ça ne ressemble pas au
     reste » : un bouton là où tout le reste est un lien.

   Correctif : on retire la boîte de bouton et on aligne l'élément sur
   ses voisins de la barre (recherche, carillon, avatar) — contenu nu,
   chevron pour dire que ça ouvre quelque chose, teinte d'accent au
   survol. Même dosage que la section 7 : accent à 10 %, seul palier qui
   tienne les 4.5:1 sur Menthe (4.69:1, le thème limitant).

   Le fond doit passer en !important : rien d'autre ne passe devant un
   attribut style. */
body.t3 .navbar-crm-header__right > li:has(> #btn-change-entity) > .dropdown-toggle {
    background-color: transparent !important;
    padding: 5px 6px;
}

body.t3 .navbar-crm-header__right > li:has(> #btn-change-entity) > .dropdown-toggle > label.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* La plus longue entité fait 29 caractères (« S.I. BUREAUTIQUE
       RHÔNE-ALPES. ») : à 12.5px/600 elle tient dans cette largeur.
       overflow:hidden n'est qu'un garde-fou — une vraie coupure avec
       points de suspension demanderait un <span> autour du nom dans
       page_head.php, et le chevron y passerait à la trappe. */
    max-width: 260px;
    margin: 0;
    padding: 5px 9px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--t3-radius-sm);
    color: var(--t3-text) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Survol et menu ouvert : même traitement que les autres éléments de la
   barre. Le <li> porte .open quand le menu est déployé (Bootstrap). */
body.t3 .navbar-crm-header__right > li:has(> #btn-change-entity) > .dropdown-toggle:hover > label.btn,
body.t3 .navbar-crm-header__right > li.open:has(> #btn-change-entity) > .dropdown-toggle > label.btn {
    background: color-mix(in srgb, var(--t3-accent) 10%, transparent) !important;
    color: var(--t3-accent-lo) !important;
}

/* Le chevron dit « ça ouvre » : discret au repos, il s'allume au survol
   comme celui du menu utilisateur juste à côté. */
body.t3 .navbar-crm-header__right > li:has(> #btn-change-entity) > .dropdown-toggle > label.btn > i {
    font-size: 13px;
    color: var(--t3-text-3);
    transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.t3 .navbar-crm-header__right > li:has(> #btn-change-entity) > .dropdown-toggle:hover > label.btn > i {
    color: var(--t3-accent);
}

body.t3 .navbar-crm-header__right > li.open:has(> #btn-change-entity) > .dropdown-toggle > label.btn > i {
    color: var(--t3-accent);
    transform: rotate(180deg);
}

/* Le logo d'entité est posé en attribut style (20px, rond). On lui
   ajoute seulement un liseré, pour qu'il ne flotte pas sur le verre. */
body.t3 .navbar-crm-header__right > li:has(> #btn-change-entity) > .dropdown-toggle > label.btn img {
    flex-shrink: 0;
    margin-right: 0 !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--t3-text) 12%, transparent);
}

/* Le menu porte border-radius:15px en attribut style : à reprendre en
   !important pour qu'il suive le rayon du thème comme ses voisins. */
body.t3 #btn-change-entity {
    border-radius: var(--t3-radius) !important;
}

body.t3 #btn-change-entity > li > a img {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--t3-text) 12%, transparent);
}

/* =================================================================
   PERFORMANCE SOUS EDGE / CHROME (lot du 2026-10-21)
   -----------------------------------------------------------------
   Repris des retours de portage du thème sur un autre CRM
   (~/sauvegardes_sib/theme_docs/retours_theme_v3/RETOURS_DE_PORTAGE.md, §1). Aucun de ces
   blocs ne change le rendu : chacun a été vérifié par comparaison de
   captures avant / après au pixel près.
   Ce qui est réglé ailleurs : le fond (section 5, calque body::before)
   et le dégradé des commandes de repli (pseudo-élément en transform).
   ================================================================= */

/* ── Flou d'arrière-plan des conteneurs du flux ──
   main.css pose backdrop-filter sur .block, .block .block, .widget,
   .panel et .alert. Derrière eux il n'y a que le fond de page : le flou
   ne se voit pas, mais Chrome le recalcule sur chaque bloc à chaque image
   du défilement. Il reste là où du contenu défile DESSOUS : barre du
   haut, en-têtes collants, menus, listes Chosen, fenêtres.

   Le flou avait un autre rôle : un élément flouté est le cadre de
   référence de ses descendants en position absolute / fixed et forme un
   contexte d'empilement. Sans relais, menus et bulles positionnés dans un
   bloc se décaleraient. Relais du 21/10 : « will-change: backdrop-filter »
   (mais il créait un calque composé par bloc : voir « Relais v2 » plus bas).
   Relais v2 du 11/11/2026 : position: relative + isolation: isolate. */
body.t3 .block,
body.t3 .widget,
body.t3 .panel,
body.t3 .cc-block,
body.t3 #page-content .alert {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Relais v2 (11/11/2026) : « will-change: backdrop-filter » faisait de chaque
       bloc un calque composé envoyé à la carte graphique (23 calques sur le
       tableau de bord, des textures de plusieurs écrans sur une fiche) : écrans
       noirs et saccades sur Chrome/Edge. position + isolation donnent le même
       cadre de référence et le même contexte d'empilement, sans calque.
       Vérifié au pixel (fiche, factures, commandes : 0 px ; index : données). */
    position: relative;
    isolation: isolate;
}

/* Les blocs où le flou était DÉJÀ retiré, pour libérer leurs fenêtres
   et leurs menus, ne reçoivent pas le relais : on reprend leurs
   sélecteurs (main.css « JDGrid host blocks », ui-fiche.css sections du
   contrat, section « menus dans un .block » plus haut). */
body.t3 .block:has([id^="grid_"]):not(.block-fullscreen),
body.t3 .project-cadre .block:has(> fieldset.rd-section),
body.t3 .block:not(:has(.modal)):has(.dropdown.open),
body.t3 .block:not(:has(.modal)):has(.btn-group.open) {
    isolation: auto;
}

/* Cellules figées des grilles : leur fond est opaque (--t3-solid), le
   flou de 2 px de JDGrid.css est invisible. Elles sont déjà collantes,
   donc positionnées et empilées : rien à relayer. */
body.t3 .jdgridfreez {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Flous restés actifs malgré la règle ci-dessus (mesure Chrome du 09/11/2026) ──
   - Blocs imbriqués : « .block .block.full » de main.css (3 classes) l'emporte
     sur « body.t3 .block » (2 classes + body). Sur la fiche contrat, toute la
     colonne (924 × 4 751 px) restait floutée : 83 → 33 ms par image au
     défilement. Le relais will-change de la règle ci-dessus s'applique déjà.
   - Pied de page : statique, derrière lui il n'y a que le fond de page.
   - Tableau de bord (styles en ligne d'index.php) et barre du calendrier :
     posés dans le flux, sur le fond de page. Temps de composition ÷ 2,3. Même
     relais que les blocs (cadre de référence, empilement : relais v2).
     Les deux petits boutons de la barre (.dash-glass-btn) gardent leur
     flou : sans lui leur teinte bougeait de 15/255, et ils ne coûtent rien.
   Les flous où du contenu passe dessous (barre du haut, barre latérale,
   menus, listes Chosen ouvertes, fenêtres, voile de chargement) restent. */
body.t3 .block .block,
body.t3 .block .block.full {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.t3 #page-content + footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.t3 .dash-glass-card,
body.t3 .dash-glass-toolbar,
body.t3 .dash-minicard,
body.t3 .fc .fc-toolbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    isolation: isolate;
}

/* ── Listes Chosen fermées ──
   Chosen garde un <li> par option pour CHAQUE liste, fermée comprise,
   rejetée hors écran : des centaines d'éléments restylés à chaque
   recalcul. Fermée, la liste n'est plus rendue. Chosen pose
   .chosen-with-drop AVANT de remplir, surligner ou mesurer. */
body.t3 .chosen-container:not(.chosen-with-drop) .chosen-results {
    display: none;
}

/* ── Chosen multiple : bornage du champ de recherche ──
   js/perf-ui.js calcule sa largeur sans mesurer le conteneur (mesure qui
   forçait un recalcul complet). Le « min(conteneur - 10 px) » d'origine
   passe ici. */
body.t3 .chosen-container-multi .chosen-choices li.search-field {
    max-width: calc(100% - 10px);
}
body.t3 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    max-width: 100%;
}

/* ── Ouverture des fenêtres ──
   main.css anime l'ouverture avec « transition: all ». Seuls transform
   et opacity changent à l'ouverture : on s'y limite, ce qui évite
   d'animer (et de recalculer à chaque image) tout autre changement de la
   boîte pendant qu'elle est ouverte. Durée et courbe inchangées. */
body.t3 .modal.fade .modal-dialog {
    transition-property: transform, opacity;
}

/* ── Mouvements réduits ──
   La règle de la section 38 vise « body.t3 * », qui n'atteint pas les
   pseudo-éléments : la bande animée des commandes de repli la reprend. */
@media (prefers-reduced-motion: reduce) {
    body.t3.v2-dark .cc-expand::before,
    body.t3 #cl-replier::before {
        animation-duration: 0.01ms !important;
    }
}