: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;
	--c360-placeholder: #b5bac1;
}

/* Les indications restent distinctes des valeurs réellement saisies. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
	color: var(--c360-placeholder);
	opacity: 1;
}

/*
 * 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;
}

/* Sociétés : les renseignements et les détails partagent deux rangées. */
.table-zebra-2-row > tbody > tr:nth-child(4n + 1) > *,
.table-zebra-2-row > tbody > tr:nth-child(4n + 2) > * {
	background-color: var(--c360-table-zebra) !important;
}

.table-zebra-2-row > tbody > tr:nth-child(4n + 3) > *,
.table-zebra-2-row > tbody > tr:nth-child(4n + 4) > * {
	background-color: var(--bs-body-bg, #fff) !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;
	}

	body:has(.portal-sale-document) main.container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.portal-sale-document > .card {
		border: 0 !important;
		box-shadow: none !important;
	}

	.portal-sale-document > .card > .card-body {
		padding: 0 !important;
	}

	.portal-sale-document .portal-sale-lines-wrap,
	.portal-sale-document .table-responsive {
		overflow: visible !important;
	}

	.portal-sale-document .portal-sale-lines {
		font-size: 8pt !important;
	}

	.portal-sale-document .portal-sale-photo-line img {
		max-height: 190mm !important;
	}

	.portal-sale-document .portal-sale-line-type,
	.portal-sale-document .noPrint {
		display: none !important;
	}

	.portal-sale-document .portal-sale-acceptance-record {
		display: block !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/*
 * 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;
	}

	/*
	 * Bootstrap insère les infobulles et les menus flottants directement dans
	 * le body. Ils ne sont donc pas retirés avec leur bouton noPrint lorsque
	 * l'usager lance l'impression pendant qu'une infobulle est encore ouverte.
	 */
	.tooltip,
	.popover {
		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;
}

/*
 * Les soumissions et commandes réutilisent l'identité visuelle des contrats.
 * Ces règles complètent les couleurs calculées dans PortalSaleDocument.php et
 * conservent une présentation compacte dans le navigateur, à l'impression et
 * dans le document PDF généré par le portail.
 */
.portal-sale-header-card {
	overflow: hidden;
	border-radius: 0.5rem;
}

.portal-sale-header-field {
	min-height: 5rem;
	padding: 0.75rem;
	border-right: 1px solid;
}

.portal-sale-header-field:last-child {
	border-right: 0;
}

.portal-sale-header-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
}

/*
 * La description conserve une part fixe de la grille. Les textes longs passent
 * à la ligne dans cette colonne au lieu de comprimer les quantités et montants.
 * Le tableau garde une largeur minimale dans le formulaire; son conteneur
 * responsive offre alors un défilement horizontal utilisable sur téléphone.
 */
.portal-sale-lines {
	width: 100%;
	table-layout: fixed;
}

/*
 * Les produits des soumissions et commandes ne reçoivent aucun fond zébré.
 * Une bordure neutre très pâle suffit à séparer les lignes sans concurrencer
 * les renseignements commerciaux ni la couleur principale du document.
 */
.portal-sale-lines thead th {
	background-color: transparent !important;
	border-bottom: 1px solid #cfd3cc !important;
}

.portal-sale-lines tbody tr > * {
	background-color: transparent !important;
	border-bottom: 1px solid #eceeea !important;
}

.portal-sale-document form .portal-sale-lines {
	min-width: 1180px;
	table-layout: auto;
}

.portal-sale-lines .portal-sale-field-ProductCode {
	width: 12%;
}

.portal-sale-lines .portal-sale-field-Description {
	width: 32%;
	max-width: 32%;
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Dans la grille de saisie, chaque donnée numérique conserve assez d'espace
 * pour demeurer lisible. La description devient un champ multiligne plus
 * compact au lieu d'écraser les quantités, prix et montants. */
.portal-sale-document form .portal-sale-field-ProductCode {
	width: 9rem;
	min-width: 9rem;
}

.portal-sale-document form .portal-sale-field-Description {
	width: 20rem;
	min-width: 20rem;
	max-width: 20rem;
}

.portal-sale-description-input {
	width: 100%;
	min-height: 4.5rem;
	line-height: 1.25;
	resize: vertical;
}

/*
 * Une photo utilise exactement la largeur accordée à la description. La hauteur
 * reste proportionnelle et le bloc ne se partage pas entre deux pages PDF.
 */
.portal-sale-photo-line,
.portal-sale-photo-editor {
	max-width: 100%;
	margin: 0;
	break-inside: avoid;
	page-break-inside: avoid;
}

.portal-sale-photo-row {
	break-inside: avoid;
	page-break-inside: avoid;
}

.portal-sale-photo-line img,
.portal-sale-photo-editor img,
.portal-sale-photo-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 650px;
	object-fit: contain;
	object-position: left top;
}

/* Les flèches demeurent l'une sous l'autre sans agrandir les icônes d'action. */
.portal-sale-order-buttons {
	display: inline-flex;
	flex-direction: column;
	vertical-align: middle;
}

.portal-sale-order-buttons .c360-list-action {
	height: 0.8rem;
	min-height: 0;
	line-height: 0.72rem;
}

.portal-sale-order-buttons .c360-list-action:disabled {
	opacity: 0.25;
}

.portal-sale-visual-cell {
	vertical-align: top !important;
}

.portal-sale-width-control {
	width: 8.5rem;
}

.portal-sale-annotation-editor-row,
.portal-sale-annotation-content {
	max-width: 100%;
}

.portal-sale-annotation-editor {
	min-height: 4.5rem;
	white-space: normal;
	overflow-wrap: anywhere;
}

.portal-sale-separator {
	border-top: 2px solid var(--c360-green);
	opacity: 0.55;
}

.portal-sale-partial-total {
	padding: 0.35rem 0.5rem;
	border: 0;
}

/* Le libellé et le montant d'un total partiel occupent les deux dernières
 * colonnes du tableau. Cette structure demeure stable dans le navigateur,
 * l'impression et Dompdf, sans dépendre du support des rangées flexibles. */
.portal-sale-partial-total-label,
.portal-sale-partial-total-amount {
	padding: 0.35rem 0.5rem !important;
	text-align: right !important;
	vertical-align: top;
}

.portal-sale-partial-total-label,
.portal-sale-partial-total-amount,
.portal-sale-partial-total-spacer {
	background-color: transparent !important;
}

/* Deux traits pointillés délimitent le groupe calculé sans ajouter de fond. */
.portal-sale-partial-total-row > * {
	background-color: transparent !important;
	border-top: 2px dotted #9ca19a !important;
	border-bottom: 2px dotted #9ca19a !important;
}

/* Dompdf ne reproduit pas toujours gap sur une rangée flex. Une marge portée
 * par le montant conserve la séparation autant à l'écran que dans le PDF. */
.portal-sale-partial-total-amount {
	white-space: nowrap;
}

.portal-sale-inventory-button {
	color: #111 !important;
	font-size: inherit;
}

.portal-sale-lines .portal-sale-field-Quantity {
	width: 10%;
}

.portal-sale-lines .portal-sale-field-SalesUnit {
	width: 6%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.portal-sale-lines .portal-sale-field-ListPrice {
	width: 11%;
}

.portal-sale-lines .portal-sale-field-Discount {
	width: 5%;
}

.portal-sale-lines th.portal-sale-field-Discount {
	white-space: nowrap;
}

/* L'escompte est un pourcentage. Le symbole reste collé à la valeur dans la
 * grille de saisie sans être inclus dans la donnée numérique envoyée au PHP. */
.portal-sale-discount-input {
	flex-wrap: nowrap;
	margin-left: auto;
	width: 4.5rem;
	max-width: 100%;
}

.portal-sale-discount-input .form-control {
	min-width: 0;
	padding-right: 0.2rem;
	padding-left: 0.2rem;
	font-size: 0.78rem;
}

.portal-sale-discount-input .input-group-text {
	padding-right: 0.35rem;
	padding-left: 0.35rem;
}

.portal-sale-lines .portal-sale-field-UnitPrice {
	width: 12%;
}

.portal-sale-lines .portal-sale-field-LineTotal {
	width: 12%;
}

/* Le type est une aide réservée à la saisie; son icône ne comprime plus les
 * colonnes commerciales et disparaît avec tous les rendus imprimables. */
.portal-sale-lines .portal-sale-line-type {
	width: 2rem;
	min-width: 2rem;
	max-width: 2rem;
	padding-right: 0.2rem;
	padding-left: 0.2rem;
}

.portal-sale-inventory {
	border-style: dashed !important;
}

.portal-sale-document form .portal-sale-lines input.portal-sale-number {
	width: 100% !important;
	min-width: 5.5rem;
}

.portal-sale-document form .portal-sale-field-Quantity {
	width: 8.5rem;
	min-width: 8.5rem;
}

.portal-sale-document form .portal-sale-field-SalesUnit {
	width: 5rem;
	min-width: 5rem;
}

.portal-sale-document form .portal-sale-field-ListPrice,
.portal-sale-document form .portal-sale-field-UnitPrice,
.portal-sale-document form .portal-sale-field-LineTotal {
	width: 7.5rem;
	min-width: 7.5rem;
}

.portal-sale-document form .portal-sale-field-Discount {
	width: 4.75rem;
	min-width: 4.75rem;
}

/* Le champ doit pouvoir se contracter à l'intérieur du groupe. Cette règle
 * vient après la largeur générale des nombres afin que 100 et % ne débordent
 * jamais dans la colonne Prix net. */
.portal-sale-document form .portal-sale-lines .portal-sale-discount-input input.portal-sale-number {
	flex: 1 1 0%;
	width: 1% !important;
	min-width: 0 !important;
}

/* Les titres numériques suivent le standard des montants : alignés à droite
 * au-dessus de leur colonne dans les soumissions et commandes. */
.portal-sale-document form .portal-sale-lines thead th.portal-sale-field-Quantity,
.portal-sale-document form .portal-sale-lines thead th.portal-sale-field-SalesUnit,
.portal-sale-document form .portal-sale-lines thead th.portal-sale-field-ListPrice,
.portal-sale-document form .portal-sale-lines thead th.portal-sale-field-Discount,
.portal-sale-document form .portal-sale-lines thead th.portal-sale-field-UnitPrice,
.portal-sale-document form .portal-sale-lines thead th.portal-sale-field-LineTotal {
	text-align: right !important;
}

.portal-sale-terms-title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
}

.portal-sale-acceptance-record {
	display: none;
	margin-top: 1.5rem;
	padding-top: 0.8rem;
	font-size: 0.82rem;
}

.portal-sale-acceptance-record.portal-sale-acceptance-visible {
	display: block;
}

.portal-sale-acceptance-record.portal-sale-store-acceptance {
	display: block;
}

.portal-sale-acceptance-record h2 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.portal-sale-acceptance-record dl,
.portal-sale-acceptance-record dd {
	margin: 0;
}

.portal-sale-acceptance-record dl > div {
	display: flex;
	gap: 0.5rem;
}

.portal-sale-acceptance-record dt {
	min-width: 10rem;
}

.portal-sale-store-signature {
	width: 280px;
	max-width: 100%;
	margin-top: 0.75rem;
	border-bottom: 1px solid #555;
	text-align: center;
}

.portal-sale-store-signature img {
	display: block;
	width: 240px;
	max-width: 100%;
	height: 80px;
	margin: 0 auto;
	object-fit: contain;
}

.portal-sale-store-signature div {
	padding-top: 0.25rem;
	font-size: 0.72rem;
	color: #666;
}

.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: transparent;
	color: #252923;
	border-bottom: 1px solid #cfd3cc;
	font-size: 0.76rem;
	font-weight: 600;
	white-space: nowrap;
}

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

.contract-items .contract-field-Discount {
	width: 6%;
	max-width: 6%;
}

.contract-items td {
	background: transparent;
	border-bottom: 1px solid #eceeea;
}

.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: var(--c360-placeholder);
	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;
}

/*
	ContractView.php : distinguer les questions dans la fenêtre de signature.
	Ce fond ne s'applique pas aux réponses affichées dans le contrat ou le PDF.
*/
#ContractSignatureModal #ContractQuestionnaireFields {
	background-color: #f1f3f5;
}

@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;
	}
	.portal-sale-header-field {
		border-right: 0;
		border-bottom: 1px solid;
	}
	.portal-sale-header-field:last-child {
		border-bottom: 0;
	}
	.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);
	}
}

/*
	Listes du portail : présentation commune à partir de Newsletters.php.
	Les pages de consultation/gestion et les lignes créées par Newsletters.js
	ajoutent c360-list-table, c360-list-actions et c360-list-action explicitement.
	Ne pas cibler toutes les .table : les rapports, contrats, PDF, courriels et
	formulaires de détail doivent conserver leur propre typographie.
	Les cellules restent de vraies cellules (colspan, zebra et défilement intact).
*/
.table.c360-list-table {
	font-size: 13px;
}

.table.c360-list-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
	font-size: 13px;
	line-height: 1.4;
	vertical-align: top !important;
}

.table.c360-list-table :is(small, .small, .text-exs) {
	font-size: 12px;
}

.table.c360-list-table > :is(thead, tbody, tfoot) > tr > .c360-list-actions {
	width: 1%;
	white-space: nowrap;
	text-align: left;
}

/* Même espacement pour les liens et les boutons de formulaires POST.
	Les attributs de confirmation, de permission et les champs cachés ne changent
	pas. L'état de maintenance reste suivi de boutons textuels Barrer/Débarrer. */
.c360-list-actions .d-flex {
	gap: 4px !important;
	align-items: flex-start !important;
}

.c360-list-actions form {
	margin: 0;
}

.c360-list-actions .btn {
	font-size: 13px;
}

.c360-list-actions .c360-list-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 28px;
	min-height: 28px;
	margin: 0 !important;
	padding: 3px 5px !important;
	border: 0;
	border-radius: .25rem;
	background: transparent;
	color: var(--c360-green-dark);
	font-size: 13px;
	line-height: 1;
	text-decoration: none !important;
	vertical-align: top;
	box-shadow: none;
}

.c360-list-actions .bi {
	font-size: 16px !important;
	line-height: 1;
}

.c360-list-actions .c360-list-action:is(:hover, :focus-visible) {
	background: var(--c360-table-zebra);
	color: var(--c360-green-dark);
}

.c360-list-actions .c360-list-action:focus-visible {
	outline: 2px solid var(--c360-green-dark);
	outline-offset: 1px;
}

/* Conserver le signal de danger lorsqu'une page le prévoit déjà. */
.c360-list-actions .c360-list-action:is(.btn-outline-danger, .btn-danger, .text-danger) {
	color: var(--bs-danger, #dc3545);
}

.c360-list-actions .c360-list-action:is(:disabled, .disabled, [aria-disabled="true"]) {
	opacity: .45;
	background: transparent;
	cursor: not-allowed;
}

@media screen and (max-width: 575.98px) {
	/* Plus de surface tactile, sans grossir les pictogrammes ni le texte. */
	.c360-list-actions .c360-list-action {
		min-width: 32px;
		min-height: 32px;
	}
}