:root {
	--c360-green: #557811;
	--c360-green-dark: #3f5d0c;
	--c360-lime: #9ac81b;
	--c360-charcoal: #59595d;
	--c360-light: #f6f7f3;
	--c360-table-zebra: #edf2e4;
	--c360-header-light: #e0e0e0;
}

/*
 * Le composeur CRM est présent dans le gabarit commun. Les suggestions restent
 * au-dessus du contenu de la modale et deviennent défilables afin qu'une longue
 * liste de contacts ne déplace ni le sujet ni les boutons d'envoi.
 */
.c360-crm-email-search-results {
	max-height: 16rem;
	overflow-y: auto;
	position: absolute;
	left: calc(var(--bs-gutter-x, 1.5rem) * .5);
	right: calc(var(--bs-gutter-x, 1.5rem) * .5);
	z-index: 1080;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

.c360-crm-email-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.c360-crm-email-chip {
	display: inline-flex;
	align-items: center;
	background-color: var(--c360-green);
	color: #fff;
	font-weight: 400;
	max-width: 100%;
}

.c360-crm-email-chip > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.c360-crm-email-chip .btn-close {
	font-size: .55rem;
}

body {
	background: #fff;
	color: #242424;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main { flex: 1 0 auto; min-width: 0; }

.c360-navbar {
	background: var(--c360-header-light);
}

.c360-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--c360-lime);
	color: #fff;
}

.c360-logo {
	display: block;
	width: auto;
	height: 2.75rem;
}

.c360-company-heading {
	padding-left: .75rem;
	border-left: 1px solid #aaa;
	color: #343434;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
}

/*
 * Les options principales utilisent un pictogramme compact sur ordinateur.
 * Le texte demeure présent dans le HTML pour les lecteurs d'écran et redevient
 * visible dans le menu mobile, où un tooltip seul serait moins pratique.
 */
.c360-top-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.c360-top-nav-link > .bi {
	font-size: 1.15rem;
	line-height: 1;
}

@media (min-width: 992px) {
	.c360-top-nav-link {
		justify-content: center;
		width: 2.35rem;
		height: 2.35rem;
		padding: 0 !important;
		border-radius: 50%;
	}

	.c360-top-nav-link:hover,
	.c360-top-nav-link:focus {
		background: rgba(85, 120, 17, 0.12);
		color: var(--c360-green-dark);
	}

	.c360-top-nav-link .c360-nav-label {
		display: none;
	}
}

.print-only {
	display: none;
}

.btn-primary {
	--bs-btn-bg: var(--c360-green);
	--bs-btn-border-color: var(--c360-green);
	--bs-btn-hover-bg: var(--c360-green-dark);
	--bs-btn-hover-border-color: var(--c360-green-dark);
	--bs-btn-focus-shadow-rgb: 85, 120, 17;
	--bs-btn-active-bg: var(--c360-green-dark);
	--bs-btn-active-border-color: var(--c360-green-dark);
	--bs-btn-disabled-bg: var(--c360-green);
	--bs-btn-disabled-border-color: var(--c360-green);
}

.nav-pills .nav-link.active {
	background-color: var(--c360-green);
}

.card-header-c360 {
	background: var(--c360-header-light);
	color: #242424;
}

.table-zebra-1-row tbody tr:nth-child(odd) > * {
	background-color: var(--c360-table-zebra) !important;
}

/*
 * Certaines listes utilisent plusieurs rangées pour une même fiche. Les
 * sélecteurs génériques permettent à ces rangées de reprendre exactement le
 * même vert très pâle que le zebra commun du portail.
 *
 * Utilisé par Contracts.php et par l'historique dans Newsletters.php.
 */
.contract-list-table tbody tr.contract-list-record-striped > *,
.grouped-zebra-table tbody tr.grouped-zebra-record-striped > * {
	background-color: var(--c360-table-zebra) !important;
}

.contract-list-table tbody tr.contract-list-record-plain > *,
.grouped-zebra-table tbody tr.grouped-zebra-record-plain > * {
	background-color: var(--bs-body-bg, #fff) !important;
}

.contract-list-table tbody tr.contract-list-has-summary > * {
	border-bottom: 0;
	padding-bottom: .1rem;
}

.contract-list-table tbody tr.contract-list-summary-row > * {
	border-top: 0;
	padding-top: .1rem;
	padding-bottom: .45rem;
}

/*
 * Le portrait CRM garde une hauteur stable pour que Chart.js ne redimensionne
 * pas les cartes pendant le chargement. La chronologie utilise une ligne et des
 * repères discrets qui demeurent lisibles sur téléphone et à l'impression.
 */
.crm-page .card-header h2 {
	font-size: 14px !important;
}

.crm-page .card-body,
.crm-page .accordion-body {
	font-size: 13px;
}

.crm-page .card-body .small,
.crm-page .accordion-body .small {
	font-size: 12px;
}

.crm-page .card-body .h3 {
	font-size: 20px;
}

.crm-page .card-body .h5 {
	font-size: 15px;
}

.crm-page .crm-data-table {
	font-size: 13px;
}

.crm-page .crm-data-table th {
	font-weight: 400;
}

.crm-page .accordion-button,
.crm-page .nav-pills .nav-link {
	font-size: 13px;
}

.crm-chart {
	min-height: 285px;
	position: relative;
}

.crm-timeline {
	position: relative;
}

.crm-timeline::before {
	background: #d8ddcf;
	bottom: 0;
	content: "";
	left: 17px;
	position: absolute;
	top: 0;
	width: 2px;
}

.crm-timeline-item {
	display: flex;
	gap: .85rem;
	padding: 0 0 1.25rem;
	position: relative;
}

.crm-timeline-icon {
	align-items: center;
	background: var(--bs-body-bg, #fff);
	border: 2px solid #718a3e;
	border-radius: 50%;
	color: #557814;
	display: flex;
	flex: 0 0 36px;
	height: 36px;
	justify-content: center;
	z-index: 1;
}

.crm-timeline-content {
	background: #f8f9f6;
	border: 1px solid #e1e5da;
	border-radius: .45rem;
	min-width: 0;
	padding: .7rem .85rem;
	width: 100%;
}

.crm-timeline-body {
	white-space: normal;
}

.crm-probability-input {
	max-width: 78px;
}

/*
 * Résultats de la recherche progressive des clients à ajouter au CRM. La liste
 * se superpose au contenu sans agrandir la carte et demeure assez large sur un
 * téléphone pour présenter ensemble le code, le nom et la ville.
 */
.crm-customer-search-results {
	position: absolute;
	z-index: 1060;
	top: 100%;
	right: .5rem;
	left: .5rem;
	max-height: 20rem;
	overflow-y: auto;
	box-shadow: 0 .5rem 1rem rgb(0 0 0 / 16%);
}

.crm-customer-search-results .list-group-item {
	white-space: normal;
}

/*
 * Calendrier mensuel des tâches CRM adapté de RéseauVoixLa.
 * La grille demeure lisible sur ordinateur; sur un petit écran, son conteneur
 * défile horizontalement plutôt que de couper le nom du client ou de la tâche.
 */
.crm-task-calendar {
	display: grid;
	grid-template-columns: repeat(7, minmax(9rem, 1fr));
	min-width: 63rem;
	border-top: 1px solid #dee2e6;
	border-left: 1px solid #dee2e6;
}

.crm-task-calendar-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.crm-task-calendar-heading,
.crm-task-calendar-day {
	border-right: 1px solid #dee2e6;
	border-bottom: 1px solid #dee2e6;
}

.crm-task-calendar-heading {
	padding: .45rem;
	background: #f1f1f1;
	font-size: .76rem;
	text-align: center;
}

.crm-task-calendar-day {
	min-height: 8rem;
	padding: .35rem;
	background: #fff;
}

.crm-task-calendar-day.is-outside {
	background: #f8f9fa;
	color: #adb5bd;
}

.crm-task-calendar-day.is-today {
	box-shadow: inset 0 0 0 2px #0d6efd;
}

.crm-task-calendar-date {
	margin-bottom: .25rem;
	font-size: .75rem;
	font-weight: 600;
}

.crm-calendar-task {
	display: block;
	margin-bottom: .3rem;
	padding: .28rem .38rem;
	border: 1px solid #6c757d;
	border-left-width: 4px;
	border-radius: .2rem;
	color: inherit;
	font-size: .72rem;
	line-height: 1.25;
	text-decoration: none;
	white-space: normal;
}

.crm-calendar-task:hover,
.crm-calendar-task:focus {
	color: inherit;
	filter: brightness(.96);
}

.crm-calendar-task small {
	display: block;
	margin-top: .15rem;
	color: inherit;
}

.crm-priority-low {
	border-color: #198754;
	background: #d1e7dd;
	color: #0f5132;
}

.crm-priority-normal {
	border-color: #d6a500;
	background: #fff3cd;
	color: #664d03;
}

.crm-priority-high {
	border-color: #fd7e14;
	background: #ffe5d0;
	color: #7a3500;
}

.crm-priority-urgent {
	border-color: #dc3545;
	background: #f8d7da;
	color: #842029;
}

.crm-priority-badge {
	border: 1px solid;
	font-weight: 500;
}

.crm-calendar-legend {
	display: inline-block;
	width: .85rem;
	height: .85rem;
	border: 1px solid;
	border-radius: .15rem;
	vertical-align: -.08rem;
}

.text-orange { color: #d97706; }

.crm-timeline-item:target .crm-timeline-content {
	box-shadow: 0 0 0 2px rgba(85, 120, 20, .55);
	background: #f6f9ef;
}

#CrmTaskEdit {
	scroll-margin-top: 5.5rem;
}

/*
 * Le contour du formulaire de modification reprend la priorité de la tâche.
 * L'attribut est également actualisé par Crm.js lorsque l'usager change le
 * sélecteur, avant même l'enregistrement de la modification.
 */
.crm-task-edit-card {
	border-style: solid;
	border-width: 2px;
}

.crm-task-edit-card[data-priority="LOW"] {
	border-color: #198754;
}

.crm-task-edit-card[data-priority="NORMAL"] {
	border-color: #d6a500;
}

.crm-task-edit-card[data-priority="HIGH"] {
	border-color: #fd7e14;
}

.crm-task-edit-card[data-priority="URGENT"] {
	border-color: #dc3545;
}

@media print {
	.crm-timeline::before {
		background: #999;
	}
	.crm-timeline-content {
		background: #fff;
		border-color: #bbb;
	}
}

.text-exs {
	font-size: .82rem;
}

.action-link {
	border: 0;
	background: transparent;
	color: var(--c360-green-dark);
	padding: .15rem .35rem;
}

.copy-message {
	display: inline-block;
	margin-left: 0.4rem;
	color: #3f5d0c;
	font-size: 0.78rem;
	font-weight: 600;
	vertical-align: middle;
}

#GlobalProcessingOverlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	background: rgba(25, 25, 25, 0.72);
}

#GlobalProcessingOverlay[aria-hidden="false"] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.global-processing-content {
	width: min(520px, calc(100vw - 2rem));
	min-width: 280px;
	padding: 1.5rem 2rem;
	border-radius: 0.5rem;
	background: rgba(45, 45, 45, 0.96);
	color: #fff;
	text-align: center;
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.3);
}

#GlobalProcessingProgress .progress {
	height: 1.25rem;
	background-color: rgba(255, 255, 255, 0.2);
}

#GlobalProcessingProgressBar {
	font-size: 0.72rem;
	font-weight: 600;
}

.password-toggle {
	min-width: 2.5rem;
}

.password-rules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .2rem .75rem;
}

#footer {
	background: var(--c360-header-light);
	padding: 2.75rem 0;
	font-size: .86rem;
}

#footer a { color: #6c757d; text-decoration: none; }
#footer a:hover { color: var(--c360-green-dark); text-decoration: underline; }
#footer li + li { margin-top: .35rem; }

#copyright {
	background: #333;
	color: #ccc;
	padding: 1.15rem 0;
	font-size: .738rem;
}

#copyright p { margin: 0; }

/*
 * Avis commun sur les témoins essentiels.
 *
 * Le panneau reste compact, accessible sur téléphone et visuellement distinct
 * d'une fenêtre de consentement facultatif. Il ne bloque ni la connexion ni la
 * consultation de la politique de confidentialité.
 */
.c360-cookie-notice {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	z-index: 1040;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.c360-cookie-notice.is-dismissing {
	opacity: 0;
	transform: translateY(0.75rem);
}

.c360-cookie-notice-content {
	display: flex;
	width: min(960px, 100%);
	margin: 0 auto;
	padding: 1rem 1.15rem;
	align-items: center;
	gap: 1rem;
	border: 1px solid #cfd5c8;
	border-radius: 0.65rem;
	background: #fff;
	box-shadow: 0 0.75rem 2rem rgb(25 35 15 / 20%);
}

.c360-cookie-notice-icon {
	flex: 0 0 auto;
	color: var(--c360-green-dark);
	font-size: 1.6rem;
	line-height: 1;
}

.c360-cookie-notice-copy {
	flex: 1 1 auto;
	font-size: 0.86rem;
	line-height: 1.45;
}

.c360-cookie-notice-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

/*
 * L'inventaire des témoins doit rester lisible sur téléphone. Cette exception
 * autorise les explications à revenir à la ligne, contrairement aux tableaux
 * de données XML où chaque valeur demeure volontairement sur un seul rang.
 */
.table-responsive > table.table.privacy-cookie-table {
	width: 100%;
	min-width: 720px;
}

.table-responsive > table.table.privacy-cookie-table th,
.table-responsive > table.table.privacy-cookie-table td {
	vertical-align: top;
	white-space: normal;
}

@media (max-width: 767.98px) {
	.c360-cookie-notice {
		right: 0.65rem;
		bottom: 0.65rem;
		left: 0.65rem;
	}

	.c360-cookie-notice-content {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 0.65rem;
		padding: 0.9rem;
	}

	.c360-cookie-notice-copy {
		flex-basis: calc(100% - 2.4rem);
	}

	.c360-cookie-notice-actions {
		width: 100%;
		justify-content: flex-end;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c360-cookie-notice {
		transition: none;
	}
}

.list-pagination {
	margin: 1rem 0 2rem;
}

.list-pagination .btn {
	min-width: 2.25rem;
}

.report-results-pagination .list-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: .75rem;
	margin: .25rem 0;
}

.report-results-pagination .list-pagination p {
	margin: 0 !important;
}

.error-illustration {
	display: inline-flex;
	width: 5.5rem;
	height: 5.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c360-light);
	color: var(--c360-green-dark);
	font-size: 2.6rem;
}

.menu-tile-link { display: block; color: inherit; text-decoration: none; }
.menu-tile-link:hover { color: var(--c360-green-dark); }
.menu-tile-icon {
	font-size: 2.5rem;
	padding: 1rem;
	border: 1px solid var(--bs-success-border-subtle);
	border-radius: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.5rem;
	min-height: 5.5rem;
}
.data-value {
	/*
	 * nl2br() conserve déjà les véritables retours de ligne provenant du XML.
	 * Le mode normal empêche les tabulations et retours de ligne d'indentation
	 * du gabarit PHP de créer un espace vide avant la valeur affichée.
	 */
	white-space: normal;
	overflow-wrap: anywhere;
}
.data-detail-label { width: 18rem; max-width: 35%; }

/*
 * Norme commune des tableaux adaptatifs du portail.
 *
 * Le conteneur Bootstrap table-responsive fournit le défilement horizontal.
 * Ces règles conservent ensuite chaque valeur sur une seule ligne, même
 * lorsqu'une cellule utilise la classe générale data-value. Une description ou
 * un identifiant long agrandit donc le tableau au lieu de devenir illisible sur
 * plusieurs lignes. Cette règle s'applique aussi aux futurs tableaux placés
 * dans un conteneur table-responsive.
 */
.table-responsive > table.table {
	width: auto;
	min-width: 100%;
}

.table-responsive > table.table th,
.table-responsive > table.table td,
.table-responsive > table.table .data-value {
	/*
	 * Une valeur reste sur un seul rang même si elle contient plusieurs mots.
	 * Les balises <br> ajoutées pour un véritable retour de ligne dans la donnée
	 * continuent toutefois de fonctionner avec white-space: nowrap.
	 */
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/*
 * Les tableaux de consultation ont besoin d'une largeur minimale par colonne
 * pour ne pas empiler chaque mot sur une ligne différente. Lorsque l'écran est
 * plus étroit, le parent responsive affiche simplement une barre de défilement.
 */
.c360-responsive-data-table th,
.c360-responsive-data-table td {
	min-width: 7rem;
}

.c360-responsive-data-table .noPrint {
	min-width: 4rem;
}

.c360-responsive-data-table [data-field="Description"],
.c360-responsive-data-table [data-field="DescriptionFr"],
.c360-responsive-data-table [data-field="DescriptionEn"],
.c360-responsive-data-table [data-field="DescriptionProduit"] {
	min-width: 16rem;
}

/*
 * Les tableaux de Crm.php et CrmClient.php contiennent souvent plusieurs
 * renseignements dans une même cellule. L'alignement est appliqué directement
 * aux cellules, car la classe Bootstrap placée sur la table ne suffit pas à
 * neutraliser un alignement vertical provenant d'un autre style.
 */
.crm-data-table > :not(caption) > * > * {
	vertical-align: top !important;
}

/* Toutes les valeurs des fiches XML brutes commencent au haut de leur cellule. */
.xml-data-detail .table > :not(caption) > * > * {
	vertical-align: top !important;
}

/*
 * Reproduit visuellement l'imbrication XML LigneProduit > NosSerie > Serie
 * dans DataDetail.php, DataChild.php et ClientPortal.php. Le retrait et la
 * bordure distinguent les numéros de série sans les détacher de leur produit
 * parent.
 */
.data-nested-serial-row > td {
	padding: 0 .75rem .75rem 2rem;
	background: var(--bs-tertiary-bg) !important;
}

.data-nested-serials {
	padding: .55rem .7rem;
	border-left: .25rem solid var(--c360-green);
	background: var(--bs-body-bg);
}

.data-nested-serials-title {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: .4rem;
	font-weight: 600;
}

.data-summary-table {
	width: auto;
	min-width: 100%;
}

.data-summary-table th,
.data-summary-table td {
	min-width: 7rem;
	word-break: normal;
	overflow-wrap: normal;
}

.data-summary-table .data-value {
	white-space: normal;
}

.data-summary-table .noPrint {
	min-width: 4rem;
}

.data-summary-table [data-field="Nom"],
.data-summary-table [data-field="Nom2"],
.data-summary-table [data-field="Adresse"],
.data-summary-table [data-field="Ville"] {
	min-width: 12rem;
	white-space: nowrap;
}

.data-summary-table [data-field="CP"],
.data-summary-table [data-field="CPCan"],
.data-summary-table [data-field="CPInt"] {
	min-width: 7rem;
	white-space: nowrap;
}

/* Les codes de produits fournisseurs demeurent sur une seule ligne. */
.supplier-order-products-table [data-field="Code"],
.supplier-order-products-table [data-field="CodeFourni"] {
	white-space: nowrap;
}

.data-image-link {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: .65rem;
	padding: .75rem;
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.data-image-link:hover {
	border-color: var(--c360-green);
	color: var(--c360-green-dark);
}

.data-image-link img {
	width: 100%;
	height: 220px;
	object-fit: contain;
	background: #fff;
}

.data-image-link small {
	overflow-wrap: anywhere;
}

.management-kpi {
	border: 0;
	box-shadow: 0 .2rem .8rem rgba(36, 36, 36, .09);
}

.management-kpi .card-body {
	position: relative;
}

.management-kpi-icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: rgba(85, 120, 17, .22);
	font-size: 2.2rem;
}

.management-stat {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: .2rem;
	padding: .85rem 1rem;
	border-left: .25rem solid var(--c360-lime);
	background: var(--c360-light);
}

.management-stat span,
.management-inventory-value span {
	color: var(--bs-secondary-color);
	font-size: .82rem;
}

.management-stat strong {
	font-size: 1.1rem;
}

.management-chart {
	position: relative;
	height: 320px;
}

.management-chart-lg {
	height: 380px;
}

.management-chart-sm {
	height: 240px;
}

.management-inventory-value {
	display: flex;
	flex-direction: column;
	padding: .75rem;
	border-radius: .5rem;
	background: var(--c360-light);
}

.management-inventory-value strong {
	color: var(--c360-green-dark);
	font-size: 1.5rem;
}

.management-pipeline-item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--bs-border-color);
}

.management-pipeline-item:last-child {
	border-bottom: 0;
}

.report-assistant-card {
	overflow: hidden;
}

.report-chat-message {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .9rem;
	border-radius: .75rem;
	background: var(--c360-light);
}

.report-chat-avatar {
	display: inline-flex;
	flex: 0 0 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c360-green-dark);
	color: #fff;
}

.report-total {
	display: flex;
	flex-direction: column;
	padding: .75rem 1rem;
	border-radius: .65rem;
	background: var(--c360-light);
}

.report-total span {
	color: var(--bs-secondary-color);
	font-size: .78rem;
}

.report-total strong {
	color: var(--c360-green-dark);
	font-size: 1.35rem;
}

.report-date-group .form-control[readonly] {
	background: #fff;
	cursor: pointer;
}

.report-date-group .input-group-text {
	color: var(--c360-green-dark);
}

.ui-datepicker {
	z-index: 2100 !important;
	font-size: .86rem;
}

.report-criteria-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
}

.report-criterion {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	min-width: 0;
	padding: .65rem .75rem;
	border: 1px solid #e2e5de;
	border-left: 3px solid var(--c360-green);
	border-radius: .45rem;
	background: #f8f9f6;
}

.report-criterion-wide {
	grid-column: 1 / -1;
}

.report-criterion-icon {
	flex: 0 0 auto;
	margin-top: .1rem;
	color: var(--c360-green-dark);
}

.report-criterion-label,
.report-criterion-value {
	display: block;
}

.report-criterion-label {
	margin-bottom: .1rem;
	color: var(--bs-secondary-color);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.report-criterion-value {
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.35;
}

.report-origin {
	color: var(--bs-secondary-color);
	font-size: .75rem;
}

/*
 * L'attribution OpenAI est volontairement compacte et secondaire à l'identité
 * Connect 360° ss. Le fichier officiel est affiché sans filtre, recoloration,
 * découpage ni déformation; l'espace interne du visuel protège son dégagement.
 */
.c360-openai-attribution {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	max-width: 100%;
	padding: .2rem .55rem .2rem .15rem;
	border: 1px solid var(--bs-border-color);
	border-radius: .45rem;
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
	font-size: .72rem;
	line-height: 1.2;
}

.c360-openai-attribution img {
	display: block;
	width: 82px;
	height: 41px;
	object-fit: contain;
}

.report-builder-chart {
	position: relative;
	height: 390px;
}

.report-results-card table {
	font-size: 12px;
}

.report-results-card thead th {
	font-weight: 600;
}

.report-results-card tfoot th {
	border-top: 2px solid var(--c360-green-dark);
	background: #f1f3ed;
	font-weight: 700;
	white-space: nowrap;
}

.report-results-card th.text-end,
.report-results-card td.text-end {
	white-space: nowrap;
}

.report-condition-accordion,
.report-condition-accordion .form-label,
.report-condition-accordion .form-control,
.report-condition-accordion .form-select,
.report-condition-accordion .input-group-text,
.report-condition-accordion .btn,
.report-condition-accordion .form-text {
	font-size: 12px;
}

.report-condition-accordion .accordion-button {
	background: #f8f9f6;
	color: var(--bs-body-color);
	font-size: 12px;
	font-weight: 600;
}

.report-condition-accordion .accordion-button:not(.collapsed) {
	background: #f1f3ed;
	box-shadow: none;
	color: var(--c360-green-dark);
}

.report-condition-accordion .accordion-button:focus {
	box-shadow: 0 0 0 .2rem rgba(85, 120, 17, .18);
}

.report-condition-accordion .accordion-body {
	padding: .85rem;
}

.report-data-link {
	color: var(--c360-green-dark);
	font-weight: 600;
	text-decoration: none;
}

.report-data-link:visited {
	color: var(--c360-green-dark);
}

.report-data-link:hover {
	color: var(--c360-green);
	text-decoration: underline;
}

#ReportPromptForm textarea {
	min-height: 7.5rem;
	resize: vertical;
}

#ReportLoadingOverlay {
	position: fixed;
	inset: 0;
	display: none;
	background: rgba(31, 36, 30, .72);
	backdrop-filter: blur(2px);
	z-index: 2000;
}

#ReportLoadingOverlay .report-loading-content {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: min(90vw, 320px);
	padding: 1.5rem 2rem;
	transform: translate(-50%, -50%);
	border-radius: .8rem;
	background: rgba(40, 47, 37, .94);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .28);
	color: #fff;
	text-align: center;
}

#ReportLoadingOverlay .spinner-border {
	width: 4rem;
	height: 4rem;
}

#ReportLoadingOverlay p {
	font-weight: 600;
}

#ReportLoadingOverlay small {
	display: block;
	margin-top: .35rem;
	color: rgba(255, 255, 255, .78);
}

body.report-is-loading {
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.c360-company-heading {
		max-width: 12rem;
		font-size: .85rem;
	}

	.management-chart,
	.management-chart-lg {
		height: 300px;
	}

	.report-builder-chart {
		height: 320px;
	}

	.report-criteria-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * L'impression du navigateur doit reproduire le document, sans l'encadrement
 * décoratif de l'écran ni barre de défilement. Les contrôles, la navigation et
 * la politique informative sont déjà retirés par leur classe noPrint.
 */
@media print {
	/* L'attribution décrit l'assistant à l'écran, pas le contenu du rapport. */
	.c360-openai-attribution {
		display: none !important;
	}

	.contract-document {
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/*
	 * Les moteurs d'impression peuvent réorganiser un en-tête en flex lorsque
	 * l'adresse est longue. Le mode tableau réserve toujours une cellule à droite
	 * au titre personnalisé et l'empêche de passer sous l'identité de la société.
	 */
	.contract-heading {
		display: table !important;
		width: 100% !important;
		table-layout: fixed;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.contract-brand,
	.contract-title {
		display: table-cell !important;
		vertical-align: top !important;
	}

	.contract-brand {
		width: 64% !important;
	}

	.contract-title {
		width: 36% !important;
		max-width: none !important;
		padding-left: 6mm !important;
		text-align: right !important;
	}

	/*
	 * La largeur imprimable d'une feuille Lettre peut être interprétée comme une
	 * largeur mobile par le navigateur. Sans ces priorités, la règle responsive
	 * transforme alors le bloc Client et le bloc Code client/dates en deux rangées.
	 * Le mode tableau garantit deux cellules de même largeur et empêche un saut de
	 * page de séparer les renseignements placés au haut du contrat.
	 */
	.contract-meta {
		display: table !important;
		width: 100% !important;
		table-layout: fixed;
		border-spacing: 4mm 0;
		margin-right: -4mm !important;
		margin-bottom: 1rem !important;
		margin-left: -4mm !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.contract-info-card {
		display: table-cell !important;
		width: 50% !important;
		vertical-align: top !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Un contrat configuré avec un seul bloc utilise toute la largeur disponible. */
	.contract-info-card:only-child {
		width: 100% !important;
	}

	/*
	 * ContractView.php est placé dans le conteneur Bootstrap principal. Sans
	 * cette règle, son padding horizontal s'ajoute aux marges physiques de la
	 * feuille et réduit inutilement la largeur disponible pour le contrat.
	 */
	body:has(.contract-document) main.container {
		width: 100% !important;
		max-width: none !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.contract-items-wrap {
		overflow: visible !important;
	}

	.contract-items {
		font-size: 8pt !important;
	}

	.contract-company-logo {
		max-width: 130px !important;
		max-height: 65px !important;
	}
}

/*
 * Présentation compacte de la page administrative OpenAI.
 * OpenAIUsage.php applique cette classe à tout son contenu afin que les
 * filtres, boutons, tableaux, badges et notes utilisent la même police réduite
 * sans modifier la typographie des autres pages du portail.
 */
.openai-usage-page,
.openai-usage-page .btn,
.openai-usage-page .form-control,
.openai-usage-page .form-select,
.openai-usage-page .form-label,
.openai-usage-page .table,
.openai-usage-page .badge,
.openai-usage-page .pagination {
	font-size: 0.78rem;
}

.openai-usage-page h1 {
	font-size: 1.35rem;
}

.openai-usage-page h2 {
	font-size: 1rem;
}

@media print {
	@page {
		margin: 12mm 4mm 16mm;
	}

	.noPrint {
		display: none !important;
	}

	/*
	 * Les alertes Bootstrap servent uniquement à guider l'usager dans le
	 * portail. Elles ne font jamais partie d'un contrat, d'un rapport ou d'une
	 * autre copie papier, même lorsqu'une page oublie la classe noPrint.
	 */
	.alert {
		display: none !important;
	}

	.print-only {
		display: block !important;
	}

	.report-print-header {
		margin-bottom: 7mm;
		padding-bottom: 3mm;
		border-bottom: 1px solid #555;
		text-align: center;
	}

	.report-print-company {
		font-size: 17pt;
		font-weight: 700;
	}

	.report-print-title {
		margin-top: 1mm;
		font-size: 13pt;
		font-weight: 600;
	}

	.report-print-date {
		margin-top: 1mm;
		font-size: 9pt;
	}

	.report-print-footer {
		position: fixed;
		right: 0;
		bottom: -11mm;
		left: 0;
		padding-top: 2mm;
		border-top: 1px solid #999;
		font-size: 8pt;
		text-align: center;
	}

	.report-data-link,
	.report-data-link:visited {
		color: #000 !important;
		font-weight: inherit;
		text-decoration: none !important;
	}

	.report-data-link-icon {
		display: none !important;
	}

	.report-criterion {
		border-color: #bbb;
		border-left-color: #bbb;
		background: #fff;
	}

	.report-results-card tfoot th {
		border-top-color: #000;
		background: #fff;
	}

	body:has(#ReportBuilderLayout) main.container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	#ReportBuilderLayout {
		width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		--bs-gutter-x: 0;
	}

	#ReportBuilderLayout > .report-builder-results {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}
.c360-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.35rem;
	border: 1px solid #ced4da;
	border-bottom: 0;
	background: #f5f5f5;
}

/*
 * L'éditeur conserve désormais uniquement la source HTML. Le cadre d'aperçu
 * reçoit un document serveur isolé qui reprend les vraies règles du contrat.
 */
.c360-editor-source {
	min-height: 360px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	font-size: 0.8rem;
	line-height: 1.45;
	white-space: pre;
	resize: vertical;
}

.c360-contract-terms-preview {
	display: block;
	width: 100%;
	min-height: 600px;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	background: #eef0eb;
}

.c360-contract-preview-status {
	min-height: 1.25rem;
}

.contract-document {
	padding: clamp(1rem, 3vw, 2.25rem);
	border: 1px solid #dfe3da;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: 0 0.75rem 2.5rem rgb(49 63 39 / 8%);
}

.contract-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	border-bottom: 3px solid #557814;
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
}

.contract-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

.contract-brand h2 {
	font-size: 1.15rem;
	margin: 0.2rem 0 0;
}

.contract-company-address {
	margin: 0.35rem 0 0;
	color: #596056;
	font-size: 0.8rem;
	font-style: normal;
	line-height: 1.4;
}

.contract-company-contact {
	margin-top: 0.2rem;
	color: #596056;
	font-size: 0.78rem;
}

.contract-company-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 80px;
}

.contract-eyebrow {
	display: block;
	color: #66705f;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contract-title {
	max-width: min(46%, 26rem);
	text-align: right;
}

.contract-title span,
.contract-title strong {
	display: block;
}

.contract-title span {
	color: #3f5e0b;
	font-size: clamp(1.25rem, 3vw, 1.9rem);
	font-weight: 700;
	line-height: 1.12;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.contract-title strong {
	margin-top: 0.35rem;
	color: #66705f;
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	font-weight: 700;
}

.contract-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.contract-info-card {
	padding: 1rem;
	border-left: 4px solid #88a830;
	border-radius: 0.35rem;
	background: #f4f6f1;
}

.contract-key-values > div {
	display: grid;
	grid-template-columns: minmax(8rem, 42%) 1fr;
	gap: 0.35rem;
	margin-bottom: 0.15rem;
}

/*
 * Le cadre de droite regroupe plusieurs renseignements courts. Une typographie
 * et un interligne compacts permettent notamment d'ajouter le vendeur sans
 * augmenter inutilement la hauteur de l'entête à l'écran ou à l'impression.
 */
.contract-key-values {
	font-size: 0.82rem;
	line-height: 1.25;
}

.contract-key-values > div:last-child {
	margin-bottom: 0;
}

.contract-key-values span {
	color: #66705f;
}

/* Les valeurs d'entête restent lisibles sans la graisse réservée aux titres. */
.contract-key-values .contract-key-value-data {
	color: #252923;
	font-weight: 400;
}

.contract-items-wrap {
	overflow-x: auto;
	margin-bottom: 1.25rem;
}

.contract-items {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}

.contract-items th,
.contract-items td {
	padding: 0.55rem 0.45rem;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

@media screen {
	/* Sur téléphone, le contrat défile horizontalement au lieu d'écraser ses colonnes. */
	.contract-items {
		min-width: 44rem;
	}
}

.contract-items th {
	background: #4b5147;
	color: #fff;
	font-size: 0.76rem;
	font-weight: 600;
	white-space: nowrap;
}

.contract-items th.number {
	text-align: right;
}

.contract-items td {
	border-bottom: 1px solid #d9ddd5;
}

.contract-items tbody tr:nth-child(even) {
	background: #f7f8f5;
}

.contract-product-code {
	color: #49680f;
	font-weight: 700;
}

/*
 * Les numéros de série appartiennent à la description de leur produit. Chaque
 * numéro occupe sa propre ligne et les crochets facilitent sa lecture à l'écran,
 * à l'impression du navigateur et dans le PDF final.
 */
.contract-serial-number {
	display: block;
	margin-top: 0.15rem;
	color: #4f5965;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.82em;
	white-space: nowrap;
}

.contract-items .number,
.contract-totals td {
	text-align: right;
	white-space: nowrap;
}

.contract-summary {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
}

.contract-totals-wrap {
	width: min(100%, 32rem);
}

.contract-company-details {
	color: #596056;
	font-size: 0.84rem;
	line-height: 1.55;
}

.contract-tax-numbers {
	margin-top: 0.7rem;
}

.contract-totals {
	width: 100%;
	border-collapse: collapse;
}

.contract-totals th,
.contract-totals td {
	padding: 0.5rem 0.65rem;
	border-bottom: 1px solid #d9ddd5;
}

.contract-totals th {
	text-align: left;
}

/*
 * Le numéro d'inscription demeure lié au libellé TPS/TVP et s'affiche plus
 * discrètement que le nom de la taxe dans la consultation et à l'impression.
 */
.contract-tax-number {
	color: #6c7368;
	font-size: 0.72em;
	font-weight: 500;
	white-space: nowrap;
}

.contract-totals .grand-total {
	font-weight: 700;
	background: #e8efda;
	color: #314a08;
}

.contract-terms,
.contract-signatures {
	margin-top: 1.5rem;
}

.contract-signatures h2 {
	font-size: 1.1rem;
	color: #3f5e0b;
	border-bottom: 2px solid #8aa82e;
	padding-bottom: 0.4rem;
}

/*
 * Aide visuelle affichée sous les deux éditeurs de conditions. Les titres à
 * l'intérieur reçoivent directement C360ContractTermsTypographyCss(), comme le
 * contrat et le PDF; seules la boîte et la grille appartiennent à Site.css.
 */
.contract-terms-style-guide {
	background: #f7f8f5;
}

/*
 * Éditeur visuel de signature des courriels. La barre se replie sur plusieurs rangées
 * pour demeurer utilisable sur téléphone, contrairement à une barre rigide de
 * traitement de texte conçue uniquement pour un grand écran.
 */
.c360-signature-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.5rem;
	border: 1px solid #ced4da;
	border-bottom: 0;
	border-radius: 0.375rem 0.375rem 0 0;
	background: #f4f5f2;
}

.c360-signature-editor-toolbar .form-select {
	width: auto;
	min-width: 92px;
}

.c360-signature-editor {
	min-height: 190px;
	max-height: 420px;
	overflow: auto;
	padding: 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0 0 0.375rem 0.375rem;
	background: #fff;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 1.45;
	outline: 0;
}

.c360-signature-editor:focus {
	border-color: #86a840;
	box-shadow: 0 0 0 0.2rem rgba(85, 120, 20, 0.15);
}

/* Repères manipulés par CrmEmailSignature.js, remplacés par les images à l'envoi. */
.c360-signature-editor [data-signature-item] {
	display: inline-block;
	padding: 2px 5px;
	margin: 2px;
	border: 1px dashed #557814;
	border-radius: 3px;
	background: #edf2e4;
	color: #314a08;
	font-size: 12px;
	vertical-align: middle;
}

[data-signature-preview] [hidden] {
	display: none !important;
}

[data-signature-preview-content] a {
	display: inline-block;
	vertical-align: middle;
}

[data-signature-preview-content] a[data-link-code] {
	margin: 0 7px 0 0 !important;
}

[data-signature-preview-content] p,
[data-signature-preview-content] div {
	margin: 0 0 5px;
}

.c360-signature-editor:empty::before {
	color: #80867c;
	content: attr(data-placeholder);
	pointer-events: none;
}

.c360-signature-color-button {
	position: relative;
	overflow: hidden;
}

.c360-signature-color-button input[type="color"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.c360-signature-live-preview {
	overflow-wrap: anywhere;
	font-size: 13px;
	line-height: 1.45;
}

.c360-signature-social-preview a {
	line-height: 1;
	text-decoration: none;
}

.c360-signature-social-preview img {
	display: block;
	width: 24px;
	height: 24px;
}

.contract-terms-help-accordion .accordion-button {
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.contract-terms-help-accordion .accordion-button:not(.collapsed) {
	color: #314a08;
	background: #edf2e4;
}

.contract-terms-help-accordion .accordion-button:focus {
	border-color: #9caf75;
	box-shadow: 0 0 0 0.2rem rgba(99, 126, 34, 0.18);
}

.contract-terms-style-guide-intro {
	margin-bottom: 0.75rem;
	color: #596056;
	font-size: 0.8rem;
}

.contract-terms-heading-samples {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.5rem;
}

.contract-terms-heading-sample {
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid #e1e4dc;
	border-radius: 0.25rem;
	background: #fff;
}

.contract-terms-heading-sample code {
	display: block;
	margin-bottom: 0.25rem;
	color: #66705f;
	font-size: 0.72rem;
}

/* Présente côte à côte les trois exemples de listes de l'aide des conditions. */
.contract-terms-list-help {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #d9ddd5;
}

.contract-terms-list-samples {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.contract-terms-list-sample {
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid #e1e4dc;
	border-radius: 0.25rem;
	background: #fff;
}

.contract-terms-list-sample code {
	display: block;
	margin-bottom: 0.5rem;
	color: #66705f;
	font-size: 0.72rem;
}

.contract-terms-list-compact-example {
	margin-top: 0.75rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #e1e4dc;
	border-radius: 0.25rem;
	background: #fff;
}

.contract-terms-list-compact-example > code {
	display: block;
	margin-bottom: 0.5rem;
	color: #66705f;
	font-size: 0.72rem;
}

@media (max-width: 767.98px) {
	.contract-terms-list-samples {
		grid-template-columns: 1fr;
	}
}

.contract-terms-margin-help {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #d9ddd5;
}

.contract-terms-margin-help .table {
	font-size: 0.8rem;
}

.contract-signature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.contract-signature-box {
	margin-top: 1rem;
}

.contract-signature-writing {
	display: flex;
	align-items: end;
	height: 85px;
}

.contract-signature-line {
	border-top: 1px solid #555;
}

.contract-signature-identity {
	padding-top: 0.35rem;
}

.contract-signature-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 220px;
	max-height: 85px;
	object-fit: contain;
}

.contract-empty-terms {
	padding: 0.75rem;
	border-left: 4px solid #c99700;
	background: #fff8df;
}

.contract-signature-pending {
	display: flex;
	align-items: end;
	height: 75px;
	padding-bottom: 0.5rem;
	color: #777;
}

.contract-signature-canvas {
	display: block;
	width: 100%;
	height: 180px;
	border: 1px solid #999;
	background: #fff;
	touch-action: none;
}

/*
	La zone centrale de la fenêtre de signature doit demeurer défilable sur iOS
	et Android. Le défilement accéléré est appliqué uniquement à modal-body afin
	que l’entête et les boutons d’action restent accessibles autour du contenu.
*/
#ContractSignatureModal .modal-body {
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

@media (max-width: 575.98px) {
	/*
		La hauteur dynamique tient compte des barres d’adresse mobiles. La valeur
		100vh sert de repli aux navigateurs qui ne reconnaissent pas encore 100dvh.
	*/
	#ContractSignatureModal .modal-dialog {
		align-items: flex-start;
		height: calc(100vh - 1rem);
		height: calc(100dvh - 1rem);
		min-height: 0;
		margin: 0.5rem;
	}

	#ContractSignatureModal .modal-content {
		max-height: 100%;
	}

	#ContractSignatureModal .modal-footer {
		flex-wrap: wrap;
	}
}

.contract-signature-steps li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: 0.6rem;
	align-items: start;
	margin-bottom: 0.75rem;
}

.contract-signature-steps i {
	color: #557814;
	font-size: 1.25rem;
}

.contract-signature-policy {
	margin: 2.5rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid #d9ddd5;
	color: #62685f;
	font-size: 0.78rem;
	line-height: 1.55;
}

.contract-signature-policy h2 {
	font-size: 0.9rem;
	font-weight: 700;
}

.contract-signature-policy li {
	margin-bottom: 0.55rem;
}

/*
 * Portraits des portails externes. Les classes génériques servent aux clients
 * et fournisseurs; les alias employee-* conservent le portrait salarial déjà
 * publié avec la même hiérarchie et une présentation adaptée au téléphone.
 */
.employee-payroll-kpi,
.portal-dashboard-kpi {
	border: 0;
	box-shadow: 0 0.35rem 1.2rem rgb(35 42 28 / 8%);
}

.employee-payroll-kpi .card-body,
.portal-dashboard-kpi .card-body {
	position: relative;
}

.employee-payroll-kpi strong,
.portal-dashboard-kpi strong {
	display: block;
	margin: 0.15rem 2rem 0.1rem 0;
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	white-space: nowrap;
}

.employee-payroll-kpi-icon,
.portal-dashboard-kpi-icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: rgb(85 120 17 / 24%);
	font-size: 1.7rem;
}

.employee-payroll-chart,
.portal-dashboard-chart {
	position: relative;
	height: 280px;
}

.employee-payroll-chart-wide,
.portal-dashboard-chart-wide {
	height: 320px;
}

.portal-dashboard-empty {
	display: grid;
	min-height: 100%;
	place-items: center;
	text-align: center;
}

.employee-payroll-totals > div {
	display: flex;
	flex-direction: column;
	padding: 0.85rem 1rem;
	border: 1px solid #d8ded0;
	background: #f4f6f1;
}

.employee-payroll-totals strong {
	margin-top: 0.2rem;
	font-size: 1.15rem;
	white-space: nowrap;
}

.employee-payroll-totals > div:last-child {
	background: #e8efdd;
	color: #365309;
}

@media (max-width: 767.98px) {
	.contract-heading,
	.contract-brand {
		align-items: flex-start;
	}
	.contract-heading {
		flex-direction: column;
	}
	.contract-title {
		max-width: 100%;
		text-align: left;
	}
	.contract-meta {
		grid-template-columns: 1fr;
	}
	.contract-terms-heading-samples {
		grid-template-columns: 1fr;
	}
	.contract-summary,
	.contract-signature-grid {
		grid-template-columns: 1fr;
	}
	.contract-document {
		padding: 0.75rem;
	}
	.employee-payroll-chart,
	.employee-payroll-chart-wide,
	.portal-dashboard-chart,
	.portal-dashboard-chart-wide {
		height: 245px;
	}
}

/*
 * Formulaires communs : société, usagers, contrats, CRM, filtres et administration.
 * Ces règles sont placées après les présentations spécialisées pour harmoniser
 * les contrôles ordinaires et Bootstrap « sm », sans toucher aux courriels ni aux
 * PDF. Les champs multilignes conservent leurs rows et les éditeurs leur espace.
 * Ne pas imposer une hauteur à tous les input : couleurs, cases et switches ont
 * leur propre géométrie. Les listes multiples ne doivent pas devenir une ligne.
 */
@media screen {
	.form-control:not(textarea):not(.form-control-color),
	.form-select:not([multiple]):not([size]),
	.form-select[size="1"] {
		min-height: 1.75rem;
		padding-top: .1875rem;
		padding-bottom: .1875rem;
		font-size: .8125rem;
		line-height: 1.5;
	}

	.form-control:not(textarea):not(.form-control-color) {
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.form-control,
	.form-select,
	.input-group,
	form,
	form .row > * {
		min-width: 0;
	}

	.form-control,
	.form-select {
		max-width: 100%;
	}

	.form-label {
		margin-bottom: .25rem;
		font-size: .875rem;
		line-height: 1.4;
	}

	form.row.g-3,
	form .row.g-3 {
		--bs-gutter-y: .65rem;
	}

	/* Calendrier, œil du mot de passe et unités restent à la hauteur du champ. */
	.input-group > .input-group-text,
	.input-group > .btn {
		min-height: 1.75rem;
		padding: .1875rem .5rem;
		font-size: .8125rem;
		line-height: 1.5;
	}

	.form-control::file-selector-button {
		padding: .1875rem .5rem;
		margin: -.1875rem .5rem -.1875rem -.5rem;
	}

	/*
	 * Connexion et composeur CRM placent un form entre modal-content et modal-body.
	 * Ce form doit aussi être flexible, sinon le corps déborde malgré la classe
	 * modal-dialog-scrollable et les boutons d'envoi deviennent inaccessibles.
	 * 100dvh suit les barres du navigateur mobile; 100vh reste le repli.
	 */
	.modal-dialog-scrollable {
		height: calc(100vh - var(--bs-modal-margin) * 2);
		height: calc(100dvh - var(--bs-modal-margin) * 2);
	}

	.modal-dialog-scrollable .modal-content > form {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 100%;
		overflow: hidden;
	}

	.modal-dialog-scrollable .modal-body {
		min-height: 0;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.modal-header,
	.modal-footer {
		padding: .75rem;
	}

	.modal-title,
	.modal-footer .btn {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.modal-footer .btn {
		max-width: calc(100% - var(--bs-modal-footer-gap));
		white-space: normal;
	}
}

/*
 * Saisie mobile : 16 px évite le zoom automatique des champs sur iPhone. Les
 * hauteurs restent souples pour le texte agrandi; on ne désactive jamais le zoom.
 * La priorité explicite sur la police empêche les thèmes CRM/rapports/infolettres
 * (12 px sur ordinateur) de réduire aussi le texte pendant une saisie tactile.
 */
@media screen and (max-width: 767.98px), screen and (pointer: coarse) {
	.form-control:not(.form-control-color),
	.form-select {
		font-size: 16px !important;
	}

	.form-control:not(textarea):not(.form-control-color),
	.form-select:not([multiple]):not([size]),
	.form-select[size="1"],
	.input-group > .input-group-text,
	.input-group > .btn {
		min-height: 2.25rem;
		padding-top: .25rem;
		padding-bottom: .25rem;
	}

	.form-control::file-selector-button {
		padding-top: .25rem;
		padding-bottom: .25rem;
		margin-top: -.25rem;
		margin-bottom: -.25rem;
	}
}

@media screen and (max-width: 575.98px) {
	/* Les actions d'un formulaire se replient sans élargir la page. */
	form .d-flex:not(.input-group),
	form.d-flex:not(.input-group) {
		flex-wrap: wrap;
	}

	/* Un long nom de fichier et son bouton ne doivent pas se disputer une ligne. */
	.input-group:has(> input[type="file"]) {
		gap: .375rem;
	}

	.input-group > input[type="file"].form-control {
		flex-basis: 100%;
		width: 100%;
		border-radius: var(--bs-border-radius-sm) !important;
	}

	.input-group:has(> input[type="file"]) > .btn {
		margin-left: 0 !important;
		border-radius: var(--bs-border-radius-sm) !important;
	}

	.ui-datepicker {
		max-width: calc(100vw - 1rem);
	}
}