/* ===== framework/util/static/css/font-open-sans.css ===== */
@font-face {
	font-family: 'Open Sans';
	src: url(fonts/OpenSans-Light.woff) format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url(fonts/OpenSans-Regular.woff) format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url(fonts/OpenSans-Bold.woff) format('woff');
	font-weight: 700;
	font-style: normal;
}

.font-open-sans {
	font-family: 'Open Sans', sans-serif;
}
/* ===== framework/util/static/css/font-roboto-mono.css ===== */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/Roboto-Mono-Regular.woff2) format("woff2");
}
/* ===== ouvretaferme/main/static/css/font-bricolage-grotesque.css ===== */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-ExtraLight.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-Light.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-Regular.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-Medium.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-SemiBold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-Bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(fonts/BricolageGrotesque-ExtraBold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.font-bricolage-grotesque-alt {
	font-family: 'Bricolage Grotesque', sans-serif;
}

/* ===== ouvretaferme/main/static/css/root.css ===== */
@media (min-width: 1100px) and (min-height: 600px) {

	:root {
		--nav-main: 3.5rem;
		--nav-main-sticked: 3.5rem;
		--nav-structure: 0;
		--mainSticky: 0rem;
	}

}

@media (max-width: 1099px), (max-height: 599px) {

	:root {
		--structureSections: 3.5rem;
		--nav-structure: 3.25rem;
		--mainSticky: 6.75rem;
		--nav-main-sticked: 0rem;
	}

	@media (max-width: 767px) {

		:root {
			--nav-main: 3rem;
		}

	}

	@media (min-width: 768px) {

		:root {
			--nav-main: 3rem;
		}

	}

}

h1 {
	font-weight: lighter;
	font-size: 2.5rem;
}

@media screen {

	h1 {
		font-family: 'Bricolage Grotesque', sans-serif;
	}

}

@media (min-width: 450px) and (max-width: 575px) {

	h1 {
		font-size: 2rem;
	}

}

@media (max-width: 449px) {

	h1 {
		font-size: 1.75rem;
	}

}

h1 a {
	color: inherit;
	transition: color 0.5s;
}

h1 a:hover {
	text-decoration: none;
	color: var(--primary);
}

h2 {
	font-weight: lighter;
	font-size: 2rem;
}

:where(.util-title) > h2 {
	font-weight: var(--heading-weight, lighter);
}

@media screen {

	h2 {
		font-family: 'Bricolage Grotesque', sans-serif;
	}

}

@media (min-width: 450px) and (max-width: 575px) {

	h2 {
		font-size: 1.75rem;
	}

}

@media (max-width: 449px) {

	h2 {
		font-size: 1.5rem;
	}

}

h3 {
	font-family: var(--font-title), sans-serif;
	font-size: 1.4rem;
}

:where(.util-title) > h3 {
	font-weight: var(--heading-weight, normal);
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-weight: bold;
	font-size: 1rem;
}

h6 {
	font-size: 1rem;
	color: var(--muted);
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 3%;
}

@media screen {

	body {
		display: grid;
		grid-template-rows: max-content max-content 1fr max-content;
	}

	@media (max-width: 1099px), (max-height: 599px) {

		body {
			min-height: 150vh;
		}

	}

	@media (min-width: 1100px) and (min-height: 600px) {

		body {
			min-height: 100vh;
		}

	}

}

@media print {

	body {
		background-color: white;
	}

}

.color-harvest {
	color: var(--harvest) !important;
}
.color-order {
	color: var(--order) !important;
}

body[data-template~="panel"] header,
body[data-template~="panel"] main,
body[data-template~="panel"] footer,
body[data-template~="panel"] nav {
	display: none;
}

@media (min-width: 1100px) and (min-height: 600px) {

	body[data-template~="structure"] > header {
		top: var(--nav-main);
	}

	body[data-template~="structure"] > nav {
		position: fixed;
		top: 0;
	}

}

body[data-template~="structure"] > main > div.container:not(:first-child) {
	margin-top: 0;
}

header h1:only-child {
	margin: 0;
}

@media (min-width: 768px) {

	.util-stick-main {
		position: sticky;
		top: calc(var(--mainSticky) - 1px);
		z-index: 1;
	}

}

body {
	overflow-y: scroll;
}

/* Footer */
footer:empty {
	display: none;
}


.text-secondary a {
	color: inherit;
	text-decoration: underline;
}

.plant-start {
	font-weight: bold;
	display: inline-block;
	white-space: nowrap;
	font-size: 0.9em;
	margin-left: 0.25em;
	background-color: #8881;
	border-radius: 0.5em;
	line-height: 1;
}

.plant-start-background {
	padding: 0.25em 0.375em;
}

.plant-start-border {
	border: 1px solid #8888;
	padding: 0.25em;
}

div.logout-external {
	position: fixed;
	bottom: 10px;
	right: 10px;
	max-width: 300px;
	z-index: 100000;
	font-size: 0.875rem;
	padding: 1rem;
	border-radius: var(--radius);
	color: white;
	background-color: #ff1dfd;
}

div.logout-external a {
	color: white;
	text-decoration: underline;
}


.root-nav-wrapper {
	color: var(--color-brand);
	justify-content: start;
	height: var(--nav-base-height);
}
.root-nav-wrapper > .container {
	display: flex;
	align-items: center;
	height: 100%;
}

.root-nav-title a {
	display: flex;
	align-items: center;
	font-family: var(--font-title), 'sans-serif';
	font-size:1.5rem;
	font-weight: 600;
	letter-spacing: 4%;
	color: var(--color-brand);

	@media (max-width: 767px) {
		font-size: 1.2rem;
	}

	@media (max-width: 575px) {
		font-size: 1.1rem;
	}

}

.root-nav-title svg {
	width: 1.154rem;
	margin-right: .5rem;
}


.root-nav-actions {
	display: flex;
	flex-grow: 1;
	align-items: center;
}
/* ===== framework/util/static/css/lime.css ===== */
:root {
	--screen-width: max(320px, calc(100vw - 15px))
}

/* Panel */
@media screen {

	body.panel-open {
		overflow: hidden;
		width: var(--screen-width);
	}

	.panel {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

}

@media print {

	body.panel-open {
		width: 100vw;
	}

	body.panel-open nav,
	body.panel-open header,
	body.panel-open main,
	body.panel-open footer {
		display: none;
	}

	.panel {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

}

.panel {
	display: none;
	background-color: white;
}

body[data-touch="no"] .panel.closing {
	opacity: 0;
}

body[data-touch="yes"] .panel.closing {
	left: -100%;
	overflow: hidden;
}

.panel.open {
	display: block;
}

@media screen {

	.panel.open {
		overflow-y: scroll;
	}

}

.panel.open.closing-last {
	overflow-y: hidden;
}

.panel-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1400px;
	min-height: 100vh;
	outline: 0;
	pointer-events: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.panel-dialog > * {
	pointer-events: auto;
}

.panel-back-wrapper {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-column-gap: 1rem;
	align-items: center;
}

a.panel-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.3rem;
	background-color: var(--secondary);
	color: white;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	line-height: 1;
	transition: background-color 0.5s;
}

a.panel-back:hover {
	color: white;
	background-color: var(--primary);
}

.panel-title {
	margin: 0;
	font-size: 1.75rem;
}

@media (max-width: 575px) {

	.panel-title {
		font-size: 1.5rem;
	}
}

@media (min-width: 576px) {

	.panel-title {
		padding-right: 1rem;
	}
}


.panel-subtitle {
	margin: 0;
	font-size: 1.25rem;
	color: var(--muted);
}


.panel-title + .panel-subtitle {
	margin-top: 0.5rem;
}

.panel-body {
	position: relative;
	z-index: 1;
	flex: 1;
}

/* Le z-index du corps enferme la liste d'autocomplétion, que le pied collant recouvrirait */
.panel-body:has(.autocomplete-open) {
	z-index: 2;
}

@media (max-width: 575px) {

	.panel-body {
		padding: var(--container-xs-padding) 0;
	}

}

@media (min-width: 576px) {

	.panel-body {
		padding: 1rem 0;
	}

}

.panel-footer:not(:empty) {
	position: sticky;
	bottom: 0;
	z-index: 1;
	background-color: white;
	border-top: 1px solid var(--border);
}

@media (max-width: 575px) {

	.panel-footer:not(:empty) {
		margin-left: calc(-1 * var(--container-xs-padding));
		margin-right: calc(-1 * var(--container-xs-padding));
		padding: var(--container-xs-padding);
	}

}

.panel-footer:empty {
	height: 4rem;
}

@media (min-width: 576px) {

	.panel-footer {
		padding: 1rem 0;
	}

}

.panel-header {
	position: sticky;
	top: 0;
	width: 100%;
	display: grid;
	align-items: center;
	justify-content: space-between;
	z-index: 3;
	background-color: white;
	border-bottom: 1px solid var(--border);
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}

@media (max-width: 575px) {

	.panel-header {
		margin-left: calc(-1 * var(--container-xs-padding));
		margin-right: calc(-1 * var(--container-xs-padding));
		padding: var(--container-xs-padding);
	}

}

body[data-touch="yes"] .panel-header {
	grid-template: "mobile content" auto / auto 1fr;
}

body[data-touch="no"] .panel-header {
	grid-template: "content desktop" auto / 1fr auto;
}

@media (min-width: 576px) {

	.panel-header {
		padding: 1rem 0;
	}

}

.panel-header:empty {
	display: none;
}

.panel-header-subtitle {
	font-size: 1.2rem;
	margin-top: 0.25rem;
}

.panel-header-content {
	grid-area: content;
}

.panel-backdrop {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: calc(100% - 15px);
	height: 100%;
}

.panel-close {
	font-weight: lighter;
	line-height: 1;
	padding: 1rem;
	font-size: 2.5rem;
	grid-area: close;
	margin: -1rem 0 -1rem -1rem;
}

.panel-close-desktop,
.panel-close-mobile {
	font-weight: lighter;
	line-height: 1;
	padding: 1rem;
	user-select: none;
}

.panel-close-desktop {
	font-size: 3rem;
}

.panel-close-mobile {
	font-size: 2.5rem;
}

.panel-close-desktop {
	grid-area: desktop;
	margin: -1rem -1rem -1rem 0;
}

.panel-close-mobile {
	grid-area: mobile;
	margin: -1rem 0 -1rem -1rem;
}

body[data-touch="no"] .panel-close-mobile {
	display: none;
}

body[data-touch="yes"] .panel-close-desktop {
	display: none;
}


/* Dropdowns */
body.dropdown-fullscreen-open {

	overflow: hidden;

	nav,
	header,
	main,
	footer {
		filter: blur(2rem);
	}

}


body[data-touch="yes"] {
	min-width: 320px;
}


body[data-touch="yes"] {

	& nav,
	& header,
	& footer {
		user-select: none;
	}

}

body.dropdown-fullscreen-open[data-touch="no"] {
	padding-right: 15px;
	width: 100vw;
}

.dropdown-placeholder {
	display: none;
}

.dropdown-list {
	display: none;
	grid-template-columns: 1fr;
}

.dropdown-list:not(.dropdown-list-unstyled) {
	border-radius: var(--radius);
}

.dropdown-list:not(.dropdown-list-unstyled):not(.dropdown-list-minimalist) {
	background-color: var(--primary);
	padding: 0.5rem 0;
}

.dropdown-list.fullscreen-closing {
	opacity: 0;
}

.dropdown-list.dropdown-list-open {
	display: grid;
	max-height: calc(100vh - 3rem);
	overflow: auto;
}

.dropdown-list.dropdown-list-open.dropdown-list-minimalist {
	overflow: visible;
}

.dropdown-list.dropdown-list-2 {
	grid-template-columns: 1fr 1fr;
}

.dropdown-list.dropdown-list-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.dropdown-list.dropdown-list-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width: 767px) {

	.dropdown-list.dropdown-list-3 {
		grid-template-columns: 1fr 1fr;
	}

	.dropdown-list.dropdown-list-4 {
		grid-template-columns: 1fr 1fr 1fr;
	}

}

body[data-touch="no"] .dropdown-list.dropdown-list-open:not(.dropdown-list-unstyled) {
	box-shadow: 0 0 2rem rgb(0 0 0 / 30%);
}

body[data-touch="yes"] .dropdown-list.dropdown-list-open {
	font-size: 1.1rem;
	max-width: calc(100vw - 1.5rem);
}

@media (max-width: 449px) {

	body[data-touch="yes"] .dropdown-list.dropdown-list-open {
		font-size: 1rem;
		max-width: calc(100vw - 1rem);
	}

}

body[data-touch="yes"] .dropdown-list:not(.dropdown-list-minimalist).dropdown-list-open {
	min-width: 66vw;
}

.dropdown-toggle:after {
	display: inline-block;
	content: "";
	margin-left: 0.5em;
	vertical-align: middle;
}

h1 .dropdown-toggle:after {
	font-size: 1.25rem;
}

h2 .dropdown-toggle:after {
	font-size: 1.15rem;
}

h3 .dropdown-toggle:after {
	font-size: 1.05rem;
}

h4 .dropdown-toggle:after,
h5 .dropdown-toggle:after,
h6 .dropdown-toggle:after {
	font-size: 1rem;
}



.dropdown-toggle[data-dropdown^="bottom"]:after {
	border-top: 0.4em solid;
	border-right: 0.32em solid transparent;
	border-bottom: 0;
	border-left: 0.32em solid transparent !important;
}

.dropdown-toggle[data-dropdown^="top"]:after {
	border-bottom: 0.4em solid;
	border-right: 0.32em solid transparent;
	border-top: 0;
	border-left: 0.32em solid transparent !important;
}

.dropdown-items-2 {
	display: grid;
	grid-template-columns: repeat(2, auto);
}

.dropdown-text,
.dropdown-item {
	display: block;
	padding: 0.625rem 0.75rem;
	line-height: 1.2;
	background-color: transparent;
	border: 0;
	text-align: left;
	font-weight: normal;
	color: white;
	border-radius: var(--radius);
	margin: 1px 0.5rem;
}

.dropdown-item {
	cursor: pointer;
}

body[data-touch="yes"] .dropdown-item {
	padding: 0.75rem 1rem;
}

@media (max-width: 449px) {

	body[data-touch="yes"] .dropdown-item {
		padding: 0.75rem .75rem;
	}

}

.dropdown-item.selected,
.dropdown-item:hover {
	color: white;
	text-decoration: none;
	background-color: #fff2;
}

.dropdown-item.disabled {
	pointer-events: none;
	opacity: 0.5;
}

.dropdown-item-icon {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	align-items: center;
}

.dropdown-item-status {
	font-size: 1.2rem;
	margin-left: 1.5rem;
	line-height: 1;
}

.dropdown-title {
	padding: 0.75rem 0rem;
	color: white;
	border-bottom: 1px solid #fff5;
	margin: 0rem 1.25rem;
	font-family: "Bricolage Grotesque";
	font-size: 1.2rem;
}

.dropdown-list-2 .dropdown-title,
.dropdown-list-2 .dropdown-divider,
.dropdown-list-2 .dropdown-subtitle,
.dropdown-list-2 .dropdown-item-full {
	grid-column: span 2;
}

.dropdown-list-3 .dropdown-title,
.dropdown-list-3 .dropdown-divider,
.dropdown-list-3 .dropdown-subtitle,
.dropdown-list-3 .dropdown-item-full {
	grid-column: span 3;
}

.dropdown-list-4 .dropdown-title,
.dropdown-list-4 .dropdown-divider,
.dropdown-list-4 .dropdown-subtitle,
.dropdown-list-4 .dropdown-item-full {
	grid-column: span 4;
}

@media (max-width: 767px) {

	.dropdown-list-3 .dropdown-title,
	.dropdown-list-3 .dropdown-divider,
	.dropdown-list-3 .dropdown-subtitle,
	.dropdown-list-3 .dropdown-item-full {
		grid-column: span 2;
	}

	.dropdown-list-4 .dropdown-title,
	.dropdown-list-4 .dropdown-divider,
	.dropdown-list-4 .dropdown-subtitle,
	.dropdown-list-4 .dropdown-item-full {
		grid-column: span 3;
	}

}

.dropdown-title:not(:first-child) {
	padding-top: 0.5rem;
}

.dropdown-subtitle {
	color: #fff;
	font-weight: bold;
	font-size: .9rem;
	padding: 0.75rem 1.25rem;
	white-space: nowrap;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.dropdown-title:has(+ .dropdown-subtitle),
.dropdown-title:has(+ .dropdown-item) {
	margin-bottom: 0.5rem;
}

.dropdown-info {
	font-size: .8rem;
	max-width: 20rem;
	color: #fff8;
}

.dropdown-divider {
	height: 0;
	margin: 0.5rem 1.25rem;
	border-top: 1px solid #fff5;
}

/* Un bloc de contenu dans un déroulant : un formulaire, une jauge, une grille
   de valeurs. Il tient le même rythme horizontal que les titres et les entrées,
   mais ne se survole pas et ne se clique pas — ce n'est pas une entrée de menu. */
.dropdown-block {
	padding: 0.5rem 1.25rem;
	color: white;
}

.dropdown-block:last-child {
	padding-bottom: 0.75rem;
}

.dropdown-backdrop {
	position: fixed;
	top: -100px;
	left: -100px;
	width: calc(100vw + 200px);
	height: calc(100vh + 200px);
	background-color: rgba(0, 0, 0, 0.5);
}

.dropdown-backdrop.fullscreen-closing {
	opacity: 0;
}


@media print {

	.dropdown-list-open {
		display: none !important;
	}

}
/* ===== ouvretaferme/main/static/css/reboot.css ===== */
*, *::before, *::after {
	box-sizing: border-box;
}

:root {

	--info: #e1eaff;
	--careful: #d4aa00;
	--warning: #cb6503;
	--danger: #dc3545;
	--text: #212529;
	--text-intermediate: #5F5F5F;
	--success: #198754;
	/* Le gris atténué descend jusque sur le rang foncé de `util-table-even` (#f2f2f5) et sur le fond
	   d'une carte (#ececef) : c'est le fond le plus sombre qu'il rencontre qui fixe sa valeur, et non
	   le blanc. Mesuré le 2026-09-23, #7a7a80 y tenait 3,82:1 et 3,62:1, sous la barre de 4,5:1 que
	   demande un texte de 14,4px. */
	--muted: #6b6b70;
	--border: #ddd;
	--border-light: #F2F2F2;
	--radius: .75rem;
	/* La cible d'un doigt, en px et non en rem : la racine descend à 12px sur un téléphone, où
	   2,75rem ne vaudraient plus que 33px, juste là où la cible compte le plus. */
	--touch-target: 44px;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--space-xxs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-xxl: 3rem;
	--footer-margin-top: var(--space-xl);
	--gradient: linear-gradient(to top, transparent 0, #8882 100%);

	--link: #0D1F8E;
	--soil: #48372f;
	--harvest: #2e71b5;
	--order: #7e1661;
	--todo: slategray;
	--done: teal;
	--muted-light: #d5d5d5;
	--selling: #722583;
	--basket: #b17e2f;
	--background-body-neutral: #f5f6f7;
	--background-body: var(--background-body-neutral);
	--background: #ececef;
	--background-dark: #e9e9eb;
	--background-light: #fafafa;
	--background-surface: white;
	--background-odd: #fcfcfe;
	--background-even: #f2f2f5;
	--background-game: #f7ecda;
	--background-hover: var(--secondary-highlight);
	--background-column-hover: color-mix(in srgb, var(--color-brand) 6%, transparent);
	--primary: #373737;
	--secondary: var(--commercialisation);
	--secondary-light: var(--commercialisation-light);
	--secondary-neutral: var(--commercialisation-neutral);
	--secondary-highlight: #44447007;
	--highlight: #fffd71;
	--shop: #006d6b;
	--dark: #212529;
	--pro: #008874;
	--private: #527a00;
	--production: #095a41;
	--production-light: #0f8c66;
	--production-neutral: #CCE2D1;
	--open-field: #095a41;
	--open-field-background: #CCE2D1;
	--greenhouse: #8a5a00;
	--greenhouse-background: #fde9c8;
	--nitrogen: var(--production);
	--phosphate: var(--order);
	--potash: var(--harvest);
	--commercialisation: #444470;
	--commercialisation-light: #5B6EDF;
	--commercialisation-neutral: #ccd6e2;
	--accounting: #135266;
	--accounting-light: #22829f;
	--accounting-neutral: #ccdde2;
	--accounting-background: #f9fafc;
	--settings: #5c3d70;
	--settings-light: #8747b1;
	--settings-neutral: #decce2;
	--amap: #741b36;
	--amap-light: #a82e53;
	--amap-neutral: #e1cbd3;
	--community: var(--primary);
	/* L'encre posée sur --primary et sur --community. Un jeton et non `white` en dur :
	   une couleur choisie par un groupe peut être claire, et le blanc y disparaît. */
	--primary-ink: white;
	--community-ink: white;
	--game: #7a1b1b;
	--account-group: #FDE9D9;
	--system: linear-gradient(to right, var(--commercialisation) 0, var(--production) 50%, var(--accounting) 100%);
	--superpdp: blue;
	--facturation-electronique: #002EBD;

	--draft: var(--todo);
	--confirmed: var(--order);
	--prepared: var(--done);
	--delivered: var(--success);

	--plant: var(--success);
	--animal: #ada779;
	--food: #b17e2f;
	--product: var(--prepared);
	--composition: var(--order);
	--shipping: black;
	--service: #5a720e;
	--other: black;

	--ach: var(--todo);
	--ven: var(--order);
	--ban: var(--done);
	--ks: var(--success);
	--od: var(--harvest);

	--color-brand: #1D4B53;
	--color-brand-25: color-mix(in srgb, var(--color-brand) 25%, transparent);
	--color-brand-50: color-mix(in srgb, var(--color-brand) 50%, transparent);
	--color-brand-75: color-mix(in srgb, var(--color-brand) 75%, transparent);

	--color-lavande: #8290FD;
	--color-neon: #00D8A8;
	--color-terracota: #B6231A;
	--color-neutral-variant: #CCE2D1;
	--color-neutral: #5C5F5F;
	--color-gris-charbon-fonce: #5D5D5D;
	--color-gris-charbon-clair: #676767;
	--color-vert-sauvage: #A8B9AB;

	--color-reference: #004E5A;
	--color-vert-emeraude: #2FBB75;
	--color-bg-otf: var(--color-brand);
	--color-bg-vert-amande: #EBF7E1;
	--color-bg-vert-menthe: #E1F7E8;
	--color-bg-vert-bleu: #E6FBF7;
	--color-bg-vert-sauge: #B0CCC3;
	--color-bg-blanc-menthe: #F3FDFB;
	--color-bg-blanc-gris: #F5F8F9;

	--color-text-main:var(--color-brand);
	--color-text-vert-accent: var(--color-vert-emeraude);

	--criterion-production: var(--color-vert-emeraude);
	--criterion-resistance: var(--color-reference);
	--criterion-work: var(--soil);
	--criterion-quality: var(--color-lavande);

	--font-title: 'Bricolage Grotesque', sans-serif;
	--font-lead-text: 'Bitter', serif;
	--font-text: 'DM Sans', sans-serif;

	--shadow-vert: 0 0.9rem 1.85rem rgba(47, 187, 158, 0.08);

	--util-chip-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235C5F5F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--util-chip-caret-secondary: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23444470' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--util-chip-caret-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

	--shadow-v2: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
	--shadow-v2-selected: 0 4px 20px 0 rgba(0, 0, 0, 0.18);
}

@media (min-width: 576px) {

	:root {
		--box: 0.375rem 0.375rem 0.25rem #5551;
		--box-hover: 0.5rem 0.5rem 0 #4441;
		--box-selected: 0.5rem 0.5rem 0 #0002;
	}

}

@media (max-width: 575px) {

	:root {
		--box: 0.25rem 0.25rem 0.175rem #5551;
		--box-hover: 0.375rem 0.375rem 0 #4441;
		--box-selected: 0.375rem 0.375rem 0 #0002;
	}

}

::selection {
	color: var(--primary);
	background: #e5e5f3;
}

html {
	font-size: 13px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (min-width: 1600px) and (min-height: 992px) {

	html {
		font-size: 15px;
	}

	@media (min-width: 1800px) {

		html {
			font-size: 16px;
		}

	}

	@media (min-width: 2000px) {

		html {
			font-size: 17px;
		}

	}

	@media (min-width: 2400px) {

		html {
			font-size: 18px;
		}

	}

}

@media (min-width: 1400px) and (max-width: 1599px) and (min-height: 992px) {

	html {
		font-size: 16px;
	}

}

@media (min-width: 1400px) and (max-height: 992px) {

	html {
		font-size: 15px;
	}

}

@media (min-width: 1300px) and (max-width: 1399px) {

	html {
		font-size: 15px;
	}

}

@media (min-width: 1200px) and (max-width: 1299px) {

	html {
		font-size: 13px;
	}

}

@media (min-width: 360px) and (max-width: 449px) {

	html {
		font-size: 12px;
	}

}

@media (max-width: 359px) {

	html {
		font-size: 11px;
	}

}

body {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text);
}

p {
	margin-top: 0;
	margin-bottom: 0.66rem;
}

p:has(+ h1),
p:has(+ h2),
p:has(+ h3),
p:has(+ h4),
p:has(+ h5),
p:has(+ h6) {
	margin-bottom: 1rem;
}

[data-href],
a {
	cursor: pointer;
	color: var(--secondary-on-light, var(--secondary));
	text-decoration: none;
}

[data-href]:hover,
a:hover {
	text-decoration: underline;
	color: inherit;
}

a.readonly {
	cursor: default;
}

label {
	display: inline-block;
	margin-bottom: 0;
}

pre {
	margin-bottom: 0.35rem;
}

address {
	font-weight: normal;
	font-style: normal;
	line-height: 1.2;
}

img, svg {
	vertical-align: middle;
}

ol, ul {
	margin-top: 0;
	margin-bottom: .75rem;
	padding-left: 2rem;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0 0 1rem 0;
	line-height: 1.2;
}

h5, h6 {
	font-weight: normal;
	margin-bottom: 0.5rem;
}

hr {
	border-top: 1px solid var(--border);
	margin-top: 2rem;
	margin-bottom: 2rem;
}

code {
	background: rgba(0, 0, 0, 0.05);
	border-radius: var(--radius);
	padding: 1rem;
	display: block;
	/* Un chemin ou une commande n'a pas de point de césure : sans cela, il pousse la page et fait
	   défiler tout l'écran de côté. */
	overflow-wrap: anywhere;
}


address {
	margin: 0.5rem 0 0.5rem 1rem;
	border-left: 2px solid var(--border);
	padding-left: 1rem;
}

:root {
	--radius-stick-lg: var(--radius);
	--radius-stick-md: var(--radius);
	--radius-stick-sm: var(--radius);
	--radius-stick-xs: var(--radius);
}

table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
}

@media screen {

	table:not(.table-unstyled) {
		background-color: white;
		border-radius: var(--radius);
		box-shadow: var(--shadow-v2);
	}

	table:not(.table-unstyled) thead {
		border-bottom: 2px solid var(--secondary-neutral);
	}

}

table:not(.table-unstyled) tr > *:first-child {
	padding-left: 1rem;
}

table:not(.table-unstyled) tr > *:last-child {
	padding-right: 1rem;
}

@media (min-width: 1600px) {

	table:not(.table-unstyled) tr > *:first-child {
		padding-left: 1.5rem;
	}

	table:not(.table-unstyled) tr > *:last-child {
		padding-right: 1.5rem;
	}

}

.panel-dialog table:not(.table-unstyled),
.util-block table:not(.table-unstyled),
.util-card table:not(.table-unstyled),
.util-deck-fold table:not(.table-unstyled) {
	box-shadow: none;
}

table:not(.table-unstyled):not(.tr-even) tbody td,
table:not(.table-unstyled):not(.tbody-even) tbody th {
	background-color: var(--background-odd);
}

table:not(.table-unstyled):not(:has(thead)) tbody:first-child td:first-child {
	border-top-left-radius: var(--radius);
}

table:not(.table-unstyled):not(:has(thead)) tbody:first-child td:last-child {
	border-top-right-radius: var(--radius);
}

table:not(.table-unstyled) tbody:last-child tr:last-child td:first-child {
	border-bottom-left-radius: var(--radius);
}

table:not(.table-unstyled) tbody:last-child tr:last-child td:last-child {
	border-bottom-right-radius: var(--radius);
}

/* Une dernière ligne masquée garde son :last-child : le rayon se posait alors sur une ligne que
   personne ne voit, et le bas du tableau redevenait carré. Il se reporte sur la dernière ligne
   réellement affichée. Cas courant d'un tableau de saisie dont la ligne vierge se replie. */
table:not(.table-unstyled) tbody:last-child tr:has(+ tr:last-child.hide) > *:first-child {
	border-bottom-left-radius: var(--radius);
}

table:not(.table-unstyled) tbody:last-child tr:has(+ tr:last-child.hide) > *:last-child {
	border-bottom-right-radius: var(--radius);
}


/* Un en-tête de tableau nomme la colonne, il ne la commente pas : capitales et
   gris le rangent au niveau d'une étiquette, sous le contenu qu'il annonce. Sans
   letter-spacing — l'espacement des capitales rend bien sur trois mots d'affiche,
   pas sur sept intitulés d'un tableau qu'on parcourt. */
table th {
	padding: 0.75rem 0.5rem;
	text-align: left;
	vertical-align: bottom;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--text-intermediate);
}

table:not(.table-unstyled) thead > * > * {
	background-color: white;
}

table:not(.table-unstyled) thead > *:first-child > *:first-child {
	border-top-left-radius: var(--radius);
}

table:not(.table-unstyled) thead > *:first-child > *:last-child {
	border-top-right-radius: var(--radius);
}

.stick-lg {

	table {
		border-collapse: separate;
		border-spacing: 0;
		border-radius: var(--radius-stick-lg);
	}

	table thead > *:first-child > *:first-child {
		border-top-left-radius: var(--radius-stick-lg);
	}

	table thead > *:first-child > *:last-child {
		border-top-right-radius: var(--radius-stick-lg);
	}

}

.stick-md {

	table {
		border-radius: var(--radius-stick-md);
	}

	table thead > *:first-child > *:first-child {
		border-top-left-radius: var(--radius-stick-md);
	}

	table thead > *:first-child > *:last-child {
		border-top-right-radius: var(--radius-stick-md);
	}

}

.stick-sm {

	table {
		border-radius: var(--radius-stick-sm);
	}

	table thead > *:first-child > *:first-child {
		border-top-left-radius: var(--radius-stick-sm);
	}

	table thead > *:first-child > *:last-child {
		border-top-right-radius: var(--radius-stick-sm);
	}

}

.stick-xs {

	table {
		border-radius: var(--radius-stick-xs);
	}

	table thead > *:first-child > *:first-child {
		border-top-left-radius: var(--radius-stick-xs);
	}

	table thead > *:first-child > *:last-child {
		border-top-right-radius: var(--radius-stick-xs);
	}

}

table td {
	padding: 0.5rem;
	vertical-align: baseline;
}

table tr.td-padding-xs td,
table.td-padding-xs td {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

@media (min-width: 1400px) {

	table td {
		padding: 0.5rem;
	}

	table th {
		padding: 1rem 0.5rem;
	}

}

table tr {
	transition: background-color 0.25s;
}

table.tbody-hover tbody:hover tr > * {
	background-color: rgba(0, 0, 0, 0.03) !important;
}

table.tbody-even tbody:nth-of-type(odd) tr > * {
	background-color: var(--background-odd);
}

table.tbody-even tbody:nth-of-type(even) tr > * {
	background-color: var(--background-even);
}

/* Un groupe de lignes : une tête (tbody.tbody-group) et ses enfants (tbody.tbody-group-sub), qui
   se lisent comme une seule bande. La règle ci-dessus compte le tbody des enfants, même replié, et
   décale l'alternance de tout ce qui suit un groupe : elle se recompte donc sans lui, et les
   enfants prennent le fond de leur tête. Les lignes enfants portent tr-sub pour le retrait. */
table.tbody-even > tbody:nth-child(odd of tbody:not(.tbody-group-sub)) > tr > *,
table.tbody-even > tbody:nth-child(odd of tbody:not(.tbody-group-sub)) + tbody.tbody-group-sub > tr > * {
	background-color: var(--background-odd);
}

table.tbody-even > tbody:nth-child(even of tbody:not(.tbody-group-sub)) > tr > *,
table.tbody-even > tbody:nth-child(even of tbody:not(.tbody-group-sub)) + tbody.tbody-group-sub > tr > * {
	background-color: var(--background-even);
}

tbody.tbody-group > tr > td:first-child,
tbody.tbody-group-sub > tr > td:first-child {
	border-left: 3px solid var(--secondary);
}

tbody.tbody-group > tr:first-child > * {
	border-top: 1px solid var(--border);
}

tbody.tbody-group-sub > tr + tr > * {
	border-top: 1px dashed var(--border);
}

tbody.tbody-group-sub > tr:last-child > * {
	border-bottom: 1px solid var(--border);
}

/* Défait le `font-size` et la `color` que `tr.tr-sub > td` impose plus bas à toute sous-ligne :
   l'enfant d'un groupe est un objet de plein droit, pas une ligne de détail. `inherit` et non une
   valeur, c'est ce que la cellule porterait sans cette règle. */
tbody.tbody-group-sub > tr.tr-sub > td {
	font-size: inherit;
	color: inherit;
}

tbody.tbody-group tr.tr-title {
	font-weight: normal;
}

/* Un fond de ligne se peint sur les cellules, jamais sur le <tr>.
   Les coins arrondis du bas du tableau sont posés sur les td (border-collapse interdit de les
   poser ailleurs) : un fond porté par la ligne s'étale par-dessus et rend le bas carré. Le défaut
   ne se voyait qu'au repos — au survol, --background-hover est presque transparent et laissait
   réapparaître le fond arrondi du tableau. */
table.tr-hover tbody tr:hover > * {
	background-color: var(--background-hover) !important;
}

table.tbody-hover tbody:hover tr > * {
	background-color: var(--background-hover) !important;
}

/* Le :not() empêche un intertitre de prendre une couleur d'alternance, il ne l'empêche pas d'être
   compté : nth-of-type compte tous les tr du tbody. Chaque titre intercalé décalait donc la parité
   de tout ce qui le suit, jusqu'à donner deux rangs voisins du même fond de part et d'autre du
   titre (mesuré le 2026-09-20). Le `of` recompte sur les seules lignes de données, comme
   tbody-even plus haut, et rend la sélection elle-même : les :not() n'ont plus à être répétés.
   Comme ils sont entrés dans le `of`, qui ajoute la spécificité de son argument, le sélecteur
   pèse un type de moins qu'avant : une surcharge d'état lui passe devant plus facilement,
   jamais l'inverse (mesuré le 2026-09-20). */
table.tr-even tbody tr:nth-child(even of tr:not(.tr-title):not(.tr-sub)) > * {
	background-color: var(--background-even);
}

table.tr-even tbody tr:nth-child(odd of tr:not(.tr-title):not(.tr-sub)) > * {
	background-color: var(--background-odd);
}

table.tr-bordered tr:not(.tr-title) {
	border-bottom: 1px dashed var(--border);
}

tr.row-highlight > * {
	background-color: var(--background-dark) !important;
}

tr.tr-upper,
tr.tr-upper td,
tr.tr-upper th {
	text-transform: uppercase;
}

tr.tr-bold > th,
tr.tr-bold > td {
	font-weight: bold;
}
tr.tr-light > td {
	opacity: 0.5;
}

tr.tr-title {
	font-weight: 550;
	color: var(--text);
	border-bottom: 1px solid var(--border);
}

tr.tr-title > * {
	background-color: var(--background-odd);
}

tr.tr-title td,
tr.tr-title th {
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	letter-spacing: 0.5px;
}

tr.tr-title h3,
tr.tr-title h4 {
	text-transform: none;
	margin: 0.5rem 0;
}

tr.tr-sub > td {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	font-size: 0.9rem;
	color: var(--text-intermediate);
}

tr.tr-sub > td:first-child {
	padding-left: 2rem;
}

table.tr-even tbody tr.tr-sub > * {
	background-color: var(--background-odd);
}

@media (max-width: 767px) {

	tr.tr-sub > td:first-child {
		padding-left: 1.25rem;
	}

}

tr.tr-disabled {
	opacity: 0.5;
}

.td-bold {
	font-weight: bold;
}


thead.thead-sticky {
	position: sticky;
	top: var(--mainSticky);
	z-index: 99; /* Doit passer sous la nav */
}

/* Les écrans d'administration sont en gabarit « base » : leur barre du haut est `#root-nav`, collée
   à 0 et haute de `--nav-main`. `--mainSticky` y vaut 0, il décrit la colonne latérale d'une
   structure, que ces écrans n'ont pas. */
[data-admin] thead.thead-sticky {
	top: var(--nav-main);
}

/* Le pendant de util-table-sticky-column pour une <table>. Pas de fond ici : tr-even et la règle
   par défaut le posent déjà sur chaque cellule de tbody. L'en-tête n'en a pas, d'où la règle
   suivante, et une table-unstyled donne le sien à sa première colonne. Une cellule fusionnée qui
   ouvre un rang défile : fixée, elle recouvrirait les colonnes qu'elle chapeaute. */
table.td-sticky-first tr > :first-child:not([colspan]) {
	position: sticky;
	left: 0;
	z-index: 1;
	box-shadow: 0.25rem 0 0.25rem -0.25rem color-mix(in srgb, var(--text) 35%, transparent);
}

table.td-sticky-first thead tr > :first-child:not([colspan]) {
	background-color: var(--background-surface);
}

/* --background-hover est presque transparent : sur la cellule fixe, il laisserait voir les colonnes
   qui défilent dessous. Il se peint en calque sur le fond du tableau. */
table.td-sticky-first.tr-hover tbody tr:hover > :first-child:not([colspan]),
table.td-sticky-first.tbody-hover tbody:hover tr > :first-child:not([colspan]) {
	background-color: var(--background-surface) !important;
	background-image: linear-gradient(var(--background-hover), var(--background-hover));
}

/* Le pendant pour une util-table, dont l'en-tête n'est pas un thead. Le fond est de la règle et non
   de l'appelant : un en-tête collant sans fond laisse passer les rangées à travers, donc il n'y a pas
   d'écran où l'omettre soit juste. Un tableau qui veut un autre fond le pose sur sa propre classe,
   comme `util-table-seeds` plus bas dans component.css. */
.util-table-sticky > .util-table-head {
	position: sticky;
	top: var(--mainSticky);
	z-index: 99;
	background-color: var(--background-surface);
}

[data-admin] .util-table-sticky > .util-table-head {
	top: var(--nav-main);
}

/* Une page publique n'a que la barre du gabarit « base », haute de --nav-base-height à toute largeur :
   --mainSticky y réserverait une barre de structure absente, --nav-main une hauteur qui n'est pas la sienne.
   Cette barre est à z-index 10 (template-base.css) et non 100 comme en administration : à 99, l'en-tête que
   la fin du tableau repousse vers le haut passerait par-dessus. */
[data-template~="presentation"] .util-table-sticky > .util-table-head {
	top: var(--nav-base-height);
	z-index: 9;
}

/* La cellule fixe prend le fond de son rang, alternance comprise : sans fond, les colonnes
   défileraient à travers elle. Son `::after` couvre la gouttière qui la suit, où les cellules défilantes
   passeraient sinon, et porte le filet d'ombre qui dit que quelque chose passe dessous. Elle s'étire
   sur la hauteur du rang, que l'alignement sur la ligne de base laisserait à celle de son texte : une
   cellule voisine sur deux lignes resterait visible sous elle. */
.util-table-sticky-column > .util-table-head {
	background-color: var(--table-head-background, var(--background-surface));
}

.util-table-sticky-column > * > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	align-self: stretch;
	background-color: inherit;
}

/* Une cellule fixe d'en-tête s'étire pour porter le fond sur toute la hauteur de la barre : son
   texte redescend au pied, là où `align-self: end` posait les autres. */
.util-table-sticky-column > .util-table-head > :first-child {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.util-table-sticky-column > * > :first-child::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 0.5rem;
	background-color: inherit;
	box-shadow: 0.25rem 0 0.25rem -0.25rem color-mix(in srgb, var(--text) 35%, transparent);
}

/* `MainStickyColumn` (main/static/js/stickyColumnAi.js) pose `is-fitted` quand l'enveloppe n'a rien à
   faire défiler. L'ombre est posée par la feuille et le script l'éteint, dans ce sens et pas l'autre :
   un écran qui ne charge pas le script garde le rendu d'avant, jamais une colonne dont le filet
   annonce un défilement qui n'existe pas. */
.util-table-sticky-column.is-fitted > * > :first-child::after {
	box-shadow: none;
}

/* Dans un conteneur qui défile en largeur, l'en-tête colle à ce conteneur et non plus à la page :
   il ne suit plus la lecture, et `--mainSticky` le fait glisser sur les premières lignes. */
.util-overflow thead.thead-sticky {
	position: relative;
	top: 0;
}

.util-overflow-frame thead.thead-sticky {
	top: 0;
}

@media (max-width: 449px) {

	.util-overflow-xs thead.thead-sticky {
		position: relative;
		top: 0;
	}

}

@media (max-width: 575px) {

	.util-overflow-sm thead.thead-sticky,
	.util-overflow-frame thead.thead-sticky {
		position: relative;
		top: 0;
	}

}

@media (max-width: 767px) {

	.util-overflow-md thead.thead-sticky {
		position: relative;
		top: 0;
	}

}

@media (max-width: 991px) {

	.util-overflow-lg thead.thead-sticky {
		position: relative;
		top: 0;
	}

}

@media (max-width: 1199px) {

	.util-overflow-xl thead.thead-sticky {
		position: relative;
		top: 0;
	}

}

div.div-even > *:nth-of-type(even) {
	background-color: white;
}

div.div-even > *:nth-of-type(odd) {
	background-color: var(--background-odd);
}

/* Un voile, pas une couleur : --secondary-highlight est à 2,7 % d'alpha et n'a de sens que
   superposé au fond de la ligne. En background-color il occupe la même couche que le zébrage, qui
   peint désormais les cellules — les deux s'excluent au lieu de se composer, et la colonne
   surlignée restait blanche pendant que sa ligne grisait. En background-image il se pose par-dessus
   le fond, quel qu'il soit : zébrage, survol ou ligne mise en avant. Le !important devient inutile,
   les deux propriétés ne se disputant plus rien. */
td.t-highlight {
	background-image: linear-gradient(var(--secondary-highlight), var(--secondary-highlight));
}

@media (max-width: 1399px) {

	.stick-xl {
		width: var(--screen-width);
		transform: translate3d(calc(-1 * var(--container-xl-padding)), 0, 0);
		border-radius: 0 !important;
	}

}

@media (max-width: 1199px) {

	.stick-lg {
		width: var(--screen-width);
		transform: translate3d(calc(-1 * var(--container-lg-padding)), 0, 0);
		border-radius: 0 !important;
	}

	:root {
		--radius-stick-lg: 0;
	}

}

@media (max-width: 991px) {

	.stick-lg,
	.stick-md {
		width: var(--screen-width);
		transform: translate3d(calc(-1 * var(--container-md-padding)), 0, 0);
		border-radius: 0 !important;
	}

	:root {
		--radius-stick-lg: 0;
		--radius-stick-md: 0;
	}

}

@media (max-width: 767px) {

	.stick-lg,
	.stick-md,
	.stick-sm {
		width: var(--screen-width);
		transform: translate3d(calc(-1 * var(--container-sm-padding)), 0, 0);
		border-radius: 0 !important;
	}

	.stick-lg table,
	.stick-md table,
	.stick-sm table {
		border-radius: 0 !important;
	}

	:root {
		--radius-stick-lg: 0;
		--radius-stick-md: 0;
		--radius-stick-sm: 0;
	}

}

@media (max-width: 575px) {

	.stick-lg,
	.stick-md,
	.stick-xs,
	.stick-sm {
		width: var(--screen-width);
		transform: translate3d(calc(-1 * var(--container-xs-padding)), 0, 0);
		border-radius: 0 !important;
	}

	:root {
		--radius-stick-lg: 0;
		--radius-stick-md: 0;
		--radius-stick-sm: 0;
		--radius-stick-xs: 0;
	}

}

ul.list-inline {
	margin-bottom: 0px;
}

/* Forms */
input, button, select, optgroup, textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button, select {
	text-transform: none;
}

button {
	cursor: pointer;
}

.click-waiting {
	opacity: 0.5;
	pointer-events: none;
}

.opacity-100 {
	opacity: 1;
}

.opacity-75 {
	opacity: .75;
}

.opacity-50 {
	opacity: .5;
}

.opacity-25 {
	opacity: .25;
}

.fs-2 {
	font-size: 2rem;
}

.fs-3 {
	font-size: 3rem;
}

.pt-0 {
	padding-top: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: 1rem !important;
}

.mt-2 {
	margin-top: 2rem !important;
}

.mt-3 {
	margin-top: 3rem !important;
}

.mt-4 {
	margin-top: 4rem !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

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

.mb-1 {
	margin-bottom: 1rem !important;
}

.mb-2 {
	margin-bottom: 2rem !important;
}

.mb-3 {
	margin-bottom: 3rem !important;
}

.mb-4 {
	margin-bottom: 4rem !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-1 {
	margin-left: 1rem !important;
}

.ml-2 {
	margin-left: 2rem !important;
}

.ml-3 {
	margin-left: 3rem !important;
}

.ml-4 {
	margin-left: 4rem !important;
}

.ml-5 {
	margin-left: 5rem !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-1 {
	margin-right: 1rem !important;
}

.mr-2 {
	margin-right: 2rem !important;
}

.mr-3 {
	margin-right: 3rem !important;
}

.mr-4 {
	margin-right: 4rem !important;
}

.mr-5 {
	margin-right: 5rem !important;
}

.font-xl {
	font-size: 120%;
}

.font-lg {
	font-size: 110%;
}

.font-md {
	font-size: 100%;
}

.font-sm {
	font-size: 90%;
}

.font-xs {
	font-size: 80%;
}

input[type=checkbox], input[type=radio] {
	box-sizing: border-box;
	padding: 0;
	vertical-align: middle;
}

/* Text */
.text-sm {
	font-size: 0.9rem;
}

/* Icon */

.asset-icon {
	display: inline-block;
	width: calc(1em + 1px);
	min-width: calc(1em + 1px);
	margin-top: -0.125rem;
	height: 1em;
	pointer-events: none;
	/* Le symbole est mis à l'échelle pour tenir exactement dans la boîte : sans overflow visible,
	   une hauteur fractionnaire (1em de 11,7px par exemple) fait rogner sa dernière rangée de pixels */
	overflow: visible;
}

.asset-icon-lg {
	font-size: 1.2em;
}

.asset-icon-rotate-90 {
	transform: rotate(90deg);
}

.asset-icon-rotate--90 {
	transform: rotate(-90deg);
}

.asset-icon-flip-h {
	transform: scaleX(-1);
}

.asset-icon-flip-v {
	transform: scaleY(-1);
}

/* Containers */
:root {

	--container-xs-padding: 0.5rem;
	--container-sm-padding: 1rem;
	--container-md-padding: 1.5rem;
	--container-lg-padding: 1.5rem;
	--container-xl-padding: 1.5rem;
	--container-xxl-padding: 2rem;

	--container-width: calc(var(--screen-width) - 2 * var(--container-padding) - var(--nav-width));

}

@media (max-width: 575px) {

	:root {
		--container-padding: var(--container-xs-padding);
	}

}

@media (min-width: 576px) and (max-width: 767px) {

	:root {
		--container-padding: var(--container-sm-padding);
	}

}

@media (min-width: 768px) and (max-width: 991px) {

	:root {
		--container-padding: var(--container-md-padding);
	}

}

@media (min-width: 992px) and (max-width: 1199px) {

	:root {
		--container-padding: var(--container-lg-padding);
	}

}

@media (min-width: 1200px) and (max-width: 1599px) {

	:root {
		--container-padding: var(--container-xl-padding);
	}

}

@media (min-width: 1600px) {

	:root {
		--container-padding: var(--container-xxl-padding);
	}

}

@media (max-width: 575px) {

	:root {
		--responsive-padding: var(--container-xs-padding);
	}

}

@media (min-width: 576px) {

	:root {
		--responsive-padding: 1rem;
	}

}

.container {
	width: var(--screen-width);
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

@media (max-width: 449px) {

	.hide-xxs-down {
		display: none !important;
	}

}

@media (max-width: 575px) {

	.hide-xs-down {
		display: none !important;
	}

}

@media (min-width: 450px) {

	.hide-xs-up {
		display: none !important;
	}

}

@media (min-width: 576px) {

	.hide-sm-up {
		display: none !important;
	}

}

@media (max-width: 767px) {

	.hide-sm-down {
		display: none !important;
	}

}

@media (min-width: 768px) {

	.hide-md-up {
		display: none !important;
	}

}

@media (max-width: 991px) {

	.hide-md-down {
		display: none !important;
	}

}

@media (min-width: 992px) {

	.hide-lg-up {
		display: none !important;
	}

}

@media (max-width: 1199px) {

	.hide-lg-down {
		display: none !important;
	}

}

@media (max-width: 1599px) {

	.hide-xl-down {
		display: none !important;
	}

}

@media (max-width: 1099px), (max-height: 599px) {

	.hide-lateral-down {
		display: none !important;
	}

}

@media (min-width: 1200px) {

	.hide-xl-up {
		display: none !important;
	}

}
@media (min-width: 1600px) {

	.hide-xxl-up {
		display: none !important;
	}

}

@media (min-width: 1100px) and (min-height: 600px) {

	.hide-lateral-up {
		display: none !important;
	}

}

.hide {
	display: none !important;
}

.panel-dialog .hide-panel-in {
	display: none !important;
}

:not(.panel-dialog) .hide-panel-out {
	display: none !important;
}

.not-visible {
	visibility: hidden;
}

body:not([data-touch="no"]) .hide-touch {
	display: none !important;
}

body:not([data-touch="yes"]) .hide-notouch {
	display: none !important;
}

.util-quick {
	display: inline-block;
	border-bottom: 2px dotted transparent;
	margin-bottom: -2px;
}

.util-quick:not(:has(.btn)) {
	padding-bottom: var(--space-xxs);
}

a.util-quick {
	color: inherit;
}

.util-quick:hover:not(:has(.btn)) {
	text-decoration: none;
	border-color: var(--primary);
	cursor: pointer;
}

.util-quick-dropdown {
	padding: 1rem;
	background-color: var(--primary);
	color: white;
	max-width: 30rem;
}

.util-quick-form {
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 0.5rem;
	justify-items: stretch;
}

.util-quick-form h4 {
	margin-bottom: 0;
}

table th,
.util-table-header,
.util-table-head > * {
	font-size: 0.9rem;
	align-self: end;
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-weight: 550;
	line-height: 1.3;
	text-transform: var(--table-head-case, uppercase);
	color: var(--table-head-color, var(--text-intermediate));
}


/* Un tableau en grille.

   Même châssis et mêmes couleurs qu'un `table`, mais les colonnes sont déclarées
   dans la feuille de style plutôt que par le balisage : une media query peut donc
   les redistribuer, là où un tableau n'a que le débordement horizontal à offrir
   quand la fenêtre se resserre.

   L'usage pose `grid-template-columns` sur `.util-table` ; les lignes reprennent
   ces pistes en `subgrid` et n'ont rien à en savoir. Chacune reste **un seul
   élément** : c'est ce qui lui permet de porter le survol, l'alternance et, en
   repli, la redistribution de ses propres cellules sur deux rangs.

	<div class="util-table util-table-even" style="grid-template-columns: 1fr 8rem">
		<div class="util-table-head"><div>Produit</div><div>Prix</div></div>
		<div class="util-table-title">Légumes</div>
		<div class="util-table-row"><div>Carotte</div><div>2,50 €</div></div>
	</div> */
.util-table {
	display: grid;
	margin-bottom: 1rem;
}

@media screen {

	.util-table {
		box-shadow: var(--shadow-v2);
		background-color: var(--background-surface);
		border-radius: var(--radius);
	}

}

.util-table-head,
.util-table-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
}

/* Comme `vertical-align: baseline` sur une cellule : ce qui s'aligne d'une
   colonne à l'autre, c'est le texte, pas le haut des cellules. */
.util-table-row {
	align-items: baseline;
	transition: background-color 0.25s;
	background-color: var(--background-odd);
}

:where(.util-table-row) {
	border-bottom: var(--table-row-border, 0);
}

.util-table-head {
	border-bottom: var(--table-head-border, 2px solid var(--secondary-neutral));
}

.util-table-row > * {
	padding: 0.5rem;
}

/* Le vertical de l'en-tête vient de sa typographie, plus haut : ne poser ici que
   l'horizontal, sinon le raccourci l'écrase et la barre d'en-tête perd la hauteur
   d'un `th`. */
.util-table-head > * {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

:where(.util-table-head > *) {
	background-color: var(--table-head-background, transparent);
}

.util-table-head > *:first-child,
.util-table-row > *:first-child,
.util-table-title {
	padding-left: 1rem;
}

.util-table-head > *:last-child,
.util-table-row > *:last-child {
	padding-right: 1rem;
}

@media (min-width: 1600px) {

	.util-table-head > *:first-child,
	.util-table-row > *:first-child,
	.util-table-title {
		padding-left: 1.5rem;
	}

	.util-table-head > *:last-child,
	.util-table-row > *:last-child {
		padding-right: 1.5rem;
	}

}

/* L'alternance, sur le modèle de `table.tr-even`. Le `of .util-table-row` n'est pas
   décoratif : `nth-of-type` compte les frères du même nom de balise, et l'en-tête
   comme les intertitres d'une grille sont des `div` au même titre que les rangs.
   Chaque intertitre décalait donc la parité de tout ce qui le suit, jusqu'à donner
   deux rangs voisins de la même couleur de part et d'autre d'un titre (mesuré le
   2026-09-20). La parité se compte sur les seuls rangs, et court d'un groupe au
   suivant : deux rangs consécutifs ne portent jamais le même fond. Le `of` pèse aussi : il
   ajoute la spécificité de son argument, et ce sélecteur est passé de trois classes à quatre.
   Une surcharge d'état posée sur un rang doit donc peser une classe de plus qu'avant, sans quoi
   elle cesse de peindre sans que rien ne lève. */
.util-table-even .util-table-row:nth-child(odd of .util-table-row) {
	background-color: var(--background-odd);
}

.util-table-even .util-table-row:nth-child(even of .util-table-row) {
	background-color: var(--background-even);
}

.util-table-hover .util-table-row:hover {
	background-color: var(--background-hover) !important;
}

/* Le pendant de `table.tr-bordered` : les lignes se séparent par un filet plutôt
   que par une alternance de fond. À préférer quand les cellules portent des
   champs de saisie — deux fonds qui alternent derrière des entrées blanches se
   lisent comme deux états, et on cherche lequel des deux veut dire quelque chose.

   Le filet est posé sur la ligne et non sur ses cellules : une grille en subgrid
   n'a pas de bordure de rang, et une bordure par cellule laisse des trous dans les
   gouttières. */
.util-table-bordered .util-table-row {
	border-bottom: 1px dashed var(--border);
}

.util-table-bordered .util-table-row:last-child {
	border-bottom: 0;
}

/* Le pendant de `tr.tr-title` : un intertitre sur toute la largeur. */
.util-table-title {
	grid-column: 1 / -1;
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	padding-right: 1rem;
	font-weight: 550;
	letter-spacing: 0.5px;
	color: var(--text);
	background-color: var(--background-odd);
	border-bottom: 1px solid var(--border);
}

/* Le pendant de `colspan` : une cellule qui prend toute la ligne. */
.util-table-full {
	grid-column: 1 / -1;
}

.util-table > *:first-child {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.util-table > *:last-child {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.td-min-content {
	width: 1%;
	white-space: nowrap;
}

.td-vignette {
	width: 1%;
	vertical-align: middle;
}


td.td-vertical-align-middle,
.td-vertical-align-middle td,
th.td-vertical-align-middle,
.td-vertical-align-middle th {
	vertical-align: middle;
}

td.td-vertical-align-top,
.td-vertical-align-top td,
th.td-vertical-align-top,
.td-vertical-align-top th {
	vertical-align: top;
}

tr:not(:last-child):has(> .td-border) .td-border {
	border-bottom: 1px dashed var(--border);
}

.td-checkbox {
	text-align: center;
	width: 1%;
}

.td-checkbox > label {
	display: flex;
	align-items: stretch;
	width: 3rem;
	justify-content: center;
	padding: 0.5rem;
	margin: -0.5rem;
	transform: translate(0, 0.25rem);
}

.td-checkbox > label input {
	width: 1.2rem;
	height: 1.2rem;
}

/* Flex */
.flex-wrap {
	flex-wrap: wrap;
}

.flex-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.flex-align-center {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.flex-justify-space-between {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

/* Text */
.text-start {
	text-align: left;
}
.text-end {
	text-align: right;
}
.text-center {
	text-align: center;
}

.text-upper {
	text-transform: uppercase;
}
.text-lower {
	text-transform: lowercase;
}
.text-ucfirst::first-letter {
	text-transform: capitalize;
}
/* Colors */
.color-text {
	color: var(--text) !important;
}
.color-primary {
	color: var(--primary) !important;
}
.color-secondary {
	color: var(--secondary) !important;
}
.color-info {
	color: var(--info) !important;
}
.color-success {
	color: var(--success) !important;
}
.color-success a {
	color: var(--success) !important;
	text-decoration: underline;
}
.color-danger {
	color: var(--danger) !important;
}
.color-danger a {
	color: var(--danger) !important;
	text-decoration: underline;
}
.color-careful {
	color: var(--careful) !important;
}
.color-careful a {
	color: var(--careful) !important;
	text-decoration: underline;
}
.color-warning {
	color: var(--warning) !important;
}
.color-warning a {
	color: var(--warning) !important;
	text-decoration: underline;
}
.color-muted {
	color: var(--muted) !important;
}
.color-muted-light {
	color: var(--muted-light) !important;
}
.color-white {
	color: white !important;
}

.color-selling {
	color: var(--selling);
}

.color-accounting {
	color: var(--accounting);
}

.color-commercialisation {
	color: var(--commercialisation);
}

.color-production {
	color: var(--production);
}

.color-settings {
	color: var(--settings);
}

.color-todo {
	color: var(--todo);
}

.color-pro {
	color: var(--pro);
}

.color-private {
	color: var(--private);
}

.color-game {
	color: var(--game);
}
.color-facturation-electronique {
	color: var(--facturation-electronique);
}

/* Background */
.bg-primary {
	background-color: var(--primary) !important;
}
.bg-secondary {
	background-color: var(--secondary) !important;
}
.bg-info {
	background-color: var(--info) !important;
}
.bg-success {
	background-color: var(--success) !important;
}
.bg-danger {
	background-color: var(--danger) !important;
}
.bg-warning {
	background-color: var(--warning) !important;
}
.bg-muted {
	background-color: var(--muted) !important;
}
.bg-background {
	background-color: var(--background) !important;
}
.bg-background-light {
	background-color: var(--background-light) !important;
}
.bg-background-body {
	background-color: var(--background-body) !important;
}
.bg-white {
	background-color: white !important;
}


.bg-neon {
	background-color: var(--color-neon) !important;
}

.bg-terracota {
	background-color: var(--color-terracota) !important;
}


.bg-harvest {
	background-color: var(--harvest) !important;
}
.bg-todo {
	background-color: var(--todo) !important;
}
.bg-done {
	background-color: var(--done) !important;
}
.bg-order {
	background-color: var(--order) !important;
}
.bg-selling {
	background-color: var(--selling) !important;
}
.bg-production {
	background-color: var(--production) !important;
}
.bg-open-field {
	background-color: var(--open-field) !important;
}
.bg-greenhouse {
	background-color: var(--greenhouse) !important;
}
.bg-commercialisation {
	background-color: var(--commercialisation) !important;
}
.bg-accounting {
	background-color: var(--accounting) !important;
}
.bg-settings {
	background-color: var(--settings) !important;
}

.bg-pro {
	background-color: var(--pro);
}

.bg-private {
	background-color: var(--private);
}

.bg-shop {
	background-color: var(--shop) !important;
}

.bg-game {
	background-color: var(--game) !important;
}

.bg-confirmed {
	background-color: var(--confirmed) !important;
}

.bg-prepared {
	background-color: var(--prepared) !important;
}

.bg-delivered {
	background-color: var(--delivered) !important;
}


/* Borders */

.border-accounting {
	border-color: var(--accounting) !important;
}
.border-danger {
	border: 1px solid var(--danger);
}
.border-warning {
	border: 1px solid var(--warning);
}
.border-success {
	border: 1px solid var(--success);
}

/* Annotation */

.annotation {
	font-size: 0.9rem;
	font-weight: bold;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

.annotation-lg {
	font-size: 1rem;
}


/* Waiter */
@keyframes waiterRotate {
	 0% { transform: rotate(0deg); }
	 100% { transform: rotate(360deg); }
}

.waiter {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #fffc;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4rem;
	color: var(--secondary);
}

.waiter .asset-icon {
	animation: waiterRotate 2s linear infinite;
}


/* Tabs */
.nav {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.nav.nav-background {
	background-color: #fafafa;
	border: 1px solid #eee;
	border-radius: 3px;
	margin-top: 1rem;
	padding: 0.75rem;
}

.emoji {
	height: 1.52em;
	width: 1.52em;
	margin: 0 .05em 0 .1em;
	vertical-align: -0.5em;
}


.h-menu,
.h-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary);
	color: white;
	border-radius: 50%;
	font-size: 75%;
	width: 2.75rem;
	height: 2.75rem;
	line-height: 1;
	margin-right: .5em;
	transition: background-color 0.5s;
}

@media print {

	.h-menu,
	.h-back {
		display: none;
	}

}

.h-menu-wrapper {
	font-size: 2rem;
	height: 2.75rem;
	display: inline-block;
}

@media (max-width: 575px) {

	.h-menu,
	.h-back {
		width: 2.5rem;
		height: 2.5rem;
	}

	.h-menu-wrapper {
		height: 2.5rem;
	}

}

@media (min-width: 449px) and (max-width: 575px) {

	.h-menu-wrapper {
		font-size: 2rem;
	}

}

@media (max-width: 449px) {

	.h-menu-wrapper {
		font-size: 1.75rem;
	}

}

a.h-back {
	text-decoration: none;
}

@media (max-width: 767px) {

	.h-back {
		display: none;
	}

}

.h-menu:hover,
.h-back:hover {
	color: white;
	background-color: var(--primary);
}

/* User settings  */


@media print {

	nav,
	header,
	footer {
		display: none !important;
	}

	.util-print-invisible {
		visibility: hidden !important;
	}

	.util-print-hide {
		display: none !important;
	}

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

	.util-print-break-after {
		page-break-after: always;
	}

	.util-print-break-inside-avoid {
		break-inside: avoid;
	}

}
/* ===== ouvretaferme/main/static/css/component.css ===== */

/* Button */

.btn-group-addon,
.btn {
	display: inline-block;
	font-weight: var(--button-weight, normal);
	line-height: 1;
	color: var(--text);
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.5rem 0.75rem;
	white-space: nowrap;
	font-size: 1rem;
	transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
	border-radius: calc(var(--radius) * 2);
}

:where(.btn) {
	text-transform: var(--button-case, none);
}

@media print {

	.btn {
		display: none !important;
	}

}

/* Une marque qui est aussi un bouton : `btn btn-badge` plus les classes de marque. Le poids et la
   teinte viennent de la marque, tout le reste du bouton — espacements, arrondi, survol, curseur,
   état désactivé, masquage à l'impression, tailles `btn-xs` à `btn-xl`.

   Cette règle ne rend au bouton que les trois propriétés que `.badge` lui reprend, `.badge` étant
   écrite plus bas dans cette feuille à spécificité égale. Elle est posée ici, **avant** les classes
   de taille : `.btn-badge` et `.btn-sm` pèsent pareil, c'est donc l'ordre d'écriture qui décide, et
   une taille doit rester plus forte que le défaut qu'on restaure. */
.btn.btn-badge {
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1;
	border-radius: calc(var(--radius) / 2);
	font-weight: 500;
}

.btn.btn-badge:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .05);
}

.btn:has(.badge) {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

.btn-group-addon {
	pointer-events: none;
}

.btn-group {
	display: inline-block;
}

.btn-group .btn:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-group .btn:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn-group .btn:not(:first-child) {
	margin-left: -1px;
}

@media print {

	.btn-group,
	.btn {
		display: none;
	}

}

.btn:not(.btn-readonly) {
	cursor: pointer;
}

.btn-readonly .btn,
.btn.btn-readonly {
	cursor: default;
}

.btn.disabled {
	pointer-events: none;
	opacity: 0.33;
}

.input-group .btn,
.input-group .btn.btn-sm,
.input-group .btn.btn-xs,
.input-group .btn.btn-xxs {
	border-radius: 0;
}

@media (max-width: 575px) {

	.btn.btn-panel {
		height: 3rem;
		width: 3rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.3rem;
	}

}

.btn.btn-xxs {
	padding: 0.15rem 0.25rem;
	font-size: 0.8rem;
}

.btn.btn-xxs:has(.badge) {
	padding-top: 0.08rem;
	padding-bottom: 0.08rem;
}

.btn.btn-xs {
	padding: 0.3rem 0.5rem;
	font-size: 0.85rem;
}

.btn.btn-xs:has(.badge) {
	padding-top: 0.175rem;
	padding-bottom: 0.175rem;
}

.btn.btn-sm {
	padding: 0.45rem 0.625rem;
	font-size: 0.9rem;
}

.btn.btn-sm:has(.badge) {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.btn.btn-lg {
	padding: 0.875rem 1rem;
	font-size: 1.1rem;
}

.btn.btn-lg:has(.badge) {
	padding-top: 0.675rem;
	padding-bottom: 0.675rem;
}

.btn.btn-xl {
	padding: 1.25rem 1.5rem;
	font-size: 1.1rem;
}

.btn.btn-xl:has(.badge) {
	padding-top: 1.05rem;
	padding-bottom: 1.05rem;
}

.btn:has(.btn-status),
.btn:has(.btn-status-fill) {

	position: relative;

}

.btn-status,
.btn-status-fill {
	line-height: 1;
	text-transform: uppercase;
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	right: -0.375rem;
	top: -0.5rem;
}

.btn-status {
	border: 1px solid var(--border);
	color: var(--text);
	background-color: white;
}

.btn-status-fill {
	color: white;
	background-color: var(--primary);
}

.btn.btn-sm .btn-status,
.btn.btn-sm .btn-status-fill,
.btn.btn-xs .btn-status,
.btn.btn-xs .btn-status-fill {
	right: -0.75rem;
	top: -0.625rem;
	font-size: 0.75rem;
}

.btn.btn-selected {
	font-weight: bold;
	background-color: var(--background-light);
	position: relative;
	z-index: 100;
}

.btn.dropdown-toggle:after {
	font-size: inherit;
}

a.btn {
	text-decoration: none;
}

label.btn input {
	display: none;
}

label.btn input:checked + * {
	font-weight: bold;
}

.btn-icon {
	font-size: 150%;
	margin-bottom: 0.5rem;
}

.btn.btn-form {
	color: var(--text);
	background-color: white;
	border: 1px solid var(--border);
}

/* Même poids que `.btn`, qu'elle doit suivre pour en remplacer le fond. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-muted {
	background-color: var(--button-outline-background, transparent);
}

.btn-primary,
.btn-outline-primary:not(.btn-readonly):hover {
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn-primary:not(.btn-readonly):hover,
.btn-brand:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-primary {
	color: var(--primary-on-light, var(--primary));
	border-color: var(--primary);
}

.btn-dashed {
	color: var(--muted);
	border-style: dashed;
	border-color: var(--border);
}

.btn-dashed:has(> svg:only-child) {
	padding: 0.5rem;
}

.btn-dashed.btn-xs:has(> svg:only-child) {
	padding: 0.25rem;
}

.btn-dashed:not(.btn-readonly):hover {
	color: var(--primary);
	border-color: var(--primary);
}

.btn-color-primary {
	background: rgba(255, 255, 255, 0.8);
	color: var(--primary);
}

.btn-color-primary:not(.btn-readonly):hover {
	background: var(--primary);
}

.btn-primary,
.btn-primary:hover,
.btn-color-primary:not(.btn-readonly):hover,
.btn-outline-primary:not(.btn-readonly):hover {
	color: var(--primary-ink);
}

.btn-secondary,
.btn-outline-secondary:not(.btn-readonly):hover {
	background-color: var(--secondary);
	border-color: var(--secondary);
}

.btn-secondary:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-secondary {
	color: var(--secondary-on-light, var(--secondary));
	border-color: var(--secondary);
}

.btn-secondary,
.btn-secondary:hover,
.btn-outline-secondary:not(.btn-readonly):hover {
	color: white;
}

.btn-brand,
.btn-outline-brand:not(.btn-readonly):hover {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.btn-outline-brand {
	color: var(--color-brand);
	border-color: var(--color-brand);
}

.btn-brand,
.btn-brand:hover,
.btn-outline-brand:not(.btn-readonly):hover {
	color: white;
}

.btn-secondary-light,
.btn-outline-secondary-light:not(.btn-readonly):hover {
	color: color-mix(in srgb, black 10%, var(--secondary-light) 90%);
	background-color: color-mix(in srgb, white 90%, var(--secondary-light) 10%);
}

.btn-outline-secondary-light {
	color: var(--secondary-light);
	border-color: var(--secondary-light);
}

.btn-secondary-light:not(.btn-readonly):hover {
	color: var(--secondary);
	box-shadow: inset 0px 0px 0 100px rgba(255, 255, 255, .1);
}

.btn-neon {
	background-color: var(--color-neon);
	border-color: var(--color-neon);
}

.btn-neon:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-neon,
.btn-neon:hover {
	color: var(--color-brand);
}

.btn-order,
.btn-outline-order:not(.btn-readonly):hover {
	background-color: var(--order);
	border-color: var(--order);
}

.btn-order:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-order,
.btn-order:hover,
.btn-outline-order:hover {
	color: white;
}

.btn-success,
.btn-outline-success:not(.btn-readonly):hover {
	background-color: var(--success);
	border-color: var(--success);
}

.btn-success:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-success {
	color: var(--success);
	border-color: var(--success);
}

.btn-success,
.btn-success:hover,
.btn-outline-success:not(.btn-readonly):hover {
	color: white;
}

.btn-danger,
.btn-outline-danger:not(.btn-readonly):hover {
	background-color: var(--danger);
	border-color: var(--danger);
}

.btn-danger:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-danger {
	color: var(--danger);
	border-color: var(--danger);
}

.btn-danger,
.btn-danger:hover,
.btn-outline-danger:not(.btn-readonly):hover {
	color: white;
}

.btn-warning,
.btn-outline-warning:not(.btn-readonly):hover {
	background-color: var(--warning);
	border-color: var(--warning);
}

.btn-warning:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-warning {
	color: var(--warning);
	border-color: var(--warning);
}

.btn-warning,
.btn-warning:hover,
.btn-outline-warning:not(.btn-readonly):hover {
	color: white;
}

.btn-muted {
	background-color: #bbb;
}

.btn-muted:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-muted {
	color: var(--text);
	border-color: var(--border);
}

.btn-outline-muted:not(.btn-readonly):hover {
	border-color: var(--text);
}

.btn-neutral-secondary {
	color: var(--text);
	background-color: white;
	border-color: var(--border);
}

.btn-neutral-secondary:not(.btn-readonly):hover {
	border-color: var(--text);
}

.btn-neutral-secondary.selected,
.btn-neutral-secondary.selected:hover {
	background-color: color-mix(in srgb, white 90%, var(--secondary) 10%);
	border-color: var(--secondary);
}

.btn-white,
.btn-outline-white:not(.btn-readonly):hover {
	background-color: white;
	border-color: white;
}

.btn-white:not(.btn-readonly):hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-white {
	color: white;
	border-color: white;
}

.btn-white,
.btn-white:hover,
.btn-outline-white:not(.btn-readonly):hover {
	color: var(--text);
}

.btn-transparent {
	background: #0003;
}

.btn-transparent:not(.btn-readonly):hover {
	background: #0005;
}

.btn-outline-transparent {
	border: 1px solid white;
	background: #0003;
}

.btn-transparent-light {
	background: #ffffff29;
}

.btn-transparent-light:not(.btn-readonly):hover {
	background: #ffffff40;
}

.btn-outline-transparent:not(.btn-readonly):hover {
	background: #0005;
}

.btn-transparent,
.btn-transparent:hover,
.btn-transparent-light,
.btn-transparent-light:hover,
.btn-outline-transparent,
.btn-outline-transparent:hover {
	color: white;
}

.btn-number,
.btn-outline-number {
	font-family: 'Roboto Mono', monospace;
	font-size-adjust: none;
	font-size: 90%;
	letter-spacing: 3%;
}

.mono {
	font-family: 'Roboto Mono', monospace;
	font-size-adjust: none;
	font-size: 90%;
	letter-spacing: 3%;
}

.btn-number {
	background-color: var(--link);
	color: white;
}

.btn-number:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-number {
	color: var(--link);
	border: 1px solid var(--border);
	background-color: #00000005;
}

.btn-outline-number:not(.btn-readonly):hover {
	text-decoration: underline;
}

.btn-production,
.btn-outline-production:not(.btn-readonly):hover {
	color: white;
	background-color: var(--production);
	border-color: var(--production);
}

.btn-production:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-production-light {
	color: color-mix(in srgb, black 10%, var(--production-light) 90%);
	background-color: color-mix(in srgb, white 90%, var(--production-light) 10%);
}

.btn-production-light:not(.btn-readonly):hover {
	color: var(--production);
	box-shadow: inset 0px 0px 0 100px rgba(255, 255, 255, .1);
}

.btn-outline-production {
	color: var(--production);
	border-color: var(--production);
}

.btn-commercialisation,
.btn-outline-commercialisation:not(.btn-readonly):hover {
	color: white;
	background-color: var(--commercialisation);
	border-color: var(--commercialisation);
}

.btn-commercialisation:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-commercialisation {
	color: var(--commercialisation);
	border-color: var(--commercialisation);
}

.btn-commercialisation-light {
	color: color-mix(in srgb, black 10%, var(--commercialisation-light) 90%);
	background-color: color-mix(in srgb, white 90%, var(--commercialisation-light) 10%);
}

.btn-commercialisation-light:not(.btn-readonly):hover {
	color: var(--commercialisation);
	box-shadow: inset 0px 0px 0 100px rgba(255, 255, 255, .1);
}

.btn-accounting,
.btn-outline-accounting:not(.btn-readonly):hover {
	color: white;
	background-color: var(--accounting);
	border-color: var(--accounting);
}

.btn-accounting:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-accounting {
	color: var(--accounting);
	border-color: var(--accounting);
}

.btn-accounting-light {
	color: color-mix(in srgb, black 10%, var(--accounting-light) 90%);
	background-color: color-mix(in srgb, white 90%, var(--accounting-light) 10%);
}

/* La variante neutre de .btn-*-light, pour ce qui n'appartient à aucun domaine.
   Les couleurs de la charte plutôt qu'un gris : le vert amande de fond et le vert de
   marque en texte tiennent la même place qu'un accent de domaine, sans en désigner
   un. */
.btn-light {
	color: var(--primary-on-light, var(--color-brand));
	background-color: var(--color-bg-vert-amande);
}

.btn-light:not(.btn-readonly):hover {
	color: var(--primary-on-light, var(--color-brand));
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .04);
}

.btn-accounting-light:not(.btn-readonly):hover {
	color: var(--accounting);
	box-shadow: inset 0px 0px 0 100px rgba(255, 255, 255, .1);
}

.btn-amap-light {
	color: color-mix(in srgb, black 10%, var(--amap-light) 90%);
	background-color: color-mix(in srgb, white 90%, var(--amap-light) 10%);
}

.btn-amap-light:not(.btn-readonly):hover {
	color: var(--amap);
	box-shadow: inset 0px 0px 0 100px rgba(255, 255, 255, .1);
}

.btn-game,
.btn-outline-game:not(.btn-readonly):hover {
	color: white;
	background-color: var(--game);
	border-color: var(--game);
}

.btn-game:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-game {
	color: var(--game);
	border-color: var(--game);
}

.btn-selling,
.btn-outline-selling:not(.btn-readonly):hover {
	color: white;
	background-color: var(--selling);
	border-color: var(--selling);
}

.btn-selling:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-selling {
	color: var(--selling);
	border-color: var(--selling);
}

.btn-confirmed,
.btn-outline-confirmed:not(.btn-readonly):hover {
	color: white;
	background-color: var(--confirmed);
	border-color: var(--confirmed);
}

.btn-confirmed:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-confirmed {
	color: var(--confirmed);
	border-color: var(--confirmed);
}

.btn-done,
.btn-outline-done:not(.btn-readonly):hover {
	color: white;
	background-color: var(--done);
	border-color: var(--done);
}

.btn-done:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-done {
	color: var(--done);
	border-color: var(--done);
}

.btn-todo,
.btn-outline-todo:not(.btn-readonly):hover {
	color: white;
	background-color: var(--todo);
	border-color: var(--todo);
}

.btn-todo:not(.btn-readonly):hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-todo {
	color: var(--todo);
	border-color: var(--todo);
}

.btn-harvest {
	background: var(--harvest);
	color: white;
}

.btn-harvest:hover {
	color: white;
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

.btn-outline-private {
	color: var(--private);
	border-color: var(--private);
}

.btn-private,
.btn-outline-private:not(.btn-readonly):hover {
	background: var(--private);
	color: white;
}

.btn-outline-pro {
	color: var(--pro);
	border-color: var(--pro);
}

.btn-pro,
.btn-outline-pro:not(.btn-readonly):hover {
	background: var(--pro);
	color: white;
}

/* Util */
.util-strikethrough {
	position: relative;
}

.util-strikethrough:before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	right: 0;
	border-top: 1px solid;
	border-color: inherit;
	transform:rotate(-5deg);
}

.util-table-icon {
	font-size: 1.1rem;
}

.util-info,
.util-warning,
.util-warning-outline,
.util-danger-outline,
.util-danger {
	margin-bottom: 1.5rem;
	padding: 0.5rem 1rem 0.5rem;
	line-height: 1.6;
}

@media print {

	.util-info,
	.util-warning,
	.util-warning-outline,
	.util-danger-outline,
	.util-danger {
		display: none;
	}

}

.util-info p:last-child,
.util-warning p:last-child,
.util-warning-outline p:last-child,
.util-danger-outline p:last-child,
.util-danger p:last-child {
	margin-bottom: 0;
}

/*
 * Une note d'accompagnement, pas un encadré : le texte reste dans le flux du
 * formulaire, une spirale des illustrations friends le précède. La pastille ronde
 * qu'elle remplace avait la forme d'une puce, et deux notes voisines se lisaient
 * comme les deux items d'une même liste.
 */
.util-info {
	position: relative;
	padding: 0 0 0 2.1rem;
	color: var(--secondary);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.util-info > p {
	margin-bottom: 0.35rem;
}

/*
 * La spirale en masque plutôt qu'en image : découpée dans background-color, elle
 * suit la teinte du module au lieu de garder son corail, et un seul pseudo-élément
 * en absolu sert les deux formes du composant, texte nu ou suite de <p>. Le retrait
 * négatif qu'il remplace cassait dès qu'un bouton ou un tableau entrait dans la note.
 */
.util-info::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.3rem;
	height: 1.3rem;
	background-color: color-mix(in srgb, var(--secondary) 30%, transparent);
	-webkit-mask: none center / contain no-repeat;
	mask: none center / contain no-repeat;
}

.util-info a:not(.btn) {
	text-decoration: underline;
}

.util-warning {
	border-radius: var(--radius);
	background-color: var(--warning);
	color: white;
}

.util-warning a:not(.btn) {
	color: white;
	text-decoration: underline;
}

.util-warning-outline {
	border: 1px solid var(--warning);
	border-radius: var(--radius);
	color: var(--warning);
}

.util-warning-outline a:not(.btn) {
	color: var(--warning);
	text-decoration: underline;
}

.util-danger-outline {
	border: 1px solid var(--danger);
	border-radius: var(--radius);
	color: var(--danger);
}

.util-danger-outline a:not(.btn) {
	color: var(--danger);
	text-decoration: underline;
}

.util-danger {
	border-radius: var(--radius);
	background-color: var(--danger);
	color: white;
}

.util-danger a:not(.btn) {
	color: white;
	text-decoration: underline;
}

@media (max-width: 449px) {

	.util-overflow-xs {
		overflow-x: auto;
	}

	.util-overflow-xs > * {
		min-width: calc(449px - 2 * var(--container-xs-padding));
	}

}

@media (max-width: 575px) {

	.util-overflow-sm {
		overflow-x: auto;
	}

	.util-overflow-sm > * {
		min-width: calc(575px - 2 * var(--container-sm-padding));
	}

}

@media (max-width: 767px) {

	.util-overflow-md {
		overflow-x: auto;
	}

	.util-overflow-md > * {
		min-width: calc(767px - 2 * var(--container-md-padding));
	}

}

@media (max-width: 991px) {

	.util-overflow-lg {
		overflow-x: auto;
	}

	.util-overflow-lg > * {
		min-width: calc(991px - 2 * var(--container-md-padding));
	}

}

@media (max-width: 1199px) {

	.util-overflow-xl {
		overflow-x: auto;
	}

	.util-overflow-xl > * {
		min-width: calc(1199px - 2 * var(--container-md-padding));
	}

}

.util-overflow {
	overflow-x: auto;
}

.util-overflow > * {
}

/* Le cadre défile dans les deux sens pour que thead-sticky garde un conteneur de référence : un axe
   en overflow auto fait passer l'autre en auto, et un en-tête collant dans un cadre qui ne défile
   pas en hauteur ne colle plus à rien. Sous 576px, un défilement dans le défilement piège le doigt. */
.util-overflow-frame {
	max-height: calc(100vh - var(--mainSticky) - 1rem);
	overflow: auto;
}

@media (max-width: 575px) {

	.util-overflow-frame {
		max-height: none;
	}

}

.util-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Deux classes et non une : util-table pose son padding sur :first-child et :last-child avec ce même poids */
.util-table-head > .util-checkbox,
.util-table-row > .util-checkbox {
	padding: 0;
	align-self: stretch;
}

.util-table-head > .util-checkbox > label,
.util-table-row > .util-checkbox > label {
	flex: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	cursor: pointer;
}

/* Un voile et non une couleur, comme t-highlight : il se pose par-dessus l'alternance et le survol
   du rang au lieu de les remplacer. stretch le rend continu d'un rang à l'autre, là où la ligne de
   base des rangs laisserait des trous entre les cellules. */
.util-table {
	--util-table-veil: color-mix(in srgb, var(--color-brand) 7%, transparent);
}

.util-table > * > .util-table-veil {
	align-self: stretch;
	background-image: linear-gradient(var(--util-table-veil), var(--util-table-veil));
}

/* Un util-table-head et non un util-table-row : l'alternance compte les rangs, et il en décalerait la
   parité. */
.util-table-groups {
	border-bottom: 0;
}

.util-table-groups > * {
	padding-bottom: 0.25rem;
	text-align: center;
}

.util-table-groups + .util-table-head > * {
	padding-top: 0.25rem;
}

.util-table-groups > .util-table-veil {
	border-radius: var(--radius) var(--radius) 0 0;
}

.util-buttons {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr 1fr 1fr;
}

.util-title,
.util-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
}

.util-title {
	margin-bottom: 1rem;
	justify-content: var(--heading-justify, space-between);
}

:where(.util-title) > :is(h2, h3) {
	text-transform: var(--heading-case, inherit);
	letter-spacing: var(--heading-tracking, inherit);
	border-bottom: var(--heading-border, none);
	background-color: var(--heading-background, transparent);
	color: var(--heading-color, inherit);
	padding: var(--heading-padding, 0);
	rotate: var(--heading-rotate, none);
	clip-path: var(--heading-clip, none);
}

.util-action > *,
.util-title > * {
	margin-bottom: 0;
}

.util-action > * {
	margin-bottom: 0;
}

[data-touch="yes"] .util-action h1 {
	user-select: none;
}

/* La boite des gestes a au moins la hauteur d'une ligne du h1 : `1.2em` est le `line-height` des
   titres (reboot.css:334), rapporté à `--h1-size` (template-base.css). Le titre garde au moins la
   moitié de la rangée : des gestes plus larges que l'autre moitié passent sous lui. */
.util-action.util-action-fold {
	align-items: flex-start;
	column-gap: var(--space-md);
}

.util-action-fold > :first-child {
	flex: 1 1 50%;
	min-width: 0;
}

.util-action-fold > :first-child > h1 {
	margin-bottom: 0.25rem;
}

.util-action-fold-aside {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	min-height: 1.2em;
	font-size: var(--h1-size);
}

@media (max-width: 575px) {

	.util-action-fold > :first-child {
		flex-basis: 100%;
	}

}

.util-fold-head {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
	cursor: pointer;
	user-select: none;
}

a.util-fold-head,
a.util-fold-head:hover {
	color: inherit;
	text-decoration: none;
}

.util-fold-head > * {
	margin-bottom: 0;
}

.util-fold-chevron {
	display: flex;
	color: var(--muted);
	transition: transform var(--duration-md);
}

.util-fold-open > .util-fold-head > .util-fold-chevron {
	transform: rotate(180deg);
}

.util-fold:not(.util-fold-open) > .util-fold-content {
	display: none;
}

a.util-action-navigation > svg {
	font-size: 1.3rem;
	vertical-align: baseline;
}

a.util-action-navigation:hover > svg:nth-of-type(1),
a.util-action-navigation[data-dropdown-display] > svg:nth-of-type(1) {
	display: none;
}

a.util-action-navigation:not(:hover):not([data-dropdown-display]) > svg:nth-of-type(2) {
	display: none;
}

.util-action-navigation-list  .dropdown-item > .badge:first-child {
	margin-left: 1rem;
}

/* ===== L'en-tête d'un écran ===== */

/* Les trois `minmax(0, 1fr)` de la section : un track `1fr` ne descend pas sous la largeur minimale
   de son contenu, donc un titre insécable pousserait la boîte des gestes hors du conteneur. Avec
   `minmax`, elle y reste, et c'est le titre qui sort de sa piste et passe sous les gestes. */

.util-page-header {
	--util-page-header-title: 1.75rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "main aside" "context aside";
	gap: 0.15rem 0.75rem;
	align-items: start;
}

/* La rangée donne à la marque d'état son propre point d'enroulement. Posée dans le `h1`, elle est un
   mot insécable de plus (`.badge` porte `white-space: nowrap`) dans la piste du titre. */
.util-page-header-main {
	grid-area: main;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.util-page-header-main h1 {
	margin-bottom: 0;
	overflow-wrap: anywhere;
}

/* La rangée parente enroule un élément avant de le rétrécir : posé à côté d'un titre plus long que la
   ligne, le disque des pages voisines tomberait seul au rang suivant. Ici rien ne passe à la ligne,
   le titre se rétrécit et s'enroule, et le disque reste au bout de sa dernière ligne. */
.util-page-header-title {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	gap: var(--space-xs);
}

.util-page-header-title > h1 {
	flex: 0 1 auto;
	min-width: 0;
}

/* Une ligne du `h1` (`line-height` 1.2, `reboot.css`), où le disque se centre. Posée au pied de la
   rangée, elle aligne le disque sur la dernière ligne d'un titre qui en a deux. */
.util-page-header-pages {
	flex: none;
	display: flex;
	align-items: center;
	height: calc(var(--util-page-header-title) * 1.2);
}

[data-touch="yes"] .util-page-header h1 {
	user-select: none;
}

.util-page-header-context {
	grid-area: context;
	color: var(--muted);
	font-size: 0.9rem;
}

.util-page-header-aside {
	grid-area: aside;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25rem;
}

.util-page-header-identity {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo main aside" "logo context aside";
	column-gap: 1rem;
}

/* Une piste sans contenu garde sa gouttière : sans gestes, la colonne `aside` coûterait 1rem au titre. */
.util-page-header-identity:not(:has(> .util-page-header-aside)) {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "logo main" "logo context";
}

.util-page-header-logo {
	grid-area: logo;
}

@media (max-width: 575px) {

	.util-page-header-identity {
		grid-template-areas: "logo main aside" "logo context context";
	}

}

/* Deux gestes à côté du logo ramènent le titre à 160 px à 360 px de large, soit quatre lignes pour un
   nom de formation : ils passent au rang suivant. Le menu d'un geste déroulant est son frère
   (`.dropdown-list`), et ne compte pas pour un second geste. */
@media (max-width: 399px) {

	.util-page-header-identity:has(> .util-page-header-aside > :not(.dropdown-list) ~ :not(.dropdown-list)) {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "logo main" "logo context" "aside aside";
		row-gap: var(--space-xs);
	}

}

/* Une grille ne sait pas faire tomber la boîte des gestes au rang suivant : sous 400 px, la piste du
   titre devient trop étroite pour qu'elle tienne à côté d'un nom réel, et c'est alors la seconde ligne
   du titre qui se peint sous le bouton rond. `flex-wrap` le sait. La variante à logo reste en grille,
   son aire `logo` enjambant deux rangs sans équivalent flex. Les `order` remettent les gestes avant le
   contexte, que le balisage émet dans l'autre sens. Gouttière ramenée à celle de `util-action` : à
   0.75rem, la boîte des gestes n'entre déjà plus à 375 px. */

@media (max-width: 399px) {

	.util-page-header:not(.util-page-header-identity) {
		display: flex;
		flex-wrap: wrap;
		column-gap: 0.25rem;
	}

	.util-page-header:not(.util-page-header-identity) > .util-page-header-main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.util-page-header:not(.util-page-header-identity) > .util-page-header-aside {
		flex: 0 0 auto;
		order: 2;
		margin-left: auto;
	}

	.util-page-header:not(.util-page-header-identity) > .util-page-header-context {
		flex: 1 0 100%;
		order: 3;
	}

}

.util-page-band {
	background-color: color-mix(in srgb, var(--secondary) 12%, white);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}

/* Deux classes et non une : `template-structure.css`, chargée après cette feuille, donne 2rem à tout
   `h1` de `.structure-template-main-content` avec la spécificité d'une classe et d'un élément. */
.util-page-band .util-page-header h1 {
	font-size: var(--util-page-header-title);
}

/* `--muted` reste sous 4,5:1 sur la teinte de la bande. */
.util-page-band .util-page-header-context {
	color: var(--text-intermediate);
}

.util-page-header-back,
.util-page-header-pages .btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(2rem + 2px);
	height: calc(2rem + 2px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.util-page-header-back {
	background-color: color-mix(in srgb, var(--secondary) 25%, white);
	color: var(--secondary);
}

.util-page-header-pages .btn {
	background-color: color-mix(in srgb, var(--secondary) 75%, white);
	color: white;
}

/* Dans la rangée, `flex-wrap` enroule un élément avant de le rétrécir : un titre plus long que le
   reste de la ligne passerait tout entier au rang suivant, sous le disque resté seul. Hors du flux,
   le disque garde sa place et le titre se replie à côté de lui. Le décalage le centre sur la première
   ligne du `h1`, de `line-height` 1.2 (`reboot.css`), à la taille que la bande lui donne. */
.util-page-header-main:has(> .util-page-header-back) {
	position: relative;
	padding-left: calc(2rem + 2px + 0.5rem);
}

.util-page-header-main > .util-page-header-back {
	position: absolute;
	left: 0;
	top: calc((var(--util-page-header-title) * 1.2 - 2rem - 2px) / 2);
}

@media (hover: hover) {

	.util-page-header-back:hover,
	.util-page-header-pages .btn:hover {
		background-color: var(--primary);
		color: var(--primary-ink);
	}

}

@media (max-width: 575px) {

	.util-page-header {
		--util-page-header-title: 1.5rem;
	}

	/* La cible s'étend jusqu'à `--touch-target` sans que le disque grossisse : le débord tient dans
	   la marge interne de la bande. */
	.util-page-header-back::before,
	.util-page-header-pages .btn::before {
		content: '';
		position: absolute;
		inset: calc((var(--touch-target) - 2rem - 2px) / -2);
	}

}

div.util-subtitle {
	margin-top: 0.5rem;
	font-size: 1.15rem;
}

@media (max-width: 575px) {

	div.util-subtitle {
		font-size: 1rem;
	}

}

.util-helper {
	font-size: 0.9rem;
	color: var(--secondary);
}

.util-annotation {
	font-size: 90%;
	font-weight: normal;
	line-height: 1.2;
	color: var(--muted);
}

.util-annotation:empty {
	display: none;
}

.util-annotation a {
	color: var(--muted);
	text-decoration: underline;
}

/* Surligneur : un trait de feutre passé sous quelques mots, à l'intérieur d'un texte
   courant. Le fond ne monte qu'à mi-hauteur pour que le geste reste un marquage et
   non une pastille, et box-decoration-break le fait suivre les retours à la ligne. */
.util-mark {
	background-color: transparent;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--color-neon) 40%, transparent) 0 40%,
		transparent 40%
	);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0 0.2rem 0.05rem;
	color: inherit;
}

/* Dans un bouton ou une action de barre, le compteur dérive son contour et son fond de la couleur du
   texte : il se lit sur un fond plein comme sur un contour, quelle que soit la teinte du thème, et le
   bouton garde sa hauteur. `badge` n'y a pas sa place, il force un texte blanc et rogne le bouton
   même vide.
   La hauteur tient parce qu'un inline-block entre dans la ligne par sa boîte de bordure : le
   remplissage vertical est retiré, et la marge négative compense les deux bordures, sans quoi la
   ligne du bouton grandit de leur dépassement. */
.btn > .util-counter,
.nav-item > .util-counter {
	padding-block: 0;
	margin-block: -1px;
	margin-left: 0.4em;
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	background-color: color-mix(in srgb, currentColor 15%, transparent);
	font-variant-numeric: tabular-nums;
}

.util-counter {
	font-size: 0.8rem;
	font-weight: normal;
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
	padding: calc(0.375rem / 2) 0.375rem;
	border-radius: calc(var(--radius) / 2);
	border: 1px solid var(--muted);
	font-family: "DM Sans", sans-serif;
	font-size-adjust: none;
}

/* Le `display` ci-dessus l'emporte sur celui que le navigateur donne à `[hidden]` : sans cette règle,
   un compteur caché par l'attribut affiche sa valeur, un « 0 » sur un bouton où rien n'est pris. */
.util-counter[hidden] {
	display: none;
}

h1 .util-counter {
	font-size: 1.3rem;
}

/* Le second poids du compteur : un aplat, pour un compteur posé sur un fond qui bouge — un onglet
   choisi, une entrée de menu survolée — où le contour seul disparaît.

   ⚠️ L'aplat ne peut pas se dériver de `currentColor` comme le fait le compteur d'un bouton : la
   règle pose aussi une couleur de texte, et `currentColor` vaut alors celle-ci et non la couleur
   héritée. Mesuré le 2026-09-12 : le compteur rendait un fond presque blanc sous un texte presque
   blanc. La teinte est donc posée, et l'aplat reste lisible quel que soit ce qui le porte. */
.util-counter-solid {
	border-color: transparent;
	background-color: color-mix(in srgb, var(--primary) 80%, transparent);
	color: white;
}

/* L'aplat de ce qui presse, un retard compté. La teinte est posée pour la même raison que celle du
   solide, et pleine : le blanc sur `--danger` rend 4,53, à peine au-dessus du seuil de 4,5 qu'un
   texte de cette taille doit tenir, et toute dilution le ferait passer dessous. Le second sélecteur
   l'emporte sur le fond dérivé du compteur d'un bouton (`.btn > .util-counter`, plus lourd), qui
   rendait un compteur gris dans le bouton du menu des matériels. */
.util-counter-danger,
.btn > .util-counter-danger {
	border-color: transparent;
	background-color: var(--danger);
	color: white;
}

/* Un aplat se détache de son fond par un anneau et non par une bordure : le fond d'un élément
   s'étend sous sa bordure, `background-clip` valant `border-box` par défaut, donc un liseré dilué se
   composerait sur l'aplat au lieu du fond porteur et rendrait un contour rose sur fond blanc, où
   rien ne manque. Composé sur ce qui est derrière, il est strictement invisible sur blanc et rend
   3,78 sur une bande `--primary`, au-dessus des 3,0 qu'un élément non textuel doit tenir. Mesuré le
   2026-10-02 : sans lui, l'aplat danger rend 2,63 sur cette bande, et le solide 1,0, sa teinte étant
   celle de la bande, donc le compteur y perd toute forme et se lit comme du texte nu (relevé par
   V-Dashboard). Le texte des deux aplats, lui, ne dépend pas du fond porteur, puisqu'ils sont
   opaques. Même technique que `.util-icon.util-icon-dot`, qui détache sa pastille par un anneau. */
.util-counter-solid,
.util-counter-danger,
.btn > .util-counter-danger {
	box-shadow: 0 0 0 1px color-mix(in srgb, white 45%, transparent);
}

/* ===== La marque =====
   Une marque dit où en est une chose ; un bouton appelle une action. Le dessin est unique et posé
   ici une seule fois : `badge` ne porte aucune couleur, le poids dit comment la teinte s'applique,
   la teinte dit laquelle. Trois classes au maximum sur un élément : le dessin, le poids, la teinte.

   Le jeton vaut `currentColor` par défaut, et non une teinte fixe : une marque au contour sans
   classe de teinte suit alors la couleur du texte qui la porte, ce qui est le comportement attendu
   d'un contour posé dans une cellule. Chaque poids qui a besoin d'un fond redéfinit ce défaut. */
.badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border: 1px solid transparent;
	border-radius: calc(var(--radius) / 2);
	font-family: "DM Sans", sans-serif;
	font-size-adjust: none;
	/* Le plafond est ce qui empêche une pastille posée dans un titre de suivre sa taille : à 95 % du
	   parent seul, elle rend 30,88 px dans un `h1` contre 12,35 px dans une phrase. Il vaut 0,95 `rem`,
	   donc 95 % de la taille de `html`, que `reboot.css` fait varier avec la largeur ; le pourcentage
	   reste devant pour les contextes plus petits, que la pastille doit suivre. */
	font-size: min(95%, 0.95rem);
	font-weight: normal;
	line-height: 1.1;
	white-space: nowrap;
	--badge-tint: var(--muted);
}

a.badge {
	text-decoration: none;
}

/* ===== Les poids =====
   Déclarés avant les teintes : une classe de teinte et une classe de poids ont la même
   spécificité, c'est donc l'ordre d'écriture qui décide laquelle pose `--badge-tint`. */

/* Le poids courant, et le seul qui n'ait pas de nom : une marque sans classe de poids est diluée.
   Un aplat plein serait trop lourd dans un tableau, où la marque est l'exception et non le sujet,
   et une teinte posée seule doit donner quelque chose à voir.

   Le `:not()` groupé pèse une classe et non deux : la règle vaut 0-2-0, assez pour battre le fond
   transparent de `.btn` sans passer devant une feuille de package qui redessine la marque sur son
   écran (`.point-badge .badge`, même poids, écrite plus tard).

   Les deux proportions ne sont pas décoratives : 14 % sur blanc et 78 % sur noir tiennent le
   contraste du texte au-dessus de 4,5 sur les teintes employées. En changer une se remesure. */
.badge:not(.badge-solid, .badge-outline) {
	background-color: color-mix(in srgb, var(--badge-tint) 14%, white);
	color: color-mix(in srgb, var(--badge-tint) 66%, black);
}

/* Le liseré n'est posé que sur une marque qui est aussi un bouton : là, le fond dilué ne suffit pas
   à dire qu'on peut cliquer, et la marque doit se détacher comme un bouton se détache. Posé sur une
   marque ordinaire, dans une cellule, il la ferait peser autant que la donnée qu'elle qualifie.

   Les 30 % délimitent, ils ne portent pas le sens à eux seuls : c'est le fond qui le porte, donc le
   seuil de 3:1 du contour plein de `badge-outline` ne s'applique pas ici. */
.badge.btn-badge:not(.badge-solid, .badge-outline) {
	border-color: color-mix(in srgb, var(--badge-tint) 30%, white);
}

/* Ce qui doit crier, et rien d'autre : un aplat plein sur un texte blanc. Le blanc n'est pas forcé :
   les `color-*` et `bg-*` de reboot.css sont en `!important` et 25 marques du dépôt s'en servent pour
   poser un autre couple (`bg-white color-secondary`, `color-primary bg-info`, le fond clair des points
   de retrait). Un blanc forcé les rendait blanc sur blanc. */
.badge-solid {
	background-color: var(--badge-tint);
	color: white;
}

a.badge-solid {
	color: white;
}

/* Un état pas encore atteint, ou un classement plutôt qu'un état : la teinte au contour, le fond
   rendu à la page.

   ⚠️ Le contour prend la teinte BRUTE, sans dilution : il est le seul signal, donc il relève du
   seuil de 3:1 des éléments d'interface non textuels, et non de celui du texte. Aucun pourcentage
   unique ne le tient sur les six teintes — dilué à 35 % il rend 1,96 sur `primary` et 1,54 sur
   `muted`, et même à 65 % `danger` et `muted` restent sous 3 parce qu'elles sont claires en
   elles-mêmes : c'est une propriété des couleurs, pas un réglage à ajuster. À la teinte brute, sur
   blanc : primary 11,90 · secondary 9,10 · danger 4,53 · success 4,53 · muted 4,27 · warning 3,89.

   Le jeton retombe ici sur la couleur du texte, et non sur le gris des autres poids : un contour
   sans classe de teinte suit ce qui le porte, ce qui est le comportement attendu d'un contour posé
   dans une cellule. Les teintes sont écrites plus bas et reprennent la main. */
.badge-outline {
	--badge-tint: currentColor;
	border-color: var(--badge-tint);
}

/* Le texte d'un contour ne suit la teinte que si une teinte a été posée : sans classe de teinte, il
   hérite de la couleur du texte, et une classe `color-*` écrite à côté continue de décider. */
.badge-outline:is(
	.badge-neutral, .badge-info, .badge-success, .badge-warning, .badge-danger, .badge-primary,
	.badge-draft, .badge-confirmed, .badge-selling, .badge-prepared, .badge-delivered,
	.badge-basket, .badge-accounting, .badge-commercialisation, .badge-production, .badge-greenhouse,
	.badge-harvest, .badge-canceled, .badge-expired, .badge-reference
) {
	color: color-mix(in srgb, var(--badge-tint) 78%, black);
}

/* ===== Les teintes =====
   Une classe ne fait qu'une chose : poser le jeton. Le même nom vaut pour les trois poids. */
.badge-neutral { --badge-tint: var(--muted); }
.badge-info { --badge-tint: var(--secondary-on-white, var(--secondary)); }
.badge-success { --badge-tint: var(--success); }
.badge-warning { --badge-tint: var(--warning); }
.badge-danger { --badge-tint: var(--danger); }
.badge-primary { --badge-tint: var(--primary-on-white, var(--primary)); }

/* Les teintes métier, celles que les feuilles de package écrivaient chacune de leur côté. */
.badge-draft { --badge-tint: var(--draft); }
.badge-confirmed { --badge-tint: var(--confirmed); }
.badge-selling { --badge-tint: var(--selling); }
.badge-prepared { --badge-tint: var(--prepared); }
.badge-delivered { --badge-tint: var(--delivered); }
.badge-basket { --badge-tint: var(--basket); }
.badge-accounting { --badge-tint: var(--accounting); }
.badge-commercialisation { --badge-tint: var(--commercialisation); }
/* ⚠️ `bg-pro` et `bg-private` ne peuvent pas tenir ce rôle : ce sont les deux seuls utilitaires
   `bg-*` sans `!important`, et `badge-solid` les bat donc en écrasant leur fond. Mesuré le
   12/09/2026 sur les entrées Professionnels et Particuliers du menu des ventes, passées au gris. */
.badge-pro { --badge-tint: var(--pro); }
.badge-private { --badge-tint: var(--private); }
.badge-production { --badge-tint: var(--production); }
.badge-canceled { --badge-tint: var(--muted); }
.badge-expired { --badge-tint: var(--muted); }
.badge-greenhouse { --badge-tint: var(--greenhouse); }
.badge-harvest { --badge-tint: var(--harvest); }

/* Le temps passé sur une intervention se lit comme un chiffre : la taille fixe renonce au plafond de
   `.badge`, pour qu'une même valeur pèse pareil dans un pied de carte, une cellule et une phrase. La
   marque porte elle-même son contour, un fond dilué disparaissant sur le fond d'une carte faite : écrite
   après le poids dilué et du même poids que lui, elle lui reprend le fond et la couleur. */
.badge.badge-time-spent {
	--badge-tint: var(--done);
	background-color: transparent;
	border-color: var(--badge-tint);
	color: color-mix(in srgb, var(--badge-tint) 78%, black);
	font-size: 0.9rem;
	font-weight: bold;
}

/* Une référence est un code : elle se lit caractère par caractère, donc en chasse fixe. Elle garde
   l'arrondi court de la marque même portée par un bouton, dont l'arrondi long ferait lire le code
   comme une action. */
.badge-reference {
	--badge-tint: var(--color-reference);
	font-family: 'Roboto Mono', monospace;
	letter-spacing: -3%;
}

.badge.badge-reference {
	border-radius: calc(var(--radius) / 2);
}

/* ===== L'ornement =====
   Le point dit qu'il s'agit d'un état, et non d'une étiquette de classement. */
.badge-dot::before {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-right: 0.35em;
	border-radius: 50%;
	background-color: var(--badge-tint);
	vertical-align: 0.05em;
}

/* ===== Les trois rôles =====
   Une marque lue n'a pas de classe : c'est le cas courant. Les deux autres se déclarent. */

/* Dilué : le palier n'est pas franchi. Sert à opposer ce qui vaut maintenant à ce qui vaudra plus
   tard sans changer de vocabulaire. */
.badge-off {
	opacity: 0.5;
}

/* ===== Plusieurs marques à la suite =====
   En colonne, elles se calent à droite : c'est la forme qu'elles prennent sous un prix, où le bord
   droit est la ligne de lecture. */
.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.35rem;
	align-items: baseline;
}

.badges-stacked {
	flex-direction: column;
	align-items: flex-end;
}

/* Groupe de lignes : plusieurs <tr> qui forment une seule unité et se mettent en évidence
   ensemble, pour qu'on voie ce qu'un geste posé sur l'une emporte sur les autres.

   La classe se pose sur chaque ligne du groupe, en pratique par JS : aucun sélecteur CSS ne
   remonte d'une ligne à ses sœurs. Le fond va sur les cellules et non sur la ligne, sinon
   l'alternance de table.tr-even le recouvre une ligne sur deux.

   Deux intensités, à ne pas confondre : -hover pour ce que le curseur désigne, -selected pour
   ce que l'utilisateur a retenu, avec un liseré qui donne le groupe à lire comme un bloc. */
.util-tr-group-hover > * {
	background-color: color-mix(in srgb, var(--secondary-neutral) 45%, white) !important;
}

/* Le second sélecteur égale la spécificité du survol de table.tr-hover (reboot.css), qui l'emportait
   sur la ligne retenue et lui retirait sa couleur sous le curseur. */
.util-tr-group-selected > *,
table.tr-hover tbody tr.util-tr-group-selected:hover > * {
	background-color: color-mix(in srgb, var(--secondary-neutral) 70%, white) !important;
}

.util-tr-group-selected > *:first-child {
	box-shadow: inset 0.25rem 0 0 var(--secondary-light);
}

/* Carte : bloc blanc encadré et ombré, à poser dans une grille .util-cards.
   Le nombre de colonnes est porté par .util-cards-1|2|3, et retombe à 1 colonne sur mobile. */
.util-cards {
	display: grid;
	gap: 1.5rem;
}

.util-cards-1 {
	grid-template-columns: 1fr;
}

.util-cards-2 {
	grid-template-columns: repeat(2, 1fr);
}

.util-cards-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Quatre colonnes : réservé à des cartes courtes, d'où une dégressivité plus lente que
   util-cards-2|3, qui passent directement à une colonne sous 768px. */
.util-cards-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* auto-fill et non auto-fit : une carte seule garde la largeur d'une piste au lieu de s'étirer sur
   toute la ligne. */
.util-cards-fill {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

/* Par défaut les cartes d'une même ligne s'alignent en hauteur. À écarter quand l'une d'elles
   change de taille toute seule — un util-deck qu'on déplie étirerait ses voisins. */
.util-cards-start {
	align-items: start;
}

@media (max-width: 1199px) {

	.util-cards-4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 991px) {

	.util-cards-3 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 767px) {

	.util-cards {
		gap: 1rem;
	}

	.util-cards-2,
	.util-cards-3 {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 449px) {

	.util-cards-4,
	.util-cards-fill {
		grid-template-columns: 1fr;
	}

}

.util-piles {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.util-piles[data-piles] {
	display: grid;
	grid-template-columns: repeat(var(--util-piles), minmax(0, 1fr));
	align-items: start;
	column-gap: 1.5rem;
}

.util-piles-pile {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

@media (max-width: 767px) {

	.util-piles,
	.util-piles-pile {
		gap: 1rem;
	}

	.util-piles[data-piles] {
		column-gap: 1rem;
	}

}

/* Une transition de grid-template-columns n'interpole que des longueurs, jamais une piste
   en fr ni un minmax() : dans une util-table, la piste du n-ième pli est une longueur,
   --util-bellows-track-<n>, et les autres colonnes absorbent le reste. */
.util-bellows,
.util-bellows-columns {
	--util-bellows-band: 2.25rem;
	--util-bellows-panel: 11rem;
}

.util-bellows-columns {
	--util-bellows-track-1: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-1, 0));
	--util-bellows-track-2: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-2, 0));
	--util-bellows-track-3: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-3, 0));
	--util-bellows-track-4: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-4, 0));
	--util-bellows-track-5: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-5, 0));
	--util-bellows-track-6: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-6, 0));
	--util-bellows-track-7: calc(var(--util-bellows-band) + var(--util-bellows-panel) * var(--util-bellows-7, 0));
}

@media (max-width: 767px) {

	.util-bellows,
	.util-bellows-columns {
		--util-bellows-band: 2rem;
		--util-bellows-panel: 9rem;
	}

}

@media (max-width: 575px) {

	.util-bellows,
	.util-bellows-columns {
		--util-bellows-band: 1.5rem;
	}

}

.util-bellows {
	display: flex;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--background-surface);
	overflow: clip;
}

/* Posé seul, flex-grow s'interpole et se partage exactement entre le pli qui s'ouvre et
   celui qui se ferme : la largeur de l'ensemble ne bouge pas pendant le glissement. */
.util-bellows > .util-bellows-item {
	flex: 0 0 var(--util-bellows-band);
	transition: flex-grow 0.3s ease-in-out;
}

.util-bellows > .util-bellows-open {
	flex-grow: 1;
}

.util-bellows-columns {
	transition: grid-template-columns 0.3s ease-in-out;
}

/* Une ligne de util-table aligne ses cellules sur la ligne de base, une ligne à plis les centre :
   dans les deux cas, sans l'étirement, la bande s'arrêterait à la hauteur de son contenu. */
.util-bellows-item,
.util-table-head > .util-bellows-item,
.util-table-row > .util-bellows-item {
	display: flex;
	align-self: stretch;
	min-width: 0;
	padding: 0;
	overflow: clip;
}

.util-bellows-item:not(.util-bellows-open, .util-bellows-inactive) {
	cursor: pointer;
}

.util-bellows-band {
	flex: 0 0 var(--util-bellows-band);
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.75rem 0;
	overflow: clip;
	border-left: 1px solid var(--border);
	background-color: var(--background);
	transition: flex-basis 0.3s ease-in-out;
}

.util-bellows > .util-bellows-item:first-child > .util-bellows-band {
	border-left: 0;
}

/* Repliée à zéro, la bande resterait un arrêt de tabulation invisible : elle se masque à la fin
   du glissement, et réapparaît aussitôt qu'elle se déplie. */
.util-bellows-open > .util-bellows-band {
	flex-basis: 0;
	visibility: hidden;
	transition: flex-basis 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.util-table-row > .util-bellows-item > .util-bellows-band {
	justify-content: center;
	padding: 0;
}

/* writing-mode seul écrit de haut en bas : le demi-tour fait lire de bas en haut. */
.util-bellows-name {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 550;
}

.util-bellows-inactive > .util-bellows-band {
	background-color: var(--background-light);
}

.util-bellows-inactive .util-bellows-name {
	color: var(--text-intermediate);
}

@media (hover: hover) {

	.util-bellows > .util-bellows-item:not(.util-bellows-open, .util-bellows-inactive):hover > .util-bellows-band {
		background-color: var(--border);
	}

}

.util-bellows-mark {
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--secondary);
}

.util-bellows-panel {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem;
	overflow: clip;
}

.util-bellows-title {
	margin-bottom: 0.5rem;
	font-weight: bold;
	white-space: nowrap;
	overflow: clip;
	text-overflow: ellipsis;
}

/* Une ligne à plis centre ses cellules : sur la ligne de base de util-table-row, le panneau d'un pli,
   centré dans sa cellule étirée, ne tomberait en face d'aucune de ses voisines. */
.util-bellows-columns > .util-table-row {
	align-items: center;
}

.util-table-row > .util-bellows-item > .util-bellows-panel {
	align-self: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.util-table-head > .util-bellows-item > .util-bellows-band,
.util-table-head > .util-bellows-item > .util-bellows-panel {
	padding-bottom: 1rem;
}

.util-table-head > .util-bellows-item > .util-bellows-panel {
	align-self: flex-end;
}

/* La cellule rogne ce qui dépasse (`overflow: clip`) : l'anneau du panneau qui reçoit le focus
   après une ouverture au clavier se dessine donc en dedans. */
.util-bellows-panel:focus-visible {
	outline-offset: -2px;
}

.util-table-head .util-bellows-title {
	margin-bottom: 0;
	font-weight: inherit;
}

/* La course de la bande dépend de la largeur d'écran, donc aucun délai CSS ne tombe au
   moment où elle ne contient plus le nom : MainBellows (bellowsAi.js) le mesure à chaque
   image du glissement et pose util-bellows-titled. */
.util-bellows-titled .util-bellows-name,
.util-bellows-item:not(.util-bellows-titled) .util-bellows-title {
	opacity: 0;
}

.util-bellows-item:not(.util-bellows-open) > .util-bellows-panel {
	visibility: hidden;
	transition: visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {

	.util-bellows > .util-bellows-item,
	.util-bellows-columns,
	.util-bellows-band,
	.util-bellows-open > .util-bellows-band,
	.util-bellows-item:not(.util-bellows-open) > .util-bellows-panel {
		transition: none;
	}

}

.util-card {
	padding: 1rem;
	background-color: var(--background-surface);
	border: var(--border-width, 1px) solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-v2);
}

.util-card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

/* ⚠️ Les marges négatives valent le padding de la .util-card ordinaire : dans une
   .util-card-accent (1.25rem, liseré de 0.5rem), le contenu ne toucherait pas les bords. */
.util-card-bleed {
	position: relative;
	margin-inline: -1rem;
	overflow: hidden;
}

.util-card-bleed:first-child {
	margin-top: -1rem;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.util-card-bleed:last-child {
	margin-bottom: -1rem;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

.util-card-count {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	padding: 0.25rem 0.5rem;
	background-color: var(--background-surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-v2);
}

.util-card-badges {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	right: var(--space-sm);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xxs) var(--space-xs);
	align-items: flex-start;
}

.util-card-badges > .badge {
	box-shadow: var(--shadow-v2);
}

/* Carte à liseré de couleur, alternative discrète aux .util-block-success et consorts :
   .util-card + .util-card-accent + .util-card-accent-success|warning|danger|info|todo */
.util-card-accent {
	padding: 1.25rem;
	background: var(--callout-background, var(--background-surface));
	border-color: var(--callout-border, var(--border));
	border-left-width: var(--callout-accent-width, 0.5rem);
	border-left-style: var(--callout-accent-style, solid);
	border-left-color: var(--accent);
	border-radius: var(--callout-radius, var(--radius));
	box-shadow: var(--callout-shadow, var(--shadow-v2));
}

.util-card-accent > .util-card-title {
	font-size: 1.2rem;
	color: var(--callout-title-color, var(--accent-on-light, var(--accent)));
	margin-bottom: 1rem;
}

:where(.util-card-accent > .util-card-title) {
	text-transform: var(--callout-title-case, none);
}

.util-card-accent > p:last-child,
.util-card-accent > ul:last-child {
	margin-bottom: 0;
}

.util-card-accent > ul {
	margin-top: 0;
	padding-left: 1.1rem;
	line-height: 1.4;
}

.util-card-accent > ul > li + li {
	margin-top: 0.25rem;
}

.util-card-accent > ul > li::marker {
	color: var(--accent);
}

.util-card-accent-success {
	--accent: var(--success);
}

.util-card-accent-warning {
	--accent: var(--warning);
}

.util-card-accent-danger {
	--accent: var(--danger);
}

.util-card-accent-info,
.util-card-accent-todo {
	--accent: var(--secondary);
	--accent-on-light: var(--secondary-on-light, var(--secondary));
}

.util-weigh {
	--weigh: var(--secondary);
	/* L'orange du produit ne tient pas 4,5:1 sur blanc : le texte coloré prend l'encre, la couleur assombrie, et un fond plein sous du blanc prend le plein */
	--weigh-ink: color-mix(in srgb, var(--weigh) 72%, black);
	--weigh-solid: var(--weigh);
	--weigh-tint: color-mix(in srgb, var(--weigh) 15%, white);
	display: grid;
	grid-template-areas: "disc head mark" "disc lines lines";
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
	background-color: white;
	line-height: 1.4;
}

.util-weigh-warning {
	--weigh: var(--warning);
	--weigh-solid: color-mix(in srgb, var(--warning) 84%, black);
}

.util-weigh-danger {
	--weigh: var(--danger);
}

.util-weigh-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: var(--weigh-solid);
	color: white;
	font-size: 1.5rem;
	grid-area: disc;
	align-self: start;
}

.util-weigh-head {
	grid-area: head;
	margin-bottom: 1rem;
}

.util-weigh-title {
	font-family: var(--font-title);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
}

.util-weigh-intro {
	margin: 0.3rem 0 0;
}

.util-weigh-lines {
	grid-area: lines;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.util-weigh-lines > li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: 0.65rem;
	align-items: center;
}

.util-weigh-lines > li + li {
	margin-top: 0.8rem;
}

.util-weigh-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	background-color: var(--weigh-tint);
	color: var(--weigh-ink);
}

.util-weigh-same {
	color: var(--text-intermediate);
}

.util-weigh-same > .util-weigh-glyph {
	background-color: var(--background);
	color: var(--text-intermediate);
}

.util-weigh-alert {
	/* Les dérivées se calculent là où elles sont déclarées : héritées de .util-weigh, elles garderaient sa couleur */
	--weigh: var(--warning);
	--weigh-ink: color-mix(in srgb, var(--weigh) 72%, black);
	--weigh-solid: var(--weigh);
	--weigh-tint: color-mix(in srgb, var(--weigh) 15%, white);
}

.util-weigh-mark {
	grid-area: mark;
	align-self: start;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
}

.util-weigh-mark-back {
	background-color: color-mix(in srgb, var(--success) 13%, white);
	color: color-mix(in srgb, var(--success) 75%, black);
}

.util-weigh-mark-final {
	background-color: color-mix(in srgb, var(--danger) 13%, white);
	color: color-mix(in srgb, var(--danger) 72%, black);
}

@media (max-width: 449px) {

	.util-weigh {
		grid-template-areas: "disc mark" "head head" "lines lines";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.util-weigh-disc,
	.util-weigh-mark {
		margin-bottom: 0.75rem;
	}

	.util-weigh-mark {
		align-self: center;
	}

}

.util-card-info {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.2;
}

.util-card-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 0.75rem;
}

/* Frise des mois d'une année : une case par mois, à état — traité, à traiter, à venir, ou rien à y faire.

   .util-timeline > .util-timeline-month (+ -done|-todo|-upcoming|-none, + -current pour le mois en cours),
   chaque case portant un <small> (le mois) et un <b> (sa valeur : un nombre, une coche, un tiret).
   Une case sans rien à faire est un <span>, les autres des <a>.

   Les douze colonnes sont fixes : une frise ne montre pas ses cases dans l'ordre où elles arrivent
   mais toujours à la même place, c'est ce qui permet de comparer deux années d'un coup d'œil. */
.util-timeline {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0.375rem;
}

/* La couleur du texte passe par --timeline-color pour survivre au a:hover global, qui la
   remettrait à inherit — donc en quasi noir sur le fond sombre d'un mois à traiter. */
.util-timeline-month {
	position: relative;
	border-radius: 0.5rem;
	padding: 0.5rem 0.25rem;
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--timeline-color);
	background-color: var(--timeline-background);
}

a.util-timeline-month {
	cursor: pointer;
	transition: box-shadow 0.25s, background-color 0.25s;
}

/* Le fond se rapproche de la couleur du texte : un mois à traiter s'éclaircit, un mois traité
   se fonce, sans avoir à décliner une teinte de survol par état. */
a.util-timeline-month:hover {
	color: var(--timeline-color);
	background-color: color-mix(in srgb, var(--timeline-background) 85%, var(--timeline-color));
	text-decoration: none;
	box-shadow: var(--shadow-v2-selected);
}

/* Le libellé et ce qui le suit — un cadenas, le plus souvent — tiennent sur une seule ligne : au
   retour à la ligne, la marque passerait sous le mois sur les cases étroites et pas sur les autres,
   et les <b> ne s'aligneraient plus d'une case à l'autre. Le conteneur défile plutôt que de serrer. */
.util-timeline-month small {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.6875rem;
	white-space: nowrap;
}

/* La valeur du mois occupe la même boîte quel que soit l'état, pour que les trois s'alignent
   sur une seule ligne à travers la frise */
.util-timeline-month b {
	display: block;
	font-size: 1rem;
}

.util-timeline-month b .asset-icon {
	margin-top: 0;
	vertical-align: -0.125em;
}

.util-timeline-done {
	--timeline-color: var(--success);
	--timeline-background: color-mix(in srgb, white 90%, var(--success) 10%);
}

.util-timeline-todo {
	--timeline-color: white;
	--timeline-background: var(--accounting);
}

.util-timeline-none {
	--timeline-color: var(--muted-light);
	--timeline-background: var(--background);
}

.util-timeline-upcoming {
	--timeline-color: var(--text);
	--timeline-background: var(--background-surface);
}

/* Le mois qu'on regarde, cerclé par-dessus son état et non à sa place : la frise garde ses couleurs
   d'état, le liseré dit seulement où l'on se trouve dedans. */
.util-timeline-selected {
	outline: 2px solid var(--accounting);
	outline-offset: 2px;
	font-weight: bold;
}

.util-timeline-lock {
	margin-left: 0.125rem;
}

/* Sous 768px, douze colonnes ne laissent plus la place d'un libellé : la frise passe sur deux rangs */
@media (max-width: 767px) {

	.util-timeline {
		grid-template-columns: repeat(6, 1fr);
	}

}

/* Sous 450px, même six colonnes serrent trop : la frise défile dans un .util-overflow-xs.
   Le défilement rogne ce qui déborde d'une case — l'outline du mois sélectionné, la pastille
   d'alerte de la précomptabilité —, d'où la marge intérieure qui leur rend la place. */
@media (max-width: 449px) {

	.util-overflow-xs > .util-timeline {
		padding: 0.375rem;
		margin: -0.375rem;
	}

}

.util-layout-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 23rem;
	gap: 1.5rem;
	align-items: start;
}

.util-layout-aside-side {
	position: sticky;
	top: calc(var(--mainSticky, 0px) + 1rem);
}

.util-layout-aside-side .btn {
	white-space: normal;
}

@media (max-width: 991px) {

	.util-layout-aside {
		display: block;
	}

	.util-layout-aside-side {
		margin-top: 1.5rem;
	}

}

.util-seeds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1rem;
}

.util-seed {
	--seed-head-color: color-mix(in srgb, var(--color-neutral-variant) 50%, color-mix(in srgb, white 90%, var(--production-light) 10%));
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: white;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-v2);
	overflow: hidden;
}

/* Le liseré est une ombre et non une bordure : le sachet ne bouge pas d'un pixel en entrant dans le panier */
.util-seed-selected {
	box-shadow: 0 0 0 2px var(--secondary-light), var(--shadow-v2);
}

.util-seed-head {
	text-align: center;
	padding: 1.25rem 1rem 0.75rem;
	background-color: var(--seed-head-color);
	border-bottom: 2px dashed color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.util-seed-head svg {
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	margin: 0 auto;
}

.util-seed-logo {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Les tailles d'amis propres au panier, au sachet déchiré ou au tableau visent .util-seed-head svg : le logo doit les dominer */
.util-seed .util-seed-head .util-seed-logo svg {
	width: 100%;
	max-width: 16rem;
	height: auto;
}

.util-seed-name {
	font-family: var(--font-title);
	font-size: 1.7rem;
	font-weight: bold;
	line-height: 1.1;
	margin-top: 0.5rem;
}

.util-seed-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
	padding: 1rem;
}

.util-seed-body ul {
	margin: 0;
	padding-left: 1.1rem;
}

.util-seed-body .util-seed-features {
	margin-top: 0.25rem;
	padding-left: 0;
	list-style: none;
}

.util-seed-features > li {
	border-top: 1px solid var(--border-light);
}

.util-seed-features > li:last-child {
	border-bottom: 1px solid var(--border-light);
}

.util-seed-features-row {
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	min-height: var(--touch-target);
	padding: 0.75rem;
}

li.util-seed-features-row {
	flex-wrap: wrap;
}

summary.util-seed-features-row {
	list-style: none;
	cursor: pointer;
}

/* Safari garde son triangle tant que ce pseudo-élément n'est pas masqué, list-style n'y suffit pas */
summary.util-seed-features-row::-webkit-details-marker {
	display: none;
}

.util-seed-features-name {
	flex: 1;
	font-weight: bold;
}

.util-seed-features-single {
	flex-basis: 100%;
	font-size: 0.9rem;
	color: var(--text-intermediate);
}

.util-seed-features-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: auto;
	color: var(--color-brand);
}

.util-seed-features-toggle .asset-icon-chevron-up,
.util-seed-features details[open] .util-seed-features-toggle .asset-icon-chevron-down {
	display: none;
}

.util-seed-features details[open] .util-seed-features-toggle .asset-icon-chevron-up {
	display: inline;
}

.util-seed-features details[open] {
	background-color: var(--background-light);
}

.util-seed-features details[open] > summary {
	background-color: var(--background);
}

.util-seed-body .util-seed-features details ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem 0.75rem 1rem;
	list-style: none;
}

.util-seed-features details li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	line-height: 1.35;
}

.util-seed-features .asset-icon-check-lg {
	position: relative;
	top: 0.12em;
	flex-shrink: 0;
	color: var(--success);
}

/* Le bouton et la bande du panier ont la même hauteur : entrer dans le panier ne déplace rien sous le sachet */
.util-seed-body > .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: var(--touch-target);
	margin-top: auto;
	white-space: normal;
}

.util-seed-price {
	font-family: var(--font-title);
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
}

.util-seed-per {
	font-family: var(--font-title);
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--muted);
}

.util-seed-cost .util-annotation {
	margin-top: 0.2rem;
}

.util-seed-calendar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 3px;
}

.util-seed-calendar > span {
	text-align: center;
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.7rem;
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--seed-color) 8%, white);
	color: var(--muted);
}

.util-seed-calendar > .util-seed-calendar-in {
	background-color: var(--seed-color);
	color: white;
}

.util-seed-calendar > .util-seed-calendar-part {
	background-color: color-mix(in srgb, var(--seed-color) 45%, white);
	color: var(--text);
}

.util-seed-calendar > .util-seed-calendar-now {
	outline: 2px solid var(--text);
	outline-offset: 1px;
}

.util-seed-sticker {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--secondary-light);
	color: white;
	font-size: 1.2rem;
	transform: rotate(-8deg);
	box-shadow: var(--shadow-v2);
}

.util-seed-ribbon {
	position: absolute;
	top: 0.75rem;
	left: 0;
	z-index: 1;
	padding: 0.2rem 0.75rem 0.2rem 0.6rem;
	border-radius: 0 999px 999px 0;
	background-color: var(--color-brand);
	color: white;
	font-size: 0.85rem;
	font-weight: bold;
}

.util-seed:has(> .util-seed-ribbon) > .util-seed-head {
	padding-top: 3.25rem;
}

.util-seed-wide > .util-seed-head,
.util-seed-head:has(> .util-seed-plus) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	column-gap: 0.5rem;
}

.util-seed-wide > .util-seed-head svg,
.util-seed-head:has(> .util-seed-plus) svg {
	margin: 0;
}

.util-seed-wide > .util-seed-head > div,
.util-seed-head:has(> .util-seed-plus) > div {
	flex-basis: 100%;
}

.util-seed-plus {
	align-self: center;
	font-family: var(--font-title);
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
	color: var(--color-brand);
}

.util-seed-formula {
	font-family: var(--font-title);
	font-weight: bold;
	margin-top: 0.15rem;
}

.util-seed-saving {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background-color: var(--color-brand);
	color: white;
	font-size: 0.85rem;
	font-weight: bold;
	vertical-align: 0.2rem;
}

.util-seed-in-basket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
	min-height: var(--touch-target);
	margin-top: auto;
	padding-left: 0.5rem;
	border-radius: var(--radius);
	background-color: color-mix(in srgb, var(--secondary-light) 12%, white);
	color: var(--text);
	font-weight: bold;
}

.util-seed-in-basket > span {
	white-space: nowrap;
}

.util-seed-in-basket .asset-icon {
	margin-right: 0.35rem;
	color: var(--secondary-light);
}

.util-seed-in-basket > a {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-width: var(--touch-target);
	font-weight: normal;
}

.util-seed-lead {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}

/* clip-path coupe aussi l'ombre portée : le sachet déchiré se détache par son fond */
.util-seed-torn {
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: none;
	border: 0;
	clip-path: polygon(0 0.6rem, 5% 0, 10% 0.6rem, 15% 0, 20% 0.6rem, 25% 0, 30% 0.6rem, 35% 0, 40% 0.6rem, 45% 0, 50% 0.6rem, 55% 0, 60% 0.6rem, 65% 0, 70% 0.6rem, 75% 0, 80% 0.6rem, 85% 0, 90% 0.6rem, 95% 0, 100% 0.6rem, 100% 100%, 0 100%);
}

.util-seed-torn .util-seed-head {
	padding: 1.75rem 2.5rem 1rem;
	border-bottom: 0;
	background: color-mix(in srgb, var(--seed-head-color) 70%, white);
}

@media (max-width: 767px) {

	.util-seed-torn .util-seed-head svg {
		width: 4.5rem;
		height: 4.5rem;
	}

}

.util-table-seeds {
	grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(0, 13rem));
	column-gap: 1rem;
	background: none;
	box-shadow: none;
}

.util-table-seeds-top,
.util-table-seeds-end {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
}

.util-seed-cap {
	border-bottom: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: none;
}

.util-seed-cap .util-seed-body {
	padding: 0.75rem 1rem 1rem;
}

.util-seed-cap .util-seed-per {
	white-space: nowrap;
}

.util-table-seeds .util-table-head > :not(:first-child),
.util-table-seeds .util-table-row > :not(:first-child),
.util-table-seeds-end > :not(:first-child) {
	background-color: white;
	border-left: 1px solid var(--border-light);
	border-right: 1px solid var(--border-light);
}

.util-table-seeds .util-table-head {
	background-color: var(--background-light);
	border-bottom: none;
}

.util-table-seeds .util-table-head > :not(:first-child) {
	border-bottom: 2px solid var(--secondary-neutral);
}

.util-table-seeds .util-table-row {
	background-color: transparent;
	align-items: stretch;
}

.util-table-seeds .util-table-row > * {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--border-light);
}

.util-table-seeds .util-table-seeds-group > * {
	padding-top: 0.75rem;
	font-weight: 550;
	letter-spacing: 0.5px;
}

.util-table-seeds-end > :not(:first-child) {
	height: 1rem;
	border-bottom: 1px solid var(--border-light);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-v2);
}

.util-table-seeds .asset-icon-check-lg {
	color: var(--success);
}

@media (max-width: 991px) {

	.util-table-seeds {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 0.5rem;
	}

	.util-table-seeds > * > :first-child:empty,
	.util-table-seeds .util-table-head > :first-child {
		display: none;
	}

	.util-table-seeds .util-table-row > :first-child {
		grid-column: 1 / -1;
		padding-bottom: 0;
	}

	.util-table-seeds .util-table-row {
		background-color: white;
		border-bottom: 1px solid var(--border-light);
	}

	.util-table-seeds .util-table-row > * {
		border: none;
		background-color: transparent;
	}

	.util-table-seeds-group > :not(:first-child),
	.util-table-seeds-end {
		display: none;
	}

}

@media (max-width: 575px) {

	.util-table-seeds .util-seed-head {
		padding: 0.75rem 0.25rem 0.5rem;
	}

	.util-table-seeds .util-seed-head svg {
		width: 2.5rem;
		height: 2.5rem;
	}

	.util-table-seeds .util-seed-body {
		padding: 0.5rem;
	}

	.util-table-seeds .util-seed-body .btn {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

}

@media (min-width: 992px) {

	.util-table-seeds .util-seed-head svg {
		width: 4rem;
		height: 4rem;
	}

	/* --background-hover est presque transparent : en couleur de fond, il remplacerait le blanc des sachets au lieu de s'y ajouter */
	.util-table-seeds .util-table-row:not(.util-table-seeds-group):hover > * {
		background-image: linear-gradient(var(--background-hover), var(--background-hover));
	}

}

@media (min-width: 768px) {

	.util-seeds > .util-seed {
		max-width: 36rem;
	}

	/* Les sachets voisins du ruban gardent la hauteur de son en-tête, partagée en haut et en bas pour centrer l'ami et le nom */
	.util-seeds:has(> .util-seed:not(.util-seed-wide) > .util-seed-ribbon) > .util-seed:not(.util-seed-wide, :has(> .util-seed-ribbon)) > .util-seed-head {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.util-seeds:has(> .util-seed-wide) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.util-seeds > .util-seed-wide {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		max-width: none;
	}

	.util-seeds > .util-seed-wide > .util-seed-head {
		grid-column: 1;
		padding: 1.25rem 1rem;
		border-bottom: 0;
		border-right: 2px dashed color-mix(in srgb, var(--color-brand) 25%, transparent);
	}

	.util-seeds > .util-seed-wide:has(> .util-seed-ribbon) > .util-seed-head {
		padding-top: 3.25rem;
	}

	.util-seeds > .util-seed-wide > .util-seed-body {
		grid-column: 2 / -1;
	}

	.util-seeds > .util-seed-wide > .util-seed-head:has(> .util-seed-plus ~ .util-seed-plus) svg {
		width: 4.5rem;
		height: 4.5rem;
	}

}

@media (max-width: 767px) {

	.util-seeds {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* Entre 768 et 991px, la tête du sachet large n'a qu'une colonne sur trois, trop étroite pour trois amis en taille pleine */
@media (min-width: 768px) and (max-width: 991px) {

	.util-seeds > .util-seed-wide > .util-seed-head:has(> .util-seed-plus ~ .util-seed-plus) svg {
		width: 3.5rem;
		height: 3.5rem;
	}

}

/* Un logo rend la tête de son sachet plus haute qu'un ami et son nom : dans la rangée qui le porte, les amis grandissent
   de la hauteur du logo, sa largeur fois le rapport 696/1775 de son fichier, moins celle du nom, et les têtes s'alignent.
   La variable se résout dans le SVG, donc 100cqi y vaut la largeur de la tête, celle que prend aussi le logo.
   Deux amis côte à côte gardent cette hauteur et se resserrent en largeur, le dessin restant centré dans sa boîte. */
@media (min-width: 768px) {

	.util-seeds:has(.util-seed-logo) > .util-seed:not(.util-seed-wide) > .util-seed-head {
		container-type: inline-size;
		--seed-friend-size: calc(5.5rem + min(100cqi, 16rem) * 696 / 1775 - 0.5rem - 1.7rem * 1.1);
	}

	.util-seeds:has(.util-seed-logo) > .util-seed:not(.util-seed-wide) > .util-seed-head:not(:has(> .util-seed-logo)) > svg {
		width: min(var(--seed-friend-size), 100%);
		height: var(--seed-friend-size);
	}

	.util-seeds:has(.util-seed-logo) > .util-seed:not(.util-seed-wide) > .util-seed-head:has(> .util-seed-plus) > svg {
		width: min(var(--seed-friend-size), calc(50% - 1.25rem));
	}

}

/* À côté du panier, trois sachets tiennent sur une rangée avec une tête compacte, et une frise de plus de douze cases passe sur deux rangs pour garder des cases lisibles */
@media (min-width: 992px) {

	.util-layout-aside .util-seeds {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.util-layout-aside .util-seed-head {
		padding: 1rem 0.5rem 0.6rem;
	}

	.util-layout-aside .util-seeds:has(> .util-seed:not(.util-seed-wide) > .util-seed-ribbon) > .util-seed:not(.util-seed-wide, :has(> .util-seed-ribbon)) > .util-seed-head {
		padding-top: 1.925rem;
		padding-bottom: 1.925rem;
	}

	.util-layout-aside .util-seeds > .util-seed-wide > .util-seed-head {
		padding: 1rem 0.5rem;
	}

	.util-layout-aside .util-seeds > .util-seed-wide:has(> .util-seed-ribbon) > .util-seed-head {
		padding-top: 3.25rem;
	}

	.util-layout-aside .util-seed-head svg {
		width: 4rem;
		height: 4rem;
	}

	.util-layout-aside .util-seeds > .util-seed-wide > .util-seed-head:has(> .util-seed-plus ~ .util-seed-plus) svg {
		width: 3rem;
		height: 3rem;
	}

	.util-layout-aside .util-seed-name {
		font-size: 1.4rem;
	}

	.util-layout-aside .util-seeds:has(.util-seed-logo) > .util-seed:not(.util-seed-wide) > .util-seed-head {
		--seed-friend-size: calc(4rem + min(100cqi, 16rem) * 696 / 1775 - 0.5rem - 1.4rem * 1.1);
	}

	.util-layout-aside .util-seed-price {
		font-size: 1.35rem;
	}

	.util-layout-aside .util-seed-body {
		padding: 0.75rem;
	}

	.util-layout-aside .util-seed-calendar > span {
		font-size: 0.75rem;
		line-height: 1.4rem;
	}

	.util-layout-aside .util-seed-calendar:has(> span:nth-child(13)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-auto-columns: auto;
	}

}

.util-basket-row {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.4rem 0;
}

.util-basket-row + .util-basket-row {
	border-top: 1px solid var(--border-light);
}

.util-basket-row > :last-child {
	text-align: right;
	white-space: nowrap;
}

.util-basket-head h3 {
	margin: 0;
}

.util-basket-total {
	font-weight: bold;
}

.util-basket-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.5rem;
}

.util-basket-icon svg:not(.asset-icon) {
	width: 2.25rem;
	height: 2.25rem;
}

.util-basket-bar {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 1.5rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--color-brand);
	color: white;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-v2);
}

.util-basket-bar > .btn {
	white-space: normal;
	max-width: 100%;
}

.util-basket-bar a:not(.btn) {
	color: white;
	text-decoration: underline;
}

/* Pastille de variation : .util-variation + .util-variation-up|down|neutral. À réserver aux
   variations qui se lisent dans un flux dense, une ligne de tableau ou un prix, là où
   .util-figure-variation convient sous un chiffre clé. Comme elle, elle ne présume pas du sens métier : c'est
   l'appelant qui choisit up ou down, une baisse de charges étant une bonne nouvelle. `neutral` sert
   à un écart qui n'est ni bon ni mauvais (une position par rapport à une médiane). Une absence de
   variation ou de point de comparaison garde le châssis nu, sans modificateur. */
.util-variation {
	display: inline-flex;
	align-items: center;
	gap: 0.1875rem;
	padding: 0.0625rem 0.5rem;
	border-radius: 2rem;
	font-size: 0.8125rem;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--muted);
	background-color: var(--background);
}

.util-variation-up {
	color: var(--success);
	background-color: color-mix(in srgb, var(--success) 12%, transparent);
}

.util-variation-down {
	color: var(--danger);
	background-color: color-mix(in srgb, var(--danger) 10%, transparent);
}

.util-variation-neutral {
	color: var(--secondary);
	background-color: color-mix(in srgb, var(--secondary) 10%, transparent);
}

/* Fiabilité d'une valeur en trois barres : .util-confidence + .is-1|2|3, et .is-on sur chaque barre
   allumée. Le nom du niveau se pose en title. .util-confidence-levels en est la légende, une
   .util-confidence-level par niveau (marque, nom, critère) ; les critères s'alignent d'un niveau à
   l'autre parce que la rangée prête ses enfants à la grille (display: contents). */
.util-confidence {
	display: inline-flex;
	align-items: flex-end;
	gap: 1px;
	height: 0.75rem;
	margin-left: var(--space-xs);
	vertical-align: -0.05em;
}

.util-confidence span {
	width: 0.1875rem;
	border-radius: 1px;
	background-color: var(--border);
}

.util-confidence span:nth-child(1) {
	height: 0.3125rem;
}

.util-confidence span:nth-child(2) {
	height: 0.5rem;
}

.util-confidence span:nth-child(3) {
	height: 0.75rem;
}

.util-confidence.is-1 span.is-on {
	background-color: var(--warning);
}

.util-confidence.is-2 span.is-on {
	background-color: var(--color-neutral);
}

.util-confidence.is-3 span.is-on {
	background-color: var(--success);
}

.util-confidence-levels {
	display: grid;
	grid-template-columns: auto max-content 1fr;
	align-items: baseline;
	column-gap: var(--space-sm);
	row-gap: var(--space-xs);
	margin-top: var(--space-md);
	font-size: 0.9375rem;
	color: var(--color-neutral);
}

.util-confidence-level {
	display: contents;
}

.util-confidence-level > .util-confidence {
	margin-left: 0;
}

@media (max-width: 575px) {

	.util-confidence-levels {
		grid-template-columns: auto 1fr;
		row-gap: 0;
	}

	.util-confidence-level > span:last-child {
		grid-column: 2;
		margin-bottom: var(--space-xs);
	}

}

/* Famille en retrait, que .util-figure remplace (décidé par Vincent le 2026-10-01) : aucun emploi
   neuf. Les écrans qui la portent encore sont déclarés par FigureFamilySentinelAi, et ces règles
   partent quand sa déclaration est vide. */
.util-metric-label {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.2;
}

.util-metric-value {
	margin-top: 0.25rem;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.1;
}

.util-metric-variation {
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--muted);
}

.util-metric-variation-up {
	color: var(--success);
}

.util-metric-variation-down {
	color: var(--danger);
}

/* Pastille d'icône, à décliner par domaine : .util-icon + .util-icon-accounting|production|commercialisation|settings|amap|muted */
.util-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius);
	font-size: 1.2rem;
	background-color: var(--icon-background);
	color: var(--icon);
}

.util-icon-round {
	border-radius: 50%;
}

/* Le point « nouveau », en haut à gauche de l'icône. Il déborde du cadre, d'où l'anneau blanc qui le
   détache du fond coloré de l'icône. */
.util-icon.util-icon-dot {
	position: relative;
	overflow: visible;
}

.util-icon.util-icon-dot::after {
	content: "";
	position: absolute;
	top: -0.125rem;
	left: -0.125rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--danger);
	box-shadow: 0 0 0 0.125rem white;
}

.util-icon-lg {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.6rem;
}

.util-icon-sm {
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
}

.util-icon-production {
	--icon: var(--production-light);
	--icon-background: var(--production-neutral);
}

.util-icon-commercialisation {
	--icon: var(--commercialisation-light);
	--icon-background: var(--commercialisation-neutral);
}

.util-icon-accounting {
	--icon: var(--accounting-light);
	--icon-background: var(--accounting-neutral);
}

.util-icon-settings {
	--icon: var(--settings-light);
	--icon-background: var(--settings-neutral);
}

.util-icon-amap {
	--icon: var(--amap-light);
	--icon-background: var(--amap-neutral);
}

.util-icon-active {
	--icon: var(--production-light);
	--icon-background: var(--production-neutral);
}

.util-icon-inactive {
	--icon: var(--commercialisation-light);
	--icon-background: var(--commercialisation-neutral);
}

.util-icon-muted {
	--icon: var(--text-intermediate);
	--icon-background: var(--background);
}

/* Le logo du site à la place d'une icône, pour ce qui vient de l'équipe Ouvretaferme. Le logo est un
   SVG et non un glyphe de police : il se dimensionne par sa boîte, pas par font-size. */
.util-icon-brand {
	--icon: var(--color-brand);
	--icon-background: color-mix(in srgb, var(--color-brand) 12%, white);
}

.util-icon-brand > svg {
	width: 1rem;
	height: 1rem;
}

.util-icon-lg.util-icon-brand > svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* Le SVG d'un ami n'a pas de taille propre : il prend les trois quarts de la boîte, quelle que soit la
   taille de la pastille. */
.util-icon-friend > svg {
	width: 75%;
	height: 75%;
}

/* Badge en deux parties : une pastille .badge et un complément dans la même teinte.
   La teinte du complément est reprise de la classe .color-* posée sur .badge-split. */
.badge-split {
	display: inline-flex;
	align-items: stretch;
	line-height: 1;
	white-space: nowrap;
}

.badge-split > .badge {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.badge-split > .badge:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.badge-split > .badge:not(.badge-solid) {
	background-color: color-mix(in srgb, var(--badge-tint) 28%, white);
}

.badge-split-detail {
	font-family: "DM Sans", sans-serif;
	font-size-adjust: none;
	font-size: 90%;
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	border-top-right-radius: calc(var(--radius) / 2);
	border-bottom-right-radius: calc(var(--radius) / 2);
	background-color: color-mix(in srgb, currentColor 12%, white);
}

/*
 * Même principe que .util-info, dans le gris des états vides : la silhouette est découpée en
 * masque dans background-color, elle suit donc le gris au lieu de garder son jaune, et le
 * pseudo-élément est en absolu. Le retrait négatif qu'elle remplace cassait dès qu'un bouton ou
 * un tableau entrait dans l'écran vide.
 *
 * Posé sur un <span> au fil d'un tableau il reste tel quel : un élément inline ignore le retrait,
 * la silhouette le décalerait sans que rien ne le rattrape.
 */
.util-empty {
	color: var(--muted);
	margin-bottom: 1rem;
}

.util-empty:not(span):not(:has(p)),
.util-empty > p {
	position: relative;
	padding-left: 2.1rem;
}

.util-empty:not(span):not(:has(p))::before,
.util-empty > p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.3rem;
	height: 1.3rem;
	background-color: var(--muted);
	-webkit-mask: none center / contain no-repeat;
	mask: none center / contain no-repeat;
}

.util-circle {
	width: 2rem;
	height: 2rem;
	font-size: 1.1rem;
	border-radius: 50%;
	color: white;
	background-color: var(--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.util-circle.util-circle-lg {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
}

@keyframes util-animation-turn {
	from {
		transform: rotate(0turn);
	}

	to {
		transform: rotate(1turn);
	}
}

.util-animate-turn {
	animation: util-animation-turn 1s ease infinite;
}

.util-start {
	background:
		radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--secondary) 10%, white) 0%, white 58%),
		white;
	border-radius: 1.5rem;
	box-shadow: var(--shadow-v2);
	border: 1px solid color-mix(in srgb, var(--secondary) 20%, white);
	padding: 2.5rem;
	margin: 0 1rem 2rem 1rem;
	container-type: inline-size;
}

@media (max-width: 767px) {

	.util-start {
		padding: 1.75rem;
	}

}

@media (max-width: 449px) {

	.util-start {
		padding: 1.5rem 1rem;
	}

}

.util-start-icon {
	font-size: 1.5rem;
	width: 3.25rem;
	height: 3.25rem;
	background-color: var(--secondary);
	margin-bottom: 0rem;
	color: white;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--secondary) 9%, transparent);
}

.util-start-title {
	position: relative;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.util-start-content {
	position: relative;
	font-size: 1.1rem;
}

.util-start-content a:not(.btn) {
	text-decoration: underline;
}

.util-start-content *:last-child {
	margin-bottom: 0;
}

.util-start-image {
	padding-left: 1rem;
	padding-bottom: 0.5rem;
	float: right;
	width: 25cqi;
	max-width: max-content;
	text-align: right;
}

@media (max-width: 767px) {

	.util-start-image {
		display: none;
	}

}

.util-start-image img {
	width: 100%;
	border-radius: var(--radius);
}

/* Un SVG qui ne porte qu'un viewBox n'a pas de largeur propre : Firefox réduit alors le max-content
   du bloc à zéro et l'image disparaît, là où Chrome lui prête 300 px. On lui donne ces 300 px. */
.util-start-image img[src*=".svg"] {
	width: 300px;
	max-width: 100%;
}

.util-start-button {
	margin-top: 2rem;
	position: relative;
}

.util-celebrate {
	position: relative;
	overflow: hidden;
	text-align: center;
	margin: 0 0 2rem;
	background:
		radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--secondary) 10%, white) 0%, white 58%),
		white;
}

/* Les graines sont en position absolue : le contenu passe en relatif pour rester au-dessus d'elles */
.util-celebrate > * {
	position: relative;
}

.util-celebrate-title {
	font-family: var(--font-title);
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0.75rem 0 0.5rem;
}

.util-celebrate-lines {
	line-height: 1.7;
}

.util-celebrate .field-checkbox {
	justify-content: center;
}

.util-celebrate > .util-celebrate-bit {
	position: absolute;
	width: 2.25rem;
	height: 2.25rem;
	transform: rotate(var(--turn, 0deg));
	animation: util-celebrate-spill 0.9s var(--ease-spring) both;
}

.util-celebrate-bit:nth-child(2) {
	animation-delay: var(--duration-step);
}

.util-celebrate-bit:nth-child(3) {
	animation-delay: calc(var(--duration-step) * 2);
}

.util-celebrate-bit:nth-child(5) {
	animation-delay: calc(var(--duration-step) * 1.5);
}

.util-celebrate-bit:nth-child(6) {
	animation-delay: calc(var(--duration-step) * 2.5);
}

.util-celebrate-bit svg {
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes util-celebrate-spill {
	from {
		transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(0deg) scale(0.3);
		opacity: 0;
	}
	to {
		transform: rotate(var(--turn, 0deg));
		opacity: 1;
	}
}

@media (max-width: 575px) {

	.util-celebrate-title {
		font-size: 1.5rem;
	}

	.util-celebrate > .util-celebrate-bit {
		width: 1.5rem;
		height: 1.5rem;
	}

	.util-celebrate-bit:nth-child(n+2):not(:nth-child(4)) {
		display: none;
	}

}

@keyframes util-celebrate-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Un fondu et non animation: none, qui empêcherait animationend de partir. */
@media (prefers-reduced-motion: reduce) {

	.util-celebrate > .util-celebrate-bit {
		animation-name: util-celebrate-fade;
	}

}

.util-stamp {
	--util-stamp: var(--secondary);
	display: inline-block;
	padding: 0.2rem 0.5rem 0.15rem;
	border: 2px solid color-mix(in srgb, var(--util-stamp) 50%, white);
	border-radius: 0.35rem;
	box-shadow: 0 0 0 1px white, 0 0 0 3px color-mix(in srgb, var(--util-stamp) 22%, white);
	background: color-mix(in srgb, white 82%, transparent);
	color: color-mix(in srgb, var(--util-stamp) 78%, black);
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.1;
	white-space: nowrap;
	transform: rotate(-6deg);
}

.util-stamp-new {
	--util-stamp: var(--commercialisation);
}

/*
 * Marquer une carte d'accueil comme « à venir » : un cachet posé dessus, pas un
 * bloc de plus. Rien ne bouge autour de lui, il ne se retire donc qu'en enlevant
 * l'argument. Il occupe l'angle haut droit, celui de .util-start-image : les deux
 * ne cohabitent pas. C'est le modificateur qui porte le positionnement, et lui
 * seul : .util-start n'est pas positionné, et les cartes sans cachet n'ont pas à
 * changer pour lui.
 */
.util-start-upcoming {
	position: relative;
}

.util-start-stamp {
	position: absolute;
	top: 1.6rem;
	right: 1.9rem;
	z-index: 1;
	transform: rotate(-9deg);
	padding: 0.45rem 0.85rem 0.4rem;
	border: 2px solid color-mix(in srgb, var(--secondary) 50%, white);
	border-radius: 0.35rem;
	box-shadow: 0 0 0 1px white, 0 0 0 3px color-mix(in srgb, var(--secondary) 22%, white);
	background: color-mix(in srgb, white 82%, transparent);
	color: color-mix(in srgb, var(--secondary) 78%, white);
	text-align: center;
	line-height: 1.1;
}

.util-start-stamp b {
	display: block;
	font-size: 0.95rem;
	font-weight: bold;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.util-start-stamp small {
	display: block;
	margin-top: 0.2rem;
	padding-top: 0.2rem;
	border-top: 1px solid color-mix(in srgb, var(--secondary) 30%, white);
	font-size: 0.6875rem;
	font-weight: bold;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.util-start-upcoming .util-start-title {
	padding-right: 12rem;
}

/* Plus de place à côté du titre : le cachet descend en pied de carte. */
@media (max-width: 575px) {

	.util-start-stamp {
		top: auto;
		bottom: 1.25rem;
		right: 1rem;
		transform: rotate(-5deg) scale(0.9);
	}

	.util-start-upcoming .util-start-title {
		padding-right: 0;
	}

	.util-start-upcoming .util-start-content {
		padding-bottom: 4.25rem;
	}

}

.util-block,
.util-block-secondary,
.util-block-info {
	border-radius: var(--radius);
	margin-bottom: 1rem;
	padding: 1rem;
}

.util-block > *:last-child,
.util-block-secondary > *:last-child,
.util-block-info > *:last-child {
	margin-bottom: 0;
}

table.util-block tbody:last-child tr:last-child td:first-child {
	border-bottom-left-radius: var(--radius);
}

table.util-block tbody:last-child tr:last-child td:last-child {
	border-bottom-right-radius: var(--radius);
}

.util-block,
.panel-dialog .util-block .util-block {
	background: white;
	box-shadow: var(--box);
}

.util-block > hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 1rem -1rem;
	padding: 0;
	height: 0;
	background: transparent;
}

.util-block .util-block,
.panel-dialog .util-block {
	background: var(--background-light);
	box-shadow: none;
}

.util-deck-fold .util-block {
	background: var(--background);
	box-shadow: none;
}

.util-block-secondary {
	background: var(--secondary);
	color: white;
}

.util-block-secondary a {
	color: white;
	text-decoration: underline;
}

.util-block-optional {
	padding: 1rem;
	border: 3px dashed var(--border);
	margin-bottom: 1rem;
	border-radius: var(--radius);
}

.util-block-info {
	padding: 1rem;
	line-height: 1.5;
	position: relative;
	min-height: 4rem;
}

.util-block-info:has(h3) {
	padding-top: 1.5rem;
}

/* Panneau clair et non aplat plein : le bloc porte de l'information, pas une
   alerte, et il doit pouvoir héberger des boutons et une croix de fermeture sans
   que tout ce qu'il contient ait à se redessiner en blanc. */
.util-block-info {
	background-color: color-mix(in srgb, var(--secondary-neutral) 70%, white);
	border: 1px solid color-mix(in srgb, var(--secondary) 22%, white);
	color: var(--text);
}

.util-block-info {
	padding-left: 4.5rem;
}

.util-block-info h4 {
	font-weight: bold;
	min-height: 2.5rem;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
}

.util-block-info h4:first-child {
	margin-top: -0.5rem;
}

.util-block-info a:not(.btn) {
	text-decoration: underline;
	color: var(--secondary-on-light, var(--secondary));
}

.util-block-info:before,
.util-block-icon {
	position: absolute;
	font-style: italic;
	float: left;
	color: white;
	top: 1.25rem;
	left: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	line-height: 1;
	font-family: Serif;
	font-size-adjust: none;
}

.util-block-info:before {
	border-radius: 50%;
}

/*
 * Icône par défaut : info-circle, la même que celle du sprite, en masque plutôt qu'en
 * <use> parce qu'un pseudo-élément ne sait pas référencer un symbole. La couleur vient
 * donc de background-color, que le masque découpe à la forme du glyphe : elle suit le
 * thème comme n'importe quelle icône posée à la main.
 */
.util-block-info:not(:has(.util-block-icon)):before {
	content: '';
	background-color: var(--secondary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E") center / 2.75rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E") center / 2.75rem no-repeat;
}

/*
 * Sur fond clair, une icône blanche disparaîtrait : elle prend la teinte du thème.
 *
 * Deux cas, et ils ne se traitent pas pareil. La classe posée sur un conteneur —
 * un <span> qui enveloppe l'icône — donne une pastille pleine, le flex du bloc
 * centrant l'icône dedans. Posée directement sur le <svg>, ce que font la plupart
 * des appelants, le flex ne s'applique pas au contenu SVG : le symbole reste à
 * l'angle de sa boîte de 2,5 rem, et une pastille pleine derrière lui donnerait un
 * disque qui paraît vide.
 */
.util-block-info .util-block-icon:not(svg) {
	font-size: 1.25rem;
}

.util-block-info svg.util-block-icon {
	color: var(--secondary-on-light, var(--secondary));
	width: 2.5rem;
	height: 2.5rem;
}

/*
 * L'icône d'un util-block-info fait 1rem de plus que la pastille commune aux deux
 * blocs : elle porte seule le sens sur un fond clair, là où le « i » de
 * minimale suivent, sans quoi le bas de l'icône passerait sous le texte.
 */
.util-block-info {
	padding-left: 5rem;
	min-height: 5rem;
}

.util-block-info:before,
.util-block-info .util-block-icon {
	top: 1rem;
	width: 3rem;
	height: 3rem;
}

.util-block-info .form-info {
	color: var(--muted);
}

/*
 * Le bandeau d'arrivée : un titre, une explication en retrait, des actions poussées
 * à droite et une croix. Le bloc ne passe en ligne que s'il porte des actions, sinon
 * il reste le bloc de texte que ses soixante appelants attendent.
 */
.util-block-info:has(.util-block-info-actions) {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* En bandeau, la pastille se centre sur la hauteur : posée en haut comme dans un
   bloc de texte, elle flotte au-dessus d'un titre déjà centré par le flex. */
.util-block-info:has(.util-block-info-actions):before,
.util-block-info:has(.util-block-info-actions) .util-block-icon {
	top: 50%;
	transform: translateY(-50%);
}

.util-block-info-text {
	flex: 1;
	min-width: 0;
}

.util-block-info-title {
	font-size: 1.1rem;
	font-weight: 600;
}

.util-block-info-help {
	font-size: 0.9rem;
	color: var(--muted);
}

.util-block-info-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.util-block-info-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: 0.5rem;
	border-radius: 50%;
	color: var(--muted);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.util-block-info-close:hover {
	background: var(--background);
	color: var(--text);
}

@media (max-width: 767px) {

	.util-block-info:has(.util-block-info-actions) {
		flex-wrap: wrap;
	}

	/* `flex: 1` vaut une base de 0 : le texte se laisse comprimer à rien et le retour à la ligne
	   ne se déclenche jamais. À base auto, le texte prend sa largeur et les actions passent dessous. */
	.util-block-info:has(.util-block-info-actions) .util-block-info-text {
		flex-basis: auto;
	}

}

.util-block-dark {
	color: white;
}

.util-block-search {
	margin-bottom: 2rem;
	position: relative;
}

.util-block-search h4 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1rem;
	filter: brightness(0.8);
}

.util-block-gradient {
	background: var(--gradient);
	padding: var(--container-sm-padding);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	margin-bottom: 1rem;
}

@media (max-width: 575px) {

	.util-block-gradient {
		padding: var(--container-xs-padding);
	}

}

.util-block-title {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--muted);
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
}

.util-block-cta,
.util-block-empty {
	border-radius: var(--radius);
	padding: 3rem 1.5rem;
	text-align: center;
	margin-bottom: 1rem;
}

.util-block-cta {
	background-color: var(--color-bg-vert-amande);
}

.util-block-empty {
	background-color: var(--color-bg-blanc-menthe);
	box-shadow: none;
}

.util-block-cta h3,
.util-block-empty h3 {
	margin-bottom: 0.5rem;
}

.util-block-cta h3 + .util-buttons,
.util-block-empty h3 + .util-buttons {
	margin-top: 1rem;
}

.util-block-cta p,
.util-block-empty p {
	max-width: 44ch;
	margin: 0 auto 1.5rem auto;
	color: var(--text-intermediate);
}

.util-block-cta .util-buttons,
.util-block-empty .util-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0;
}

@media (max-width: 575px) {

	.util-block-cta,
	.util-block-empty {
		padding: 1.5rem 1rem;
	}

}

.util-block-danger,
.util-block-warning,
.util-block-success {
	padding: 1rem;
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

a.util-block-close {
	color: white;
	position: absolute;
	top: 0;
	right: 0;
	padding: 1rem;
}

.util-block-danger {
	background-color: var(--danger);
	color: white;
}

.util-block-success {
	background-color: var(--success);
	color: white;
}

.util-block-warning {
	background-color: var(--warning);
	color: white;
}

.util-block-danger a:not(.btn),
.util-block-success a:not(.btn),
.util-block-warning a:not(.btn) {
	color: white;
	text-decoration: underline;
}

.util-block-outline-warning {
	padding: 1rem;
	border-radius: var(--radius);
	margin-bottom: 1rem;
	border: 1px solid var(--warning);
	color: var(--warning);
}

.util-block-outline-warning > *:last-child {
	margin-bottom: 0;
}

.util-block-outline-warning a:not(.btn) {
	color: var(--warning);
	text-decoration: underline;
}

/* util-block-icon est blanche et calée en absolu, taillée pour les blocs pleins dont le texte tient
   sur deux lignes. Ici la ligne est souvent unique : réserver une gouttière au jugé laissait l'icône
   décalée de son texte, et forçait une hauteur minimale pour qu'elle ne déborde pas. Une ligne flex
   aligne les deux sans hauteur imposée, quel que soit le nombre de lignes. */
.util-block-outline-warning:has(.util-block-icon) {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.util-block-outline-warning .util-block-icon {
	position: static;
	flex-shrink: 0;
	color: var(--warning);
}

.util-block-sticked {
	margin-bottom: 0;
	left: 1rem;
	bottom: 1rem;
	right: 1rem;
	position: fixed;
	box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
	font-size: 1.1rem;
	transition: all 0.25s;
	z-index: 100000;
}

.util-block-remove {
	opacity: 0;
}

.util-toast-stack {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	pointer-events: none;
}

.util-toast {
	--toast-tint: color-mix(in srgb, var(--success) 50%, white);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	max-width: min(24rem, calc(100vw - 2rem));
	padding: 0.625rem 0.875rem;
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--primary);
	box-shadow: var(--shadow-v2-selected);
	color: white;
	line-height: 1.25;
	pointer-events: auto;
}

.util-toast-icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
}

.util-toast-icon.asset-icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0;
	color: var(--toast-tint);
}

.util-toast-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.util-toast-text small {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 0.9rem;
	opacity: 0.7;
}

.util-toast a {
	flex: none;
	color: white;
	font-weight: bold;
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.util-toast-timer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.1875rem;
	background-color: var(--toast-tint);
	transform-origin: left;
}

.util-toast.is-done {
	padding: 0.5rem;
}

@media (max-width: 575px) {

	.util-toast-stack {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		align-items: stretch;
	}

	.util-toast {
		max-width: none;
	}

	.util-toast.is-done {
		align-self: flex-end;
	}

}

.util-block-side {
	border: 2px dashed var(--primary);
	padding: 1.5rem;
	border-radius: var(--radius);
	margin-bottom: 2rem;
}

.util-block-inside {
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	background-color: var(--background-light);
}

.field-toggle-wrapper:has([data-type="yesNo"] input[value="1"]:not(:checked)) .field-toggle {
	display: none !important;
}

ul.util-summarize {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.util-summarize-overflow {
	overflow-x: auto;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
}

ul.util-summarize:not(:last-child) {
	margin-bottom: 1rem;
}

ul.util-summarize li {
	font-size: 1.5rem;
	font-weight: lighter;
	line-height: 1.2;
	text-align: center;
	border-radius: var(--radius);
}

/* Même habillage que .util-card : bordure fine et ombre douce, à la place de l'ombre portée
   décalée des --box. */
ul.util-summarize li > div,
ul.util-summarize li > a:not(.btn):not(.util-summarize-unstyled) {
	display: block;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: white;
	transition: all 0.25s;
	box-shadow: var(--shadow-v2);
	text-decoration: none;
}

ul.util-summarize li > a.util-summarize-unstyled {
	text-decoration: none;
	color: var(--text);
}

/* Dans un panneau, la surface est déjà posée sur un fond : l'ombre y ferait doublon,
   seule la bordure porte alors l'état */
.panel-dialog ul.util-summarize li > a:not(.btn):not(.util-summarize-unstyled) {
	box-shadow: none;
}

ul.util-summarize li > a:not(.btn):not(.util-summarize-unstyled):hover {
	box-shadow: var(--shadow-v2-selected);
}

.panel-dialog ul.util-summarize li > a:not(.btn):not(.util-summarize-unstyled):hover {
	box-shadow: none;
	border-color: var(--muted);
}

/* Le survol et la sélection partagent l'ombre : la bordure les distingue */
ul.util-summarize li.selected > a:not(.btn):not(.util-summarize-unstyled) {
	border-color: var(--secondary);
	box-shadow: var(--shadow-v2-selected);
}

.panel-dialog ul.util-summarize li.selected > a:not(.btn):not(.util-summarize-unstyled) {
	box-shadow: none;
}

ul.util-summarize li h5 {
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	font-weight: normal;
	font-size: 1rem;
	border-bottom: 1px solid var(--border);
}

ul.util-summarize li > div:not(:last-child) {
	margin-bottom: 0.25rem;
}

ul.util-summarize li .util-summarize-muted {
	font-size: 0.9rem;
	color: var(--muted);
	margin-top: 0.5rem;
}

@media (max-width: 575px) {

	ul.util-summarize li {
		font-size: 1.4rem;
		padding: 0.5rem;
	}

	ul.util-summarize li h5 {
		font-size: 1rem;
	}

	ul.util-summarize li > a:not(.btn) {
		padding: 0.75rem;
		margin: -0.5rem;
	}

}

a.util-summarize-primary {
	background-color: var(--primary) !important;
	border-color: var(--primary);
	color: var(--primary-ink);
}

.util-search {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.util-search-submit {
	display: flex;
	gap: 0.5rem;
	align-items: end;
}

.util-search.util-search-1,
.util-search.util-search-2,
.util-search.util-search-3 {
	display: grid;
	grid-template-columns: 1fr;
}

dl.util-presentation {
	display: grid;
	margin: 0;
	padding: 0;
	grid-column-gap: 1rem;
	grid-row-gap: 0.5rem;
	grid-auto-rows: min-content;
	align-content: baseline;
}

dl.util-presentation-max-content {
	display: grid;
	margin: 0;
	padding: 0;
	grid-column-gap: 1rem;
	grid-row-gap: 0.25rem;
	grid-auto-rows: min-content;
	align-items: baseline;
}

@media (max-width: 575px) {

	dl.util-presentation {
		grid-template-columns: auto 1fr;
	}

	/* Une piste 1fr ne descend pas sous le plus long segment insécable d'une adresse (min-width: auto) : elle sortirait du bloc */
	dl.util-presentation > dt:has(+ dd.util-presentation-fill > a.btn),
	dl.util-presentation > dd.util-presentation-fill:has(> a.btn) {
		grid-column: 1 / -1;
	}

	dl.util-presentation > dd.util-presentation-fill:has(> a.btn) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc((var(--touch-target) - 1lh) / 2 + 0.25rem) 0.5rem;
		min-width: 0;
	}

	dl.util-presentation > dd.util-presentation-fill:has(> a.btn) > a:not(.btn) {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	dl.util-presentation > dd.util-presentation-fill > a.btn {
		position: relative;
	}

	dl.util-presentation > dd.util-presentation-fill > a.btn::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: var(--touch-target);
		transform: translateY(-50%);
	}

}

@media (min-width: 576px) {

	dl.util-presentation-1 {
		grid-template-columns: auto 1fr;
	}

	dl.util-presentation-auto.util-presentation-1 {
		grid-template-columns: auto auto;
	}

	dl.util-presentation-2,
	dl.util-presentation-3 {
		grid-template-columns: auto 1fr auto 1fr;
	}

	dl.util-presentation-max-content.util-presentation-2,
	dl.util-presentation-max-content.util-presentation-3 {
		grid-template-columns: auto minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	}

	dl.util-presentation-2 dd.util-presentation-fill,
	dl.util-presentation-3 dd.util-presentation-fill {
		grid-column: span 3;
	}

	.util-search.util-search-2 {
		grid-template-columns: 1fr;
	}

	.util-search.util-search-3 {
		grid-template-columns: 1fr 1fr;
	}

	.util-search.util-search-3 .util-search-fill,
	.util-search.util-search-3 .util-search-submit {
		grid-column: span 2;
	}

}

@media (min-width: 992px) {

	dl.util-presentation-3 {
		grid-template-columns: auto 1fr auto 1fr auto 1fr;
	}

	dl.util-presentation-3 dd.util-presentation-fill {
		grid-column: span 5;
	}

	.util-search.util-search-2 {
		grid-template-columns: 1fr 1fr;
	}

	.util-search.util-search-2 .util-search-fill,
	.util-search.util-search-2 .util-search-submit {
		grid-column: span 2;
	}

	.util-search.util-search-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.util-search.util-search-3 .util-search-fill,
	.util-search.util-search-3 .util-search-submit {
		grid-column: span 3;
	}

}

dl.util-presentation dt {
	color: var(--muted);
	padding: 0;
	margin: 0;
}

dl.util-presentation dd {
	font-weight: bold;
	padding: 0;
	margin: 0;
}
dl.util-presentation dd a:not(.btn, .badge) {
	color: inherit;
}

/* util-presentation dans un dropdown : même grille libellé / valeur, mais sur
   le fond sombre du dropdown, valeurs alignées à droite. */
.dropdown-list dl.dropdown-presentation {
	padding: 0.25rem 1.25rem 0.5rem;
	grid-row-gap: 0.25rem;
	font-size: 0.9rem;
}

.dropdown-list dl.dropdown-presentation dt {
	color: #fff8;
}

.dropdown-list dl.dropdown-presentation dd {
	color: white;
	text-align: right;
}

/* Un menu clair, pour un résumé qui reprend les lignes d'un écran : ses teintes d'état sont celles de
   l'écran, que le fond sombre des menus renverserait. Le `:not()` égale la spécificité du fond de
   marque de lime.css (`.dropdown-list:not(…):not(…)`), que component.css suit dans la cascade. */
.dropdown-list.dropdown-list-light:not(.dropdown-list-minimalist) {
	background-color: white;
	color: var(--text);
	border-radius: var(--radius);
	box-shadow: var(--shadow-v2-selected);
	padding: 0.5rem 0;
}

/* `Lime.Stick` tient la liste à sa marge horizontale des bords de l'écran, sans qu'elle la décale
   ailleurs. `100%` et non `100vw` : la liste est posée dans `body`, dont la largeur ne compte pas la
   barre de défilement que `Lime.Stick` retire aussi. */
.dropdown-list.dropdown-list-light {
	margin-inline: var(--space-xs);
	max-width: calc(100% - 2 * var(--space-xs));
}

.dropdown-list-light .dropdown-title {
	color: var(--text);
	border-color: var(--border);
}

.dropdown-list-light .dropdown-subtitle {
	color: var(--muted);
}

/* `lime.css` ne donne aucune taille à une entrée de menu, qui hérite donc de ce qui l'entoure : posée
   dans un titre, elle rend 30 px là où une entrée de la même page en rend 15. Une entrée de menu est
   un contrôle, pas du texte courant. Le plafond est `1rem`, donc la taille de `html`, que `reboot.css`
   fait varier avec la largeur ; le pourcentage reste devant pour les contextes plus petits, que
   l'entrée doit suivre. */
.dropdown-item {
	font-size: min(100%, 1rem);
}

.dropdown-list-light .dropdown-item,
.dropdown-list-light .dropdown-item:hover,
.dropdown-list-light .dropdown-text {
	color: var(--text);
}

.dropdown-list-light .dropdown-item:hover {
	background-color: var(--background);
}

/* Après le survol, qui pèse autant : l'entrée où l'on est garde sa marque sous la souris. Le rayon
   est la moitié d'une entrée d'une ligne, `line-height` 1.2 et padding vertical de `lime.css`, tactile
   compris : une ligne reste une pastille, plusieurs lignes deviennent un rectangle arrondi au lieu
   d'un stade qui rogne ses bouts. */
.dropdown-list-light .dropdown-item.selected,
.dropdown-list-light .dropdown-item.selected:hover {
	background-color: color-mix(in srgb, var(--secondary) 20%, var(--background-surface));
	color: var(--text);
	font-weight: bold;
	border-radius: calc(0.6em + 0.625rem);
}

body[data-touch="yes"] .dropdown-list-light .dropdown-item.selected {
	border-radius: calc(0.6em + 0.75rem);
}

.dropdown-list-light .dropdown-divider {
	border-color: var(--border);
}

.dropdown-list-light .dropdown-block {
	color: var(--text);
}

.dropdown-item-unread {
	font-weight: bold;
}

.dropdown-list-light .dropdown-item-unread {
	background-color: color-mix(in srgb, var(--secondary-neutral) 45%, white);
}

.dropdown-list-light .dropdown-item-unread:hover {
	background-color: color-mix(in srgb, var(--secondary-neutral) 65%, white);
}

/* Le gras sans le fond : une entrée qu'on a déjà vue passer et qu'on n'a pas encore ouverte. */
.dropdown-item-pending {
	font-weight: bold;
}

/* Une entrée qui déplie ses éléments sur place. Elle porte data-dropdown-keep : sans lui, le clic
   fermerait le menu (lime.js, Lime.Dropdown.startCloseListener). */
.dropdown-item-group:not(.dropdown-item-group-open) + .dropdown-item-group-items {
	display: none;
}

.dropdown-item-group-chevron {
	display: inline-flex;
	transition: transform 0.2s;
}

.dropdown-item-group-open .dropdown-item-group-chevron {
	transform: rotate(180deg);
}

.dropdown-item-group-items {
	padding: 0.25rem 0;
	border-radius: var(--radius);
}

.dropdown-list-light .dropdown-item-group-items {
	border: 1px solid var(--border);
}

dl.util-presentation dt:not(:empty) + dd:empty:before {
	content: '/';
	font-weight: normal;
	color: var(--muted);
}

.dropdown-list .dropdown-item.disabled:has(.util-item-more) {
	opacity: 1;
}

.dropdown-list .dropdown-item.disabled:has(.util-item-more) .util-item-label {
	opacity: 0.5;
}

/* Hors tactile, un menu prend la largeur de son contenu : sans borne, une raison longue l'élargit tout
   entier ; même borne que .dropdown-info (lime.css) */
body[data-touch="no"] .dropdown-list .util-item-more {
	max-width: 20rem;
}

.dropdown-list .util-item-more {
	margin-top: 0.25rem;
	font-size: 0.85rem;
	font-style: italic;
	opacity: 0.8;
	max-width: 20rem;
}

.pagination-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	gap: 1rem;
}

ul.pagination {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	grid-auto-flow: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

div.util-buttons {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: 1fr 1fr 1fr;
}

div.util-buttons:not(:last-child) {
	margin-bottom: 2rem;
}

@media (max-width: 575px) {

	div.util-buttons {
		grid-gap: 1rem;
		grid-template-columns: 1fr;
	}

}

@media (min-width: 575px) and (max-width: 991px) {

	div.util-buttons {
		grid-template-columns: 1fr 1fr;
	}

}

div.util-buttons > .util-button {
	padding: 1rem;
	border-radius: var(--radius);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 1rem;
	grid-template-rows: 1fr auto;
	transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
	text-decoration: none;
}

div.util-buttons > .util-button > *:first-child {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

div.util-buttons:not(.util-buttons-dark) > .util-button {
	background-color: white;
	box-shadow: var(--box);
}

.panel-dialog div.util-buttons:not(.util-buttons-dark) > .util-button {
	background-color: var(--background-odd);
}

div.util-buttons.util-buttons-dark > .util-button {
	color: white;
	background-color: var(--primary);
	transition: opacity 0.5s;
}

div.util-buttons > .util-button.util-button-danger {
	border-color: var(--danger);
	color: var(--danger);
}

div.util-buttons:not(.util-buttons-dark) > .util-button:hover {
	border-color: var(--text);
	color: var(--text);
	box-shadow: var(--box-hover);
}

div.util-buttons.util-buttons-dark > .util-button:hover {
	opacity: 0.9;
}

div.util-buttons > .util-button.disabled {
	pointer-events: none;
	opacity: 0.3;
}

div.util-buttons > .util-button > svg {
	font-size: 5rem;
}

div.util-buttons > .util-button div.util-button-text {
	word-wrap: break-word;
	line-height: 1.4;
	font-size: 0.9rem;
	grid-column: span 2;
	grid-column-start: 1;
	opacity: 0.7;
}

div.util-buttons > .util-button h4 {
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.util-button-seed svg {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
}

div.util-buttons > label.util-button {
	cursor: pointer;
	margin-bottom: 0;
}

.util-drop {
	border: 2px dashed var(--border);
	border-radius: var(--radius);
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	background-color: var(--background);
	transition: border-color var(--duration-md), background-color var(--duration-md);
}

.util-drop > .asset-icon {
	width: 2rem;
	height: 2rem;
	color: var(--accounting);
}

.util-drop > p:last-child {
	margin-bottom: 0;
}

.util-drop.util-drop-over {
	border-color: var(--accounting);
	background-color: var(--background-odd);
}

.util-preview {
	display: block;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--background);
}

.util-preview > iframe,
.util-preview > img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.util-preview > img {
	object-fit: contain;
}

.util-preview-pdf {
	aspect-ratio: 1 / 1.414;
}

.util-preview-photo {
	aspect-ratio: 3 / 4;
}

.util-preview-erased {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
}

.util-preview-erased > .util-empty {
	margin-bottom: 0;
}

.util-previews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
	gap: var(--space-sm);
}

.util-previews-large {
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.util-previews-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-xxs);
	align-items: center;
	align-content: start;
	min-width: 0;
	color: var(--text);
}

.util-previews-item > .util-preview {
	grid-column: 1 / -1;
}

.util-previews-item > .util-preview:not(:has(> img)) {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--muted);
}

.util-previews-remove {
	cursor: pointer;
	color: var(--muted);
}

.util-previews-selected > .util-preview {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

.util-vignette {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
}

.util-vignette > *:first-child {
	align-self: start;
}

/* Une grille prend sa ligne de base dans les éléments de sa première rangée alignés sur la ligne de
   base, à défaut dans son premier élément, ici l'image : dans une cellule alignée sur le texte, la
   vignette s'alignait sur le bas du logo. Là seulement, le texte participe et chaque paire se cale en
   haut ; ailleurs, le centrage reste. */
td > .util-vignette,
.util-table-row > * > .util-vignette {
	align-items: start;
}

td > .util-vignette > :nth-child(even),
.util-table-row > * > .util-vignette > :nth-child(even) {
	align-self: baseline;
}

@media (max-width: 575px) {

	.util-vignette {
		gap: 1rem;
	}

}

.util-unit {
	white-space: nowrap;
}

/* Carte de France, peinte par l'écran qui l'emploie. La mécanique est commune : le tracé vient de
   `\analyze\FranceUi`, le remplissage d'une feuille en ligne, et les étiquettes d'un calque posé
   par-dessus. L'échelle, elle, appartient à l'appelant, qui écrit aussi sa légende. */
.util-map {
	margin-bottom: 1.5rem;
	text-align: center;
}

.util-map svg {
	max-width: 100%;
	max-height: 32rem;
	height: auto;
	overflow: visible;
}

/* Deux classes : une feuille d'écran chargée après celle-ci remet `overflow: visible` sur son svg de
   carte, et le reste du pays se peindrait autour du cadre. */
.util-map.util-map-cropped svg {
	overflow: hidden;
}

.util-map path {
	fill: var(--background-light);
	stroke: white;
	stroke-width: 1.5;
	transition: fill 0.15s;
}

/* Une donnée régionale : le trait de département s'efface, sinon la carte donne à lire un découpage
   que la couleur ne suit pas. */
.util-map-region path {
	stroke: #ffffffb0;
	stroke-width: 0.6;
}

.util-map-labels {
	pointer-events: none;
}

/* Le contour blanc tracé avant le remplissage détache le chiffre de la couleur sous lui, quelle
   qu'elle soit. */
.util-map-labels text {
	text-anchor: middle;
	paint-order: stroke;
	stroke: white;
	stroke-width: 4;
	stroke-linejoin: round;
	fill: var(--text);
	font-variant-numeric: tabular-nums;
}

.util-map-name {
	font-size: 19px;
	fill: var(--text-intermediate);
}

.util-map-value {
	font-size: 21px;
	font-weight: 700;
}

.util-map-region .util-map-value {
	font-size: 34px;
}

.util-map-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
}

.util-map-scale {
	width: 9rem;
	height: 0.65rem;
	border-radius: calc(var(--radius) / 2);
	border: 1px solid var(--border);
}

/* Feuille : une surface qui monte du bas de l'écran au doigt, et se centre en modale à partir de
   768px. Sortie de la feuille des formats de la boutique, la seule du produit. Son fond est opaque
   et non hérité du contexte : une feuille qui se lit au travers ne se referme plus des yeux.
   Celui qui l'ouvre bloque le défilement de la page derrière elle. */
.util-sheet:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 1102;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.util-sheet-scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.35);
}

.util-sheet-panel {
	position: relative;
	max-height: 88%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	color: var(--text);
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0 -0.375rem 1.75rem rgba(0, 0, 0, 0.22);
}

/* La poignée dit que le panneau vient du bas ; elle disparaît dès qu'il devient une modale. */
.util-sheet-grab {
	position: absolute;
	top: 0.3125rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2.125rem;
	height: 0.25rem;
	border-radius: 0.125rem;
	background-color: var(--muted-light);
}

.util-sheet-head {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 0.875rem 0.5rem;
	border-bottom: 1px solid var(--border);
}

.util-sheet-head h3,
.util-sheet-head h4 {
	margin: 0;
}

.util-sheet-close {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	color: var(--text-intermediate);
	cursor: pointer;
	line-height: 1;
}

.util-sheet-body {
	overflow-y: auto;
}

.util-sheet-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	border-top: 1px solid var(--border);
	background-color: #fff;
}

@media (min-width: 768px) {

	/* `:not([hidden])` et non `.util-sheet` seul : la règle de base porte déjà cette pseudo-classe,
	   qui pèse un attribut, et le centrage perdrait sinon contre son propre `justify-content`. */
	.util-sheet:not([hidden]) {
		justify-content: center;
		align-items: center;
	}

	.util-sheet-panel {
		width: 34rem;
		max-width: calc(100vw - 2rem);
		border-radius: var(--radius);
	}

	.util-sheet-grab {
		display: none;
	}

	/* Le pied porte un fond à lui : il repeint donc les coins bas du panneau, qui restaient carrés
	   sous un haut rond. Il reprend le rayon plutôt que le panneau ne rogne ses enfants, un
	   `overflow` ferait de lui le conteneur de défilement à la place de `.util-sheet-body`. */
	.util-sheet-foot {
		border-radius: 0 0 var(--radius) var(--radius);
	}

}

/* Une page intégrée dans une iframe qui prend la hauteur de son contenu n'a pas d'écran où poser
   une feuille fixe : elle se centrerait au milieu de la hauteur de l'iframe, hors de la vue du
   site hôte. La même feuille se rend alors dans le flux, sous ce qui l'ouvre. */
.util-sheet.util-sheet-inline:not([hidden]) {
	position: static;
	display: block;
	margin-bottom: 2rem;
}

.util-sheet-inline .util-sheet-scrim,
.util-sheet-inline .util-sheet-grab {
	display: none;
}

.util-sheet-inline .util-sheet-panel {
	width: auto;
	max-width: none;
	max-height: none;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: none;
}

/* Tabs */

div.tabs .tab-panel:not(.selected) {
	display: none;
}

div.tabs-item-wrapper {
	display: grid;
	grid-template-columns: 1fr max-content;
	align-items: center;
}

@media (max-width: 768px) {

	div.tabs-item-wrapper {
		grid-template-columns: 1fr;
		grid-row-gap: 1rem;
	}

}

.tabs-item-label {
	text-align: right;
	align-self: center;
	color: var(--muted);
	line-height: 1;
	padding-right: 0.5rem;
}

@media print {

	div.tabs-item {
		display: none !important;
	}

}

@media (max-width: 991px) {

	div.tabs-item {

		display: flex;
		align-items: stretch;
		margin-bottom: 1.5rem;
		max-width: var(--container-width);
		overflow: auto;

	}

	div.tabs-item.tabs-item-sticked,
	div.tabs-item:has(~ div.tab-panel.selected > table:first-child),
	div.tabs-item:has(~ div.tab-panel.selected > *:first-child > table:first-child),
	div.tabs-item:has(~ .tabs-panel > div.tab-panel.selected > table:first-child),
	div.tabs-item:has(~ .tabs-panel > div.tab-panel.selected > *:first-child > table:first-child) {
		margin-bottom: 0;
	}

}

@media (min-width: 992px) {

	:not(div.tabs-v) div.tabs-item {

		display: flex;
		align-items: stretch;
		margin-bottom: 1.5rem;
		max-width: var(--container-width);
		overflow: auto;

	}

	div.tabs-v {

		display: grid;
		grid-template-columns: max-content 1fr;
		align-items: start;
		grid-column-gap: 1rem;

	}

	div.tabs-v div.tabs-item {

		display: flex;
		flex-direction: column;
		row-gap: 0.5rem;

	}

	div.tabs-v div.tabs-item.tabs-item-sticky {
		position: sticky;
		top: var(--mainSticky);
	}

	@media (min-width: 1400px) {

		div.tabs-v div.tabs-item .tab-item {
			padding-right: 2rem;
		}

	}

}

.tab-item {
	position: relative;
	display: flex;
	align-items: center;
	line-height: 1;
	padding: 1rem 1rem calc(1rem + 5px);
	color: var(--text-intermediate);
	font-family: "DM Sans", sans-serif;
	font-size-adjust: none;
	letter-spacing: 0.1px;
	font-size: 1.1rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

label.tab-item input {
	display: none;
}

/* Des onglets qui portent la navigation principale d'un écran, et non un sous-
   découpage : .tabs + .tabs-lg. */
.tabs-lg .tab-item {
	font-size: 1.1rem;
}

/* Un compteur posé dans un onglet ou une entrée de menu se décolle de son libellé, et s'efface
   quand il ne compte rien : le JS qui le remplit y écrit une chaîne vide plutôt que de retirer le
   nœud. */
.tab-item .util-counter,
.dropdown-item .util-counter {
	margin-left: 0.5rem;
}

/* Les onglets repliés clonent chaque onglet en entrée de menu (`Lime.TabFold`) : l'icône y garde
   son écart. */
.tab-item .tab-item-icon,
.tab-item-menu-list .tab-item-icon {
	margin-right: 0.5rem;
}

.util-counter:empty {
	display: none;
}

a.tab-item {
	color: var(--text-intermediate);
	text-decoration: none;
}

.tab-item:after {
	content: ' ';
	position: absolute;
	height: var(--tab-bar-height, 5px);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #0000000a;
	bottom: 0; /* Sécurité de 0.03 pour éviter une scrollbar */
	left: 1rem;
	right: 1rem;
}

.tab-item:hover:after,
.tab-item.selected:after {
	background-color: var(--tab-active-color, var(--primary-on-light, var(--secondary-light)));
}

.tab-item:hover,
.tab-item.selected {
	color: var(--tab-active-color, var(--primary-on-light, var(--secondary-light)));
}

a.tab-item:hover,
a.tab-item.selected {
	color: var(--tab-active-color, var(--primary-on-light, var(--secondary-light)));
}

:where(.tab-item:hover, .tab-item.selected) {
	background-color: var(--tab-active-background, transparent);
	border-radius: var(--tab-radius, 0);
}

.tab-item:first-child {
	margin-left: 0;
}

.tab-item:last-child {
	margin-right: 0;
}

.tab-item-end {
	margin-left: auto;
}

/* L'onglet-menu ne peut pas porter dropdown-toggle, dont le ::after effacerait le filet de l'onglet :
   son chevron est une icône, tab-item-caret. */
.tab-item-menu {
	display: none;
	align-items: baseline;
}

.tabs-h-folded > .tabs-item > .tab-item:not(.tab-item-menu) {
	display: none;
}

.tabs-h-folded > .tabs-item > .tab-item-menu {
	display: flex;
}

.tab-item-menu-label {
	margin-left: 0.5rem;
}

.tab-item-menu-label:empty {
	display: none;
}

.tab-item-caret {
	margin-left: 0.25rem;
	font-size: 0.75em;
}

/* Un compteur dépasse la ligne d'un onglet de son remplissage et de ses bordures, et l'alignement au
   milieu le décale encore : une marge négative symétrique le sort du calcul de la ligne sans le déplacer,
   sans quoi le menu grandit de 3 px selon que l'onglet choisi compte quelque chose ou non. */
.tab-item-menu .util-counter {
	margin-block: -0.5rem;
}

/* Un texte plus petit posé sur la ligne du libellé, comme le code d'un journal, l'agrandit de la demi-
   interligne négative de DM Sans à `line-height: 1` : le menu gagnait 0,6 px selon l'onglet choisi. */
.tab-item-menu-label small:not(.util-counter) {
	line-height: 0;
}

/* L'aplat du compteur se confond avec le fond sombre de la liste : il s'en détache par la couleur du
   texte qui le porte, posée ici en `inherit` pour que `currentColor` la lise. */
.tab-item-menu-list .util-counter-solid {
	background-color: color-mix(in srgb, currentColor 20%, transparent);
	color: inherit;
}

/* Separator */
.util-separator-top {
	@media (max-width: 1165px) {
		transform: translateY(-0.5rem) rotate(180deg);
	}
	@media (min-width: 1166px) {
		transform: translateY(-1rem) rotate(180deg);
	}
}

.util-separator-bottom {
	@media (max-width: 1165px) {
		transform: translateY(0.5rem);
	}

	@media (min-width: 1166px) {
		transform: translateY(1rem);
	}
}

/* Footer */
div.util-footer {
	margin-top: var(--footer-margin-top);
}

body:not([data-template~="structure"]) div.util-footer {
	background-color: var(--color-brand);
	color: var(--background-light);
}

body[data-template~="structure"] div.util-footer {
	background-color: var(--background-dark);
}

div.util-footer .footer-content {

	padding: 0 1rem 2rem 1rem;

	@media (max-width: 575px) {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

}

body:not([data-template~="structure"]) div.util-footer .util-separator-top {
	color: var(--color-brand);
}

body[data-template~="structure"] div.util-footer .util-separator-top {
	color: var(--background-dark);
}

div.util-footer a.footer-logo {

	font-family: var(--font-title), sans-serif;
	font-size-adjust: none;
	font-size: 2rem;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	text-decoration: none;

	@media (max-width: 1199px) {
		font-size: 1.5rem;
	}

}

body:not([data-template~="structure"]) div.util-footer,
body:not([data-template~="structure"]) div.util-footer a {
	color: var(--background-light);
}

body[data-template~="structure"] div.util-footer,
body[data-template~="structure"] div.util-footer a {
	color: var(--color-brand);
}

div.util-footer .footer-logo svg {

	height: 2rem;

	@media (max-width: 1199px) {
		height: 1.5rem;
	}

}

div.util-footer .footer-content {

	display: grid;
	grid-template-columns: auto 45rem;

	@media (max-width: 991px) {

		grid-template-columns: 1fr;
		row-gap: 1rem;

	}
}

div.util-footer .footer-content-text p {
	font-size: 0.875rem;
	padding: 1rem 0;
}

div.util-footer .footer-content-links {

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;

	@media (max-width: 575px) {

		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;

	}
}

div.util-footer .footer-block-links h3 {
	font-size: 1.5rem;
	margin: 0.75rem 0;
	font-weight: 500;
	font-family: var(--font-text);
	font-size-adjust: none;
}

body[data-template~="structure"] div.util-footer .footer-block-links h3 {
	color: var(--text);
}

div.util-footer .footer-block-links ul {
	list-style: none;
	padding: 0;
}

div.util-footer .footer-block-links ul li {
	margin: 1rem 0;
	line-height: 1.25rem;
}

div.util-footer .footer-block-links a {
	font-size: 1rem;
}

/* Bandeau de filtres d'une page d'analyse : des groupes d'options en jetons.

   .util-filters > .util-filter, chacun portant un .util-filter-label et un
   .util-filter-options qui contient les .util-filter-option (+ .is-selected).
   Un groupe peut aussi porter un <select> quand ses valeurs sont trop nombreuses
   pour se basculer d'un clic.

   Les filtres qui changent l'échantillon se placent avant ceux qui le découpent :
   on choisit à qui on se compare avant de choisir ce qu'on regarde. */

.util-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background-color: var(--background-light);
	border: 1px solid var(--border);
}

.util-label,
.util-filter-label {
	font-size: 0.8125rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-neutral);
}

.util-filter-label {
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

a.util-filter-label {
	display: block;
	width: fit-content;
}

.util-filter > .field-switch {
	margin-top: var(--space-xxs);
}

/* Un `width: fit-content` échappe à l'étirement d'un parent flex en colonne, qui le placerait au début de son axe. */
.util-filter-options,
.util-filter-options-field .field-radio-group {
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	width: fit-content;
	max-width: 100%;
	gap: var(--space-xxs);
	padding: var(--space-xxs);
	border: 0;
	border-radius: 2rem;
	background-color: color-mix(in srgb, var(--secondary-neutral) 50%, white);
}

/*
 * Des jetons plutôt que des boutons : ce sont des variantes d'une même vue, pas
 * des actions, et un bouton plein par option ferait trois appels à agir
 * concurrents dans un bandeau qui n'en porte aucun.
 */
.util-filter-option {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.875rem;
	border-radius: 2rem;
	color: var(--text);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.util-filter-option:hover {
	color: var(--text);
	text-decoration: none;
}

/* Au doigt, le survol reste collé après le toucher et se lirait comme une sélection. */
[data-touch="no"] .util-filter-option:not(.is-selected):hover {
	background-color: color-mix(in srgb, white 60%, transparent);
	color: var(--secondary);
}

.util-filter-option small {
	opacity: 0.75;
	font-weight: normal;
}

.util-filter-option .util-counter {
	margin-left: 0.25rem;
	font-size: 0.9rem;
}

.util-filter-option .util-counter:not(.util-counter-solid) {
	border-color: color-mix(in srgb, currentColor 40%, transparent);
}

.util-filter-option.is-selected {
	background-color: white;
	color: var(--secondary);
	font-weight: bold;
	box-shadow: var(--shadow-v2-selected);
}

/*
 * util-filter-options-field pose le dessin de util-filter-option sur la sortie de
 * FormUi::checkboxes() ou radios(). form.css charge après cette feuille et trace un
 * pointillé sous chaque option d'un groupe à une colonne, avec une spécificité de
 * quatre classes : la règle des bordures doit la dépasser.
 */
.util-filter-options-field .field-radio-group-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-lg);
	border-radius: 2rem;
	color: var(--text);
	font-size: 0.9375rem;
	line-height: 1.4;
	white-space: nowrap;
	transition: none;
}

.util-filter-options-field .field-radio-group.field-radio-group-1 > .field-radio-group-item:not(:last-child),
.util-filter-options-field .field-radio-group.field-radio-group-1 > .field-radio-group-item {
	border: 0;
}

.util-filter-options-field .field-radio-group-item > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* form.css donne un fond au survol de chaque case, que le doigt laisse collé après le toucher : le rail ne survole qu'à la souris. */
.util-filter-options-field .field-radio-group-item:hover {
	background-color: transparent;
}

[data-touch="no"] .util-filter-options-field .field-radio-group-item:not(:has(> input:checked)):hover {
	background-color: color-mix(in srgb, white 60%, transparent);
	color: var(--secondary);
}

.util-filter-options-field .field-radio-group-item:has(> input:focus-visible) {
	z-index: 2;
	outline: 2px solid var(--secondary);
	outline-offset: 2px;
}

.util-filter-options-field .field-radio-group.field-radio-group-1 > .field-radio-group-item:has(> input:checked) {
	background-color: white;
	color: var(--secondary);
	font-weight: bold;
	box-shadow: var(--shadow-v2-selected);
}

.util-dates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

/* Un élément de grille ne rétrécit pas sous la largeur de son contenu sans min-width. */
.util-dates-month {
	min-width: 0;
}

.util-dates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
	gap: 0.375rem;
}

/*
 * Le jeton est rendu par FormUi::checkbox(), dont form.css pose .field-checkbox en flex
 * aligné en haut et charge après cette feuille : le sélecteur prend une classe de plus.
 */
.util-dates-grid > .util-date {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: var(--touch-target);
	padding: 0.25rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) / 2);
	background-color: white;
	color: var(--text);
	font-size: 0.9375rem;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	user-select: none;
}

.util-dates-grid > .util-date > input {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
}

.util-dates-grid > .util-date b {
	font-weight: 600;
}

.util-dates-grid > .util-date:has(> input:focus-visible) {
	outline: 2px solid var(--secondary);
	outline-offset: 2px;
}

[data-touch="no"] .util-dates-grid > .util-date:has(> input:not(:checked):not(:disabled)):hover {
	background-color: color-mix(in srgb, var(--secondary) 8%, transparent);
}

/* Une date déjà créée est cochée et verrouillée à la fois : la sélection ne s'y pose pas. */
.util-dates-grid > .util-date:has(> input:checked:not(:disabled)) {
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: #fff;
}

.util-dates-grid > .util-date:has(> input:disabled) {
	background-color: var(--background);
	color: var(--color-neutral);
	cursor: default;
}

/*
 * Une rangée de chiffres clés, en tête d'une page d'analyse : la valeur en gros,
 * son intitulé dessous. Le même bloc existait en propre dans la bibliothèque de
 * cultures sous le nom community-summary.
 */
.util-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.util-figure {
	flex: 1 1 10rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background-color: var(--figure-background, var(--color-bg-vert-bleu));
}

a.util-figure {
	color: inherit;
}

/* ⚠️ Une teinte du repos et non la couleur voisine : mesuré, le survol passait de 0,925 à 0,564
   de luminance, trente-six points — la tuile ne se soulignait pas, elle changeait d'identité. Le
   dépôt a son idiome deux cents lignes plus haut, `.util-chip:hover` posant 8 % de couleur sur le
   fond de repos. Ici 30 % de la sauge sur le vert-bleu rend 0,806, soit douze points d'écart : le
   pas se voit — un survol doit dire « ceci est un lien » — sans que la couleur change de nom. */
a.util-figure:hover {
	text-decoration: none;
	background-color: color-mix(in srgb, var(--color-bg-vert-sauge) 30%, var(--color-bg-vert-bleu));
}

.util-figure-value {
	font-size: 2rem;
	line-height: 1.1;
	font-weight: bold;
	color: var(--primary-on-light, var(--color-brand));
}

.util-figure-label {
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--color-neutral);
}

.util-figure-label-top {
	margin-top: 0;
	margin-bottom: var(--space-xxs);
	font-size: 1rem;
	font-weight: bold;
	color: var(--text);
}

.util-figure-value small {
	font-size: 1rem;
	font-weight: normal;
	color: var(--color-neutral);
}

/* La variation ne présume pas du sens métier : l'appelant choisit up ou down, une baisse de
   charges étant une bonne nouvelle. */
.util-figure-variation {
	margin-top: var(--space-xxs);
	font-size: 0.9rem;
	color: var(--muted);
}

/* --success et --danger purs mesurent 4,21 de contraste sur le fond d'une tuile, sous le seuil de 4,5. */
.util-figure-variation-up {
	color: color-mix(in srgb, var(--success) 90%, black);
}

.util-figure-variation-down {
	color: color-mix(in srgb, var(--danger) 90%, black);
}

.util-figures-2,
.util-figures-3 {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {

	.util-figures-2,
	.util-figures-3 {
		grid-template-columns: 1fr 1fr;
	}

}

@media (min-width: 992px) {

	.util-figures-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

}

/*
 * Sur un petit écran les tuiles passent sur une colonne : à 2 rem, quatre chiffres
 * remplissent l'écran avant le contenu qu'ils résument. La règle vient de
 * community-summary, que ce composant a remplacé.
 */
@media (max-width: 767px) {

	.util-figure-value {
		font-size: 1.5rem;
	}

}

.util-procedure {
	list-style: none;
	counter-reset: util-procedure;
	padding: 0;
	margin: 0 0 1rem;
}

.util-procedure-step {
	counter-increment: util-procedure;
	display: grid;
	grid-template-columns: 2rem 1fr;
	column-gap: 0.75rem;
	padding-bottom: 1rem;
	position: relative;
}

.util-procedure-step > * {
	grid-column: 2;
	min-width: 0;
}

.util-procedure-step::before {
	content: counter(util-procedure, var(--marker-counter, decimal));
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--marker-radius, 50%);
	background-color: var(--marker-background, var(--primary));
	color: var(--marker-color, var(--primary-ink));
	font-weight: 600;
}

:where(.util-procedure-step)::before {
	box-shadow: var(--marker-ring, none);
}

.util-procedure-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1rem - 1px);
	top: 2.25rem;
	bottom: 0.25rem;
	width: 2px;
	background: var(--step-line, color-mix(in srgb, var(--primary) 25%, transparent));
}

.util-procedure-title {
	margin: 0.3rem 0 0.25rem;
}

/* La barre de portée : ce qu'on regarde, et le geste qui en change, sur une ligne au-dessus du
   titre. Le surtitre porte toujours un nom, y compris quand la portée est le tout : seul, le jeton
   se lit comme un fil d'Ariane et non comme une commande. Le jeton, lui, garde le même mot quelle
   que soit la portée, et ne porte jamais `is-active` : la valeur est à sa gauche, pas en lui.
   Le `line-height: 1` du geste n'est pas cosmétique, sans lui il hérite de la hauteur de ligne du
   titre sous lequel la barre se pose.
   ⚠️ Les entrées se peignent depuis `.dropdown-item`, jamais depuis `.util-scope-line` : à
   l'ouverture, `Lime.Dropdown` déplace la liste sous `<body>`, et tout sélecteur qui passe par la
   barre cesse alors de peindre. */
.util-scope-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.util-scope-line-title {
	color: var(--color-brand);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.util-scope-line-change {
	line-height: 1;
}

.dropdown-item.util-scope-line-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.dropdown-item.util-scope-line-item-closed {
	opacity: 0.6;
}

.util-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Une barre d'une seule ligne peut rester à portée pendant tout le défilement, ce
 * qu'un bandeau de filtres ne peut pas se permettre. Le déroulant se replace hors du
 * flux, il n'est donc pas rogné par ce contexte d'empilement.
 */
.util-chips-sticky {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 0.625rem 0;
	background-color: var(--background-body);
	/* Une ombre douce et rien d'autre : un filet net se lirait comme un séparateur de
	   section tant que la barre n'est pas collée, alors qu'il ne doit signaler que le
	   contenu qui passe dessous. */
	box-shadow: 0 0.5rem 0.75rem -0.5rem #0002;
}

/*
 * Sur un petit écran la barre passe sur deux ou trois rangs : collée, elle prendrait
 * un cinquième de la hauteur utile en permanence, ce qui coûte plus que le retour en
 * haut de page qu'elle épargne. Elle ne colle donc qu'à partir de la tablette.
 */
@media (max-width: 767px) {

	.util-chips-sticky {
		position: static;
		padding: 0;
		box-shadow: none;
	}

}

.util-omnibox {
	position: relative;
	flex: 1 1 18rem;
	max-width: 30rem;
}

.util-omnibox .util-omnibox-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.5rem;
	cursor: text;
}

.util-omnibox-lg .util-omnibox-input {
	line-height: 2;
}

.util-omnibox-lg .util-omnibox-field > .asset-icon {
	width: 1.0625rem;
	height: 1.0625rem;
}

.util-omnibox-lg .util-omnibox-token {
	font-size: 1rem;
}

.util-omnibox-lg .util-omnibox-count {
	font-size: 0.875rem;
}

.util-omnibox-lg .util-omnibox-clear {
	width: 1.75rem;
	height: 1.75rem;
}

.util-omnibox-field:focus-within {
	border-color: #0005;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.util-omnibox-tail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 8rem;
	min-width: 0;
}

.util-omnibox-input {
	flex: 1 1 4rem;
	width: auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5;
	color: var(--text);
}

.util-omnibox-input:focus {
	outline: none;
	box-shadow: none;
}

.util-omnibox-field > .asset-icon {
	flex: none;
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--color-neutral);
}

.util-omnibox-token {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex: none;
	max-width: 100%;
	padding: 0.125em 0.625em;
	border: 1px solid var(--color-brand);
	border-radius: 2rem;
	color: var(--color-brand);
	font-size: 0.8125rem;
	font-weight: bold;
	line-height: 1.25;
	white-space: nowrap;
	cursor: pointer;
}

.util-omnibox-token:hover {
	border-color: var(--danger);
	background-color: white;
	color: var(--danger);
	text-decoration: none;
}

.util-omnibox-token .asset-icon {
	flex: none;
	width: 0.75em;
	height: 0.75em;
}

.util-omnibox-token-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* La pastille garde sa marge de texte courant (root.css) : dans le jeton, le gap espace déjà. */
.util-omnibox-token .plant-start {
	margin-left: 0;
}

.util-omnibox-count {
	flex: none;
	margin-left: auto;
	color: var(--muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.util-omnibox-count:empty {
	display: none;
}

.util-omnibox-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: -0.375rem;
	border-radius: 50%;
	color: var(--muted);
	cursor: pointer;
}

.util-omnibox-clear:hover {
	background-color: var(--background-dark);
	color: var(--text);
	text-decoration: none;
}

.util-omnibox:not(.is-filled) .util-omnibox-clear {
	display: none;
}

body.util-omnibox-fullscreen-open {
	overflow: hidden;
	width: 100vw;
}

.util-omnibox-placeholder {
	display: none;
}

.util-omnibox-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0.75rem;
	background-color: var(--background-body);
	display: flex;
	flex-direction: column;
}

.util-omnibox.is-fullscreen {
	max-width: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.util-omnibox.is-fullscreen .util-omnibox-input[readonly] {
	caret-color: transparent;
}

.util-omnibox-keypad {
	display: none;
}

.util-omnibox.is-fullscreen.is-keypad .util-omnibox-keypad {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.75rem;
}

.util-omnibox.is-fullscreen.is-keypad .util-omnibox-list {
	display: none;
}

.util-omnibox-keypad .util-filter-options {
	justify-content: center;
}

.util-omnibox-keypad > .btn,
.util-omnibox-keypad > .util-omnibox-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	margin: 0;
	padding: 0.5rem 1rem;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
	overflow: hidden;
}

.util-omnibox-keypad-detail {
	height: 1.5rem;
	line-height: 1.5rem;
	color: var(--muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.util-omnibox-keypad .util-keypad {
	height: 15rem;
	border-radius: var(--radius);
	background-color: var(--secondary);
}

.util-omnibox-keypad .util-keypad-key {
	font-size: 2rem;
	cursor: pointer;
}

.util-omnibox.is-fullscreen .util-omnibox-list {
	position: static;
	max-height: calc(100vh - 6rem);
	margin-top: 0.75rem;
}

/* La liste de l'omnibox et celle des champs autocomplete du cadriciel (framework/util/static/css/form.css) partagent leur apparence, qui ne vit qu'ici. */
.util-omnibox-list,
ul.autocomplete-list {
	max-height: 20rem;
	overflow-y: auto;
	padding: 0 0 0.5rem;
	border-radius: var(--radius);
	background-color: var(--primary);
	box-shadow: 0 0.5rem 1.5rem -0.25rem #0004;
}

ul.autocomplete-list {
	padding-top: 0.5rem;
}

.util-omnibox-list {
	display: none;
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	right: 0;
}

.util-omnibox-list.is-open {
	display: block;
}

.util-omnibox.is-loading .util-omnibox-list {
	opacity: 0.6;
}

.util-omnibox-group {
	position: sticky;
	top: 0;
	background-color: var(--primary);
	padding: 0.5rem 1.25rem 0.25rem;
	color: #fff8;
	font-size: 0.9rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.util-omnibox-rest {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1px 0.5rem;
	padding: 0.5rem 0.75rem;
	color: #fff8;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.util-omnibox-item,
ul.autocomplete-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--touch-target);
	margin: 1px 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	color: white;
	line-height: 1.2;
	cursor: pointer;
}

.util-omnibox-item-detail {
	margin-left: auto;
	padding-left: 1rem;
	opacity: 0.6;
	font-size: 0.875em;
	white-space: nowrap;
}

.util-omnibox-item-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.util-omnibox-item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.util-omnibox-item-sub {
	opacity: 0.6;
	font-size: 0.875em;
}

.util-omnibox-item:hover,
.util-omnibox-item.is-cursor,
ul.autocomplete-list li:not(.autocomplete-not-selectable):hover,
ul.autocomplete-list li:not(.autocomplete-not-selectable).selected {
	background-color: #fff2;
	color: white;
	text-decoration: none;
}

.util-omnibox-notice {
	display: flex;
	align-items: center;
	min-height: var(--touch-target);
	margin: 1px 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	background-color: var(--danger);
	color: white;
	line-height: 1.2;
}

@media (max-width: 767px) {

	.util-omnibox-list {
		max-height: 50vh;
	}

}

.util-keypad {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-gap: 0.75rem;
	height: 100%;
	padding: 1rem;
	user-select: none;
}

@media (max-width: 575px) {

	.util-keypad {
		padding: 0.75rem;
		grid-gap: 0.5rem;
	}

}

@media (max-width: 449px) {

	.util-keypad {
		padding: 0.5rem;
	}

}

.util-keypad-key {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	background-color: white;
	color: var(--primary);
	font-size: 2.5rem;
	line-height: 1;
	letter-spacing: -0.25rem;
}

.util-keypad-key:hover {
	text-decoration: none;
}

/*
 * Le chevron n'est pas décoratif : c'est ce qui distingue un jeton qui ouvre une
 * liste d'un jeton qui n'est qu'une étiquette. Il est posé en image de fond et non
 * en :after, parce qu'un <select> ne peut pas porter de pseudo-élément et qu'il doit
 * être identique au pixel près sur les deux formes de jeton. Les deux teintes sont
 * en variables : les états les réutilisent au lieu de recopier le SVG.
 */
/*
 * La boîte est celle du bouton — même hauteur de ligne, même retrait vertical, même retrait à
 * gauche : un jeton posé à côté d'un bouton en partage la hauteur au pixel. Seul le retrait à
 * droite s'écarte, du chevron qu'il doit loger.
 */
.util-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1.75rem 0.5rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 2rem;
	background-color: white;
	background-image: var(--util-chip-caret);
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.625rem 0.4375rem;
	color: var(--color-neutral);
	/* La hauteur de ligne du bouton en valeur absolue et non en facteur : le jeton écrit plus
	   petit, et un `line-height: 1` lui donnerait une boîte plus courte d'un pixel. */
	line-height: 1rem;
	white-space: nowrap;
	cursor: pointer;
}

/*
 * Le survol ne touche pas à la bordure : celle-ci est le seul signe qui dit « ce
 * jeton porte une valeur », et la teinter au passage de la souris ferait ressembler
 * un jeton vide à un jeton réglé. Un fond très pâle suffit comme retour.
 */
.util-chip:hover {
	background-color: color-mix(in srgb, var(--secondary) 8%, transparent);
	background-image: var(--util-chip-caret-secondary);
	color: var(--secondary);
	text-decoration: none;
}

.util-chip.is-active {
	border-color: var(--secondary);
	background-image: var(--util-chip-caret-secondary);
	color: var(--secondary);
	font-weight: bold;
}

.util-chip.is-active:hover {
	background-color: color-mix(in srgb, var(--secondary) 8%, transparent);
}

/* Le jeton posé sur un fond sombre — le bandeau d'un groupe, ou la photo qui le couvre. Blanc
   bordé de `--border`, il y devient la chose la plus claire de l'en-tête et vole l'oeil aux
   onglets. Les deux valeurs sont celles que le bandeau donne déjà à ses boutons, pour que deux
   commandes voisines ne se distinguent pas l'une de l'autre sans raison. */
.util-chip.is-inverted {
	background-color: transparent;
	background-image: var(--util-chip-caret-white);
	border-color: rgba(255, 255, 255, 0.45);
	color: white;
}

.util-chip.is-inverted:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: white;
}

.util-chip.is-solid {
	border-color: var(--secondary);
	background-color: var(--secondary);
	background-image: var(--util-chip-caret-white);
	color: white;
	font-weight: bold;
}

.util-chip.is-solid:hover {
	background-color: var(--secondary);
	background-image: var(--util-chip-caret-white);
	color: white;
}

/*
 * Un <select> peut être un jeton : au-delà d'une dizaine de valeurs, la liste native
 * se parcourt au clavier et se replie sur le sélecteur du système sur mobile, ce que
 * le menu du framework ne sait pas faire.
 *
 * Tout est redéclaré ici, et sous le conteneur, pour une raison de cascade : le
 * framework ajoute .form-control à tout <select>, et form.css est chargé APRÈS ce
 * fichier — à spécificité égale il gagnait, et le jeton héritait du rayon, du
 * rembourrage et du chevron des champs de formulaire. D'où deux jetons voisins de
 * hauteurs et de rayons différents. Chaque état a donc sa règle qualifiée, sinon la
 * règle de base du select, plus spécifique que .util-chip:hover, les écraserait.
 */
.util-chips select.util-chip {
	display: inline-block;
	width: auto;
	/* Un <select> se dimensionne sur son option la plus longue, pas sur celle qui est
	   choisie : sans plafond, « Provence-Alpes-Côte d'Azur » réserve sa largeur en
	   permanence, y compris quand la zone affichée est « France ». */
	max-width: 11rem;
	height: auto;
	padding: 0.3125rem 1.875rem 0.3125rem 0.875rem;
	border-radius: 2rem;
	background-image: var(--util-chip-caret);
	background-position: right 0.75rem center;
	background-size: 0.625rem 0.4375rem;
	color: var(--color-neutral);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-overflow: ellipsis;
}

.util-chips select.util-chip:hover {
	background-color: color-mix(in srgb, var(--secondary) 8%, transparent);
	background-image: var(--util-chip-caret-secondary);
	color: var(--secondary);
}

.util-chips select.util-chip.is-active {
	background-image: var(--util-chip-caret-secondary);
	color: var(--secondary);
}

.util-chips select.util-chip.is-active:hover {
	background-color: color-mix(in srgb, var(--secondary) 8%, transparent);
}

.util-chips select.util-chip:focus {
	border-color: var(--secondary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 13%, transparent);
}

/*
 * Le compteur du jeton de débordement : c'est la seule pastille pleine du composant,
 * sans quoi elle se perdrait sur le fond blanc du jeton.
 */
.util-campaign {
	display: flex;
	align-items: stretch;
	gap: 1rem;
}

.util-campaign-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.75rem 1rem 1.25rem 1rem;
	border-radius: var(--radius-lg);
	background-color: #fff;
	border: 2px solid transparent;
}

/* L'étape en cours est la seule à porter un bord : c'est elle qu'on cherche. */
.util-campaign-step.is-active {
	border-color: var(--color-brand);
}

/* Une étape à venir s'efface sans disparaître : le blanc y devient translucide. */
.util-campaign-step.is-todo {
	background-color: color-mix(in srgb, #fff 65%, transparent);
	opacity: .75;
}

/* Une étape peut mener quelque part : à la section qu'elle annonce, ou à l'écran où elle se
   traite. Elle se soulève alors au survol comme un util-deck lien — le geste est le même
   partout dans le produit et ne se décide pas frise par frise. Le cadre de l'étape en cours reste
   la marque de « où j'en suis » : le survol ne le donne à aucune autre. */
a.util-campaign-step {
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

a.util-campaign-step:hover {
	color: inherit;
	text-decoration: none;
	box-shadow: var(--shadow-v2-selected);
	transform: translateY(-2px);
}

.util-campaign-marker {
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	background-color: #fff;
	border: 2px solid var(--border);
	color: var(--color-neutral);
}

.util-campaign-step.is-done .util-campaign-marker,
.util-campaign-step.is-active .util-campaign-marker {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}

.util-campaign-step.is-active .util-campaign-marker {
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.util-campaign-content {
	margin-top: 0.875rem;
}

.util-campaign-date {
	font-size: 0.8125rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-neutral);
}

.util-campaign-step.is-active .util-campaign-date {
	color: var(--color-brand);
}

.util-campaign-label {
	margin-top: 0.25rem;
	font-size: 1.125rem;
	font-weight: bold;
	color: var(--color-text-main);
}

.util-campaign-step.is-todo .util-campaign-label {
	color: var(--color-neutral);
}

.util-campaign-description {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: var(--color-neutral);
}

.util-campaign-action {
	margin-top: 1rem;
}

@media (max-width: 767px) {

	.util-campaign {
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Deux colonnes : la pastille à gauche, le texte à droite. */
	.util-campaign-step {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 1rem;
		padding: 1.25rem 1rem;
	}

	.util-campaign-content {
		margin-top: 0.125rem;
	}

}

/* Bandeau d'accueil : un message et une mascotte, posés en tête d'un écran qu'on
   découvre. .util-welcome > .util-welcome-text (avec .util-welcome-title) + .util-welcome-mascot.
   La mascotte disparaît sous 576px : elle illustre, elle n'informe pas. */
.util-welcome {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border-radius: var(--radius);
	background: linear-gradient(120deg, var(--color-bg-vert-menthe) 0%, var(--color-bg-vert-bleu) 100%);
	border: 1px solid var(--color-bg-vert-sauge);
}

.util-welcome-title {
	font-family: var(--font-title), sans-serif;
	font-size: 1.5rem;
	line-height: 1.2;
	margin-bottom: 0.5rem;
	color: var(--color-brand);
}

.util-welcome-text p {
	margin-bottom: 0;
	color: var(--text-intermediate);
}

.util-welcome-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.util-welcome-mascot svg {
	width: 5rem;
}

@media (max-width: 575px) {

	.util-welcome {
		grid-template-columns: 1fr;
		padding: 1rem;
	}

	.util-welcome-mascot {
		display: none;
	}

}

/* Une échéance en pastille de calendrier : le jour en grand, son mois dessous. Elle remplace la
   date écrite en chiffres là où l'échéance est ce que l'oeil cherche en premier.

   Elle prend la teinte de ce qui la porte : --accent est posé plus haut par un util-deck-accent-*
   ou une util-card-accent-*, et la pastille retombe sur le gris quand personne ne l'a posé. Le
   repli s'écrit une fois dans --calendar, la lecture d'une propriété héritée ne pouvant pas se
   faire sur la propriété elle-même sans casser l'héritage. */
.util-calendar {
	--calendar: var(--accent, var(--muted));
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--calendar-size, 2.5rem);
	height: var(--calendar-size, 2.5rem);
	border: var(--border-width, 1px) solid color-mix(in srgb, var(--calendar) 30%, var(--background-surface));
	border-radius: var(--calendar-radius, var(--radius));
	background-color: var(--calendar-background, color-mix(in srgb, var(--calendar) 12%, var(--background-surface)));
	color: var(--calendar-color, color-mix(in srgb, var(--calendar) 78%, var(--calendar-contrast, black)));
	line-height: 1.1;
	text-align: center;
}

:where(.util-calendar) {
	box-shadow: var(--calendar-ring, none);
}

.util-calendar-day {
	font-size: var(--calendar-day-size, 1.15rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.util-calendar-month {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.util-calendar.util-calendar-selected {
	border-color: var(--calendar);
	background-color: var(--calendar);
	color: white;
}

.util-calendar.util-calendar-lg {
	width: 3.25rem;
	height: 3.25rem;
}

.util-calendar-lg .util-calendar-day {
	font-size: 1.4rem;
}

.util-calendar-lg .util-calendar-month {
	font-size: 0.7rem;
}

@media (max-width: 575px) {

	.util-calendar.util-calendar-lg {
		width: 2.75rem;
		height: 3rem;
	}

	.util-calendar-lg .util-calendar-day {
		font-size: 1.25rem;
	}

}

.util-calendar-sheets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.util-calendar-sheet {
	display: grid;
	align-content: start;
	gap: var(--space-md);
}

.util-calendar-sheet-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-xxs);
	place-items: center;
	font-size: 0.9rem;
}

.util-calendar-sheet-weekday {
	color: var(--muted);
	font-weight: 600;
}

.util-calendar-sheet-day {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 1.75rem;
	aspect-ratio: 1;
	color: var(--muted);
	border-radius: 50%;
}

/* --secondary est redéfini par chaque rubrique : un jour tenu prend la couleur du côté qui le lit. */
.util-calendar-sheet-held {
	background-color: var(--secondary);
	color: white;
	font-weight: 600;
}

.util-calendar-sheet-held.util-calendar-sheet-out {
	background-color: transparent;
	color: var(--secondary);
	box-shadow: inset 0 0 0 1px var(--secondary);
}

.util-days {
	display: flex;
	align-items: flex-end;
	gap: var(--space-xs);
}

/* Les teintes sont posées ici et non lues dans --secondary, que chaque rubrique redéfinit : une semaine
   de temps a la même apparence partout. */
.util-day {
	--day-accent: var(--production);
	--day-worked: color-mix(in srgb, var(--todo) 50%, white);
	--day-future: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--day-accent) 22%, white) 0 0.25rem, white 0.25rem 0.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xxs);
	min-width: 3.25rem;
	padding: var(--space-xxs);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.util-day-value {
	font-size: 0.9rem;
	white-space: nowrap;
}

.util-day-column {
	display: flex;
	align-items: flex-end;
	width: 1.75rem;
	height: 2.75rem;
	border-radius: 0.25rem 0.25rem 0 0;
}

.util-day.is-future .util-day-column {
	background: var(--day-future);
}

.util-day-worked {
	display: flex;
	align-items: flex-end;
	width: 100%;
	border-radius: 0.25rem 0.25rem 0 0;
	background-color: var(--day-worked);
	overflow: hidden;
}

.util-day-done {
	display: block;
	width: 100%;
	background-color: var(--done);
}

.util-day-column > .util-day-done {
	border-radius: 0.25rem 0.25rem 0 0;
}

.util-day.is-over .util-day-done {
	background-color: var(--warning);
}

.util-day-column + .util-calendar {
	margin-top: var(--space-xxs);
}

.util-day.is-today .util-calendar,
.util-day .util-calendar.util-calendar-selected {
	--accent: var(--day-accent);
}

@media (hover: hover) {

	/* `a:hover` (reboot.css) passe devant le `text-decoration: none` de `.util-day` par sa spécificité, et
	   soulignerait la valeur, une simple espace sur un jour à saisir ou à venir. */
	a.util-day:hover {
		text-decoration: none;
	}

	a.util-day:hover .util-calendar:not(.util-calendar-selected) {
		--accent: var(--primary);
	}

}

@media (max-width: 575px) {

	.util-days {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: var(--space-xxs);
		width: 100%;
	}

	.util-day {
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.util-days .util-calendar {
		width: 100%;
		max-width: 2.5rem;
	}

}

/* Un objet à étages : son identité en tête, puis autant de bandes qu'il a de choses à dire, puis
   son étage déplié.

   Trois natures, et elles s'excluent : un LIEN, dont le bloc entier mène à une page et qui porte
   le chevron util-deck-arrow ; un DÉPLIABLE, dont la tête ouvre le bloc et porte util-deck-chevron ;
   des PORTES, quand l'objet a plusieurs destinations, chacune un bouton dans util-deck-band-doors
   ou à droite de la tête dans util-deck-doors, et aucun chevron. Un objet qui n'a qu'une destination
   n'a donc pas de bouton, c'est le bloc qui est le lien, sauf quand le verbe du bouton dit un geste
   que rien d'autre sur le deck ne dit (« Enregistrer la cession ») : il reste alors une porte. Un
   bloc cliquable ne se déplie pas, faute de quoi un même geste ferait deux choses. Les portes et le
   dépliable, eux, se cumulent.

   Au plus une, et zéro est un cas courant : un deck dont le geste, un interrupteur ou une case, vit
   dans sa bande ou à droite de sa tête ne mène nulle part, et le rendre cliquable ferait justement
   les deux gestes d'un clic que l'exclusion ci-dessus interdit.

   ⚠️ Ce qui sépare un deck d'un util-button n'est pas le geste : la plupart des util-button sont
   eux aussi des liens. C'est la place dans l'écran — un util-button est un choix d'entrée qui
   structure l'écran et qu'on compte sur les doigts d'une main, un deck est une ligne d'une liste
   qui peut s'allonger. Compter les emplois demande un motif où la classe se termine,
   `class="util-button( |")` : `util-buttons` est le conteneur et `util-button-text`,
   `util-button-danger` des variantes, trois classes que tout motif plus lâche additionne.

   La teinte se pose par util-deck-accent-*, comme sur util-card-accent, et sert la bande d'état et
   la garniture chiffrée. */
.util-deck {
	position: relative;
	display: flex;
	flex-direction: column;
	border: var(--border-width, 1px) solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-v2);
	color: var(--text);
	text-decoration: none;
	transition: box-shadow 0.2s;
	--accent: var(--muted);
	--stack-inset: 0.4rem;
	--stack-step: 0.35rem;
}

:where(.util-deck) {
	rotate: var(--deck-rotate, none);
	clip-path: var(--deck-clip, none);
}

:where(.util-deck:nth-child(even)) {
	rotate: var(--deck-rotate-even, var(--deck-rotate, none));
}

/* Les étages sont carrés et ce sont les deux extrêmes qui reprennent les coins du bloc : un fond
   de bande déborderait sinon des arrondis, et overflow: hidden couperait les feuilles du dessous. */
.util-deck > :first-child {
	border-radius: var(--radius) var(--radius) 0 0;
}

.util-deck > :last-child {
	border-radius: 0 0 var(--radius) var(--radius);
}

.util-deck > :first-child:last-child {
	border-radius: var(--radius);
}

/* :last-child compte encore le déplié masqué : replié, c'est l'étage qui le précède, ou qui précède
   sa barre d'onglets masquée, qui ferme le bloc et en reprend les coins du bas. */
.util-deck:not(.util-deck-open) > :has(+ .util-deck-fold),
.util-deck:not(.util-deck-open) > :has(+ .util-deck-tabs) {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

/* Le sujet du :has() reste le deck et son argument un enfant direct : posé sur un ancêtre de
   l'écran, Firefox le réévalue à chaque mutation du DOM. */
a.util-deck:hover,
.util-deck:has(> a.util-deck-head:hover),
.util-deck:has(> .util-deck-head > a.util-deck-body:hover),
.util-deck:has(> .util-deck-head > a.util-deck-chevron:hover) {
	box-shadow: var(--shadow-v2-selected);
	text-decoration: none;
}

.util-deck-accent-success {
	--accent: var(--success);
}

.util-deck-accent-warning {
	--accent: var(--warning);
}

.util-deck-accent-danger {
	--accent: var(--danger);
}

.util-deck-accent-order {
	--accent: var(--order);
}

.util-deck-accent-info {
	--accent: var(--secondary);
}

/* La bande d'état dilue l'accent à 14 %, et cette dilution rapproche deux teintes sombres de même
   famille : --secondary y tombe à cinq points de --muted, qui est le défaut et veut dire « rien ».
   L'accent de todo se prend donc dans une teinte que la dilution ne replie pas sur le gris. */
.util-deck-accent-todo {
	--accent: var(--commercialisation-light);
}

.util-deck-selected > .util-deck-head {
	background-color: color-mix(in srgb, var(--secondary-light) 9%, var(--background-surface));
}

.util-deck-selected .util-deck-title {
	color: var(--secondary-light);
	gap: 0.4rem;
}

a.util-deck:not(.util-deck-selected):hover > .util-deck-head {
	background-color: color-mix(in srgb, var(--secondary-light) 3%, var(--background-surface));
}

/* La tête prend la hauteur qui reste : dans une grille où les blocs s'étirent, les bandes de pied
   s'alignent alors d'un bloc à l'autre au lieu de flotter au milieu. */
.util-deck-head {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background-color: var(--background-surface);
}

:where(.util-deck-head) {
	background-image: var(--deck-head-image, none);
}

a.util-deck-head,
a.util-deck-head:hover,
a.util-deck-body,
a.util-deck-body:hover {
	color: inherit;
	text-decoration: none;
}

.util-deck-body {
	flex: 1 1 auto;
	min-width: 0;
}

.util-deck-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-weight: bold;
}

/* `.badge` est insécable : un libellé long y fixait la largeur minimale du deck, et la grille qui le
   porte débordait de l'écran. */
.util-deck-title .badge {
	white-space: normal;
}

.util-deck-head p {
	margin-bottom: 0;
	color: var(--text-intermediate);
	line-height: 1.4;
	font-size: 0.9rem;
}

.util-deck-aside {
	flex: none;
	font-size: .9rem;
	max-width: 45%;
	text-align: right;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.util-deck-aside > .util-checkbox {
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	margin-block: calc((1lh - var(--touch-target)) / 2);
	cursor: pointer;
}

/* Deux classes et non une : form.css pose .field-checkbox en bloc aligné en haut et charge après cette feuille */
.util-label > .field-checkbox,
.util-deck-title > .field-checkbox {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	margin-block: calc((1lh - var(--touch-target)) / 2);
	cursor: pointer;
}

/* La cible déborde sur le résumé qui suit le titre : sans z-index, le résumé, plus loin dans le document, la recouvre et prend le clic */
.util-deck-title > .field-checkbox {
	position: relative;
	z-index: 1;
}

.util-label > .field-checkbox > input,
.util-deck-title > .field-checkbox > input {
	margin-top: 0;
}

.util-deck-arrow {
	flex: none;
	color: var(--color-brand-50);
	font-size: 1.2rem;
}

a.util-deck:hover .util-deck-arrow,
a.util-deck-row:hover .util-deck-arrow {
	color: var(--color-brand);
}

.util-deck-colors {
	display: flex;
	flex: none;
	gap: 0.375rem;
}

.util-deck-color {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--border);
	border-radius: 50%;
}

@media (max-width: 767px) {

	.util-deck-colors {
		display: none;
	}

}

.util-deck-lg > .util-deck-head {
	align-items: flex-start;
}

.util-deck-top > .util-deck-head {
	align-items: flex-start;
}

.util-deck-top > .util-deck-head > .util-deck-arrow,
.util-deck-top > .util-deck-head > .util-deck-aside {
	align-self: center;
}

.util-deck-lg > .util-deck-head > .util-icon {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.6rem;
}

.util-deck-lg > .util-deck-head .util-deck-title {
	font-size: 1.15rem;
}

.util-deck-lg > .util-deck-head p {
	font-size: 1.05rem;
}

/* Les chiffres de l'objet, sous le titre : chacun sous son intitulé, alignés d'un bloc à l'autre
   parce que ce sont eux qu'on compare. */
.util-deck-figures {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.5rem;
	margin-top: 0.5rem;
}

.util-deck-figure {
	display: flex;
	flex-direction: column;
}

.util-deck-key {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.util-deck-value {
	font-variant-numeric: tabular-nums;
	font-weight: 550;
}

/* Un étage en bande. Elles se suivent dans l'ordre du balisage : l'état qualifie l'objet, les
   portes disent où l'on entre, et elles ne se disputent donc pas la couleur. */
.util-deck-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.25rem;
	border-top: 1px solid var(--border-light);
	background-color: var(--background-light);
	font-size: 0.9rem;
}

.util-deck-band-state {
	border-top-color: color-mix(in srgb, var(--accent) 25%, var(--background-surface));
	background-color: color-mix(in srgb, var(--accent) 14%, var(--background-surface));
	color: color-mix(in srgb, var(--accent) 78%, black);
	font-weight: 550;
}

.util-deck-tabs {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border-top: 1px solid var(--border);
	background-color: var(--background-light);
	color: var(--text);
}

.util-deck-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--touch-target);
	padding: 0.9rem 0.25rem 0.8rem;
	border-left: 1px solid var(--border);
	color: inherit;
	text-align: center;
	line-height: 1.2;
	font-weight: 550;
}

.util-deck-tab:first-child {
	border-left: 0;
}

a.util-deck-tab {
	cursor: pointer;
}

a.util-deck-tab,
a.util-deck-tab:hover {
	color: inherit;
	text-decoration: none;
}

a.util-deck-tab:hover {
	background-color: color-mix(in srgb, white 50%, transparent);
}

a.util-deck-tab.is-selected {
	background-color: var(--background-surface);
	box-shadow: inset 0 3px 0 var(--secondary);
}

.util-deck-tab-name {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.util-deck-tab-name > .util-counter {
	margin-left: 0.4rem;
}

.util-deck-tab > small {
	display: block;
	min-height: 1lh;
	font-weight: normal;
	font-size: 0.8rem;
}

.util-deck-tabs ~ .util-deck-fold:not(.is-selected) {
	display: none;
}

.util-deck-tabs-folder ~ .util-deck-fold {
	border-top: 0;
}

.util-deck-tabs ~ .util-deck-fold > .util-deck-content {
	padding-top: 1.5rem;
}

/* Le pli ouvert n'est pas le dernier enfant du bloc quand d'autres plis masqués le suivent */
.util-deck > .util-deck-tabs ~ .util-deck-fold {
	border-radius: 0 0 var(--radius) var(--radius);
}

@media (max-width: 767px) {

	span.util-deck-tab:empty {
		display: none;
	}

}

@media (max-width: 575px) {

	.util-deck-tab {
		padding-inline: 0.125rem;
		font-size: 0.8rem;
	}

}

.util-deck-band-doors {
	gap: 0.4rem;
}

/* Des portes de largeur égale plutôt qu'à leur contenu, en une, deux ou trois pistes. Une rangée
   incomplète laisse ses pistes vides : un bouton seul sur trois pistes en occupe un tiers, ce qui
   est le but, car c'est la largeur qui range les portes d'un deck à l'autre, pas leur libellé.
   La bande d'une seule porte la pose sur la moitié : étirée sur toute la largeur, une porte seule
   devient une barre qui écrase le deck. Un libellé plus large que la moitié élargit sa piste
   plutôt que de passer à la ligne. */
.util-deck-band-doors-1,
.util-deck-band-doors-2,
.util-deck-band-doors-3 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.util-deck-band-doors-1 > :not(:only-child),
.util-deck-band-doors-full > * {
	grid-column: 1 / -1;
}

.util-deck-band-doors-3 {
	grid-template-columns: repeat(3, 1fr);
}

.util-deck-doors {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

@media (max-width: 575px) {

	.util-deck-head:has(> .util-deck-doors) {
		flex-wrap: wrap;
	}

	/* Une base nulle : à la largeur de son contenu, un résumé long passerait seul à la ligne, loin de sa pastille */
	.util-deck-head:has(> .util-deck-doors) > .util-deck-body {
		flex-basis: 0;
	}

	.util-deck-head:has(> .util-deck-doors) > .util-deck-aside {
		flex: 1 0 100%;
		max-width: none;
		text-align: left;
	}

	.util-deck-doors {
		flex: 1 0 100%;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

}

.util-deck-chevron {
	flex: none;
	color: var(--muted);
	transition: transform 0.25s;
	user-select: none;
}

.util-deck-open > .util-deck-head > .util-deck-chevron {
	transform: rotate(180deg);
}

a.util-deck-body {
	cursor: pointer;
}

a.util-deck-chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	margin-block: calc((1lh - var(--touch-target)) / 2);
	margin-inline: -0.5rem calc((1em - var(--touch-target)) / 2);
	cursor: pointer;
}

@media (max-width: 575px) {

	/* overflow: hidden de .field-switch rogne tout débordement : la cible grandit par une bordure transparente */
	.util-deck-aside > .field-switch {
		box-sizing: border-box;
		height: var(--touch-target);
		margin-block: calc((2rem + 2px - var(--touch-target)) / 2);
		border: 0 solid transparent;
		border-block-width: calc((var(--touch-target) - 2rem) / 2);
		border-radius: calc(var(--radius) * 2) / calc(var(--radius) * 2 + (var(--touch-target) - 2rem - 2px) / 2);
		background-clip: padding-box;
	}

	.util-deck-aside > .field-switch:hover {
		box-shadow: none;
	}

	/* ::after porte déjà le caret des dropdown-toggle */
	.util-deck-aside > .dropdown-toggle {
		position: relative;
	}

	.util-deck-aside > .dropdown-toggle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: var(--touch-target);
		transform: translateY(-50%);
	}

	.util-deck-aside > .btn-group > .btn {
		position: relative;
	}

	/* La cible grandit vers l'extérieur du groupe : le voisin, peint après, prendrait le toucher sur un débord intérieur */
	.util-deck-aside > .btn-group > .btn::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: max(100%, var(--touch-target));
		height: var(--touch-target);
		transform: translateY(-50%);
	}

	.util-deck-aside > .btn-group > .btn:first-child:not(:last-child)::before {
		left: auto;
		right: 0;
	}

}

.util-deck-fold {
	display: none;
	border-top: 1px solid var(--border-light);
	background-color: var(--background-surface);
}

.util-deck-open > .util-deck-fold {
	display: block;
}

/* Un bloc ouvert passe devant les suivants : son étage déplié est au niveau de leur tête, et ce
   qui en déborde — une liste d'autocomplétion, un menu — doit rester au-dessus d'eux. */
.util-deck-open {
	z-index: 2;
}

.util-deck-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1.25rem;
}

.util-deck-row-state {
	background-color: color-mix(in srgb, var(--accent) 14%, var(--background-surface));
}

.util-deck-row.util-deck-row-unread,
.util-deck-unread > .util-deck-head {
	background-color: color-mix(in srgb, var(--secondary-neutral) 45%, white);
}

a.util-deck-row.util-deck-row-unread:hover {
	background-color: color-mix(in srgb, var(--secondary-neutral) 65%, white);
}

.util-deck-row-unread > .util-deck-row-name {
	font-weight: bold;
}

.util-deck-row-read > .util-deck-row-name,
.util-deck-read > .util-deck-head .util-deck-title {
	font-weight: normal;
}

/* Le gras sans le fond, sur une ligne ou une tête déjà vue et pas encore ouverte. Posé après l'état
   lu, qu'il accompagne : les deux classes vivent ensemble sur le même nœud, à spécificité égale, et
   c'est l'ordre de la cascade qui tranche. */
.util-deck-row-pending > .util-deck-row-name,
.util-deck-pending > .util-deck-head .util-deck-title {
	font-weight: bold;
}

/* L'annotation, son lien et le résumé tombent à 4,49:1 sur ce fond, un centième sous la barre : ils
   y foncent pour tenir 4,5:1. Le lien est nommé, `.util-annotation a` le repeignant en gris. */
.util-deck-row-unread .util-annotation,
.util-deck-row-unread .util-annotation a,
.util-deck-unread > .util-deck-head .util-annotation,
.util-deck-unread > .util-deck-head p {
	color: color-mix(in srgb, var(--text) 78%, white);
}

.util-deck-row-name {
	flex: 1;
	min-width: 0;
	font-weight: 500;
	color: var(--text);
}

a.util-deck-row > .util-deck-row-name {
	min-width: auto;
}

.util-deck-row-name > p {
	font-weight: normal;
	margin: 0.125rem 0;
}

.util-deck-row-top {
	align-items: start;
}

.util-deck-row-top > :first-child {
	flex: none;
}

.util-thread-side {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 0.375rem;
	flex: none;
}

/* Le retrait vaut la vignette (1,75 rem) et l'écart de util-deck-row (0,75 rem). */
@media (max-width: 575px) {

	.util-thread .util-deck-row-top {
		flex-wrap: wrap;
	}

	.util-thread .util-deck-row-top > .util-deck-row-name {
		flex-basis: calc(100% - 2.5rem);
	}

	.util-thread-side {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-basis: 100%;
		padding-left: 2.5rem;
	}

}

.util-deck-row:has(> .util-deck-chevron),
.util-deck-row:has(> .util-checkbox) {
	min-height: var(--touch-target);
}

.util-deck-row > .util-checkbox {
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	margin-block: calc((1lh - var(--touch-target)) / 2);
	margin-inline: calc((1rem - var(--touch-target)) / 2) calc((1rem - var(--touch-target)) / 2 - 0.25rem);
	cursor: pointer;
}

a.util-deck-row-name:hover {
	color: var(--text);
}

a.util-deck-row,
a.util-deck-row:hover {
	color: var(--text);
	text-decoration: none;
}

a.util-deck-row:hover {
	background-color: var(--background-light);
}

.util-deck-fold > :last-child {
	border-radius: 0 0 var(--radius) var(--radius);
}

.util-deck-row .util-deck-arrow {
	font-size: 1rem;
}

.util-deck-content {
	padding: 1rem 1.25rem;
}

.util-deck-bleed {
	margin-inline: -1.25rem;
}

.util-deck-content > .util-deck-bleed:last-child {
	margin-bottom: -1rem;
}

.util-deck-bleed > table:not(.table-unstyled) {
	margin-bottom: 0;
	border-radius: 0;
}

.util-deck-bleed > table:not(.table-unstyled) tr > :first-child {
	padding-left: 1.25rem;
}

.util-deck-bleed > table:not(.table-unstyled) tr > :last-child {
	padding-right: 1.25rem;
}

/* Une table qui court d'un bord à l'autre de son étage ou de sa feuille n'a pas de coin à arrondir :
   les rangs du haut et du bas gardaient le rayon que `reboot.css` pose aux coins d'une table seule.
   Le `:is()` sur le rang pèse autant que la règle de `reboot.css`, qu'il bat par l'ordre. */
.util-deck-bleed > table:not(.table-unstyled) tbody tr:is(:first-child, :last-child) > td:is(:first-child, :last-child),
.util-sheet-body > table:not(.table-unstyled) tbody tr:is(:first-child, :last-child) > td:is(:first-child, :last-child) {
	border-radius: 0;
}

/* Sauf en bas quand elle ferme le bloc : l'étage qui la porte en prend les coins, mais le fond de ses
   cases, pair comme impair, et celui du tableau se peignent par-dessus et les rendaient carrés. Les trois étages qui ferment
   un bloc sont ceux de `.util-deck > :last-child`, du pli ouvert et du pli sous onglets. Le rayon
   posé aussi sur `util-deck-bleed` rogne le tableau quand un `util-overflow-*` le fait défiler, et la
   dernière case visible n'est alors plus celle du coin. */
:is(.util-deck > .util-deck-content:last-child, .util-deck-open > .util-deck-fold:last-child > .util-deck-content:last-child, .util-deck > .util-deck-tabs ~ .util-deck-fold > .util-deck-content:last-child) > .util-deck-bleed:last-child,
:is(.util-deck > .util-deck-content:last-child, .util-deck-open > .util-deck-fold:last-child > .util-deck-content:last-child, .util-deck > .util-deck-tabs ~ .util-deck-fold > .util-deck-content:last-child) > .util-deck-bleed:last-child > table:not(.table-unstyled) {
	border-radius: 0 0 var(--radius) var(--radius);
}

:is(.util-deck > .util-deck-content:last-child, .util-deck-open > .util-deck-fold:last-child > .util-deck-content:last-child, .util-deck > .util-deck-tabs ~ .util-deck-fold > .util-deck-content:last-child) > .util-deck-bleed:last-child > table:not(.table-unstyled) > :last-child > tr:last-child > :first-child {
	border-bottom-left-radius: var(--radius);
}

:is(.util-deck > .util-deck-content:last-child, .util-deck-open > .util-deck-fold:last-child > .util-deck-content:last-child, .util-deck > .util-deck-tabs ~ .util-deck-fold > .util-deck-content:last-child) > .util-deck-bleed:last-child > table:not(.table-unstyled) > :last-child > tr:last-child > :last-child {
	border-bottom-right-radius: var(--radius);
}

/* Le châssis d'une table dans une feuille : elle en prend la largeur, sans marge ni ombre, et ses
   bords s'alignent sur ceux de la tête et du pied. Une quantité réglable y garde la cible du doigt. */
.util-sheet-body > table:not(.table-unstyled) {
	margin-bottom: 0;
	border-radius: 0;
	box-shadow: none;
}

.util-sheet-body > table:not(.table-unstyled) tr > :first-child {
	padding-left: 0.875rem;
}

.util-sheet-body > table:not(.table-unstyled) tr > :last-child {
	padding-right: 0.875rem;
}

.util-sheet-body .util-quick {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
}

.util-deck-slot {
	display: flex;
	flex-direction: column;
}

.util-deck-slot > .util-deck-head {
	align-items: flex-start;
	min-height: var(--touch-target);
	padding: 0.6rem 1.25rem;
}

.util-deck-slot > .util-deck-head > .util-deck-aside {
	align-self: center;
}

.util-deck:not(.util-deck-open) > .util-deck-tabs,
.util-deck-slot:not(.util-deck-open) > .util-deck-tabs {
	display: none;
}

.util-deck-fold > * + * {
	border-top: 1px solid var(--border);
}

/* Les feuilles du dessous : une paire d'ombres par couche, un fond blanc et son filet, décalée vers
   le bas et rétrécie par un spread négatif. Elles dépassent du bloc sans y prendre de place, la
   marge la leur réserve. */
.util-deck-1,
.util-deck-2,
.util-deck-3 {
	margin-bottom: var(--stack-step);
}

.util-deck-2 {
	margin-bottom: calc(2 * var(--stack-step));
}

.util-deck-3 {
	margin-bottom: calc(3 * var(--stack-step));
}

/* ⚠️ -1px et non 0 : un enfant positionné se place dans la boîte de remplissage, donc à l'intérieur
   de la bordure que porte util-deck. À 0, les ombres couvrent le filet du bas et les coins arrondis
   du bloc. Positionné, le pseudo-élément se peint aussi par-dessus les étages et prendrait le clic
   de la tête sans pointer-events: none. */
.util-deck-1::after,
.util-deck-2::after,
.util-deck-3::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--radius);
	pointer-events: none;
	box-shadow:
		0 calc(var(--stack-inset) + var(--stack-step)) 0 calc(-1 * var(--stack-inset)) white,
		0 calc(var(--stack-inset) + var(--stack-step)) 0 calc(1px - var(--stack-inset)) var(--border);
}

.util-deck-2::after {
	box-shadow:
		0 calc(var(--stack-inset) + var(--stack-step)) 0 calc(-1 * var(--stack-inset)) white,
		0 calc(var(--stack-inset) + var(--stack-step)) 0 calc(1px - var(--stack-inset)) var(--border),
		0 calc(var(--stack-inset) + 2 * var(--stack-step)) 0 calc(-1 * var(--stack-inset)) white,
		0 calc(var(--stack-inset) + 2 * var(--stack-step)) 0 calc(1px - var(--stack-inset)) var(--border);
}

.util-deck-3::after {
	box-shadow:
		0 calc(var(--stack-inset) + var(--stack-step)) 0 calc(-1 * var(--stack-inset)) white,
		0 calc(var(--stack-inset) + var(--stack-step)) 0 calc(1px - var(--stack-inset)) var(--border),
		0 calc(var(--stack-inset) + 2 * var(--stack-step)) 0 calc(-1 * var(--stack-inset)) white,
		0 calc(var(--stack-inset) + 2 * var(--stack-step)) 0 calc(1px - var(--stack-inset)) var(--border),
		0 calc(var(--stack-inset) + 3 * var(--stack-step)) 0 calc(-1 * var(--stack-inset)) white,
		0 calc(var(--stack-inset) + 3 * var(--stack-step)) 0 calc(1px - var(--stack-inset)) var(--border);
}

.util-deck-open::after {
	box-shadow: none;
}

/* Barre de progression segmentée : une piste, et autant de parts que d'états à représenter.

   .util-progress > .util-progress-part, chaque part portant sa largeur en style inline et sa
   couleur par une classe bg-*. Les parts se suivent dans l'ordre du balisage, donc les ranger du
   plus rassurant au plus urgent : ce qu'on lit en premier est ce qui est déjà fait.

   Elle sert à donner l'ampleur d'un reste à faire, pas un pourcentage : le décompte chiffré
   l'accompagne toujours, la barre seule ne se lit pas. */
.util-progress {
	display: flex;
	height: 0.5rem;
	border-radius: 1rem;
	background-color: var(--background-even);
	overflow: hidden;
}

.util-progress-part {
	height: 100%;
}

/* Anneau de répartition. Le dégradé conique vient de PHP, qui seul peut additionner les
   segments : \main\DesignUi::getRing(). Le trou central en fait un anneau et non un
   camembert, ce qui laisse la place à un total au milieu. */
.util-ring {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	flex: 0 0 auto;
}

.util-ring::after {
	content: '';
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	background-color: var(--background-body);
}

/* Étoiles à la couleur du texte : une mauvaise note n'est pas une alerte, l'orange et le rouge
   restent aux alertes. */
.util-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
	color: inherit;
}

a.util-rating:hover {
	text-decoration: none;
}

.util-rating-stars {
	display: inline-flex;
	gap: 0.05rem;
	color: var(--text);
	line-height: 1;
}

.util-rating-off {
	color: var(--border);
}

.util-rating-value {
	font-weight: bold;
}

.util-rating-lg .util-rating-stars {
	font-size: 1.25rem;
}

.util-rating-lg .util-rating-value {
	font-size: 2.5rem;
	line-height: 1;
	font-family: var(--font-title);
}

/* Les radios sont écrites de 5 à 1 et affichées de 1 à 5 : `~` n'allume que ce qui suit, donc les
   étoiles d'une note sont les labels qui suivent son radio (\main\DesignUi::getRatingField()). */
.util-rating-input {
	display: inline-flex;
	flex-direction: row-reverse;
	font-size: 2rem;
	line-height: 1;
}

.util-rating-input input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.util-rating-input label {
	padding: 0.25rem 0.1875rem;
	margin: 0;
	color: var(--border);
	cursor: pointer;
}

.util-rating-input input:checked ~ label {
	color: var(--text);
}

/* Le survol prend le pas sur la note cochée, sans quoi une note plus basse ne se prévisualise pas. */
.util-rating-input:hover label {
	color: var(--border);
}

.util-rating-input label:hover,
.util-rating-input label:hover ~ label {
	color: var(--text);
}

.util-rating-input input:focus-visible + label {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

@media (max-width: 767px) {

	.util-rating-input label {
		padding: 0.5rem 0.25rem;
	}

}

.util-soil-menu {
	min-width: 20rem;
}

.util-soil-mode {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.util-soil-label {
	flex: 1;
}

.util-soil-preview {
	flex: none;
	display: inline-flex;
	gap: 0.1875rem;
}

.util-soil-preview i {
	display: block;
	width: 1.125rem;
	height: 0.75rem;
	border-radius: 3px;
	border: 2px solid rgba(255, 255, 255, 0.55);
}

.util-soil-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.util-soil-switch .field-switch-text {
	display: none;
}

.util-soil-switch .field-switch {
	flex-shrink: 0;
}

.tab-item-stat {
	justify-content: space-between;
	gap: 1.5rem;
}

.tab-item-stat-label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.tab-item-stat-label small {
	font-size: 0.7rem;
	font-weight: normal;
	color: var(--muted);
	font-family: "Open Sans", sans-serif;
}

.tab-item-stat-value {
	font-family: "Open Sans", sans-serif;
	font-size: 0.95rem;
	color: var(--text);
	white-space: nowrap;
}

.tab-item-stat-disabled {
	opacity: 0.45;
	cursor: default;
}

.tab-item-stat-disabled:after {
	display: none;
}

.tabs-item-group {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0.75rem 1rem 0.25rem;
	white-space: nowrap;
}

@media (max-width: 991px) {

	.tabs-item-group {
		display: none;
	}

}

/* Des onglets à l'intérieur d'un formulaire : deux chemins entre lesquels on choisit, et non la
   navigation d'un écran. `tabs-exclusive` sur le .tabs dit à Lime.Tab de désactiver le fieldset des
   panneaux non choisis, pour que seul le chemin retenu soit posté. */
.tabs-item.tabs-form {
	margin-bottom: 1rem;
}

/* Le navigateur donne 2px de marge latérale à un fieldset, que form.css ne retire pas, et form.css
   lui pose un retrait vertical : le fieldset n'est ici qu'un interrupteur, il ne doit pas décaler
   ses champs de ceux qui l'entourent. */
.tabs-exclusive .tab-panel > fieldset {
	margin-inline: 0;
	padding-block: 0;
}


.tabs-item.tabs-sm {
	display: flex;
	margin: 0 0 0 auto;
	font-weight: normal;
}

.tabs-sm .tab-item {
	font-size: 0.95rem;
	padding: 0.5rem 0.75rem calc(0.5rem + 4px);
}

div.tabs-item.tabs-sub {
	gap: 0.25rem;
}

.tabs-sub .tab-item {
	min-height: var(--touch-target);
	padding: 0 0.75rem;
	border-radius: var(--radius);
	font-size: 0.9375rem;
}

.tabs-sub .tab-item:after {
	display: none;
}

/* `--secondary` est redéfini à la couleur de marque par le gabarit de base : le texte serait vert sur
   un fond indigo. */
.tabs-sub .tab-item.selected {
	color: color-mix(in srgb, var(--secondary-light) 70%, black);
	background-color: color-mix(in srgb, var(--secondary-light) 14%, transparent);
}

.util-heat {
	background-color: color-mix(in srgb, var(--production-light) calc(var(--heat, 0) * 100%), transparent);
}

.util-heat-strong {
	color: white;
}

@media screen {

	.util-heat-table {
		box-shadow: var(--shadow-v2);
		background-color: white;
		border-radius: var(--radius);
	}

	.util-heat-table thead {
		border-bottom: 2px solid var(--secondary-neutral);
	}

}

.util-heat-table tr > *:first-child {
	padding-left: 1rem;
}

.util-heat-table tr > *:last-child {
	padding-right: 1rem;
}

/* Posée par JS sur chaque cellule de la colonne survolée. En image et non en couleur de fond : elle
   se superpose ainsi au fond que la cellule porte déjà (--heat d'util-heat, alternance tr-even), au
   lieu d'avoir à le battre en spécificité. */
.util-column-hover {
	background-image: linear-gradient(var(--background-column-hover), var(--background-column-hover));
}

.util-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-size: 0.8125rem;
	color: var(--muted);
}

.util-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}

/* ⚠️ Déclarée avant util-timeline-event : à spécificité égale, une marque qui cumule
   util-timeline-event-period doit garder la hauteur et l'arrondi du ruban, donc perdre ici. */
.util-legend-mark {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	border-radius: 2px;
}

.util-bars,
.util-bars-axis {
	display: grid;
	grid-template-columns: repeat(var(--bars, 12), minmax(0, 1fr));
	gap: 2px;
}

/* Un espace de grille ne se peint pas : le trait entre deux barres est un fond qui se répète au pas
   d'une colonne et de son espace, soit (100 % + 2px) / --bars, et tombe au milieu de l'espace. */
.util-bars {
	align-items: end;
	height: 2rem;
	border-bottom: 1px solid var(--border);
	background-image: linear-gradient(to right, transparent calc(100% - 1.5px), var(--border) 0, var(--border) calc(100% - 0.5px), transparent 0);
	background-size: calc((100% + 2px) / var(--bars, 12)) 100%;
	background-repeat: repeat-x;
}

/* Une seule boîte par barre, peinte en deux teintes par un dégradé à arrêt franc : la part --short
   se lit en haut sans second élément à empiler.
   ⚠️ Le dégradé part du haut. Parti du bas, l'arrêt tombait à 100 % sans --short et l'anticrénelage
   laissait un filet orange en tête de barres qui n'ont rien en manque. */
.util-bars > * {
	height: calc(var(--bar, 0) * 100%);
	border-radius: 2px 2px 0 0;
	background: linear-gradient(to bottom, var(--warning) calc(var(--short, 0) * 100%), currentColor 0);
}

/* La part --short ne signale plus un manque mais une seconde nature de la même quantité : elle garde
   la teinte de la barre, éclaircie, au lieu de l'orange d'alerte. */
.util-bars-light > * {
	background: linear-gradient(to bottom, color-mix(in srgb, currentColor 30%, transparent) calc(var(--short, 0) * 100%), currentColor 0);
}

.util-bars-max {
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	font-size: 0.625rem;
	line-height: 1.2;
	color: var(--muted);
	white-space: nowrap;
}

.util-bars-max::after {
	content: '';
	flex: 1;
	border-bottom: 1px dashed var(--border);
}

.util-bars-axis {
	margin-top: 2px;
	font-size: 0.625rem;
	line-height: 1.2;
	color: var(--muted);
	text-align: center;
}

.util-tip {
	position: fixed;
	z-index: 1300;
	display: none;
	max-width: 21rem;
	min-width: 17rem;
	padding: 0.75rem 0.875rem;
	border-radius: var(--radius);
	background-color: var(--primary);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	color: var(--primary-ink);
	font-size: 0.8125rem;
	line-height: 1.35;
	pointer-events: none;
}

.util-tip-open {
	display: block;
}

.util-tip:after {
	position: absolute;
	left: var(--tip-arrow, 1.5rem);
	width: 0.625rem;
	height: 0.625rem;
	background-color: var(--primary);
	content: '';
	transform: rotate(45deg);
}

.util-tip-below:after {
	top: -0.375rem;
	transform: rotate(225deg);
}

.util-tip-above:after {
	bottom: -0.375rem;
}

.util-follow {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.util-follow > svg {
	flex: 0 0 auto;
	color: var(--primary);
}

.util-not-auto {
	background-color: color-mix(in srgb, var(--accounting) 10%, white);
	color: var(--accounting);
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	border: 1px solid color-mix(in srgb, var(--accounting) 50%, white);
}

.util-comment {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.5rem;
	grid-row-gap: 0.25rem;
	align-items: baseline;
}

.util-comment.util-comment-editable {
	grid-template-columns: auto 1fr auto;
	grid-row-gap: 0.5rem;
}

.util-comment.util-comment-editable > :nth-child(3n) {
	text-align: right;
}

/* L'opacité et non `visibility` : une cellule en `visibility: hidden` ne reçoit plus le survol, que
   commentHoverAi.js lit pour la révéler. */
body[data-touch="no"] .util-comment.util-comment-hover > :nth-child(3n):not(.is-hovered):not(:focus-within) {
	opacity: 0;
}

/* La bande du message survolé se peint sous la grille et non sur ses cellules : alignées sur leur
   ligne de base, elles n'ont pas la même hauteur et leurs fonds feraient un escalier. Le z-index
   de la grille ouvre le contexte d'empilement qui garde la bande au-dessus du fond de la ligne de
   tableau et sous le texte. */
.util-comment.util-comment-hover {
	position: relative;
	z-index: 0;
}

body[data-touch="no"] .util-comment.util-comment-hover.is-hovering::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: calc(var(--comment-hover-top) - 0.25rem);
	left: -0.375rem;
	right: -0.375rem;
	height: calc(var(--comment-hover-height) + 0.5rem);
	border-radius: var(--radius);
	background-color: var(--background-column-hover);
}

/* Le `line-clamp` sans préfixe n'a d'effet dans aucun moteur hors d'une boîte `-webkit-box`. */
.util-text-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.util-text-clamp-2 {
	-webkit-line-clamp: 2;
}

.util-drag-handle {
	color: var(--muted);
	cursor: grab;
	touch-action: none;
	font-size: 1.5rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
}

.util-drag-handle:active {
	cursor: grabbing;
}

.util-drag-chosen {
	outline: 1px solid var(--primary);
	outline-offset: -1px;
}

.util-drag-ghost {
	background-color: var(--background-light);
	outline: 2px dashed var(--muted-light);
	outline-offset: -2px;
}

.util-drag-ghost > * {
	opacity: 0.2;
}

.sortable-fallback {
	background-color: white;
	border-radius: var(--radius);
	box-shadow: var(--shadow-v2-selected);
	overflow: hidden;
	outline: none;
}

.sortable-fallback tr > *:first-child {
	padding-left: 1rem;
}

.sortable-fallback tr > *:last-child {
	padding-right: 1rem;
}

@media (min-width: 1600px) {

	.sortable-fallback tr > *:first-child {
		padding-left: 1.5rem;
	}

	.sortable-fallback tr > *:last-child {
		padding-right: 1.5rem;
	}

}

/* Une graduation de semaines qui s'éclaircit avec la place.

   Seule la densité est ici : le placement appartient à l'écran. Ce qui se partage, c'est quel
   numéro survit à quelle largeur.

   Trois repères survivent toujours : les multiples de dix en gras, les multiples de cinq, la
   première et la dernière graduation. Le reste s'efface en visibility et non en display, pour que
   la place reste réservée et que les numéros gardés ne se redistribuent pas. */

.util-graduation-mark-decade {
	font-weight: bold;
}

/* Sous un rail (util-rail), l'écran n'écrit que les numéros à lire : la graduation ne s'éclaircit
   pas, sans quoi un repère nommé disparaîtrait avec la place. */
@media (max-width: 1199px) {

	.util-graduation:not(.util-rail > .util-graduation) > .util-graduation-mark:not(.util-graduation-mark-five):not(.util-graduation-mark-decade):not(.util-graduation-mark-bound) {
		visibility: hidden;
	}

}

.util-graduation-mark-key {
	font-weight: bold;
	color: var(--text);
}

/* L'écran qui sait d'avance que ses graduations sont étroites n'attend pas le seuil : mesuré, les
   mêmes quatre-vingt-sept semaines font 12 px sur le plan de culture, qui prend la page entière, et
   7,8 px sur la comparaison d'un groupe, dont le rail des membres mange 430 px. La barre de saison
   ne peut pas le deviner, elle ignore ce qui l'entoure : c'est l'appelant qui le lui dit. */
.util-graduation-sparse > .util-graduation-mark:not(.util-graduation-mark-five):not(.util-graduation-mark-decade):not(.util-graduation-mark-bound) {
	visibility: hidden;
}

/* Un rail gradué : une étendue sur un axe, une ou plusieurs plages, un repère, et la util-graduation
   dessous, une case par pas de l'axe.

   Comme util-graduation et util-timeline-event, le rail porte la forme et l'écran le reste : le
   placement des plages et du repère en pourcentage de l'axe, et leur couleur, que les plages lisent
   en currentColor. La graduation se range en colonnes égales pour que le centre de la n-ième case
   tombe sur le n-ième pas, là où l'écran a calculé ses pourcentages. */
.util-rail-track {
	position: relative;
	height: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background-color: var(--background-surface);
	overflow: hidden;
}

.util-rail-range {
	position: absolute;
	top: 0.1875rem;
	bottom: 0.1875rem;
	border-radius: var(--radius-lg);
	background-color: currentColor;
}

/* La plage d'appoint (une tolérance, une fenêtre) court sur toute la hauteur, derrière la plage :
   elle se lit comme un fond de l'axe et non comme une seconde mesure. */
.util-rail-range-light {
	top: 0;
	bottom: 0;
	border-radius: 0;
	background-color: color-mix(in srgb, currentColor 35%, transparent);
}

.util-rail-marker {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
	background-color: var(--text);
}

.util-rail > .util-graduation {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--muted);
	text-align: center;
	white-space: nowrap;
}

/* Une pastille de frise : un geste daté posé sur un axe de temps, et son ruban quand le geste dure.

   Le placement appartient à l'écran, comme pour util-graduation : les deux écrans qui l'emploient
   posent leurs pastilles en pourcentage d'un axe de jours, chacun sur sa fenêtre. Ce qui se partage
   est la forme — la pastille ronde, ses deux états, l'arrondi asymétrique du ruban qui dit qu'une
   période commence franc et se termine arrondie.

   ⚠️ La typographie est déclarée en entier, `font-style` compris, parce que la balise est laissée
   à l'appelant : la même marque était droite en `<div>` dans une frise et italique en `<i>` dans
   une légende, pour la seule raison que le navigateur incline `<i>`.

   ⚠️ La couleur vient de l'écran et non d'ici : sur le plan de culture c'est celle de
   l'intervention, que chaque ferme peut renommer et recolorer ; sur une comparaison entre fermes
   il faut au contraire une couleur par nature de geste, sans quoi le même semis changerait de
   teinte d'une ligne à l'autre. `currentColor` laisse ce choix à l'appelant. */

.util-timeline-event {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: bold;
	font-style: normal;
	font-size: 0.7rem;
	border-radius: 1rem;
	height: 1.45rem;
	min-width: 1.45rem;
}

.util-timeline-event-expected {
	background-color: white;
	border: 1px solid currentColor;
}

/* Une période, et non un instant : plus basse que la pastille, et arrondie franc à gauche pour que
   son début se lise comme un bord et non comme un point. */
.util-timeline-event-period {
	height: 0.75rem;
	min-width: 0;
	border-radius: 0.75rem 1rem 1rem 0.75rem;
}

/* Le ruban de fond, sur toute la durée de l'objet : c'est lui qui fait la ligne. Sans lui une frise
   n'est qu'une suite de pastilles séparées par du vide, et l'oeil ne suit plus rien. */
.util-timeline-event-frame {
	height: 1.65rem;
	background-color: white;
	border: 1px solid var(--border);
}

/* Les bandes alternées d'une frise : le même service que `tr-even` sur un tableau, une ligne sur
   deux tenue par l'oeil sur toute sa largeur.

   ⚠️ Les **deux** rangs sont peints, avec la paire de jetons prévue pour ça. N'en peindre qu'un
   fait dépendre l'alternance du fond de la page : mesuré, `--background-light` posé sur une seule
   ligne sur deux ne se voyait pas du tout, notre fond de page valant exactement cette teinte. Une
   rayure ne se définit pas par ce qu'elle recouvre. */
.util-timeline-striped > *:nth-child(odd) {
	background-color: var(--background-odd);
}

.util-timeline-striped > *:nth-child(even) {
	background-color: var(--background-even);
}

/* En légende, la forme n'a pas de colonne où s'étirer : elle porte sa propre largeur, sinon un
   ruban de période s'y rend à zéro pixel et l'entrée se lit comme du texte nu. */
.util-legend-mark.util-timeline-event-period {
	width: 1.5rem;
}

.util-quick-inline:not(.util-quick-inline-open) > .util-quick-inline-field,
.util-quick-inline.util-quick-inline-open > :not(.util-quick-inline-field) {
	display: none;
}

.util-quick-inline-field {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

/* form.css laisse l'input-group se replier et son champ se réduire à zéro : dans une cellule étroite, l'unité passe dessous ou la valeur tapée disparaît */
.util-quick-inline-field div.input-group {
	flex-wrap: nowrap;
}

.util-quick-inline-field div.input-group > .form-control {
	min-width: 6rem;
}

/* form.css masque input[type="file"] derrière un bouton stylé : dans la boîte, le champ est lui-même ce qu'on clique */
.util-quick-inline-field input[type="file"] {
	display: inline-block;
}

.util-domain {
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	color: var(--domain);
}

.util-domain-inline {
	min-width: 8.5rem;
	margin-bottom: 0;
	flex: none;
	font-size: 0.8125rem;
}

@media (max-width: 575px) {

	.util-domain-inline {
		min-width: 0;
	}

}

.util-domain-production {
	--domain: var(--production);
}

.util-domain-commercialisation {
	--domain: var(--commercialisation);
}

.util-domain-accounting {
	--domain: var(--accounting);
}

.util-domain-settings {
	--domain: var(--settings);
}

/* --amap est à 2,38 de contraste de --danger : une pastille AMAP près d'un impayé se lirait impayé. */
.util-domain-amap {
	--domain: var(--dark);
}

/* Aucun jeton d'univers ne tient sur un fond sombre (1,11 à 1,45 mesurés, plancher 3). */
.util-block-dark .util-domain {
	--domain: white;
}

/* ===== ouvretaferme/main/static/css/pdf.css ===== */
body.template-pdf {
	background-color: white;
	line-height: 1.4;
}

html {
	font-size: 12px !important;
}

body.template-pdf h1,
body.template-pdf h2,
body.template-pdf h3 {
	font-family: 'Bricolage Grotesque', sans-serif;
}

/* La marque s'écrit de la même façon en tête et en pied : c'est le pied qui donne le
   ton, en capitale initiale et sans interlettrage. L'en-tête la posait en capitales
   espacées, ce qui se lit comme une autre police sur la même page. */
.pdf-brand,
.pdf-footer-brand {
	display: flex;
	align-items: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-brand);
}

.pdf-brand {
	gap: 2.5mm;
}

.pdf-brand svg {
	width: 6mm;
	height: 6mm;
	flex: none;
}

.pdf-structure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2mm;
	text-align: center;
	margin: 5mm 0 8mm;
}

.pdf-structure-logo {
	width: 17mm;
	height: 17mm;
	object-fit: contain;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.pdf-structure-name {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pdf-structure-heading {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.85rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin-top: 2.5mm;
}

.pdf-structure-meta {
	font-size: 0.8rem;
	color: var(--color-neutral);
}

.pdf-title-block {
	margin: 14mm 0 8mm;
}

.pdf-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 2.85rem;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 140mm;
}

.pdf-lede {
	margin: 4mm 0 0 0;
	max-width: 125mm;
	font-size: 1rem;
	color: var(--text);
}

.pdf-structure + .pdf-lede {
	margin-bottom: 8mm;
}

.pdf-figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6mm;
	padding: 5mm 0;
	margin-bottom: 7mm;
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #d8d8d8;
}

.pdf-figure-value {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pdf-figure-label {
	margin-top: 1.5mm;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-neutral);
}

.pdf-footer {
	display: grid;
	gap: 8mm;
	margin-top: 6mm;
	padding-top: 2.5mm;
	border-top: 2px solid #1a1a1a;
	font-size: 0.68rem;
	line-height: 1.5;
	color: var(--color-neutral);
	break-inside: avoid;
}

.pdf-footer-1 {
	grid-template-columns: 1fr;
}

.pdf-footer-2 {
	grid-template-columns: 1fr auto;
}

.pdf-footer-3 {
	grid-template-columns: 1.5fr 1fr auto;
}

.pdf-footer-brand {
	gap: 2mm;
	margin-bottom: 1mm;
}

.pdf-footer-brand svg {
	width: 4.5mm;
	height: 4.5mm;
	flex: none;
}

.pdf-footer-page {
	text-align: right;
	font-variant-numeric: tabular-nums;
}


table.pdf-table-bordered tr:first-child {
	border: 0;
}
table.pdf-table-bordered {
	break-inside: auto;
	border-collapse: collapse;
	margin: 0 auto 1cm;
	box-shadow: none;
}

body:not(.landscape) table.pdf-table-bordered {
	max-width: 18.5cm;
}
body.landscape table.pdf-table-bordered {
	max-width: 26.5cm;
}
table.pdf-table-bordered tbody td,
table.pdf-table-bordered th {
	padding: 0.1cm 0.2cm;
}

table.pdf-table-bordered th {
	font-weight: normal;
	vertical-align: bottom;
}

table.pdf-table-bordered tbody tr td {
	border-bottom: 1px solid #f0f0f0;
}

table.pdf-table-bordered tbody tr:last-child td {
	border-bottom: 1px solid #1a1a1a;
}

table.pdf-table-bordered thead tr th {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral);
	border-bottom: 1px solid #1a1a1a;
}

tr.pdf-tr-title th,
tr.pdf-tr-title td {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
	padding-top: 0.35cm;
}

.pdf-facing-side {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: 2mm;
}

body.template-pdf table.pdf-facing-table {
	table-layout: fixed;
}

body.template-pdf table.pdf-facing-table td,
body.template-pdf table.pdf-facing-table th {
	overflow-wrap: break-word;
}

/* Deux colonnes de postes dans la largeur d'une : les libellés reviennent souvent à
   la ligne, et l'interligne des cellules décidait à lui seul si le bilan tenait sur
   une page ou en débordait d'un pied. */
body.template-pdf table.pdf-facing-table tbody td {
	font-size: 0.85rem;
	padding-top: 0.05cm;
	padding-bottom: 0.05cm;
}

/* Jusqu'à huit colonnes de montants sur la largeur d'une page : un montant qui revient à la ligne
   laisse son symbole seul sous le chiffre. */
body.template-pdf table.pdf-facing-table tbody td.text-end {
	white-space: nowrap;
	padding-left: 0.1cm;
	padding-right: 0.1cm;
}

/* Un tableau qui porte sept colonnes de montants : le libellé n'a plus qu'un tiers de
   la largeur et revient à la ligne une fois sur deux. L'interligne se resserre d'autant,
   sans quoi le registre des amortissements gagne une page qui ne porte que son pied. */
body.template-pdf table.pdf-table-compact tbody td {
	padding-top: 0.05cm;
	padding-bottom: 0.05cm;
}

body.template-pdf table.pdf-facing-table .pdf-facing-split {
	border-left: 1px solid #d9d9d9;
	padding-left: 5mm;
}

body.template-pdf table.pdf-facing-table tr.pdf-facing-heading > th {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
	border-bottom: 0;
	padding-bottom: 2mm;
}

.pdf-equality {
	margin-top: 4mm;
	text-align: center;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
}

body.template-pdf tr.pdf-tr-ml-1 > td:first-child {
	padding-left: 0.5cm;
}

.pdf-note {
	margin-top: 3mm;
	text-align: center;
	font-size: 0.7rem;
	color: var(--color-neutral);
}

body.template-pdf table.pdf-sheet {
	table-layout: fixed;
	width: 100%;
	margin-top: 0.5cm;
}

body.template-pdf table.pdf-sheet .pdf-sheet-sign {
	width: 2.6cm;
}

body.template-pdf table.pdf-sheet th.pdf-sheet-sign,
body.template-pdf table.pdf-sheet td.pdf-sheet-sign {
	text-align: center;
	border-left: 1px solid var(--border);
}

body.template-pdf table.pdf-sheet tbody td {
	height: 1.15cm;
	vertical-align: middle;
	border-bottom: 1px solid var(--border);
}

body.template-pdf table.pdf-sheet tr.pdf-sheet-group > td {
	height: auto;
	padding-top: 7mm;
	padding-bottom: 1.5mm;
	background-color: white;
	border-bottom: 1px solid #1a1a1a;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
}

body.template-pdf table.pdf-sheet thead + tbody tr.pdf-sheet-group > td {
	padding-top: 3mm;
}

/* Sans quoi le pied qui ne tient plus sous la table part seul sur une page blanche : il emmène
   avec lui le dernier groupe de lignes, que l'impression garde d'un seul tenant. */
body.template-pdf table.pdf-sheet + .pdf-footer {
	break-before: avoid;
}

body.template-pdf td.balance-td-net,
body.template-pdf td.balance-td-amortization,
body.template-pdf td.balance-td-brut,
body.template-pdf table.balance-table {
	border-left: 0;
	border-right: 0;
}

body.template-pdf tr.sig-title > td {
	background-color: #f6f8f8;
	font-weight: 600;
	border-top: 1px solid #d8d8d8;
}

body.template-pdf tr.sig-content > td {
	color: #4a4a4a;
}

body.template-pdf td.sig-category-name {
	padding-left: 0.6cm;
}

body.template-pdf tr.sig-title > td.sig-category-name {
	padding-left: 0.2cm;
	color: #1a1a1a;
}

body.template-pdf tr.overview_group-total {
	text-transform: none;
}

@media print {

	.pdf-structure,
	.pdf-figures,
	.pdf-title-block,
	.pdf-footer {
		break-inside: avoid;
	}

	.pdf-structure,
	tr.tr-title,
	tr.pdf-sheet-group {
		break-after: avoid;
	}

}