/* TITAN UI - STANTECH 2026 - GPL v3
 * Toutes les règles dépendent de html.titan-ui : sans le menu « Titan », rien ne change.
 */

html.titan-ui {
	--tt-side-w: 268px;
	--tt-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	--tt-ink: #0F172A;
	--tt-ink-2: #5B6577;
	--tt-brand: #1D3FCB;
	--tt-brand-400: #4A66D5;
	--tt-brand-600: #1A38B2;
	--tt-brand-700: #172F96;
	--tt-brand-dark: #1A38B2;
	--tt-brand-soft: rgba(29, 63, 203, 0.14);
	--tt-brand-tint: rgba(29, 63, 203, 0.07);
	--tt-brand-tint-2: rgba(29, 63, 203, 0.11);
	--tt-on-brand: #FFFFFF;

	/* API de thème pour les modules TITAN : une seule source de couleur */
	--tt-module-primary: var(--tt-brand);
	--tt-module-primary-2: var(--tt-brand-400);
	--tt-module-primary-dark: var(--tt-brand-700);
	--tt-module-soft: var(--tt-brand-tint);
	--tt-module-border: rgba(29, 63, 203, 0.18);
	--tt-module-shadow: rgba(29, 63, 203, 0.18);
	--tt-module-gradient: linear-gradient(135deg, var(--tt-brand-700) 0%, var(--tt-brand) 58%, var(--tt-brand-400) 100%);

	/* Alias volontairement génériques pour les modules STANTECH existants/nouveaux */
	--titan-primary: var(--tt-module-primary);
	--titan-primary-dark: var(--tt-module-primary-dark);
	--titan-primary-soft: var(--tt-module-soft);
	--titan-primary-border: var(--tt-module-border);
	--titan-on-primary: var(--tt-on-brand);
	--titan-module-bg: var(--tt-module-gradient);
	--titan-module-surface: #FFFFFF;
	--primary-color: var(--tt-module-primary);
	--primary-dark: var(--tt-module-primary-dark);
	--primary-soft: var(--tt-module-soft);
	--brand-primary: var(--tt-module-primary);

	/* Compatibilité universelle pour les modules STANTECH / Bootstrap / thèmes maison.
	   Ces alias ne coûtent rien en exécution : ils pointent tous vers la même palette TITAN. */
	--module-primary: var(--tt-module-primary);
	--module-primary-2: var(--tt-module-primary-2);
	--module-primary-dark: var(--tt-module-primary-dark);
	--module-primary-soft: var(--tt-module-soft);
	--module-primary-border: var(--tt-module-border);
	--module-primary-shadow: var(--tt-module-shadow);
	--module-gradient: var(--tt-module-gradient);
	--theme-primary: var(--tt-module-primary);
	--theme-primary-dark: var(--tt-module-primary-dark);
	--theme-primary-soft: var(--tt-module-soft);
	--accent-primary: var(--tt-module-primary);
	--accent-soft: var(--tt-module-soft);
	--bs-primary: var(--tt-module-primary);
	--bs-primary-rgb: 29, 63, 203; /* valeur de secours, la couleur visuelle reste pilotée par les variables TITAN */
	--tt-menu: rgba(12, 18, 34, 0.8);
	--tt-blur: blur(28px) saturate(170%);
	--tt-text: #F1F4FA;
	--tt-muted: rgba(241, 244, 250, 0.66);
	--tt-line: rgba(241, 244, 250, 0.16);
	--tt-soft: rgba(241, 244, 250, 0.07);
	--tt-accent: #8FB0FF;
	--tt-logo: #3B6CF6;
	--tt-border: rgba(255, 255, 255, 0.12);
	--tt-highlight: rgba(255, 255, 255, 0.16);
	--tt-active-bg: rgba(255, 255, 255, 0.13);
	--tt-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	--tt-bg: #EDF1F8;
	--tt-g1: rgba(59, 108, 246, 0.38);
	--tt-g2: rgba(167, 139, 250, 0.30);
	--tt-g3: rgba(45, 212, 191, 0.22);
	--tt-top-bg: rgba(255, 255, 255, 0.62);
	--tt-top-border: rgba(255, 255, 255, 0.9);
	--tt-top-text: #0F172A;
	--tt-top-muted: #5B6577;
	--tt-top-hover: rgba(15, 23, 42, 0.06);
}
@media (min-width: 901px) {
	html.titan-ui.tt-collapsed { --tt-side-w: 80px; }
}
html.titan-ui.tt-bg-dark {
	--tt-top-bg: rgba(18, 24, 42, 0.55);
	--tt-top-border: rgba(255, 255, 255, 0.1);
	--tt-top-text: #E6EBF5;
	--tt-top-muted: #C9D2E3;
	--tt-top-hover: rgba(255, 255, 255, 0.08);
}

/* ---------- Fond de l'application ---------- */
html.titan-ui body {
	background: var(--tt-bg) !important;
}
html.titan-ui body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(820px circle at 0% 0%, var(--tt-g1), transparent 62%),
		radial-gradient(900px circle at 100% 100%, var(--tt-g2), transparent 62%),
		radial-gradient(600px circle at 72% 0%, var(--tt-g3), transparent 62%);
}

/* ---------- Mise en page : on masque l'ancien menu de gauche ---------- */
html.titan-ui body {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
html.titan-ui .side-nav-vert {
	height: auto !important;
	min-height: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
html.titan-ui .side-nav,
html.titan-ui #id-left {
	display: none !important;
}
html.titan-ui #id-container {
	display: block !important;
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0 !important;
	padding: 84px 12px 12px calc(var(--tt-side-w) + 24px) !important;
	transition: padding-left 0.2s ease;
}
html.titan-ui #id-right {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
html.titan-ui #id-right > .fiche {
	box-sizing: border-box;
	min-height: calc(100vh - 108px);
	margin: 0 !important;
	padding: 20px 22px !important;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(15, 23, 42, 0.06);
}

/* ---------- Barre du haut (effet verre) ---------- */
html.titan-ui #id-top {
	position: fixed !important;
	z-index: 904 !important;
	top: 12px !important;
	left: calc(var(--tt-side-w) + 24px) !important;
	right: 12px !important;
	width: auto !important;
	height: 60px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 10px 0 18px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	box-sizing: border-box;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: var(--tt-font);
	color: var(--tt-top-text);
	transition: left 0.2s ease;
}
html.titan-ui #id-top::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 20px;
	background: var(--tt-top-bg);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	backdrop-filter: blur(24px) saturate(170%);
	border: 1px solid var(--tt-top-border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(15, 23, 42, 0.06);
}
/* Le contenu du menu TITAN se place directement dans la barre du haut */
html.titan-ui #id-top #tmenu_tooltip,
html.titan-ui #id-top #tmenu_tooltipinvert {
	display: contents !important;
}
html.titan-ui #id-top .login_block {
	position: static !important;
	float: none !important;
	flex: none;
	display: flex !important;
	align-items: center !important;
	gap: 2px;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--tt-top-text) !important;
}
html.titan-ui #id-top .login_block_user {
	display: none !important; /* remplacé par le profil de la barre latérale */
}
html.titan-ui #id-top .login_block a,
html.titan-ui #id-top .login_block .fa,
html.titan-ui #id-top .login_block .fas,
html.titan-ui #id-top .login_block .far {
	color: var(--tt-top-muted) !important;
}
html.titan-ui #id-top .login_block_elem,
html.titan-ui #id-top .login_block_other > * {
	border-radius: 10px;
}

.tt-top { display: contents; }
.tt-burger { order: 0; }
.tt-crumbs { order: 1; }
.tt-top-actions { order: 2; }
html.titan-ui #id-top .login_block { order: 3; }
.tt-top-profile { order: 4; }
/* Numéro de version masqué (remplacé par le profil) */
html.titan-ui #id-top .aversion,
html.titan-ui #id-top .tt-hidden-version { display: none !important; }
.tt-top-profile {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	height: 46px;
	margin-left: 4px;
	padding: 4px 10px 4px 5px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--tt-top-text);
	font-family: var(--tt-font);
	text-align: left;
	cursor: pointer;
}
.tt-top-profile:hover, .tt-top-profile[aria-expanded="true"] { background: var(--tt-top-hover); border-color: var(--tt-top-border); }
.tt-top-profile .tt-avatar { box-shadow: 0 0 0 2px #FFFFFF, 0 2px 6px rgba(15, 23, 42, 0.18); }
.tt-top-profile .tt-online { width: 10px; height: 10px; }
.tt-top-profile-text { display: flex; flex-direction: column; min-width: 0; max-width: 160px; }
.tt-top-profile-text strong { font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--tt-top-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-top-profile-text small { font-size: 11.5px; line-height: 1.2; color: var(--tt-top-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-top-profile-chev { display: flex; opacity: 0.55; }
.tt-burger {
	display: none;
	width: 44px;
	height: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--tt-top-text);
	cursor: pointer;
}
.tt-crumbs {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	white-space: nowrap;
	font: 500 13.5px/1.2 var(--tt-font);
	color: var(--tt-top-muted);
}
.tt-crumb { overflow: hidden; text-overflow: ellipsis; }
.tt-crumb.is-current { color: var(--tt-top-text); font-weight: 700; }
.tt-crumb-sep { display: flex; flex: none; opacity: 0.5; }
.tt-top-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.tt-secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	margin-right: 4px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.12);
	color: #15803D;
	font: 700 12px/1 var(--tt-font);
	white-space: nowrap;
}
.tt-secure.is-warn { background: rgba(245, 158, 11, 0.16); color: #92400E; }
html.tt-bg-dark .tt-secure { background: rgba(34, 197, 94, 0.16); color: #86EFAC; }
html.tt-bg-dark .tt-secure.is-warn { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }
.tt-top-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--tt-top-muted);
	cursor: pointer;
}
.tt-top-btn:hover, .tt-burger:hover { background: var(--tt-top-hover); color: var(--tt-top-text); }

/* ---------- Barre latérale (effet verre) ---------- */
.tt-sidebar, .tt-sidebar * , #tt-overlays, #tt-overlays * { box-sizing: border-box; }
.tt-sidebar {
	position: fixed;
	z-index: 905;
	top: 12px;
	left: 12px;
	bottom: 12px;
	width: var(--tt-side-w);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 26px;
	background: var(--tt-menu);
	-webkit-backdrop-filter: var(--tt-blur);
	backdrop-filter: var(--tt-blur);
	border: 1px solid var(--tt-border);
	box-shadow: inset 0 1px 0 var(--tt-highlight), 0 24px 60px rgba(15, 23, 42, 0.18);
	color: var(--tt-text);
	font: 500 13.5px/1.3 var(--tt-font);
	text-align: left;
	transition: width 0.2s ease, transform 0.25s ease;
}
.tt-sidebar a, .tt-sidebar a:hover, .tt-sidebar a:visited { color: inherit; text-decoration: none !important; }
.tt-sidebar button { font-family: inherit; }
.tt-ico { display: block; flex: none; }

.tt-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px 14px;
	min-height: 72px;
}
.tt-logo {
	width: 38px;
	height: 38px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
	background: var(--tt-logo);
	color: #FFFFFF;
	font: 800 18px/1 var(--tt-font);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px rgba(15, 23, 42, 0.25);
}
.tt-logo.has-img { background: #FFFFFF; padding: 4px; }
.tt-logo img { width: 100%; height: 100%; object-fit: contain; }
.tt-brand-text { display: flex; flex-direction: column; min-width: 0; }
.tt-brand-name { font: 800 15px/1.2 var(--tt-font); letter-spacing: 0.03em; color: var(--tt-text) !important; white-space: nowrap; }
.tt-brand-sub { font-size: 12px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tt-search-wrap { padding: 0 14px 12px; }
.tt-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--tt-line);
	border-radius: 12px;
	background: var(--tt-soft);
	color: var(--tt-muted);
	font-size: 13.5px;
	cursor: pointer;
}
.tt-search:hover { color: var(--tt-text); }
.tt-search-text { flex: 1; text-align: left; }
.tt-search kbd, .tt-palette kbd {
	padding: 3px 7px;
	border: 0;
	border-radius: 6px;
	background: var(--tt-soft);
	color: var(--tt-muted);
	font: 600 11px/1.2 var(--tt-font);
	box-shadow: none;
}

.tt-nav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 14px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--tt-line) transparent;
}
.tt-sec + .tt-sec { margin-top: 16px; }
.tt-sec-label {
	padding: 4px 11px 7px;
	font: 700 11px/1.2 var(--tt-font);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tt-muted);
}
.tt-sec-rule { display: none; height: 1px; margin: 0 14px 10px; background: var(--tt-line); }

.tt-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 38px;
	margin: 0 0 3px;
	padding: 0 11px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--tt-muted) !important;
	font: 500 13.5px/1 var(--tt-font);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}
.tt-item:hover { background: var(--tt-soft); color: var(--tt-text) !important; }
.tt-item .tt-ico { color: var(--tt-muted); }
.tt-item.is-active {
	background: var(--tt-active-bg);
	box-shadow: var(--tt-active-shadow);
	color: var(--tt-text) !important;
	font-weight: 700;
}
.tt-item.is-parent { color: var(--tt-text) !important; font-weight: 700; }
.tt-item.is-active .tt-ico, .tt-item.is-parent .tt-ico { color: var(--tt-accent); }
.tt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Icônes en couleur (pastilles) */
.tt-ico-tile {
	--c1: #94A3B8;
	--c2: #64748B;
	width: 28px;
	height: 28px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: linear-gradient(145deg, var(--c1), var(--c2));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px -2px var(--c2);
	color: #FFFFFF;
}
.tt-item .tt-ico-tile .tt-ico, .tt-item.is-active .tt-ico-tile .tt-ico, .tt-item.is-parent .tt-ico-tile .tt-ico { color: #FFFFFF; stroke-width: 2; }
.tt-item:has(.tt-ico-tile) { padding-left: 6px; }
.tt-row > .tt-item:has(.tt-ico-tile) { padding-left: 6px; }
.tt-c-home { --c1: #60A5FA; --c2: #2563EB; }
.tt-c-chart { --c1: #A78BFA; --c2: #7C3AED; }
.tt-c-report { --c1: #C084FC; --c2: #9333EA; }
.tt-c-shield { --c1: #2DD4BF; --c2: #0D9488; }
.tt-c-bed { --c1: #FB923C; --c2: #EA580C; }
.tt-c-utensils { --c1: #F87171; --c2: #DC2626; }
.tt-c-calendar { --c1: #F472B6; --c2: #DB2777; }
.tt-c-users { --c1: #38BDF8; --c2: #0284C7; }
.tt-c-box { --c1: #FBBF24; --c2: #D97706; }
.tt-c-file { --c1: #818CF8; --c2: #4F46E5; }
.tt-c-receipt { --c1: #4ADE80; --c2: #16A34A; }
.tt-c-bank { --c1: #34D399; --c2: #059669; }
.tt-c-list { --c1: #22D3EE; --c2: #0891B2; }
.tt-c-calc { --c1: #E879F9; --c2: #C026D3; }
.tt-c-briefcase { --c1: #FB7185; --c2: #E11D48; }
.tt-c-sliders { --c1: #94A3B8; --c2: #475569; }
.tt-c-folder { --c1: #FACC15; --c2: #CA8A04; }
.tt-c-tool { --c1: #A8A29E; --c2: #57534E; }
.tt-c-ticket { --c1: #F9A8D4; --c2: #EC4899; }
.tt-c-factory { --c1: #D6A35C; --c2: #A16207; }
/* Icônes monochromes (au choix dans Personnaliser) */
html.tt-icons-mono .tt-ico-tile { width: auto; height: auto; background: none; box-shadow: none; color: var(--tt-muted); }
html.tt-icons-mono .tt-item .tt-ico-tile .tt-ico { color: var(--tt-muted); stroke-width: 1.8; }
html.tt-icons-mono .tt-item.is-active .tt-ico-tile .tt-ico, html.tt-icons-mono .tt-item.is-parent .tt-ico-tile .tt-ico { color: var(--tt-accent); }
html.tt-icons-mono .tt-item:has(.tt-ico-tile) { padding-left: 11px; }
html.tt-icons-mono .tt-ico-tile .tt-ico { width: 18px; height: 18px; }
.tt-item:focus-visible, .tt-child:focus-visible, .tt-toggle:focus-visible, .tt-search:focus-visible, .tt-profile:focus-visible, .tt-collapse:focus-visible {
	outline: 2px solid var(--tt-accent);
	outline-offset: 1px;
}

.tt-row { position: relative; }
.tt-row > .tt-item { padding-right: 38px; }
.tt-toggle {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--tt-muted);
	cursor: pointer;
}
.tt-toggle:hover { background: var(--tt-soft); color: var(--tt-text); }
.tt-toggle .tt-ico, .tt-chev .tt-ico { transition: transform 0.15s ease; }
.tt-group.is-open > .tt-row .tt-toggle .tt-ico,
.tt-group.is-open > .tt-row .tt-chev .tt-ico { transform: rotate(90deg); }
.tt-chev { display: flex; opacity: 0.7; }
.tt-children { display: none; flex-direction: column; gap: 2px; padding: 0 0 6px; }
.tt-group.is-open > .tt-children { display: flex; }

.tt-child {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 32px;
	padding: 6px 11px 6px 27px;
	border-radius: 10px;
	color: var(--tt-muted) !important;
	font: 500 13px/1.3 var(--tt-font);
}
.tt-child::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	border-radius: 50%;
	background: var(--tt-line);
}
.tt-child.lvl-0 { color: var(--tt-text) !important; font-weight: 600; }
.tt-child.lvl-1 { padding-left: 40px; }
.tt-child.lvl-2 { padding-left: 52px; font-size: 12.5px; }
.tt-child.is-header { padding-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-muted) !important; }
.tt-child.is-header::before { display: none; }
a.tt-child:hover { background: var(--tt-soft); color: var(--tt-text) !important; }
.tt-child.is-active {
	background: var(--tt-active-bg);
	box-shadow: var(--tt-active-shadow);
	color: var(--tt-text) !important;
	font-weight: 700;
}
.tt-child.is-active::before { background: var(--tt-accent); }

.tt-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--tt-line);
}
.tt-profile {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 10px 8px 8px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--tt-text);
	text-align: left;
	cursor: pointer;
}
.tt-profile:hover, .tt-profile[aria-expanded="true"] { background: var(--tt-soft); }
.tt-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-profile-name { font: 700 13.5px/1.25 var(--tt-font); color: var(--tt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-profile-sub { font-size: 12px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-profile-chev { display: flex; opacity: 0.7; }
.tt-collapse {
	width: 36px;
	height: 36px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--tt-soft);
	color: var(--tt-muted);
	cursor: pointer;
}
.tt-collapse:hover { color: var(--tt-text); }

/* Avatars */
.tt-avatar-wrap { position: relative; display: inline-flex; flex: none; }
.tt-avatar {
	width: var(--s, 40px);
	height: var(--s, 40px);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: #2B3A5C;
	color: #FFFFFF;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.tt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-initials { font: 700 calc(var(--s, 40px) * 0.34)/1 var(--tt-font); letter-spacing: 0.02em; }
.tt-avatar-ring { box-shadow: 0 0 0 4px #FFFFFF, 0 8px 20px rgba(15, 23, 42, 0.2); }
.tt-online {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22C55E;
	border: 2px solid #FFFFFF;
}

/* ---------- Menu replié (ordinateur) ---------- */
@media (min-width: 901px) {
	html.tt-collapsed .tt-brand { justify-content: center; padding: 18px 0 14px; }
	html.tt-collapsed .tt-brand-text,
	html.tt-collapsed .tt-search-text,
	html.tt-collapsed .tt-search kbd,
	html.tt-collapsed .tt-sec-label,
	html.tt-collapsed .tt-label,
	html.tt-collapsed .tt-chev,
	html.tt-collapsed .tt-toggle,
	html.tt-collapsed .tt-children,
	html.tt-collapsed .tt-profile-text,
	html.tt-collapsed .tt-profile-chev { display: none !important; }
	html.tt-collapsed .tt-search-wrap { padding: 0 0 12px; display: flex; justify-content: center; }
	html.tt-collapsed .tt-search { width: 46px; justify-content: center; padding: 0; }
	html.tt-collapsed .tt-nav { padding: 0 12px 12px; }
	html.tt-collapsed .tt-sec-rule { display: block; }
	html.tt-collapsed .tt-sec:first-child .tt-sec-rule { display: none; }
	html.tt-collapsed .tt-sec + .tt-sec { margin-top: 10px; }
	html.tt-collapsed .tt-item, html.tt-collapsed .tt-row > .tt-item, html.tt-collapsed .tt-item:has(.tt-ico-tile) { justify-content: center; padding: 0; }
	html.tt-collapsed .tt-ico-tile { width: 32px; height: 32px; border-radius: 10px; }
	html.tt-collapsed .tt-item.is-parent { background: var(--tt-active-bg); box-shadow: var(--tt-active-shadow); }
	html.tt-collapsed .tt-foot { flex-direction: column; padding: 12px 0 14px; }
	html.tt-collapsed .tt-profile { flex: none; padding: 4px; }
	html.tt-collapsed .tt-collapse .tt-ico { transform: scaleX(-1); }
}

/* ---------- Panneaux ---------- */
#tt-overlays { font: 500 14px/1.45 var(--tt-font); color: var(--tt-ink); }
#tt-overlays [hidden] { display: none !important; }
.tt-backdrop { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.tt-backdrop.is-dim { background: rgba(8, 12, 24, 0.32); }
.tt-glass-light {
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(30px) saturate(180%);
	backdrop-filter: blur(30px) saturate(180%);
}
.tt-pop, .tt-sheet, .tt-palette-box {
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(30px) saturate(180%);
	backdrop-filter: blur(30px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 30px 80px rgba(8, 12, 24, 0.28);
	color: var(--tt-ink);
}
.tt-pop a, .tt-sheet a { text-decoration: none !important; }

/* Menu du compte */
.tt-pop {
	position: fixed;
	z-index: 2030;
	left: 24px;
	bottom: 92px;
	width: 320px;
	max-width: calc(100vw - 32px);
	overflow: hidden;
	border-radius: 22px;
}
@media (min-width: 901px) {
	html.tt-collapsed .tt-pop { left: 104px; bottom: 24px; }
}
/* Ouvert depuis le profil de la barre du haut */
.tt-pop.is-top, html.tt-collapsed .tt-pop.is-top { top: 82px; right: 22px; left: auto; bottom: auto; }
.tt-pop-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; }
.tt-pop-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tt-pop-id strong { font-size: 16px; font-weight: 800; color: var(--tt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-pop-id > span { font-size: 12.5px; color: var(--tt-ink-2); }
.tt-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; color: #15803D !important; }
.tt-status i, .tt-chip i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; display: inline-block; }
.tt-cam {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background: var(--tt-ink);
	color: #FFFFFF;
	cursor: pointer;
}
.tt-cam-lg { right: 0; bottom: 2px; width: 36px; height: 36px; border-width: 3px; }
.tt-pop-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-top: 1px solid rgba(15, 23, 42, 0.07); }
.tt-pop-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: var(--tt-ink) !important;
	font: 600 14px/1 var(--tt-font);
	text-align: left;
	cursor: pointer;
}
.tt-pop-item:hover { background: rgba(15, 23, 42, 0.05); }
.tt-pop-item .tt-ico { color: var(--tt-ink-2); }
.tt-pop-item.is-danger, .tt-pop-item.is-danger .tt-ico { color: #B42318 !important; }
.tt-pop-foot { padding: 10px 18px 14px; font-size: 11.5px; color: var(--tt-ink-2); background: rgba(15, 23, 42, 0.03); }

/* Panneaux latéraux (apparence, profil) */
.tt-sheet {
	position: fixed;
	z-index: 2040;
	top: 12px;
	right: 12px;
	bottom: 12px;
	width: 420px;
	max-width: calc(100vw - 24px);
	display: flex;
	flex-direction: column;
	border-radius: 26px;
	overflow: hidden;
}
.tt-sheet-profile { width: 448px; }
.tt-sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 12px; }
.tt-sheet-head > div { flex: 1; }
.tt-sheet h2 { margin: 0; font: 800 18px/1.25 var(--tt-font); color: var(--tt-ink); }
.tt-sheet-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--tt-ink-2); }
.tt-x {
	width: 40px;
	height: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.05);
	color: var(--tt-ink);
	cursor: pointer;
}
.tt-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 18px; display: flex; flex-direction: column; gap: 20px; }
.tt-sheet-body > * { flex-shrink: 0; }
.tt-sheet h3 { margin: 0 0 10px; font: 700 12px/1.2 var(--tt-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-ink-2); }
.tt-sheet-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid rgba(15, 23, 42, 0.07); }
.tt-saved { flex: 1; font-size: 12.5px; font-weight: 600; color: #15803D; }
.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--tt-ink) !important;
	font: 600 14px/1 var(--tt-font);
	cursor: pointer;
}
.tt-btn-primary { border: 0; background: var(--tt-brand); color: #FFFFFF !important; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.tt-sheet-profile .tt-sheet-foot .tt-btn-primary { flex: 1; }
.tt-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.tt-btn-block { width: 100%; height: auto; min-height: 44px; padding: 10px 16px; line-height: 1.3; }
.tt-company { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--tt-brand-tint); border: 1px solid var(--tt-brand-soft); }
.tt-company h3 { margin: 0; color: var(--tt-brand); }
.tt-company > p { margin: 0; font-size: 12.5px; color: var(--tt-ink-2); }
.tt-company .tt-linkbtn { margin: 0; color: #B42318; text-align: left; }

.tt-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tt-preset {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 8px;
	border: 0;
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.03);
	color: var(--tt-ink);
	font: 600 12.5px/1.2 var(--tt-font);
	text-align: left;
	cursor: pointer;
}
.tt-preset[aria-pressed="true"] { background: #EEF3FF; }
.tt-preset-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	height: 54px;
	padding: 0 10px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.tt-preset-tile i { display: block; height: 5px; border-radius: 4px; }
.tt-preset[aria-pressed="true"] .tt-preset-tile,
.tt-swatch[aria-pressed="true"],
.tt-bgchoice[aria-pressed="true"] .tt-bg-tile { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--tt-brand); }
.tt-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-swatch {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
	cursor: pointer;
}
.tt-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(15, 23, 42, 0.05); }
.tt-seg button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #3B4659;
	font: 600 13px/1 var(--tt-font);
	cursor: pointer;
}
.tt-seg button[aria-pressed="true"] { background: #FFFFFF; color: var(--tt-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.tt-seg i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25); }
.tt-seg i.is-auto { background: linear-gradient(90deg, #0F172A 50%, #FFFFFF 50%); }
.tt-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-seg i.is-color { border-radius: 4px; background: conic-gradient(#F97316, #22C55E, #0EA5E9, #A855F7, #F97316); box-shadow: none; }
.tt-seg i.is-mono { border-radius: 4px; background: #64748B; box-shadow: none; }
.tt-font-jakarta { font-family: "Plus Jakarta Sans", var(--tt-font) !important; }
.tt-font-systeme { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif !important; }
.tt-read { display: flex; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; }
.tt-read.is-great { background: #E8F7EE; color: #15803D; }
.tt-read.is-ok { background: #EEF3FF; color: var(--tt-brand); }
.tt-read.is-low { background: #FDECEC; color: #B42318; }
.tt-bgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tt-bgchoice {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--tt-ink);
	font: 600 12px/1.2 var(--tt-font);
	text-align: center;
	cursor: pointer;
}
.tt-bgchoice[aria-pressed="true"] { background: #EEF3FF; }
.tt-bg-tile { display: block; height: 52px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); }
.tt-glassbox { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(15, 23, 42, 0.035); border: 1px solid rgba(15, 23, 42, 0.05); }
.tt-glassrow { display: flex; align-items: center; gap: 12px; }
.tt-glassrow > div { flex: 1; }
.tt-glassrow strong { font-size: 14px; color: var(--tt-ink); }
.tt-glassrow p { margin: 2px 0 0; font-size: 12.5px; color: var(--tt-ink-2); }
.tt-switch {
	position: relative;
	width: 50px;
	height: 30px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.18);
	cursor: pointer;
	transition: background 0.15s;
}
.tt-switch span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
	transition: left 0.15s;
}
.tt-switch[aria-checked="true"] { background: var(--tt-brand); }
.tt-switch[aria-checked="true"] span { left: 23px; }
.tt-range { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; }
.tt-range label { font-weight: 600; color: var(--tt-ink); }
.tt-range output { color: var(--tt-ink-2); }
.tt-range input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--tt-brand); }

/* Profil */
.tt-idcard { overflow: hidden; border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.06); }
.tt-cover {
	height: 112px;
	background: var(--tt-menu);
	background-image: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.18), transparent 55%), radial-gradient(circle at 85% 80%, var(--tt-g1), transparent 60%);
	background-color: #0C1222;
}
.tt-id { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -52px; padding: 0 20px 20px; text-align: center; }
.tt-id-name { margin-top: 8px; font: 800 20px/1.2 var(--tt-font); color: var(--tt-ink); }
.tt-id-sub { font-size: 13px; color: var(--tt-ink-2); }
.tt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.tt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #EEF3FF; color: var(--tt-brand); font-size: 12px; font-weight: 700; }
.tt-chip.is-ok { background: #E8F7EE; color: #15803D; }
.tt-drop {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1.5px dashed var(--tt-module-border);
	border-radius: 16px;
	background: var(--tt-brand-tint);
	cursor: pointer;
}
.tt-drop.is-busy { opacity: 0.6; pointer-events: none; }
.tt-drop-ico { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--tt-brand); color: #FFFFFF; }
.tt-drop strong { display: block; font-size: 14px; color: var(--tt-ink); }
.tt-drop small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tt-ink-2); }
.tt-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tt-err { margin: -10px 0 0; font-size: 12.5px; font-weight: 600; color: #B42318; }
.tt-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(15, 23, 42, 0.04); font-size: 12.5px; color: var(--tt-ink-2); }
.tt-linkbtn { align-self: flex-start; margin-top: -10px; padding: 0; border: 0; background: transparent; font: 600 13px/1.4 var(--tt-font); cursor: pointer; }
.tt-linkbtn.is-danger { color: #B42318; }
.tt-card { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 16px; background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.06); }
.tt-card .tt-btn-sm { align-self: flex-start; margin-top: 10px; }
.tt-kv {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid #EEF1F6;
	font-size: 13.5px;
}
.tt-kv > span, .tt-kv > label { flex: 1; color: var(--tt-ink-2); }
.tt-kv > .tt-ico { color: var(--tt-ink-2); }
.tt-kv strong { font-weight: 600; color: var(--tt-ink); text-align: right; }
.tt-kv strong.is-empty { color: #94A3B8; font-weight: 500; }
.tt-kv strong.is-ok { color: #15803D; }
.tt-kv strong.is-warn { color: #92400E; }
.tt-kv .tt-btn-sm { margin: 0; }
.tt-kv select { height: 34px; padding: 0 10px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 10px; background: #FFFFFF; font: 500 13px/1 var(--tt-font); color: var(--tt-ink); }

/* Recherche rapide */
.tt-palette { position: fixed; inset: 0; z-index: 2050; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(8, 12, 24, 0.38); }
.tt-palette-box { width: 640px; max-width: 100%; overflow: hidden; border-radius: 22px; }
.tt-palette-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(15, 23, 42, 0.07); color: var(--tt-ink-2); }
.tt-palette-head input { flex: 1; min-width: 0; height: auto !important; padding: 0 !important; border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important; font: 500 16px/1.4 var(--tt-font) !important; color: var(--tt-ink) !important; }
.tt-palette kbd { background: rgba(15, 23, 42, 0.06); color: var(--tt-ink-2); }
.tt-results { max-height: min(56vh, 460px); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.tt-result {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--tt-ink) !important;
	font: 600 14px/1.3 var(--tt-font);
	text-align: left;
	cursor: pointer;
}
.tt-result.is-sel { background: var(--tt-brand-tint); }
.tt-result-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; background: rgba(15, 23, 42, 0.06); position: relative; }
.tt-result.is-sel .tt-result-ico { background: var(--tt-brand); }
.tt-result-ico::after { content: ""; position: absolute; inset: 10px; border-radius: 3px; border: 2px solid #3B4659; }
.tt-result-ico.is-search::after { border-radius: 50%; }
.tt-result-ico.is-action::after { inset: 11px; border-radius: 50%; background: #3B4659; border: 0; }
.tt-result.is-sel .tt-result-ico::after { border-color: #FFFFFF; }
.tt-result.is-sel .tt-result-ico.is-action::after { background: #FFFFFF; }
.tt-result-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-result-meta { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--tt-ink-2); }
.tt-empty { margin: 0; padding: 18px; text-align: center; color: var(--tt-ink-2); }
.tt-palette-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 11px 18px; border-top: 1px solid rgba(15, 23, 42, 0.07); font-size: 12px; color: var(--tt-ink-2); }
.tt-palette-note { margin-left: auto; }

/* Message */
.tt-toast {
	position: fixed;
	z-index: 2100;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100vw - 32px);
	padding: 12px 14px 12px 18px;
	border-radius: 16px;
	background: rgba(15, 23, 42, 0.92);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #FFFFFF;
	font: 600 13.5px/1.4 var(--tt-font);
	box-shadow: 0 18px 40px rgba(8, 12, 24, 0.35);
}
.tt-toast button { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: #FFFFFF; color: var(--tt-ink); font: 700 13px/1 var(--tt-font); cursor: pointer; }

.tt-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barre d'onglets (téléphone) */
.tt-tabbar { display: none; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 900px) {
	html.titan-ui #id-top { top: 10px !important; left: 10px !important; right: 10px !important; padding: 0 6px !important; }
	html.titan-ui #id-container { padding: 80px 10px 96px 10px !important; }
	html.titan-ui #id-right > .fiche { padding: 14px 12px !important; border-radius: 18px; min-height: 0; }
	.tt-burger { display: flex; }
	.tt-crumb:not(.is-current), .tt-crumb-sep { display: none; }
	.tt-secure > span { display: none; }
	.tt-top-profile { padding: 4px; margin-left: 0; }
	.tt-top-profile-text, .tt-top-profile-chev { display: none; }
	.tt-pop.is-top { top: 76px; right: 10px; }
	.tt-secure { width: 32px; padding: 0; justify-content: center; }
	.tt-sidebar {
		z-index: 2010;
		top: 10px;
		left: 10px;
		bottom: 10px;
		width: min(318px, calc(100vw - 40px));
		transform: translateX(calc(-100% - 24px));
	}
	html.tt-drawer-open .tt-sidebar { transform: none; }
	.tt-item { height: 44px; font-size: 15px; }
	.tt-child { min-height: 42px; font-size: 14px; }
	.tt-pop { left: 20px; bottom: 96px; z-index: 2030; }
	.tt-sheet, .tt-sheet-profile { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 40px); border-radius: 24px; }
	.tt-tabbar {
		position: fixed;
		z-index: 906;
		left: 10px;
		right: 10px;
		bottom: 10px;
		display: flex;
		height: 66px;
		padding: 0 4px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.74);
		-webkit-backdrop-filter: blur(24px) saturate(170%);
		backdrop-filter: blur(24px) saturate(170%);
		border: 1px solid rgba(255, 255, 255, 0.9);
		box-shadow: inset 0 1px 0 #FFFFFF, 0 14px 34px rgba(15, 23, 42, 0.14);
	}
	.tt-tab {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--tt-ink-2) !important;
		font: 500 10.5px/1.1 var(--tt-font);
		text-decoration: none !important;
		cursor: pointer;
	}
	.tt-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tt-tab-ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 28px; border-radius: 999px; }
	.tt-tab.is-active { color: var(--tt-brand) !important; font-weight: 700; }
	.tt-tab.is-active .tt-tab-ico { background: var(--tt-brand-soft); }
	.tt-toast { bottom: 88px; }
}
/* =====================================================================
   THÈME UNIFIÉ DES MODULES TITAN
   ---------------------------------------------------------------------
   Ces classes sont une API légère : aucun scan du DOM, aucune librairie,
   aucun appel serveur. Les modules personnalisés héritent des variables
   calculées une seule fois par TITAN UI.

   Utilisation recommandée :
     <section class="tt-module-hero">...</section>
     <button class="tt-module-action">...</button>
     <div class="tt-module-accent-card">...</div>

   Un module peut aussi employer directement var(--titan-primary),
   var(--titan-module-bg), var(--titan-primary-soft), etc.
   ===================================================================== */
html.titan-ui .tt-module-hero,
html.titan-ui .titan-module-hero,
html.titan-ui [data-titan-theme="hero"] {
	background: var(--tt-module-gradient) !important;
	color: var(--tt-on-brand) !important;
	border-color: transparent !important;
}
html.titan-ui .tt-module-hero a,
html.titan-ui .tt-module-hero h1,
html.titan-ui .tt-module-hero h2,
html.titan-ui .tt-module-hero h3,
html.titan-ui .titan-module-hero a,
html.titan-ui .titan-module-hero h1,
html.titan-ui .titan-module-hero h2,
html.titan-ui .titan-module-hero h3,
html.titan-ui [data-titan-theme="hero"] a,
html.titan-ui [data-titan-theme="hero"] h1,
html.titan-ui [data-titan-theme="hero"] h2,
html.titan-ui [data-titan-theme="hero"] h3 { color: inherit !important; }
html.titan-ui .tt-module-action,
html.titan-ui .titan-module-action,
html.titan-ui [data-titan-theme="action"] {
	background: var(--tt-module-primary) !important;
	border-color: var(--tt-module-primary) !important;
	color: var(--tt-on-brand) !important;
}
html.titan-ui .tt-module-action:hover,
html.titan-ui .titan-module-action:hover,
html.titan-ui [data-titan-theme="action"]:hover {
	background: var(--tt-module-primary-dark) !important;
	border-color: var(--tt-module-primary-dark) !important;
}
html.titan-ui .tt-module-accent-card,
html.titan-ui .titan-module-accent-card,
html.titan-ui [data-titan-theme="soft"] {
	background: var(--tt-module-soft) !important;
	border-color: var(--tt-module-border) !important;
}
html.titan-ui .tt-module-accent-text,
html.titan-ui .titan-module-accent-text,
html.titan-ui [data-titan-theme="text"] { color: var(--tt-module-primary) !important; }

/* Pont universel optionnel pour un conteneur de module.
   Une fois la classe titan-auto-theme posée sur le conteneur, les composants
   qui utilisent des variables génériques (--module-primary, --primary-color, etc.)
   suivent automatiquement la couleur active du menu TITAN. */
html.titan-ui .titan-auto-theme,
html.titan-ui [data-titan-theme="scope"] {
	--primary: var(--tt-module-primary);
	--primary-color: var(--tt-module-primary);
	--primary-dark: var(--tt-module-primary-dark);
	--primary-soft: var(--tt-module-soft);
	--primary-border: var(--tt-module-border);
	--brand-color: var(--tt-module-primary);
	--brand-primary: var(--tt-module-primary);
	--accent-color: var(--tt-module-primary);
	--accent-bg: var(--tt-module-soft);
}

/* Les couleurs sémantiques restent indépendantes du thème :
   succès, avertissement et erreur gardent leur sens visuel. */
html.titan-ui {
	--titan-success: #15803D;
	--titan-warning: #D97706;
	--titan-danger: #B91C1C;
	--titan-info: var(--tt-module-primary);
}

@media (max-width: 600px) {
	html.titan-ui #id-top .login_block { display: none !important; }
	.tt-palette { padding-top: 10px; }
	.tt-palette-note { display: none; }
}

/* =====================================================================
   STYLE DE TOUT LE SYSTÈME (pages Dolibarr)
   Police, couleurs, titres, onglets, tableaux, fiches, boutons, champs,
   listes déroulantes, messages, fenêtres, pagination.
   La couleur principale suit le thème choisi (--tt-brand).
   ===================================================================== */

/* Variables du thème Eldy remplacées (reprises partout par Dolibarr) */
html.titan-ui {
	--colortext: #1E293B;
	--colortextlink: var(--tt-brand);
	--colortexttitle: #0F172A;
	--colortexttitlenotab: #0F172A;
	--colortexttitlenotab2: var(--tt-brand);
	--colorbacktitle1: #F6F8FC;
	--colorbacktabcard1: #FFFFFF;
	--colorbacktabactive: #FFFFFF;
	--colorbacklineimpair1: #FFFFFF;
	--colorbacklineimpair2: #FFFFFF;
	--colorbacklinepair1: #FFFFFF;
	--colorbacklinepair2: #FFFFFF;
	--colorbacklinepairhover: #F6F8FF;
	--colorbacklinepairchecked: var(--tt-brand-tint);
	--colorbacklinebreak: #F8FAFC;
	--colortopbordertitle1: #E8ECF3;
	--listetotal: #0F172A;
	--inputbackgroundcolor: #FFFFFF;
	--inputbordercolor: rgba(15, 23, 42, 0.16);
	--butactionbg: var(--tt-brand);
	--textbutaction: #FFFFFF;
	--fieldrequiredcolor: #B42318;
	--colorboxstatsborder: #E8ECF3;
	--oddevencolor: #1E293B;
}

/* Police et rendu du texte */
html.titan-ui body,
html.titan-ui table,
html.titan-ui input,
html.titan-ui select,
html.titan-ui textarea,
html.titan-ui button:not(.fa):not(.fas):not(.far):not(.fab),
html.titan-ui .ui-widget,
html.titan-ui .ui-widget input,
html.titan-ui .ui-widget select,
html.titan-ui .ui-widget button,
html.titan-ui .select2-container,
html.titan-ui .select2-results,
html.titan-ui .jnotify-notification {
	font-family: var(--tt-font) !important;
}
html.titan-ui body {
	color: #1E293B;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
html.titan-ui #id-container table { font-variant-numeric: tabular-nums; }
html.titan-ui #id-right h1,
html.titan-ui #id-right h2,
html.titan-ui #id-right h3,
html.titan-ui #id-right h4 {
	font-family: var(--tt-font);
	letter-spacing: -0.01em;
}
html.titan-ui #id-right a:not([class]),
html.titan-ui #id-right a.classfortooltip,
html.titan-ui #id-right a.refurl { color: var(--tt-brand); }
html.titan-ui .opacitymedium, html.titan-ui .opacitymediumbycolor { color: #64748B; opacity: 1; }

/* Titres de page */
html.titan-ui div.titre,
html.titan-ui .titre {
	font-family: var(--tt-font) !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em;
}
html.titan-ui table.table-fiche-title { margin-bottom: 14px; }
html.titan-ui .pictotitle, html.titan-ui .pictotitle.fa, html.titan-ui span.pictotitle { color: var(--tt-brand) !important; }
html.titan-ui .btnTitle, html.titan-ui a.btnTitle {
	border-radius: 10px !important;
	border: 1px solid #E8ECF3 !important;
	background: #FFFFFF !important;
	transition: background-color 0.15s, border-color 0.15s;
}
html.titan-ui .btnTitle:hover { border-color: var(--tt-brand-soft) !important; background: var(--tt-brand-tint) !important; }
html.titan-ui .btnTitle .fa, html.titan-ui .btnTitle .fas, html.titan-ui .btnTitle .far, html.titan-ui a.btnTitle span.fa { color: var(--tt-brand) !important; }
html.titan-ui .btnTitle.btnTitleSelected { background: var(--tt-brand) !important; border-color: var(--tt-brand) !important; }
html.titan-ui .btnTitle.btnTitleSelected .fa { color: #FFFFFF !important; }

/* Bandeau d'une fiche (référence, statut) */
html.titan-ui div.arearef { border-bottom: 1px solid #EEF1F6 !important; }
html.titan-ui div.refidno { color: #5B6577; }
html.titan-ui div.underbanner { border-bottom: 1px solid #EEF1F6 !important; }

/* Onglets */
html.titan-ui div.tabs {
	border-bottom: 0 !important;
	padding-top: 2px;
}
html.titan-ui div.tabsElem a.tab,
html.titan-ui div.tabs a.tab {
	margin: 0 2px 0 0 !important;
	padding: 10px 14px !important;
	border: 0 !important;
	border-radius: 12px 12px 0 0 !important;
	background: transparent !important;
	color: #5B6577 !important;
	font-family: var(--tt-font) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
html.titan-ui div.tabs a.tab:hover { background: rgba(15, 23, 42, 0.04) !important; color: #0F172A !important; }
html.titan-ui div.tabs a.tab#active,
html.titan-ui div.tabs a.tabactive,
html.titan-ui div.tabsElem a.tabactive {
	background: #FFFFFF !important;
	color: var(--tt-brand) !important;
	box-shadow: inset 0 -2px 0 var(--tt-brand), 0 -1px 0 #E8ECF3 inset;
}
html.titan-ui div.tabBar,
html.titan-ui div.tabBar.tabBarWithBottom {
	background: #FFFFFF !important;
	border: 1px solid #E8ECF3 !important;
	border-radius: 0 16px 16px 16px !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

/* Tableaux et listes */
html.titan-ui div.div-table-responsive,
html.titan-ui div.div-table-responsive-no-min {
	border: 1px solid #E8ECF3;
	border-radius: 16px;
	background: #FFFFFF;
}
html.titan-ui div.div-table-responsive > table,
html.titan-ui div.div-table-responsive-no-min > table {
	border: 0 !important;
	margin: 0 !important;
}
html.titan-ui table.liste,
html.titan-ui table.noborder {
	border-collapse: separate !important;
	border-spacing: 0 !important;
}
html.titan-ui tr.liste_titre > th,
html.titan-ui tr.liste_titre > td,
html.titan-ui tr.liste_titre_sel > th,
html.titan-ui tr.liste_titre_sel > td {
	background: #F6F8FC !important;
	color: #5B6577 !important;
	font-family: var(--tt-font) !important;
	font-size: 0.8em !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-top: 0 !important;
	border-bottom: 1px solid #E8ECF3 !important;
}
html.titan-ui tr.liste_titre > th a,
html.titan-ui tr.liste_titre > td a { color: #5B6577 !important; }
html.titan-ui tr.liste_titre > th:first-child, html.titan-ui tr.liste_titre > td:first-child { border-top-left-radius: 15px; }
html.titan-ui tr.liste_titre > th:last-child, html.titan-ui tr.liste_titre > td:last-child { border-top-right-radius: 15px; }
html.titan-ui tr.liste_titre_filter > td,
html.titan-ui tr.liste_titre_filter > th {
	background: #FBFCFE !important;
	border-bottom: 1px solid #EEF1F6 !important;
}
html.titan-ui tr.oddeven > td,
html.titan-ui tr.impair > td,
html.titan-ui tr.pair > td {
	border-top: 0 !important;
	border-bottom: 1px solid #EEF1F6 !important;
}
html.titan-ui tr.oddeven:last-child > td { border-bottom: 0 !important; }
html.titan-ui tr.liste_total > td {
	background: #F8FAFC !important;
	border-top: 1px solid #E3E8F0 !important;
	font-weight: 700 !important;
	color: #0F172A !important;
}

/* Fiches (libellé / valeur) */
html.titan-ui table.border {
	border: 1px solid #E8ECF3 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: 14px;
	background: #FFFFFF;
	overflow: hidden;
}
html.titan-ui table.border > tbody > tr > td,
html.titan-ui table.border > tr > td {
	border: 0 !important;
	border-bottom: 1px solid #EEF1F6 !important;
}
html.titan-ui table.border > tbody > tr:last-child > td { border-bottom: 0 !important; }
html.titan-ui table.border td.titlefield,
html.titan-ui table.border td.titlefieldcreate,
html.titan-ui table.border td.titlefieldmiddle,
html.titan-ui td.titlefield { color: #5B6577; }
html.titan-ui .fieldrequired { color: #0F172A; font-weight: 700; }
html.titan-ui .fieldrequired::after { content: " *"; color: #B42318; }

/* Boutons */
html.titan-ui .butAction,
html.titan-ui .butActionDelete,
html.titan-ui .butActionRefused,
html.titan-ui .butActionNew,
html.titan-ui .butActionNewRefused,
html.titan-ui input.button,
html.titan-ui button.button,
html.titan-ui a.button,
html.titan-ui .ui-dialog .ui-dialog-buttonpane button {
	border-radius: 11px !important;
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
html.titan-ui .butAction,
html.titan-ui .butActionNew,
html.titan-ui input.button:not(.button-cancel):not(.button_search):not(.button_removefilter),
html.titan-ui button.button:not(.button-cancel):not(.button_search):not(.button_removefilter),
html.titan-ui .ui-dialog .ui-dialog-buttonpane button:first-child {
	background: var(--tt-brand) !important;
	border: 1px solid var(--tt-brand) !important;
	color: #FFFFFF !important;
}
html.titan-ui .butAction:hover,
html.titan-ui .butActionNew:hover,
html.titan-ui input.button:not(.button-cancel):not(.button_search):not(.button_removefilter):hover,
html.titan-ui button.button:not(.button-cancel):not(.button_search):not(.button_removefilter):hover {
	background: var(--tt-brand-dark) !important;
	border-color: var(--tt-brand-dark) !important;
	box-shadow: 0 8px 18px -8px var(--tt-brand) !important;
}
html.titan-ui .butAction:active, html.titan-ui input.button:active, html.titan-ui button.button:active { transform: translateY(1px); }
html.titan-ui .butActionDelete {
	background: #FFFFFF !important;
	border: 1px solid rgba(180, 35, 24, 0.3) !important;
	color: #B42318 !important;
}
html.titan-ui .butActionDelete:hover { background: #FEF2F2 !important; }
html.titan-ui .butActionRefused,
html.titan-ui .butActionNewRefused {
	background: #F1F5F9 !important;
	border: 1px solid #E2E8F0 !important;
	color: #94A3B8 !important;
}
html.titan-ui input.button-cancel,
html.titan-ui button.button-cancel,
html.titan-ui .ui-dialog .ui-dialog-buttonpane button + button {
	background: #FFFFFF !important;
	border: 1px solid rgba(15, 23, 42, 0.14) !important;
	color: #0F172A !important;
}
html.titan-ui .butAction:focus-visible,
html.titan-ui input.button:focus-visible,
html.titan-ui button.button:focus-visible { outline: 3px solid var(--tt-brand-soft); outline-offset: 2px; }

/* Champs de saisie (contenu des pages et fenêtres) */
html.titan-ui #id-container input[type="text"],
html.titan-ui #id-container input[type="password"],
html.titan-ui #id-container input[type="number"],
html.titan-ui #id-container input[type="email"],
html.titan-ui #id-container input[type="search"],
html.titan-ui #id-container input[type="tel"],
html.titan-ui #id-container input[type="url"],
html.titan-ui #id-container input[type="date"],
html.titan-ui #id-container input[type="datetime-local"],
html.titan-ui #id-container input:not([type]),
html.titan-ui #id-container select,
html.titan-ui #id-container textarea,
html.titan-ui .ui-dialog input[type="text"],
html.titan-ui .ui-dialog input[type="password"],
html.titan-ui .ui-dialog select,
html.titan-ui .ui-dialog textarea {
	border: 1px solid var(--inputbordercolor) !important;
	border-radius: 10px !important;
	background-color: #FFFFFF;
	color: #0F172A;
	padding: 5px 9px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
html.titan-ui #id-container input:focus,
html.titan-ui #id-container select:focus,
html.titan-ui #id-container textarea:focus,
html.titan-ui .ui-dialog input:focus,
html.titan-ui .ui-dialog select:focus,
html.titan-ui .ui-dialog textarea:focus {
	border-color: var(--tt-brand) !important;
	box-shadow: 0 0 0 3px var(--tt-brand-soft) !important;
	outline: none !important;
}
html.titan-ui #id-container input[type="checkbox"],
html.titan-ui #id-container input[type="radio"] { accent-color: var(--tt-brand); }

/* Listes déroulantes enrichies (select2) */
html.titan-ui .select2-container--default .select2-selection--single,
html.titan-ui .select2-container--default .select2-selection--multiple {
	border: 1px solid var(--inputbordercolor) !important;
	border-radius: 10px !important;
	background-color: #FFFFFF !important;
}
html.titan-ui .select2-container--default.select2-container--open .select2-selection,
html.titan-ui .select2-container--default.select2-container--focus .select2-selection {
	border-color: var(--tt-brand) !important;
	box-shadow: 0 0 0 3px var(--tt-brand-soft) !important;
}
html.titan-ui .select2-dropdown {
	border: 1px solid rgba(15, 23, 42, 0.1) !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
	overflow: hidden;
}
html.titan-ui .select2-container--default .select2-results__option--highlighted[aria-selected],
html.titan-ui .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--tt-brand) !important;
	color: #FFFFFF !important;
}
html.titan-ui .select2-container--default .select2-selection--multiple .select2-selection__choice {
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--tt-brand-tint) !important;
	color: #0F172A !important;
}

/* Messages */
html.titan-ui div.ok,
html.titan-ui div.warning,
html.titan-ui div.error,
html.titan-ui div.info {
	border-radius: 12px !important;
	border-width: 1px !important;
	border-style: solid !important;
	padding: 10px 14px !important;
	box-shadow: none !important;
	font-family: var(--tt-font);
}
html.titan-ui div.error { background: #FEF2F2 !important; border-color: #FECACA !important; color: #B91C1C !important; }
html.titan-ui div.warning { background: #FFF7ED !important; border-color: #FED7AA !important; color: #9A3412 !important; }
html.titan-ui div.ok { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #166534 !important; }
html.titan-ui div.info { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
html.titan-ui .jnotify-notification {
	border-radius: 14px !important;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
}

/* Pastilles de statut et étiquettes */
html.titan-ui .badge { border-radius: 999px !important; font-weight: 700 !important; }

/* Tableau de bord Dolibarr (boîtes, statistiques) */
html.titan-ui .info-box,
html.titan-ui .boxstats,
html.titan-ui div.boxdraggable {
	border-radius: 16px !important;
	border: 1px solid #E8ECF3 !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
	overflow: hidden;
}
html.titan-ui .boxstats:hover { border-color: var(--tt-brand-soft) !important; box-shadow: 0 10px 24px -12px var(--tt-brand) !important; }
html.titan-ui .info-box-icon { border-radius: 0 !important; }

/* Pagination */
html.titan-ui div.pagination li a,
html.titan-ui div.pagination li span {
	border-radius: 9px !important;
	border: 0 !important;
}
html.titan-ui div.pagination li span.active,
html.titan-ui div.pagination li.active span,
html.titan-ui div.pagination li a.active {
	background: var(--tt-brand) !important;
	color: #FFFFFF !important;
}

/* Fenêtres de confirmation et infobulles */
html.titan-ui .ui-dialog {
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	border-radius: 20px !important;
	box-shadow: 0 30px 80px rgba(8, 12, 24, 0.3) !important;
}
html.titan-ui .ui-dialog .ui-dialog-titlebar {
	padding: 14px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid #EEF1F6 !important;
	border-radius: 0 !important;
	background: #F8FAFC !important;
	color: #0F172A !important;
	font-weight: 800 !important;
}
html.titan-ui .ui-dialog .ui-dialog-buttonpane {
	margin: 0 !important;
	padding: 10px 14px !important;
	border-top: 1px solid #EEF1F6 !important;
}
html.titan-ui .ui-widget-overlay {
	background: rgba(8, 12, 24, 0.4) !important;
	opacity: 1 !important;
}
html.titan-ui .ui-tooltip {
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
}

/* Barres de défilement fines dans le contenu */
html.titan-ui #id-container * { scrollbar-width: thin; }

/* ---------- Accessibilité et légèreté ---------- */
@media (prefers-reduced-motion: reduce) {
	.tt-sidebar, html.titan-ui #id-top, html.titan-ui #id-container, .tt-toggle .tt-ico, .tt-chev .tt-ico, .tt-switch, .tt-switch span { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
	.tt-sidebar, html.titan-ui #id-top::before, .tt-pop, .tt-sheet, .tt-palette-box, .tt-tabbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---------- Impression : on n'imprime que le contenu ---------- */
@media print {
	.tt-sidebar, #tt-overlays, .tt-tabbar, html.titan-ui #id-top { display: none !important; }
	html.titan-ui #id-container { padding: 0 !important; }
	html.titan-ui body::before { display: none; }
	html.titan-ui #id-right > .fiche { box-shadow: none; border: 0; padding: 0 !important; background: #FFFFFF; }
}

/* ==========================================================================
   TITAN ERP - Correctif défilement horizontal des listes
   Permet aux tableaux larges de défiler dans leur cadre sans élargir la page.
   PC, tablette et téléphone.
   ========================================================================== */
html.titan-ui body#mainbody div.div-table-responsive,
html.titan-ui body#mainbody div.div-table-responsive-no-min {
	overflow-x: auto !important;
	max-width: 100% !important;
	-webkit-overflow-scrolling: touch;
}

/* ========================================================================== 
   TITAN ERP - Harmonisation visuelle globale des pages Dolibarr
   STANTECH 2026
   Objectif : typographie, tableaux, filtres et barres d'actions cohérents
   avec la palette active de TITAN, sans modifier la logique des modules.
   ========================================================================== */

/* 1) Typographie du contenu : mêmes proportions que l'interface TITAN */
html.titan-ui #id-right,
html.titan-ui #id-right .fiche,
html.titan-ui #id-right table,
html.titan-ui #id-right input,
html.titan-ui #id-right select,
html.titan-ui #id-right textarea,
html.titan-ui #id-right button,
html.titan-ui #id-right a {
	font-family: var(--tt-font) !important;
}
html.titan-ui #id-right > .fiche {
	font-size: 13.5px;
	line-height: 1.42;
	color: var(--tt-ink);
}
html.titan-ui #id-right strong,
html.titan-ui #id-right b {
	font-weight: 700;
}
html.titan-ui #id-right .opacitymedium,
html.titan-ui #id-right .opacitymediumbycolor,
html.titan-ui #id-right .note,
html.titan-ui #id-right .small {
	color: var(--tt-ink-2) !important;
}

/* 2) Titres et barres de liste */
html.titan-ui #id-right .titre,
html.titan-ui #id-right div.titre {
	color: var(--tt-ink) !important;
	font-size: clamp(18px, 1.25vw, 22px) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.025em !important;
}
html.titan-ui #id-right .liste_titre,
html.titan-ui #id-right .liste_titre_sel {
	font-family: var(--tt-font) !important;
}

/* Les bandeaux/filtres prennent une teinte très légère du thème actif */
html.titan-ui #id-right tr.liste_titre > th,
html.titan-ui #id-right tr.liste_titre > td,
html.titan-ui #id-right tr.liste_titre_sel > th,
html.titan-ui #id-right tr.liste_titre_sel > td {
	background: color-mix(in srgb, var(--tt-brand) 5%, #FFFFFF) !important;
	color: var(--tt-ink-2) !important;
	font-size: 11.5px !important;
	font-weight: 750 !important;
	line-height: 1.25 !important;
	letter-spacing: .045em !important;
	padding-top: 11px !important;
	padding-bottom: 11px !important;
}
html.titan-ui #id-right tr.liste_titre_filter > th,
html.titan-ui #id-right tr.liste_titre_filter > td {
	background: color-mix(in srgb, var(--tt-brand) 3%, #FFFFFF) !important;
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

/* Secours pour les navigateurs ne gérant pas encore color-mix() */
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
	html.titan-ui #id-right tr.liste_titre > th,
	html.titan-ui #id-right tr.liste_titre > td,
	html.titan-ui #id-right tr.liste_titre_sel > th,
	html.titan-ui #id-right tr.liste_titre_sel > td { background: var(--tt-brand-tint) !important; }
	html.titan-ui #id-right tr.liste_titre_filter > th,
	html.titan-ui #id-right tr.liste_titre_filter > td { background: #FBFCFE !important; }
}

/* 3) Tableaux : plus premium, compacts et lisibles */
html.titan-ui #id-right div.div-table-responsive,
html.titan-ui #id-right div.div-table-responsive-no-min {
	border-color: color-mix(in srgb, var(--tt-brand) 12%, #E8ECF3) !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.025), 0 10px 28px rgba(15,23,42,.035);
}
html.titan-ui #id-right table.liste,
html.titan-ui #id-right table.noborder {
	font-size: 13px !important;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
html.titan-ui #id-right table.liste tbody tr > td,
html.titan-ui #id-right table.noborder tbody tr > td {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	vertical-align: middle !important;
	transition: background-color .12s ease, box-shadow .12s ease;
}
html.titan-ui #id-right table.liste tbody tr:hover > td,
html.titan-ui #id-right table.noborder tbody tr:hover > td {
	background-color: color-mix(in srgb, var(--tt-brand) 4%, #FFFFFF) !important;
}
html.titan-ui #id-right table.liste td.right,
html.titan-ui #id-right table.noborder td.right,
html.titan-ui #id-right table.liste td.amount,
html.titan-ui #id-right table.noborder td.amount {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Références et liens : couleur du thème sans écraser les états sémantiques */
html.titan-ui #id-right table.liste a:not(.button):not(.butAction):not(.badge),
html.titan-ui #id-right table.noborder a:not(.button):not(.butAction):not(.badge) {
	text-decoration: none !important;
	text-underline-offset: 2px;
}
html.titan-ui #id-right table.liste a:not(.button):not(.butAction):not(.badge):hover,
html.titan-ui #id-right table.noborder a:not(.button):not(.butAction):not(.badge):hover {
	text-decoration: underline !important;
}

/* 4) Champs et filtres : hauteur et typo cohérentes */
html.titan-ui #id-right input[type="text"],
html.titan-ui #id-right input[type="password"],
html.titan-ui #id-right input[type="number"],
html.titan-ui #id-right input[type="email"],
html.titan-ui #id-right input[type="search"],
html.titan-ui #id-right input[type="tel"],
html.titan-ui #id-right input[type="url"],
html.titan-ui #id-right input[type="date"],
html.titan-ui #id-right input[type="datetime-local"],
html.titan-ui #id-right input:not([type]),
html.titan-ui #id-right select {
	min-height: 36px;
	font-size: 13px !important;
	font-weight: 500;
}
html.titan-ui #id-right textarea {
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.45;
}
html.titan-ui #id-right input::placeholder,
html.titan-ui #id-right textarea::placeholder {
	color: #94A3B8 !important;
	opacity: 1;
}
html.titan-ui #id-right label,
html.titan-ui #id-right .tdtop,
html.titan-ui #id-right .titlefield,
html.titan-ui #id-right .titlefieldcreate {
	font-family: var(--tt-font) !important;
}

/* 5) Boutons d'action et pagination */
html.titan-ui #id-right .butAction,
html.titan-ui #id-right .butActionNew,
html.titan-ui #id-right a.button,
html.titan-ui #id-right input.button,
html.titan-ui #id-right button.button {
	min-height: 38px;
	padding-left: 15px !important;
	padding-right: 15px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}
html.titan-ui #id-right div.pagination,
html.titan-ui #id-right .pagination {
	font-family: var(--tt-font) !important;
	font-size: 13px;
}
html.titan-ui #id-right div.pagination li a,
html.titan-ui #id-right div.pagination li span {
	min-width: 34px;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 650;
}

/* 6) Petites icônes d'action : plus propres et cohérentes */
html.titan-ui #id-right .fa,
html.titan-ui #id-right .fas,
html.titan-ui #id-right .far {
	text-rendering: geometricPrecision;
}
html.titan-ui #id-right a:hover > .fa,
html.titan-ui #id-right a:hover > .fas,
html.titan-ui #id-right a:hover > .far {
	filter: saturate(1.05);
}

/* 7) Responsive : conserver la densité sans agrandir les tableaux */
@media (max-width: 900px) {
	html.titan-ui #id-right > .fiche {
		font-size: 13px;
		line-height: 1.4;
	}
	html.titan-ui #id-right table.liste,
	html.titan-ui #id-right table.noborder { font-size: 12.5px !important; }
	html.titan-ui #id-right table.liste tbody tr > td,
	html.titan-ui #id-right table.noborder tbody tr > td {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
}

/* =====================================================================
   TITAN ERP - Harmonisation légère des listes Dolibarr
   CSS uniquement : aucun JS, aucune requête, aucune bibliothèque.
   ===================================================================== */

/* Barre de filtres au-dessus des listes */
html.titan-ui #id-right .liste_titre_bydiv {
	box-sizing: border-box;
	margin: 10px 0 8px !important;
	padding: 9px 12px !important;
	border: 1px solid var(--tt-module-border) !important;
	border-radius: 14px !important;
	background: var(--tt-brand-tint) !important;
	color: var(--tt-ink-2) !important;
	font: 600 12.5px/1.35 var(--tt-font) !important;
}
html.titan-ui #id-right .liste_titre_bydiv .divsearchfield {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	margin: 2px 12px 2px 0 !important;
	vertical-align: middle;
	color: var(--tt-ink-2) !important;
}
html.titan-ui #id-right .liste_titre_bydiv input,
html.titan-ui #id-right .liste_titre_bydiv select,
html.titan-ui #id-right .liste_titre_filter input,
html.titan-ui #id-right .liste_titre_filter select {
	min-height: 32px !important;
	border-radius: 9px !important;
	font: 500 12.5px/1 var(--tt-font) !important;
}

/* Cadre de liste : garde le scroll local et reste visuellement discret */
html.titan-ui #id-right div.div-table-responsive,
html.titan-ui #id-right div.div-table-responsive-no-min {
	overflow-x: auto !important;
	max-width: 100% !important;
	border-radius: 14px !important;
	border-color: var(--tt-module-border) !important;
	scrollbar-width: thin;
	scrollbar-color: var(--tt-brand-soft) transparent;
	-webkit-overflow-scrolling: touch;
}
html.titan-ui #id-right div.div-table-responsive::-webkit-scrollbar,
html.titan-ui #id-right div.div-table-responsive-no-min::-webkit-scrollbar { height: 7px; }
html.titan-ui #id-right div.div-table-responsive::-webkit-scrollbar-thumb,
html.titan-ui #id-right div.div-table-responsive-no-min::-webkit-scrollbar-thumb {
	background: var(--tt-brand-soft);
	border-radius: 999px;
}

/* En-têtes de colonnes : typo TITAN compacte */
html.titan-ui #id-right table.liste tr.liste_titre > th,
html.titan-ui #id-right table.liste tr.liste_titre > td,
html.titan-ui #id-right table.liste tr.liste_titre_sel > th,
html.titan-ui #id-right table.liste tr.liste_titre_sel > td {
	color: var(--tt-ink-2) !important;
	font: 750 11.5px/1.25 var(--tt-font) !important;
	letter-spacing: .045em !important;
	text-transform: uppercase;
	white-space: nowrap;
}
html.titan-ui #id-right table.liste tr.liste_titre_filter > th,
html.titan-ui #id-right table.liste tr.liste_titre_filter > td {
	padding: 6px 8px !important;
}

/* Corps : compact sans toucher aux couleurs métier des lignes */
html.titan-ui #id-right table.liste tbody td {
	font: 550 13px/1.3 var(--tt-font) !important;
}
html.titan-ui #id-right table.liste td.right,
html.titan-ui #id-right table.liste td.amount,
html.titan-ui #id-right table.liste .amount {
	font-variant-numeric: tabular-nums;
	font-weight: 750 !important;
}

/* Barre de pagination / actions */
html.titan-ui #id-right .pagination,
html.titan-ui #id-right .paginationref,
html.titan-ui #id-right .paginationpage {
	font-family: var(--tt-font) !important;
	font-size: 12.5px !important;
	font-weight: 600;
}
html.titan-ui #id-right .pagination a,
html.titan-ui #id-right .pagination span {
	border-radius: 9px;
}

/* Action spécifique déjà présente dans la page bancaire */
html.titan-ui #id-right .sr-expense-report-btn {
	background: var(--tt-brand) !important;
	border-color: var(--tt-brand) !important;
	color: var(--tt-on-brand) !important;
	font: 700 13px/1 var(--tt-font) !important;
	border-radius: 11px !important;
	box-shadow: none !important;
}
html.titan-ui #id-right .sr-expense-report-btn:hover {
	background: var(--tt-brand-dark) !important;
	border-color: var(--tt-brand-dark) !important;
}

/* Téléphone/tablette : même typo, moins d'espace perdu */
@media (max-width: 900px) {
	html.titan-ui #id-right .liste_titre_bydiv {
		padding: 8px 10px !important;
		border-radius: 12px !important;
	}
	html.titan-ui #id-right .liste_titre_bydiv .divsearchfield {
		margin-right: 8px !important;
	}
	html.titan-ui #id-right table.liste tbody td {
		font-size: 12.5px !important;
	}
}

/* ==========================================================================
   TITAN ERP - FACTURATION
   Correctif léger de la zone des boutons d'action
   - La zone .tabsAction utilise toute la largeur disponible
   - Les boutons gardent leur largeur naturelle et leur texte sur une ligne
   - Aucun JS, aucune bibliothèque, aucune logique métier modifiée
   ========================================================================== */

html.titan-ui body#mainbody .tabsAction {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px 12px !important;

	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 68px !important;

	margin: 12px 0 16px !important;
	padding: 10px 14px !important;

	box-sizing: border-box !important;
	overflow: visible !important;
	clear: both !important;
}

/* Dolibarr peut entourer certains boutons d'un conteneur intermédiaire. */
html.titan-ui body#mainbody .tabsAction > * {
	flex: 0 0 auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Tous les boutons d'action d'une facture restent lisibles et non compressés. */
html.titan-ui body#mainbody .tabsAction .butAction,
html.titan-ui body#mainbody .tabsAction .butActionDelete,
html.titan-ui body#mainbody .tabsAction .butActionRefused,
html.titan-ui body#mainbody .tabsAction .butActionNew,
html.titan-ui body#mainbody .tabsAction .butActionNewRefused {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 auto !important;
	width: auto !important;
	min-width: max-content !important;
	max-width: none !important;
	min-height: 42px !important;

	margin: 0 !important;
	padding: 0 18px !important;

	box-sizing: border-box !important;
	white-space: nowrap !important;
	line-height: 1.15 !important;
	text-align: center !important;
}

/* Tablette : on garde une barre propre, sans chevauchement. */
@media (max-width: 1100px) {
	html.titan-ui body#mainbody .tabsAction {
		gap: 8px !important;
		padding: 9px 10px !important;
	}

	html.titan-ui body#mainbody .tabsAction .butAction,
	html.titan-ui body#mainbody .tabsAction .butActionDelete,
	html.titan-ui body#mainbody .tabsAction .butActionRefused,
	html.titan-ui body#mainbody .tabsAction .butActionNew,
	html.titan-ui body#mainbody .tabsAction .butActionNewRefused {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* Téléphone : les actions peuvent passer proprement sur plusieurs lignes. */
@media (max-width: 700px) {
	html.titan-ui body#mainbody .tabsAction {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		padding: 8px !important;
	}

	html.titan-ui body#mainbody .tabsAction > * {
		min-width: 0 !important;
		width: 100% !important;
	}

	html.titan-ui body#mainbody .tabsAction .butAction,
	html.titan-ui body#mainbody .tabsAction .butActionDelete,
	html.titan-ui body#mainbody .tabsAction .butActionRefused,
	html.titan-ui body#mainbody .tabsAction .butActionNew,
	html.titan-ui body#mainbody .tabsAction .butActionNewRefused {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 42px !important;
		padding: 0 10px !important;
		white-space: normal !important;
	}
}