/********** Template CSS **********/
/* Refonte #160 — design tokens ported VERBATIM from the validated maquette ("DataShield Cockpit",
   artifact d4236452). The app must be visually identical to it, so these are the maquette's exact
   colours, radii and fonts. Legacy aliases (--primary/--secondary/--light/--dark/--ground/--muted)
   are kept pointing at the new tokens so the older rules further down still resolve. */
:root {
	--bg: #0B0C10;          --bg-2: #0E1017;
	--panel: #191C24;       --panel-2: #20242E;   --panel-3: #262B36;
	--line: #2C313D;        --line-2: #3A4150;
	--ink: #F4F6FB;         --ink-2: #C6CBD9;     --mut: #8A90A6;   --mut-2: #6C7293;
	--brand: #EB1616;       --brand-ink: #ff6a5e; --brand-bg: rgba(235, 22, 22, .12);
	--crit: #F0453A;        --crit-bg: rgba(240, 69, 58, .13);
	--high: #FF7A45;        --high-bg: rgba(255, 122, 69, .13);
	--med:  #F2C043;        --med-bg:  rgba(242, 192, 67, .13);
	--low:  #3DA5F5;        --low-bg:  rgba(61, 165, 245, .13);
	--ok:   #2FBF71;        --ok-bg:   rgba(47, 191, 113, .13);
	--radius: 14px;         --radius-sm: 10px;
	--shadow: 0 18px 48px -18px rgba(0, 0, 0, .75);
	--font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Legacy aliases -> new tokens (keep old rules working) */
	--primary: var(--brand);
	--secondary: var(--panel);
	--light: var(--mut);
	--dark: #000000;
	--ground: var(--bg);
	--muted: var(--mut);
	--brand-halo: rgba(235, 22, 22, .10);
	/* Severity aliases used by older rules */
	--sev-crit: var(--crit); --sev-crit-bg: var(--crit-bg);
	--sev-high: var(--high); --sev-high-bg: var(--high-bg);
	--sev-med:  var(--med);  --sev-med-bg:  var(--med-bg);
	--sev-low:  var(--low);  --sev-low-bg:  var(--low-bg);
	--sev-ok:   var(--ok);   --sev-ok-bg:   var(--ok-bg);
}

/* Body / type system — exactly the maquette: IBM Plex Sans 16px/1.6 on the blue-night ground,
   Archivo for headings, IBM Plex Mono for data (IP/CVE/domains). Overrides the families baked into
   bootstrap.min.css since style.css loads last. */
html {
	/* The top navbar is sticky (position: sticky, top: 0, ~50px tall) and the document root is the
	   scroller, so a plain #anchor jump lands the target heading BEHIND the bandeau. Offsetting the
	   root scroll padding by the navbar height (+ a small gap) makes every in-page anchor — and any
	   scrollIntoView — stop just below it. Global fix for all anchors (#160). */
	scroll-padding-top: 64px;
}

body {
	background-color: var(--bg);
	color: var(--ink-2);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-display);
	color: var(--ink);
	line-height: 1.12;
	text-wrap: balance;
}

code, kbd, samp, pre, .font-monospace, .mono {
	font-family: var(--font-mono);
	font-variant-ligatures: none;
}

/* Panels — the maquette's card look: deep-navy #191C24, hairline --line border, 14px radius. The
   app builds panels with Bootstrap's .bg-secondary(.rounded); retint + round them to match. */
.bg-secondary {
	background-color: var(--panel) !important;
}
.bg-secondary.rounded,
.bg-secondary.rounded-3 {
	border: 1px solid var(--line);
	border-radius: var(--radius) !important;
}
.bg-dark {
	background-color: var(--bg-2) !important;
}

/* Refonte #160 (lot D) — sidebar group headers separating Piloter / Explorer / Surfaces / Compte. */
.sidebar .navbar .navbar-nav .nav-group {
	padding: 16px 20px 5px;
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--light);
	opacity: 0.55;
	font-weight: 600;
}
.sidebar .navbar .navbar-nav .nav-group:first-of-type {
	padding-top: 4px;
}

* {
	scrollbar-width: thin; /* Pour les navigateurs basés sur WebKit */
	scrollbar-color: #EB1616 #303030; /* Couleur de la poignée et de la piste */
}

/* Style spécifique pour les navigateurs basés sur WebKit (Chrome, Safari, etc.) */
*::-webkit-scrollbar {
	width: 10px; /* Largeur de la poignée verticale */
	height: 10px; /* Largeur de la poignée horizontale */
}

*::-webkit-scrollbar-track {
	background-color: #303030; /* Couleur de la piste */
}

*::-webkit-scrollbar-thumb {
	background-color: #EB1616; /* Couleur de la poignée */
	border-radius: 5px; /* Bordure arrondie de la poignée */
}

.back-to-top {
	position: fixed;
	display: none;
	right: 45px;
	bottom: 45px;
	z-index: 99;
}

.table-container {
	max-height: 490px; /* Modifier la hauteur maximale souhaitée */
	overflow-y: auto;
	scrollbar-width: thin; /* Pour les navigateurs basés sur WebKit */
	scrollbar-color: #EB1616 #303030; /* Couleur de la poignée et de la piste */
}

/* Style spécifique pour les navigateurs basés sur WebKit (Chrome, Safari, etc.) */
.table-container::-webkit-scrollbar {
	width: 10px; /* Largeur de la poignée verticale */
	height: 10px; /* Largeur de la poignée horizontale */
}

.table-container::-webkit-scrollbar-track {
	background-color: #303030; /* Couleur de la piste */
}

.table-container::-webkit-scrollbar-thumb {
	background-color: #EB1616; /* Couleur de la poignée */
	border-radius: 5px; /* Bordure arrondie de la poignée */
}

.table-container-400 {
	max-height: 400px; /* Modifier la hauteur maximale souhaitée */
	overflow-y: auto;
	scrollbar-width: thin; /* Pour les navigateurs basés sur WebKit */
	scrollbar-color: #EB1616 #303030; /* Couleur de la poignée et de la piste */
}

/* Style spécifique pour les navigateurs basés sur WebKit (Chrome, Safari, etc.) */
.table-container-400::-webkit-scrollbar {
	width: 10px; /* Largeur de la poignée verticale */
	height: 10px; /* Largeur de la poignée horizontale */
}

.table-container-400::-webkit-scrollbar-track {
	background-color: #303030; /* Couleur de la piste */
}

.table-container-400::-webkit-scrollbar-thumb {
	background-color: #EB1616; /* Couleur de la poignée */
	border-radius: 5px; /* Bordure arrondie de la poignée */
}

.table-container-1000 {
	max-height: 1000px; /* Modifier la hauteur maximale souhaitée */
	overflow-y: auto;
	scrollbar-width: thin; /* Pour les navigateurs basés sur WebKit */
	scrollbar-color: #EB1616 #303030; /* Couleur de la poignée et de la piste */
}

/* Style spécifique pour les navigateurs basés sur WebKit (Chrome, Safari, etc.) */
.table-container-1000::-webkit-scrollbar {
	width: 10px; /* Largeur de la poignée verticale */
	height: 10px; /* Largeur de la poignée horizontale */
}

.table-container-1000::-webkit-scrollbar-track {
	background-color: #303030; /* Couleur de la piste */
}

.table-container-1000::-webkit-scrollbar-thumb {
	background-color: #EB1616; /* Couleur de la poignée */
	border-radius: 5px; /* Bordure arrondie de la poignée */
}

/*** Spinner ***/
#spinner {
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease-out, visibility 0s linear .5s;
	z-index: 99999;
}

#spinner.show {
	transition: opacity .5s ease-out, visibility 0s linear 0s;
	visibility: visible;
	opacity: 1;
}


/*** Button ***/
.btn {
	transition: .5s;
}

.btn-square {
	width: 38px;
	height: 38px;
}

.btn-sm-square {
	width: 32px;
	height: 32px;
}

.btn-lg-square {
	width: 48px;
	height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: normal;
	border-radius: 50px;
}


/*** Layout ***/
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 280px;
	height: 100vh;
	overflow-y: auto;
	background: var(--secondary);
	transition: 0.5s;
	z-index: 999;
}

/* Portfolio cards must shrink inside the Bootstrap grid and grow with their content. */
.tile-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow-wrap: anywhere;
}
.tile-body > *, .tile-title, .tile-facts { min-width: 0; }
.tile-title { overflow-wrap: anywhere; }
.tile-subtitle { overflow-wrap: anywhere; }

.content {
	margin-left: 280px;
	min-height: 100vh;
	/* Refonte #160 — blue-night ground with a soft red halo (top-right) and a faint
	   blue wash (top-left), anchored to the viewport so it stays as an ambient glow. */
	background-color: var(--bg);
	background-image:
		radial-gradient(1100px 500px at 82% -8%, rgba(235, 22, 22, .10), transparent 60%),
		radial-gradient(900px 480px at 6% 2%, rgba(61, 165, 245, .05), transparent 55%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	transition: 0.5s;
}

@media (min-width: 992px) {
	.sidebar {
		margin-left: 0;
	}

	.sidebar.open {
		margin-left: -280px;
	}

	.content {
		width: calc(100% - 280px);
	}

	.content.open {
		width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 991.98px) {
	.sidebar {
		margin-left: -280px;
	}

	.sidebar.open {
		margin-left: 0;
	}

	.content {
		width: 100%;
		margin-left: 0;
	}
}


/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link {
	padding: 7px 20px;
	color: var(--light);
	font-weight: 500;
	border-left: 3px solid var(--secondary);
	border-radius: 0 30px 30px 0;
	outline: none;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
	color: var(--primary);
	background: var(--dark);
	border-color: var(--primary);
}

.sidebar .navbar .navbar-nav .nav-link i {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dark);
	border-radius: 40px;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
	background: var(--secondary);
}

.sidebar .navbar .dropdown-toggle::after {
	position: absolute;
	top: 15px;
	right: 15px;
	border: none;
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
	transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
	padding-left: 25px;
	border-radius: 0 30px 30px 0;
	color: var(--light);
}

.sidebar .navbar .dropdown-item:hover,
.sidebar .navbar .dropdown-item.active {
	background: var(--dark);
}

.content .navbar .navbar-nav .nav-link {
	margin-left: 25px;
	padding: 12px 0;
	color: var(--light);
	outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
	color: var(--primary);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dark);
	border-radius: 40px;
}

.content .navbar .dropdown-item {
	color: var(--light);
}

.content .navbar .dropdown-item:hover,
.content .navbar .dropdown-item.active {
	background: var(--dark);
}

.content .navbar .dropdown-toggle::after {
	margin-left: 6px;
	vertical-align: middle;
	border: none;
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
	transform: rotate(-180deg);
}

@media (max-width: 575.98px) {
	.content .navbar .navbar-nav .nav-link {
		margin-left: 15px;
	}
}


/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
	top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
	border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
	font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
	padding: 10px;
	border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
	background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
	border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
	width: 0px;
	transition: 2s;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
	margin-top: 24px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.testimonial-carousel .owl-dot {
	position: relative;
	display: inline-block;
	margin: 0 5px;
	width: 15px;
	height: 15px;
	border: 5px solid var(--primary);
	border-radius: 15px;
	transition: .5s;
}

.testimonial-carousel .owl-dot.active {
	background: var(--dark);
	border-color: var(--primary);
}

/* The Modal (background) */
#customModal .modal {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
#customModal .modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}

/* The Close Button */
#customModal .close-button {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

#customModal .close-button:hover,
#customModal .close-button:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.tooltip-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin-right: 20px; /* espace entre les icônes */
}

.custom-tooltip {
	z-index: 2147483647;
	display: none;
	position: absolute;
	top: 120%; /* Positionnez au-dessus de l'icône */
	right: 0;
	left: auto;
	transform: translateX(0);
	padding: 10px;
	background-color: #333;
	color: #fff;
	border-radius: 5px;
	width: 300px; /* ou la taille que vous voulez */
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0px 0px 10px rgba(99,0,0,15); /* Ombre optionnelle */
}

.tooltip-container:hover .custom-tooltip {
	display: block;
}

.tooltip-left .custom-tooltip {
	right: 0;
	left: auto;
	transform: translateX(0);
}

.table-wrap-cell {
	max-width: 200px; /* Vous pouvez ajuster cette valeur selon vos besoins */
	word-wrap: break-word;
	white-space: normal;
}

.hostnames-container {
	height: 400px;
	overflow-y: auto;
	overflow-x: hidden;  /* Ajoutez cette ligne */
	scrollbar-width: thin;
	scrollbar-color: #EB1616 #303030;
}


.hostnames-container::-webkit-scrollbar {
	width: 10px;
}

.hostnames-container::-webkit-scrollbar-track {
	background-color: #303030;
}

.hostnames-container::-webkit-scrollbar-thumb {
	background-color: #EB1616;
	border-radius: 5px;
}

.notification-count {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: red;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	font-size: 0.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(10%, 10%);
}

@keyframes blink {
	0%   {opacity: 0.5;}
	50%  {opacity: 1;}
	100% {opacity: 0.5;}
}

.blink-text {
	animation: blink 1s infinite;
}

/* Company-state pills, shared by the admin pages and the reseller portfolio (UI is French) */
.pill-state-checks { background-color: var(--bs-warning) !important; color: var(--bs-primary); }
.pill-state-signing { background-color: var(--bs-warning) !important; color: var(--bs-success); }
.pill-state-online { background-color: var(--bs-success) !important; }
.pill-state-offline { background-color: var(--bs-secondary) !important; }
.pill-state-quotation { background-color: var(--bs-info) !important; }
.pill-state-order { background-color: var(--bs-info) !important; }
.pre { white-space: pre; }

/* ============================================================================
   Refonte #160 — ARTIFACT CONFORMANCE LAYER
   Port the maquette's component styling onto the Bootstrap classes the manager
   pages use, so the app is visually identical to the validated "DataShield
   Cockpit" artifact. style.css loads after bootstrap.min.css, so these win.
   ============================================================================ */

/* --- Severity pills (emitted by components.html ui.severity_pill) --- */
.sev-pill {
	font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
	padding: 3px 9px; border-radius: 100px; line-height: 1.5;
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sev-pill i, .sev-pill .fa { font-size: 12px; }
.sev-pill.sev-critical { background: var(--crit-bg); color: #ff8a80; }
.sev-pill.sev-high     { background: var(--high-bg); color: #ffa877; }
.sev-pill.sev-medium   { background: var(--med-bg);  color: #f0cd6e; }
.sev-pill.sev-low      { background: var(--low-bg);  color: #8ac6f7; }
.sev-pill.sev-ok       { background: var(--ok-bg);   color: #7ddda6; }
.sev-pill.sev-info     { background: rgba(138,144,166,.14); color: #aab0c4; }

/* --- Tables (maquette table.inv: mono uppercase headers, hairline rows, hover) --- */
.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--ink-2);
	--bs-table-border-color: var(--line);
	--bs-table-hover-bg: rgba(255,255,255,.02);
	--bs-table-hover-color: var(--ink);
	color: var(--ink-2);
	border-color: var(--line);
}
.table > thead > tr > th, .table thead th {
	font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--mut); font-weight: 500;
	background: transparent; border-bottom: 1px solid var(--line); padding: 12px 16px;
}
.table > tbody > tr > td, .table tbody td {
	color: var(--ink-2); border-bottom-color: var(--line);
	padding: 12px 16px; vertical-align: middle;
}
.table.table-sm > thead > tr > th, .table.table-sm > tbody > tr > td { padding: 8px 12px; }

/* --- Tabs (maquette .tab: flat, brand underline on the active one, mono count badge) --- */
.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.nav-tabs .nav-link {
	font-size: 13.5px; font-weight: 500; color: var(--mut);
	padding: 11px 15px; margin-bottom: -1px;
	background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink-2); border-color: transparent; border-bottom-color: var(--line-2); isolation: isolate; }
.nav-tabs .nav-link.active {
	color: var(--ink); background: transparent;
	border: 0; border-bottom: 2px solid var(--brand);
}
.nav-tabs .nav-link .badge {
	font-family: var(--font-mono); font-weight: 600; font-size: 11px;
	background: var(--panel-2) !important; color: var(--mut) !important;
	border-radius: 100px; padding: 1px 7px;
}
.nav-tabs .nav-link.active .badge { background: var(--crit-bg) !important; color: #ff8a80 !important; }

/* --- Filter chips (Risques / Inventaire) = maquette .fchip --- */
.risk-chip, .inv-chip {
	font-size: 13px !important; font-weight: 500 !important;
	color: var(--ink-2) !important; background: var(--panel-2) !important;
	border: 1px solid var(--line-2) !important; border-radius: 100px !important;
	padding: 6px 13px !important;
}
.risk-chip:hover, .inv-chip:hover { background: var(--panel-3) !important; color: var(--ink) !important; }
.risk-chip.active, .inv-chip.active {
	background: var(--brand-bg) !important; border-color: rgba(235,22,22,.5) !important; color: #ffb3ab !important;
}
.risk-chip .badge, .inv-chip .badge {
	font-family: var(--font-mono); font-size: 11px;
	background: var(--bg) !important; color: var(--mut) !important; border-radius: 100px; padding: 0 7px;
}

/* --- Buttons (maquette radii + brand / panel styling; leave the .btn-*-square utilities alone) --- */
.btn { transition: background .14s, border-color .14s, color .14s; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; border-radius: 8px; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: #c81111; border-color: #c81111; color: #fff; }
.btn-outline-light { color: var(--ink-2); border-color: var(--line-2); background: var(--panel-2); border-radius: 8px; font-weight: 600; }
.btn-outline-light:hover, .btn-outline-light:focus { color: var(--ink); background: var(--panel-3); border-color: var(--line-2); }
.btn-outline-danger { color: #ff8a80; border-color: rgba(240,69,58,.4); border-radius: 8px; font-weight: 600; }
.btn-outline-danger:hover { background: var(--crit-bg); border-color: var(--crit); color: #ff8a80; }
.btn-link { color: var(--brand-ink); }
.btn-sm { border-radius: 8px; font-size: 12.5px; }

/* --- Dark form controls (the whole app is dark; match the maquette's inputs) --- */
.form-control, .form-select {
	background-color: var(--bg-2); border-color: var(--line-2); color: var(--ink); border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
	background-color: var(--bg-2); border-color: var(--brand); color: var(--ink);
	box-shadow: 0 0 0 .2rem rgba(235,22,22,.15);
}
.form-control::placeholder { color: var(--mut-2); }
.form-check-input { background-color: var(--bg-2); border-color: var(--line-2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(235,22,22,.15); }

/* --- Sidebar: the maquette's FLAT nav (no red-circle icons), active = red inset bar --- */
.sidebar { background: var(--panel); }
.sidebar .navbar .navbar-nav .nav-link {
	padding: 9px 16px; margin: 1px 10px; color: var(--ink-2); font-weight: 500; font-size: 14.5px;
	border-left: 0; border-radius: var(--radius-sm);
}
.sidebar .navbar .navbar-nav .nav-link i {
	width: auto; height: auto; background: transparent; border-radius: 0;
	color: var(--mut); font-size: 17px; margin-right: 11px;
}
.sidebar .navbar .navbar-nav .nav-link:hover {
	color: var(--ink); background: rgba(255,255,255,.03); border-color: transparent;
}
.sidebar .navbar .navbar-nav .nav-link:hover i { background: transparent; color: var(--ink-2); }
.sidebar .navbar .navbar-nav .nav-link.active {
	color: var(--brand); background: #000; border-color: transparent; box-shadow: inset 2px 0 0 var(--brand);
}
.sidebar .navbar .navbar-nav .nav-link.active i { background: transparent; color: var(--brand); }
.sidebar .navbar .navbar-nav .nav-group {
	font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--mut-2); opacity: 1; font-weight: 500;
	padding: 14px 16px 5px;
}

/* --- Page-header panel: give the description the maquette's muted tone --- */
.dropdown-menu { background-color: var(--panel); border: 1px solid var(--line); }
.dropdown-item { color: var(--ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--panel-2); color: var(--ink); }

/* --- Bootstrap semantic tokens remapped to the maquette palette (so .text-body, borders and
       muted text match the artifact and stay legible on the dark ground) --- */
body {
	--bs-body-color: var(--ink-2);
	--bs-body-bg: var(--bg);
	--bs-emphasis-color: var(--ink);
	--bs-border-color: var(--line);
	--bs-secondary-color: var(--mut);
}
.text-body { color: var(--ink-2) !important; }
.text-white-50 { color: var(--mut) !important; }
.text-muted { color: var(--mut-2) !important; }
.text-danger  { color: #ff8a80 !important; }
.text-warning { color: #f0cd6e !important; }
.text-success { color: #7ddda6 !important; }
.text-info    { color: #8ac6f7 !important; }
.text-primary { color: var(--brand-ink) !important; }
.border-danger  { border-color: var(--crit) !important; }
.border-warning { border-color: var(--med) !important; }
.border-success { border-color: var(--ok) !important; }
.border-info    { border-color: var(--low) !important; }
.border-secondary { border-color: var(--line) !important; }
hr { border-color: var(--line); opacity: 1; }

/* Solid semantic backgrounds used as small tags (ownership badges etc.) — keep them readable
   but on the maquette hues rather than Bootstrap's defaults. */
.badge.bg-success { background-color: var(--ok) !important; color: #06170e !important; }
.badge.bg-warning { background-color: var(--med) !important; color: #221a02 !important; }
.badge.bg-info    { background-color: var(--low) !important; color: #041423 !important; }
.badge.bg-primary { background-color: var(--brand) !important; }
.badge.bg-dark    { background-color: var(--panel-2) !important; }
.alert-success { background-color: var(--ok-bg); border-color: rgba(47,191,113,.4); color: #7ddda6; }

/* Keep the circular icon-button utilities circular (my .btn-sm radius above would flatten them). */
.btn-square, .btn-sm-square, .btn-lg-square { border-radius: 50px !important; }

/* ============================================================================
   Refonte #160 — ARTIFACT NATIVE COMPONENTS
   The maquette ("DataShield Cockpit", artifact d4236452) builds its screens from
   its OWN component classes, NOT from Bootstrap. To be pixel-identical the manager
   pages emit that same DOM; these are those components ported VERBATIM (icons
   retargeted from the maquette's inline .ic SVGs to the app's Font Awesome <i>).
   Names checked collision-free against the templates (PDF templates carry their
   own inline CSS and never load this file).
   ============================================================================ */

/* --- page-header block: title + description + posture/score on the right --- */
.ph-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ph-head h3, .ph-head h4 { font-size: 21px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 11px; margin: 0; }
.ph-head h3 > i, .ph-head h4 > i { color: var(--brand-ink); font-size: 20px; }
.ph-head p { font-size: 13.5px; color: var(--mut); margin: 5px 0 0; max-width: 620px; }
.ph-head .score { margin-left: auto; text-align: right; flex: none; }
.ph-head .score .n { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--ok); line-height: 1; font-variant-numeric: tabular-nums; }
.ph-head .score .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }

/* --- filter bar (Risques / Inventaire) — maquette .filters / .fchip --- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fchip { font-size: 13px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 13px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; transition: background .14s, border-color .14s, color .14s; }
.fchip > i { font-size: 14px; color: var(--mut); }
.fchip .cnt { font-family: var(--font-mono); font-size: 11px; color: var(--mut); background: var(--bg); border-radius: 100px; padding: 0 7px; margin-left: 1px; }
.fchip:hover { background: var(--panel-3); color: var(--ink); }
.fchip.on { background: var(--brand-bg); border-color: rgba(235, 22, 22, .5); color: #ffb3ab; }
.fchip.on > i { color: var(--brand-ink); }
.fchip.on .cnt { color: #ffb3ab; }
.fsearch { margin-left: auto; }
.fsearch input, input.fsearch { max-width: 260px; }

/* --- findings list (Risques worklist, 360 Synthèse) — maquette .flist / .finding --- */
.flist { display: flex; flex-direction: column; gap: 10px; }
.finding { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--sev, var(--line-2)); border-radius: 12px; padding: 14px 16px; transition: border-color .15s, transform .15s; }
.finding:hover { transform: translateX(2px); border-color: var(--line-2); }
.finding.sev-critical { --sev: var(--crit); } .finding.sev-high { --sev: var(--high); }
.finding.sev-medium { --sev: var(--med); } .finding.sev-low { --sev: var(--low); }
.finding.sev-info { --sev: var(--mut-2); } .finding.sev-ok { --sev: var(--ok); }
.finding .fk { display: flex; align-items: center; gap: 12px; min-width: 0; }
.finding .fbody { min-width: 0; }
.finding .ftitle { color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 5px; line-height: 1.3; }
.finding .fmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; color: var(--mut); }
.finding .fmeta .asset { font-family: var(--font-mono); color: var(--ink-2); font-size: 12px; }
.finding .fmeta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.finding .cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); display: inline-flex; align-items: center; gap: 6px; }
.finding .cat > i { font-size: 13px; color: var(--mut); }
.finding.done { opacity: .55; }
.finding.done .ftitle { text-decoration: line-through; text-decoration-color: var(--mut-2); }
.kev { background: var(--crit-bg); color: #ff8a80; border: 1px solid rgba(240, 69, 58, .35); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); letter-spacing: .03em; }
.new-dot { font-size: 10.5px; font-weight: 700; color: var(--brand-ink); font-family: var(--font-mono); letter-spacing: .05em; }
.chk { width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--line-2); flex: none; }

/* --- inline action cluster — maquette .actions / .act --- */
.actions { display: flex; align-items: center; gap: 6px; flex: none; }
.act { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 11px; white-space: nowrap; text-decoration: none; transition: background .14s, border-color .14s, color .14s; }
.act > i { font-size: 14px; color: var(--mut); }
.act:hover { border-color: var(--line-2); background: var(--panel-3); color: var(--ink-2); }
.act.ack:hover { color: #8ee6b4; } .act.ack:hover > i { color: var(--ok); }
.act.tk:hover { color: var(--brand-ink); } .act.tk:hover > i { color: var(--brand-ink); }
.act.co:hover { color: #8ac6f7; } .act.co:hover > i { color: var(--low); }
.act.icononly { padding: 6px 9px; }
.act .cbadge { font-family: var(--font-mono); font-size: 10px; color: var(--low); background: var(--low-bg); border-radius: 100px; padding: 0 6px; }

/* --- bulk-action bar — maquette .bulkbar --- */
.bulkbar { display: flex; align-items: center; gap: 14px; background: var(--brand-bg); border: 1px solid rgba(235, 22, 22, .4); border-radius: 10px; padding: 10px 16px; margin-bottom: 14px; font-size: 13.5px; color: #ffb3ab; flex-wrap: wrap; }
.bulkbar b { color: #fff; font-weight: 600; }
.bulkbar .grow { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm.primary { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- inventory / role tables — maquette table.inv --- */
.tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.inv { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13.5px; margin: 0; }
table.inv th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); text-align: left; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-weight: 500; }
table.inv td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
table.inv tr:last-child td { border-bottom: 0; }
table.inv tbody tr:hover td { background: rgba(255, 255, 255, .015); }
table.inv .tval { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.tag-type { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--mut); white-space: nowrap; display: inline-block; }
.tag-type.dom { color: #8ac6f7; border-color: rgba(61, 165, 245, .3); }
.tag-type.ip { color: #f0cd6e; border-color: rgba(242, 192, 67, .3); }
.tag-type.cloud { color: #c79fe6; border-color: rgba(160, 120, 240, .35); }
.tag-type.cert { color: #8ee6b4; border-color: rgba(47, 191, 113, .3); }
.tag-type.kw { color: var(--mut); }
.own { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.own .d { width: 7px; height: 7px; border-radius: 50%; }
.own.sup .d { background: var(--ok); } .own.sup { color: #8ee6b4; }
.own.tosup .d { background: var(--med); } .own.tosup { color: #f0cd6e; }
.own.third .d { background: var(--mut); } .own.third { color: var(--mut); }
.prov { font-size: 12px; color: var(--mut); }
.tcta { font-size: 12px; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; line-height: 1.5; }
.tcta:hover { color: #ff8a80; }
/* Muted "dismiss" variant so "écarter" mirrors the "+ ajouter aux actifs" CTA shape (#160). */
.tcta.tcta-mut { color: var(--mut); }
.tcta.tcta-mut:hover { color: var(--ink-2); }

/* --- 360 body — maquette .f360 / .panel / .kv / .subd / .check-line --- */
.f360 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.panel h4 { font-size: 12.5px; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; font-weight: 500; }
.panel h4 > i { color: var(--brand-ink); font-size: 15px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--mut); }
.kv .v { color: var(--ink-2); text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.subd { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.subd:last-child { border-bottom: 0; }
.subd .nm { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.subd .via { font-size: 11.5px; color: var(--mut); margin-left: auto; text-align: right; white-space: nowrap; }
.dns-badge { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--mut); white-space: nowrap; }
.check-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.check-line .st { margin-left: auto; }
.st-ok { color: var(--ok); } .st-warn { color: var(--med); } .st-bad { color: var(--crit); }

/* --- 360 tabs — maquette .tabs / .tab (bare-class, only emitted by the 360) --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs .tab { font-size: 13.5px; font-weight: 500; color: var(--mut); padding: 11px 15px; white-space: nowrap; border: 0; background: transparent; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tabs .tab > i { font-size: 15px; }
.tabs .tab.on { color: var(--ink); border-bottom-color: var(--brand); }
.tabs .tab .n { font-family: var(--font-mono); font-size: 11px; background: var(--panel-2); border-radius: 100px; padding: 0 7px; color: var(--mut); }
.tabs .tab.on .n { color: #ff8a80; background: var(--crit-bg); }

/* --- comment thread — maquette .thread / .cmt / .cmt-input --- */
.thread { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cmt { display: flex; gap: 11px; padding: 8px 0; }
.cmt .av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; font-family: var(--font-display); color: #fff; }
.cmt .av.c1 { background: linear-gradient(135deg, #3DA5F5, #1c5a8a); }
.cmt .av.c2 { background: linear-gradient(135deg, var(--brand), #7a0d0d); }
.cmt .who { font-size: 12px; color: var(--ink); font-weight: 600; }
.cmt .when { font-size: 11px; color: var(--mut-2); font-family: var(--font-mono); }
.cmt .txt { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* --- Accordion (Marque & typosquatting per-domain) — the Bootstrap default clashed with the DA:
       the header kept all four corners rounded and the body sat below as a detached rectangle, and
       the collapse chevron was a dark glyph invisible on the dark panel. Connect header+body and use
       a light chevron. Scoped to the typosquatting accordion so nothing else is affected (#160). --- */
#accordionAssets .accordion-item { background: transparent; border: 0; }
#accordionAssets .accordion-button { border: 1px solid var(--line); box-shadow: none; }
#accordionAssets .accordion-button:not(.collapsed) {
	border-radius: var(--radius) var(--radius) 0 0 !important; border-bottom: 0;
	color: var(--ink); background: var(--panel);
}
#accordionAssets .accordion-button:focus { box-shadow: none; border-color: var(--line-2); }
#accordionAssets .accordion-button::after {
	/* recolour the default chevron to a light glyph (it ships as a near-black SVG) */
	filter: invert(85%) sepia(6%) saturate(300%) hue-rotate(190deg) brightness(95%);
}
#accordionAssets .accordion-collapse {
	border: 1px solid var(--line); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
}

/* --- responsive: stack the 360 grid and the finding action cluster on narrow content --- */
@media (max-width: 991.98px) {
	.f360 { grid-template-columns: 1fr; }
	.finding { grid-template-columns: auto 1fr; }
	.finding .actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; padding-left: 29px; }
}
@media (prefers-reduced-motion: reduce) { .finding { transition: none; } }