/* ===== 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/juicinessAi.css ===== */
/*
 * Le mouvement du socle : ses durées et ses courbes, les transitions du panneau et du fond de menu
 * que le cadriciel portait dans lime.css, et ce que devient chaque mouvement quand le système demande
 * moins d'animations.
 *
 * Chargée partout par Root.php, juste après component.css. Un mouvement prend l'un de ces tokens,
 * jamais une valeur écrite en clair ; la table qui dit quel geste prend quelle durée est sur la page
 * du design system, section « Mouvement » (#design-motion).
 */

:root {
	--duration-xs: 0.15s;
	--duration-sm: 0.2s;
	--duration-md: 0.25s;
	--duration-lg: 0.5s;
	--duration-xl: 0.7s;
	/* Hors de l'échelle : un tour de boucle et le pas d'une cascade, qui ne sont pas la durée d'un geste. */
	--duration-loop: 1s;
	--duration-step: 0.1s;
	--ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
	--ease-in-out: ease-in-out;
	--ease-spring: cubic-bezier(0.2, 0.8, 0.3, 1.15);
	--ease-linear: linear;
}

/*
 * Les transitions du panneau et du fond de menu, sorties de lime.css sans changer le geste : même
 * sélecteur, donc même spécificité, et même valeur. La courbe reste celle par défaut (ease), que
 * lime.css employait sans l'écrire. Les états d'arrivée (.closing, .fullscreen-closing) restent dans
 * lime.css : lime.js retire le panneau à 500 ms et la liste plein écran à 250 ms en comptant sur eux,
 * et Pdf.php charge lime.css sans cette feuille.
 */
body[data-touch="no"] .panel {
	transition: opacity var(--duration-md);
}

/* 0.33s ne tombe sur aucun palier : la valeur reste écrite telle quelle, le geste du panneau en tactile
   n'ayant pas changé (L3, Q1 C). L'arrondir changerait ce que l'on sent sous le doigt. */
body[data-touch="yes"] .panel {
	transition: left 0.33s;
}

.dropdown-backdrop {
	transition: opacity var(--duration-md);
}

/*
 * Le voile posé sur le nœud que le PHP nomme après une écriture (juicinessAi.js, MainJuiciness.flash()).
 * La teinte est la teinte pâle de la section (--info), en multiply : opaque, --info masquerait le texte du
 * nœud. Le nœud devient le bloc contenant du voile ; la classe se retire à animationend.
 * Sous mouvement réduit, le voile garde son fondu : ce n'est qu'une opacité.
 */
.util-flash {
	position: relative;
}

.util-flash::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-color: var(--info);
	mix-blend-mode: multiply;
	opacity: 0;
	animation: util-flash var(--duration-lg) var(--ease-out);
}

@keyframes util-flash {
	0%, 40% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*
 * La copie du nœud qu'une réponse retire (`remove(vanish: TRUE)`, MainJuiciness.vanish()). Le nœud a déjà
 * quitté le flux : la copie est posée par-dessus sa place, aux mesures lues avant le retrait, et s'efface
 * en --duration-xs, un palier sous l'apparition. Elle se retire à animationend.
 * La copie garde les classes du nœud, dont les règles de package arrivent après cette feuille et peuvent
 * peser plus : sa géométrie (position, box-sizing, marge, place) est donc écrite en ligne par le script, et
 * son animation porte `!important`, faute de quoi une animation du nœud la remplacerait.
 * Sous mouvement réduit, rien ne change : ce n'est qu'une opacité.
 */
.util-vanish {
	pointer-events: none;
	animation: util-vanish var(--duration-xs) var(--ease-out) forwards !important;
}

@keyframes util-vanish {
	to {
		opacity: 0;
	}
}

/*
 * Le bouton d'envoi d'une écriture pendant sa requête (MainJuiciness.pending()). Il ne grise pas : il garde
 * sa couleur et son opacité, et le disabled que pose ajax.js n'y change rien. Le libellé reste dans le
 * bouton pour en garder la largeur ; au-delà de --duration-sm, il s'efface et le sablier paraît par-dessus.
 * Les deux bascules sont des animations de 0.01ms retardées, pour que la classe retirée avant leur départ
 * ne montre rien : une réponse rapide ne fait pas clignoter le bouton.
 */
/* .btn:not(.btn-readonly) de component.css pèse deux classes et pose cursor: pointer : la règle du bouton
   en attente doit peser au moins autant, sans quoi le curseur ne dit jamais que l'envoi est parti. */
.util-pending,
.btn.util-pending:not(.btn-readonly) {
	position: relative;
	cursor: progress;
}

.util-pending:disabled {
	opacity: 1;
}

.util-pending > .util-pending-label {
	animation: util-pending-hide 0.01ms var(--duration-sm) forwards;
}

.util-pending > .util-pending-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: util-pending-show 0.01ms var(--duration-sm) forwards;
}

.util-pending > .util-pending-icon > .util-animate-turn {
	display: inline-flex;
}

@keyframes util-pending-hide {
	to {
		opacity: 0;
	}
}

@keyframes util-pending-show {
	to {
		opacity: 1;
	}
}

/*
 * Mouvement réduit. Ce qui change de taille, de forme ou de position prend une durée infime ; les
 * fondus d'opacité et de couleur restent ; l'attente (.waiter, util-animate-turn) continue de tourner.
 *
 * Deux règles tiennent tout le bloc :
 * - jamais `animation: none` ni de durée nulle : animationend ne partirait plus, et ce qui attend la
 *   fin d'une animation pour retirer une classe ou un nœud resterait posé. 0.01ms la fait partir ;
 * - aucun sélecteur sur `*` : chaque mouvement de cette feuille déclare ici sa variante, et un
 *   composant de component.css la déclare à côté de lui (util-celebrate), pour que les animations
 *   d'un package (le cachet de pesée du planning, par exemple) gardent la leur.
 *
 * `!important` parce que les feuilles de package arrivent après celle-ci en navigation ajax et
 * reprendraient la main à spécificité égale.
 */
@media (prefers-reduced-motion: reduce) {

	body[data-touch="yes"] .panel {
		transition-duration: 0.01ms !important;
	}

}

/* ===== ouvretaferme/main/static/css/template-structure.css ===== */
:root:has(body[data-template~="structure-production"]) {
	--secondary: var(--production);
	--secondary-light: var(--production-light);
	--secondary-neutral: var(--production-neutral);
	--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='%23095a41' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--secondary-highlight: #095a4107;
	--info: #e1ffe4;
}

:root:has(body[data-template~="structure-commercialisation"]) {
}

:root:has(body[data-template~="structure-accounting"]) {
	--secondary: var(--accounting);
	--secondary-light: var(--accounting-light);
	--secondary-neutral: var(--accounting-neutral);
	--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='%23135266' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--secondary-highlight: #13526607;
	--info: #e1fbff;
}

:root:has(body[data-template~="structure-settings"]) {
	--secondary: var(--settings);
	--secondary-light: var(--settings-light);
	--secondary-neutral: var(--settings-neutral);
	--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='%235c3d70' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--secondary-highlight: #5c3d7007;
	--info: #f2e1ff;
}

:root:has(body[data-template~="structure-amap"]) {
	--secondary: var(--amap);
	--secondary-light: var(--amap-light);
	--secondary-neutral: var(--amap-neutral);
	--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='%23741b36' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--secondary-highlight: #741b3607;
	--info: #ffe0ea;
}

body[data-template~="structure"] {
	background-color: var(--background-body);
}

body[data-template~="structure"] #root-nav {
	z-index: 501;
	font-weight: normal;
	color: white;
}

body structure-nav-wrapper a {
	color: white;
}

body > nav ul > li > form > button {
	color: black;
}


.structure-nav-actions {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.structure-nav-actions > * {
	display: flex;
	align-items: center;
	padding: 0;
}

body > nav .nav-item {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1rem;
	transition: background-color 0.5s;
}

@media (max-width: 575px) {

	body > nav .nav-item {
		padding: 0 0.5rem;
	}

}

.structure-nav-actions a.nav-item:hover {
	background-color: #ffffff20;
}

.structure-nav-actions > * > a.nav-icon {
	font-weight: bold;
}

@media (max-width: 575px) {

	.structure-nav-actions > * > a.nav-icon {
		font-size: 0.9rem;
	}

}


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

	.structure-nav-actions > * > a.nav-icon {
		font-size: 0.9rem;
	}

}

body > nav a:active:not(.dropdown-item),
body > nav a:hover:not(.dropdown-item) {
	text-decoration: none;
}

body .structure-nav-title {
	display: flex;
	align-items: center;
	line-height: 1.2;
	z-index: 1;
}

body[data-template~="structure"] > main .container {
	max-width: initial;
	margin-left: 0;
	margin-right: 0;
}

/* Footer */

body[data-touch="no"][data-template~="structure"] > footer {
	margin-top: 4rem;
}


.structure-nav-title-type {
	display: block;
	background-color: #0002;
	border-radius: var(--radius);
	text-align: center;
	padding: 0.5rem;
	font-size: 0.8rem;
	font-family: "Roboto Mono", monospace;
}

#structure-nav {
	padding: 0;
}

.structure-tabs.structure-section-production {
	background-color: var(--production);
}

.structure-tabs.structure-section-commercialisation {
	background-color: var(--commercialisation);
}

.structure-tabs.structure-section-accounting {
	background-color: var(--accounting);
}

.structure-tabs.structure-section-settings {
	background-color: var(--settings);
}

.structure-tabs.structure-section-amap {
	background-color: var(--amap);
}

.structure-tab {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: white;
	letter-spacing: 0.1px;
	font-weight: bold;
}

.structure-nav-help {
	position: absolute;
	bottom: 1rem;
}

.structure-tab[data-nav="help-accounting"] {

	display: inline-block;
  background-color: #257D92;
  margin: 0.75rem;
  border-radius: var(--radius);
  padding: 0.25rem 1rem;

	& > span {
		vertical-align: center;
	}
}
.structure-tab.disabled {
	opacity: 0.33;
}

.structure-tab.structure-tab-subtitle {

	border-radius: 1.5rem;
	font-size: 0.9rem;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	line-height: 1;

}

a.structure-tab.structure-tab-subtitle:hover {
	text-decoration: none !important;
}

@media (max-height: 799px), (max-width: 399px) {

	div.structure-tab {
		padding-right: 0;
	}

	@media (max-width: 399px) {

		.structure-tab {
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

	}

}

a.structure-tab:not(.structure-tab-subnav):hover {
	text-decoration: underline;
}

.structure-tab-wrapper:has(.structure-tab:not(.structure-tab-subnav).selected):not(:has(.structure-subnav-item.selected)) {
	background-color: #0003;
}

.structure-tab .structure-tab-on {
	display: none;
}

.structure-tab + div.structure-subnav-wrapper {
	margin-top: -0.125rem;
}

.structure-tab .structure-tab-icon svg {
	font-size: 1.2rem;
}

.structure-tab-label {
	font-weight: bold;
}

.structure-tab-alert {
	margin-left: 0.5rem;
	color: var(--danger);
}

@media (max-width: 449px) {

	.structure-tab-invoicing {
		letter-spacing: -0.4px;
	}

}

.structure-tab-complement {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	border-radius: 1rem;
	font-weight: normal;
	font-size: 0.9rem;
	border: 1px solid white;
	padding: 0.625rem;
	color: white;
}

a.structure-tab-complement:hover {
	text-decoration: none;
}

.structure-tab-complement svg {
	margin-bottom: -0.125rem;
}

.structure-nav-actions a.nav-user {
	color: white;
}

div.structure-nav-planning {
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
}

a.structure-subnav-item {
	display: block;
	color: white;
}

@media (max-width: 1199px) {

	a.structure-subnav-item[data-sub-nav="preaccounting"] {
		font-size: 1rem;
	}
}

a.structure-subnav-item[data-sub-nav="preaccounting"] > span.structure-subnav-prefix {
	margin-left: .5rem;
	margin-right: .25rem;
}

@media (max-height: 599px) {

	a.structure-subnav-item {
		padding-top: 0.125rem;
		padding-bottom: 0.125rem;
	}

}

@media (min-height: 600px) and (max-height: 767px) {

	a.structure-subnav-item {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

}

a.structure-subnav-item.selected {
	background-color: #0003;
	border-radius: var(--radius);
	margin-right: 1rem;
}

a.structure-subnav-item:hover {
	text-decoration: none;
}

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

	a.structure-subnav-item:hover {
		background-color: #0003;
	}

}

body[data-template^="structure"] header a:hover {
	color: white;
}

.structure-nav-identity {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: "DM Sans", sans-serif;
}

.structure-nav-year {
	display: inline-block;
	font-size: 1.2rem;
	text-align: left;
	background-color: var(--primary);
	color: white;
	border-radius: calc(var(--radius) * 2);
	width: max-content;
	transition: color .5s;
}

@media print {

	.structure-nav-year {
		display: none;
	}

}

.structure-nav-year {
	text-decoration: none;
}

.structure-nav-year:hover {
	color: white;
}

.structure-template-main-content h1 {
	font-size: 2rem;
}

body[data-template~="structure"] .container {
	width: calc(var(--screen-width) - var(--nav-width))
}


@media screen {

	body[data-template~="structure"][data-template~="structure-fixed"] .container {
		width: auto;
	}

}

.structure-nav-section-production,
.structure-nav-section-settings {
	letter-spacing: -0.5px;
}

.structure-nav-section-accounting {
	letter-spacing: -0.2px;
}

.structure-nav-accounting-title {
	color: white;
}

.structure-nav-accounting-title a {
	color: white;
	text-decoration: none;
}

.structure-nav-join-block {
	margin: 0.5rem 0.25rem;
	padding: 0.5rem;
	border-radius: var(--radius);
	font-size: .9rem;
	line-height: 1.4;
	background-color: var(--color-bg-blanc-menthe);
}

.structure-nav-join-block a:not(.btn):hover {
	color: var(--text);
}

/* La colonne posée par-dessus la page au palier (`[data-layer]`, dans le bloc de la barre) recopie les
   règles de forme de ce bloc : une retouche ici s'y reporte. */
@media (min-width: 1100px) and (min-height: 600px) {

	:root {
		--nav-height: 8rem;
		--sections-height: 4rem;
	}

	@media (min-width: 2000px) {

		:root {
			--nav-width: 22vw;
			--nav-padding: 1.5rem;
		}

	}

	@media (min-width: 1800px) and (max-width: 1999px) {

		:root {
			--nav-width: 22rem;
			--nav-padding: 1.5rem;
		}

	}


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

		:root {
			--nav-width: 21rem;
			--nav-padding: 1rem;
		}

	}

	@media (max-width: 1399px) {

		:root {
			--nav-width: 19rem;
			--nav-padding: 1rem;
		}

	}

	@media (max-height: 991px) {

		.structure-nav-title .structure-logo-view {
			width: 3rem !important;
			height: 3rem !important;
			min-width: 3rem !important;
		}

	}

	@media screen {

		body[data-template~="structure"] {
			display: grid;
			grid-template:
				"nav main" var(--nav-height)
				"header main" 1fr
				"header footer" auto / var(--nav-width) 1fr;
		}

	}

	body[data-template~="structure"] #root-nav,
	body[data-template~="structure"] header {
		background-color: var(--secondary);
	}

	body[data-template~="structure"][data-template~="structure-section-production"] #root-nav,
	body[data-template~="structure"][data-template~="structure-section-production"] header {
		background-color: var(--production);
	}

	body[data-template~="structure"][data-template~="structure-section-commercialisation"] #root-nav,
	body[data-template~="structure"][data-template~="structure-section-commercialisation"] header {
		background-color: var(--commercialisation);
	}

	body[data-template~="structure"][data-template~="structure-section-accounting"] #root-nav,
	body[data-template~="structure"][data-template~="structure-section-accounting"] header {
		background-color: var(--accounting);
	}

	body[data-template~="structure"][data-template~="structure-section-settings"] #root-nav,
	body[data-template~="structure"][data-template~="structure-section-settings"] header {
		background-color: var(--settings);
	}

	body[data-template~="structure"][data-template~="structure-section-amap"] #root-nav,
	body[data-template~="structure"][data-template~="structure-section-amap"] header {
		background-color: var(--amap);
	}

	body[data-template~="structure"] > header {
		grid-area: header;
		position: fixed;
		display: flex;
		flex-direction: column;
		width: var(--nav-width);
		top: var(--nav-height) !important;
		height: calc(100vh - var(--nav-height));
		z-index: 100;
	}

	@media screen {

		body[data-template~="structure"] > main  {
			grid-area: main;
		}

	}

	body[data-template~="structure"] > main .container.structure-template-main-title {
		height: var(--nav-height);
	}

	@media screen {

		body[data-touch="no"][data-template~="structure"] > main .container.structure-template-main-title {
			position: sticky;
			left: var(--nav-width);
			width: calc(var(--screen-width) - var(--nav-width));
			z-index: 100;
		}

	}

	body[data-template~="structure"] > main .container.structure-template-main-container {
		padding-top: 1rem;
	}

	/* Sans rail, la grille garde sa rangée du haut à `--nav-height` pour la barre de la structure :
	   la bande y reste dans ses 8rem. */
	body[data-template~="structure-rail"] > main .container.structure-template-main-title:has(.util-page-band) {
		height: auto;
		padding-top: var(--space-md);
	}

	body[data-template~="structure"] > main .container.structure-template-main-title:not(.structure-template-main-title-with-year) {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title.structure-template-main-title-with-year {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title > div.structure-template-main-content {
		display: flex;
		align-items: center;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title > div.structure-template-main-content > div {
		width: 100%;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title > div.structure-template-main-content > div > *:last-child {
		margin-bottom: 0;
	}

	body[data-template~="structure"] > footer  {
		grid-area: footer;
	}

	body[data-template~="structure"] > nav {
		grid-area: nav;
		position: fixed;
		height: var(--nav-height);
		top: 0;
		width: var(--nav-width);
		z-index: 100;
	}

	.structure-nav-wrapper {
		display: grid;
		align-items: center;
		justify-content: center;
		height: var(--nav-height);
		min-height: var(--nav-height);
	}

	.structure-nav-actions {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.structure-nav-actions .nav-item {
		padding: 1rem var(--nav-padding);
	}

	.structure-nav-actions .nav-user {
		z-index: 1;
	}

	.structure-nav-actions .nav-user .media-vignette-image {
		border: 1px solid white;
	}

	.structure-nav-title {
		justify-content: center;
		margin-bottom: .5rem;
	}

	.structure-nav-identity {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		font-size: 1.1rem;
		margin: 0 1rem;
	}

	.structure-nav-title-type {
		margin-top: 0.5rem;
	}

	#structure-nav {

		overflow: auto;
		flex: 1 1 auto;
		min-height: 0;

		@media (min-width: 1400px) {

			padding-left: 1rem;
			padding-right: 1rem;

		}

		@media (min-width: 2500px) {

			padding-left: 3vw;
			padding-right: 3vw;

		}

	}

	#structure-nav:last-child {
		margin-bottom: 1rem;
	}

	.structure-tabs {
		padding-top: 0.5rem;
		min-height: 100%;
	}

	@media (min-height: 992px) {

		.structure-tabs {
			font-size: 1.1rem;
		}

	}

	@media (min-width: 1300px) {

		.structure-tab-wrapper:has(.structure-tab:not(.structure-tab-subnav).selected) {
			border-radius: var(--radius);
		}

	}

	.structure-tab-close {
		display: none;
	}

	.structure-tab.structure-tab-subtitle {
		padding-left: 3.25rem;
	}

	.structure-tab {

		padding: 0.625rem 0.75rem;

		@media (max-height: 749px) {
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}

		@media (min-height: 992px) and (min-width: 400px) {
			padding: 0.75rem;
		}

	}

	#structure-nav-sections {

		display: grid;
		grid-column-gap: 0.5rem;
		width: 100%;
		height: var(--sections-height);
		align-items: end;
		padding: 0 1rem;
		margin-bottom: 1rem;

		@media (min-width: 1200px) {
			padding: 0 1.5rem;
		}

		@media (min-width: 2500px) {

			padding-left: 3vw;
			padding-right: 3vw;

		}

	}

	.structure-nav-sections-1 {
		grid-template-columns: max-content;
	}

	.structure-nav-sections-2 {
		grid-template-columns: 1fr 1fr;
		width: 75% !important;
		margin: auto;
	}

	.structure-nav-sections-3 {
		grid-template-columns: 1fr 1fr 1fr;
		width: 90% !important;
		margin: auto;
	}

	.structure-nav-sections-4 {
		grid-template-columns: auto auto auto auto;
	}

	.structure-nav-section {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 0.5rem;
		color: white;
		font-size: 0.9rem;
	}

	a.structure-nav-section {
		text-decoration: none;
	}

	.structure-nav-section-icon {
		font-size: 1.35rem;
		line-height: 1.3;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--primary);
	}

	body[data-template~="structure-production"]:not([data-template*="structure-section-"]) .structure-nav-section-production .structure-nav-section-icon,
	body[data-template~="structure-section-production"] .structure-nav-section-production .structure-nav-section-icon {
		background-color: white;
		color: var(--production);
	}


	body[data-template~="structure-commercialisation"]:not([data-template*="structure-section-"]) .structure-nav-section-commercialisation .structure-nav-section-icon,
	body[data-template~="structure-section-commercialisation"] .structure-nav-section-commercialisation .structure-nav-section-icon {
		background-color: white;
		color: var(--commercialisation);
	}

	body[data-template~="structure-accounting"]:not([data-template*="structure-section-"]) .structure-nav-section-accounting .structure-nav-section-icon,
	body[data-template~="structure-section-accounting"] .structure-nav-section-accounting .structure-nav-section-icon {
		background-color: white;
		color: var(--accounting);
	}

	body[data-template~="structure-settings"]:not([data-template*="structure-section-"]) .structure-nav-section-settings .structure-nav-section-icon,
	body[data-template~="structure-section-settings"] .structure-nav-section-settings .structure-nav-section-icon {
		background-color: white;
		color: var(--settings);
	}

	body[data-template~="structure-amap"]:not([data-template*="structure-section-"]) .structure-nav-section-amap .structure-nav-section-icon,
	body[data-template~="structure-section-amap"] .structure-nav-section-amap .structure-nav-section-icon {
		background-color: white;
		color: var(--amap);
	}

	.structure-nav-section-label {
		font-size: 0.8rem;
	}

	@media (max-width: 1299px) {

		.structure-nav-section-label {
			font-size: 0.75rem;
		}

	}

	.structure-nav-sections-1 .structure-nav-section,
	.structure-nav-sections-2 .structure-nav-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.structure-nav-section-up,
	.structure-nav-section-down {
		display: none;
	}

	#structure-nav div.structure-subnav-wrapper {
		display: flex;
		flex-direction: column;
		grid-column-gap: 1.25rem;
	}

	@media (min-height: 800px) {

		#structure-nav-sections {
			height: 4.75rem;
		}

	}

	.structure-nav-accounting {
		border-top: 1px solid white;
		padding-top: .75rem;
		margin-top: .75rem;
	}

	@media (max-height: 849px) {

		.structure-nav-accounting {
			padding-top: .5rem;
			margin-top: .5rem;
		}

	}

	@media (max-height: 749px) {

		.structure-nav-accounting {
			padding-top: .25rem;
			margin-top: .25rem;
		}

	}

	.structure-tab .structure-tab-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius);
		margin-right: 0.5rem;
		width: 1.75rem;
	}

	.structure-tab .structure-tab-icon:not(:empty) {
		height: 1.75rem;
	}

	a.structure-subnav-item {
		padding: 0.5rem 0.5rem 0.5rem 1rem;
		margin-left: 2.25rem;
		line-height: 1.5;
	}

	@media (min-height: 750px) and (max-height: 849px) {

		a.structure-subnav-item {
			padding-top: 0.375rem;
			padding-bottom: 0.375rem;
		}

	}
	@media (max-height: 749px) {

		a.structure-subnav-item {
			padding-top: 0.25rem;
			padding-bottom: 0.25rem;
		}

	}

	a.structure-subnav-item:hover *:not(.structure-subnav-prefix) {
		text-decoration: underline;
	}

	@media (min-width: 1300px) {

		a.structure-subnav-item.selected {
			border-radius: var(--radius);
		}

	}

	.structure-nav-year {
		margin-top: 1rem;
		padding: 0.25rem 2rem;
	}

	#structure-breadcrumbs {
		display: none;
	}


	@media screen {

		/* `grid-template` est une notation abrégée : redéclarer les seules zones laisserait en place la
		   rangée `var(--nav-height)` qu'elle pose pour la bande du haut. */
		body[data-template~="structure-rail"] {
			grid-template:
				"rail panel main" 1fr
				"rail panel footer" auto / var(--rail-width) var(--panel-width) 1fr;
		}

		body[data-template~="structure-rail"][data-template~="structure-dashboard"] {
			grid-template:
				"rail main" 1fr
				"rail footer" auto / var(--rail-width) minmax(0, 1fr);
		}

	}

	/* ⚠️ `--panel-width` se calcule sur le corps à partir de `--nav-width` : le corps garde la largeur
	   du menu pour le calque, et seuls le contenu et le pied reprennent celle du rail. `reboot.css`
	   calcule `--container-width` sur `:root`, d'où il est hérité tout calculé : il faut le refaire. */
	body[data-template~="structure-rail"][data-template~="structure-dashboard"] > main,
	body[data-template~="structure-rail"][data-template~="structure-dashboard"] > footer {
		--nav-width: var(--rail-width);
		--container-width: calc(var(--screen-width) - 2 * var(--container-padding) - var(--nav-width));
	}

	body[data-template~="structure-rail"][data-template~="structure-dashboard"] > header {
		position: fixed;
		left: var(--rail-width);
		width: var(--panel-width);
		z-index: 500;
	}

	body[data-template~="structure-rail"][data-template~="structure-dashboard"]:not([data-template*="structure-section-"]) > header {
		display: none;
	}

	body[data-template~="structure-rail"] > header {
		grid-area: panel;
		width: auto;
		height: 100vh;
		position: sticky;
		/* `body[data-template~="structure"] > header` pose `top: var(--nav-height) !important` : un
		   `!important` ne se reprend que par un autre, sans quoi le panneau garderait ce décalage sous
		   un rail qui tient toute la hauteur. */
		top: 0 !important;
		background-color: transparent;
	}

	body[data-template~="structure-rail"] #structure-nav.structure-panel {
		margin-bottom: 0;
		border-right: none;
		background-color: color-mix(in srgb, var(--domain) 10%, var(--background-surface));
	}

	body[data-template~="structure-rail"] .structure-panel-head {
		padding: var(--space-sm) var(--space-sm) 0;
		background-color: inherit;
	}

	body[data-template~="structure-rail"] .structure-panel-head.structure-panel-head-logo {
		display: none;
	}

	body[data-template~="structure-rail"] .structure-panel-structure-switch {
		flex: 1;
		min-height: var(--touch-target);
		padding: var(--space-xxs) var(--space-xs);
		border-radius: var(--radius);
	}

	body[data-template~="structure-rail"] .structure-panel-structure-name {
		flex: 1;
		white-space: normal;
		overflow-wrap: break-word;
		hyphens: auto;
		line-height: 1.2;
	}

	body[data-template~="structure-rail"] .structure-panel-body {
		padding: 0 var(--space-xxs) var(--space-sm);
	}

	body[data-template~="structure-rail"] .structure-panel-head-logo + .structure-panel-body {
		padding-top: var(--space-sm);
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tabs-universe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: var(--space-xs);
		margin: var(--space-sm) var(--space-xs) var(--space-xs);
		color: var(--domain);
		font-family: var(--font-title);
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.1;
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tabs-create {
		width: 2.5rem;
		height: 2.5rem;
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tabs {
		padding-top: 0;
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tab-wrapper + .structure-tab-wrapper {
		margin-top: var(--space-xxs);
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tab {
		display: flex;
		align-items: center;
		column-gap: var(--space-xs);
		min-height: 2.25rem;
		padding: var(--space-xxs) var(--space-xs);
		flex-basis: 100%;
		border-radius: var(--radius);
		font-weight: bold;
	}

	body[data-template~="structure-rail"] .structure-panel div.structure-tab {
		color: var(--domain);
		font-size: 0.9rem;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tab .structure-tab-icon {
		width: var(--structure-menu-icon);
		height: auto;
		margin-right: 0;
		color: var(--domain);
	}

	/* `.asset-icon` (`reboot.css`) élargit toute icône d'un pixel : il faut reprendre la largeur pour
	   qu'elle tienne dans la case des titres, sur laquelle s'alignent les libellés des entrées. */
	body[data-template~="structure-rail"] .structure-panel .structure-tab .structure-tab-icon svg {
		width: 1em;
		min-width: 1em;
		font-size: var(--structure-menu-icon);
	}

	body[data-template~="structure-rail"] .structure-panel a.structure-subnav-item {
		display: flex;
		align-items: center;
		min-height: 2.25rem;
		margin-left: 0;
		margin-right: 0;
		padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) calc(var(--space-xs) + var(--structure-menu-icon));
		border-radius: var(--radius);
	}

	body[data-template~="structure-rail"] .structure-panel div.structure-tab.selected {
		background-color: transparent;
	}

	/* ⚠️ La rangée du groupe ouvert prend le gris de la barre sombre par une règle qui pèse (0,6,0), un
	   `:has()` pesant ce que pèse son argument. Avec le même `:has()`, celle-ci pèse aussi (0,6,0)
	   en classes, et c'est son `body` qui la fait passer devant, à (0,6,1). */
	body[data-template~="structure-rail"] .structure-panel .structure-tab-wrapper:has(.structure-tab:not(.structure-tab-subnav).selected) {
		background-color: transparent;
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tab-complement {
		column-gap: var(--space-xxs);
		margin: 0 0 var(--space-xxs) calc(var(--space-xs) + var(--structure-menu-icon) + var(--space-xs));
		padding: var(--space-xxs) var(--space-xs);
		border-radius: var(--radius);
	}

	body[data-touch="no"][data-template~="structure-rail"] .structure-panel a.structure-tab-complement:hover {
		background-color: color-mix(in srgb, var(--domain) 8%, transparent);
	}
}

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

	:root {
		--nav-width: 0rem;
		--nav-height: calc(var(--nav-main) + var(--nav-structure));
	}


	div.structure-nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		height: var(--nav-main);
		min-height: var(--nav-main);
		column-gap: 0.5rem;
		padding: 0 var(--container-padding);
	}

	body[data-touch="no"] .structure-nav-wrapper {
		position: sticky;
		z-index: 500;
		left: 0;
		width: var(--screen-width);
		margin-left: 0;
		margin-right: 0;
	}

	body[data-template~="structure"] #root-nav {
		background-color: var(--primary);
	}

	body[data-template~="structure"] > header {
		position: sticky;
		z-index: 500;
		top: 0;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title {
		background: linear-gradient(to bottom, var(--background) 0, var(--background) 50%, transparent 100%);
		margin-top: 0;
		padding-top: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	body[data-touch="no"][data-template~="structure"] > main .container.structure-template-main-title {
		position: sticky;
		width: var(--screen-width);
		left: 0;
		z-index: 100;
	}

	/* `:where()` garde le poids de la règle d'impression qui suit, qui doit l'emporter par l'ordre. */
	body[data-template~="structure-rail"]:where([data-template~="structure-production"], [data-template~="structure-commercialisation"], [data-template~="structure-accounting"], [data-template~="structure-settings"], [data-template~="structure-amap"]) > main .container.structure-template-main-title {
		background: linear-gradient(to bottom, var(--background-body) 0, var(--background-body) 50%, transparent 100%);
	}

	@media print {

		body[data-template~="structure"] > main .container.structure-template-main-title {
			background: transparent;
		}

	}

	body[data-template~="structure"] > main .container.structure-template-main-title > div > *:last-child {
		margin-bottom: 0;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title + .container {
		margin-top: 1.5rem;
	}

	body[data-template~="structure"] > main .container.structure-template-main-title:has(.util-page-band) + .container {
		margin-top: 0;
	}

	/* Structure nav */
	body[data-touch="no"] #structure-nav-sections {
		position: sticky;
		left: 0;
		width: var(--screen-width);
	}

	#structure-nav-sections {
		display: flex;
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
		grid-column-gap: 0.5rem;
		height: var(--structureSections);
		padding-top: 0.5rem;
		align-items: end;
		background-color: var(--primary);
		max-width: var(--screen-width);
		overflow: auto;
	}


	.structure-nav-sections-2 {
		grid-template-columns: max-content max-content;
	}

	.structure-nav-sections-3 {
		grid-template-columns: auto auto auto;
	}

	.structure-nav-sections-4 {
		grid-template-columns: auto auto auto auto;
	}

	.structure-nav-section {
		height: 100%;
		border-top-left-radius: var(--radius);
		border-top-right-radius: var(--radius);
		padding: 0.25rem 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 0.5rem;
		color: white;
	}

	@media (max-width: 399px) {

		.structure-nav-section {
			line-height: 1;
			letter-spacing: -0.1px;
			column-gap: 0.375rem;
			padding: 0.25rem 0.5rem;
		}

	}

	.structure-nav-section svg {
		font-size: 1.2rem;
	}

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

		.structure-nav-section-icon svg {
			font-size: 1.1rem;
		}

		.structure-nav-section-down svg,
		.structure-nav-section-up svg {
			font-size: 0.9rem;
		}

	}

	@media (max-width: 359px) {

		.structure-nav-section-icon svg {
			font-size: 1rem;
		}

		.structure-nav-section-down svg,
		.structure-nav-section-up svg {
			font-size: 0.8rem;
		}

	}

	.structure-nav-join {
		grid-area: join;
	}

	.structure-nav-planning {
		grid-area: planning;
	}

	.structure-nav-planning-v2 {
		grid-area: planning-v2;
	}

	.structure-nav-cultivation {
		grid-area: cultivation;
	}

	.structure-nav-analyze-production {
		grid-area: analyze;
	}

	.structure-nav-intelligence-vegetable {
		grid-area: intelligence;
	}

	@media (min-width: 576px) {

		.structure-section-production {
			display: grid;
			align-items: start;
			grid-template:
				"planning planning" auto
				"planning-v2 planning-v2" auto
				"cultivation analyze" auto
				"cultivation intelligence" 1fr / 1fr 1fr;
		}

		.structure-section-production:has(.structure-nav-join) {
			grid-template:
				"join join" auto
				"planning planning" auto
				"planning-v2 planning-v2" auto
				"cultivation analyze" auto
				"cultivation intelligence" 1fr / 1fr 1fr;
		}


	}

	@media (max-width: 575px) {

		.structure-section-production {
			display: grid;
			align-items: start;
			grid-template:
				"planning planning" auto
				"planning-v2 planning-v2" auto
				"cultivation analyze" auto
				"cultivation intelligence" 1fr / 1fr 1fr;
		}

		.structure-section-production:has(.structure-nav-join) {
			grid-template:
				"join join" auto
				"planning planning" auto
				"planning-v2 planning-v2" auto
				"cultivation analyze" auto
				"cultivation intelligence" 1fr / 1fr 1fr;
		}


	}

	.structure-nav-amap-start {
		grid-area: start;
	}

	.structure-nav-amap-collective {
		grid-area: collective;
	}

	.structure-nav-selling {
		grid-area: selling;
	}

	.structure-nav-communication {
		grid-area: communication;
	}

	.structure-nav-analyze-commercialisation {
		grid-area: analyze;
	}

	@media (min-width: 576px) {

		.structure-section-commercialisation {
			display: grid;
			align-items: start;
			grid-template: "selling communication analyze" 1fr / auto auto auto;
		}

		.structure-section-commercialisation:has(.structure-nav-join) {
			grid-template:
				"join join join" auto
				"selling communication analyze" 1fr / auto auto auto;
		}

	}

	@media (max-width: 575px) {

		.structure-section-commercialisation {
			display: grid;
			align-items: start;
			grid-template:
				"selling communication" auto
				"selling analyze" 1fr / auto auto;
		}

		.structure-section-commercialisation:has(.structure-nav-join) {
			grid-template:
				"join join" auto
				"selling communication" auto
				"selling analyze" 1fr / auto auto;
		}


	}

	.structure-section-amap {
		display: grid;
		align-items: start;
		grid-template: "collective communication" 1fr / auto auto;
	}

	.structure-section-amap:has(.structure-nav-amap-start) {
		grid-template:
			"start start" auto
			"collective communication" 1fr / auto auto;
	}

	.structure-nav-proof {
		grid-area: proof;
	}

	.structure-nav-bank {
		grid-area: bank;
	}

	.structure-nav-cash {
		grid-area: cash;
	}

	.structure-nav-accounting {
		grid-area: accounting;
	}

	.structure-nav-preaccounting {
		grid-area: preaccounting;
	}

	.structure-nav-invoicing {
		grid-area: invoicing;
	}

	.structure-section-accounting {
		display: grid;
		align-items: start;
		grid-template:
			"invoicing accounting" auto
			"proof accounting" auto
			"bank accounting" auto
			"cash accounting" auto
			"preaccounting accounting" 1fr / 1fr 1fr;
	}

	.structure-nav-structure {
		grid-area: structure;
	}

	.structure-nav-team {
		grid-area: team;
	}

	.structure-nav-feature {
		grid-area: feature;
	}

	.structure-nav-data {
		grid-area: data;
	}

	.structure-nav-subscription {
		grid-area: subscription;
	}

	@media (min-width: 576px) {

		.structure-section-settings {
			display: grid;
			align-items: start;
			grid-template:
				"structure feature data" auto
				"team feature data" auto
				"subscription feature data" auto / 1fr 1fr 1fr;
		}

		.structure-section-settings:has(.structure-nav-join) {
			grid-template:
				"join join join" auto
				"structure feature data" auto
				"team feature data" auto
				"subscription feature data" auto / 1fr 1fr 1fr;
		}
	}

	@media (max-width: 575px) {

		.structure-section-settings {
			display: grid;
			align-items: start;
			grid-template:
				"structure feature" auto
				"team feature" auto
				"data feature" auto
				"subscription feature" auto / 1fr 1fr;
		}

		.structure-section-settings:has(.structure-nav-join) {
			grid-template:
				"join join" auto
				"structure feature" auto
				"team feature" auto
				"data feature" auto
				"subscription feature" auto / 1fr 1fr;
		}

	}

	#structure-nav {
		display: flex;
		align-items: center;
		height: var(--nav-structure);
		min-height: var(--nav-structure);
		background-color: var(--secondary);
	}

	[data-touch="no"] #structure-nav {
		position: sticky;
		left: 0;
		width: var(--screen-width);
	}


	body[data-template~="structure-production"]:not([data-template*="structure-section-"]) .structure-nav-section-production,
	body[data-template~="structure-section-production"] .structure-nav-section-production {
		background-color: var(--production);
	}


	body[data-template~="structure-commercialisation"]:not([data-template*="structure-section-"]) .structure-nav-section-commercialisation,
	body[data-template~="structure-section-commercialisation"] .structure-nav-section-commercialisation {
		background-color: var(--commercialisation);
	}

	body[data-template~="structure-accounting"]:not([data-template*="structure-section-"]) .structure-nav-section-accounting,
	body[data-template~="structure-section-accounting"] .structure-nav-section-accounting {
		background-color: var(--accounting);
	}

	body[data-template~="structure-settings"]:not([data-template*="structure-section-"]) .structure-nav-section-settings,
	body[data-template~="structure-section-settings"] .structure-nav-section-settings {
		background-color: var(--settings);
	}

	body[data-template~="structure-amap"]:not([data-template*="structure-section-"]) .structure-nav-section-amap,
	body[data-template~="structure-section-amap"] .structure-nav-section-amap {
		background-color: var(--amap);
	}

	.structure-nav-section-up {
		display: none;
	}

	.structure-nav-title .structure-logo-view {
		width: 1.75rem !important;
		height: 1.75rem !important;
		min-width: 1.75rem !important;
		font-size: 1rem !important;
	}

	.structure-nav-title-type {

		display: inline-block;
		margin-left: 0.5rem;

		@media (max-width: 575px) {

			& {
				display: none;
			}

		}

	}

	.structure-tabs {
		position: absolute;
		width: 100%;
		padding: 0.5rem 0.5rem 1rem 0.5rem;
		gap: 0 0.5rem;
		box-shadow: 0 0 1rem #0003;
		z-index: 3;
	}

	body[data-touch="yes"] .structure-tabs {
		top: var(--structureSections);
	}

	body[data-touch="no"] .structure-tabs {
		top: 0;
	}

	.structure-tab-wrapper {
		border-radius: var(--radius);
	}

	.structure-tab {
		display: flex;
		column-gap: 0.5rem;
		align-items: center;
		border-radius: var(--radius);
		padding: 1rem 0.75rem;
	}

	@media (min-width: 450px) {

		.structure-tab {
			font-size: 1.1rem;
		}

	}

	.structure-tab .structure-tab-icon {
		width: 1.5rem;
	}

	.structure-tab-close {
		position: absolute;
		top: 0rem;
		right: 0rem;
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.structure-tab-close span {
		width: calc(100% - 1rem);
		height: calc(100% - 1rem);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0006;
		color: white;
	}

	@media (min-width: 576px) {

		.structure-tab-close {
			top: 0.5rem;
			right: 0.5rem;
			width: 4rem;
			height: 4rem;
		}

	}

	div.structure-subnav-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: 0.1rem;
	}

	a.structure-subnav-item {
		padding: 0.75rem .5rem .75rem 1rem;
		border-radius: var(--radius);
	}

	@media (max-width: 359px) {

		.structure-subnav-prefix {
			display: none;
		}

	}
	.structure-nav-year {
		font-size: 1.1rem;
		padding: 0.25rem 0.75rem;
		margin-bottom: .5rem;
	}

	#structure-breadcrumbs {
		width: 100%;
		height: 100%;
		display: grid;
		align-items: center;
		grid-template-columns: max-content 1fr;
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
		color: white;
		letter-spacing: -0.1px;
		position: relative;
	}

	@media (max-width: 359px) {

		#structure-breadcrumbs {
			padding-left: 0.5rem;
		}

	}

	.structure-breadcrumbs-link {
		color: white;
		border: 1px solid transparent;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.structure-breadcrumbs-link.selected {
		background-color: #0003;
		border-radius: var(--radius);
		padding-left: 0.375rem;
		padding-right: 0.375rem;
	}

	#structure-breadcrumbs-section {
		background-color: var(--secondary);
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		padding-left: max(1rem, var(--container-padding));
		z-index: 2;
	}

	.structure-breadcrumbs-categories {
		display: flex;
		padding-left: 4rem;
		column-gap: 1rem;
		overflow-x: auto;
		white-space: nowrap;
		position: absolute;
		left: 0;
		right: var(--container-padding);
		z-index: 1;
	}

	.structure-breadcrumbs-categories {
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
		scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
	}
	.structure-breadcrumbs-categories::-webkit-scrollbar {
		display: none;  /* Older Safari and Chromium */
	}

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

		/* ⚠️ `reboot.css` calcule `--container-width` sur `:root`, d'où la valeur calculée est héritée
		   telle quelle : le corps qui change `--nav-width` doit le recalculer pour ses enfants. */
		body[data-template~="structure-rail"] {
			--nav-width: var(--rail-width);
			--container-width: calc(var(--screen-width) - 2 * var(--container-padding) - var(--nav-width));
			--mainSticky: 0rem;
		}

		@media screen {

			body[data-template~="structure-rail"] {
				grid-template:
					"rail panel" auto
					"rail main" 1fr
					"rail footer" auto / var(--rail-width) minmax(0, 1fr);
			}

			body[data-template~="structure-rail"] > main {
				grid-area: main;
			}

		}

		body[data-template~="structure-rail"] > footer {
			grid-area: footer;
		}

		body[data-template~="structure-rail"] > header {
			grid-area: panel;
			position: static;
			min-width: 0;
		}

		body[data-template~="structure-rail"][data-template~="structure-dashboard"] > header {
			position: fixed;
			top: 0;
			left: var(--rail-width);
			right: 0;
			z-index: 500;
		}

		body[data-template~="structure-rail"][data-template~="structure-dashboard"]:not([data-template*="structure-section-"]) > header {
			display: none;
		}

		body[data-template~="structure-rail"] #structure-nav.structure-panel {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 0 var(--space-xxs);
			height: auto;
			min-height: 0;
			padding: var(--space-xs) var(--space-md);
			border-right: none;
			background-color: color-mix(in srgb, var(--domain) 16%, var(--background-surface));
			overflow: visible;
		}

		/* Les étages sont une seule rangée flex qui passe à la ligne : la tête, le corps, l'univers et ses
		   groupes s'effacent devant leurs enfants, qui deviennent les éléments de cette rangée. */
		body[data-template~="structure-rail"] .structure-panel-body,
		body[data-template~="structure-rail"] .structure-panel .structure-tab-wrapper {
			display: contents;
		}

		/* ⚠️ (0,3,3) : de quoi passer devant les règles de la barre qui cachent l'univers de l'écran tant
		   qu'aucun n'est ouvert (0,3,1, plus bas dans cette feuille), sans passer devant celles qui
		   cachent les autres univers (0,4,1). */
		body[data-template~="structure-rail"] nav.structure-panel div.structure-tabs {
			display: contents;
		}

		/* Un élément flex passe à la ligne selon sa base, pas selon ce qu'il pourrait céder : une base de
		   8 rem garde le déclencheur sur la rangée des groupes, le nom s'abrégeant, tant qu'elle lui laisse
		   8 rem. Quand les groupes passent eux-mêmes sur deux rangées, il les suit sur la seconde. */
		body[data-template~="structure-rail"] .structure-panel-head {
			order: 1;
			flex: 1 0 8rem;
			justify-content: flex-end;
			min-width: 0;
			padding: 0;
			background-color: transparent;
		}

		body[data-template~="structure-rail"] .structure-panel-structure {
			flex: 0 1 auto;
		}

		body[data-template~="structure-rail"] .structure-panel-structure-switch {
			min-height: 2.25rem;
			padding: var(--space-xxs) var(--space-xs);
			border-radius: var(--radius);
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tabs-universe {
			display: flex;
			align-items: center;
			column-gap: var(--space-xs);
			margin-right: var(--space-xs);
			padding: 0;
			color: var(--domain);
			font-family: var(--font-title);
			font-size: 1.4rem;
			font-weight: 500;
			line-height: 1.2;
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tabs-create {
			width: var(--touch-target);
			height: var(--touch-target);
		}

		body[data-template~="structure-rail"] .structure-panel .structure-nav-join,
		body[data-template~="structure-rail"] .structure-panel .structure-subnav-wrapper {
			display: none;
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tab {
			display: inline-flex;
			align-items: center;
			column-gap: var(--space-xxs);
			min-height: 2.25rem;
			padding: var(--space-xxs) var(--space-xs);
			border-radius: var(--radius);
			font-size: 1rem;
			font-weight: normal;
			white-space: nowrap;
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tab .structure-tab-icon {
			margin-right: 0;
			color: var(--domain);
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tab .structure-tab-icon svg {
			width: 1em;
			min-width: 1em;
			font-size: var(--structure-menu-icon);
		}

		body[data-template~="structure-rail"]:not([data-layer]) .structure-panel div.structure-tab-subnav {
			cursor: pointer;
		}

		body[data-touch="no"][data-template~="structure-rail"]:not([data-layer]) .structure-panel div.structure-tab-subnav:not(.disabled):hover {
			background-color: color-mix(in srgb, var(--domain) 8%, transparent);
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tab-complement {
			column-gap: var(--space-xxs);
			padding: var(--space-xxs) var(--space-xs);
			border-radius: var(--radius);
		}

		body[data-touch="no"][data-template~="structure-rail"] .structure-panel a.structure-tab-complement:hover {
			background-color: color-mix(in srgb, var(--domain) 8%, transparent);
		}

		/* Le groupe ouvert : celui de l'entrée courante, ou celui qu'un clic a ouvert (`Structure.openGroup()`). */
		body[data-template~="structure-rail"]:not([data-layer]) #structure-nav:not([data-group]) .structure-tab-wrapper:has(.selected) > .structure-subnav-wrapper,
		body[data-template~="structure-rail"]:not([data-layer]) #structure-nav[data-group] .structure-tab-wrapper[data-group-open] > .structure-subnav-wrapper {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-xxs);
			order: 2;
			flex-basis: calc(100% + 2 * var(--space-md));
			margin: 0 calc(-1 * var(--space-md)) calc(-1 * var(--space-xs));
			padding: var(--space-xs) var(--space-md);
			background-color: color-mix(in srgb, var(--domain) 10%, var(--background-surface));
		}

		body[data-template~="structure-rail"]:not([data-layer]) #structure-nav:not([data-group]) .structure-tab-wrapper:has(.selected):has(> .structure-subnav-wrapper) > .structure-tab,
		body[data-template~="structure-rail"]:not([data-layer]) #structure-nav[data-group] .structure-tab-wrapper[data-group-open]:has(> .structure-subnav-wrapper) > .structure-tab {
			padding-bottom: var(--space-xs);
			border-radius: var(--radius) var(--radius) 0 0;
			background-color: color-mix(in srgb, var(--domain) 10%, var(--background-surface));
			color: var(--text);
			font-weight: bold;
		}

		body[data-template~="structure-rail"] .structure-panel a.structure-subnav-item {
			display: inline-flex;
			align-items: center;
			min-height: 2.25rem;
			margin: 0;
			padding: var(--space-xxs) var(--space-xs);
			border-radius: var(--radius);
			white-space: nowrap;
		}

		body[data-template~="structure-rail"] .structure-panel .structure-subnav-prefix:empty {
			display: none;
		}

		/* ⚠️ Les règles qui allument le chevron de la barre nomment l'univers et pèsent (0,3,1) :
		   l'identifiant porte celles-ci à (1,2,1). */
		body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section-down,
		body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section-up {
			display: none;
		}

		body[data-template~="structure-rail"] .structure-panel .structure-tab-close {
			display: none;
		}

		body[data-touch="no"][data-template~="structure-rail"] #structure-nav.structure-panel {
			position: static;
			width: auto;
		}

		body[data-touch="no"][data-template~="structure-rail"] > main .container.structure-template-main-title {
			left: var(--nav-width);
			width: calc(var(--screen-width) - var(--nav-width));
		}

		/* `reboot.css` étend ces blocs à `--screen-width`, qui ignore le rail, sous les mêmes seuils. */
		body[data-template~="structure-rail"] .stick-lg {
			width: calc(var(--screen-width) - var(--nav-width));
		}

		@media (max-width: 991px) {

			body[data-template~="structure-rail"] .stick-md {
				width: calc(var(--screen-width) - var(--nav-width));
			}

		}

		/* La colonne de menu, ouverte par-dessus la page (`Structure.openColumnLayer()`) : ses règles de
		   forme vivent sous `(min-width: 1100px)`, qu'aucun sélecteur ne fait jouer plus étroit. */
		body[data-template~="structure-rail"][data-layer] > header {
			height: var(--structure-layer-height);
			pointer-events: none;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-scrim {
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			left: var(--rail-width);
			right: 0;
			z-index: 500;
			pointer-events: auto;
		}

		body[data-template~="structure-rail"][data-layer] #structure-nav.structure-panel {
			position: fixed;
			top: 0;
			bottom: 0;
			left: var(--rail-width);
			z-index: 500;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: normal;
			gap: normal;
			width: calc(19rem - var(--rail-width));
			height: auto;
			padding: 0;
			background-color: color-mix(in srgb, var(--domain) 10%, var(--background-surface));
			overflow: auto;
			pointer-events: auto;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-head {
			order: 0;
			flex: initial;
			justify-content: normal;
			padding: var(--space-sm) var(--space-sm) 0;
			background-color: inherit;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-head-logo {
			display: none;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-structure,
		body[data-template~="structure-rail"][data-layer] .structure-panel-structure-switch {
			flex: 1;
			min-height: var(--touch-target);
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-structure-name {
			white-space: normal;
			overflow-wrap: break-word;
			hyphens: auto;
			line-height: 1.2;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-body {
			display: block;
			padding: 0 var(--space-xxs) var(--space-sm);
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel-head-logo + .structure-panel-body {
			padding-top: var(--space-sm);
		}

		/* ⚠️ La rangée de l'entrée courante prend un fond gris par une règle qui pèse (0,6,0). */
		body[data-template~="structure-rail"][data-layer] #structure-nav.structure-panel .structure-tab-wrapper {
			display: block;
			background-color: transparent;
		}

		body[data-template~="structure-rail"][data-layer] #structure-nav.structure-panel div.structure-nav-planning {
			display: flex;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel .structure-tab-wrapper + .structure-tab-wrapper {
			margin-top: var(--space-xxs);
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel .structure-tabs-universe {
			justify-content: space-between;
			margin: var(--space-sm) var(--space-xs) var(--space-xs);
			font-size: 1.6rem;
			line-height: 1.1;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel .structure-tabs-create {
			width: 2.5rem;
			height: 2.5rem;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel .structure-tab {
			display: flex;
			column-gap: var(--space-xs);
			flex-basis: 100%;
			font-weight: bold;
			white-space: normal;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel div.structure-tab {
			background-color: transparent;
			color: var(--domain);
			font-size: 0.9rem;
			letter-spacing: 0.03em;
			text-transform: uppercase;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel .structure-tab .structure-tab-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: var(--structure-menu-icon);
			height: auto;
			border-radius: var(--radius);
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel div.structure-subnav-wrapper {
			display: flex;
			flex-direction: column;
			gap: normal;
		}

		body[data-template~="structure-rail"][data-layer] .structure-nav-accounting {
			border-top: 1px solid white;
			padding-top: var(--space-sm);
			border-radius: 0;
		}

		@media (max-height: 849px) {

			body[data-template~="structure-rail"][data-layer] .structure-nav-accounting {
				padding-top: var(--space-xs);
			}

		}

		@media (max-height: 749px) {

			body[data-template~="structure-rail"][data-layer] .structure-nav-accounting {
				padding-top: var(--space-xxs);
			}

		}

		body[data-template~="structure-rail"][data-layer] .structure-panel a.structure-subnav-item {
			display: flex;
			padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) calc(var(--space-xs) + var(--structure-menu-icon));
			line-height: 1.5;
			white-space: normal;
		}

		body[data-template~="structure-rail"][data-layer] .structure-panel .structure-tab-complement {
			margin: 0 0 var(--space-xxs) calc(var(--space-xs) + var(--structure-menu-icon) + var(--space-xs));
		}

	}

}

.structure-tab-disabled {
	opacity: 0.5;
}

/* Onglets pour les saisons */
.structure-tabs-season .structure-tabs-season-page {
	display: flex;
	align-items: center;
	height: 3rem;
	font-weight: bold;
}

.structure-tabs-season .structure-tabs-season-page:before {
	content: ">";
	font-size: 0.9rem;
	margin: 0 0.75rem;
}

.structure-tabs-season .structure-tabs-season-action {
	flex: 1 0 auto;
	text-align: right;
}


body[data-template~="structure-production"]:not([data-template*="structure-section-"]) .structure-nav-section-production,
body[data-template~="structure-section-production"] .structure-nav-section-production,
body[data-template~="structure-commercialisation"]:not([data-template*="structure-section-"]) .structure-nav-section-commercialisation,
body[data-template~="structure-section-commercialisation"] .structure-nav-section-commercialisation,
body[data-template~="structure-accounting"]:not([data-template*="structure-section-"]) .structure-nav-section-accounting,
body[data-template~="structure-section-accounting"] .structure-nav-section-accounting {
	border-color: white;
}

body[data-template~="structure-production"]:not([data-template*="structure-section-"]) .structure-nav-section-production,
body[data-template~="structure-section-production"] .structure-nav-section-production {
	position: relative;
	z-index: 1;
}


body[data-template~="structure-commercialisation"]:not([data-template*="structure-section-"]) .structure-nav-section-commercialisation,
body[data-template~="structure-section-commercialisation"] .structure-nav-section-commercialisation {
	position: relative;
	z-index: 1;
}

body[data-template~="structure-accounting"]:not([data-template*="structure-section-"]) .structure-nav-section-accounting,
body[data-template~="structure-section-accounting"] .structure-nav-section-accounting {
	position: relative;
	z-index: 1;
}

body[data-template~="structure-settings"]:not([data-template*="structure-section-"]) .structure-nav-section-settings,
body[data-template~="structure-section-settings"] .structure-nav-section-settings {
	position: relative;
	z-index: 1;
}

body[data-template~="structure-amap"]:not([data-template*="structure-section-"]) .structure-nav-section-amap,
body[data-template~="structure-section-amap"] .structure-nav-section-amap {
	position: relative;
	z-index: 1;
}

body:not([data-template~="structure-production"]):not([data-template~="structure-section-production"]) .structure-tabs.structure-section-production,
body[data-template*="structure-section-"]:not([data-template~="structure-section-production"]) .structure-tabs.structure-section-production {
	display: none;
}

body:not([data-template~="structure-commercialisation"]):not([data-template~="structure-section-commercialisation"]) .structure-tabs.structure-section-commercialisation,
body[data-template*="structure-section-"]:not([data-template~="structure-section-commercialisation"]) .structure-tabs.structure-section-commercialisation {
	display: none;
}

body:not([data-template~="structure-accounting"]):not([data-template~="structure-section-accounting"]) .structure-tabs.structure-section-accounting,
body[data-template*="structure-section-"]:not([data-template~="structure-section-accounting"]) .structure-tabs.structure-section-accounting {
	display: none;
}

body:not([data-template~="structure-settings"]):not([data-template~="structure-section-settings"]) .structure-tabs.structure-section-settings,
body[data-template*="structure-section-"]:not([data-template~="structure-section-settings"]) .structure-tabs.structure-section-settings {
	display: none;
}

body:not([data-template~="structure-amap"]):not([data-template~="structure-section-amap"]) .structure-tabs.structure-section-amap,
body[data-template*="structure-section-"]:not([data-template~="structure-section-amap"]) .structure-tabs.structure-section-amap {
	display: none;
}

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

	body:not([data-template~="structure-section-production"]) .structure-tabs.structure-section-production {
		display: none;
	}

	body[data-template~="structure-section-production"] .structure-nav-section-production .structure-nav-section-down {
		display: none;
	}

	body[data-template~="structure-section-production"] .structure-nav-section-production .structure-nav-section-up {
		display: block;
	}

	body:not([data-template~="structure-section-commercialisation"]) .structure-tabs.structure-section-commercialisation {
		display: none;
	}

	body[data-template~="structure-section-commercialisation"] .structure-nav-section-commercialisation .structure-nav-section-down {
		display: none;
	}

	body[data-template~="structure-section-commercialisation"] .structure-nav-section-commercialisation .structure-nav-section-up {
		display: block;
	}

	body:not([data-template~="structure-section-accounting"]) .structure-tabs.structure-section-accounting {
		display: none;
	}

	body[data-template~="structure-section-accounting"] .structure-nav-section-accounting .structure-nav-section-down {
		display: none;
	}

	body[data-template~="structure-section-accounting"] .structure-nav-section-accounting .structure-nav-section-up {
		display: block;
	}

	body:not([data-template~="structure-section-settings"]) .structure-tabs.structure-section-settings {
		display: none;
	}

	body[data-template~="structure-section-settings"] .structure-nav-section-settings .structure-nav-section-down {
		display: none;
	}

	body[data-template~="structure-section-settings"] .structure-nav-section-settings .structure-nav-section-up {
		display: block;
	}

	body:not([data-template~="structure-section-amap"]) .structure-tabs.structure-section-amap {
		display: none;
	}

	body[data-template~="structure-section-amap"] .structure-nav-section-amap .structure-nav-section-down {
		display: none;
	}

	body[data-template~="structure-section-amap"] .structure-nav-section-amap .structure-nav-section-up {
		display: block;
	}

	@media (max-width: 449px) {

		.structure-nav-section-settings .structure-nav-section-label {
			display: none;
		}

	}

}

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

	body[data-template~="structure-rail"] {
		--nav-main: max(3.25rem, var(--touch-target));
		--structure-bar: 4rem;
		--structure-strip: calc(var(--touch-target) + 2 * var(--space-xxs));
		--nav-structure: calc(var(--structure-bar) + var(--structure-strip));
		--mainSticky: var(--nav-main);
	}

	body[data-template~="structure-rail"][data-template~="structure-dashboard"] {
		--nav-structure: var(--structure-bar);
	}

	body[data-template~="structure-rail"] > nav {
		position: static;
		height: var(--nav-main);
		background-color: transparent;
	}

	body[data-template~="structure-rail"] > main {
		padding-bottom: calc(var(--nav-structure) + var(--space-md));
	}

	body[data-template~="structure-rail"] .structure-rail {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-rows: 100%;
		align-items: stretch;
		row-gap: 0;
		height: var(--structure-bar);
		padding: 0;
		background-color: var(--background-surface);
		border-top: 1px solid var(--border);
		box-shadow: var(--shadow-v2);
		color: var(--text);
	}

	body[data-template~="structure-rail"] #structure-nav-sections {
		display: contents;
	}

	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-home {
		--domain: var(--primary);
		grid-column: 1;
	}

	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-production {
		grid-column: 2;
	}

	body[data-template~="structure-rail"] .structure-rail-create {
		grid-column: 3;
	}

	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-commercialisation,
	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-amap {
		grid-column: 4;
	}

	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-accounting {
		grid-column: 5;
	}

	body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section,
	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-home {
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: var(--space-xxs);
		min-width: 0;
		width: auto;
		height: auto;
		padding: 0;
		background-color: transparent;
		color: var(--text);
		font-size: 0.9rem;
		line-height: 1.2;
		text-decoration: none;
	}

	/* ⚠️ Les icônes de l'univers ouvert prennent un fond blanc par des règles qui pèsent (0,4,1), plus
	   haut dans cette feuille : il en faut une de plus ici. */
	body[data-template~="structure"][data-template~="structure-rail"] .structure-rail .structure-nav-section .structure-nav-section-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 1.875rem;
		border-radius: 1rem;
		background-color: transparent;
		color: var(--domain);
		font-size: 1.3rem;
	}

	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-label {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: inherit;
		line-height: inherit;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-dashboard"] .structure-rail .structure-nav-section-home,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-production"] .structure-rail .structure-nav-section-production,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-amap"] .structure-rail .structure-nav-section-amap,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-commercialisation"] .structure-rail .structure-nav-section-commercialisation,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-accounting"] .structure-rail .structure-nav-section-accounting,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-production"] .structure-rail .structure-nav-section-production,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-amap"] .structure-rail .structure-nav-section-amap,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-commercialisation"] .structure-rail .structure-nav-section-commercialisation,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-accounting"] .structure-rail .structure-nav-section-accounting {
		color: var(--domain);
		font-weight: bold;
	}

	body[data-template~="structure"][data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-dashboard"] .structure-rail .structure-nav-section-home .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-production"] .structure-rail .structure-nav-section-production .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-amap"] .structure-rail .structure-nav-section-amap .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-commercialisation"] .structure-rail .structure-nav-section-commercialisation .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-accounting"] .structure-rail .structure-nav-section-accounting .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-production"] .structure-rail .structure-nav-section-production .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-amap"] .structure-rail .structure-nav-section-amap .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-commercialisation"] .structure-rail .structure-nav-section-commercialisation .structure-nav-section-icon,
	body[data-template~="structure"][data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-accounting"] .structure-rail .structure-nav-section-accounting .structure-nav-section-icon {
		background-color: color-mix(in srgb, var(--domain) 20%, transparent);
	}

	/* ⚠️ L'identifiant porte ces sélecteurs au-dessus des règles qui allument le chevron du panneau
	   déroulant d'hier, plus haut dans cette feuille. */
	body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section-down {
		display: none;
	}

	body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section-up,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-production"] #structure-nav-sections .structure-nav-section-production .structure-nav-section-down,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-amap"] #structure-nav-sections .structure-nav-section-amap .structure-nav-section-down,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-commercialisation"] #structure-nav-sections .structure-nav-section-commercialisation .structure-nav-section-down,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-accounting"] #structure-nav-sections .structure-nav-section-accounting .structure-nav-section-down {
		position: absolute;
		display: flex;
		top: calc((1.875rem - 0.75rem) / 2);
		left: calc(50% + 0.875rem);
		color: var(--domain);
		font-size: 0.75rem;
		line-height: 1;
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-production"] #structure-nav-sections .structure-nav-section-production .structure-nav-section-up,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-amap"] #structure-nav-sections .structure-nav-section-amap .structure-nav-section-up,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-commercialisation"] #structure-nav-sections .structure-nav-section-commercialisation .structure-nav-section-up,
	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-accounting"] #structure-nav-sections .structure-nav-section-accounting .structure-nav-section-up {
		display: none;
	}

	body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section {
		position: relative;
	}

	body[data-template~="structure-rail"] .structure-rail-brand,
	body[data-template~="structure-rail"] .structure-rail-space {
		display: none;
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-production"] .structure-rail-foot {
		--domain: var(--production);
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-amap"] .structure-rail-foot {
		--domain: var(--amap);
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-commercialisation"] .structure-rail-foot {
		--domain: var(--commercialisation);
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-accounting"] .structure-rail-foot {
		--domain: var(--accounting);
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-settings"] .structure-rail-foot {
		--domain: var(--settings);
	}

	body[data-template~="structure-rail"] .structure-rail-create {
		grid-row: 1;
		align-self: center;
		justify-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--touch-target);
		height: var(--touch-target);
		border-radius: 50%;
		background-color: var(--domain);
		color: var(--primary-ink);
		font-size: 1.6rem;
		cursor: pointer;
	}

	body[data-touch="no"][data-template~="structure-rail"] .structure-rail-create:hover {
		color: var(--primary-ink);
	}

	body[data-template~="structure-rail"] .structure-rail-create[data-dropdown-display] {
		background-color: color-mix(in srgb, var(--domain) 80%, var(--dark));
	}

	body[data-template~="structure-rail"] .structure-rail-foot {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		column-gap: var(--space-xxs);
		height: var(--nav-main);
		padding: 0 var(--space-xxs) 0 var(--space-xs);
		background-color: var(--domain);
		color: var(--primary-ink);
	}

	body[data-touch="no"][data-template~="structure-rail"] :where(.structure-rail-tool, a.structure-rail-switch):hover {
		background-color: color-mix(in srgb, var(--primary-ink) 12%, transparent);
	}

	body[data-template~="structure-rail"][data-panel="open"][data-template~="structure-section-settings"] .structure-rail-tool.structure-nav-section-settings {
		background-color: color-mix(in srgb, var(--primary-ink) 22%, transparent);
	}

	body[data-template~="structure-rail"] .structure-rail-switch {
		display: flex;
		align-items: center;
		column-gap: var(--space-xxs);
		min-width: 0;
		min-height: var(--touch-target);
		margin-right: auto;
		padding: 0 var(--space-xxs);
		border-radius: var(--radius);
		color: inherit;
		text-decoration: none;
	}

	body[data-template~="structure-rail"] a.structure-rail-switch {
		cursor: pointer;
	}

	body[data-touch="no"][data-template~="structure-rail"] a.structure-rail-switch:hover {
		color: inherit;
		text-decoration: none;
	}

	body[data-template~="structure-rail"] a.structure-rail-switch[data-dropdown-display] {
		background-color: color-mix(in srgb, var(--primary-ink) 22%, transparent);
	}

	body[data-template~="structure-rail"] .structure-rail-switch .structure-logo-view {
		border-radius: var(--radius);
		background-color: var(--background-surface);
	}

	body[data-template~="structure-rail"] .structure-rail-switch > svg {
		flex: none;
		font-size: 0.9rem;
	}

	body[data-template~="structure-rail"] .structure-rail-name {
		display: block;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-family: var(--font-title);
		font-weight: 700;
	}

	body[data-template~="structure-rail"] .structure-rail-foot .nav-account {
		order: 1;
	}

	.structure-rail-create-list {
		width: min(20rem, calc(100vw - var(--space-md)));
	}

	/* ⚠️ Le double attribut passe devant `body[data-template~="structure-planning-daily"] header` et sa
	   jumelle `yearly` (`series/static/css/planning.css`), chargées après, qui remettent l'en-tête en flux. */
	body[data-template~="structure"][data-template~="structure-rail"] > header {
		position: fixed;
		top: auto;
		bottom: var(--structure-bar);
		left: 0;
		right: 0;
		/* ⚠️ Au-dessus du `z-index` de `#root-nav`, plus haut dans cette feuille : un élément de grille
		   à `z-index` non `auto` crée un contexte d'empilement même en `position: static`, donc le
		   `<nav>` remis en flux peindrait par-dessus le panneau. */
		z-index: 510;
		width: auto;
		display: block;
	}

	body[data-template~="structure-rail"][data-template~="structure-dashboard"]:not([data-panel="open"]) > header {
		display: none;
	}

	body[data-template~="structure-rail"] .structure-panel-scrim {
		display: none;
		position: fixed;
		top: var(--nav-main);
		bottom: var(--structure-bar);
		left: 0;
		right: 0;
	}

	body[data-template~="structure-rail"][data-panel="open"] .structure-panel-scrim {
		display: block;
	}

	/* ⚠️ Le voile est positionné et le panneau non : sans contexte propre, un élément positionné peint
	   par-dessus ses frères en flux, et le voile masquerait la navigation qu'il accompagne. */
	body[data-template~="structure"][data-template~="structure-rail"] #structure-nav.structure-panel {
		position: relative;
		z-index: 1;
		left: auto;
		align-items: stretch;
		width: auto;
		height: auto;
		min-height: 0;
		max-height: calc(100vh - var(--nav-main) - var(--structure-bar));
		overflow: hidden auto;
		border-right: none;
		border-top: 1px solid var(--border);
	}

	body[data-template~="structure-rail"] .structure-panel-head,
	body[data-template~="structure-rail"] .structure-panel .structure-tab-close,
	body[data-template~="structure-rail"] .structure-panel .structure-tabs-universe {
		display: none;
	}

	body[data-template~="structure-rail"] .structure-panel-body {
		padding: 0;
	}

	/* ⚠️ Chaque groupe porte une grille d'aires nommées et une position absolue, dessinées pour le
	   panneau déroulant d'hier : le `position: static` remet le groupe dans le flux du panneau. */
	body[data-template~="structure-rail"] .structure-panel .structure-tabs {
		position: static;
		min-height: 0;
		padding: var(--space-xs);
		box-shadow: none;
		background-color: color-mix(in srgb, var(--domain) 10%, var(--background-surface));
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-tabs {
		display: none;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-production"] #structure-nav .structure-tabs.structure-section-production,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-amap"] #structure-nav .structure-tabs.structure-section-amap,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-commercialisation"] #structure-nav .structure-tabs.structure-section-commercialisation,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-accounting"] #structure-nav .structure-tabs.structure-section-accounting,
	body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-settings"] #structure-nav .structure-tabs.structure-section-settings {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		column-gap: var(--space-xxs);
		height: var(--structure-strip);
		padding: var(--space-xxs) var(--space-xs);
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--space-xs);
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-tabs > :not(.structure-tab-wrapper),
	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-tab-wrapper > :not(a.structure-tab, .structure-subnav-wrapper),
	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-subnav-wrapper > :not(a.structure-subnav-item),
	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav :is(.structure-tab-icon, .structure-subnav-prefix) {
		display: none;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav :is(.structure-tab-wrapper, .structure-subnav-wrapper) {
		display: contents;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-section-settings .structure-tab-wrapper > div.structure-tab {
		display: flex;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-section-settings .structure-subnav-wrapper {
		display: none;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav :is(.structure-tab, .structure-subnav-item) {
		flex: none;
		display: flex;
		align-items: center;
		min-height: var(--touch-target);
		margin: 0;
		padding: var(--space-xs) var(--space-sm);
		border-radius: 999px;
		color: var(--text);
		font-size: 1rem;
		font-weight: normal;
		white-space: nowrap;
		text-decoration: none;
		scroll-snap-align: start;
		cursor: pointer;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-tab-label {
		font-weight: inherit;
	}

	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav :is(.structure-tab, .structure-subnav-item).selected,
	body[data-template~="structure-rail"]:not([data-panel="open"]) #structure-nav .structure-section-settings .structure-tab-wrapper:has(.structure-subnav-item.selected) > div.structure-tab {
		background-color: color-mix(in srgb, var(--domain) 20%, transparent);
		color: var(--domain);
		font-weight: bold;
	}

}

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

	/* `root.css` pose la même règle sur `> nav`, à la même spécificité, et se charge après : il faut
	   un sélecteur plus précis pour la reprendre. */
	body[data-template~="structure"][data-template~="structure-rail"] > nav {
		grid-area: rail;
		width: var(--rail-width);
		height: 100vh;
		position: sticky;
		top: 0;
	}

	body[data-template~="structure-rail"] .structure-rail {
		height: 100%;
	}

	body[data-template~="structure-rail"] .structure-rail-foot {
		flex-direction: column;
		row-gap: var(--space-xxs);
		width: 100%;
	}

	/* `#structure-nav-sections` (1,0,0) fixe la hauteur et le fond de la liste pour une barre
	   horizontale, ici et sous son `@media (min-height: 800px)` : il faut l'identifiant pour la
	   reprendre, une classe pesant (0,1,0). */
	body[data-template~="structure-rail"] #structure-nav-sections {
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: var(--space-xxs);
		background-color: transparent;
		/* ⚠️ `.structure-nav-sections-2` et `-3` posent la largeur en `!important` pour la barre
		   horizontale, où la liste se centre : un `!important` ne se reprend que par un autre, et le
		   rail est une colonne qui tient toute sa largeur. */
		width: 100% !important;
		height: auto;
		/* Le retrait latéral de la liste est celui du conteneur de la barre horizontale, où il aligne
		   les onglets sur le contenu de la page : dans un rail large de 5,25 rem, il prend la place du
		   libellé. */
		padding: 0;
	}

	body[data-template~="structure-rail"] #structure-nav-sections .structure-nav-section,
	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-home {
		flex: none;
		flex-direction: column;
		row-gap: var(--space-xxs);
		width: calc(var(--rail-width) - var(--space-xxs));
		height: auto;
		padding: var(--space-xs) 0;
		border-radius: var(--radius);
		color: inherit;
		font-size: 0.9rem;
		line-height: 1.2;
	}

	body[data-template~="structure-rail"] > main {
		margin-top: 0;
	}

	body[data-template~="structure-rail"] a.structure-panel-close {
		display: none;
	}

	body[data-template~="structure-rail"] .structure-rail {
		row-gap: var(--space-xxs);
		padding: var(--space-sm) 0;
		background-color: var(--domain);
		color: var(--primary-ink);
	}

	body[data-template~="structure-rail"] .structure-rail-brand {
		min-width: var(--touch-target);
		min-height: var(--touch-target);
		margin-bottom: var(--space-xs);
	}

	/* ⚠️ Les icônes de l'univers ouvert prennent un fond blanc par des règles qui pèsent (0,4,1), plus
	   haut dans ce bloc : il en faut une de plus ici. */
	body[data-template~="structure"][data-template~="structure-rail"] .structure-rail .structure-nav-section .structure-nav-section-icon {
		width: 3.5rem;
		height: 2rem;
		border-radius: 1rem;
		font-size: 1.3rem;
		background-color: transparent;
		color: inherit;
	}

	body[data-template~="structure-rail"] .structure-rail .structure-nav-section-label {
		font-size: inherit;
		line-height: inherit;
	}

	/* ⚠️ `:where()` ramène le survol au poids de la marque de l'univers ouvert, qui le suit et l'emporte
	   donc sous la souris ; sans lui, survoler l'univers ouvert l'éclaircirait. */
	body[data-touch="no"][data-template~="structure-rail"] :where(.structure-rail) .structure-nav-section:hover .structure-nav-section-icon {
		background-color: color-mix(in srgb, var(--primary-ink) 14%, transparent);
	}

	body[data-template~="structure-rail"][data-template~="structure-dashboard"] .structure-rail .structure-nav-section-home .structure-nav-section-icon,
	body[data-template~="structure-rail"][data-template~="structure-production"] .structure-rail .structure-nav-section-production .structure-nav-section-icon,
	body[data-template~="structure-rail"][data-template~="structure-amap"] .structure-rail .structure-nav-section-amap .structure-nav-section-icon,
	body[data-template~="structure-rail"][data-template~="structure-commercialisation"] .structure-rail .structure-nav-section-commercialisation .structure-nav-section-icon,
	body[data-template~="structure-rail"][data-template~="structure-accounting"] .structure-rail .structure-nav-section-accounting .structure-nav-section-icon {
		background-color: color-mix(in srgb, var(--primary-ink) 26%, transparent);
	}

	body[data-template~="structure-rail"][data-template~="structure-dashboard"] .structure-rail .structure-nav-section-home,
	body[data-template~="structure-rail"][data-template~="structure-production"] .structure-rail .structure-nav-section-production,
	body[data-template~="structure-rail"][data-template~="structure-amap"] .structure-rail .structure-nav-section-amap,
	body[data-template~="structure-rail"][data-template~="structure-commercialisation"] .structure-rail .structure-nav-section-commercialisation,
	body[data-template~="structure-rail"][data-template~="structure-accounting"] .structure-rail .structure-nav-section-accounting {
		font-weight: bold;
	}

	body[data-touch="no"][data-template~="structure-rail"] :where(.structure-rail-tool, a.structure-rail-brand):hover {
		background-color: color-mix(in srgb, var(--primary-ink) 12%, transparent);
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tabs-create {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		border-radius: 50%;
		background-color: var(--domain);
		color: var(--primary-ink);
		font-size: 1.2rem;
		cursor: pointer;
	}

	body[data-touch="no"][data-template~="structure-rail"] .structure-panel .structure-tabs-create:hover {
		color: var(--primary-ink);
	}

	body[data-template~="structure-rail"] .structure-panel .structure-tabs-create[data-dropdown-display] {
		background-color: color-mix(in srgb, var(--domain) 80%, var(--dark));
	}

	body[data-template~="structure-rail"] .structure-rail-foot > .notification-bell {
		order: -1;
		margin-bottom: var(--space-sm);
	}

	body[data-template~="structure-rail"] .structure-rail .notification-bell > a.nav-item {
		justify-content: center;
		column-gap: var(--space-xxs);
		min-width: var(--touch-target);
		height: var(--touch-target);
		padding: 0 var(--space-xs);
		border-radius: calc(var(--touch-target) / 2);
		color: inherit;
		font-size: 1.2rem;
	}

	/* `.util-counter:empty` éteint le compteur à la lecture : la pilule suit sans script. */
	body[data-template~="structure-rail"] .structure-rail .notification-bell:has(.util-counter:not(:empty)) > a.nav-item {
		background-color: var(--primary-ink);
		color: var(--domain);
	}

	body[data-template~="structure-rail"] .structure-rail .notification-bell > a.nav-item > .util-counter {
		position: static;
		margin: 0;
		padding: 0;
		border: none;
		background-color: transparent;
		color: inherit;
		font-size: 1rem;
		font-weight: bold;
	}

}

/* L'encart des relevés de prix dans le menu : une carte cliquable dans son entier, sur
   le fond sombre du menu. Le bouton n'en est pas un — c'est la carte qui porte le
   lien —, il en garde seulement l'allure pour dire où l'on va. */
a.structure-nav-quotation {
	display: block;
	color: var(--text);
	background: linear-gradient(120deg, var(--color-bg-vert-menthe) 0%, var(--color-bg-vert-bleu) 100%);
	transition: transform 0.2s, box-shadow 0.2s;
}

a.structure-nav-quotation:hover {
	text-decoration: none;
	color: var(--text);
	transform: translateY(-2px);
	box-shadow: var(--shadow-v2);
}

.structure-nav-quotation-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
	color: var(--color-brand);
}

.structure-nav-quotation-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-brand);
	color: #fff;
	font-size: 0.8rem;
}

.structure-nav-quotation p {
	margin-bottom: 0.5rem;
	color: var(--text-intermediate);
}

body[data-template~="structure-rail"] {
	--rail-width: 5.25rem;
	--panel-width: calc(var(--nav-width) - var(--rail-width));
	--structure-menu-icon: 1rem;
	--domain: var(--primary);
}

body[data-template~="structure-rail"][data-template~="structure-production"] {
	--domain: var(--production);
}

body[data-template~="structure-rail"][data-template~="structure-commercialisation"] {
	--domain: var(--commercialisation);
}

body[data-template~="structure-rail"][data-template~="structure-accounting"] {
	--domain: var(--accounting);
}

body[data-template~="structure-rail"][data-template~="structure-settings"] {
	--domain: var(--settings);
}

body[data-template~="structure-rail"][data-template~="structure-amap"] {
	--domain: var(--amap);
}

/* ⚠️ Un navigateur sans syntaxe relative de couleur tiendrait la déclaration pour invalide au calcul,
   et `--background-body` vaudrait alors transparent chez tous ses lecteurs. */
@supports (color: hsl(from red h s l)) {

	body[data-template~="structure-rail"]:where([data-template~="structure-production"], [data-template~="structure-commercialisation"], [data-template~="structure-accounting"], [data-template~="structure-settings"], [data-template~="structure-amap"]) {
		--background-body: color-mix(in srgb, hsl(from var(--domain) calc(h + 180) s l) 3%, var(--background-body-neutral));
	}

}

/* ⚠️ Même poids que les règles du pied de `component.css` : les deux suivantes ne l'emportent que
   parce que cette feuille est chargée après elle (`Root.php`, puis `Structure.php`). */
body[data-template~="structure-rail"]:where([data-template~="structure-production"], [data-template~="structure-commercialisation"], [data-template~="structure-accounting"], [data-template~="structure-settings"], [data-template~="structure-amap"]) div.util-footer {
	background-color: color-mix(in srgb, black 5%, var(--background-body));
}

body[data-template~="structure-rail"]:where([data-template~="structure-production"], [data-template~="structure-commercialisation"], [data-template~="structure-accounting"], [data-template~="structure-settings"], [data-template~="structure-amap"]) div.util-footer .util-separator-top {
	color: color-mix(in srgb, black 5%, var(--background-body));
}

.structure-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
	padding: 0.75rem 0;
	background-color: var(--secondary);
	color: white;
}

.structure-rail-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: var(--radius);
	text-decoration: none;
}

.structure-rail .structure-nav-section-icon {
	background-color: rgba(255, 255, 255, 0.14);
}

/* ⚠️ Un élément flex porte `min-width: auto` : sans cette remise à zéro, le bloc du compte prend la
   largeur de son contenu et déborde du rail des deux côtés. */
.structure-rail .nav-account {
	min-width: 0;
	max-width: 100%;
}

.structure-rail .structure-nav-section-label {
	font-size: 0.72rem;
	line-height: 1.1;
	text-align: center;
}

.structure-rail-space {
	flex: 1;
}

.structure-rail-foot {
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
}

.structure-rail-switch,
.structure-rail-create {
	display: none;
}

.structure-rail-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--touch-target);
	height: var(--touch-target);
	border-radius: 50%;
	color: inherit;
	font-size: 1.2rem;
	cursor: pointer;
}

body[data-template~="structure-rail"][data-template~="structure-settings"] .structure-rail-tool.structure-nav-section-settings {
	background-color: color-mix(in srgb, var(--primary-ink) 22%, transparent);
}

.structure-panel {
	display: flex;
	flex-direction: column;
	background-color: var(--background-surface);
	border-right: 1px solid var(--border-light);
	/* `min-height: auto` sur un élément flex empêche le défilement : remis à zéro, le panneau défile
	   au lieu d'allonger la colonne. */
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.structure-panel-scrim {
	display: none;
}

/* `dashboard.css` masque `#structure-nav` sur l'accueil par un sélecteur d'identifiant : une classe
   seule ne le reprend pas. */
body[data-template~="structure"][data-template~="structure-rail"] #structure-nav.structure-panel {
	display: flex;
}

.structure-panel-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	padding: 1rem 1rem 0.75rem 1rem;
	background-color: var(--background-surface);
}

.structure-panel-structure {
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	flex: 1;
	min-width: 0;
}

.structure-panel-structure-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-title);
	font-weight: 700;
}

.structure-panel-structure-switch {
	display: flex;
	align-items: center;
	column-gap: var(--space-xxs);
	min-width: 0;
	color: inherit;
	cursor: pointer;
}

.structure-selector-search {
	padding: var(--space-xxs) var(--space-sm) var(--space-xs);
}

/* `.dropdown-list.dropdown-list-open` (lime.css, 0,2,0) pose sa propre hauteur maximale. */
.dropdown-list.dropdown-list-open.structure-selector {
	width: min(24rem, calc(100vw - 1rem));
	max-height: min(36rem, calc(100vh - 2rem));
	overflow-y: auto;
	padding-bottom: var(--space-xs);
}

.structure-selector-group {
	display: flex;
	align-items: center;
	column-gap: var(--space-xs);
}

.structure-selector-count {
	margin-left: auto;
	color: var(--muted);
}

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

.structure-panel .structure-tabs {
	background-color: transparent;
}

.structure-panel .structure-tab,
.structure-panel .structure-subnav-item {
	color: var(--text);
}

/* ⚠️ `body[data-template^="structure"] header a:hover` (0,2,3) pose une encre blanche, et le panneau
   vit dans `<header>` : sans cette reprise à (0,4,2), une entrée disparaît sur fond blanc au
   survol. */
body[data-template~="structure-rail"] .structure-panel a.structure-tab:hover,
body[data-template~="structure-rail"] .structure-panel a.structure-subnav-item:hover {
	color: var(--text);
	text-decoration: none;
}

body[data-touch="no"][data-template~="structure-rail"] .structure-panel a.structure-tab:hover,
body[data-touch="no"][data-template~="structure-rail"] .structure-panel a.structure-subnav-item:hover,
body[data-touch="no"][data-template~="structure-rail"] .structure-panel a.structure-panel-structure-switch:hover {
	background-color: color-mix(in srgb, var(--domain) 8%, transparent);
}

body[data-template~="structure-rail"] .structure-rail .structure-nav-section:hover,
body[data-template~="structure-rail"] .structure-rail-tool:hover,
body[data-template~="structure-rail"] a.structure-rail-brand:hover {
	color: inherit;
}

/* La même reprise pour le nom de la structure, qui n'est pas une entrée et ne prend pas de fond. */
body[data-template~="structure-rail"] .structure-panel a.structure-panel-structure-switch:hover {
	color: var(--text);
	text-decoration: none;
}

body[data-template~="structure-rail"] .structure-panel a.structure-tab.selected:hover,
body[data-template~="structure-rail"] .structure-panel a.structure-subnav-item.selected:hover,
.structure-panel .structure-tab.selected,
.structure-panel .structure-subnav-item.selected {
	background-color: color-mix(in srgb, var(--domain) 20%, transparent);
	color: var(--domain);
	font-weight: bold;
}

.structure-rail .structure-nav-section-production {
	--domain: var(--production);
}

.structure-rail .structure-nav-section-commercialisation {
	--domain: var(--commercialisation);
}

.structure-rail .structure-nav-section-accounting {
	--domain: var(--accounting);
}

.structure-rail .structure-nav-section-settings {
	--domain: var(--settings);
}

.structure-panel .structure-tabs.structure-section-production {
	--domain: var(--production);
}

.structure-panel .structure-tabs.structure-section-commercialisation {
	--domain: var(--commercialisation);
}

.structure-panel .structure-tabs.structure-section-accounting {
	--domain: var(--accounting);
}

.structure-panel .structure-tabs.structure-section-settings {
	--domain: var(--settings);
}

.structure-panel .structure-tabs.structure-section-amap {
	--domain: var(--amap);
}

body[data-template~="structure-rail"][data-template~="structure-section-production"] #structure-nav {
	--domain: var(--production);
}

body[data-template~="structure-rail"][data-template~="structure-section-commercialisation"] #structure-nav {
	--domain: var(--commercialisation);
}

body[data-template~="structure-rail"][data-template~="structure-section-accounting"] #structure-nav {
	--domain: var(--accounting);
}

body[data-template~="structure-rail"][data-template~="structure-section-settings"] #structure-nav {
	--domain: var(--settings);
}

body[data-template~="structure-rail"][data-template~="structure-section-amap"] #structure-nav {
	--domain: var(--amap);
}

body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-production"] #structure-nav {
	--domain: var(--production);
}

body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-commercialisation"] #structure-nav {
	--domain: var(--commercialisation);
}

body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-accounting"] #structure-nav {
	--domain: var(--accounting);
}

body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-settings"] #structure-nav {
	--domain: var(--settings);
}

body[data-template~="structure-rail"]:not([data-panel="open"])[data-template~="structure-amap"] #structure-nav {
	--domain: var(--amap);
}

.structure-tabs-universe {
	display: none;
}

body[data-template~="structure-rail"] .structure-panel .structure-tab-complement {
	border: none;
	color: var(--domain);
	font-weight: bold;
}

/* ⚠️ La rangée est une rangée flex, qui porte une entrée et son complément côte à côte : sans retour
   à la ligne, le complément sort du panneau par la droite, et l'`overflow-y` du panneau ne reprend
   pas un débordement latéral. */
body[data-template~="structure-rail"] .structure-panel .structure-tab-wrapper {
	flex-wrap: wrap;
}

.structure-rail .structure-nav-section-amap {
	--domain: var(--amap);
}

/* ===== 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/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/font-dm-sans.css ===== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/DMSans-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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/DMSans-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-dm-sans {
	font-family: 'DM Sans', sans-serif;
}

/* ===== framework/util/static/css/form.css ===== */

div.input-group {
	/*position: relative; inutile ?*/
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

div.input-group-sm .form-control,
div.input-group-sm .input-group-addon {
	line-height: 1.2 !important;
}

div.input-group-lg .form-control,
div.input-group-lg .input-group-addon {
	line-height: 2 !important;
}

div.form-control-field div.input-group {
	width: 100%;
}

div.form-control-field h3 {
	margin-bottom: .5rem;
}

div.input-group > * {
	border-radius: 0;
}

div.input-group > *:first-child,
div.input-group > .first-child {
	border-top-left-radius: var(--radius) !important;
	border-bottom-left-radius: var(--radius) !important;
}

div.input-group > *:last-child {
	border-top-right-radius: var(--radius) !important;
	border-bottom-right-radius: var(--radius) !important;
}

div.input-group > *:not(:first-child) {
	margin-left: -1px;
}

div.input-group > .form-control {
	flex: 1;
	min-width: 0;
}

div.input-group > .btn:hover {
	z-index: 1;
}

div.input-group > .form-control:focus {
	z-index: 2;
}

div.input-group > input:placeholder-shown + .input-group-clear,
div.input-group > select:has(> option[value=""]:checked) + .input-group-clear {
	display: none;
}

div.input-group > input:placeholder-shown:has(+ .input-group-clear:last-child),
div.input-group > select:has(> option[value=""]:checked):has(+ .input-group-clear:last-child) {
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

div.input-group > .input-group-element,
div.input-group > .input-group-addon,
div.input-group > .field-checkbox {
	padding: 0.375rem 0.5rem;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.5;
}

div.input-group > .input-group-element,
div.input-group > .field-checkbox {
	display: flex;
	align-items: center;
}

div.input-group > .field-checkbox {
	gap: 0;
}

div.input-group > .input-group-addon,
div.input-group > .field-checkbox {
	color: var(--text);
	text-align: center;
	white-space: nowrap;
	background-color: var(--background);
	border: 1px solid #0002;
}

div.input-group > .input-group-addon.input-group-addon-for-input {
	background-color: white;
	border-left: 0;
}

@media (max-width: 575px) {

	div.input-group > .input-group-addon,
	div.input-group > .field-checkbox {
		padding: 0.375rem 0.5rem;
		font-size: 0.9rem;
	}

}

.form-calculation {
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--text);
	background-color: var(--background);
	background-clip: padding-box;
	border: 1px solid #0002;
	appearance: none;
	vertical-align: middle;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.form-control,
.form-control-block {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--text);
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #0002;
	appearance: none;
	vertical-align: middle;
	border-radius: var(--radius);
	transition: border-color 0.25s, box-shadow 0.25s;
}

.form-control-xl {
	line-height: 2.5;
}

.form-control-lg {
	line-height: 2;
}

.form-control-block {
	padding: 1rem;
}

.form-control:focus {
	color: var(--text);
	background-color: #fff;
	border-color: #0005;
	outline: 0;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.form-control.disabled,
.form-control[disabled],
.form-control:disabled {
	pointer-events: none;
	background-color: #CCC2;
}

.form-control.disabled:not(select),
.form-control[disabled]:not(select),
.form-control:disabled:not(select) {
	color: #000B;
}

select.form-control {
	padding-right: 1.75rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

textarea.form-control {
	height: 10em;
}

.form-control[type="color"] {
	padding: 0.25rem;
}


fieldset {
	border-radius: var(--radius);
	border-width: 0;
	padding-block: 0.25em 0.5em;
	padding-inline: 0rem;
}

fieldset legend {
	padding: 0.125rem 0.5rem;
	border-radius: calc(var(--radius) / 2);
	font-weight: bold;
	font-size: 0.9rem;
	text-transform: uppercase;
}

/* Un groupe de champs encadré : plusieurs champs qui forment une notion dans un formulaire plus
   large. La légende est sortie du flux par le navigateur, qui la pose à cheval sur la bordure :
   `float` la remet dans le flux, au-dessus des champs, et le `clear` rend sa ligne au premier
   d'entre eux. */
fieldset.form-fieldset {
	border: 1px solid var(--border);
	padding: 0.75rem 1rem 0.25rem;
	margin-block: 0.5rem 1rem;
}

fieldset.form-fieldset > legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 0.25rem;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--color-neutral);
}

fieldset.form-fieldset > legend + * {
	clear: both;
}

input[type="number"] {
	width: 5rem;
}

input[type="file"] {
	display: none;
}

input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	height: 0.75rem;
	margin-top: 0.375rem;
	margin-bottom: 0.375rem;
	padding: 0;
	border: 1px solid var(--primary);
	border-radius: 5px;
	background: white;
	outline: none;
	opacity: 0.8;
	transition: opacity .5s;
}

input[type="range"]:hover {
	opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--primary);
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
	background: var(--primary);
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
}

.form-warning [type="submit"] {
	box-shadow: 0 0 15px var(--warning);
}

[data-wrapper].form-warning-wrapper > label.form-control-label {
	color: var(--warning) !important;
	font-weight: bold;
}

[data-wrapper].form-warning-wrapper input {
	color: var(--warning);
}

[data-wrapper].form-warning-wrapper [data-wrapper].form-warning-wrapper input {
	color: var(--warning);
}

.form-columns [data-wrapper].form-warning-wrapper > label.form-control-label {
	padding-right: 0.25rem;
	border-right: 2px solid var(--warning);
}

.form-warning-message {
	font-size: 0.875rem;
	color: var(--warning) !important;
	font-weight: normal !important;
	border-radius: var(--radius);
	margin: 0.25rem 0.25rem 0 0;
	line-height: 1.3;
}

.form-warning-field div.input-group label.btn,
.form-warning-field div.btn,
.form-warning-field .input-group label,
.form-warning-field input,
.form-warning-field textarea,
.form-warning-field .form-warning-field-component,
.form-warning-field,
.form-warning-field select {
	border-color: var(--warning) !important;
}
.form-warning-field input[type="radio"] {
	outline: 1px solid var(--warning) !important;
}
.form-warning-field input[type="text"],
.form-warning-field input[type="time"],
.form-warning-field input[type="date"],
.form-warning-field input[type="email"],
.form-warning-field input[type="url"] {
	background: linear-gradient(to right, rgba(194, 120, 10, 0.2) 0, transparent 3rem);
	background-color: white;
}

.form-error-field .input-group-addon {
	color: var(--warning);
}

.form-error [type="submit"] {
	box-shadow: 0 0 15px var(--danger);
}

[data-wrapper].form-error-wrapper > label.form-control-label {
	color: var(--danger) !important;
	font-weight: bold;
}

[data-wrapper].form-error-wrapper select,
[data-wrapper].form-error-wrapper input {
	color: var(--danger);
	border-color: var(--danger);
}

[data-wrapper].form-warning-wrapper [data-wrapper]  input,
[data-wrapper].form-error-wrapper [data-wrapper]  input {
	color: inherit;
}

[data-wrapper].form-error-wrapper [data-wrapper].form-error-wrapper input {
	color: var(--danger);
}

.form-columns [data-wrapper].form-error-wrapper > label.form-control-label {
	padding-right: 0.25rem;
	border-right: 2px solid var(--danger);
}

.form-error-message {
	font-size: 0.875rem;
	color: var(--danger) !important;
	font-weight: normal !important;
	border-radius: var(--radius);
	margin: 0.25rem 0.25rem 0 0;
	line-height: 1.3;
}

.form-error-field div.input-group label.btn,
.form-error-field div.btn,
.form-error-field .input-group label,
.form-error-field input,
.form-error-field textarea,
.form-error-field .form-error-field-component,
.form-error-field,
.form-error-field select {
	border-color: var(--danger) !important;
}
.form-error-field input[type="radio"] {
	outline: 1px solid var(--danger) !important;
}
.form-error-field input[type="text"],
.form-error-field input[type="time"],
.form-error-field input[type="date"],
.form-error-field input[type="email"],
.form-error-field input[type="url"] {
	background: linear-gradient(to right, rgba(217, 83, 111, 0.2) 0, transparent 3rem);
	background-color: white;
}
.form-error-field .input-group-addon {
	color: rgb(217, 83, 111);
}

.form-character-count-wrapper {
	display: flex;
}

.form-character-count-wrapper.for-textarea {
	flex-direction: column;
}

.form-character-count {
	color: var(--muted);
	display: none;
	align-items: center;
	font-size: 0.9rem;
}

.form-character-count-wrapper.for-input input {
	padding-right: 3rem;
}

.for-input .form-character-count {
	margin-left: -2.5rem;
	width: 2.5rem;
	justify-content: center;
	border-left: 1px solid;
}

.for-textarea .form-character-count {
	justify-content: flex-end;
	padding-top: 0.25rem;
}

.form-character-count.error,
.form-character-count.error.focus {
	border-color: var(--danger);
}

.form-character-count.error {
	color: var(--danger);
}

.form-info {
	font-size: .9rem;
	font-weight: normal;
	color: var(--muted);
	margin-top: .25rem;
}

.field-action {
	font-size: .9rem;
	padding: 0.25rem 0;
}

.util-quick-form .field-action a {
	color: white;
}

.field-action.columns-2 {
	display: flex;
	justify-content: space-between;
}

.form-control + .form-info,
.form-info-ancestor + .form-info,
.editor + .form-info,
.editor + script + .form-info,
.input-group + .form-info {
	margin-top: 0;
	padding: 0.25rem 0.5rem;
	border-left: 2px solid var(--border);
	margin-left: 1rem;
}

.form-info a {
	text-decoration: underline;
	color: var(--muted);
}

.form-info > :last-child {
	margin-bottom: 0;
}

input.form-color {
	max-width: 6rem;
}

div.form-range {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: .5rem;
	align-items: center;
	width: 100%;
}

div.form-postcode-city {
	display: grid;
	grid-template-columns: 10rem 1fr;
	column-gap: 1rem;
}


@media (min-width: 767px) {

	div.form-e-invoicing-identifier-address {
		display: grid;
		grid-template-columns: auto 8rem 1fr;
		align-items: center;
		column-gap: 1rem;
	}

}
.form-dropdown-toggle:hover {
	text-decoration: none;
}

.form-dropdown-title {
	display: flex;
	column-gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
}

.form-dropdown-list {
	background: white !important;
	border: 1px solid #0002;
	border-radius: var(--radius);
}

.form-dropdown-list input {
	display: none;
}

.form-dropdown-list .dropdown-item {
	color: var(--text);
}

.form-dropdown-list .dropdown-item.selected {
	background-color: var(--background) !important;
}

.form-dropdown-list .dropdown-item:hover {
	background-color: var(--secondary) !important;
	color: white;
	cursor: pointer;
}

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

.form-dropdown-placeholder {
	color: var(--border);
}

div.form-asterisk {
	display: inline-block;
	font-size: 0.8em;
	transform: translate(0, -0.5em);
	margin-left: 0.25rem;
}

div.form-asterisk svg {
	color: var(--secondary-on-light, var(--secondary));
}

div.form-asterisk-info {
	margin-bottom: 1rem;
	font-size: 0.9rem;
	color: var(--muted);
	width: max-content;
	background-color: #0000000a;
	border-radius: var(--radius);
	padding: 0.25rem 0.75rem;
}

/* Form fieldset */
@media (min-width: 576px) {

	div.form-fieldsets {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
	}

}

@media (max-width: 575px) {

	div.form-fieldsets {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: 1fr;
	}

}

/* Form group */
div.form-group {
	padding: 0.5rem 0;
}

/* ⚠️ Le libellé au-dessus du champ n'était séparé de lui par rien : `label` vaut
   `margin-bottom: 0` (`reboot.css:296`) et `FormUi::group()` n'écrit qu'une espace entre les deux
   quand le formulaire est sur une colonne. La valeur reprend la gouttière que la forme à deux
   colonnes pose déjà entre eux, à l'horizontale.

   Annulée juste après pour cette forme-là : le libellé y est **à côté** du champ, dans une grille
   qui tient l'écart, et une marge basse l'y décalerait de sa ligne. */
div.form-group > label.form-control-label {
	margin-bottom: 0.25rem;
}

.form-columns div.form-group > .form-control-label {
	margin-bottom: 0;
}

.form-columns div.form-group:not(.form-group-nested) {
	display: grid;
	grid-column-gap: 1rem;
}

div.form-group-highlight {
	background-color: var(--background);
	padding: 1rem;
	border-radius: var(--radius);
}

div.form-group-highlight.bg-primary,
div.form-group-highlight.bg-secondary {
	color: white;
}

div.form-group-highlight .form-control-label {
	font-weight: bold;
}

.form-columns div.form-group.form-group-highlight {
	align-items: center;
}

.form-columns-25 div.form-group {
	grid-template-columns: 1fr 3fr;
}

.form-columns-33 div.form-group {
	grid-template-columns: 1fr 2fr;
}

.form-columns-40 div.form-group {
	grid-template-columns: 2fr 3fr;
}

.form-columns-50 div.form-group {
	grid-template-columns: 1fr 1fr;
}

div.form-group.form-group-nested > .form-control-label {
	margin-bottom: 0.125rem;
	color: var(--muted);
	font-size: 0.9rem;
}

/* Un élément de grille garde min-width: auto, donc la largeur de son contenu : sans min-width: 0, un cadre défilant qu'il contient ne défile jamais */
@media (max-width: 991px) {

	.form-columns-md div.form-group:not(.form-group-nested) {
		grid-template-columns: 1fr !important;
	}

	.form-columns-md div.form-group:not(.form-group-nested) > * {
		min-width: 0;
	}

	.form-columns-md div.form-group:not(.form-group-nested) > .form-control-label {
		margin: 0.5rem 0;
		font-weight: bold;
	}

}

@media (max-width: 767px) {

	.form-columns-sm div.form-group:not(.form-group-nested) {
		grid-template-columns: 1fr !important;
	}

	.form-columns-sm div.form-group:not(.form-group-nested) > * {
		min-width: 0;
	}

	.form-columns-sm div.form-group:not(.form-group-nested) > .form-control-label {
		margin: 0.5rem 0;
		font-weight: bold;
	}

}

@media (max-width: 575px) {

	.form-columns-xs div.form-group:not(.form-group-nested) {
		grid-template-columns: 1fr !important;
	}

	.form-columns-xs div.form-group:not(.form-group-nested) > * {
		min-width: 0;
	}

	.form-columns-xs div.form-group:not(.form-group-nested) > .form-control-label:not(:empty) {
		margin: 0.5rem 0;
		font-weight: bold;
	}

	.form-columns-xs div.form-group:not(.form-group-nested) > .form-control-label:empty {
		display: none;
	}

}

.form-buttons {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: .5rem;
	align-items: center;
}

/* La case et son libellé sont deux blocs côte à côte, et non un flux inline. En inline, la seconde
   ligne d'un libellé long revenait sous la case au lieu de rester en retrait : mesuré sur les
   paramètres d'un groupe, 42 px de haut pour un libellé de deux lignes dont la seconde décalée à
   gauche sous la case.

   ⚠️ Dans un `input-group` la case est seule et déjà posée en flex centré, avec une spécificité
   supérieure : ces règles-là continuent de gagner et rien n'y bouge.

   ⚠️ Si la règle manquait depuis si longtemps, c'est que ce champ est presque inemployé : balayage
   de quatorze écrans du produit le 2026-09-07, aucun `label.field-checkbox` en dehors du
   paramétrage d'un groupe. Les cases multiples passent par `checkboxes()`, qui rend une autre
   classe (`field-radio-group-item`), et aucun appelant n'invoque `checkbox()` en direct. */
.field-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
}

.field-checkbox > input {
	flex: 0 0 auto;
	margin-top: 0.1875rem;
}

.field-checkbox-label {
	padding: 0 0.75rem;
	margin: 0;
	min-height: 3rem;
	height: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* Radio group */
.field-radio-group {
	display: grid;
	border: 1px solid #0002;
	border-radius: var(--radius);
	background-color: white;
	line-height: 1.4;
	padding: 0.5rem;
}

.field-radio-group-2 {
	grid-template-columns: repeat(2, 1fr);
}

.field-radio-group-3 {
	grid-template-columns: repeat(3, 1fr);
}

.field-radio-group-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 575px) {

	.field-radio-group-3,
	.field-radio-group-4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

.field-radio-group-item {
	padding: 0.5rem;
	cursor: pointer;
	transition: background-color 0.5s;
}

.field-radio-group.field-radio-group-1 > .field-radio-group-item:not(:last-child) {
	border-bottom: 1px dashed var(--border);
}

.field-radio-group-item:hover {
	background-color: #ccc2;
}

.field-radio-group-item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.5rem;
	align-items: baseline;
}

.field-radio-group-item h4 {
	font-size: 1.2rem;
}

.field-radio-group-item > input[type="radio"] {
	transform: translate(0, 1px);
}

.field-radio-group-item:has( > input[type="radio"]:checked:not(:disabled)):not(:has(h4)) {
	font-weight: bold;
}

.field-radio-group-item:has( > input[type="radio"]:checked:not(:disabled)):has(h4) h4 {
	font-weight: bold;
}

.field-radio-group-item > input:disabled,
.field-radio-group-item > input:disabled + span {
	opacity: 0.5;
}

/* La règle ci-dessus ne vise qu'un <span> frère du bouton, que radios() ne rend jamais : il rend un
   <div>. L'atténuation ne porte donc que sur le libellé, et le bloc reste à pleine intensité — sans
   quoi la raison hériterait du cumul et deviendrait le texte le moins lisible de l'écran. Même
   mise en œuvre que l'entrée de menu désactivée qui porte sa raison, component.css .dropdown-item.
   Le sélecteur ne vise que les options qui portent une raison : les autres gardent le rendu qu'elles
   ont aujourd'hui. */
.field-radio-group-item > input:disabled ~ div:has(.field-radio-group-reason) .field-radio-group-label {
	opacity: 0.5;
}

.field-radio-group-reason {
	margin-top: 0.25rem;
	font-size: 90%;
	font-weight: normal;
	color: var(--muted);
}

.field-radio-group-action {
	grid-column: 1 / -1;
	padding: 0.25rem 0.5rem;
	font-size: 0.9rem;
	text-align: right;
}

.field-radio-select {
	color: var(--primary);
}

.field-radio-separator {
	color: var(--muted);
}

/* Switch */
.field-switch {
	border-radius: calc(var(--radius) * 2);
	transition: all 0.5s;
	display: inline-block;
	vertical-align: middle;
	font-size: 0.9rem;
}

.field-switch.field-switch-sm {
	font-size: 0.8rem;
}

.field-switch {
	/* La hauteur d'un .btn (1rem de texte, 0.5rem de marge de chaque côté, 1px de bordure), pour s'aligner sur les boutons voisins */
	height: calc(2rem + 2px);
	width: 4rem;
	min-width: max-content;
	border: 1px solid white;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.field-switch.field-switch-sm {
	height: 1.5rem;
	width: 2.4rem;
}

.field-switch.disabled {
	/* Un switch désactivé garde la forme d'un interrupteur et ne se distingue que par son retrait :
	   réduit à une pastille, il ne se lisait plus comme un état on/off. Le pointeur reste vivant,
	   sans quoi le `title` qui dit pourquoi c'est verrouillé ne s'afficherait jamais ; c'est
	   `TextUi::switch()` qui retire les attributs d'action, le curseur ne suffirait pas. */
	cursor: default;
	opacity: 0.5;
}

.field-switch.disabled:hover {
	box-shadow: none;
}

.field-switch:hover {
	box-shadow: 0 0 0.5rem var(--border);
	text-decoration: none !important;
}

.field-switch input {
	display: none;
}

.field-switch-on {
	background-color: var(--success);
}

.field-switch-off {
	background-color: var(--muted);
}

.field-switch .field-switch-text {
	padding: 0 0.5rem;
}

.field-switch-on .field-switch-text {
	margin-right: 1.3rem;
}

.field-switch-on.field-switch-sm .field-switch-text {
	margin-right: 0.9rem;
}

.field-switch-off .field-switch-text {
	margin-left: 1.3rem;
}

.field-switch-off.field-switch-sm .field-switch-text {
	margin-left: 0.9rem;
}

.field-switch-off .field-switch-text {
	transform: translate(0, -2rem);
}

.field-switch-off.field-switch-sm .field-switch-text {
	transform: translate(0, calc(-1.5rem + 2px));
}

.field-switch .field-switch-text > div {
	height: 2rem;
	display: flex;
	align-items: center;
	line-height: 1;
	color: white;
}

.field-switch.field-switch-sm .field-switch-text > div {
	height: calc(1.5rem - 2px);
}

.field-switch-text > div:last-child {
	padding-right: 0.3rem;
}

.field-switch-circle {
	height: calc(1.2rem - 2px);
	width: calc(1.2rem - 2px);
	border-radius: 50%;
	background-color: white;
	position: absolute;
	transition: left 0.25s;
	margin: calc(0.4rem + 1px) 0;
}

.field-switch-sm .field-switch-circle {
	height: calc(0.9rem - 2px);
	width: calc(0.9rem - 2px);
	margin: 0.4rem 0;
}

.field-switch-on .field-switch-circle {
	left: calc(100% - 1.3rem + 2px - 0.3rem);
}

.field-switch-on.field-switch-sm .field-switch-circle {
	left: calc(100% - 0.8rem + 2px - 0.3rem);
}

.field-switch-off .field-switch-circle {
	left: 0.4rem;
}

/* Weeks */
div.input-group > .input-group-addon.field-week-preview {
	border-left: 0;
	background-color: white;
	text-align: right;
	min-width: 75px;
	font-size: 0.9rem;
	user-select: none;
}

div.input-group > .input-group-addon.field-week-preview:empty {
	display: none;
}

div.input-group > input:disabled + .input-group-addon.field-week-preview {
	color: var(--muted);
	background-color: var(--background-light);
}

.field-week-selector {
	width: calc(100vw - 2rem);
	max-width: 300px;
	background: linear-gradient(to bottom, var(--background) 0%, #fff 50%, #fff 100%);
	border-radius: var(--radius);
	padding: 1rem;
	user-select: none;
}

.field-week-selector-title h4 {
	text-align: center;
	margin-bottom: 0;
}

.field-week-selector-year {
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	margin-bottom: 1rem;
}

.field-week-selector-year a.field-week-selector-navigation {
	font-size: 1.2rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: font-size 0.25s;
}

.field-week-selector-year a.field-week-selector-navigation:hover {
	font-size: 1.7rem;
}

.field-week-selector-year h4 {
	text-align: center;
	font-weight: bold;
	margin: 0;
}

.field-week-selector-weeks {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.25rem;
	grid-row-gap: 0.25rem;
	align-items: center;
	overflow: hidden;
}

.field-week-selector-ticks {
	display: grid;
	grid-template-columns: repeat(38, 1fr);
	position: relative;
	text-align: center;
}

.field-week-selector-ticks > .field-week-selector-label {
	line-height: 1;
	padding-bottom: 1rem;
	font-size: 0.9rem;
}

.field-week-selector-ticks > .field-week-selector-tick {
	justify-content: center;
	border-right: 1px solid #0002;
	position: absolute;
	top: 1.5rem;
	height: 1000px;
}

.field-week-selector-month {
	font-weight: bold;
	line-height: 1.2;
	text-transform: capitalize;
	text-align: center;
	border-radius: var(--radius);
}

a.field-week-selector-month {
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--text);
	text-decoration: none;
	padding: 0.5rem 0.75rem;
}

a.field-week-selector-month:hover {
	background-color: var(--primary);
	color: white;
}

.field-week-selector-bubbles {
	display: grid;
	grid-template-columns: repeat(38, 1fr);
	position: relative;
}

.field-week-selector-bubble {
	text-align: center;
	margin: 0 1px;
}

.field-week-selector-bubble.btn.btn-sm {
	padding-left: 0;
	padding-right: 0;
}

.field-week-selector-bubble-current {
	background-color: white;
	font-weight: bold;
}

/* Month */
.field-month-native {
	display: block;
}

.field-month-fallback {
	display: flex;
}

/* Color field */
.field-color {
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-column-gap: 1rem;
	align-items: center;
}
.field-color input[type="color"] {
	width: 5rem;
	height: 3rem;
}
.field-color label {
	color: var(--muted);
	transition: color 0.5s;
}
.field-color label:hover {
	color: inherit;
}

/* Autocomplete features */
body.autocomplete-fullscreen-open {
	overflow: hidden;
	width: 100vw;
}

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


.autocomplete-placeholder {
	display: none;
}

body[data-touch="yes"] .autocomplete-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
}

body[data-touch="no"] .autocomplete-dropdown {
	position: absolute;
}

body[data-touch="no"] .autocomplete-dropdown.autocomplete-dropdown-textual:has(.autocomplete-list-empty) {
	display: none;
}

body[data-touch="no"] .autocomplete-dropdown:empty {
	display: none;
}

/* L'apparence de la liste est commune avec l'omnibox, dans ouvretaferme/main/static/css/component.css. */
ul.autocomplete-list {
	position: absolute;
	list-style: none;
	margin: 0;
}

body[data-touch="yes"] ul.autocomplete-list {
	max-height: 80vh;
}

ul.autocomplete-list li {
	font-weight: normal;
	text-decoration: none;
}

body[data-touch="yes"] ul.autocomplete-list li:last-child {
	padding-bottom: 60vh;
}

ul.autocomplete-list li a {
	color: white;
	display: flex;
	align-items: center;
	width: 100%;
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	margin: -0.5rem -0.75rem;
}

ul.autocomplete-list li.autocomplete-not-selectable {
	background-color: #444;
	cursor: auto;
}
ul.autocomplete-list li.autocomplete-not-selectable.disabled {
	background-color: transparent;
	color: #888;
	cursor: default;
}
/* !important pour battre ul.autocomplete-list .color-muted, qui en porte un */
ul.autocomplete-list li.autocomplete-not-selectable.disabled .color-muted {
	color: inherit !important;
}
ul.autocomplete-list li.autocomplete-link {
	background-color: #444;
	cursor: pointer;
}

ul.autocomplete-list li.autocomplete-link svg {
	font-size: 1.5rem;
	margin: 0.5rem;
}

ul.autocomplete-list li.autocomplete-list-empty {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-style: italic;
	color: #bbb !important;
}

ul.autocomplete-list .color-muted {
	color: #bbb !important;
}

.autocomplete-dropdown div.autocomplete-place > div:first-child {
	margin-bottom: 0.25rem;
}

.autocomplete-dropdown div.autocomplete-place > div:last-child {
	font-size: 0.85rem;
	color: #ddd;
}

/* Form field */
body[data-touch="yes"] input.autocomplete-open {
	font-size: 1.2rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	width: 80vw;
	margin: 2rem auto 0;
}

a.autocomplete-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
}

input[data-autocomplete-items] {
	border-right: 0;
}

input[data-autocomplete-items]:placeholder-shown + a.autocomplete-empty:not(:focus) {
	background-color: white;
	border-top: 1px solid #0002;
	border-right: 1px solid #0002;
	border-bottom: 1px solid #0002;
	pointer-events: none;
}

/* Results */
.autocomplete-items:empty {
	display: none;
}

.autocomplete-items-multiple:not(:empty) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0.5rem 0;
}

.autocomplete-items-multiple .autocomplete-item {
	display: flex;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--radius) / 2);
	background-color: #00000008;
	font-weight: bold;
	line-height: 1.4;
}

.autocomplete-items-multiple .autocomplete-item-actions {
	display: flex;
	column-gap: 0.5rem;
}

.autocomplete-items.autocomplete-items-multiple.autocomplete-items-reorder .autocomplete-item {
	width: 100%;
}

.autocomplete-items:not(.autocomplete-items-reorder) .autocomplete-reorder-up,
.autocomplete-items:not(.autocomplete-items-reorder) .autocomplete-reorder-down {
	display: none;
}

.autocomplete-items-multiple .autocomplete-item:first-child .autocomplete-reorder-up {
	visibility: hidden;
}

.autocomplete-items-multiple .autocomplete-item:last-child .autocomplete-reorder-down {
	visibility: hidden;
}

@media (max-width: 575px) {

	.autocomplete-items-multiple .autocomplete-item {
		width: 100%;
		line-height: 1.3;
		justify-content: space-between;
	}

}

.form-password-toggle[data-visible="0"] .form-password-visible {
	display: none;
}

.form-password-toggle[data-visible="1"] .form-password-hidden {
	display: none;
}

.autocomplete-hint {
	font-style: italic;
	font-weight: normal;
	opacity: 0.75;
	white-space: normal;
}

/* ===== ouvretaferme/main/static/css/onboarding.css ===== */
.onboarding {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 3rem;
}

.onboarding-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.onboarding-header-text {
	margin: 0;
	color: var(--text-intermediate);
	max-width: 46rem;
}

.onboarding-header-skip {
	font-size: 0.9rem;
	color: var(--muted);
	white-space: nowrap;
}

.onboarding-panel {
	display: grid;
	grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
	padding: 0;
	overflow: hidden;
	min-height: 40rem;
}

/* Un parcours n'a pas toujours quelque chose à montrer à côté des questions : une étape qui ne
   construit rien de visible n'a pas d'aperçu, et la colonne de droite n'a plus de raison d'être.

   Elle disparaît donc au lieu de rester à moitié vide, et les questions prennent tout le panneau,
   qui se borne à 60 rem et se centre : une colonne bornée dans un panneau qui suit la page laissait
   un bloc blanc d'autant plus vide que l'écran est large (« faut consommer plus d'espace », Vincent,
   2026-09-26), et au-delà de cette largeur une ligne de formulaire devient trop longue pour se relire.

   `min-height` retombe à `auto` : les 40 rem tenaient la colonne de droite, qui n'est plus là. */
.onboarding-panel-plain {
	grid-template-columns: minmax(0, 1fr);
	min-height: auto;
}

/* Le panneau sans aperçu, le panneau à barre en tête et ce qui se pose au-dessus d'eux, un résultat ou
   ce qu'une réponse écrira, partagent une borne pour s'aligner bord à bord.

   `width` est nécessaire avec la marge automatique : sur un enfant étiré d'un conteneur flex en
   colonne, une marge horizontale `auto` annule l'étirement et le bloc se réduit à son contenu.
   Mesuré à 1199 px, sans elle, 403 px au lieu des 780 px disponibles. */
.onboarding-panel-plain,
.onboarding-panel-progress-top,
.onboarding-bound {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
}

/* La barre des marches appartient au parcours entier, pas à la colonne des questions : posée en enfant
   direct du panneau, elle prend sa largeur et non celle de la colonne de gauche, qui fait 416 px quand
   le panneau en fait 780 (mesuré à 1199 px sur le tunnel de contrat, dont les noms d'étapes s'y
   repliaient sur deux lignes). Le panneau se borne alors comme `onboarding-panel-plain`, pour que les
   étapes avec et sans aperçu montrent la même barre à la même largeur.

   Le padding de la barre est celui que `.onboarding-steps` lui donnait, moins le bas, et la colonne
   des questions descend son propre haut au `gap` de cette colonne : sinon les deux paddings verticaux
   s'additionnent sous la barre, là où elle n'était séparée de la première question que par ce `gap`.

   Les deux rangs sont déclarés parce que le panneau porte un `min-height` de 40 rem : sans eux, les
   rangs implicites se partagent la hauteur restante à parts égales et la barre se retrouve au milieu
   d'un rang de 220 px dès que l'étape est courte (mesuré le 28/09 sur la démonstration de la page
   design system). Le premier rang prend la hauteur de la barre, le second tout le reste. */
.onboarding-panel-progress-top {
	grid-template-rows: auto 1fr;
}

.onboarding-panel-progress-top > .onboarding-progress {
	grid-column: 1 / -1;
	padding: 2rem 2.25rem 0;
}

.onboarding-panel-progress-top > .onboarding-steps {
	padding-top: 1.25rem;
}

.onboarding-panel-plain .onboarding-steps {
	border-right: 0;
}

.onboarding-steps {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 2rem 2.25rem;
	border-right: 1px solid var(--border-light);
}

.onboarding-progress {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.onboarding-stepper {
	display: flex;
	gap: 0.5rem;
}

.onboarding-stepper span {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--background-dark);
	transition: background-color 0.3s;
}

.onboarding-stepper span.is-done {
	background: color-mix(in srgb, var(--secondary) 45%, white);
}

.onboarding-stepper span.is-current {
	background: var(--secondary);
}

.onboarding-progress-label {
	font-size: 0.9rem;
	color: var(--muted);
}

.onboarding-progress-label b {
	color: var(--text);
}

.onboarding-progress-names {
	display: flex;
	gap: 0.5rem;
}

/* Les noms des étapes faites sont la façon de reculer : sans curseur ni survol, rien ne le dit et
   le parcours paraît n'avoir plus aucun retour depuis que le bouton est parti.

   L'état vient de la classe et le sélecteur ne nomme aucune balise : une marche faite est un lien
   quand les marches du parcours sont des adresses distinctes, un nom nu quand on y recule par un
   script, et les deux formes se dessinent pareil. */
.onboarding-progress-names > * {
	flex: 1;
	min-width: 0;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s;
}

.onboarding-progress-names > .is-done {
	color: var(--secondary-on-light, var(--secondary));
	cursor: pointer;
}

.onboarding-progress-names > .is-skipped {
	cursor: pointer;
}

.onboarding-progress-names > :is(.is-done, .is-skipped):hover {
	color: var(--primary-on-light, var(--primary));
}

.onboarding-progress-names > .is-current {
	color: var(--text);
	font-weight: bold;
}

.onboarding-step {
	display: none;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
}

.onboarding-step.is-current {
	display: flex;
}

.onboarding-step h2 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

.onboarding-step > .util-welcome + * {
	margin-top: -1.25rem;
}

/* Un util-welcome en tête de parcours : sa marque de fin de 2 rem s'ajouterait à la
   gouttière de 1 rem du parcours, et l'accueil flotterait au-dessus du panneau. Même
   collision que dans une étape, même arbitrage — c'est la marque qui cède. */
.onboarding > .util-welcome {
	margin-bottom: 0;
}

.onboarding-help {
	margin: -0.75rem 0 0;
	color: var(--text-intermediate);
	font-size: 0.95rem;
}

.onboarding-note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--muted);
}

.onboarding-tiles .field-radio-group {
	border: 0;
	padding: 0;
	background: transparent;
	gap: 1rem;
}

.onboarding-tiles .field-radio-group-item {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 1rem;
	padding: 1rem;
	border: 1.5px solid var(--border);
	border-radius: var(--radius);
	background: white;
	transition: border-color 0.2s, background-color 0.2s;
}

.onboarding-tiles .field-radio-group.field-radio-group-1 > .field-radio-group-item:not(:last-child) {
	border-bottom-style: solid;
	border-bottom-width: 1.5px;
}

.onboarding-tiles .field-radio-group-item:hover {
	background: var(--background-light);
}

.onboarding-tiles .field-radio-group > .field-radio-group-item:has(> input:checked) {
	background: color-mix(in srgb, var(--secondary) 10%, white);
}

.onboarding-tiles .field-radio-group-item > input[type="radio"],
.onboarding-tiles .field-radio-group-item > input[type="checkbox"] {
	accent-color: var(--secondary);
	width: 1.25rem;
	height: 1.25rem;
	margin-top: calc((1.4rem - 1.25rem) / 2);
	/* form.css décale le radio de 1 px pour l'aligner sur la ligne de base ; ici il est centré sur la première ligne du titre */
	transform: none;
}

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

.onboarding-tile-title {
	font-weight: bold;
}

.onboarding-tile-desc {
	font-size: 0.9rem;
	color: var(--muted);
	font-weight: normal;
	line-height: 1.45;
}

/* Le texte d'une tuile est un enfant flex, donc large comme sa plus longue ligne : sans cette
   règle, les champs d'une tuile prennent la largeur de sa description. */
.onboarding-tile-text:has(> .onboarding-tile-fields) {
	flex: 1;
	min-width: 0;
}

/* Les champs vivent dans la colonne du texte et reculent de la case (1.25rem) et de la gouttière
   (1rem) pour occuper la tuile entière. */
.onboarding-tile-fields {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.75rem;
	margin-left: -2.25rem;
}

.onboarding-tile-fields .form-group {
	margin: 0;
}

.onboarding-tile-more {
	border-top: 1px solid var(--border);
	margin-top: 0.75rem;
	padding-top: 0.75rem;
}

.onboarding-tile-more-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.onboarding-tile-more-head b {
	font-size: 0.9rem;
}

.onboarding-tile-add {
	margin-top: 0.75rem;
}

.onboarding-tiles .field-radio-group-item:not(:has(> input:checked)) .onboarding-tile-fields {
	display: none;
}

.onboarding-tiles .field-radio-group-item:has(.onboarding-tile-fields):has(> input:checked) {
	align-items: start;
}

/* Une adresse d'invitation fait une centaine de caractères sans un seul espace : sans cette
   règle elle ne se coupe nulle part et sort de la colonne, qui ne fait que 27 rem. `anywhere`
   plutôt que `break-word` parce qu'il autorise la coupure même là où le mot pourrait tenir seul
   sur la ligne suivante, ce qui est le cas d'une URL entière. */
.onboarding-link > .form-control {
	overflow-wrap: anywhere;
}

.onboarding-rows {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.onboarding-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	box-shadow: none;
}

.onboarding-row:has(.form-error-wrapper) {
	border-color: var(--danger);
}

.onboarding-row-main {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.onboarding-field-name {
	flex: 1;
	min-width: 0;
}

.onboarding-row-details {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.onboarding-row-details .onboarding-field {
	flex: 1;
	min-width: 11rem;
}

.onboarding-row-details .input-group {
	flex-wrap: nowrap;
}

.onboarding-row-details input {
	min-width: 3.5rem;
}

.onboarding-field .form-error-message {
	font-size: 0.9rem;
	color: var(--danger);
	margin: 0.25rem 0 0;
}

.onboarding-row-remove {
	color: var(--muted);
	padding: 0.25rem;
	line-height: 1;
	cursor: pointer;
}

.onboarding-row-remove:hover {
	color: var(--danger);
}

.onboarding-field-label {
	display: block;
	font-size: 0.9rem;
	color: var(--text-intermediate);
	margin-bottom: 0.25rem;
}

.onboarding-footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--border-light);
}

.onboarding-panel-plain .onboarding-step h2 + .onboarding-footer {
	border-top: none;
}

.onboarding-footer-side {
	display: flex;
	gap: 0.5rem;
}

.onboarding-footer-main {
	margin-left: auto;
	display: flex;
	gap: 0.5rem;
}

.onboarding-preview {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.75rem 2rem;
	background: var(--background-light);
}

.onboarding-preview-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.onboarding-preview-title {
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: bold;
}

.onboarding-preview-summary {
	font-size: 0.9rem;
	color: var(--muted);
}

.onboarding-preview-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.onboarding-tip {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	margin-top: auto;
	padding: 0.875rem 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.onboarding-tip > svg {
	flex-shrink: 0;
	color: var(--secondary-on-light, var(--secondary));
	font-size: 1.25rem;
	margin-top: 0.1rem;
}

.onboarding-tip [data-onboarding-tip] {
	display: none;
}

.onboarding-tip [data-onboarding-tip].is-current {
	display: inline;
}

.onboarding-tip b {
	display: block;
}

/* Le composant ne marque courant que le conseil de l'étape : à une étape qui n'en a pas, le cadre
   garderait son icône seule. Un conseil courant mais masqué (`hide`) laisse le cadre aussi vide.
   Un cadre qui ne porte aucun conseil par étape ne suit pas les étapes, il reste affiché. */
.onboarding-tip:has([data-onboarding-tip]):not(:has([data-onboarding-tip].is-current:not(.hide))) {
	display: none;
}

@media (max-width: 991px) {

	.onboarding-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.onboarding-steps {
		border-right: 0;
		border-bottom: 1px solid var(--border-light);
	}

	.onboarding-panel {
		min-height: auto;
	}

}

@media (max-width: 575px) {

	.onboarding-steps,
	.onboarding-preview {
		padding: 1.25rem 1rem;
	}

	/* La barre suit le padding de téléphone de la colonne dont elle est sortie, sinon elle garde les
	   2,25 rem de côté que les questions n'ont plus. */
	.onboarding-panel-progress-top > .onboarding-progress {
		padding: 1.25rem 1rem 0;
	}

	/* Deux noms tiennent sur un téléphone, pas cinq : le courant, et l'étape faite qui le précède,
	   qui reste le seul moyen de reculer dans un parcours sans bouton de retour. Un nom masqué garde
	   sa colonne, sinon les deux visibles se partagent la rangée et ne sont plus sous leur segment.

	   Un nom trop long pour sa colonne se coupe : la barre n'a de sens que si chaque nom se lit sous
	   le segment qu'il nomme, et le plus long libellé d'un parcours n'est pas connu d'ici. */
	.onboarding-progress-names > * {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.onboarding-progress-names > :not(.is-current):not(:is(.is-done, .is-skipped):has(+ .is-current)) {
		visibility: hidden;
	}

	.onboarding-row-main {
		flex-wrap: wrap;
	}

	.onboarding-footer,
	.onboarding-footer-main {
		flex-wrap: wrap;
	}

	.onboarding-footer-main {
		flex-direction: column-reverse;
		width: 100%;
	}

	.onboarding-footer-side {
		flex-direction: column;
		order: 1;
		width: 100%;
	}

	.onboarding-footer .btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--touch-target);
	}

}


/* ===== framework/util/static/css/batch.css ===== */

/* Batch */
.batch-group-wrapper {
	position: fixed;
	bottom: 0;
	left: var(--nav-width, 0px);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}

.batch-group-wrapper.batch-group-preview {
	position: relative;
	margin-top: 1.5rem;
	pointer-events: auto;
}

.batch-group-wrapper > form {
	display: flex;
	flex-direction: column;
	width: max-content;
	min-width: min(992px, 100%);
	max-width: 100%;
}

.batch-title {
	display: flex;
	user-select: none;
	-webkit-user-select: none;
	align-items: flex-end;
	column-gap: 0.5rem;
	padding: 0 1rem;
	margin-bottom: -0.875rem;
	position: relative;
	z-index: 1;
	pointer-events: auto;
}

.batch-title h4 {
	margin-bottom: 0;
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	background-color: var(--secondary-light);
	color: white;
	border-radius: 999px;
	padding: 0.375rem 0.875rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 0.375rem 1rem 0 color-mix(in srgb, var(--secondary-light) 35%, transparent);
	white-space: nowrap;
}

.batch-title .util-counter {
	border-color: color-mix(in srgb, white 60%, transparent);
	font-weight: 700;
}

.batch-hide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	line-height: 1;
	border-radius: 999px;
	background-color: white;
	color: var(--secondary-light);
	border: 1px solid color-mix(in srgb, var(--secondary-light) 40%, white);
	cursor: pointer;
}

.batch-hide:hover {
	background-color: color-mix(in srgb, var(--secondary-light) 15%, white);
	color: var(--secondary-light);
}

.batch-checkbox {
	position: relative;
}

.batch-menu {
	overflow-x: auto;
	user-select: none;
	-webkit-user-select: none;
	display: flex;
	justify-content: space-between;
	background-color: color-mix(in srgb, var(--secondary-light) 10%, white);
	border: 1px solid color-mix(in srgb, var(--secondary-light) 40%, white);
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0 0 5rem color-mix(in srgb, black 60%, var(--secondary-light));
	padding: 1.5rem 0.75rem 0.75rem;
	pointer-events: auto;
}

@media (min-width: 992px) {

	.batch-group-wrapper > form {
		margin-bottom: 1rem;
	}

	.batch-menu {
		border-bottom: 1px solid color-mix(in srgb, var(--secondary-light) 40%, white);
		border-radius: var(--radius);
	}

}

@media (max-width: 767px) {

	.batch-menu {
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

}

.batch-main,
.batch-danger {
	display: flex;
	justify-content: start;
	align-items: stretch;
	width: max-content;
}

@media (max-width: 575px) {

	.batch-main {
		justify-content: center;
	}

}


.batch-item {
	display: flex;
	align-items: center;
	justify-content: end;
	flex-direction: column;
	white-space: nowrap;
	color: var(--secondary);
	padding: 0.375rem 0.75rem;
	min-width: 3.75rem;
	position: relative;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
}

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

.batch-item-number {
	font-size: 1.2rem;
	line-height: 1;
	font-weight: lighter;
	margin-bottom: 0.5rem;
}

.batch-item-count {
	top: 0.25rem;
	margin-left: 0.25rem;
	width: max-content;
}

a.batch-item-danger {
	color: var(--danger);
}

.batch-item:hover {
	text-decoration: none;
	color: var(--secondary);
}

.batch-item:hover span:last-child {
	text-decoration: underline;
	text-decoration-color: var(--color-neon);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

a.batch-item-danger:hover span:last-child {
	text-decoration-color: var(--danger);
}

.batch-main .batch-item:not(.batch-item-last) {
	border-right: 1px solid color-mix(in srgb, var(--secondary-light) 40%, white);
}

.batch-item > svg {
	margin-bottom: 0.375rem;
	font-size: 1.1rem;
}

@media (min-width: 1600px) {

	.batch-item {
		font-size: 0.85rem;
		min-width: 4.25rem;
	}

	.batch-item > svg {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

}

.batch-item span {
	line-height: 1.2;
	text-align: center;
	margin-top: 0.125rem;
}

@media (max-width: 575px) {

	.batch-item span:last-child {
		font-size: 0.75rem;
	}

}

@media (max-width: 449px) {

	.batch-item span:last-child {
		font-size: 0.7rem;
	}

}


.batch-one-wrapper {
	position: absolute;
	top: calc(50% - 2rem);
	z-index: 20;
	border-radius: var(--radius);
	background-color: color-mix(in srgb, var(--secondary-light) 10%, white);
	border: 1px solid color-mix(in srgb, var(--secondary-light) 40%, white);
	box-shadow: 0 0 5rem color-mix(in srgb, black 60%, var(--secondary-light));
	padding: 0.375rem 0.25rem;
}

.batch-one-menu {
	display: flex;
	align-items: stretch;
}

.batch-one-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	white-space: nowrap;
	color: var(--secondary);
	padding: 0.375rem 0.75rem;
	min-width: 3.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

@media (max-width: 767px), (min-width: 1400px) {

	.batch-one-item {
		padding: 0.375rem 0.5rem;
	}

}

.batch-one-item:not(:last-child) {
	border-right: 1px solid color-mix(in srgb, var(--secondary-light) 40%, white);
}

a.batch-one-item {
	color: var(--secondary);
}

a.batch-one-item:hover {
	text-decoration: none;
	color: var(--secondary);
}

a.batch-one-item:hover span:last-child {
	text-decoration: underline;
	text-decoration-color: var(--color-neon);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

a.batch-one-item.batch-item-danger,
a.batch-one-item.batch-item-danger:hover {
	color: var(--danger);
}

a.batch-one-item.batch-item-danger:hover span:last-child {
	text-decoration-color: var(--danger);
}

.batch-one-item > svg {
	font-size: 1.1rem;
	margin-bottom: 0.375rem;
}

.batch-one-item span {
	font-size: 0.8rem;
	line-height: 1.2;
	margin-top: 0.125rem;
}

@media (min-width: 1600px) {

	.batch-one-item {
		font-size: 0.85rem;
		min-width: 4.25rem;
	}

	.batch-one-item > svg {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

}

.batch-mute {
	opacity: 0.25;
	pointer-events: none;
}
/* ===== base/media/static/css/media.css ===== */
/* Vignette */
.media-circle-view {
	position: relative;
	border-radius: 50%;
	width: 100%;
	min-width: 100%;
	height: 100%;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	background-size: cover;
	background-position: center center;
	vertical-align: middle;
}

.media-vignette-default {
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant: small-caps;
	font-weight: bold;
	color: black;
	background-color: var(--background);
	line-height: 1;
	border: 1px solid var(--border);
	text-decoration: none !important;
}

.media-rectangle-view {
	position: relative;
	width: 100%;
	min-width: 100%;
	height: 100%;
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.media-banner-view {
	position: relative;
	width: 100%;
	min-width: 100%;
	height: 100%;
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.media-banner-view.media-amap-producer-photo-view {
	height: auto;
	aspect-ratio: 2;
}

.media-image-upload[data-type="amap-producer-photo"] {
	max-width: 24rem;
}

@media (max-width: 449px) {

	.media-image-upload[data-type="amap-producer-photo"] {
		max-width: none;
	}

}

/* ===== base/structure/static/css/structure.css ===== */
.member-structures {
	margin: 2rem 0;
}

div.structure-financial-year-menu {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
}

@media (max-width: 649px) {

	div.structure-financial-year-menu {
		display: block;
	}

}

/* Structure update */
#structure-update .media-image-upload[data-type="structure-logo"] {
	border-radius: var(--radius);
}

.structure-settings-subtitle {
	line-height: 1.7;
	opacity: 0.7;
}

/* Legal form */

form.structure-legal-form:has(select[name="legalCountry"] option[value="75"]:not(:checked)) [data-wrapper="siret"] {
	display: none;
}

.structure-marks-other {
	display: none;
}

.structure-marks:has(input[type="radio"]:checked) .structure-marks-other,
.structure-marks:has(.structure-marks-other input[type="checkbox"]:checked) .structure-marks-other {
	display: block;
}

.structure-marks:has(input[type="radio"]:checked) .structure-marks-more,
.structure-marks:has(.structure-marks-other input[type="checkbox"]:checked) .structure-marks-more {
	display: none;
}

.structure-marks-organic {

	display: flex;
	align-items: baseline;
	gap: 1rem;

}


/* « En conversion » est la seule marque de qualité qui soit du texte et non un
   logo. Les boutiques la posent sur la photo du produit, en blanc : elle
   disparaissait dès que la photo était claire. */

.structure-organic-conversion {
	display: inline-block;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius);
	background-color: #000a;
	color: white;
	font-size: 0.8rem;
	line-height: 1.2;
	white-space: nowrap;
}

div.community-map {
	height: 26rem;
}

@media (max-width: 575px) {

	div.community-map {
		height: 18rem;
	}

}

/* ===== base/structure/static/css/action.css ===== */
span.action-name {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 90%;
}

div.action-circle {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	margin-right: 0.5rem;
	vertical-align: middle;
}

div.action-manage-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

div.action-manage-categories {
	margin-left: 1.75rem;
	color: var(--muted);
	font-size: .9rem;
}

#panel-action-update:has(input[name="categories[]"][data-fqn="culture"]:not(:checked)) .action-update-cultivation {
	display: none;
}
/* ===== base/structure/static/css/tool.css ===== */
div.tool-list {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	line-height: 1.2;
	gap: 0.5rem 1rem;
}

a.tool-list-item {
	display: inline-grid;
	align-items: center;
	grid-auto-flow: column;
	grid-column-gap: 0.5rem;
}
/* ===== base/notification/static/css/notification.css ===== */
/* La cloche et son menu (M2), puis le centre. Tout sélecteur est borné par une classe notification-* :
   la feuille reste chargée après qu'on a quitté la structure, en navigation ajax. */

/* z-index : en barre latérale, le gabarit pose les actions en absolu sous l'identité de la structure,
   qui porte z-index 1 et recouvre la cloche comme elle recouvrirait le compte ; nav-user s'en sort par
   le même z-index (template-structure.css). Sans lui, le clic sur la cloche tombe sur le logo. */
.notification-bell {
	display: flex;
	align-items: center;
	z-index: 1;
}

/* La barre d'une structure a le fond de sa section, qui est aussi la couleur des liens : la cloche
   reprend le blanc de la barre au lieu de s'y fondre. La réserve de droite garde le compteur dans la
   cloche. Le centrage de l'icône vient de `body > nav .nav-item` dans la barre d'une ferme, que la
   bannière d'un groupe n'hérite pas : sans lui, l'icône s'y collait en haut de sa cible tactile. */
.notification-bell > a.nav-item {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 1.25rem;
	padding-right: 1.75rem;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	font-size: 1.25rem;
	color: inherit;
}

/* Le compteur se pose hors du flux, dans la place que la cloche lui réserve à droite de l'icône : à la
   suite, il élargissait la cloche en apparaissant et la rétrécissait en s'éteignant, ce qui déplaçait
   tout ce qui la suit dans la barre. Le margin-left annule le décalage de `.nav-item > .util-counter`. */
.notification-bell > a.nav-item > .util-counter {
	position: absolute;
	top: calc(50% - 1.125rem);
	left: calc(1.25rem + 1.3125rem + 0.125rem);
	margin-left: 0;
	pointer-events: none;
}

/* Le fond de survol que `template-structure.css` pose sur les liens de la barre (0,3,1) ne va pas à
   une icône seule : la quatrième classe le bat quel que soit l'ordre d'arrivée des feuilles. */
.structure-nav-actions .notification-bell > a.nav-item:hover {
	background-color: transparent;
}

/* Dans la bannière d'un groupe, la rangée s'aligne par le bas (`.community-header-tabs`,
   template-community.css) : la cible tactile de la cloche, plus haute que le bouton de membre, y
   repoussait le menu des onglets sous le bord de la bannière en petit écran. Les marges négatives
   gardent la cible entière sans qu'elle compte dans la hauteur de la rangée. */
.community-header-tabs-actions > .notification-bell {
	margin-block: calc((var(--touch-target) - 1.5rem) / -2);
}

/* ------------------------------------------------------------ le menu */

/* `.dropdown-list.dropdown-list-open` de lime.css (0,2,0) pose sa propre hauteur maximale et gagnait
   sur `.notification-menu` seul : la troisième classe la bat quel que soit l'ordre dans lequel les
   feuilles arrivent en navigation ajax. */
.dropdown-list.dropdown-list-open.notification-menu {
	width: min(28rem, calc(100vw - 1rem));
	max-height: min(48rem, calc(100vh - 6rem));
	overflow-y: auto;
	/* La place de la barre est réservée : un groupe déroulé qui fait dépasser le menu ne rétrécit pas
	   ses lignes en la faisant apparaitre. */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}

.notification-menu-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

a.notification-menu-head-title {
	flex: 1;
	color: inherit;
}

/* La roue reste une cible de 44 px, le titre du menu n'en faisant que 20 : la marge négative ramène
   l'icône sur le padding du titre, pour qu'elle ne paraisse pas rentrée. */
a.notification-menu-settings {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	margin-right: -0.75rem;
	color: inherit;
	font-size: 1rem;
}

.notification-menu-item {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	column-gap: 0.625rem;
	align-items: start;
	white-space: normal;
}

.notification-menu-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.notification-menu-title {
	line-height: 1.3;
}

/* Le gras de dropdown-item-unread s'arrête au titre, au nom et à l'heure d'une entrée non lue :
   la méta, le résumé et les montants restent en maigre. */
.notification-menu-summary,
.notification-menu-meta,
.notification-menu-when {
	font-size: 0.9rem;
	font-weight: normal;
}

.notification-menu-child-amount {
	font-weight: normal;
}

.notification-menu-item.dropdown-item-unread > .notification-menu-when,
.notification-menu-item.dropdown-item-unread .notification-menu-aside > .notification-menu-when {
	font-weight: bold;
}

.notification-menu-meta,
.notification-menu-when {
	color: var(--text-intermediate);
}

.dropdown-item-unread:not(.notification-menu-common) .notification-menu-meta,
.dropdown-item-unread .notification-menu-when {
	color: var(--text);
}

.notification-menu-when {
	padding-top: 0.125rem;
	white-space: nowrap;
}

/* Une note n'est pas un lien (`getCommonContent()`) : le survol du socle, qui pèse (0,3,0) dans
   `component.css`, n'a rien à y annoncer. Une note non vue garde le sien, pour ne pas recopier son
   fond hors du socle. */
div.notification-menu-common {
	cursor: default;
}

.dropdown-list-light div.notification-menu-common:not(.dropdown-item-unread):hover {
	background-color: transparent;
}

/* L'interligne de `.dropdown-item` (1,2) est celui d'une entrée d'une ligne : le texte d'une note
   reprend celui du corps, comme dans le centre. Les marges retranchent l'écart de la colonne
   (`.notification-menu-text`) pour retrouver celles du centre. */
.notification-menu-item .notification-common-body {
	margin: 0.125rem 0 0.375rem;
	line-height: 1.6;
}

.notification-menu-item .notification-common-button {
	align-self: flex-start;
	margin: 0 0 0.375rem;
}

.notification-menu-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}

.notification-menu-free {
	margin-bottom: 0;
}

.notification-menu-toggle {
	display: flex;
	align-items: center;
}

/* Le bloc déplié s'aligne sur le texte des entrées : marge de l'entrée, son retrait, l'icône et l'écart. */
.notification-menu .dropdown-item-group-items {
	margin: 0 0.5rem 0.25rem calc(0.5rem + 0.75rem + 2rem + 0.625rem);
}

/* Les colonnes naissent des cellules présentes : une ligne sans montant ne lui garde ni colonne ni
   gouttière, et son nom prend la place. La ligne tient la cible tactile, son rang centré dedans. */
a.notification-menu-child {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-columns: auto;
	column-gap: 0.75rem;
	align-items: baseline;
	align-content: center;
	min-height: var(--touch-target);
	margin: 0;
	padding: 0.25rem 0.75rem;
}

.notification-menu-child-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notification-menu-child-amount,
.notification-menu-child > .notification-menu-when {
	padding-top: 0;
	text-align: right;
	white-space: nowrap;
}

.notification-menu-child > .notification-menu-when {
	width: 3.75rem;
}

.notification-menu-empty {
	color: var(--text-intermediate);
}

a.notification-menu-read-all {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: var(--touch-target);
	white-space: nowrap;
	color: inherit;
	cursor: pointer;
}

/* Sans non lue, le lien disparaît et util-action (space-between) laisserait le bouton seul à gauche. */
a.notification-menu-all {
	margin-left: auto;
}

/* ------------------------------------------------------------ le centre */

.notification-text,
.notification-meta {
	display: block;
}

.notification-time {
	flex: none;
	white-space: nowrap;
}

/* Une ligne seule, la tête d'un groupe et les lignes qu'il déplie ont une même composition : la
   vignette, le texte, l'heure, puis la flèche ou le chevron, alignés en haut et séparés du même
   écart. L'heure et la flèche restent ainsi sur la première ligne du titre quand le texte en prend
   plusieurs, et les trois formes se suivent dans les mêmes colonnes du centre. */
a.util-deck-row.notification-row {
	align-items: flex-start;
}

.notification-group > .util-deck-head {
	gap: 0.75rem;
}

a.util-deck-row.notification-row > .util-icon,
.notification-group > .util-deck-head > .util-icon {
	margin-top: 0.125rem;
}

/* L'heure, d'un corps plus petit, se pose sur la ligne de base du titre : dans un conteneur aligné
   en haut, seuls les blocs qui demandent `baseline` s'alignent entre eux, le texte en est donc. */
a.util-deck-row.notification-row > .util-deck-row-name,
a.util-deck-row.notification-row > .notification-time,
.notification-group > .util-deck-head > .util-deck-body,
.notification-group > .util-deck-head > .notification-time {
	align-self: baseline;
}

/* La flèche et le chevron se centrent dans la hauteur d'une ligne du titre, dont ils ont le corps.
   Le chevron prend pour cela la taille de la flèche d'une ligne (`.util-deck-row .util-deck-arrow`) :
   de même largeur, il laisse aussi à l'heure de la tête le bord droit de celle des lignes. */
a.util-deck-row.notification-row > .util-deck-arrow,
.notification-group > .util-deck-head > .util-deck-chevron {
	display: flex;
	align-items: center;
	height: 1lh;
}

.notification-group > .util-deck-head > .util-deck-chevron {
	font-size: 1rem;
}

/* Une ligne sans méta tient en une ligne de texte, moins haute que la cible tactile : son padding
   la porte à 44 px en gardant le texte au milieu, ce qu'un min-height ne ferait pas sur une ligne
   alignée en haut. */
a.util-deck-row.notification-row:not(:has(.notification-meta)) {
	padding-block: max(0.6rem, calc((var(--touch-target) - 1lh) / 2));
}

/* Une ligne commune n'est pas un lien (`getCommonContent()`) : elle reprend l'alignement des
   autres, et son heure garde la colonne que leur flèche lui laisse. */
div.util-deck-row.notification-row-common {
	align-items: flex-start;
}

div.util-deck-row.notification-row-common > .util-icon {
	margin-top: 0.125rem;
}

div.util-deck-row.notification-row-common > .notification-time {
	margin-right: calc(1em + 0.75rem);
}

/* Le texte d'une note se lit en entier dans sa ligne (D8-C) : le gras d'une ligne non lue ne tient
   qu'au titre. */
.notification-common-body {
	margin: 0.25rem 0 0.5rem;
	font-weight: normal;
	color: var(--text);
}

.notification-common-body p:last-child {
	margin-bottom: 0;
}

.notification-common-button {
	margin-bottom: 0.5rem;
}

.notification-common-preview {
	max-width: 36rem;
}

/* Le résumé d'un groupe garde la teinte atténuée de `.util-deck-head p` ; seule sa marge change. */
.notification-group > .util-deck-head p.notification-group-summary {
	margin: 0.125rem 0 0;
}

/* Les lignes d'un groupe s'alignent sur le texte de sa tête : la vignette garde sa place sans se montrer. */
.notification-group > .util-deck-fold > a.util-deck-row > .util-icon {
	visibility: hidden;
}

.notification-end {
	margin-top: 1rem;
}

/* Sous 576 px, le centre resserre ses lignes pour laisser au texte la largeur d'un téléphone. La
   tête du jour suit, pour garder son nom et son compteur sur les bords de ses lignes. */
@media (max-width: 575px) {

	a.util-deck-row.notification-row,
	.notification-group > .util-deck-head {
		padding-inline: 0.75rem;
		gap: 0.5rem;
	}

	.notification-day > .util-deck-head {
		padding-inline: 0.75rem;
	}

}

/* ------------------------------------------------------------ les réglages */

.notification-settings {
	grid-template-columns: minmax(0, 1fr) 11rem;
}

/* Un rang de `util-table` aligne ses cellules sur la ligne de base (reboot.css), ce qui cale
   l'interrupteur sur le nom du type : il se centre ici sur le bloc que forment le nom et sa description. */
.notification-settings > .util-table-row {
	align-items: center;
}

/* Une famille se détache de la précédente : l'intertitre qui suit un rang prend le double de l'air
   de celui qui suit l'en-tête. */
.notification-settings > .util-table-row + .util-table-title {
	padding-top: var(--space-xl);
}

/* L'en-tête de la colonne nomme un canal de réception, pas une étiquette de colonne : les petites
   capitales que reboot.css pose sur toute cellule d'en-tête se défont ici par une classe (0,2,0
   contre 0,1,0), comme le fait déjà `.community-rights` (shareAi.css). */
.notification-settings > .util-table-head > :not(:first-child) {
	text-transform: none;
	font-weight: normal;
	color: var(--text);
}

.notification-settings > .util-table-head > :not(:first-child),
.notification-settings > .util-table-row > .notification-settings-switch {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* « Toujours » tient la hauteur de l'interrupteur qu'il remplace (`.field-switch`, form.css) : sans
   elle, les lignes d'un type obligatoire sont plus basses que leurs voisines et le rythme se casse.
   Un étai plutôt qu'un min-height, que le border-box ferait absorber par le padding de la cellule. */
.notification-settings > .util-table-row > .notification-settings-switch::before {
	content: '';
	height: calc(2rem + 2px);
}

/* Sous 768 px, la colonne de l'interrupteur se resserre : il mesure 3,25 rem et le nom du type a
   besoin de toute la largeur qui reste. */
@media (max-width: 767px) {

	.notification-settings {
		grid-template-columns: minmax(0, 1fr) 7rem;
	}

}

/* ===== base/entry/static/css/entry.css ===== */
/* Le détail de la confirmation passe à la ligne plutôt que de faire défiler la liste en largeur :
   une série au nom long suivie de ses emplacements dépasse la largeur de l'omnibox, que le champ
   garde. */
#entry-omnibox .util-omnibox-item-detail {
	white-space: normal;
	text-align: right;
}

/* ===== production/series/static/css/series.css ===== */
div.series-header-perennial-seasons {
	background: white;
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1;
	overflow-x: auto;
}

div.series-header-perennial-seasons-label {
	margin-right: 1rem;
}

.series-header-perennial-seasons-one {
	min-width: 1.75rem;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--radius);
	background-color: var(--text);
	color: white;
	font-weight: bold;
	transition: background-color 0.5s;
}

a.series-header-perennial-seasons-one-selected {
	background-color: var(--secondary);
}

a.series-header-perennial-seasons-one:hover {
	text-decoration: none;
	background-color: var(--secondary);
	color: white;
}

div.series-header-perennial-seasons-one-future {
	color: #ccc;
	background-color: transparent;
	border: 1px dashed #ccc;
}

/* Liste de séries */
div.series-item-wrapper {
	--series-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	margin-bottom: 2rem;
	position: relative;
	padding-bottom: 1rem; /* Eviter une scrollbar verticale */
}

div.series-season {
	display: grid;
}

/* L'axe reprend la règle graduée de la bibliothèque de cultures : une ligne,
   des mois en minuscules, des numéros discrets dont seules les dizaines
   s'appuient. L'année n'est qu'une étiquette, pas un bandeau. */
div.series-season-year {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	line-height: 1;
	font-size: 0.7rem;
	letter-spacing: 0.3px;
	padding: 0.25rem 0 0.125rem 0;
	color: var(--muted);
	border-bottom: 1px solid var(--border);
}

div.series-season-year.series-season-year-external {
	color: #bbb;
}

div.series-season-year.series-season-year-current {
	grid-column: span 12;
}

div.series-season-month {
	text-align: center;
	padding: 0.25rem 0;
	line-height: 1;
	font-size: 0.75rem;
	font-weight: normal;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text);
	border-left: 1px solid var(--border-light);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.series-season-month:first-of-type {
	border-left-color: transparent;
}

div.series-season-month-external {
	color: var(--muted);
}

div.series-season-weeks {
	position: relative;
	height: 1rem;
	display: flex;
	font-size: 0.5625rem;
	font-weight: normal;
	letter-spacing: 0;
	text-align: center;
	color: var(--text-intermediate);
}

div.series-season-weeks > div.util-graduation-mark-decade {
	color: var(--text);
}

/* La graduation s'éclaircit avec la place : le composant `util-graduation` de component.css porte
   cette règle, employée aussi par la frise de comparaison d'un groupe. Ne restent ici que la
   couleur, propre à cet écran, et les noms de mois, qui passent à l'initiale au même seuil. */
.series-season-month-short {
	display: none;
}

@media (max-width: 1199px) {

	.series-season-month-long {
		display: none;
	}

	.series-season-month-short {
		display: inline;
	}

}

@media (max-width: 1400px) {

	.panel div.series-season-weeks {
		display: none;
	}

}

div.series-season-weeks > div.series-season-week {
	position: absolute;
	top: 0;
	bottom: 0;
	letter-spacing: -0.3px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

table.series-printing td {
	padding: 0 !important;
}

div.series-grid-now {
	position: absolute;
	border-right: 2px solid var(--secondary);
	opacity: 0.5;
	left: 0;
	top: 0;
	bottom: 0;
}

@media print {

	div.series-grid-now {
		display: none;
	}

}

div.series-grid {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 991px) {

	.panel div.series-grid-weeks {
		display: none;
	}

}

div.series-grid-weeks {
	--series-grid-end: calc(var(--series-grid-left) + (var(--series-grid-count) - 0.5) * var(--series-grid-step));
	--series-grid-first: calc(var(--series-grid-left) / var(--series-grid-end) * 100%);
	--series-grid-period: calc(var(--series-grid-step) / var(--series-grid-end) * 100%);
	background-image: repeating-linear-gradient(
		to right,
		var(--series-grid-line, #0001) calc(var(--series-grid-first) - 1px),
		var(--series-grid-line, #0001) var(--series-grid-first),
		transparent var(--series-grid-first),
		transparent calc(var(--series-grid-first) - 1px + var(--series-grid-period))
	);
	background-size: calc(var(--series-grid-end) * 1%) 100%;
	background-repeat: no-repeat;
	-webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px);
	mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px);
}

div.series-grid-months > div.series-grid-line {
	position: absolute;
	top: 0;
	bottom: 0;
}

div.series-grid-months > div.series-grid-line:not(:first-child) {
	z-index: 100;
}

div.series-grid-months > div.series-grid-line {
	border-left: 1px dashed #0001;
}

div.series-grid-weeks + div.series-grid-months > div.series-grid-line {
	border-left: 0;
}

div.series-grid-months > div.series-grid-line:nth-child(even) {
	background-color: #00000003;
}

div.series-grid-weeks + div.series-grid-months > div.series-grid-line:nth-child(even) {
	border-left: 0;
}


#zone-container div.series-grid-weeks {
	--series-grid-line: #0002;
}

div.series-item-header {
	background: var(--background-body);
	padding-left: 1rem;
	padding-right: 1rem;
}

.series-printing div.series-item-header {
	background: white;
}

/* L'en-tête collé passe devant le contenu des lignes : pastilles, campagnes et
   délais sont positionnés et montent jusqu'à z-index 5, ils passeraient sinon
   par-dessus la graduation en défilant. */
@media (min-width: 768px) {

	div.series-item-header:not(.series-item-forecast):not(.series-item-header-not-sticky) {
		position: sticky;
		top: calc(var(--mainSticky) - 1px);
		z-index: 6;
	}

}

@media (min-width: 992px) {

	div.series-item-header.series-item-forecast {
		position: sticky;
		top: calc(var(--mainSticky) - 1px);
		z-index: 6;
	}

}

div.series-item-header-highlight {
	border-bottom: 1px solid var(--border);
}

div.series-item-header > * {
	padding-bottom: 0.25rem;
}

div.series-item-body {
	position: relative;
	background-color: white;
	box-sizing: content-box;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.series-item-title {
	background-color: #7771;
	align-items: center;
	margin-bottom: 0.5rem;
	line-height: 1;
	align-items: center !important;
}

.series-item-title-plant {
	display: inline-flex;
	align-items: center;
	font-size: 0.9rem;
	line-height: 1;
	padding: 0.125rem 0;
}

.series-item-title-plant div.plant-vignette,
.series-item-title-plant div.media-circle-view {
	margin-right: 0.75rem;
}

.series-item-title-plant-name {
	font-size: .8rem;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.3px;
}

a.series-item-title-plant-safety {
	margin-left: 0.5rem;
	color: var(--muted);
	font-size: .8rem;
	letter-spacing: -0.1px;
}

.series-item {
	padding-left: 1rem;
	padding-right: 1rem;
}

.series-item:not(.series-item-title) {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.series-item.series-item-compare {
	opacity: 0.5;
}

.series-item + .series-item.series-item-title {
	margin-top: 0.25rem;
}

.series-item.series-item-title div.media-circle-view {
	margin-top: -0.3rem;
	margin-bottom: -0.3rem;
}

.series-item.series-item-title div.plant-vignette {
	margin-top: -1.3rem;
	margin-bottom: -1rem;
}

.series-item-body .series-item:not(.series-item-title):not(.series-item-gap) + .series-item:not(.series-item-title):not(.series-item-group):not(.series-item-gap) {
	border-top: 1px dashed #ddd;
}

.series-item-planning {
	display: grid;
	align-items: baseline;
	position: relative;
	transition: background-color 0.5s;
	text-decoration: none;
	padding-left: 0;
}

.series-item-planning.series-item {
	padding-right: 0;
}

.series-item-planning.series-item-header {
	padding-left: 0;
	padding-right: 0;
}

/* L'assolement et les variétés passent sous le nom de la série : la colonne
   disparaît et sa largeur revient au diagramme, qui est ce qu'on regarde. */

.series-item-planning-wrapper {
	--series-check: 3rem;
	--series-details: 15rem;
	--series-area: 7rem;
	--series-gap: 0.5rem;
	--series-timeline-gap: 1rem;
}

@media (min-width: 1600px) {

	.series-item-planning-wrapper {
		--series-details: 17rem;
	}

}

@media (max-width: 1199px) {

	.series-item-planning-wrapper {
		--series-details: 14rem;
	}

}

/* Densité, filets de séparation et chasse fixe, communs aux trois vues du plan.
   Sans filets les colonnes flottent ; sans chasse fixe les chiffres ne s'empilent
   pas et la colonne se lit moins vite qu'un tableau.

   La cellule qui porte le diagramme ou les jetons est exclue : elle a son propre
   positionnement, et la mettre en flex l'écrase. */

.series-item-planning > *:not(.series-item-planning-timeline),
.series-item-harvesting > *:not(.series-item-harvesting-weeks),
.series-item-working-time > *:not(.series-item-working-time-tasks) {
	border-right: 1px solid var(--border-light);
	padding-right: 0.5rem;
	align-self: stretch;
	display: flex;
	align-items: center;
	font-size: .95rem;
}

/* Ces cellules portent souvent deux valeurs — un chiffre et son écart, deux
   unités de récolte : elles s'empilent au lieu de se coller. */

.series-item-planning > .series-item-planning-summary,
.series-item-planning > .text-end,
.series-item-harvesting > .text-end,
.series-item-harvesting > .series-item-harvesting-yield,
.series-item-harvesting > .series-item-harvesting-yield-expected,
.series-item-working-time > .text-end,
.series-item-working-time > .text-center {
	flex-direction: column;
	align-items: end;
	justify-content: center;
}

.series-item-planning.series-item:not(.series-item-title),
.series-item-harvesting.series-item:not(.series-item-title),
.series-item-working-time.series-item:not(.series-item-title) {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.series-item-planning .series-item-planning-details,
.series-item-harvesting .series-item-planning-details,
.series-item-working-time .series-item-planning-details {
	white-space: nowrap;
	overflow: hidden;
}


.series-item-planning.series-item-title,
.series-item-harvesting.series-item-title,
.series-item-working-time.series-item-title,
.series-item-seeds.series-item-title {
	margin-bottom: 0;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	background-color: var(--background-even);
}

.series-item-planning {
	grid-column-gap: var(--series-gap);
	grid-template-columns:
		var(--series-check)
		var(--series-details)
		var(--series-area)
		1fr;
}

.series-printing {
	--series-gap: 0px;
	--series-check: 0px;
	--series-details: 6cm;
	--series-area: 2.5cm;
	--series-harvest: 2.5cm;
}

/* Quatre colonnes, comme le markup : la série, le linéaire, l'objectif de
   récolte, puis le diagramme. Avec trois, la quatrième cellule repartait sur une
   ligne implicite et la graduation des mois se repliait sur sa largeur de texte. */
.series-printing .series-item-planning {
	grid-column-gap: 0;
	grid-template-columns:
		var(--series-details)
		var(--series-area)
		var(--series-harvest)
		1fr;
}

.series-item-planning-wrapper div.series-grid {
	left: calc(
		var(--series-check) + var(--series-details) +
		var(--series-area) + var(--series-harvest, 0px) +
		3 * var(--series-gap) + var(--series-timeline-gap)
	);
}

/* Affichage de la planification */

/* Le voile de survol passe derrière le diagramme, comme la grille : les pastilles
   et les barres gardent leur fond blanc. */
div.series-item-planning:not(.series-item-header):hover::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #7771;
	pointer-events: none;
}

.series-item-planning-details {
	line-height: 1.2;
	min-width: 0;
}

/* Empilé seulement là où une seconde ligne existe : les vues Récoltes et Temps
   de travail portent la variété sous le nom, le plan de culture non. */
.series-item-planning-details:has(.series-item-planning-details-info) {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 0.25rem;
}

/* Sans seconde ligne, le nom se centre sur la hauteur de sa ligne au lieu de
   rester collé en haut. */
.series-item-planning-details:not(:has(.series-item-planning-details-info)),
.series-item-planning-details:not(:has(.series-item-planning-details-info)) .series-item-planning-details-link {
	display: flex;
	align-items: center;
}

/* La cellule du nom réserve sa place au menu : le lien s'arrête avant, l'icône
   est toujours là, jamais coupée. */
.series-item-planning-details:has(.series-item-planning-actions) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	align-items: center;
	column-gap: 0.25rem;
}

.series-item-planning-details:has(.series-item-planning-actions) .series-item-planning-details-link {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 0.1rem;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
}

.series-item-planning-details-link:hover .series-item-planning-details-title {
	text-decoration: underline;
}

.series-item-planning-details:has(.series-item-planning-closed) {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.series-item-planning-details:has(.series-item-planning-closed) .series-item-planning-details-link {
	flex: 1;
	min-width: 0;
}

.series-item-planning-closed {
	display: flex;
	align-items: center;
	margin-left: auto;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--text-intermediate);
}

/* Le menu d'une seule culture cochée : posé à droite de sa case. La cellule
   entière coche : la case seule fait une cible de 1 rem au doigt. */
#series-wrapper label.batch-checkbox {
	position: relative;
	align-self: stretch;
	cursor: pointer;
}

#series-wrapper label.batch-checkbox:hover {
	background-color: #0000000a;
}

#series-wrapper .batch-one-wrapper {
	left: 2.5rem;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	z-index: 20;
}

/* La fiche d'implantation d'un semis ou d'une plantation, sous sa pastille. */
/* La pastille ouvre sa fiche sans porter le chevron des menus : le diagramme
   est déjà chargé. */
.series-item-timeline-event-detailed {
	cursor: pointer;
}

.series-item-timeline-event-detailed.dropdown-toggle::after {
	display: none;
}

.series-item-implantation {
	color: white;
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.25rem 1.5rem;
	padding: 0.5rem 1rem 0.75rem;
	font-size: 1rem;
	white-space: nowrap;
}

.series-item-implantation-label {
	color: #ffffffb3;
}

.series-item-implantation-value {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Une série qui vient d'être créée ou dupliquée entre en une seconde, puis
   s'allume le temps qu'on la repère : un halo posé par-dessus la ligne (ses
   cellules sont opaques) et une pastille qui la nomme. */
.series-item-planning-new {
	position: relative;
	z-index: 5;
	animation: series-item-planning-appear 0.7s ease-out;
}

@keyframes series-item-planning-appear {
	0% {
		opacity: 0;
		transform: translateY(-0.75rem) scaleY(0.9);
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.series-item-planning-new::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: var(--radius);
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 20%, transparent), color-mix(in srgb, var(--secondary) 4%, transparent) 55%, transparent);
	box-shadow: inset 3px 0 0 var(--secondary), 0 0 0 1px color-mix(in srgb, var(--secondary) 40%, transparent), 0 0.25rem 1rem color-mix(in srgb, var(--secondary) 25%, transparent);
	animation: series-item-planning-new 0.6s ease-out both;
}

@keyframes series-item-planning-new {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.series-item-planning-new-label {
	position: absolute;
	top: -0.2rem;
	transform: translateY(-100%);
	left: 2.25rem;
	z-index: 6;
	padding: 0.05rem 0.5rem;
	border-radius: 1rem;
	background-color: var(--secondary);
	color: white;
	font-size: 0.7rem;
	font-weight: bold;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 0.15rem 0.5rem #0003;
	animation: series-item-planning-label 0.6s ease-out both;
}

@keyframes series-item-planning-label {
	0% { opacity: 0; transform: translateY(calc(-100% + 0.4rem)); }
	100% { opacity: 1; transform: translateY(-100%); }
}

.series-item-planning-new-out::after,
.series-item-planning-new-out .series-item-planning-new-label {
	animation: series-item-planning-out 0.6s ease-in both;
}

@keyframes series-item-planning-out {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.series-item-planning-new,
	.series-item-planning-new::after,
	.series-item-planning-new-label {
		animation: none;
	}
}

.series-item-planning-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 1.25rem;
	cursor: pointer;
}

.series-item-planning-actions::after {
	display: none;
}

.series-item-planning-actions:hover,
.series-item-planning-actions:has(+ .dropdown-placeholder) {
	color: var(--primary);
	background-color: #0000000d;
}

.series-item-planning-details-info {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La semaine de semis ou de plantation ne se fait jamais rogner : le nom de la
   série se réduit et porte les points de suspension, la pastille et l'année
   gardent leur place. */
.series-item-planning-details-title {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.series-item-planning-details-title > .series-item-planning-details-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.series-item-planning-details-title > *:not(.series-item-planning-details-name) {
	flex: none;
}



.series-item-planning-details-info {
	color: var(--muted);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
}

.series-item-planning-title {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

div.series-item-planning-details {
	text-decoration: none;
}

/* Le nom porte le lien vers la série dans les vues Récoltes et Temps de travail,
   où la cellule entière n'en est pas un. Il garde la couleur de lien du plan et
   ne se souligne qu'au survol, comme sur l'onglet Séries : forcer `inherit` le
   rendait noir alors que le nom du plan est vert, hérité de sa cellule-lien. */
div.series-item-planning-details .series-item-planning-details-name {
	text-decoration: none;
}

div.series-item-planning-details:hover .series-item-planning-details-name {
	text-decoration: underline;
}

.series-item-planning-details .plant-start {
	margin-left: 0;
}

span.series-item-planning-details-cycle {
	margin-left: 0.5rem;
	color: var(--muted);
	font-size: 0.9rem;
	text-decoration: underline;
}

.series-item-timeline-event-shiftable {
	touch-action: pan-y;
	cursor: grab;
}

/* Le ruban d'un itinéraire est saisissable comme celui d'une série. La règle vit
   ici, avec le pointillé de survol qu'elle accompagne : posée dans sequence.css,
   elle pouvait manquer pendant que celle du survol était déjà là. */
.sequence-plan .series-item-timeline-event-full.series-item-timeline-event-shiftable {
	cursor: grab;
}

.series-item-planning:hover .series-item-timeline-event-shiftable {
	box-shadow: 0 0 0 1px var(--primary);
}

.series-item-timeline-bound {
	position: absolute;
	top: 50%;
	width: 1.25rem;
	height: 1.5rem;
	transform: translateY(-50%);
	cursor: ew-resize;
	touch-action: pan-y;
	opacity: 0;
	z-index: 3;
}

.series-item-timeline-bound-first {
	left: -0.625rem;
}

.series-item-timeline-bound-last {
	right: -0.625rem;
}

/* Une poignée ronde qui déborde du bout de la campagne, comme le curseur d'un
   slider : elle dit « ça se tire » sans qu'on ait à le deviner. */
.series-item-timeline-bound::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background-color: white;
	border: 2px solid currentColor;
	box-shadow: 0 1px 2px #0003;
}

.series-item-timeline-bound:hover::after,
.series-item-timeline-event.series-item-timeline-holding .series-item-timeline-bound::after {
	background-color: currentColor;
}

.series-item-planning:hover .series-item-timeline-bound {
	opacity: 1;
}

.series-item-timeline-event-movable,
.series-item-timeline-event-period[data-cultivation],
.series-item-timeline-event-period[data-flow] {
	cursor: grab;
	touch-action: pan-y;
}

/* Une campagne qui ne se saisit pas le dit : sur une série clôturée, la barre
   porte le curseur interdit plutôt que rien du tout. */
.series-item-timeline-event-period:not([data-cultivation]):not([data-flow]) {
	cursor: not-allowed;
}

/* Entre le relâchement et la réponse du serveur, l'élément reste là où on l'a
   posé : le remettre à sa place produirait un aller-retour à l'écran. */
.series-item-timeline-pending {
	opacity: 0.55;
	pointer-events: none;
}

.series-item-timeline-event-movable:hover,
.series-item-timeline-event-period[data-cultivation]:hover,
.series-item-timeline-event-period[data-flow]:hover,
.series-item-timeline-event-shiftable:hover {
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
}

.series-item-timeline-holding,
.series-item-timeline-holding:hover {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	cursor: grabbing;
}

.series-item-timeline-ghost {
	opacity: 0.35;
	filter: grayscale(1);
	z-index: 0;
}

/* Une série qui change de rang après une modification de sa date de semis ou de
   plantation : elle glisse de son ancienne place à la nouvelle plutôt que de
   réapparaître ailleurs. */
.series-item-planning.series-item-moving {
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	position: relative;
	z-index: 4;
}

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

	.series-item-planning.series-item-moving {
		transition: none;
	}

}

.series-item-wrapper > .series-item-ruler {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	min-width: 0;
	background-color: #0000000a;
	pointer-events: none;
}

.series-views {
	margin-bottom: 1rem;
}

div.series-item-timeline {
	align-self: center;
	position: relative;
	display: flex;
	align-items: center;
	height: 2.1rem;
	overflow: hidden;
}

/* La forme de la pastille vient du composant `util-timeline-event` de component.css, partagé avec
   la frise de comparaison d'un groupe. Ne reste ici que son placement sur l'axe de jours de cet
   écran, et la couleur, qui est celle de l'intervention. */
div.series-item-timeline-event {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: white;
}

div.series-item-timeline:not(.series-item-timeline-full) div.series-item-timeline-event {
	border: 1px solid var(--muted) !important;
}

div.series-item-timeline-event.series-item-timeline-event-expected > span {
	padding: 0.1rem;
	border-radius: var(--radius);
}

/* Les barres passent au-dessus de la grille (et de son trait de semaine en
   cours), qui est un calque posé sur toute la hauteur du plan. */
div.series-item-timeline-event {
	z-index: 1;
}

/* La forme du ruban vient de `util-timeline-event-frame`, partagé. Ne reste ici que le débordement,
   que la barre de progression `--series-done` a besoin de couper. */
div.series-item-timeline-event.series-item-timeline-event-full {
	overflow: hidden;
}

div.series-item-timeline-event-full[style*="--series-done"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--series-done);
	background-color: white;
}

.series-item-timeline-event-done {
	cursor: not-allowed;
}

/* Faite, donc plus déplaçable, mais elle ouvre toujours sa fiche : c'est un clic. */
.series-item-timeline-event-done.series-item-timeline-event-detailed {
	cursor: pointer;
}

/* La bulle du glissé, sous la pastille tenue : ce qui suit, et le choix de
   l'emmener ou non. Chargée à l'appui long, remplacée par le serveur. */
.series-item-timeline-choice {
	position: absolute;
	z-index: 40;
	min-width: 15rem;
	max-width: 20rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: white;
	box-shadow: var(--shadow-v2);
	font-size: 0.8rem;
	cursor: default;
}

.series-item-timeline-choice-loading {
	min-height: 2rem;
	opacity: 0.6;
}

.series-item-timeline-choice-title {
	font-weight: bold;
	margin-bottom: 0.4rem;
}

.series-item-timeline-choice-title span {
	font-family: var(--series-mono);
	font-weight: normal;
	color: var(--muted);
	margin-left: 0.25rem;
}

.series-item-timeline-choice-list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 0.75rem;
}

.series-item-timeline-choice-list li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.15rem 0;
}

.series-item-timeline-choice-list li > span:last-child {
	margin-left: auto;
	font-family: var(--series-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.series-item-timeline-choice-list .action-circle {
	width: 0.7rem;
	height: 0.7rem;
	margin: 0;
}

.series-item-timeline-choice-harvest {
	display: inline-flex;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background-color: var(--harvest);
	color: white;
	font-size: 0.45rem;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.series-item-timeline-choice-alone {
	color: var(--muted);
	font-size: 0.75rem;
}

/* Les deux cibles du glissé : monter emmène la suite, descendre laisse le reste
   en place. Elles se dessinent autour de la pastille tenue et s'allument quand
   le geste les atteint. */
/* Au-dessus de la bulle qui détaille ce que « la suite » contient : c'est la
   cible qui décide du geste, elle ne doit jamais passer dessous. */
.series-item-timeline-targets {
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	z-index: 41;
	pointer-events: none;
}

.series-item-timeline-target {
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	padding: 0.3rem 0.85rem;
	border-radius: 1rem;
	border: 2px dashed var(--muted);
	background-color: white;
	color: var(--text);
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--shadow-v2);
	transition: background-color 0.1s, color 0.1s, border-color 0.1s, transform 0.1s;
}

.series-item-timeline-target-up {
	bottom: 1.9rem;
}

.series-item-timeline-target-down {
	top: 1.9rem;
}

/* Celle qui est retenue se détache franchement de l'autre : c'est elle qui dira
   ce que le lâcher va faire. */
.series-item-timeline-targets.is-up .series-item-timeline-target-up,
.series-item-timeline-targets.is-down .series-item-timeline-target-down {
	background-color: var(--primary);
	border-color: var(--primary);
	border-style: solid;
	color: white;
	transform: translateX(-50%) scale(1.08);
}

/* Ce qui suivrait, dessiné en fantôme à sa position d'arrivée pendant le glissé. */
.series-item-timeline-follower {
	opacity: 0.45;
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
	pointer-events: none;
}

/* Au doigt : pas de menu contextuel ni de sélection de texte sur l'appui long,
   et une zone de touche de 44 px autour de cibles qui n'en font que 25. Le
   pseudo-élément agrandit la prise sans toucher au dessin. */
.series-item-timeline-event-movable,
.series-item-timeline-event-period,
.series-item-timeline-event-shiftable,
.series-item-timeline-bound {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

@media (pointer: coarse) {

	.series-item-timeline-event-movable::after,
	.series-item-timeline-event-period::after {
		content: "";
		position: absolute;
		inset: -0.625rem;
	}

	.series-item-timeline-bound {
		width: 2.75rem;
		height: 2.75rem;
		opacity: 1;
	}

	.series-item-timeline-bound-first {
		left: -1.375rem;
	}

	.series-item-timeline-bound-last {
		right: -1.375rem;
	}

}

/* Les repères de semaine se posent sous la piste, dans la marge de la ligne :
   la piste déborde donc au survol, et la ligne passe devant sa voisine. */
.series-item-timeline-marks {
	display: none;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 12;
}

.series-item-planning:hover .series-item-timeline-marks {
	display: block;
}

.series-item-planning:hover div.series-item-timeline {
	overflow: clip visible;
}

.series-item-planning:hover {
	z-index: 3;
}

.series-item-planning:has(#series-choice) {
	z-index: 5;
}

.series-item-timeline-mark,
.series-item-timeline-delay span {
	position: absolute;
	top: calc(100% - 0.15rem);
	transform: translateX(-50%);
	padding: 0 0.125rem;
	background-color: white;
	font-family: var(--series-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.625rem;
	line-height: 1;
	color: var(--muted);
	white-space: nowrap;
}

.series-item-timeline-mark {
	color: var(--primary);
}

.series-item-timeline-delay {
	position: absolute;
	top: calc(100% + 0.15rem);
	height: 0;
	border-top: 1px dotted var(--muted);
}

.series-item-timeline-delay span {
	left: 50%;
	top: -0.3rem;
}

div.series-item-timeline-event.series-item-timeline-event-expected {
	border: 1px solid var(--border);
}

div.series-item-timeline-event-min div.series-item-timeline-event:not(.series-item-timeline-event-full) {
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

div.series-item-timeline-event-max div.series-item-timeline-event:not(.series-item-timeline-event-full) {
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}


div.series-item-planning-timeline {
	margin-left: var(--series-timeline-gap);
	position: relative;
}

div.series-item-planning-timeline.util-table-header {
	padding-bottom: 0;
}

div.series-item:not(.series-item-header) div.series-item-planning-timeline {
	height: 100%;
}

div.series-item:not(.series-item-header) div.series-item-planning-summary {
	text-align: right;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.2px;
	line-height: 1.2;
}

div.series-item-title div.series-item-planning-summary {
	font-variant-numeric: tabular-nums;
}

.series-item-planning.series-item-header > .util-table-header,
.series-item-harvesting.series-item-header > .util-table-header,
.series-item-working-time.series-item-header > .util-table-header {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1.15;
	padding-top: 0.5rem;
	padding-bottom: 0.375rem;
	align-items: end;
	color: var(--muted);
}

.series-item-harvesting.series-item-header > .util-table-header.text-center,
.series-item-working-time.series-item-header > .util-table-header.text-center {
	justify-content: center;
}

.series-item-planning-gap {
	color: inherit;
	opacity: 0.55;
	font-size: 0.7rem;
	margin-left: 0.1875rem;
}

.series-item-planning-unit {
	color: var(--muted);
	font-weight: normal;
	text-transform: none;
}

div.series-item-title div.series-item-planning-summary {
	letter-spacing: -0.2px;
	font-weight: bold;
}

/* Affichage des semences et plants */
div.series-item-seeds {
	display: grid;
	grid-gap: 0.25rem;
	align-items: baseline;
}

div.series-item-seeds-all {
	grid-template-columns: minmax(9rem, 18%) 6.5rem 6rem 7rem 6.5rem 6.5rem 1fr;
}

div.series-item-seeds-sowing {
	grid-template-columns: minmax(13rem, 20%) 8rem 7rem 9rem 1fr;
}

div.series-item-seeds-sowing .series-item-young-plant,
div.series-item-seeds-sowing .series-item-young-plant-bought {
	display: none;
}

div.series-item-seeds-young-plant {
	grid-template-columns: minmax(12rem, 20%) 8rem 7rem 9rem 9rem 1fr;
}

div.series-item-seeds-young-plant .series-item-young-plant-bought {
	display: none;
}

div.series-item-seeds-young-plant-bought {
	grid-template-columns: minmax(15rem, 20%) 9rem 1fr;
}

div.series-item-seeds-young-plant-bought .series-item-sowing,
div.series-item-seeds-young-plant-bought .series-item-stock,
div.series-item-seeds-young-plant-bought .series-item-buy,
div.series-item-seeds-young-plant-bought .series-item-young-plant {
	display: none;
}

div.series-item-seeds-young-plant-bought .util-table-header br {
	display: none;
}

div.series-item-seeds.series-item-title {
	grid-template-columns: 1fr;
}

@media (min-width: 1600px) {

	div.series-item-seeds-all {
		grid-template-columns: minmax(10rem, 18%) 8rem 7rem 8rem 8rem 8rem 1fr;
	}

}
@media (max-width: 991px) {

	div.series-item-seeds-all {
		grid-template-columns: minmax(9rem, 20%) 6.5rem 6rem 7rem 6.5rem 1fr;
	}

	div.series-item-seeds-all .series-item-young-plant {
		display: none;
	}

	div.series-item-seeds-sowing {
		grid-template-columns: minmax(12rem, 20%) 6.5rem 6rem 7rem 1fr;
	}

	div.series-item-seeds-young-plant-bought {
		grid-template-columns: minmax(15rem, 20%) 9rem 1fr;
	}

	div.series-item-seeds-young-plant {
		grid-template-columns: minmax(11rem, 20%) 6.5rem 6rem 7rem 7rem 1fr;
	}

	div.series-item-seeds.series-item-title {
		grid-template-columns: 1fr;
	}

}


div.series-item-seeds-value {
	text-align: right;
}

div.series-item-seeds-alert {
	font-size: 0.8rem;
	line-height: 1.2;
	margin-top: 0.125rem;
}

div.series-item-seeds-supplier {
	font-size: 0.75rem;
	line-height: 1;
}

div.series-item-seeds-weight {
	font-size: 0.75rem;
	line-height: 1;
	margin-bottom: 0.25rem;
	color: var(--muted);
}

div.series-item-seeds-series {
	margin-left: 1rem;
}

div.series-item-seeds-week {
	padding: 0 1rem;
	margin-top: 2rem;
}

div.series-item-header + div.series-item-seeds-week {
	margin-top: 0.5rem;
}

/* Affichage du prévisionnel */
div.series-item-forecast {
	display: grid;
	grid-template-columns: 1fr 10rem 10rem 5rem 3rem 7rem 7rem 5rem 3rem 7rem 4rem;
	align-items: center;
	text-decoration: none;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

@media (min-width: 1200px) {

	div.series-item-forecast {
		grid-template-columns: 1fr 10rem 10rem 6rem 4rem 7rem 8rem 5rem 3rem 7rem 4rem;
	}

}

div.series-item-forecast:hover {
	background-color: #7771;
}

div.series-item-forecast > * {
	padding-bottom: 0.25rem;
	padding-top: 0.25rem;
}

div.series-item-forecast .util-table-header {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

div.series-item-forecast.series-item-title {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

div.series-item-forecast.series-item-gap {
	height: 0.5rem;
}

.series-item-forecast-objective-title {
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	background-color: #7771;
	padding: 0.5rem 0;
	border-left: 1px solid var(--muted);
	border-right: 1px solid var(--muted);
	border-top: 1px solid var(--muted);
}


.series-item-forecast-objective {
	background-color: #bbb1;
	padding: 0 0.5rem;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: end;
}
.series-item-forecast-objective.series-item-forecast-objective-unit {
	justify-content: start;
}

.series-item-forecast-objective-first {
	border-left: 1px solid var(--muted);
	align-self: stretch;
}
.series-item-forecast-objective-last {
	border-right: 1px solid var(--muted);
	align-self: stretch;
	padding-right: 1rem;
}

.series-item-forecast-objective-title,
.series-item-forecast-objective-first {
	margin-left: 1rem;
}

.series-item-forecast-objective.util-table-header {
	align-self: stretch;
	display: flex;
	align-items: end;
	justify-content: end;
	text-align: center;
}

.series-item-forecast-series {
	padding-right: 0.5rem;
}

a.series-item-forecast-missing {
	font-size: 0.9rem;
	letter-spacing: -0.1px;
	color: var(--muted);
}

.series-item-forecast-series-gap {
	padding-left: 1rem;
	border-left: 2px solid var(--muted);
	margin-left: 1rem;
}

.series-item-forecast-area {
	text-align: right;
}

.series-item-forecast-sales {
	text-align: right;
}

.series-item-forecast-sales:not(.color-muted) {
	font-weight: bold;
	font-size: 1.2rem;
}

.series-item-forecast-harvest-expected {
	text-align: right;
	padding-right: 0;
}

.series-item-forecast-price {
	display: grid;
	align-items: center;
	column-gap: 1rem;
	grid-template-columns: 1fr 3rem;
}

.series-item-forecast-price > div:first-child {
	text-align: right;
}

.series-item-forecast-price > div:last-child {
	font-size: 0.8rem;
}

.series-item-forecast-price .badge {
	text-align: center;
}

.series-item-forecast-actions {
	text-align: right;
}

.series-total-forecast {
	display: grid;
	grid-template-columns: repeat(6, auto);
	gap: 0.5rem 1rem;
	align-items: baseline;
	background-color: var(--secondary);
	color: white;
}

@media (max-width: 575px) {

	.series-total-forecast {
		grid-template-columns: repeat(2, auto);
	}

}

.series-total-forecast-label {
	line-height: 1.2;
	text-align: right;
}

.series-total-forecast-value {
	font-size: 1.5rem;
	font-weight: bold;
}

/* Affichage des récoltes */
.series-item-harvesting-wrapper {
	--series-details: 16rem;
	--series-yield: 6rem;
	--series-gap: 0.5rem;
}

@media (max-width: 991px) {

	.series-item-harvesting-wrapper {
		--series-details: 14rem;
		--series-yield: 5rem;
	}

}

div.series-item-harvesting {
	display: grid;
	grid-template-columns:
		var(--series-details)
		repeat(5, var(--series-yield))
		1fr;
	grid-column-gap: var(--series-gap);
	align-items: center;
	text-decoration: none;
}

.series-item-harvesting-wrapper div.series-grid {
	left: calc(
		1rem + var(--series-details) + 5 * var(--series-yield) + 6 * var(--series-gap)
	);
	right: 1rem;
}

@media (min-width: 1200px) {

	.series-item-harvesting {
		font-size: 0.9rem;
	}

}

div.series-item-title div.series-item-harvesting-yield {
	color: var(--muted);
}

div.series-item-harvesting-weeks {
	position: relative;
	align-self: stretch;
	min-height: 1.75rem;
}

.series-item-harvesting-run,
.series-item-harvesting-done {
	position: absolute;
	top: calc(50% - 0.25rem);
	height: 0.5rem;
	border-radius: 0.25rem;
}

.series-item-harvesting-run {
	background-color: color-mix(in srgb, var(--harvest) 25%, transparent);
}

.series-item-harvesting-done {
	background-color: var(--harvest);
}

.series-item-header div.series-item-harvesting-weeks {
	position: static;
}

div.series-item-harvesting-evolution {
	font-size: 0.8rem;
	line-height: 1.2;
}

span.series-item-planning-details-variety {
	margin-left: 0.5rem;
}

span.series-item-planning-details-variety {
	color: var(--muted);
	line-height: 1.2;
	font-size: 0.9rem;
}
@media screen {

	@media (max-width: 1199px) {

		.series-item-planning-details-variety {
			display: none;
		}

	}

}

/* Affichage du temps de travail */
.series-item-working-time-wrapper {
	--series-details: 22rem;
	--series-area: 7rem;
	--series-harvested: 7rem;
	--series-worked: 7rem;
	--series-gap: 0.5rem;
}

@media (max-width: 1199px) {

	.series-item-working-time-wrapper {
		--series-details: 18rem;
		--series-area: 6rem;
		--series-harvested: 0px;
		--series-worked: 6rem;
	}

}

@media (max-width: 575px) {

	.series-item-working-time-wrapper {
		--series-details: 12rem;
	}

}

div.series-item-working-time {
	display: grid;
	grid-template-columns:
		var(--series-details)
		var(--series-area)
		var(--series-harvested)
		var(--series-worked)
		1fr;
	grid-column-gap: var(--series-gap);
	align-items: baseline;
	text-decoration: none;
}

div.series-item-working-time > .series-item-working-time-tasks {
	overflow: hidden;
	position: relative;
}

div.series-item-working-time-tasks {
	display: flex;
	align-items: start;
	column-gap: 0.5rem;
}

.series-item-header .series-item-working-time-tasks {
	display: block;
}

div.series-item-working-time-task {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

div.series-item-working-time-task-content {
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	text-align: center;
	color: white;
}

div.series-item-working-time-task-content h5 {
	margin: 0;
	white-space: nowrap;
}


@media (min-width: 1200px) {

	div.series-item-working-time-task-content h5 {
		font-size: 0.9rem;
		letter-spacing: -0.1px;
	}

}

span.series-item-working-time-task-value {
	font-size: 1rem;
}

div.series-item-working-time-task-pace {
	margin-top: 0.25rem;
	font-size: 0.8rem;
	white-space: nowrap;
}

/* Form */
div.series-create-use {
	background-color: white;
	position: relative;
	margin-bottom: 1.5rem;
}

#series-create-plant-list {
	margin-bottom: 2rem;
	display: grid;
	grid-row-gap: 1.5rem;
}

@media (max-width: 991px) {

	#series-create-plant-list {
		grid-template-columns: 1fr;
	}

}

#series-create-add-plant {
	margin: 0 0 3rem 0;
	opacity: 0.7;
	transition: opacity 0.5s;
}

#series-create-add-plant:hover {
	opacity: 1;
}

div.series-create-plant {
	padding: 1rem;
	background-color: var(--background-light);
	position: relative;
	border-radius: var(--radius);
}

div.series-create-plant:not(:last-child):after {
	position: absolute;
	content: '+';
	background-color: var(--primary);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	color: white;
	font-size: 3rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	left: calc(50% - 1.75rem);
	bottom: -2.5rem;
	z-index: 1;
	line-height: 1;
}

div.series-create-plant .util-action {
	margin-bottom: 2rem;
}

div.series-create-plant-title {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.5rem;
	align-items: center;
}

div.series-create-plant-title h4 {
	margin: 0;
}

div.series-submit {
	margin-bottom: 1rem;
}

/* Gestion du sol */
#series-soil {
	width: 100%;
	margin-bottom: 1.5rem;
}

#series-soil .crop-item-body {
	overflow-x: auto;
}

/* `crop-item-title` (production/sequence) réserve sa première colonne à la vignette de l'espèce,
   que l'assolement ne montre pas */
#series-soil .crop-item-title {
	grid-template-columns: 1fr auto;
}

.series-soil-title {
	line-height: 1;
}

/* Affichage des pérennes pour import sur une saison donnée */
div.series-import-cultivation {
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 0.25rem;
}

@media (max-width: 991px) {

	div.series-import-cultivation > * {
		display: none;
	}

}

/* Affichage des emplacements */
div.series-soil-grid {
	display: grid;
	align-items: center;
	grid-row-gap: 0.25rem;
	grid-column-gap: 1rem;
	padding: 0.5rem;
	min-width: 600px;
}

div.series-soil-grid-series {
	grid-template-columns: auto auto auto auto auto auto 1fr;
}

div.series-soil-grid-task {
	grid-template-columns: auto auto 1fr;
}

@media (min-width: 768px) {

	div.series-soil-grid {
		display: grid;
		align-items: center;
		grid-column-gap: 1.5rem;
	}

	div.series-soil-grid-series {
		grid-template-columns: auto auto auto 1fr auto auto auto;
	}

	div.series-soil-grid-task {
		grid-template-columns: auto auto 1fr;
	}

}

div.series-soil-grid div.series-soil-grid-total {
	border-top: 1px solid var(--border);
	align-self: start;
}

div.series-soil-grid div.series-soil-grid-zone {
	text-transform: uppercase;
	white-space: nowrap;
}

div.series-soil-grid div.series-soil-grid-plot {
	white-space: nowrap;
}

div.series-soil-grid div.series-soil-grid-bed {
	font-weight: bold;
	white-space: nowrap;
}

div.series-soil-grid div.series-soil-grid-size {
	text-align: right;
}

div.series-soil-grid div.series-soil-grid-use {
	text-align: right;
}

div.series-soil-grid div.series-soil-grid-area {
	text-align: right;
	white-space: nowrap;
}

div.series-soil-empty {
	padding: 1rem;
}

/* Affichage du temps de travail sur une série */
div.series-timesheet {
	display: grid;
	grid-template-columns: min-content auto auto 1fr 1fr;
	grid-column-gap: 2rem;
	grid-row-gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

@media (max-width: 767px) {

	div.series-timesheet {
		grid-template-columns: auto auto;
	}


	div.series-timesheet-image {
		display: none;
	}

}

div.series-timesheet-cultivation {
	display: flex;
}

div.series-timesheet-cultivation h4 {
	margin: 0;
}

div.series-timesheet-total,
div.series-timesheet-sum {
	text-align: right;
	font-weight: bold;
	font-size: 1.2rem;
}

div.series-timesheet-sum {
	margin-right: -0.75rem;
}

div.series-timesheet-content {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	grid-column: span 2;
	column-gap: 1rem;
	row-gap: 0.5rem;
}

td.series-field-cultivations {
	background: linear-gradient(150deg, rgba(0, 0, 0, 0.03) 0, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
	line-height: 1.3;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1rem;
}

.series-field-cultivation {
	font-size: 0.9rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	margin-right: .5rem;
}

.series-field-cultivation:not(:last-child) {
	padding-right: 0.5rem;
}

.series-field-cultivation input:checked + * {
	font-weight: bold;
}

.series-duplicate-copies {
	line-height: 1;
	display: flex;
	column-gap: .75rem;
	align-items: center;
	user-select: none;
}

.series-duplicate-copies a {
	font-size: 1.5rem;
}

.series-duplicate-copies-disabled {
	pointer-events: none;
	opacity: .25;
}

.series-duplicate-copies-label {
	font-weight: bold;
	font-size: 1.1rem;
}

.series-duplicate-list h5 {
	margin-bottom: 0.5rem;
}

.series-duplicate-list[data-copies="1"] h5 {
	display: none;
}

.series-duplicate-copy:not(:first-child) {
	margin-top: 1rem;
}

.series-duplicate-interval {
	margin-top: 0.25rem;
}

.series-duplicate-list[data-interval="0"] .series-duplicate-interval {
	display: none;
}


#series-selector {
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--nav-width);
	z-index: 998;
	background-color: white;
	box-shadow: 0 0 1rem #0003;
	position: fixed;
	padding: 0 0.75rem 3rem 0.75rem;
	overflow-y: auto;
}

body.series-selector-shown #series-selector-button {
	display: none;
}

.series-selector-cultivation {
	display: block;
	text-decoration: none;
	background-color: var(--background-light);
}

.series-selector-cultivation.selected {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	border: 0;
	outline: 0;
}

.series-selector-cultivation:first-child {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.series-selector-cultivation:last-child {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.series-selector-cultivation:not(:last-child) {
	border-bottom: 1px solid var(--border);
}

.series-selector-cultivation:hover {
	cursor: pointer;
	background-color: var(--background-body);
}

.series-selector-cultivation .place-context {
	cursor: default;
}

.series-selector-cultivation.selected {
	background-color: var(--info);
}

.series-selector-cultivation:not(.selected) .series-selector-header a {
	pointer-events: none;
}

.series-selector-closed:not(.selected) {
	opacity: 0.5;
}

.series-selector-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.375rem 0.5rem;
}

.series-selector-cultivation:not(.selected) {
	cursor: pointer;
}

.series-selector-name {
	margin-right: 0.375rem;
}

.series-selector-dates {
	padding: 0.25rem 0 0;
	font-size: 0.75rem;
	opacity: 0.85;
}

.series-selector-open {
	flex: none;
	color: var(--muted);
	font-size: 0.75rem;
}

.series-selector-cultivation:not(.selected) .series-selector-open {
	display: none;
}

.series-selector-cultivation.selected .series-selector-open {
	color: white;
}

.series-selector-place {
	font-size: 0.85rem;
	white-space: nowrap;
}

.series-selector-place[data-color="zero"] {
	color: var(--danger);
}

.series-selector-place[data-color="gap"] {
	color: var(--warning);
}

/* Sans objectif, il n'y a rien à rapporter. Objectif atteint, le vert le dit
   déjà et les deux nombres sont les mêmes. */
.series-selector-cultivation:not(.selected) .series-selector-place[data-color=""] .series-selector-target,
.series-selector-cultivation:not(.selected) .series-selector-place[data-color="done"] .series-selector-target {
	display: none;
}
/* Le diagramme du plan, posé à la verticale sur la fiche d'une série : une
   bande par semaine ; une gouttière de mois à la verticale ; un rail neutre
   qui porte le ruban, la campagne attendue et les pastilles ; les interventions
   collées au rail. */
.flow-timeline-vertical {
	--flow-band: 1.5rem;
}

.flow-timeline-vertical .flow-timeline {
	grid-template-columns: 1.5rem 4rem 2.2rem 1fr;
	grid-column-gap: 0.25rem;
	align-items: stretch;
}

@media (min-width: 992px) {

	.flow-timeline-vertical .flow-timeline,
	.flow-timeline-vertical .flow-timeline-year {
		grid-template-columns: 1.5rem 6rem 2.2rem 1fr;
	}

	.flow-timeline-vertical .flow-timeline-axis-days br {
		display: none;
	}

}

.flow-timeline-vertical .flow-timeline-header {
	position: sticky;
	top: calc(var(--mainSticky) - 1px);
	z-index: 2;
	background: var(--background-body);
	border-bottom: 1px solid var(--border-light);
}

.flow-timeline-vertical .flow-timeline-body {
	background-color: transparent;
	padding-bottom: 0.5rem;
}

/* L'en-tête porte le « tout cocher » à l'aplomb des cases des fiches : la fiche
   commence en deuxième colonne de sa ligne (1,55 rem), recule de 2,25 rem, et
   rend 1,1 rem de marge + 1 px de bordure. */
.flow-timeline-vertical .flow-timeline-rows-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.flow-timeline-vertical .flow-timeline-rows-header .flow-timeline-update {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0 calc(0.4rem + 1px);
	padding: 0;
	width: auto;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-transform: inherit;
}


.flow-timeline-vertical .flow-timeline-axis-header {
	padding-left: 0.5rem;
}

/* ---- l'année ---- */

.flow-timeline-vertical .flow-timeline-year {
	grid-template-columns: 1.5rem 4rem 2.2rem 1fr;
	background: none;
	border-top: 0;
}

.flow-timeline-vertical div.flow-timeline-year div.flow-timeline-year-value {
	width: auto;
	text-align: left;
	padding: 0.5rem 0 0.2rem 0.5rem;
	font-family: var(--series-mono);
	font-size: 0.75rem;
	font-weight: bold;
	letter-spacing: 0.3px;
	color: var(--text);
}

/* ---- les bandes ---- */

.flow-timeline-vertical .flow-timeline-band {
	min-height: var(--flow-band);
	border-top: 0;
	position: relative;
	background: none;
}

.flow-timeline-vertical .flow-timeline-band {
	border-bottom: 1px dashed #0001;
}

.flow-timeline-vertical .flow-timeline-band-occupied {
	border-bottom: 1px solid var(--border);
}

.flow-timeline-vertical .flow-timeline-harvest-note {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
}

/* ---- la gouttière des mois : un trait par mois, un cran à chaque bout, le
   nom à la verticale au début ---- */

.flow-timeline-vertical .flow-timeline-month {
	position: relative;
}

.flow-timeline-vertical .flow-timeline-month::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	border-left: 1px solid var(--border);
}

.flow-timeline-vertical .flow-timeline-band-month-first .flow-timeline-month::before {
	top: 0.25rem;
}

.flow-timeline-vertical .flow-timeline-band-month-last .flow-timeline-month::before {
	bottom: 0.25rem;
}

.flow-timeline-vertical .flow-timeline-band-month-first .flow-timeline-month::after,
.flow-timeline-vertical .flow-timeline-band-month-last .flow-timeline-month::after {
	content: "";
	position: absolute;
	left: calc(50% - 0.25rem);
	width: 0.5rem;
	border-top: 1px solid var(--border);
}

.flow-timeline-vertical .flow-timeline-band-month-first .flow-timeline-month::after {
	top: 0.25rem;
}

.flow-timeline-vertical .flow-timeline-band-month-last .flow-timeline-month::after {
	bottom: 0.25rem;
	top: auto;
}

/* Un mois qui commence et finit dans la même bande repliée : deux crans, on
   dessine les deux (le ::after ne peut porter qu'un ; le second vient du
   ::before réduit à ses bouts). */
.flow-timeline-vertical .flow-timeline-month-name {
	position: absolute;
	left: 50%;
	top: 0.6rem;
	transform: translateX(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--background-body);
	padding: 0.2rem 0;
	white-space: nowrap;
	z-index: 1;
}

/* ---- l'axe ---- */

.flow-timeline-vertical .flow-timeline-axis {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.1rem 0 0.1rem 0.5rem;
	color: var(--muted);
	text-decoration: none;
	cursor: pointer;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
}

.flow-timeline-vertical .flow-timeline-band-occupied .flow-timeline-axis {
	align-items: flex-start;
	flex-direction: column;
	gap: 0;
	justify-content: flex-start;
	padding-top: 0.55rem;
}

.flow-timeline-vertical .flow-timeline-axis-week {
	font-family: var(--series-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.7rem;
	line-height: 1;
	color: var(--text-intermediate);
}

.flow-timeline-vertical .flow-timeline-band-occupied .flow-timeline-axis-week {
	font-size: 0.85rem;
	font-weight: bold;
	color: var(--text);
}

.flow-timeline-vertical .flow-timeline-band-today .flow-timeline-axis-week {
	color: var(--secondary);
}

.flow-timeline-vertical .flow-timeline-axis-days {
	font-family: var(--series-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--muted);
}

.flow-timeline-vertical .flow-timeline-axis-days-separator {
	display: none;
	padding: 0 0.15rem;
}

@media (min-width: 992px) {

	.flow-timeline-vertical .flow-timeline-axis-days-separator {
		display: inline;
	}

}

/* ---- le rail : neutre ; ruban, campagne, pastilles ---- */

.flow-timeline-vertical .flow-timeline-rail {
	position: relative;
	z-index: 3;
}

.flow-timeline-vertical .flow-timeline-rail::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	border-left: 1px dashed var(--border);
}

/* Le ruban : la ligne de métro, neutre et pleine, de la première intervention à
   la fin de la campagne. */
.flow-timeline-vertical .flow-timeline-band-span .flow-timeline-rail::before {
	width: 4px;
	bottom: -1px;
	border: 0;
	border-radius: 2px;
	background-color: var(--border);
	transform: translateX(-50%);
}

.flow-timeline-vertical .flow-timeline-band-span-first .flow-timeline-rail::before {
	top: 0.5rem;
}

.flow-timeline-vertical .flow-timeline-band-span-last .flow-timeline-rail::before {
	bottom: 0.5rem;
}

/* La campagne de récolte attendue : la barre creuse du plan, à la verticale,
   une par culture, côte à côte sur le rail (la culture k à k pas du centre),
   avec son R au milieu et ses deux poignées. Chaque bande porte son segment ;
   il déborde d'un pixel en bas pour couvrir le trait de la semaine. */
.flow-timeline-vertical .flow-timeline-harvest {
	--harvest-width: min(1.25rem, calc(2.2rem / var(--n) - 0.15rem));
	--harvest-step: calc(var(--harvest-width) + 0.1rem);
	position: absolute;
	left: calc(50% + (var(--k) - (var(--n) - 1) / 2) * var(--harvest-step));
	top: 0;
	bottom: -1px;
	width: var(--harvest-width);
	transform: translateX(-50%);
	border: 1px solid var(--harvest);
	border-top: 0;
	border-bottom: 0;
	background-color: var(--background-body);
	touch-action: none;
}

.flow-timeline-vertical .flow-timeline-harvest {
	cursor: grab;
}

.flow-timeline-vertical:not(:has(.flow-timeline-harvest-bound)) .flow-timeline-harvest {
	cursor: not-allowed;
}

.flow-timeline-vertical .flow-timeline-harvest-first {
	top: 0.2rem;
	border-top: 1px solid var(--harvest);
	border-radius: 1rem 1rem 0 0;
}

.flow-timeline-vertical .flow-timeline-harvest-last {
	bottom: 0.2rem;
	border-bottom: 1px solid var(--harvest);
	border-radius: 0 0 1rem 1rem;
}

.flow-timeline-vertical .flow-timeline-harvest-first.flow-timeline-harvest-last {
	border-radius: 1rem;
}

.flow-timeline-vertical .flow-timeline-harvest.is-held {
	border-color: var(--primary);
}

.flow-timeline-vertical .flow-timeline-harvest-label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 0.7rem;
	font-weight: bold;
	color: var(--harvest);
	pointer-events: none;
}

/* La vignette tient dans la largeur de sa barre : plus large, elle passerait
   par-dessus les campagnes voisines. */
.flow-timeline-vertical .flow-timeline-harvest-plant {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--harvest-width);
	height: var(--harvest-width);
	border-radius: 50%;
	border: 1px solid var(--harvest);
	background-color: var(--background-body);
	overflow: hidden;
	pointer-events: none;
}

/* La vignette garde une taille lisible et c'est la pastille qui la rogne : à
   trois campagnes sur le rail, une vignette mise à la largeur de la barre ne se
   reconnaîtrait plus. */
.flow-timeline-vertical .flow-timeline-harvest-plant .plant-vignette,
.flow-timeline-vertical .flow-timeline-harvest-plant .media-circle-view {
	width: 0.85rem !important;
	height: 0.85rem !important;
	min-width: 0.85rem !important;
	flex: none;
}

.flow-timeline-vertical .flow-timeline-harvest-plant svg {
	width: 100%;
	height: 100%;
}

.flow-timeline-vertical .flow-timeline-harvest-bound {
	position: absolute;
	left: 50%;
	width: 0.75rem;
	height: 0.75rem;
	transform: translateX(-50%);
	border-radius: 50%;
	background-color: white;
	border: 2px solid var(--harvest);
	box-shadow: 0 1px 2px #0003;
	z-index: 3;
	cursor: ns-resize;
	touch-action: none;
}

/* Les poignées débordent des bouts de la barre : dans une semaine occupée, la
   première pastille est juste sous le sommet de la barre, la poignée s'en écarte. */
.flow-timeline-vertical .flow-timeline-harvest-bound-first {
	top: -0.45rem;
}

.flow-timeline-vertical .flow-timeline-harvest-bound-last {
	bottom: -0.45rem;
}

.flow-timeline-vertical .flow-timeline-harvest-bound:hover,
.flow-timeline-vertical .flow-timeline-harvest-bound.is-held {
	background-color: var(--harvest);
}

.flow-timeline-vertical:has(.flow-timeline-harvest-bound.is-held) .flow-timeline-harvest-label,
.flow-timeline-vertical:has(.flow-timeline-harvest-bound.is-held) .flow-timeline-harvest-plant,
.flow-timeline-vertical:has(.flow-timeline-harvest.is-held) .flow-timeline-harvest-label,
.flow-timeline-vertical:has(.flow-timeline-harvest.is-held) .flow-timeline-harvest-plant,
.flow-timeline-vertical:has(.flow-timeline-harvest.is-held) .flow-timeline-harvest-note {
	opacity: 0;
}

.flow-timeline-vertical .flow-timeline-pill {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: bold;
	line-height: 1;
	border: 1px solid;
	background-color: white;
	color: white;
	box-shadow: 0 0 0 3px var(--background-body);
}

.flow-timeline-vertical .flow-timeline-pill.series-item-timeline-event-expected {
	background-color: white;
}

/* ---- les lignes : une pastille en tête, posée sur le rail par sa marge, et sa
   fiche découpée autour d'elle (l'encoche) ; la fiche recule d'un demi-rem pour
   laisser passer la barre de récolte ---- */

.flow-timeline-vertical .flow-timeline-rows {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.4rem 0.5rem 0.4rem 0;
	min-width: 0;
}

.flow-timeline-vertical .flow-timeline-band-empty .flow-timeline-rows {
	padding-top: 0;
	padding-bottom: 0;
}

.flow-timeline-vertical .flow-timeline-row {
	display: grid;
	grid-template-columns: 1.55rem 1fr;
	align-items: start;
	position: relative;
}

.flow-timeline-vertical .flow-timeline-row .flow-timeline-pill {
	margin-left: -2.075rem;
	margin-top: 0.4rem;
}

.flow-timeline-vertical .flow-timeline-card {
	position: relative;
	z-index: 2;
	min-width: 0;
	margin-left: -2.25rem;
	padding: 0.4rem 0.75rem 0.45rem 1.1rem;
	background-color: white;
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	transition: box-shadow 0.1s;
}

/* L'encoche : un disque de la couleur de la page posé sur le coin de la fiche,
   autour de la pastille. Un disque plutôt qu'un masque, pour que ce qui sort de
   la fiche (le menu d'une sélection unique) ne soit pas rogné. */
.flow-timeline-vertical .flow-timeline-card::before {
	content: "";
	position: absolute;
	left: -0.6rem;
	top: 1.15rem;
	width: 2.3rem;
	height: 2.3rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--background-body);
	z-index: 1;
	pointer-events: none;
}

/* Une ligne cochée passe devant ses voisines : son menu ne file pas dessous. */
.flow-timeline-vertical .flow-timeline-row-selected {
	z-index: 4;
}

.flow-timeline-vertical .flow-timeline-row:not(.flow-timeline-row-selected):hover .flow-timeline-card {
	box-shadow: var(--shadow-v2);
	border-color: var(--border);
}

.flow-timeline-vertical .flow-timeline-card-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.55rem;
}

.flow-timeline-vertical .flow-timeline-card-head .flow-timeline-text {
	flex: 0 0 auto;
}

.flow-timeline-vertical .flow-timeline-card-head .flow-timeline-description {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--muted);
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Une description à cases à cocher garde ses lignes : elle passe sous le titre. */
.flow-timeline-vertical .flow-timeline-card-head .flow-timeline-description:has(.flow-timeline-description-list) {
	flex-basis: 100%;
	order: 10;
	white-space: normal;
	color: var(--text);
}

.flow-timeline-vertical .flow-timeline-card-side {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	white-space: nowrap;
}

.flow-timeline-vertical .flow-timeline-card-side .flow-timeline-done {
	display: flex;
}

.flow-timeline-vertical .flow-timeline-card-side .tasks-planning-item-time {
	font-family: var(--series-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
}

/* La case en tête de fiche, avant le nom ; ce qui suit sous le titre (matériel,
   commentaires, description repliée) s'aligne sur le texte de la première ligne. */
.flow-timeline-vertical {
	--flow-check: 1.65rem;
}

.flow-timeline-vertical .flow-timeline-card-head label.flow-timeline-select {
	position: relative;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	background: none;
	flex: 0 0 auto;
}

/* Le menu d'une sélection unique s'accroche à sa case, pas à la bande. */
.flow-timeline-vertical .flow-timeline-card-head .batch-one-wrapper {
	left: calc(100% + 0.5rem);
	top: 50%;
	transform: translateY(-50%);
}

.flow-timeline-vertical .flow-timeline-card .flow-timeline-tools,
.flow-timeline-vertical .flow-timeline-card .flow-timeline-comments {
	margin-top: 0.15rem;
	padding-left: var(--flow-check);
}

.flow-timeline-vertical .flow-timeline-card-head .flow-timeline-description:has(.flow-timeline-description-list) {
	padding-left: var(--flow-check);
}

.flow-timeline-vertical .flow-timeline-row-selected .flow-timeline-card {
	background-color: color-mix(in srgb, var(--primary) 6%, white);
	border-color: var(--primary);
}

@media (max-width: 767px) {

	.flow-timeline-vertical .flow-timeline-card-head {
		flex-wrap: wrap;
	}

	.flow-timeline-vertical .flow-timeline-card-head .flow-timeline-description {
		flex-basis: 100%;
		order: 10;
		white-space: normal;
		margin-top: -0.1rem;
		padding-left: var(--flow-check);
	}

}

/* ---- les délais du plan : un trait à gauche du rail, d'une pastille à la
   suivante (ou au bout de la campagne), le nombre de semaines au milieu ---- */

.flow-timeline-vertical .flow-timeline-axis {
	position: relative;
	overflow: visible;
}

/* Une chaîne par culture : la k-ième dessine 0,55 rem plus à gauche. */
.flow-timeline-vertical .flow-timeline-delay {
	position: absolute;
	right: calc(-0.4rem + var(--chain, 0) * 0.55rem);
	width: 0.35rem;
	border-left: 1px dotted var(--muted);
	pointer-events: none;
}

@media (max-width: 991px) {

	.flow-timeline-vertical .flow-timeline-delay {
		display: none;
	}

}

.flow-timeline-vertical .flow-timeline-delay-full {
	top: 0;
	bottom: 0;
}

/* Le départ et l'arrivée : accrochés au centre de la première pastille de la
   bande (0,4 rem de marge des lignes + 0,4 rem de la pastille + son demi-rayon). */
/* Le départ est porté par la dernière ligne de la semaine, depuis le centre de
   sa pastille jusqu'au bas de la bande ; il traverse le rail vers la gauche
   (deux gouttières de 0,25 rem, le rail de 2,2 rem, le trait qui déborde de
   0,05 rem à droite de l'axe). */
.flow-timeline-vertical .flow-timeline-row .flow-timeline-delay-start-row {
	left: calc(-2.65rem - var(--chain, 0) * 0.55rem);
	right: auto;
	top: 1.175rem;
	bottom: auto;
	height: calc(100% - 1.175rem + 0.4rem);
	border-top: 1px dotted var(--muted);
	z-index: 0;
}

.flow-timeline-vertical .flow-timeline-delay-end-pill {
	top: 0;
	height: 1.575rem;
	border-bottom: 1px dotted var(--muted);
}

.flow-timeline-vertical .flow-timeline-delay-start-top {
	top: 0.2rem;
	bottom: 0;
	border-top: 1px dotted var(--muted);
}

.flow-timeline-vertical .flow-timeline-delay-end-bottom {
	top: 0;
	bottom: 0.2rem;
	border-bottom: 1px dotted var(--muted);
}

.flow-timeline-vertical .flow-timeline-delay-start-bottom {
	bottom: 0.2rem;
	height: 0;
	border-top: 1px dotted var(--muted);
}

.flow-timeline-vertical .flow-timeline-delay-end-top {
	top: 0.2rem;
	height: 0;
	border-bottom: 1px dotted var(--muted);
}

.flow-timeline-vertical .flow-timeline-delay-label {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(180deg);
	writing-mode: vertical-rl;
	padding: 0.15rem 0;
	background-color: var(--background-body);
	font-family: var(--series-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.625rem;
	line-height: 1;
	color: var(--muted);
	white-space: nowrap;
}

.flow-timeline-vertical .flow-timeline-moving {
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
	.flow-timeline-vertical .flow-timeline-moving {
		transition: none;
	}
}

/* ---- le glissé ---- */

.flow-timeline-vertical .flow-timeline-pill-movable {
	cursor: grab;
	touch-action: pan-x;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.flow-timeline-vertical .flow-timeline-pill-movable:hover {
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
}

.flow-timeline-vertical .flow-timeline-pill-holding {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	opacity: 0.35;
}

.flow-timeline-vertical .flow-timeline-pill-selected {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.flow-timeline-vertical .flow-timeline-pill-will-move {
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
	transform: scale(1.12);
	transition: transform 0.15s;
}

/* La campagne qui partira avec la suite : la barre passe en pointillé primaire. */
.flow-timeline-vertical .flow-timeline-harvest-will-move {
	border-color: var(--primary);
	border-style: dashed;
	background-color: color-mix(in srgb, var(--primary) 6%, var(--background-body));
}

.flow-timeline-vertical .flow-timeline-harvest-will-move .flow-timeline-harvest-label,
.flow-timeline-vertical .flow-timeline-harvest-will-move .flow-timeline-harvest-bound {
	color: var(--primary);
	border-color: var(--primary);
}

.flow-timeline-vertical .flow-timeline-pill-pending {
	opacity: 0.55;
	pointer-events: none;
}

.flow-timeline-pill-ghost,
.flow-timeline-pill-follower {
	position: fixed;
	z-index: 60;
	width: 1.55rem;
	height: 1.55rem;
	margin: 0;
	transform: translate(-50%, -50%);
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: bold;
	border: 1px solid;
	background-color: white;
	pointer-events: none;
}

.flow-timeline-pill-ghost {
	box-shadow: var(--shadow-v2);
}

.flow-timeline-pill-follower {
	opacity: 0.5;
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
}

.flow-timeline-harvest-ghost {
	position: fixed;
	z-index: 60;
	width: 1.25rem;
	transform: translateX(-50%);
	border: 1px dashed var(--harvest);
	border-radius: 1rem;
	background-color: color-mix(in srgb, var(--harvest) 8%, white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: bold;
	color: var(--harvest);
	opacity: 0.7;
	pointer-events: none;
}

.flow-timeline-following-zone {
	position: fixed;
	z-index: 58;
	border: 2px dashed var(--primary);
	border-radius: 1.2rem;
	background-color: color-mix(in srgb, var(--primary) 5%, transparent);
	pointer-events: none;
}

.flow-timeline-chips {
	position: fixed;
	z-index: 59;
	width: 0;
	height: 0;
	pointer-events: none;
}

.flow-timeline-chip {
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	padding: 0.4rem 1rem;
	border-radius: 1rem;
	border: 2px dashed var(--muted);
	background-color: white;
	color: var(--text);
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--shadow-v2);
	transition: background-color 0.1s, color 0.1s, border-color 0.1s, transform 0.1s;
}

.flow-timeline-chip-left {
	right: 3rem;
}

.flow-timeline-chip-right {
	left: 3rem;
}

/* Celle qui est retenue se détache franchement de l'autre. */
.flow-timeline-chip.is-on {
	background-color: var(--primary);
	border-color: var(--primary);
	border-style: solid;
	color: white;
	transform: translateY(-50%) scale(1.08);
}

/* Le trait d'insertion, quand on réordonne dans la semaine */
.flow-timeline-vertical .flow-timeline-row-insert-before::before,
.flow-timeline-vertical .flow-timeline-row-insert-after::after {
	content: "";
	position: absolute;
	left: -2.7rem;
	right: 0;
	border-top: 2px solid var(--primary);
	z-index: 5;
	pointer-events: none;
}

.flow-timeline-vertical .flow-timeline-row-insert-before::before {
	top: -0.25rem;
}

.flow-timeline-vertical .flow-timeline-row-insert-after::after {
	bottom: -0.25rem;
}

.flow-timeline-vertical .flow-timeline-band.flow-timeline-drop {
	background-color: color-mix(in srgb, var(--primary) 16%, white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
	border-radius: var(--radius);
}

.flow-timeline-vertical .flow-timeline-band.flow-timeline-drop .flow-timeline-axis-week {
	color: var(--primary);
	font-weight: bold;
}

/* ---- le filtre de la page : l'omnibox du design system, en mode local ---- */

/*
 * Les onglets et la recherche sur une même ligne, la recherche poussée à droite.
 *
 * Attend un conteneur .series-head autour des deux dans displayByArea(). Sans lui les
 * deux blocs sont frères sous le conteneur générique de toutes les pages, et aligner à
 * droite demanderait un flottant ou une marge négative calée sur la hauteur des
 * onglets — qui tient à une largeur et casse à la suivante.
 *
 * align-items: flex-end pose la recherche sur la ligne de base des onglets, dont le
 * trait de sélection occupe le bas.
 */
.series-head {
	display: flex;
	/* Pas de palier de largeur d'écran ici : la place réellement disponible dépend de
	   la barre latérale, qui se replie et rend d'un coup 250px au conteneur — un même
	   écran peut donc être à l'étroit à 1100px et au large à 1050. C'est au retour à la
	   ligne du flex de décider, il mesure ce qui reste et non ce qu'on suppose. */
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

/*
 * Les deux marges basses tombent : dans la rangée, elles empêcheraient l'alignement,
 * `align-items: flex-end` calant les boîtes **de marge** et non les bords visibles.
 * L'écart avec le tableau est repris par la rangée elle-même.
 */
.series-head .series-views,
.series-head .series-filter {
	margin-bottom: 0;
}

/*
 * La marge basse **interne** des onglets tombe aussi, et c'est elle qui compte : hors
 * flex elle s'échappait du bloc, dedans elle y reste et gonfle les onglets de 24px sous
 * leur trait. Bas contre bas, le champ se retrouvait alors 24px plus bas que ce que
 * l'œil prend pour la fin des onglets — des boîtes alignées, un rendu qui ne l'est pas.
 * L'écart au tableau est porté par la rangée, pas par ce qu'elle contient.
 */
.series-head .series-views .tabs-item {
	margin-bottom: 0;
}

/*
 * Le message d'absence de résultat sort de la rangée : getPlanFilter() rend aussi ce
 * message, le menu de semaine et son script, et le conteneur les prend tous pour des
 * colonnes. Les deux derniers sont hors flux, celui-ci non — sans cette ligne il
 * s'afficherait entre les onglets et le champ.
 */
.series-head .series-filter-empty {
	flex: 1 0 100%;
}

/*
 * Le champ ne se laisse pas comprimer sous sa largeur naturelle pour tenir sur la
 * ligne : en dessous il prend la sienne, où il retrouve toute la largeur.
 *
 * En rem et non en pixels, parce que la taille de base suit la largeur d'écran : 18rem
 * valent 288px en grand et 234px sur un écran étroit. Un plancher en pixels
 * repousserait le retour à la ligne bien après que le texte a rétréci autour.
 */
.series-head .series-filter {
	min-width: 18rem;
}

.series-head {
	margin-bottom: 0.75rem;
}

.series-filter {
	margin-bottom: 0.75rem;
}

.series-filter-empty {
	margin-bottom: 0.75rem;
	color: var(--muted);
}

/* ---- le filtre par semaine, ouvert depuis la graduation ---- */

/*
 * La graduation entière est cliquable, pas seulement les numéros affichés : sous
 * 1200px une semaine sur cinq reste visible, et il n'y a pas de raison que les autres
 * cessent d'être choisissables.
 *
 * Tout est accroché à series-season-filterable : une graduation sans omnibox derrière
 * ne doit pas prendre l'apparence d'une cible. Le plan de culture filtre, les
 * itinéraires techniques et les récoltes affichent la même frise sans rien filtrer.
 */
.series-season-filterable .series-season-weeks {
	cursor: pointer;
}

.series-season-filterable .series-season-week:hover,
.series-season-filterable .series-season-month[data-month]:hover {
	color: var(--primary);
	font-weight: bold;
}

.series-season-filterable .series-season-month[data-month] {
	cursor: pointer;
}

.series-week-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.series-week-option-count {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.cultivation-implantation-weeks {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
/* ---- l'itinéraire technique : le diagramme de la page de série, plus un trait
   par intervention qui se répète, entre la pastille et la fiche ---- */

/* L'en-tête collé passe devant les fiches : sans ça, la première fiche de la
   page lui monte dessus au défilement, les deux étant à z-index 2. */
.flow-timeline-sequence .flow-timeline-header {
	z-index: 3;
}

.flow-timeline-sequence .flow-timeline-row {
	display: grid;
	grid-template-columns: 1.55rem calc(var(--flow-lanes) * 0.5rem + 0.25rem) minmax(0, 1fr);
	align-items: start;
}

.flow-timeline-sequence .flow-timeline-row .flow-timeline-pill {
	margin-left: -2.075rem;
	margin-top: 0.4rem;
}

.flow-timeline-sequence .flow-timeline-card {
	margin-left: 0;
	padding-left: 0.75rem;
}

.flow-timeline-sequence .flow-timeline-card::before {
	display: none;
}

/* Sans période, rien ne passe entre la pastille et la fiche : la fiche reprend
   sa place contre la pastille, avec son encoche. */
.flow-timeline-sequence-without-lanes .flow-timeline-row {
	grid-template-columns: 1.55rem 0 minmax(0, 1fr);
}

.flow-timeline-sequence-without-lanes .flow-timeline-card {
	margin-left: -2.25rem;
	padding-left: 1.1rem;
}

.flow-timeline-sequence-without-lanes .flow-timeline-card::before {
	display: block;
}

/* Une semaine sans intervention ne porte que ses traits : elle prend la même
   hauteur que sur la page de série. */
.flow-timeline-sequence .flow-timeline-row-empty {
	min-height: var(--flow-band);
}


/* Le couloir d'une période, tiré d'une ligne à la suivante : il déborde en haut
   et en bas pour couvrir l'écart entre deux lignes, sinon le trait se lit comme
   une suite de tirets. */
.flow-timeline-sequence .flow-timeline-lanes {
	position: relative;
	align-self: stretch;
}

/* Le trait déborde largement en haut et en bas : entre deux lignes il y a le gap
   de la bande, entre deux bandes une bordure et un rembourrage. Sans ce
   débordement il se lit comme une suite de tirets. */
.flow-timeline-sequence .flow-timeline-lane {
	position: absolute;
	top: -0.75rem;
	bottom: -0.75rem;
	left: calc(var(--flow-lane) * 0.5rem + 0.125rem);
	width: 4px;
}

/* Les deux bouts : le trait démarre en haut de la semaine de départ et s'arrête
   en bas de la dernière, arrondi aux deux extrémités. */
.flow-timeline-sequence .flow-timeline-lane-start {
	top: -0.2rem;
	border-radius: 2px 2px 0 0;
}

.flow-timeline-sequence .flow-timeline-lane-stop {
	bottom: -0.2rem;
	border-radius: 0 0 2px 2px;
}

/* Les poignées d'une période : un point à chaque bout du trait, tiré vers le
   haut ou vers le bas pour changer une seule des deux bornes. Le trait est fin,
   la zone de préhension est élargie par le pseudo-élément. */
.flow-timeline-sequence .flow-timeline-lane-handle {
	position: absolute;
	left: -3px;
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-radius: 50%;
	background-color: white;
	cursor: ns-resize;
	touch-action: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s;
}

/* La prise s'étend vers le haut et le bas, jamais sur les côtés : les couloirs
   ne sont qu'à 0.5rem l'un de l'autre, deux poignées voisines se voleraient le
   clic. */
.flow-timeline-sequence .flow-timeline-lane-handle::before {
	content: '';
	position: absolute;
	top: -8px;
	right: 0;
	bottom: -8px;
	left: 0;
}

.flow-timeline-sequence .flow-timeline-lane-handle-start {
	top: -3px;
}

.flow-timeline-sequence .flow-timeline-lane-handle-stop {
	bottom: -3px;
}

.flow-timeline-sequence .flow-timeline-band:hover .flow-timeline-lane-handle,
.flow-timeline-sequence .flow-timeline-lane-handle-holding {
	opacity: 1;
	pointer-events: auto;
}

/* Une période qui partira avec la suite : le trait passe en pointillé primaire,
   comme la campagne de récolte sur une série. */
.flow-timeline-sequence .flow-timeline-lane-will-move {
	background-color: color-mix(in srgb, var(--primary) 25%, white) !important;
	outline: 1px dashed var(--primary);
}

/* La poignée du fantôme, au bout que l'on tire. */
.flow-timeline-lane-ghost-handle {
	position: absolute;
	left: -3px;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background-color: white;
}

.flow-timeline-lane-ghost-handle-start {
	top: -3px;
}

.flow-timeline-lane-ghost-handle-stop {
	bottom: -3px;
}

/* Le trait tenu par une poignée s'efface derrière son fantôme, comme la pastille
   tenue derrière le sien. */
.flow-timeline-sequence .flow-timeline-lane-holding {
	opacity: 0.35;
}

/* Le fantôme d'une période, posé sur ses bandes d'arrivée pendant le glissé : il
   porte la couleur de son intervention, sinon on ne sait pas quel trait on
   déplace quand plusieurs se chevauchent. */
.flow-timeline-lane-ghost {
	position: fixed;
	z-index: 60;
	width: 4px;
	transform: translateX(-50%);
	border-radius: 2px;
	background-color: currentColor;
	outline: 1px dashed currentColor;
	opacity: 0.6;
	pointer-events: none;
}

/* La portée que prendrait la période une fois la poignée lâchée : la semaine
   visée porte en plus le cadre de la cible. */
.flow-timeline-sequence .flow-timeline-band.flow-timeline-band-extend {
	background-color: color-mix(in srgb, var(--primary) 13%, white);
	border-radius: var(--radius);
}

/* Le lien vers la pastille : un pointillé, pas un trait plein — il dit
   l'appartenance sans se confondre avec la période elle-même. */
.flow-timeline-sequence .flow-timeline-lane-link {
	position: absolute;
	top: calc(1.175rem - 1px);
	left: -2.09rem;
	width: calc(var(--flow-lane) * 0.5rem + 0.125rem + 2.09rem);
	border-top: 2px dotted;
}

.flow-timeline-sequence .flow-timeline-row-pending {
	opacity: 0.55;
	pointer-events: none;
}

.flow-timeline-sequence .flow-timeline-pill-movable {
	touch-action: pan-x;
}

.flow-timeline-sequence .flow-timeline-frequency {
	flex: none;
	padding: 0 0.5rem;
	border: 1px solid;
	border-radius: 1rem;
	font-size: 0.75rem;
	white-space: nowrap;
}

.flow-timeline-sequence .flow-timeline-season,
.flow-timeline-sequence .flow-timeline-year {
	align-items: center;
}

.flow-timeline-sequence .flow-timeline-season-value {
	grid-column: 2 / span 2;
	padding: 0.75rem 0 0.25rem 0.5rem;
	font-size: 0.9rem;
	font-weight: bold;
	white-space: nowrap;
}

.flow-timeline-sequence .flow-timeline-year-value {
	padding: 0.5rem 0 0.2rem 0.5rem;
	font-family: var(--series-mono);
	font-size: 0.75rem;
	font-weight: bold;
	letter-spacing: 0.3px;
}


.series-selector-head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 -0.75rem 0.75rem;
	padding: 0.5rem 0.75rem;
	background-color: white;
}

.series-selector-head h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	flex: 1;
	white-space: nowrap;
}

.series-selector-head select {
	width: auto;
	max-width: 9rem;
	font-size: 0.8125rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.series-selector-count {
	background-color: var(--production);
	color: white;
	border-radius: 999px;
	padding: 0 0.5rem;
	font-size: 0.8125rem;
	min-width: 1.5rem;
	text-align: center;
}

.series-selector-chain {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--text);
	color: white;
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	cursor: pointer;
}

.series-selector-chain-label {
	font-weight: 600;
}

.series-selector-chain-help {
	opacity: 0.7;
	line-height: 1.2;
}

.series-selector-cultivation {
	border-radius: var(--radius);
	margin-bottom: 0.25rem;
	padding: 0.375rem 0.625rem;
	border: 2px solid transparent;
}

.series-selector-cultivation.selected {
	border-color: var(--production);
	background-color: #f2f8f4;
	padding: 0.625rem;
}

.series-selector-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	flex: none;
}

.series-selector-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
}

/* La pastille se lit avec le nom, pas avec la longueur : elle le suit donc dans
   un bloc qui prend seul la place restante, sinon l'écart du flex la repoussait
   contre la valeur. */
.series-selector-title {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

span.series-selector-name {
	flex: 0 1 auto;
	min-width: 0;
	font-weight: 600;
	text-decoration: none;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sans flex none, un nom long comprime la pastille au lieu de se tronquer
   lui-même, alors qu'elle n'a que trois caractères à porter. Le bloc pose déjà
   son écart par gap. */
.series-selector-title .plant-start {
	flex: none;
	margin-left: 0;
}

.series-selector-place[data-color="done"] {
	color: var(--production);
}

.series-selector-place[data-color="over"] {
	color: var(--warning);
}


.series-selector-cultivation.selected {
	background: var(--series-paint);
	box-shadow: 0 0.25rem 0.875rem color-mix(in srgb, var(--series-paint-shadow) 45%, transparent);
}

.series-selector-cultivation.selected .series-selector-header,
.series-selector-cultivation.selected .series-selector-name,
.series-selector-cultivation.selected .series-selector-place,
.series-selector-cultivation.selected .series-selector-dates {
	color: white;
}

.series-selector-cultivation.selected .series-selector-dates {
	opacity: 0.92;
}

.series-selector-cultivation.selected .series-selector-dot {
	display: none;
}

.series-selector-cultivation.selected .place-context {
	background-color: white;
}

.series-selector-cultivation:not(.selected) .place-context-close {
	display: none;
}

.series-selector-cultivation.selected .series-selector-place {
	display: none;
}

/* Ouverte, la carte porte sa ligne de dates, qui dit la même semaine avec son
   action et sa fin : la pastille n'y ajoute rien, et son fond d'action se
   confondrait avec la peinture de famille. */
.series-selector-cultivation.selected .plant-start {
	display: none;
}

.series-order-title {
	margin: 1.5rem 0 0.5rem 0;
	padding-bottom: 0.25rem;
	border-bottom: 2px solid var(--secondary);
	break-after: avoid;
}

.series-order-title:first-child {
	margin-top: 0;
}

.series-order-group {
	color: var(--secondary);
	text-transform: none;
	font-size: 1.0625rem;
}

.series-order-table {
	width: 100%;
	table-layout: fixed;
}

.series-order-check {
	width: 2.75rem;
}

.series-order-table tr {
	break-inside: avoid;
}

.series-order-quantity {
	width: 6rem;
	white-space: nowrap;
}

.series-order-weight {
	color: var(--muted);
}

.series-order-box {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
	border: 1px solid var(--secondary);
	border-radius: 0.125rem;
}

.series-close-lot {
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.series-close-lot.series-close-lot-harvested {
	grid-template-columns: minmax(0, 1fr) auto 8rem auto;
}

.series-close-outcome .field-radio-group-item svg {
	font-size: 1.5rem;
}

/* util-filter-options-field dessine des pastilles d'une ligne, sans marge verticale : l'icône posée
   au-dessus de son mot y touchait les bords. */
.series-close-outcome .field-radio-group-item {
	min-width: 4.5rem;
	padding: 0.375rem 0.75rem;
}

.series-close-choice {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	line-height: 1.2;
}

.series-close-choice small {
	font-size: 0.75rem;
}

/* La note est la dernière cellule de la rangée, même repliée : c'est elle qui prend le retrait de
   droite que util-table pose sur :last-child, et le dénouement le perd. */
.series-close-lot > .util-table-row > .series-close-lot-outcome {
	padding-right: 1rem;
}

.series-close-lot .series-close-lot-comment {
	grid-column: 1 / -1;
	padding-inline: 1rem;
}
/* La hauteur par défaut de l'éditeur, répétée à chaque série du lot, repousserait le bouton de clôture loin sous l'écran. */
.series-close-lot .series-close-lot-comment div.editor {
	min-height: 4.5rem;
}

@media (max-width: 767px) {

	.series-close-lot.series-close-lot-harvested {
		grid-template-columns: minmax(0, 1fr) auto auto auto;
	}

	.series-close-lot .series-close-lot-outcome {
		grid-column: 1 / -1;
	}

	.series-close-lot .util-table-head > .series-close-lot-outcome {
		display: none;
	}

}

.series-number td {
	vertical-align: middle;
}

/* ===== production/series/static/css/cultivation.css ===== */
div.cultivation-periods {
	display: grid;
	grid-row-gap: 0.5rem;
	line-height: 1;
	font-size: 0.8rem;
}

div.cultivation-periods-11 {
	grid-template-columns: 3fr 12fr 6fr;
}

div.cultivation-periods-01 {
	grid-template-columns: 12fr 6fr;
}

div.cultivation-periods-10 {
	grid-template-columns: 3fr 12fr;
}

div.cultivation-periods.cultivation-periods-00:not(.cultivation-periods-form) {
	max-width: 21rem;
}

div.cultivation-periods.cultivation-periods-11:not(.cultivation-periods-form) {
	max-width: 30rem;
}

div.cultivation-periods.cultivation-periods-01:not(.cultivation-periods-form) {
	max-width: 27rem;
}

div.cultivation-periods.cultivation-periods-10:not(.cultivation-periods-form) {
	max-width: 24rem;
}

div.cultivation-periods.cultivation-periods-form {
	grid-column-gap: 0.25rem;
}

@media (max-width: 767px) {

	div.cultivation-periods.cultivation-periods-form {
		grid-template-columns: 1fr;
	}

}

div.cultivation-periods-year {
	text-align: center;
	font-size: 0.8rem;
	margin-bottom: 0.25rem;
}

div.cultivation-periods-season {
	display: inline-grid;
	font-size: 0.8rem;
	border-radius: var(--radius);
	padding: 0.25rem;
	grid-column-gap: 0.1rem;
}

div.cultivation-periods-form div.cultivation-periods-season {
	grid-column-gap: 0.25rem;
}

div.cultivation-periods-season-3 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto 1fr;
}

div.cultivation-periods-season-6 {
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto 1fr;
}

div.cultivation-periods-season-12 {
	grid-template-columns: repeat(12, 1fr);
	background-color: var(--background-light);
}

@media (max-width: 767px) {

	div.cultivation-periods-form div.cultivation-periods-season-3 {
		width: calc(3 / 12 * 100%);
		justify-self: end;
	}

	div.cultivation-periods-form div.cultivation-periods-season-12 {
		width: 100%;
	}

	div.cultivation-periods-form div.cultivation-periods-season-6 {
		width: calc(6 / 12 * 100%);
	}

}

/* Months */

label.cultivation-month {
	display: block;
	margin: 0;
	width: 100%;
	height: 1.35rem;
	line-height: 1;
}

div.cultivation-periods-form label.cultivation-month {
	height: 2rem;
}

label.cultivation-month > span.cultivation-month-checked,
label.cultivation-month > input {
	display: none;
}

label.cultivation-month > input + div {
	cursor: pointer;
}

label.cultivation-month > div {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:	background-color 0.5s;
	font-weight: bold;
	border-radius: var(--radius);
}

div.cultivation-periods-form label.cultivation-month > div {
	border: 1px solid var(--border);
	background-color: white;
}

label.cultivation-month > span.cultivation-month-checked.cultivation-month-done + div {
	background-color: var(--harvest);
	color: white;
}

label.cultivation-month > span.cultivation-month-checked.cultivation-month-expected + div,
label.cultivation-month > input:checked + div {
	border: 1px solid var(--harvest);
	color: var(--harvest);
}

/* Weeks */
div.cultivation-week {
	display: block;
	margin: 0;
	width: 100%;
	line-height: 1;
}

div.cultivation-week-item {
	width: 100%;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:	background-color 0.5s;
	text-align: center;
	border-radius: var(--radius);
}

div.cultivation-week > div.cultivation-week-item {
	font-weight: bold;
}

div.cultivation-week > label {
	margin-top: 0.1rem;
	width: 100%;
}

div.cultivation-week > label > div.cultivation-week-item {
	cursor: pointer;
	border: 1px solid var(--border);
}

div.cultivation-week > label input {
	display: none;
}

div.cultivation-week > label input + div:hover {
	background-color: #ccc;
}

div.cultivation-week > label input:checked + div.cultivation-week-item {
	border: 1px solid var(--harvest);
	color: var(--harvest);
}

[data-wrapper^="seedlingSeeds"]:not([data-action="sowing"]):not([data-action="young-plant"]) {
	display: none !important;
}

[data-wrapper^="seedlingSeeds"][data-action="sowing"] .cultivation-field-young-plant {
	display: none;
}

[data-wrapper^="seedlingSeeds"][data-action="young-plant"] .cultivation-field-sowing {
	display: none;
}
/* ===== production/series/static/css/place.css ===== */
body {
	--place-bars: calc(var(--place-tokens-height, 0px) + var(--place-pose-height, 0px));
	--place-bars-all: calc(var(--place-bars) + var(--place-hidden-height, 0px));
}

/* Grid */
#panel-place-update .panel-dialog {
	max-width: 1600px;
}

#panel-place-update .badge.bg-secondary {
	background-color: #2b2b2b !important;
}

@media (min-width: 768px) {

	#panel-place-update .panel-header {
		height: 6rem;
	}

	#panel-place-update #zone-header {
		top: 6rem;
	}

}

div.place-grid-series-timeline-lines {
	position: relative;
}

.place-grid-series-timeline {
	position: absolute;
}

.place-grid-series-timeline.place-grid-series-timeline-season,
.place-grid-series-timeline.place-grid-series-timeline-not-season {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-column-gap: 0.5rem;
	align-items: center;
	line-height: 1.2;
	padding: 0 0.375rem;
	border-radius: var(--radius);
	font-size: 0.9rem;
	z-index: 2;
}

.place-grid-series-timeline.place-grid-series-timeline-season:has(.place-grid-series-timeline-week),
.place-grid-series-timeline.place-grid-series-timeline-not-season:has(.place-grid-series-timeline-week) {
	border-radius: calc(var(--radius) / 2);
}

[data-soil-color="white"] {

	.place-grid-series-timeline.place-grid-series-timeline-season,
	.place-grid-series-timeline.place-grid-series-timeline-not-season {
		background-color: white;
		border: 1px solid var(--block-color, var(--muted));
		color: var(--text);
	}

}

[data-soil-color="plant"],
[data-soil-color="family"] {

	.place-grid-series-timeline.place-grid-series-timeline-season,
	.place-grid-series-timeline.place-grid-series-timeline-not-season {
		background-color: var(--primary);
		border: 1px solid white;
		color: white;
	}

}

@media print {

	.place-grid-series-timeline.place-grid-series-timeline-season,
	.place-grid-series-timeline.place-grid-series-timeline-not-season {
		border: 1px solid #aaa;
	}

}

.place-grid-series-timeline.place-grid-series-timeline-not-season {
	border-color: var(--border);
	z-index: 1;
}

a.place-grid-series-timeline {
	text-decoration: none;
}

.place-grid-series-timeline.place-grid-series-timeline-season:not(.place-hidden):hover,
.place-grid-series-timeline.place-grid-series-timeline-not-season:not(.place-hidden):hover {
	border-color: var(--primary);
}

.place-grid-series-timeline.place-grid-series-timeline-not-season:not(:hover) {
	opacity: 0.8;
}

.place-grid-series-timeline.place-grid-series-timeline-placeholder {
	z-index: 100;
	display: flex;
	align-items: center;
	border: 2px dashed var(--target-paint, var(--production));
	border-radius: 5px;
	background-color: #fffa;
	color: var(--target-paint, var(--production));
	opacity: 1;
	padding-left: 0.5rem;
	pointer-events: none;
}

.place-grid-series-timeline.place-grid-series-timeline-alert {
	border-color: var(--warning);
}

.place-grid-series-timeline.place-grid-series-timeline-alert svg {
	font-size: 1.25rem;
	color: var(--warning);
}

.place-grid-series-timeline:not(.place-grid-series-timeline-placeholder):not(.place-hidden):hover {
	z-index: 3 !important;
}

div.place-grid-series-timeline-images {
	display: flex;
	column-gap: 0.25rem;
	position: relative;
}

div.place-grid-series-timeline-images div.place-grid-series-timeline-lock {
	position: absolute;
	left: 0;
	bottom: 0rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	opacity: 0.75;
}

div.place-grid-series-timeline-name {
	white-space: nowrap;
	overflow: hidden;
	margin-top: -1px;
}

@media (max-width: 575px) {

	div.place-grid-series-timeline-name {
		font-size: 0.8rem;
		letter-spacing: -0.1px;
	}

}

div.place-grid-series-timeline-week {
	position: absolute;
	height: calc(0.3rem + 2px);
	border: 1px solid white;
	border-radius: var(--radius);
	bottom: -0.1rem;
	transform: translate(-1px, 0);
}

div.place-grid-series-timeline-more {
	font-size: 0.8rem;
}

[data-soil-color="white"] div.place-grid-series-timeline-more {
	color: var(--muted);
}

[data-soil-color="plant"] div.place-grid-series-timeline-more,
[data-soil-color="family"] div.place-grid-series-timeline-more {
	color: #ccc;
}

@media (min-width: 1200px) {

	div.place-grid-series-timeline-more {
		font-size: 0.7rem;
	}

}

body.bed-updating .bed-item-grid-plan {
	grid-template-columns: 12rem 1fr;
}

.plot-wrapper > .plot-folded {
	display: none;
}

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

	#series-selector {
		display: none;
	}

}

body.place-tokens-shown #zone-container {
	padding-bottom: calc(var(--place-bars) + 1rem);
}

.plot-wrapper.place-fold-search > *:not(.plot-folded),
.plot-wrapper.place-fold-user > *:not(.plot-folded) {
	display: none;
}

.plot-wrapper.place-fold-search > .plot-folded,
.plot-wrapper.place-fold-user > .plot-folded {
	display: flex;
}


.place-filtered-out {
	opacity: 0.25;
}

#place-pose-bar {
	position: fixed;
	z-index: 1005;
	right: 0;
	bottom: var(--place-tokens-height, 0px);
	left: 0;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	min-height: var(--touch-target);
	padding: 0.375rem 0.75rem;
	background-color: var(--production);
	color: white;
}

#place-pose-bar b {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#place-pose-bar b small {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	opacity: 0.8;
}

.place-pose-bar-action {
	flex: none;
	display: flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: 0 0.5rem;
	color: white;
	text-decoration: underline;
	cursor: pointer;
}

#place-tokens {
	position: fixed;
	z-index: 1000;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	gap: 0.25rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background-color: var(--background);
	border-top: 1px solid var(--border);
}

#place-tokens-scroll {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 0.25rem;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
}

#place-tokens-scroll::-webkit-scrollbar {
	display: none;
}

#place-tokens .place-token {
	flex: none;
	position: relative;
	text-decoration: none;
	min-width: max(3.4rem, var(--touch-target));
	min-height: max(3.4rem, var(--touch-target));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0 0.75rem;
	border-radius: var(--radius);
	background-color: var(--background-odd);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 0.9rem;
	cursor: pointer;
	overflow: hidden;
}

#place-tokens .place-token:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background-color: var(--series-paint, transparent);
}

#place-tokens .place-token-count {
	color: var(--muted);
}

#place-tokens .place-token-search {
	flex: none;
	color: var(--muted);
	font-size: 1.5rem;
}

#place-tokens .place-token-search:after {
	content: none;
}

#place-tokens .place-token-label {
	white-space: nowrap;
}

#place-tokens .place-token-armed {
	background-color: var(--background-elevated, #fff);
	border-color: var(--text);
	font-weight: 700;
}

#place-tokens .place-token-armed:after {
	height: 6px;
}

body.place-search-open #place-tokens .place-token-search {
	color: var(--text);
	background-color: var(--background-elevated, var(--background-odd));
	border-color: var(--text);
}

.plot-folded {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: var(--touch-target);
	padding: 0.5rem 0.75rem;
	background-color: var(--background-odd);
	border-bottom: 1px solid var(--border);
	font-size: 0.875rem;
}

.plot-folded-name {
	font-weight: 600;
}

.plot-folded-info {
	color: var(--muted);
}

body.bed-dragging .place-grid-series-timeline,
body.bed-dragging .place-garden-block {
	pointer-events: none;
}

body.bed-dragging {
	cursor: grabbing;
	user-select: none;
}

.series-selector-cultivation:not(.series-selector-closed) {
	touch-action: pan-y;
}

.place-garden-block:not(.place-garden-block-placeholder),
.place-grid-series-timeline {
	cursor: pointer;
}

.place-garden-block-season.place-selected:not(.place-locked),
.place-grid-series-timeline-season.place-selected:not(.place-locked) {
	cursor: grab;
	touch-action: none;
}

.bed-drag-ghost-card > * {
	position: static !important;
	display: flex !important;
	border-radius: 6px;
	box-shadow: 0 0 0 2px white;
}


#zone-container {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

body.place-plan-shown {
	overscroll-behavior-x: contain;
}

#zone-container .plot-card-scroll {
	overscroll-behavior-x: contain;
}

.bed-drag-ghost {
	position: fixed;
	z-index: 1040;
	pointer-events: none;
	transform: translate(0.5rem, 0.5rem) rotate(-2.5deg);
	opacity: 0.92;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.32));
}
.place-selected {
	box-shadow: inset 0 0 0 3px white, 0 0 0 2px var(--color-brand);
	border-radius: 8px;
	z-index: 250 !important;
}

.place-handle {
	position: absolute;
	background-color: var(--dark);
	border: 2px solid white;
	border-radius: 5px;
	cursor: ew-resize;
	z-index: 7;
	touch-action: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.place-handle:before {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	bottom: -0.5rem;
	left: -0.5rem;
}

.place-grid-series-timeline .place-handle {
	bottom: -10px;
	left: 50%;
	width: 52px;
	height: 18px;
	margin-left: -26px;
	cursor: ns-resize;
}

.place-grid-series-timeline .place-handle-start {
	bottom: auto;
	top: -10px;
}

.place-bed-part {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	border-right: 1px dashed rgba(255, 255, 255, 0.55);
}

.place-bed-part:last-of-type {
	border-right: 0;
}

.place-grid-series-timeline .place-bed-part {
	border-right: 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.55);
}

.place-grid-series-timeline .place-bed-part:last-of-type {
	border-bottom: 0;
}

.place-drop {
	position: absolute;
	z-index: 330;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background-color: white;
	color: var(--danger);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	font-size: 1.125rem;
}

.place-back {
	position: absolute;
	z-index: 330;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background-color: white;
	color: var(--primary);
	font-size: 1.125rem;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.place-back:hover {
	color: var(--production);
}

.place-length {
	position: absolute;
	z-index: 330;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	height: 33px;
	padding: 0 0.75rem;
	border-radius: 999px;
	background-color: var(--dark);
	color: white;
	font-size: 0.75rem;
	font-style: normal;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
	cursor: pointer;
}

.place-length b {
	font-weight: 700;
}

.place-grid-series-timeline.place-selected:not([data-locked="1"]) .place-fill {
	display: none;
}

body.bed-resizing {
	cursor: grabbing;
	user-select: none;
}

body.bed-resizing .place-garden-block,
body.bed-resizing .place-grid-series-timeline {
	pointer-events: none;
}

.place-grid-series-timeline-season:hover,
.place-grid-series-timeline-season:hover .place-grid-series-timeline-name {
	text-decoration: none;
}

[data-soil-color="plant"] .place-grid-series-timeline-season:hover,
[data-soil-color="family"] .place-grid-series-timeline-season:hover {
	color: white;
}

[data-soil-color="white"] .place-grid-series-timeline-season:hover {
	color: var(--text);
}

.place-drag-badge {
	position: fixed;
	z-index: 1050;
	pointer-events: none;
	transform: translate(-50%, -100%);
	padding: 0.2rem 0.7rem;
	border-radius: 1rem;
	background-color: var(--production);
	color: white;
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.place-drag-badge-copy {
	background-color: var(--warning);
}

.place-drag-badge-add {
	background-color: var(--text);
}

.bed-drag-ghost-selector > * {
	background-color: white;
	border-radius: var(--radius);
	padding: 0.375rem 0.625rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body:not(.bed-updating) .place-locked {
	cursor: default;
}
.place-preview {
	position: absolute;
	border: 2px dashed var(--production);
	background-color: rgba(9, 90, 65, 0.16);
	border-radius: 5px;
	color: var(--production);
	font-size: 0.65rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding: 0.125rem;
	pointer-events: none;
	z-index: 500;
}

.place-preview-garden {
	left: 2px;
	right: 2px;
}

.place-preview-timeline {
	top: 0.25rem;
	height: 2rem;
	justify-content: flex-start;
	padding-left: 0.5rem;
}

body.bed-updating div.series-grid {
	right: 0;
}

@media (max-width: 1199px) {

	body.bed-updating .bed-item-grid-plan {
		grid-template-columns: 12rem 1fr 10rem;
	}

	body.bed-updating div.series-grid {
		right: 10rem;
	}

	body.bed-updating div.zone-wrapper div.series-grid {
		left: 12rem;
	}

}

@keyframes place-arrive {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes place-halo {
	from {
		box-shadow: 0 0 0 0 rgba(9, 90, 65, 0.45);
	}
	to {
		box-shadow: 0 0 0 0.75rem rgba(9, 90, 65, 0);
	}
}

@keyframes place-halo-copy {
	from {
		box-shadow: 0 0 0 0 rgba(203, 101, 3, 0.45);
	}
	to {
		box-shadow: 0 0 0 0.75rem rgba(203, 101, 3, 0);
	}
}

.place-arrive {
	animation: place-arrive 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
	z-index: 260 !important;
}

.place-arrive-move,
.place-arrive-add,
.place-arrive-resize,
.place-arrive-complete {
	animation: place-halo 0.7s ease-out;
}

.place-arrive-copy {
	animation: place-arrive 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), place-halo-copy 0.7s ease-out;
}

.garden-col,
.bed-item-grid {
	transition: background-color 0.15s ease;
}

.place-dragged {
	transition: opacity 0.15s ease;
}

.place-garden-block,
.place-grid-series-timeline {
	transition: box-shadow 0.15s ease;
}

.place-preview {
	animation: place-arrive 0.14s ease-out;
}

.bed-drag-ghost {
	transition: transform 0.08s ease-out;
}

.place-handle {
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.place-handle:hover {
	transform: scale(1.15);
}

.place-drag-badge {
	transition: background-color 0.15s ease;
}

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

	.place-arrive,
	.place-arrive-move,
	.place-arrive-add,
	.place-arrive-copy,
	.place-arrive-resize,
	.place-arrive-complete,
	.place-preview {
		animation: none;
	}

	.place-context {
		transition: none;
	}

}

@media screen {

	#zone-content div.zone-title {
		padding: 0;
		background: none;
		border-radius: 0;
	}

}

#zone-content .place-zone-bar {
	margin: 0.875rem 0 0.25rem;
}

.place-panel {
	width: 21rem;
	max-width: calc(100vw - 1rem);
}

.place-panel-loading {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0;
	color: #fff8;
}

.place-panel-loading svg {
	animation: place-panel-spin 0.9s linear infinite;
}

@keyframes place-panel-spin {
	to { transform: rotate(360deg); }
}

.place-item-label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.place-item-hint {
	margin-left: auto;
	font-style: normal;
	font-size: 0.8rem;
	color: #fff8;
	white-space: nowrap;
}

.place-item-danger,
.place-item-danger:hover {
	color: #ffb0b0;
}

.place-panel-fold {
	display: none;
}

.place-panel-fold-open {
	display: block;
}

.place-panel-swap-item {
	padding: 0.15rem 0.5rem;
	border-radius: 1rem;
	background-color: #fff2;
	color: white;
	font-size: 0.8rem;
	cursor: pointer;
	text-decoration: none;
}

.place-panel-swap-item:hover {
	background-color: white;
	color: var(--primary);
	text-decoration: none;
}

.place-selected-many {
	outline: 2px solid var(--warning);
	outline-offset: 1px;
	z-index: 250 !important;
}

.place-many {
	position: fixed;
	z-index: 1020;
	left: 50%;
	bottom: calc(var(--place-bars-all) + 1rem);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0.9rem;
	border-radius: 2rem;
	background-color: var(--text);
	color: white;
	font-size: 0.85rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.place-many a {
	color: white;
	text-decoration: underline;
	cursor: pointer;
}

.place-bed-panel {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}

.place-bed-panel:hover {
	color: var(--production);
	text-decoration: none;
}

.place-bed-panel svg {
	opacity: 0.45;
	width: 0.7em;
	height: 0.7em;
}

.place-current {
	box-shadow: 0 0 0 2px var(--production), 0 2px 8px rgba(0, 0, 0, 0.2);
}


.place-garden-block.place-current:not(.place-hidden):not(.place-garden-block-task),
.place-garden-block.place-selected-series:not(.place-hidden):not(.place-garden-block-task) {
	z-index: 250 !important;
}

.place-grid-series-timeline.place-current:not(.place-hidden),
.place-grid-series-timeline.place-selected-series:not(.place-hidden) {
	z-index: 60 !important;
}

.place-garden-block.place-hidden,
.place-grid-series-timeline.place-hidden {
	opacity: 0.14;
	z-index: 0 !important;
}

.place-hidden-bar {
	position: fixed;
	z-index: 1020;
	left: 1rem;
	bottom: calc(var(--place-bars) + 1rem);
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.85rem 1.8rem;
	border-radius: 2rem;
	background-color: var(--text);
	color: white;
	font-size: 1.05rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.place-hidden-bar a {
	color: white;
	text-decoration: underline;
	cursor: pointer;
}

body.place-arming #zone-container {
	cursor: copy;
}

body.place-arming .garden-col[data-bed]:hover,
body.place-arming .bed-item-grid[data-bed]:hover {
	background-color: var(--info);
}
.place-fill {
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	bottom: 0.5rem;
	padding: 0.25rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	/* Assez sombre pour que le blanc du chiffre tienne sur n'importe quelle
	   couleur d'espece, la plus claire comprise. Mesure : 3,5 de contraste a 45 %,
	   5,5 a 72 % sur un fond blanc. */
	background-color: rgba(0, 0, 0, 0.72);
	overflow: hidden;
	cursor: pointer;
}

body.bed-dragging .place-garden-block:not(.place-selected),
body.bed-dragging .place-grid-series-timeline:not(.place-selected),
body.bed-resizing .place-garden-block:not(.place-selected),
body.bed-resizing .place-grid-series-timeline:not(.place-selected) {
	pointer-events: none;
}

body.bed-dragging .place-fill,
body.bed-resizing .place-fill {
	pointer-events: auto;
}

.place-fill-part {
	right: auto;
}

.place-fill-full {
	display: none;
	flex-direction: column;
	gap: 0.25rem;
}

.place-fill-area {
	background-color: rgba(0, 0, 0, 0.45);
}

.place-selected .place-fill-full {
	display: flex;
}

.place-fill i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

.place-fill b {
	position: relative;
	padding: 0 0.25rem;
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

[data-soil-color="white"] .place-fill {
	background-color: rgba(0, 0, 0, 0.12);
}

/* En vue claire le chiffre est ecrit en sombre : la barre doit rester un lavis,
   sinon a 100 % elle passe sous le texte et on ne lit plus rien. Mesure : 1,87
   de contraste avec le vert plein, 12,4 avec le lavis. */
[data-soil-color="white"] .place-fill i {
	background-color: color-mix(in srgb, var(--production) 28%, transparent);
}

[data-soil-color="white"] .place-fill b {
	color: var(--text);
}

/* Sans pastille sous lui, le chiffre s'ecrit a meme le bloc : son encre suit
   alors la luminance du fond. Le blanc fixe disparaissait sur les especes
   claires. Mesure : 54 jauges sur 89 sous le seuil de lisibilite, la pire a 2,18. */
.place-garden-block:not(.place-selected) .place-fill b,
.place-grid-series-timeline .place-fill b,
[data-soil-color="white"] .place-garden-block:not(.place-selected) .place-fill b,
[data-soil-color="white"] .place-grid-series-timeline .place-fill b {
	color: var(--block-ink, white);
}

.place-locked .place-fill,
.place-locked .place-fill i,
.place-garden-block:not(.place-selected) .place-fill,
.place-garden-block:not(.place-selected) .place-fill i,
.place-grid-series-timeline .place-fill,
.place-grid-series-timeline .place-fill i,
.place-grid-series-timeline .place-fill-area,
[data-soil-color="white"] .place-grid-series-timeline .place-fill,
[data-soil-color="white"] .place-grid-series-timeline .place-fill i {
	background-color: transparent;
}

.plot-wrapper {
	position: relative;
}

#place-size {
	position: fixed;
	z-index: 1030;
	width: 16.25rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--border);
	border-radius: 0.625rem;
	background-color: white;
	box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.18);
	font-size: 0.8125rem;
}

.place-size-title {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.place-size-gauge {
	position: relative;
	height: 0.625rem;
	margin-top: 0.25rem;
	border-radius: 0.3125rem;
	background-color: #e4e4e6;
	cursor: ew-resize;
	touch-action: none;
}

.place-size-gauge i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 0.3125rem;
	background-color: var(--production);
}

.place-size-gauge s {
	position: absolute;
	top: -0.3125rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 2px solid var(--production);
	background-color: white;
	transform: translateX(-50%);
}

.place-size-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 0.1875rem;
	color: var(--muted);
	font-size: 0.625rem;
}

.place-size-row {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

.place-size-row input {
	width: 4.375rem;
	padding: 0.3125rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	font: inherit;
	text-align: right;
}

.place-size-unit {
	color: var(--muted);
	font-size: 0.75rem;
}

.place-size-buttons {
	display: flex;
	gap: 0.375rem;
	margin-top: 0.625rem;
}

.place-context {
	display: block;
	overflow: hidden;
	max-height: 40rem;
	margin: 0.625rem 0 0;
	padding: 0.75rem;
	border-radius: var(--radius);
	background-color: var(--background-light);
	font-size: 0.8125rem;
	transition: max-height 0.22s ease, opacity 0.16s ease, transform 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}

.series-selector-cultivation:not(.selected) .place-context {
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	transform: translateY(-0.375rem);
	pointer-events: none;
}

.place-context-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin-bottom: 0.5rem;
}

.place-context-gauge {
	position: relative;
	height: 0.5rem;
	margin-top: 0.625rem;
	border-radius: 0.25rem;
	background-color: #e4e4e6;
	overflow: hidden;
}

.place-context-gauge i {
	display: block;
	height: 100%;
	border-radius: 0.25rem;
	background-color: var(--production);
}

.place-context-gauge-over i {
	background-color: var(--warning);
}

.place-context-counts {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.375rem;
	color: var(--color-neutral);
	font-size: 0.75rem;
}

.place-context-counts b {
	color: var(--text);
}

.place-context-remove {
	flex: none;
	color: var(--danger);
	font-weight: 600;
	cursor: pointer;
}

.place-context-remove:hover {
	color: var(--danger);
	text-decoration: underline;
}

.place-context-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.375rem;
}

.place-context-foot a {
	color: var(--muted);
	font-size: 0.75rem;
	cursor: pointer;
}

.place-search {
	margin-top: 0.625rem;
}

.place-search-title {
	margin-bottom: 0.375rem;
	color: var(--color-neutral);
	font-size: 0.75rem;
	font-weight: 600;
}

.place-search-form {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
}

.place-search-filter {
	position: relative;
	min-width: 0;
}

.place-search-inline .place-search-form {
	flex-direction: row;
	flex-wrap: wrap;
}

.place-search-inline .place-search-filter {
	flex: 1 1 14rem;
}

a.util-chip.place-chip {
	display: flex;
	width: 100%;
	border-color: #c9c9cf;
}

.place-chip-label {
	flex: none;
	font-weight: 400;
	color: var(--color-neutral);
}

.place-chip-value {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.util-chip.place-chip-on,
a.util-chip.place-chip-on:hover {
	border-color: var(--production);
	background-color: var(--production);
}

a.util-chip.place-chip-on .place-chip-label,
a.util-chip.place-chip-on:hover .place-chip-label {
	color: #ffffffcc;
}

a.util-chip.place-chip-on .place-chip-value,
a.util-chip.place-chip-on:hover .place-chip-value {
	color: white;
}

.place-jump {
	position: fixed;
	right: 1.125rem;
	bottom: calc(var(--place-bars-all) + 1.125rem);
	max-width: calc(100% - 2.25rem);
	z-index: 1020;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.4rem 0.6rem 0.4rem 1rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: white;
	box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.12);
	font-size: 1.25rem;
}

.place-jump-dot {
	flex: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
}

.place-jump-name {
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.place-jump-count {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background-color: var(--production);
	color: white;
	font-size: 1.2rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.place-jump-count:hover {
	background-color: var(--text);
	color: white;
	text-decoration: none;
}

.place-nodate-block {
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	max-height: 50%;
	border: 1.5px dashed #8a6d1f;
	border-radius: 5px;
	background: repeating-linear-gradient(135deg, #faf7ef 0 5px, #f1e8cf 5px 10px);
	color: #8a6d1f;
	font-size: 0.625rem;
	font-weight: 600;
	overflow: hidden;
}

.place-nodate-head {
	flex: none;
	padding: 0.0625rem 0.25rem;
	text-align: center;
	font-size: 0.5625rem;
	opacity: 0.8;
}

.place-nodate-list {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.125rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.place-nodate-line {
	display: block;
	flex: none;
	padding: 0 0.3125rem;
	border: 1px solid #d8cfae;
	border-radius: 4px;
	background-color: white;
	color: var(--text);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.375rem;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	user-select: none;
}

.place-nodate-line.selected {
	cursor: grab;
}

.place-nodate-line:hover,
.place-nodate-line.selected {
	border-color: #8a6d1f;
	background-color: #f3ecd8;
	color: var(--text);
	text-decoration: none;
}

.place-nodate-block-timeline {
	position: static;
	max-height: 6.875rem;
	margin: 0 0 0.25rem;
}

.place-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.place-panel-level {
	display: inline-flex;
	flex: none;
	padding: 2px;
	border-radius: 999px;
	background-color: #ffffff1f;
}

.place-panel-level-item {
	padding: 0.0625rem 0.5625rem;
	border-radius: 999px;
	color: white;
	font-size: 0.65625rem;
	opacity: 0.7;
	white-space: nowrap;
	cursor: pointer;
}

.place-panel-level-item:hover {
	color: white;
	opacity: 1;
	text-decoration: none;
}

.place-panel-level-item.selected {
	background-color: white;
	color: var(--text);
	font-weight: 700;
	opacity: 1;
}

.place-pose {
	position: absolute;
	left: 50%;
	z-index: 420;
	transform: translateX(-50%);
	margin-top: 0.375rem;
	padding: 0.3125rem 0.875rem;
	border: 1.5px solid var(--dark);
	border-radius: 999px;
	background-color: white;
	color: var(--dark);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.place-pose:hover {
	background-color: var(--dark);
	color: white;
	text-decoration: none;
}

.place-pose-faint {
	border-style: dashed;
	opacity: 0.45;
}

.place-pose-faint:hover {
	opacity: 1;
}

.bed-item-places {
	position: relative;
}

.bed-item-grid:has(.place-selected) .bed-item-places,
.garden-col:has(.place-selected) .garden-col-body {
	z-index: 430;
}

.place-pose-timeline {
	top: 50%;
	margin: 0 0 0 0.375rem;
	transform: translateY(-50%);
}

#zone-content .bed-item-grid[data-hide="1"]:not(.selected):not(.place-hidden-unfolded) {
	display: grid;
	height: 0.875rem;
	min-height: 0;
	overflow: hidden;
	border-top: 1px dashed #c8c8cc;
	background: repeating-linear-gradient(135deg, #f7f7f8 0 4px, #efeff1 4px 8px);
	cursor: pointer;
}

#zone-content .bed-item-grid[data-hide="1"]:not(.selected):not(.place-hidden-unfolded) .bed-item-places,
#zone-content .bed-item-grid[data-hide="1"]:not(.selected):not(.place-hidden-unfolded) .bed-item-bed > *:not(.bed-item-content),
#zone-content .bed-item-grid[data-hide="1"]:not(.selected):not(.place-hidden-unfolded) .bed-item-content > *:not(.bed-item-name) {
	display: none;
}

#zone-content .bed-item-grid[data-hide="1"]:not(.selected):not(.place-hidden-unfolded) .bed-item-bed,
#zone-content .bed-item-grid[data-hide="1"]:not(.selected):not(.place-hidden-unfolded) .bed-item-content {
	display: flex;
	align-items: center;
	padding: 0 0.375rem;
	border: 0;
	background: none;
	color: #9a9aa0;
	font-size: 0.5625rem;
	font-weight: 400;
	line-height: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#zone-content .bed-item-grid[data-hide="1"].place-hidden-unfolded {
	display: grid;
}

.place-hidden-count {
	position: absolute;
	right: 0.5rem;
	bottom: 0.25rem;
	z-index: 1;
	color: var(--muted);
	font-size: 0.6875rem;
	text-align: right;
	pointer-events: none;
}

.plot-wrapper:has(> .place-hidden-count) {
	position: relative;
}

.plot-card .place-grid-series-timeline {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 5px;
	padding: 0 0.375rem;
	font-size: 0.75rem;
	line-height: 1.2;
	overflow: hidden;
}

.plot-card .place-grid-series-timeline-name {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.plot-card .place-grid-series-timeline-more {
	font-weight: 400;
	opacity: 0.85;
	white-space: nowrap;
}

.plot-card .place-locked {
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 10px);
}

.place-context-close {
	margin-left: auto;
}

.plot-card .bed-item-grid[data-mismatch="1"] .bed-item-bed {
	opacity: 0.55;
}

.bed-item-places,
.place-grid-series-timeline-lines {
	pointer-events: none;
}

.bed-item-places .place-grid-series-timeline,
.bed-item-places .place-pose,
.bed-item-places .place-nodate-block {
	pointer-events: auto;
}

.place-selected-label,
.bed-drag-ghost-label {
	position: absolute;
	left: 0;
	z-index: 340;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background-color: var(--dark);
	color: white;
	font-size: 0.65rem;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
}

.place-selected-label {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 0.625rem;
	border-radius: 0.5rem;
}

.place-selected-pill {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-left: 0.375rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	background-color: white;
	color: var(--dark, #212529);
	font-weight: 700;
	cursor: pointer;
	pointer-events: auto;
}

.place-selected-pill:hover {
	background-color: var(--background-light);
	color: var(--dark, #212529);
	text-decoration: none;
}

.place-selected-drop,
.place-selected-drop:hover {
	padding: 0 0.625rem;
	background-color: var(--danger);
	color: white;
	font-size: 0.9rem;
}

.bed-drag-ghost-label {
	bottom: calc(100% + 0.25rem);
}

.bed-drag-ghost-label {
	bottom: auto;
	top: -1.5rem;
}

.place-jump-lit {
	border-color: var(--secondary);
	box-shadow: 0 0.25rem 0.875rem rgba(9, 90, 65, 0.35);
}

body.bed-updating .place-nodate-block {
	display: none;
}

/* Une planche que l'etirement recouvre n'est plus une cible : son bouton Poser
   se retrouvait par-dessus le bloc qu'on est en train d'etendre. Pendant une
   glisse, aucun bouton n'a de sens : on designe la destination au doigt. */
body.bed-resizing .bed-item-resizing .place-pose,
body.bed-dragging .place-pose {
	display: none;
}

body:not(.bed-updating) .place-pose,
body:not(.bed-updating) .place-garden-block-placeholder,
body:not(.bed-updating) .place-grid-series-timeline-placeholder {
	display: none;
}

body:not(.bed-updating) .place-update-live .place-pose,
body:not(.bed-updating) .place-update-live .place-garden-block-placeholder {
	display: flex;
}

body:not(.bed-updating) .place-update-live .place-grid-series-timeline-placeholder {
	display: block;
}

body.place-selecting .place-selected:not(.place-locked) {
	cursor: grab;
}

body.place-selecting .place-garden-block:not(.place-selected):not(.place-selected-series),
body.place-selecting .place-grid-series-timeline:not(.place-selected):not(.place-selected-series) {
	opacity: 1;
}

body:is(.bed-updating, .panel-open) #zone-container.place-posing .place-garden-block:not(.place-current):not(.place-selected-series):not(.place-garden-block-placeholder):not(.place-garden-block-task),
body:is(.bed-updating, .panel-open) #zone-container.place-posing .place-grid-series-timeline:not(.place-current):not(.place-selected-series):not(.place-grid-series-timeline-placeholder):not(.place-grid-series-timeline-task) {
	opacity: 0.4;
}

body:is(.bed-updating, .panel-open) #zone-container.place-posing .place-garden-block.place-current:not(.place-hidden),
body:is(.bed-updating, .panel-open) #zone-container.place-posing .place-grid-series-timeline.place-current:not(.place-hidden) {
	opacity: 1;
}

/* Les autres planches de la série qu'on assole restent saisissables : elles font
   partie de ce qu'on est en train de composer. Les blocs des autres séries le sont
   aussi sur le plan général, où leur clic mène à la série : on les consulte, on ne
   les arme pas. */
body:is(.bed-updating, .panel-open) #zone-container.place-posing .place-garden-block:not(.place-current):not(.place-selected-series),
body:is(.bed-updating, .panel-open) #zone-container.place-posing .place-grid-series-timeline:not(.place-current):not(.place-selected-series) {
	cursor: pointer;
}

body.place-update-open #zone-container .place-garden-block:is([data-series], [data-task]):not(.place-current):not(.place-selected-series):not(.place-hidden),
body.place-update-open #zone-container .place-grid-series-timeline:is([data-series], [data-task]):not(.place-current):not(.place-selected-series):not(.place-hidden) {
	cursor: default;
	pointer-events: none;
}

body.place-update-open #zone-container .place-garden-block-task:not(.place-current),
body.place-update-open #zone-container .place-grid-series-timeline-task:not(.place-current) {
	opacity: 0.4;
}

body:is(.bed-updating, .panel-open).series-selector-present #zone-container.place-posing .place-garden-block.place-selected:not(.place-hidden),
body:is(.bed-updating, .panel-open).series-selector-present #zone-container.place-posing .place-grid-series-timeline.place-selected:not(.place-hidden) {
	opacity: 1;
}

.series-selector-cultivation.selected .place-context .btn-secondary {
	background-color: var(--primary);
	border-color: var(--primary);
}

.series-selector-cultivation.selected .place-context a.util-chip.place-chip-on,
.series-selector-cultivation.selected .place-context a.util-chip.place-chip-on:hover {
	background-color: var(--primary);
	border-color: var(--primary);
}

.series-selector-cultivation.selected .place-context .place-gauge-value,
.series-selector-cultivation.selected .place-context .place-context-bar i {
	background-color: var(--primary);
}

.place-lock-badge {
	position: absolute;
	top: -11px;
	left: var(--lock-side, -11px);
	right: var(--lock-side-right, auto);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: white;
	color: var(--primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
	font-size: 0.75rem;
	pointer-events: auto;
}

.place-locked {
	filter: saturate(0.35);
}

[data-soil-color="white"] .place-grid-series-timeline-season.place-locked {
	filter: none;
	background-color: var(--background-odd);
	border-color: color-mix(in srgb, var(--block-color, var(--muted)) 50%, white);
}

.place-fill-live {
	cursor: pointer;
}

.place-garden-block.place-selected .place-fill {
	min-height: 2rem;
}

.place-fill-live:hover {
	background-color: rgba(0, 0, 0, 0.45);
}

.place-fill-live:hover b,
.place-fill-live:hover .place-fill-pencil,
[data-soil-color="white"] .place-fill-live:hover b {
	color: white;
}

.place-fill-pencil {
	position: relative;
	display: flex;
	align-items: center;
	color: white;
	font-size: 0.7rem;
}

/* La longueur est une pastille calee a droite, pas un fond. En « static » sa
   jauge interne, elle absolue, se positionnait sur le bloc entier : le chiffre
   restait colle au nom et le clic qui regle la longueur partait de n'importe ou
   sur la serie. */
.plot-card .place-grid-series-timeline .place-fill {
	position: relative;
	flex: none;
	left: auto;
	right: auto;
	bottom: auto;
	width: auto;
	margin-left: auto;
}

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

	.place-garden-block .place-handle:before {
		right: 0;
		left: -32px;
	}

	.place-garden-block .place-handle-start:before {
		right: -32px;
		left: 0;
	}

	.place-grid-series-timeline .place-handle:before {
		top: -32px;
		bottom: 0;
	}

	.place-grid-series-timeline .place-handle-start:before {
		top: 0;
		bottom: -32px;
	}

	.place-fill {
		overflow: visible;
	}

	.place-fill i {
		border-radius: 9px;
	}

	.place-fill:before {
		content: "";
		position: absolute;
		top: -13px;
		right: 0;
		bottom: -13px;
		left: 0;
	}

	.place-drop:before,
	.place-back:before,
	.place-length:before {
		content: "";
		position: absolute;
		top: -7px;
		right: -7px;
		bottom: -7px;
		left: -7px;
	}

}

@media (pointer: coarse) {

	.place-pill-inert {
		pointer-events: none;
	}

}

body:not([data-place-editing="1"]) #series-selector {
	display: none;
}

body:not([data-place-editing="1"]) .place-item-write {
	display: none;
}

body[data-place-editing="1"].series-selector-shown #series-selector-button {
	display: inline-block;
}

body:not([data-place-editing="1"]) .place-garden-block-season,
body:not([data-place-editing="1"]) .place-grid-series-timeline-season,
body:not([data-place-editing="1"]) .place-garden-block-task,
body:not([data-place-editing="1"]) .place-grid-series-timeline-task {
	cursor: pointer;
}

.place-tip-head {
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
}

.place-tip-line {
	margin-bottom: 0.25rem;
	color: rgba(255, 255, 255, 0.72);
}

.place-tip-key {
	color: white;
	font-weight: 700;
}

body[data-place-editing="1"] .place-garden-block[data-locked="1"],
body[data-place-editing="1"] .place-grid-series-timeline[data-locked="1"] {
	cursor: not-allowed;
}

.place-grid-series-timeline.place-grid-series-timeline-task.place-current,
.place-garden-block.place-garden-block-task.place-current {
	box-shadow: none;
}

.place-grid-series-timeline.place-grid-series-timeline-task {
	z-index: 18;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1.5px dashed var(--dark);
	border-radius: 0.25rem;
	background-color: var(--background);
	color: var(--dark);
	font-size: 0.7rem;
	font-weight: 700;
}

.place-grid-series-timeline.place-grid-series-timeline-task .place-grid-series-timeline-name {
	padding: 0 0.25rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#place-helper-tip {
	max-width: 24rem;
	font-size: 1rem;
	line-height: 1.5;
}

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

	body.place-tokens-shown .soil-filter {
		display: none;
	}

	body.place-search-open.place-tokens-shown #place-tokens-scroll {
		display: none;
	}

	body.place-search-open.place-tokens-shown .soil-filter {
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 1001;
		right: 0.75rem;
		bottom: 0;
		left: calc(max(3.4rem, var(--touch-target)) + 1.25rem);
		height: var(--place-tokens-height, 57px);
	}

	body.place-search-open.place-tokens-shown .soil-filter > * {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.place-search-open.place-tokens-shown .soil-filter .place-filter-empty {
		display: none;
	}

	body.place-search-open.place-tokens-shown .soil-filter .util-omnibox-field {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.place-search-open.place-tokens-shown .soil-filter .util-omnibox-token {
		flex: none;
	}

}

/* ===== production/series/static/css/planning.css ===== */
#planning-weekly-container .tabs-item a.tab-item[data-tab="todo"]:hover,
#planning-weekly-container .tabs-item a.tab-item.selected[data-tab="todo"] {

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

	&:after {
		background-color: var(--todo);
	}
	
}

#planning-weekly-container .tabs-item a.tab-item[data-tab="done"]:hover,
#planning-weekly-container .tabs-item a.tab-item.selected[data-tab="done"] {

	& {
		color: var(--done);
	}

	&:after {
		background-color: var(--done);
	}
	
}

#planning-weekly-tabs:has(a.tab-item[data-tab="done"].selected) {
}

#planning-weekly-container .tabs-item a.tab-item[data-tab="time"]:hover,
#planning-weekly-container .tabs-item a.tab-item.selected[data-tab="time"] {
	
	& {
		color: var(--primary);
	}

	&:after {
		background-color: var(--primary);
	}
	
}

#planning-weekly-tabs:has(a.tab-item[data-tab="time"].selected) {
}

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

	body[data-template~="structure-planning-yearly"] header {
		position: relative;
	}

}

body[data-template~="structure-planning-yearly"] main {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto 1fr;
	overflow: hidden;
	height: 100vh;
}

body[data-template~="structure-planning-yearly"] main > div.container {
	margin-top: 0;
}

#planning-year-wrapper {
	padding: 0 1rem;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

#planning-year-weeks {
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 1rem;
	align-items: start;
	height: 100%;
	overflow-y: hidden;
}

#planning-year-weeks .planning-year-week {
	display: grid;
	grid-template-rows: auto auto 1fr;
	width: 20rem;
	background-color: white;
	border-radius: var(--radius);
	box-shadow: 1px 1px 1px #88888850;
	height: 100%;
	overflow: auto;
	padding-bottom: 1rem;
}

#planning-year-weeks .planning-year-week.planning-year-week-current {
	border: 2px solid var(--secondary);
}

#planning-year-weeks .planning-year-week h2.planning-year-week-title {
	margin-top: 1rem;
	margin-bottom: 0;
	text-align: center;
	background: white;
	position: sticky;
	top: 0;
}

#planning-year-weeks .planning-year-week div.planning-year-week-days {
	font-size: .9rem;
	text-align: center;
	margin-bottom: 1rem;
	color: var(--primary);
}

body[data-template~="structure-planning-daily"],
body[data-template~="structure-planning-yearly"] {
	height: 100vh;
	min-height: 100vh;
}

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

	[data-template~="structure-planning-yearly"][data-template~="structure-planning-scrolling"],
	[data-template~="structure-planning-daily"][data-template~="structure-planning-scrolling"] {
		height: calc(100vh + var(--nav-height));
		min-height: calc(100vh + var(--nav-height));
	}

	body[data-template~="structure-planning-daily"] header {
		position: relative;
	}

}

#planning-daily-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr;
	overflow: hidden;
	height: calc(100vh - var(--nav-height));
	padding-top: 1rem;
}

body[data-template~="structure-planning-weekly"] main > div.container,
body[data-template~="structure-planning-daily"] main > div.container {
	margin-top: 0;
}

body[data-touch="yes"][data-template~="structure-planning-daily"] main {
	height: calc(100vh - var(--nav-structure));
}

body[data-template~="structure-planning-daily"] #planning-search {
	width: calc(var(--screen-width) - var(--nav-width));
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* Les en-têtes collants des jours se rangent dans la pile de ce conteneur : sans elle, leur z-index se
   compare à celui des listes ouvertes au-dessus du planning, celle du champ de saisie comprise. */
#planning-daily-container {
	overflow-x: auto;
	overflow-y: hidden;
	isolation: isolate;
}

#planning-daily-list {
	display: grid;
	transition: all 1s;
	height: 100%;
}

@media (max-width: 575px) {

	#planning-daily-list {
		width: calc(100vw * 8);
		grid-template-columns: repeat(8, 100vw);
		padding: 0;
	}

}

@media (min-width: 576px) {

	#planning-daily-list {
		width: calc(30rem * 8 + var(--container-padding) * 2 + var(--nav-width));
		grid-template-columns: repeat(8, 30rem);
		padding: 0 var(--container-padding);
	}

}

.planning-daily {
	margin-bottom: 2rem;
	height: 100%;
	overflow: auto;
	padding: 0 1rem 2rem;
}

.planning-daily:not(:first-child) {
	border-left: 1px solid white;
}

.planning-daily-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 400;
	background-color: var(--background-body);
	height: 5rem;
	margin-left: -1rem;
	margin-right: -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.planning-daily-header h2 {
	margin-bottom: 0;
	font-size: 1.6rem;
}
.planning-daily-header + div.planning-week-title {
	margin-top: 0rem;
}

.planning-daily-today .planning-daily-header h2 {
	font-weight: bold;
}

.planning-daily-absent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 1rem;
}

#planning-weekly-wrapper {
	display: grid;
	align-items: flex-start;
	margin-bottom: 2rem;
}

@media (min-width: 992px) {

	#planning-weekly-wrapper {
		grid-template:
			"time time" auto
			"actions actions" auto
			"todo done" 1fr / 1fr 1fr;
		grid-column-gap: 2rem;
		grid-row-gap: 1rem;
	}

	#planning-weekly-tabs {
		display: none;
	}

}

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

	#planning-weekly-wrapper {
		grid-template:
			"time time" auto
			"actions actions" auto
			"todo done" 1fr / 1fr 1fr;
		grid-column-gap: 1rem;
		grid-row-gap: 0.5rem;
	}

	#planning-weekly-tabs {
		display: none;
	}

}

@media (max-width: 767px) {

	#planning-weekly-wrapper {
		grid-template:
			"actions" auto
			"tabs" auto
			"todo" auto
			"done" auto
			"time" auto / 1fr;
		grid-row-gap: 0;
	}

}

@media (min-width: 768px) {

	#planning-weekly-container > .tabs-item {
		display: none;
	}

}

@media (min-width: 768px) {

	#planning-weekly-wrapper > .tab-panel:not(.selected) {
		display: block;
	}

}

div.tasks-calendar-search {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.25rem;
}

/* `template-structure.css` annule la marge basse du dernier enfant de la tête, au-dessus de 1100 px
   de large et 600 px de haut seulement : l'enveloppe que `taskWeek.v.php` remplace en devient ce
   dernier enfant, et la bande qu'elle porte garderait sa marge. */
#tasks-calendar-top > :last-child {
	margin-bottom: 0;
}

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

	#tasks-calendar-top > :last-child {
		margin-bottom: var(--space-md);
	}

}

a.tasks-calendar-week {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

a.tasks-calendar-week .asset-icon {
	font-size: 0.6em;
	margin-left: var(--space-xs);
	vertical-align: middle;
}

/* Le disque précédent est posé dans le `h1`, où la classe de la rangée des pages le met en bloc. */
span.tasks-calendar-before {
	display: inline-flex;
	vertical-align: top;
	margin-right: var(--space-sm);
}

span.tasks-calendar-days {
	display: block;
	margin-left: calc(2rem + 2px + var(--space-sm));
}

#tasks-calendar-months-wrapper {
	background-color: var(--background-light);
	height: 3rem;
	margin-bottom: 0.5rem;
}

#tasks-calendar-months {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	background-color: var(--background-light);
}

a.tasks-calendar-month {
	color: var(--text);
	font-weight: bold;
	text-decoration: none;
	transition: border-color 0.25s;
}

@media (max-width: 767px) {

	a.tasks-calendar-month {
		text-transform: capitalize;
	}

}

@media (min-width: 768px) {

	a.tasks-calendar-month {
		text-transform: uppercase;
	}

}

a.tasks-calendar-month:hover,
a.tasks-calendar-month.selected {
	color: var(--secondary);
}

a.tasks-calendar-month.selected {
	font-size: 1.2rem;
}

#planning-weekly-tabs {
	grid-area: tabs;
	margin-top: 1rem;
}

#planning-weekly-time {
	grid-area: time;
}

#planning-weekly-time:empty {
	display: none;
}

#planning-weekly-time .tabs-item {
	border-bottom: 0;
}

#planning-daily-time {
	width: calc(var(--screen-width) - var(--nav-width));
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* Borné à la rangée dépliée, et à l'onglet lui-même : l'id battrait les deux règles du socle, celle qui masque
   les onglets d'une rangée repliée et celle qui masque l'onglet-menu d'une rangée dépliée, lequel prend la
   classe de l'onglet choisi. */
#planning-daily-time :not(.tabs-h-folded) > .tabs-item > .tasks-time-all:not(.tab-item-menu) {
	display: flex;
}

/* L'onglet-menu prend les classes de l'onglet choisi : ses vignettes sont dans son libellé, pas à sa racine. */
#planning-daily-time .tasks-time-all:not(.tab-item-menu) > *:not(:first-child),
#planning-daily-time .tasks-time-all > .tab-item-menu-label > *:not(:first-child) {
	margin-left: -1.5rem;
}

#planning-daily-time .tasks-time-all.tasks-time-all-condensed:not(.tab-item-menu) > *:not(:first-child),
#planning-daily-time .tasks-time-all.tasks-time-all-condensed > .tab-item-menu-label > *:not(:first-child) {
	margin-left: -2rem;
}

#planning-daily-time .tabs-item {
	margin-bottom: 0;
}

#planning-weekly-time .tabs-item {
	margin-bottom: 0;
}

@media (min-width: 768px) {

	#planning-weekly-time .tabs-item {
		grid-column-gap: 1rem;
	}

}

#planning-weekly-time .tab-item {
	padding: 0.5rem .75rem;
}

#planning-weekly-time .tab-item:after {
	display: none;
}

#planning-weekly-time .tab-item.selected,
#planning-weekly-time .tab-item:hover {
	background: var(--primary);
}

.tasks-time-content {
	padding: 1rem 0.75rem;
	background: var(--gradient);
}


#planning-weekly-done {
	grid-area: done;
}

#planning-weekly-todo {
	grid-area: todo;
}

@media (max-width: 767px) {

	#planning-weekly-todo {
		margin-bottom: 1rem;
	}

}

div.planning-week h2 {
	margin-bottom: 0;
}

div.planning-week-header {
	padding: 1rem 0;
}

@media (max-width: 767px) {

	div.planning-week-header {
		text-align: end;
		padding: 0 0 1rem 0;
	}

	h2.planning-week-title {
		display: none;
	}

}

@media (min-width: 767px) {

	div.planning-week-header {
		display: flex;
		justify-content: space-between;
	}

}

div.planning-week-title {
	padding: 0.75rem 1rem;
	background-color: var(--todo);
	margin-top: 2rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: white;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

div.planning-week-title-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

div.planning-week-title-action a {
	text-transform: none;
	letter-spacing: 0;
	font-weight: normal;
	color: white;
	font-size: 0.9rem;
}

#planning-weekly-wrapper div.planning-filters {
	grid-area: actions;
}

div.planning-filters {
	display: flex;
	align-items: center;
	background-color: var(--background-light);
	padding: 0.5rem;
	overflow-x: auto;
}

@media (max-width: 575px) {

	div.planning-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 0.125rem;
		margin-left: calc(-1 * var(--container-xs-padding));
		margin-right: calc(-1 * var(--container-xs-padding));
	}

}

@media (min-width: 576px) {

	div.planning-filters {
		gap: 0.5rem;
		width: 100%;
		overflow-x: auto;
		border-radius: var(--radius);
	}

}

div.planning-filters-buttons {
	display: flex;
}

div.planning-filters-buttons a.btn {
	padding: 0.5rem;
	font-size: 1.25rem;
	margin-right: 0.5rem;
}

a.planning-filters-favorite {
	display: block;
	border-radius: var(--radius);
	padding: 0.5rem;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: filter 0.5s;
}

@media (max-width: 767px) {

	a.planning-filters-favorite {
		letter-spacing: -0.1px;
	}

}

a.planning-filters-favorite.selected {
	border: 2px solid white;
}

a.planning-filters-favorite:hover {
	text-decoration: none;
	filter: brightness(0.9);
}


@media (max-width: 575px) {

	div.planning-filters-dropdown .dropdown-item {
		padding: 0.75rem 0.5rem;
		letter-spacing: -0.2px;
		font-size: 0.9rem;
	}

	div.planning-filters-dropdown.dropdown-list-4 {
		grid-template-columns: minmax(25vw, auto) minmax(25vw, auto) minmax(25vw, auto);
	}

}

@media (min-width: 575px) {

	div.planning-filters-dropdown .dropdown-item {
		padding: 0.75rem;
	}

}

.planning-plant-list {
	margin-bottom: 0;
	font-size: 0.9rem;
}

.planning-daily .planning-plant-list {
	font-size: 0.9rem;
}

.planning-plant-list tbody {
	background-color: var(--background-odd);
}

.planning-plant-list tbody tr:not(:first-child) td {
	border-top: 1px dashed var(--border);
}

.planning-plant-list thead th {
	padding-top: 0;
	padding-bottom: 0.125rem;
	color: var(--muted);
	background-color: transparent;
}

.planning-plant-list tbody td {
	vertical-align: baseline;
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
}

.planning-plant-value {
	text-align: end;
}

table.planning-plant-list-semis-pepiniere .planning-plant-value {
	width: 7rem;
}

.planning-daily .planning-plant-area {
	display: none;
}

#planning-export-container .flow-timeline-comments,
#planning-export-container .tasks-planning-plant,
#planning-export-container .tasks-planning-item-validate {
	display: none;
}

#planning-export-container .planning-export-container {
	display: none;
}

#planning-export-container .tasks-planning-action {
	position: relative;
	top: 0;
}

#planning-export-container .tasks-planning-action .tasks-planning-select {
	visibility: hidden;
}

#planning-export-container .tasks-planning-item-main {
	grid-template-columns: 2fr 1fr;
	padding: 0.375rem 0;
}

#planning-export-container .tasks-planning-item-description,
#planning-export-container .tasks-planning-item-details {
	grid-column: span 2;
}
/* Sans étape à 100 %, le fond revient à celui de la ligne et non à la transparence. */
div.tasks-planning-item.tasks-planning-item-arrived {
	animation: tasks-planning-item-arrived 1.2s ease-out;
}

.tasks-planning-item-appeared {
	animation: tasks-planning-item-appeared 0.3s ease-out;
}

div.tasks-planning-item.tasks-planning-item-appeared {
	animation: tasks-planning-item-appeared 0.3s ease-out, tasks-planning-item-arrived 1.2s ease-out 0.3s;
}

@keyframes tasks-planning-item-arrived {
	0%, 40% { background-color: color-mix(in srgb, var(--primary) 12%, transparent); }
}

@keyframes tasks-planning-item-appeared {
	0% { opacity: 0; transform: translateY(-0.5rem); }
}

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

	div.tasks-planning-item.tasks-planning-item-arrived,
	.tasks-planning-item-appeared,
	div.tasks-planning-item.tasks-planning-item-appeared {
		animation: none;
	}

}

/* ===== production/series/static/css/task.css ===== */
div.task-select-start {
	padding-top: 1rem;
	position: relative;
}


div.tasks-planning-action,
div.tasks-planning-plant {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: stretch;
	grid-column-gap: 0.5rem;
}

@media (max-width: 575px) {

	div.tasks-planning-action,
	div.tasks-planning-plant {
		grid-template-columns: 2.5rem 1fr;
	}

}

div.tasks-planning-plant {
	background-color: white;
}

div.tasks-planning-action {
	position: sticky;
	top: var(--mainSticky);
	z-index: 12;
	background-color: var(--background-light);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

#planning-daily-list div.tasks-planning-action {
	position: initial;
}

a.tasks-planning-action-name {
	display: block;
	font-weight: bold;
	padding: 0.5rem 0;
	align-self: center;
	line-height: 1.3;
}

.tasks-planning-plant-name {
	display: block;
	font-weight: bold;
	padding-top: 0.25rem;
}

.tasks-planning-plant-image {
	padding-top: 0.25rem;
	display: flex;
	justify-content: center;
	cursor: pointer;
}

.tasks-planning-plant-image svg {
	margin-bottom: -0.1rem;
}

.tasks-planning-plant-image input {
	display: none;
}

.tasks-planning-plant-name {
	align-self: center;
}

#planning-weekly-todo a.tasks-planning-action-name {
	color: var(--todo);
}

#planning-weekly-done a.tasks-planning-action-name {
	color: var(--done);
}

div.tasks-planning-items {
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

div.tasks-planning-item {
	position: relative;
	background-color: white;
	transition: all 0.5s;
	user-select: none; /* Avoid weird selection */
}

div.tasks-planning-item:last-child {
	border-bottom-left-radius: calc(var(--radius) / 2);
	border-bottom-right-radius: calc(var(--radius) / 2);
}

div.tasks-planning-item:not(:last-child) {
	border-bottom: 1px dashed var(--border);
}

div.tasks-planning-item {
	display: grid;
	align-items: stretch;
}

div.tasks-planning-item.tasks-planning-item-todo {
	grid-template-columns: auto 1fr auto;
}

div.tasks-planning-item.tasks-planning-item-done {
	grid-template-columns: auto 1fr;
}

div.tasks-planning-item.tasks-planning-item-todo {
	padding-right: 0;
}

div.tasks-planning-item div.tasks-planning-item-base {
	display: grid;
	grid-column-gap: 0.5rem;
	align-items: center;
	grid-template-columns: 1fr auto;
	padding: 0 0.5rem;
}

label.tasks-planning-select {
	width: 2.25rem;
	margin: 0;
	padding-top: 0.5rem;
	text-align: center;
	line-height: 1;
}

@media (max-width: 575px) {

	label.tasks-planning-select {
		width: 2.5rem;
	}

}

label.tasks-planning-select input {
	position: relative;
	z-index: 11;
	width: 1.2rem;
	height: 1.2rem;
}


a.tasks-year-item {
	display: grid;
	padding: 0.5rem 0.75rem;
	color: inherit;
	text-decoration: none;
	border-top: 1px solid var(--border);
	user-select: none; /* Avoid weird selection */
}

a.tasks-year-item:hover {
	transition: all 0.5s;
	background-color: var(--background-light);
}

div.tasks-planning-item.highlight {
	box-shadow: 0 0 2rem var(--muted);
	z-index: 1;
	position: relative;
}

div.tasks-header + div.tasks-planning-item:last-child {
	margin-bottom: 0;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

@media (max-width: 767px) {

	#planning-wrapper-weekly div.tasks-header + div.tasks-planning-item:last-child {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}


}

.tasks-planning-item-main {
	align-self: stretch;
}

a.tasks-planning-item-main {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0.25rem;
	text-decoration: none;
	color: var(--text);
	padding: 0.5rem 0;
	line-height: 1.4;
}

.tasks-planning-item-series {
	color: var(--muted);
	line-height: 1.4;
	font-size: 0.9rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

span.tasks-planning-item-plant {
	font-weight: bold;
	color: var(--text);
	font-size: 1rem;
	margin-right: 0.5rem;
}

span.tasks-planning-item-series-name {
	text-decoration: underline;
}

div.tasks-planning-item-series-places,
div.tasks-planning-item-series-places > div {
	display: inline;
	font-size: 0.8rem;
	letter-spacing: -0.1px;
}

div.tasks-planning-item-actions {
	align-self: baseline;
	line-height: 1.2;
	display: grid;
	grid-template-columns: 1fr;
}

div.tasks-planning-item-actions:only-child {
	justify-self: end;
}

div.tasks-planning-item-validate {
	padding: 0.125rem 0.25rem;
}

div.tasks-planning-item-content {
	line-height: 1.2;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

div.tasks-planning-item-content:empty {
	display: none;
}

div.tasks-planning-item-content:not(:first-child) {
	margin-top: 0.25rem;
}

.tasks-planning-item-days {
	font-size: 0.7rem;
	color: var(--text);
	border-radius: var(--radius);
	line-height: 1;
	font-weight: bold;
	margin-right: 0.25rem;
}

div.tasks-planning-item-label {
	font-weight: bold;
	display: inline-block;
}

span.tasks-planning-item-label-time {
	font-style: italic;
	font-weight: normal;
	color: var(--muted);
}

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

	div.tasks-planning-item-comment {
		display: none;
	}

}

div.tasks-planning-item-more {
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--muted);
}

div.tasks-planning-item-more:not(:first-child) {
	margin-top: 0.125rem;
}

div.tasks-planning-item-more > *:not(:last-child):after {
	content: '•';
	padding: 0 0.5rem;
}

a.tasks-planning-item-user {
	font-size: 0.9rem;
	text-decoration: none;
	display: flex;
	column-gap: 0.25rem;
	align-items: center;
	padding: 0.25rem 0;
}

a.tasks-planning-item-user:first-child {
	padding-top: 0.5rem;
}

a.tasks-planning-item-user:last-child {
	padding-bottom: 0.5rem;
}

div.tasks-item-users {
	display: flex;
	line-height: 1;
}

div.tasks-item-users-list {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}

div.tasks-item-users-list > *:not(:last-child) {
	margin-right: -0.5rem;
}

div.tasks-item-users-list .media-circle-view {
	border: 0;
	transition: all 0.5s;
}

div.tasks-item-users-list a:hover {
	text-decoration: none;
}

a.tasks-planning-item-time {
	grid-area: time;
	display: inline-grid;
	align-items: center;
	grid-template-columns: auto 1fr;
	text-decoration: none;
	width: 4rem;
	font-size: 0.9rem;
	padding: 0.5rem 0;
}

a.tasks-planning-item-time.highlight {
	color: white;
	border-color: var(--secondary);
	background-color: var(--secondary);
}

a.tasks-planning-item-time:hover {
	border-color: var(--primary);
}

div.tasks-planning-item-time-value {
	margin-left: 0.25rem;
}

a.tasks-time-user {
	text-decoration: none;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	line-height: 1;
}

div.tasks-time-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr) min-content 1fr;
	justify-items: center;
}

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

	div.tasks-time-days {
		grid-template-columns: repeat(7, auto) auto max-content;
	}

}

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

	div.tasks-time-days {
		grid-template-columns: repeat(5, minmax(auto, 110px));
		grid-row-gap: 2rem;
	}

}

@media (max-width: 575px) {

	div.tasks-time-days {
		grid-template-columns: repeat(4, minmax(auto, 110px));
		grid-row-gap: 2rem;
	}

	div.tasks-time-days > svg {
		display: none;
	}

}

div.tasks-time-days > svg {
	align-self: center;
	margin: 1.5rem 0.5rem 0 0.5rem;
	font-size: 1.5rem;
}

div.tasks-time-day-future {
	opacity: 0.3;
	pointer-events: none;
}

div.tasks-time-day > h5 {
	margin-bottom: 0.5rem;
	text-align: center;
	grid-column: span 2;
}

@media (min-width: 992px) {

	div.tasks-time-day > h5 {
		margin-bottom: .75rem;
	}

}

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

	div.tasks-time-day > h5 {
		letter-spacing: -0.3px;
	}

}

div.tasks-time-day-values {
	display: grid;
	grid-gap: 0.5rem;
	justify-content: center;
	align-items: center;
}

#planning-daily-list div.tasks-time-day-values {
	grid-auto-flow: column;
}

@media (min-width: 1200px) {

	div.tasks-time-day-values {
		grid-auto-flow: column;
	}

}

div.tasks-time-day-absent {
	color: var(--danger);
	margin-top: .25rem;
	text-align: center;
}

.tasks-time-day-full {
	width: 4rem;
	height: 2.5rem;
	border-radius: var(--radius);
	background-color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	position: relative;
}

div.tasks-time-day.tasks-time-day-global .tasks-time-day-full {
	background-color: transparent;
	color: var(--primary);
	background: var(--background-light);
	border: 2px solid var(--primary);
	font-weight: bold;
}

a.tasks-time-day-full-link {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	transition: background-color 0.5s;
	text-decoration: none;
}

div.tasks-time-day-full-form {
	padding: 1rem;
	background-color: white;
}

div.tasks-time-day-full-form form {
	display: grid;
	grid-row-gap: 0.5rem;
}

div.tasks-time-day-timesheet {
	color: var(--primary);
	font-size: 0.9rem;
	letter-spacing: -0.3px;
	text-align: center;
}

@media (min-width: 1200px) {

	div.tasks-time-day div.tasks-time-day-timesheet {
		margin-left: -2rem;
		padding: 0.5rem 0.5rem 0.5rem 2rem;
		border-radius: var(--radius);
		background: rgba(0, 0, 0, 0.04);
	}

}

span.tasks-time-day-numeric {
	font-size: 0.8rem;
	font-weight: lighter;
}

@media (max-width: 991px) {

	span.tasks-time-day-numeric {
		display: block;
		color: var(--muted);
	}

}

@media (min-width: 992px) {

	span.tasks-time-day-numeric {
		margin-left: 0.5rem;
	}

}

div.tasks-time-day-timesheet.tasks-time-day-timesheet-alert {
	color: var(--danger);
}

div.task-item-header {
	margin-bottom: 1rem;
}

div.task-item-presentation {
	display: grid;
	margin-bottom: 2rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

@supports (grid-template-columns: subgrid) {

	.task-item-presentation {
		grid-template-rows: auto auto;
	}

}

.task-item-presentation > div {
	display: grid;
}

@supports (grid-template-columns: subgrid) {

	.task-item-presentation > div {
		grid-row: span 2;
		grid-template-rows: subgrid;
	}

}

.task-item-presentation > div > *:first-child {
	align-self: center;
}

@media (min-width: 768px) {

	div.task-item-presentation.task-item-presentation-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	div.task-item-presentation.task-item-presentation-2 > div:first-child {
		border-right: 1px solid var(--border);
	}

}

@media (max-width: 767px) {

	div.task-item-presentation.task-item-presentation-2 {
		grid-template-columns: 1fr;
	}

	div.task-item-presentation.task-item-presentation-2 > div:first-child {
		border-bottom: 1px solid var(--border);
	}

}

@media (min-width: 992px) {

	div.task-item-presentation.task-item-presentation-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	div.task-item-presentation.task-item-presentation-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	div.task-item-presentation.task-item-presentation-3 > div:not(:nth-child(3n)) {
		border-right: 1px solid var(--border);
	}

	div.task-item-presentation.task-item-presentation-4 > div:not(:nth-child(4n)) {
		border-right: 1px solid var(--border);
	}

}

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

	div.task-item-presentation.task-item-presentation-3,
	div.task-item-presentation.task-item-presentation-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	div.task-item-presentation.task-item-presentation-3 > div:not(:nth-child(2n)),
	div.task-item-presentation.task-item-presentation-4 > div:not(:nth-child(2n)) {
		border-right: 1px solid var(--border);
	}

	div.task-item-presentation.task-item-presentation-3 > div:not(:nth-child(n + 3)),
	div.task-item-presentation.task-item-presentation-4	 > div:not(:nth-child(n + 3)) {
		border-bottom: 1px solid var(--border);
	}

}

@media (max-width: 575px) {

	div.task-item-presentation {
		grid-template-columns: 1fr;
	}

	div.task-item-presentation > div:not(:last-child) {
		border-bottom: 1px solid var(--border);
	}

}

div.task-item-presentation > div {
	padding: 1rem;
}

div.task-item-presentation h4 {
	color: var(--secondary);
}

.task-item-presentation-week-days {
	margin-left: 0.5rem;
	color: var(--muted);
	font-weight: normal;
	font-size: .8rem;
}

/* Fertilisation */
select.task-fertilizer-field {
	display: inline-block;
	width: auto;
	padding-right: 3rem;
}

div.task-fertilizer-grid {
	display: grid;
	grid-template-columns: auto auto auto auto 1fr;
	align-items: center;
	grid-row-gap: 0.25rem;
	grid-column-gap: 1rem;
	padding: 0.5rem;
}

@media (min-width: 768px) {

	div.task-fertilizer-grid {
		display: grid;
		grid-template-columns: auto auto 1fr auto auto;
		align-items: center;
		grid-column-gap: 1.5rem;
	}

}

div.task-fertilizer-grid div.task-fertilizer-grid-total {
	border-top: 1px solid var(--border);
	align-self: start;
}

div.task-fertilizer-grid div.task-fertilizer-grid-zone {
	text-transform: uppercase;
	white-space: nowrap;
}

div.task-fertilizer-grid div.task-fertilizer-grid-plot {
	white-space: nowrap;
}

div.task-fertilizer-grid div.task-fertilizer-grid-bed {
	font-weight: bold;
	white-space: nowrap;
}

div.task-fertilizer-grid div.task-fertilizer-grid-size {
	text-align: right;
}

div.task-fertilizer-grid div.task-fertilizer-grid-greenhouse {
	white-space: nowrap;
}

form.task-treatment-settings,
div.task-treatment-settings {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

form.task-treatment-settings {
	margin-bottom: 0.5rem;
}

.task-treatment-settings > * {
	width: auto;
	flex: 1 1 13rem;
}

form.task-treatment-settings > * {
	flex-grow: 0;
}

form.task-treatment-settings > select,
form.task-treatment-settings > .btn,
.task-treatment-settings div.input-group > select {
	flex: none;
	width: auto;
}

div.task-fertilizer-grid.task-treatment-grid-spray {
	grid-template-columns: auto auto auto auto auto 1fr;
}

@media (min-width: 768px) {

	div.task-fertilizer-grid.task-treatment-grid-spray {
		grid-template-columns: auto auto 1fr auto auto auto;
	}

}

div.task-treatment-tanks {
	grid-template-columns: 4rem 6rem 8rem;
	max-width: 20rem;
}

div.task-item-action {
	margin-bottom: 2rem;
}

div.task-item-action dl {
	grid-row-gap: 0.5rem;
}

div.task-item-action dt {
	padding: 0.5rem 0;
}

div.task-item-action dd {
	background-color: var(--background-light);
	padding: 0.5rem;
	border-radius: var(--radius);
}

/* Un élément de grille ne descend pas sous la largeur de son contenu (min-width: auto) : les dessins sortiraient du panneau */
div.task-item-action dd.task-item-plans {
	background-color: transparent;
	padding: 0;
	font-weight: normal;
	min-width: 0;
}

@media (min-width: 576px) {

	div.task-item-action dt.task-item-plans {
		grid-column: 1;
	}

}

div.task-presentation-seedling {
	display: grid;
	width: max-content;
	grid-template-columns: auto auto auto;
	grid-column-gap: 2rem;
	align-items: center;
	font-weight: normal;
}

div.task-presentation-seedling > *:nth-child(3n + 2) {
	font-weight: bold;
}

div.task-presentation-seedling-tools {
	display: grid;
	width: max-content;
	grid-template-columns: auto auto;
	grid-column-gap: 2rem;
	align-items: center;
	font-weight: normal;
}

div.task-presentation-seedling-tools > *:nth-child(2n + 2) {
	font-weight: bold;
}


#task-write-action > ul.nav + div.field-radio-group {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

span.task-write-planned-active a {
	font-weight: bold;
	text-decoration: none;
	color: var(--text);
}

div.task-write-planned[data-period="week"] span.task-write-planned-link-week,
div.task-write-planned[data-period="week"] div.task-write-planned-field:not(.task-write-planned-week),
div.task-write-planned[data-period="week"] span.task-write-planned-separator-1 {
	display: none;
}

div.task-write-planned[data-period="date"] span.task-write-planned-link-date,
div.task-write-planned[data-period="date"] div.task-write-planned-field:not(.task-write-planned-date),
div.task-write-planned[data-period="date"] span.task-write-planned-separator-1 {
	display: none;
}

div.task-write-planned[data-period="unplanned"] span.task-write-planned-link-unplanned,
div.task-write-planned[data-period="unplanned"] div.task-write-planned-field:not(.task-write-planned-unplanned),
div.task-write-planned[data-period="unplanned"] span.task-write-planned-separator-2 {
	display: none;
}

div.task-write-repeat-field {
	margin: 1rem 0;
}

#panel-task-create h3 {
	margin-bottom: 0;
}

/* Add a new task in the flow */
div.task-create-from {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-column-gap: 1rem;
}

@media (max-width: 767px) {

	div.task-create-from {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		justify-content: center;
		grid-row-gap: 1rem;
	}

}

div.task-create-from > *:nth-child(2) {
	align-self: center;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

#task-create-plant {
	margin-bottom: 1rem;
}

.task-time-hour {
	margin-left: 0.1rem;
	margin-right: 0.1rem;
	font-size: max(0.9rem, 0.83em);
}

.task-field-vignette {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: .5rem;
	align-items: center;
}

.task-field-link {
	line-height: 1.2;
}

.task-field-place {
	margin-top: 0.2rem;
	font-size: 0.8rem;
	line-height: 1.2;
	color: var(--muted);
}

.task-field-place a {
	color: var(--muted);
}

.task-field-area {
	text-align: right;
}

@media (max-width: 575px) {

	.task-field-area {
		display: none;
	}

}

span.task-method-name {
	display: inline-block;
	font-size: 80%;
	padding: 0.125rem 0.5rem;
	border: 2px solid var(--border);
	border-radius: var(--radius);
}

span.task-variety-name {
	font-size: max(0.9rem, 90%);
}

span.task-size-name {
	font-size: max(0.9rem, 90%);
	font-weight: bold;
	font-style: italic;
}

.task-field-stock-remember {
	font-size: 0.8rem;
	color: var(--muted);
	margin-top: 0.25rem;
}

#task-field-bookmark {
	cursor: pointer;
}

#task-field-bookmark input {
	display: none;
}

#task-field-bookmark svg {
	font-size: 1.2rem;
	line-height: 1;
}

#task-field-bookmark input:checked + .task-field-bookmark-no {
	display: none;
}

#task-field-bookmark input:not(:checked) + .task-field-bookmark-no + .task-field-bookmark-yes {
	display: none;
}

/* Tabs */
.tabs-categories {
	display: flex;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

@media (min-width: 576px) {

	.tabs-categories {
		flex-wrap: wrap;
	}

	.tabs-category:not(:last-child) {
		margin-right: 0.25rem;
	}

}

@media (max-width: 575px) {

	.tabs-categories {
		flex-direction: column;
		margin-bottom: 2rem;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		position: relative;
	}

	.tabs-category:not(:last-child) {
		margin-bottom: 1px;
	}

	.tabs-categories:after {
		content: ' ';
		height: 12px;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 16px 12px;
		bottom: calc(-12px - 0.5rem);
		left: 0;
		right: 0;
		position: absolute;
	}

}

.tabs-category {
	display: block;
	padding: 0.5rem 1rem;
	transition: all 0.25s;
	background-color: var(--background);
	color: var(--text);
}
a.tabs-category {
	text-decoration: none;
}

.tabs-category.active,
.tabs-category:hover {
	background-color: var(--secondary);
	color: white;
}

.tabs-category.active {
	font-weight: bold;
}

@media (min-width: 576px) {

	.tabs-category {
		border-top-left-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}

}

@media (max-width: 575px) {

	.tabs-category:first-child {
		border-top-left-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}

	.tabs-category:last-child {
		border-bottom-left-radius: 0.25rem;
		border-bottom-right-radius: 0.25rem;
	}

}

.batch-planned,
.batch-users {
	display: flex;
	align-items: end;
}

body[data-template~="structure-planning-daily"] .batch-one-wrapper,
body[data-template~="structure-planning-weekly"] .batch-one-wrapper {
	left: 2.5rem;
}

@media (max-width: 575px) {

	body[data-template~="structure-planning-daily"] .batch-one-wrapper,
	body[data-template~="structure-planning-weekly"] .batch-one-wrapper {
		left: 2.75rem;
	}

}

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

	body[data-template~="structure-planning-weekly"] .batch-one-wrapper {
		top: calc(50% - 1.25rem);
	}

	body[data-template~="structure-planning-weekly"] .batch-one-item {
		width: 3rem;
	}

	body[data-template~="structure-planning-weekly"] .batch-one-item span {
		display: none;
	}

}

body[data-template~="structure-planning-daily"] .batch-one-item span {
	font-size: 0.75rem;
}

@media (max-width: 1399px) {

	body[data-template~="structure-planning-weekly"] .batch-one-item span {
		font-size: 0.75rem;
	}

}

.batch-planned-user[post-action="add"] .asset-icon-x-lg {
	display: none;
}

.batch-planned-user[post-action="delete"] .asset-icon-plus-lg {
	display: none;
}

.batch-planned-days {
	display: grid;
	grid-template-columns: repeat(4, min-content);
}

.batch-planned-days > *:nth-child(7) {
	grid-column: span 2;
}

.batch-planned-days > *:not(:nth-child(7)):not(:nth-child(4)) {
	border-right: 1px solid rgba(255, 255, 255, 0.33);
}
.batch-planned-days > * {
	border-bottom: 1px solid rgba(255, 255, 255, 0.33);
}

.batch-planned-days-date {
	font-size: 0.9rem;
	color: #fffa;
}

.batch-planned-weeks {
	display: grid;
	grid-template-columns: repeat(2, auto);
}

/* ===== production/series/static/css/analyze.css ===== */
div.analyze-working-time-wrapper {
	margin-bottom: 1rem;
}

div.analyze-working-time-user {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
}

div.analyze-working-time-value {
	font-size: 1.5rem;
	font-weight: lighter;
}

div.analyze-working-time-months {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1px 1px;
	margin-bottom: 1rem;
}

@media (max-width: 991px) {

	div.analyze-working-time-months {
		grid-template-columns: repeat(6, 1fr);
	}

}

@media (max-width: 575px) {

	div.analyze-working-time-months {
		grid-template-columns: repeat(3, 1fr);
	}

}

div.analyze-working-time-month {
	text-align: center;
	padding: 0.5rem;
	background-color: white;
}

.analyze-working-time-week-name,
.analyze-working-time-month-name {
	color: var(--muted);
}

div.analyze-working-time-weeks {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 1px 1px;
	margin-bottom: 1rem;
}

@media (max-width: 991px) {

	div.analyze-working-time-weeks {
		grid-template-columns: repeat(4, 1fr);
	}

}

@media (max-width: 575px) {

	div.analyze-working-time-weeks {
		grid-template-columns: repeat(2, 1fr);
	}

}

div.analyze-working-time-week {
	padding: 0.5rem;
	background-color: white;
}

.analyze-working-time-icon {
	font-size: 1.5rem;
	line-height: 1.1;
}

div.analyze-working-time-wrapper small.task-time-hour {
	margin: 0.125rem;
}

div.analyze-working-time-wrapper span.task-time-minutes {
	font-size: 80%;
}



.analyze-tasks-wrapper {
	overflow-y: auto;
}

.analyze-tasks {
	min-width: 500px;
}

.analyze-tasks .tasks-planning-item-series {
	margin-bottom: 0.25rem;
}

.analyze-tasks .tasks-item-users-list {
	margin-top: 0.25rem;
}

@media (max-width: 767px) {

	.analyze-tasks-users {
		display: none;
	}

}
/* ===== production/sequence/static/css/crop.css ===== */
/* Items */
div.crop-items {
	margin-bottom: 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
}

@media (max-width: 1599px) {

	div.crop-items {
		grid-template-columns: 1fr;
		max-width: 50rem;
	}

	div.crop-item-ghost {
		display: none;
	}

}

div.crop-item {
	border-radius: var(--radius);
	background-color: white;
}

@media (min-width: 1600px) {

	div.crop-item {
		display: grid;
		grid-template-rows: auto 1fr auto;
	}

}

div.crop-item.crop-item-ghost {
	visibility: hidden;
}

div.crop-item-header {
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

div.crop-item-header:not(:last-child) {
	border-bottom: 1px solid var(--border);
}

div.crop-item-title {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-column-gap: 0.5rem;
	align-items: center;
}

div.crop-item-title h2 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: normal;
}

div.crop-item-title h2 a {
	color: inherit;
}

div.crop-item-varieties {
	width: 100%;
	padding-left: 3.5rem;
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	font-size: 0.9rem;
	line-height: 1.4;
}

div.crop-item-varieties.crop-item-varieties-1 {
	grid-template-columns: 1fr;
}

@media (max-width: 575px) {

	div.crop-item-varieties {
		grid-template-columns: 1fr;
	}

}

span.crop-item-varieties-label {
	text-transform: uppercase;
	padding-right: .5rem;
}

span.crop-item-varieties-part {
	color: var(--muted);
}

div.crop-item-soil-infos {
	text-transform: uppercase;
	font-size: 0.9rem;
	line-height: 1.4;
}

div.crop-item-presentation {
	padding: 0.5rem;
}

div.crop-item-info {
	padding: 0.5rem;
	background-color: var(--info);
	font-weight: bold;
	border-bottom-right-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	line-height: 1.4;
}

@media (min-width: 576px) {

	dt.crop-item-harvest-label {
		grid-column-start: 1;
	}

	dd.crop-item-harvest-value {
		grid-column-start: 2;
		grid-column: span 3;
	}

}

@media (max-width: 575px) {

	dt.crop-item-harvest-label {
		grid-column-start: 1;
		grid-column: span 2;
	}

	dd.crop-item-harvest-value {
		grid-column-start: 1;
		grid-column: span 2;
	}

}

div.crop-write-spacing-values {
	display: grid;
	grid-template-columns: auto min-content auto;
	align-items: center;
}

[data-wrapper^="seedlingSeeds"]:not([data-action="sowing"]):not([data-action="young-plant"]) {
	display: none !important;
}

[data-wrapper^="seedlingSeeds"][data-action="sowing"] .crop-field-young-plant {
	display: none;
}

[data-wrapper^="seedlingSeeds"][data-action="young-plant"] .crop-field-sowing {
	display: none;
}
/* ===== production/sequence/static/css/flow.css ===== */
#flow-wrapper {
	margin-bottom: 1.5rem;
}

div.flow-timeline-body {
	background-color: white;
	margin-bottom: 2rem;
}

div.flow-timeline {
	display: grid;
	grid-template-columns: 5rem 6rem 2rem 1fr;
	grid-column-gap: 0.75rem;
	align-items: center;
	transition: background-color 0.5s;
}

@media (max-width: 767px) {

	div.flow-timeline {
		grid-template-columns: 4rem 4rem 2rem 1fr;
		grid-column-gap: 0.5rem;
	}

}

@media (max-width: 449px) {

	div.flow-timeline {
		grid-template-columns: 2.5rem 3rem 2rem 1fr;
		grid-column-gap: 0.25rem;
	}

}

div.flow-timeline-header > .util-table-header{
	padding: 0.5rem 0 0.25rem;
}

div.flow-timeline-new-week:not(:first-child),
div.flow-timeline-inter:not(:first-child),
div.flow-timeline-year:not(:first-child) {
	border-top: 1px dashed rgba(200, 200, 200, 0.75);
}

div.flow-timeline-year {
	background-color: #fafafa;
	font-size: 0.9rem;
	font-weight: bold;
}

div.flow-timeline-year div.flow-timeline-year-value {
	width: 5rem;
	text-align: center;
	padding: 0.5rem 0;
}

@media (max-width: 767px) {

	div.flow-timeline-year div.flow-timeline-year-value {
		width: 4rem;
	}

}

@media (max-width: 449px) {

	div.flow-timeline-year div.flow-timeline-year-value {
		width: 2.5rem;
	}

}

div.flow-timeline-inter {
	background-color: #fafafa;
}

div.flow-timeline-new-season > *:first-child,
div.flow-timeline-new-year > .flow-timeline-anonymous-year {
	font-weight: bold;
	grid-column: span 2;
	margin: 0.75rem 0;
	padding-left: 0.5rem;
}

div.flow-timeline-new-year > .flow-timeline-reference-year {
	font-weight: bold;
	text-align: center;
}

.flow-timeline-item,
.flow-timeline-week {
	display: flex;
	align-items: center;
	position: relative;
	height: 100%;
	min-height: 50px;
}

.flow-timeline-item {
	justify-content: center;
}

.flow-timeline-week {
	font-size: 0.85rem;
	color: var(--muted);
}

a.flow-timeline-item:hover,
a.flow-timeline-week:hover {
	text-decoration: none;
}

@media (max-width: 575px) {

	div.flow-timeline-week {
		font-size: 0.8rem;
	}

}

div.flow-timeline-inter div.flow-timeline-item,
div.flow-timeline-inter div.flow-timeline-week {
	min-height: 14px;
}

.flow-timeline-item:before {
	position: absolute;
	content: ' ';
	left: calc(50% - 1);
	top: 0;
	bottom: 0;
	background-color: var(--primary);
	width: 2px;
}

div.flow-timeline-inter div.flow-timeline-item:before {
	background: linear-gradient(to bottom,
		white 0px, white 2px,
		var(--primary) 2px, var(--primary) 4px,
		white 4px, white 6px,
		var(--primary) 6px, var(--primary) 8px,
		white 8px, white 10px,
		var(--primary) 10px, var(--primary) 12px,
		white 12px, white 14px,
		var(--primary) 14px, var(--primary) 16px,
		white 16px, white 18px
	);
}

div.flow-timeline-action {
	display: flex;
	height: 100%;
	position: relative;
	padding: 0.5rem;
}

a.flow-timeline-circle,
div.flow-timeline-circle {
	position: relative;
	background-color: white;
	color: var(--primary);
	padding: 0.25rem 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	text-decoration: none;
	border-radius: var(--radius);
	transition: color, background-color 0.5s;
}

a.flow-timeline-circle:hover {
	color: white;
	background-color: var(--primary);
}

div.flow-timeline-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	line-height: 1.2;
	width: 100%;
}

div.flow-timeline-move {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

a.flow-timeline-text {
	padding: 0.25rem 0;
	color: var(--text);
}

a.flow-timeline-text:hover {
	text-decoration: none;
}

a.flow-timeline-text:hover .action-text {
	text-decoration: underline;
}

span.flow-timeline-fertilizer {
	font-size: .9rem;
	margin-bottom: .25rem;
}

div.flow-timeline-description-list {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.5rem;
	align-items: baseline;
}

div.flow-timeline-description-list div[data-action="task-checkbox"] {
	margin: 0 -0.5rem;
	padding: 0.125rem 0.5rem;
}

div.flow-timeline-description-list div[data-action="task-checkbox"]:hover {
	cursor: pointer;
}

div.flow-timeline-description-list div[data-action="task-checkbox"] svg {
	font-size: 1.2rem;
}

div.flow-timeline-description-list div[data-action="task-checkbox"] svg.asset-icon-circle,
div.flow-timeline-description-list div[data-action="task-checkbox"]:hover svg.asset-icon-check-circle {
	color: var(--todo);
}

div.flow-timeline-description-list div[data-action="task-checkbox"]:hover svg.asset-icon-circle,
div.flow-timeline-description-list div[data-action="task-checkbox"] svg.asset-icon-check-circle {
	color: var(--done);
}

div.flow-timeline-description {
	font-size: 0.9rem;
	user-select: none;
}

@media (min-width: 576px) {

	div.task-item-header div.flow-timeline-description {
		font-size: 1.2rem;
	}

}

@media (max-width: 575px) {

	div.task-item-header div.flow-timeline-description {
		font-size: 1.1rem;
	}

}

div.flow-timeline-description:not(:first-child) {
	padding-top: 0.375rem;
}

div.flow-timeline-tools {
	padding-top: 0.375rem;
}

div.flow-timeline-comments {
	font-size: 0.9rem;
	line-height: 1.5;
}

div.flow-timeline-comments:not(:first-child) {
	margin-top: 0.375rem;
}

div.flow-timeline-comments:empty {
	display: none;
}

div.flow-timeline-frequency {
	color: var(--muted);
}

div.flow-timeline-lasting {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6px;
	min-width: 6px;
}

div.flow-timeline-lasting-start {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	margin-top: 0.5rem;
}

div.flow-timeline-lasting-stop {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	margin-bottom: 0.5rem;
}

div.flow-timeline-lasting-only {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6px;
	min-width: 6px;
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	border-radius: 3px;
}

div.flow-timeline-update {
	display: grid;
	justify-content: center;
	align-items: center;
	width: 2rem;
	align-self: stretch;
	background-color: rgba(0, 0, 0, 0.05);
}

div.flow-timeline-update > a {
	line-height: 1;
}

@media (max-width: 767px) {
	div.flow-timeline-update > a.flow-timeline-update-up,
	div.flow-timeline-update > a.flow-timeline-update-down {
		display: none;
	}
}

div.flow-timeline-task {
	width: 100%;
	display: grid;
	grid-template: "description done time" auto / 1fr auto auto;
	grid-column-gap: 1rem;
	grid-row-gap: 0.5rem;
	align-items: center;
	margin-left: 1rem;
	line-height: 1.2;
}

@media (max-width: 575px) {

	div.flow-timeline-task {
		grid-template:
			"description description" auto
			"time done" auto / auto 1fr;
	}

}

div.flow-timeline-task div.flow-timeline-label {
	grid-area: description;
}

div.flow-timeline-task div.flow-timeline-update {
	grid-area: update;
}

a.flow-timeline-element-action {
	color: inherit;
}

div.flow-timeline-done {
	border-radius: var(--radius);
	display: inline-block;
}

div.flow-timeline-task div.flow-timeline-done {
	grid-area: done;
}

div.flow-timeline-done-repeat {
	grid-area: number;
	font-size: 0.9rem;
	height: 100%;
	display: flex;
	align-items: center;
	border-radius: var(--radius);
}

@media (min-width: 576px) {

	div.flow-timeline-done-repeat {
		justify-content: flex-end;
	}

}

a.flow-timeline-status-todo {
	display: flex;
	width: 2rem;
	height: 2rem;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	border-radius: 50%;
	text-decoration: none;
	transition: all 0.5s;
	line-height: 1;
}

a.flow-timeline-status-todo.disabled {
	cursor: default;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

a.flow-timeline-status-todo {
	background-color: var(--todo);
	color: white;
}

a.flow-timeline-status-todo svg {
	font-size: 1.5rem;
}

a.flow-timeline-status-todo:hover {
	box-shadow: inset 0px 0px 0 100px rgba(0, 0, 0, .1);
}

div.flow-write-week {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-column-gap: 1rem;
}

label.flow-timeline-select {
	width: 2rem;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.flow-timeline-update label.flow-timeline-select {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

label.flow-timeline-select input {
	width: 1.1rem;
	height: 1.1rem;
}

div.flow-timeline .batch-one-wrapper {
	left: 2.25rem;
}

@media (max-width: 449px) {

	div.flow-timeline .batch-one-item span {
		font-size: 0.7rem;
	}

}

span.flow-method-name {
	display: inline-block;
	font-size: max(0.9rem, 80%);
	padding: 0.125rem 0.5rem;
	border: 2px solid var(--border);
	border-radius: var(--radius);
}

span.flow-tool-name {
	display: inline-block;
	font-size: max(0.9rem, 80%);
	color: var(--muted);
}
/* ===== production/sequence/static/css/sequence.css ===== */
div.sequence-header-description {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1rem;
	grid-auto-flow: column;
}

span.sequence-header-description-icon {
	font-size: 2rem;
	color: var(--primary);
	line-height: 1.2;
}

/* Items */
@media (min-width: 768px) {

	main table.sequence-item thead {
		position: sticky;
		top: calc(var(--mainSticky) - 1px);
		z-index: 1;
	}

}

td.sequence-item-vignette {
	width: 2rem;
}

td.sequence-item-vignette > * {
	margin-top: -0.25rem;
	margin-bottom: -0.25rem;
}

td.sequence-item-use {
	font-size: 0.9rem;
}

@media (max-width: 767px) {
	.sequence-item-use {
		display: none;
	}
}

div.sequence-item-crop {
	display: grid;
	grid-template-columns: 1fr 10rem 10rem 10rem;
}

@media (max-width: 1199px) {
	div.sequence-item-crop {
		grid-template-columns: 1fr 7.5rem 7.5rem 7.5rem;
	}
}

div.sequence-item-crop > *:not(:nth-child(1)) {
	text-align: right;
}

.sequence-item-period:not(:last-child) {
	margin-bottom: 0.25rem;
}

.sequence-item-season {
	font-weight: normal;
	line-height: 1.2;
}

/* Séries dans un itinéraires technique */
div.sequence-series-wrapper {
	overflow: auto;
	margin-bottom: 1.5rem;
}

div.sequence-series-wrapper.sequence-series-wrapper-1 {
	max-width: 600px;
}

div.sequence-series-wrapper.sequence-series-wrapper-2 {
	max-width: 800px;
}

div.sequence-series-body {
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

div.sequence-series-header {
	border: 1px solid transparent;
}

div.sequence-series-item {
	display: grid;
	grid-column-gap: 0.5rem;
	align-items: baseline;
	text-decoration: none;
	padding: 0.33rem 1rem;
}

div.sequence-series-item-season {
	font-weight: bold;
	font-size: 0.9rem;
}

div.sequence-series-item-crop:not(:last-child) {
	border-right: 1px solid var(--border);
	padding-right: 0.5rem;
}
.sequence-plan {
	--series-details: 17rem;
	--series-area: 5rem;
	--series-actions: 8.5rem;
}

.sequence-plan .series-item-planning {
	grid-template-columns:
		var(--series-details)
		var(--series-area)
		1fr
		var(--series-actions);
}

.sequence-plan .series-item-planning.series-item-title .series-item-title-plant {
	padding-left: 1rem;
}

.sequence-plan .series-item-planning-details {
	padding-left: 1rem;
}

.series-item-planning-wrapper.sequence-plan div.series-grid {
	left: calc(var(--series-details) + var(--series-area) + 2 * var(--series-gap) + var(--series-timeline-gap));
	right: calc(var(--series-actions) + var(--series-gap));
}

.sequence-plan-actions {
	display: flex;
	align-items: center;
	justify-content: end;
	align-self: center;
	padding-right: 0.5rem;
}

.sequence-plan-event-shifted {
	border-style: dashed;
}

/* Un ruban qu'on ne peut pas modifier reste inerte ; celui qui se saisit prend sa
   main dans series.css, avec le pointillé de survol. */
.sequence-plan .series-item-timeline-event-full {
	cursor: default;
}

@media (max-width: 1199px) {

	.sequence-plan {
		--series-details: 13rem;
	}

}

@media (max-width: 991px) {

	.sequence-plan {
		--series-details: 10rem;
		--series-area: 4rem;
	}

}

.sequence-plan-event-span {
	cursor: grab;
	touch-action: pan-y;
}

.sequence-plan-event-span:hover {
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
}

/* ===== production/plant/static/css/plant.css ===== */
div.plant-circle {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	margin-right: 0.5rem;
	vertical-align: middle;
}

/* Plant as items */
div.plant-item-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 0.75rem;
	grid-row-gap: 0.75rem;
	margin-bottom: 2rem;
}

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

	div.plant-item-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 575px) {

	div.plant-item-grid {
		grid-template-columns: 1fr;
	}

}

div.plant-item-grid > * {
}


a.plant-item {
	display: flex;
	color: inherit;
	align-items: center;
}

a.plant-item:hover {
	text-decoration: none;
}

div.plant-item-name {
	line-height: 1;
	margin-bottom: 0.25rem;
}

a.plant-item:hover div.plant-item-name {
	text-decoration: underline;
}

div.plant-item-image {
	width: 60px;
	min-width: 60px;
	height: 60px;
	margin-right: 0.75rem;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}

#plant-flow {
	grid-area: flow;
	padding: 1rem;
}

#plant-calendar {
	grid-area: calendar;
}

div.plant-section {
	margin-bottom: 2rem;
}

div.plant-block {
	position: relative;
}

div.plant-block:empty {
	display: none;
}

div.plant-block a.data-block-update {
	opacity: 0;
	position: absolute;
	right: 0rem;
	top: 0rem;
	border-radius: 50%;
	background-color: var(--secondary);
	margin: 1rem;
	padding: 0.75rem;
	color: white;
	transition: opacity 0.5s;
	line-height: 1;
	z-index: 1000;
}

div.plant-block:hover a {
	opacity: 1;
}

div.plant-block-submit {
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
}

#plant-manage .plant-manage-locked {
	font-size: 0.8rem;
	color: var(--muted);
}

.plant-vignette {
	display: inline-block;
	vertical-align: middle;
}

.plant-vignette img {
	width: 100%;
	height: 100%;
}


/* ===== production/plant/static/css/forecast.css ===== */
div.forecast-create-part {
	display: flex;
	gap: 0.5rem 1rem;
}

@media (max-width: 768px) {

	div.forecast-create-part {
		flex-wrap: wrap;
	}

}
/* ===== production/work/static/css/routine.css ===== */
div.routine-fertilizer-wrapper {
	display: grid;
	grid-template-columns: repeat(5, min-content);
	grid-column-gap: 1rem;
	align-items: center;
}

div.routine-fertilizer-element {
	text-align: center;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 0.5rem;
	border-radius: var(--radius);
	min-width: 3rem;
}

div.routine-fertilizer-element h5 {
	text-align: center;
	margin-bottom: 0.5rem;
}

div.routine-fertilizer-wrapper-field div.routine-fertilizer-element div.routine-fertilizer-value input {
	width: 5rem;
}

.routine-phyto-list {
	grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
}

div.input-group.routine-phyto-dose > select {
	flex: none;
	width: auto;
}

.routine-phyto-usages {
	grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) auto auto;
}

@media (max-width: 575px) {

	.routine-phyto-list {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	#panel-tool-display .util-vignette {
		grid-template-columns: 1fr;
	}

}

/* ===== production/map/static/css/plan.css ===== */
.plan-views {
	margin-bottom: 1rem;
}

.plan-column-title {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-light);
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.plan-item {
	display: block;
	text-align: left;
	line-height: inherit;
}

@media (hover: hover) {

	a.plan-item:hover {
		background-color: var(--background-light);
	}

}

.plan-item-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.plan-item-name {
	font-weight: bold;
}

.plan-item-value {
	margin-left: auto;
	color: var(--muted);
	white-space: nowrap;
}

.plan-tag {
	flex-shrink: 0;
	white-space: nowrap;
}

.plan-group-form {
	display: none;
}

.plan-schema {
	--plan-scale: 0.02rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-bottom: 5rem;
}

.plan-schema-zone {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.plan-schema-zone-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	background-color: var(--production);
	color: white;
}

.plan-schema-zone-name {
	font-size: 1.15rem;
	font-weight: bold;
}

.plan-schema-zone-summary {
	font-size: 0.9rem;
	opacity: 0.85;
}

.plan-schema-zone-actions {
	display: flex;
	gap: 0.375rem;
	margin-left: auto;
}

.plan-schema-plots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
}

.plan-schema-plot {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-width: 16rem;
	max-width: 100%;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
}

.plan-schema-plot.selected,
.plan-schema-plot.has-selection {
	border-color: var(--production);
}

.plan-schema-plot-header {
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	min-height: 2rem;
	margin-bottom: 0;
}

.plan-schema-plot-header .util-card-info,
.plan-schema-plot-header .badge {
	font-weight: normal;
}

.plan-schema-plot-menu {
	margin-left: auto;
}

.plan-schema-plot-handle {
	cursor: grab;
}

.plan-schema-plot-handle svg {
	color: var(--muted);
	font-size: 0.8rem;
}

.plan-schema-plot.is-dragging {
	opacity: 0.4;
}

.plan-schema-plot-body {
	display: flex;
	align-items: stretch;
	gap: 0.375rem;
	min-width: 0;
}

.plan-schema-count {
	flex-shrink: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-align: center;
	font-size: 0.75rem;
	color: var(--muted);
	white-space: nowrap;
}

.plan-schema-beds {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 0.5rem 2px;
	min-height: 7rem;
	padding: 0.5rem;
	border-radius: var(--radius);
	background-color: #f3f5f2;
}

.plan-schema-plot-greenhouse .plan-schema-beds {
	background-color: #fbf4e6;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.plan-schema-beds-empty {
	align-items: center;
	align-content: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #e6efe9 0 6px, var(--background-even) 6px 12px);
	color: var(--muted);
	font-size: 0.8rem;
}

.plan-schema-plot-greenhouse .plan-schema-beds-empty {
	background: repeating-linear-gradient(135deg, #f7ead3 0 6px, var(--background-even) 6px 12px);
}

.plan-schema-bed {
	flex-shrink: 0;
	max-width: 7rem;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3px;
	border-radius: 2px;
	overflow: hidden;
	writing-mode: vertical-rl;
	font-size: 0.8rem;
	color: var(--open-field);
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 0.15s;
}

/* La planche fictive qui ouvre la saisie : même gabarit qu'une planche, en
   pointillé, pour qu'on voie où les nouvelles vont se poser. Sans aucune
   planche, elle devient un bouton posé au milieu du jardin. */
.plan-schema-bed-add {
	width: 2.25rem;
	max-width: none;
	border: 1px dashed var(--production);
	border-radius: 2px;
	color: var(--production);
	background-color: #ffffffcc;
	text-decoration: none;
	gap: 0.35rem;
	font-size: 0.75rem;
	letter-spacing: 0.3px;
}

.plan-schema-bed-add svg {
	width: 0.85rem;
	height: 0.85rem;
	flex: 0 0 auto;
}

/* Le libellé est écrit à l'horizontale puis tourné d'un quart de tour : l'icône
   et le texte restent sur une même ligne, et se lisent de bas en haut comme les
   noms de planche. Posé en absolu, il reste centré quelle que soit la largeur. */
.plan-schema-bed-add {
	position: relative;
	overflow: visible;
}

.plan-schema-bed-add > span {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	writing-mode: horizontal-tb;
	white-space: nowrap;
	width: max-content;
	line-height: 1;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.plan-schema-bed-add svg {
	display: block;
}

.plan-schema-bed-add:hover,
.plan-schema-bed-add.is-open {
	background-color: var(--production);
	color: white;
	border-style: solid;
}

/* Sans aucune planche, ce n'est plus une planche : un bouton horizontal, au
   milieu du jardin — donc ni texte tourné, ni icône retournée. */
.plan-schema-beds-empty .plan-schema-bed-add > span {
	position: static;
	gap: 0.5rem;
	transform: none;
}

.plan-schema-beds-empty .plan-schema-bed-add {
	width: auto;
	height: auto;
	min-width: 0;
	writing-mode: horizontal-tb;
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius);
	background-color: white;
	font-size: 0.85rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Le survol du bouton du jardin vide : sans ça, sa règle de fond blanc, plus
   bas dans la feuille, l'emportait et le texte passait blanc sur blanc. */
.plan-schema-beds-empty .plan-schema-bed-add:hover,
.plan-schema-beds-empty .plan-schema-bed-add.is-open {
	background-color: var(--production);
	color: white;
}

.plan-schema-plot-greenhouse .plan-schema-bed-add {
	border-color: var(--greenhouse);
	color: var(--greenhouse);
}

.plan-schema-plot-greenhouse .plan-schema-bed-add:hover,
.plan-schema-plot-greenhouse .plan-schema-bed-add.is-open,
.plan-schema-plot-greenhouse .plan-schema-beds-empty .plan-schema-bed-add:hover {
	background-color: var(--greenhouse);
	color: white;
}

/* Les noms de planche se lisent de bas en haut (pas la planche fictive, dont le
   libellé est traité plus bas). */
.plan-schema-bed:not(.plan-schema-bed-add) > span {
	transform: rotate(180deg);
}

.plan-schema-bed[onclick] {
	cursor: pointer;
	user-select: none;
	-webkit-touch-callout: none;
}

.plan-schema-bed.selected {
	box-shadow: 0 0 0 2px var(--production), inset 0 0 0 100px #095a4133;
}

@media (hover: hover) {

	.plan-schema-bed[onclick]:hover {
		box-shadow: 0 0 0 2px var(--production);
	}

	.plan-schema-bed[onclick].selected:hover {
		box-shadow: 0 0 0 2px var(--production), inset 0 0 0 100px #095a4159;
	}

}

.plan-schema-plot-greenhouse .plan-schema-bed {
	color: var(--greenhouse);
}

.plan-schema-bed:not(.plan-schema-bed-add) span {
	display: block;
	max-height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
	padding: 0.25rem 0;
}

.plan-schema-bed-add > span {
	max-height: 100%;
	overflow: hidden;
	white-space: nowrap;
	padding: 0.25rem 0;
}

.plan-schema-bed small {
	display: block;
	opacity: 0.75;
	font-size: 0.6rem;
	margin-left: 0.125rem;
}

.plan-schema-plot-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
	padding-top: 0.375rem;
	font-size: 0.8rem;
}

.plan-schema-formats {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	gap: 0.125rem 0.875rem;
	margin-left: auto;

	@media (max-width: 575px) {
		grid-auto-flow: row;
		grid-template-rows: none;
	}

}

.plan-schema-format {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}

.plan-schema-format i {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 2px;
}

.plan-schema-format .util-counter {
	font-size: 0.7rem;
	padding: 0.1rem 0.3rem;
}

.plan-schema-plot-buttons {
	gap: 0.375rem;
	order: -1;
}

.plan-schema-print {
	padding-bottom: 0;
	gap: 1.25rem;
}

.plan-schema-print .plan-schema-zone {
	gap: 0.5rem;
}

.plan-schema-print .plan-schema-zone-header {
	break-after: avoid;
}

.plan-schema-print .plan-schema-zone-header {
	padding: 0.375rem 0.75rem;
}

.plan-schema-print .plan-schema-plots {
	gap: 0.5rem;
}

.plan-schema-print .plan-schema-plot {
	gap: 0.375rem;
	padding: 0.5rem 0.625rem;
	box-shadow: none;
	break-inside: avoid;
}

.plan-schema-print .plan-schema-plot-header {
	min-height: 0;
}

.plan-schema-print .plan-schema-beds {
	min-height: 5rem;
	padding: 0.375rem;
}

.plan-schema-print .plan-schema-bed {
	height: 4.5rem;
}

.plan-schema-print .plan-schema-plot-footer {
	padding-top: 0.25rem;
}

.plan-print-map-page {
	break-before: page;
}

.plan-print-map-page h2 {
	margin-bottom: 0.75rem;
}

.plan-print-map {
	width: 19cm;
	height: 19cm;
	border-radius: var(--radius);
	overflow: hidden;
}

/* Le formulaire d'ajout prend la place disponible, sans dépasser 50 rem : au-delà
   la parcelle occuperait toute la largeur du plan et ses voisines passeraient à
   la ligne. */
.plan-schema-plot-sheet {
	border-top: 1px solid var(--border-light);
	padding-top: 1rem;
	width: 50rem;
	max-width: 100%;
}

.plan-schema-plot-sheet h4 {
	margin-bottom: 1rem;
}

.plan-schema-plot-sheet .form-group:last-child {
	margin-bottom: 0.25rem;
}

.plan-schema-plot.plan-schema-plot-table {
	flex-basis: 100%;
}

table.plan-table {
	width: 100%;
	margin: 0;
}

table.plan-table td.plan-table-select,
table.plan-table th.plan-table-select {
	width: 2rem;
	text-align: center;
}

.plan-table-name {
	font-weight: bold;
}

.plan-table-actions {
	white-space: nowrap;
}

.plan-table-selection {
	padding: 0.75rem 0;
}

.plan-mapview {
	position: relative;
	height: calc(100vh - 16rem);
	min-height: 28rem;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 3px #0000001f;
}

#plan-mapview-map {
	width: 100%;
	height: 100%;
}

a.plan-mapview-all {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	cursor: pointer;
}

a.plan-mapview-all small {
	font-weight: normal;
	text-transform: none;
	letter-spacing: 0;
}

.plan-mapview-zones {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 15rem;
	max-height: calc(100% - 6rem);
	overflow: auto;
	padding: 0;
	z-index: 1;
}

.plan-mapview-zones a.plan-item {
	cursor: pointer;
}

@media (min-width: 768px) {

	.plan-mapview-zones a.plan-item {
		border-width: 0;
		border-radius: 0;
	}

	.plan-mapview-zones a.plan-item.selected {
		box-shadow: inset 3px 0 0 var(--secondary);
	}

}

.plan-mapview-zones .plan-item-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plan-mapview-zones .plan-item-value {
	flex-shrink: 0;
}

.plan-mapview-plots {
	background-color: var(--background-light);

	@media (max-width: 767px) {
		padding: 0.5rem;
		border-radius: var(--radius);
	}

}

.plan-mapview-zones a.plan-mapview-plot {
	padding-left: 1.25rem;
}

.plan-mapview-zones a.plan-mapview-plot .plan-item-name {
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plan-mapview-card {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	max-width: calc(100% - 2rem);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.75rem 1rem;
	z-index: 1;
}

.plan-mapview-card-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

@media (max-width: 767px) {

	.plan-schema {
		padding-bottom: 7rem;
	}

	.plan-schema-bed[onclick] {
		min-width: 2.75rem;
	}

	.plan-mapview-zones {
		flex-wrap: wrap;
	}

	.plan-mapview-plots {
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.plan-mapview {
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	#plan-mapview-map {
		height: 50vh;
	}

	.plan-mapview-zones {
		position: static;
		width: auto;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
		display: flex;
		gap: 0.375rem;
		padding: 0.5rem 0.75rem;
		overflow-x: auto;
	}

	.plan-mapview-zones .plan-column-title {
		display: none;
	}

	.plan-mapview-zones a.plan-item {
		flex-shrink: 0;
	}

	.plan-mapview-card {
		position: static;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
		border-top: 1px solid var(--border-light);
	}

}

/* Les dimensions d'un abri, en sous-titre de son menu. */
.plan-plot-dimensions {
	display: block;
	margin-top: 0.15rem;
	font-family: "Open Sans", sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	opacity: 0.75;
}

/* ===== ouvretaferme/analyze/static/css/chart.css ===== */
div.analyze-chart-table {
	display: grid;
	grid-template:
		"values" auto
		"pie" auto / minmax(0, 1fr);
	grid-row-gap: 1rem;
	margin-bottom: 1rem;
}

div.analyze-chart-table .analyze-values {
	grid-area: values;
}

.analyze-values-balance {
	display: flex;
}

.analyze-values-private,
.analyze-values-pro {
	font-size: 0.8rem;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	letter-spacing: -0.5px;
}

div.analyze-chart-table .analyze-values-pro {
	color: var(--pro);
	text-align: right;
	padding-right: 0.25rem;
	background-color: #00887420;
}

div.analyze-chart-table .analyze-values-private {
	color: var(--private);
	text-align: left;
	padding-left: 0.25rem;
	background-color: #527a0020;
}

div.analyze-chart-table .analyze-values-private + .analyze-values-pro {
	border-left: 1px solid var(--muted);
}

div.analyze-chart-table .analyze-pie {
	grid-area: pie;
}

div.analyze-chart-table .analyze-bar {
	grid-area: pie;
}

.analyze-bar {
	height: 300px;
}

@media (min-width: 768px) {

	div.analyze-chart-table {
		grid-column-gap: 2rem;
		align-items: start;
		grid-template: "values pie" auto / 3fr 2fr;
	}

}

div.analyze-charts {
	display: grid;
}

@media (max-width: 767px) {

	div.analyze-charts {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media (min-width: 768px) {

	div.analyze-charts {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 2rem;
	}

}

.analyze-pie {
	overflow-y: auto;
}

.analyze-pie > h5 {
	text-align: center;
}

/*
 * Une hauteur de départ carrée plutôt qu'un nombre de pixels : le script l'ajuste
 * ensuite au contenu réellement dessiné, et partir d'un disque plein évite que
 * l'ajustement se voie. Sans script, elle reste une valeur correcte à toute largeur.
 */
.analyze-pie > .analyze-pie-canvas {
	aspect-ratio: 1 / 1;
	min-height: 220px;
	max-height: 480px;
}

.analyze-total {
	font-weight: bold;
}

.analyze-lost {
	opacity: 0.33;
}

.analyze-empty {
	background: repeating-linear-gradient(135deg, var(--border) 0, var(--border) 2px, #fff8 2px, #fff8 8px)
}

.analyze-month-th {
	display: inline-grid;
	align-items: end;
	grid-template-columns: auto auto;
	grid-column-gap: 0.5rem;
}

table.analyze-month-table-3 td:nth-child(2n + 3),
table.analyze-month-table-4 td:nth-child(2n + 4),
table.analyze-month-table-5 td:nth-child(2n + 5),
table.analyze-month-table-6 td:nth-child(2n + 6) {
	background-color: rgba(0, 0, 0, 0.05);
}

td.analyze-month-value {
	min-width: 3.5rem;
	width: 1%;
	white-space: nowrap;
}

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

	td.analyze-month-value {
		min-width: 4rem;
	}

}

@media (min-width: 1200px) {

	td.analyze-month-value {
		min-width: 4.5rem;
	}

}