:root {
	--z-label: 1;
	--z-panel: 2;
	--z-hover: 3;
	--z-header: 4;
	--z-menu: 5;
	--large: 80em;
	--xlarge: 100em;
	--radius: 6px;
	--trigger: 20px;
	--lightc: #222;
	--lightb: #f0f0f0;
	--lightb: #ececec;
	--darkc: #eee;
	--darkb: #282727;
	--darkb: #2c2c2b;
	--shadow: #444;
	--color: var(--lightc);
	--back: var(--lightb);
	--inkb: white;
	--inkc: black;
	--inkd: #555;
	--header: #f6f7f9;
	--border: #999;
	--legendb: #cdc;
	--legendc: #444;
	--panelb: #ddd;	/* #e9e7e7 */
	--panelc: var(--color);
	--menub: #e9eaedf8;
	--menuc: var(--color);
	--menus: #8888;
	--group: #a90;
	--titleb: #dddde2;
	--titlec: var(--color);
	--buttonb: silver;
	--buttonc: #000;
	--selectb: #4169e1;
	--selectc: white;
	--evenb: #eef0ee;
	--evenc: var(--color);
	--hoverb: #90c0ff;
	--hoverc: var(--color);
}
a:any-link {
	color: darkblue;
}
@media screen and (prefers-color-scheme: dark) {
	:root {
		--shadow: black;
		--color: var(--darkc);
		--back: var(--darkb);
		--inkb: #1a1a1a;
		--inkc: white;
		--inkd: #bbb;
		--header: #393a3d;
		--border: #888;
		--legendb: #888;
		--legendc: #111;
		--panelb: #444;	/* hsl(62deg 10% 15%) */
		--panelc: var(--color);
		--menub: #345e;
		--menuc: var(--color);
		--menus: #2228;
		--group: #8f0;
		--titleb: #ccc;
		--titlec: #2d2f2f;
		--buttonb: #e8e8e8;
		--selectb: #0160d0;
		--selectc: var(--color);
		--evenb: #444;
		--evenc: var(--color);
		--hoverb: #3492fe;
		--hoverc: var(--color);
	}
	a:any-link {
		color: skyblue;
	}
}

/* -------------------------- html -------------------------- */

@media print {
	.noprint {
		display: none ! important;
	}
	html,
	ul,
	ol,
	dl {
		scrollbar-width: none;
	}
	input::-webkit-inner-spin-button,
	html::-webkit-scrollbar,
	ul::-webkit-scrollbar,
	ol::-webkit-scrollbar,
	dl::-webkit-scrollbar {
		display: none;
	}
}

body {
	margin: 0;
	background: var(--back);
	margin: 0;
	color: var(--color);
	animation: roundness .25s ease-in none;
	user-select: none;
}

@keyframes roundness {
	from { opacity: 0; }
	to { opacity: 1; }
}

ul, ol {
	padding: 0;
	margin: 0;
}

li {
	list-style-type: none;
}

/* 
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=euro],
 */
input:not([type=button]),
select,
textarea {
	border: none;
	border-bottom: 1px dotted var(--border);
	background: var(--inkb);
	color: var(--inkc);
}

input[type=number],
input[type=int] {
	text-align: right;
}

select[size] {
	border: 1px solid var(--border);
}

button:enabled {
	cursor: pointer;
}
button:disabled {
	cursor: not-allowed;
}

/* -------------------------- site -------------------------- */

body, input, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	box-sizing: border-box;
}

li > input,
li > select {
	width: 100%;
}

[euro] {
	position: relative;
	padding-right: 6px;
}
[euro] input {
	padding-right: 1em;
	text-align: right;
}
[euro]:after {
	content: '€';
	position: absolute;
	right: 8px;
	bottom: 4px;
	font-style: normal;
}

li:has(> input[type=euro]),
label:has(input[type=euro]) {
	position: relative;
}
input[type=euro] {
	text-align: right;
	padding-right: 1em;
}
li:has(> input[type=euro]):after {
	content: '€';
	position: absolute;
	padding-top: 1px;
	font-style: normal;
	right: 8px;
}
label:has(> input[type=euro]):after {
	content: '€';
	position: absolute;
	padding-top: 1px;
	font-style: normal;
	right: 0;
}

body > header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--header);
	z-index: var(--z-header);
	box-shadow: 0 10px 20px var(--back)
}

body > header > picture img {
	position: fixed;
	top: 0;
	left: 4px;
	height: 2.8em;
	height: 2.4lh;
}

body > header nav,
body.generic main details > nav {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid var(--border);
	margin: 8px 0 0 0;
}

body > header nav li,
body.generic main details > nav li {
	position: relative;
	bottom: -1px;
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 4px 8px;
	background: var(--panelb);
	color: var(--panelc);
	overflow-x: hidden;
	overflow-y: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body > header nav li:has(img),
body.generic main details > nav li:has(img) {
	padding-left: 2em;
}

body > header nav li:hover,
body.generic main details > nav li:hover {
	background: var(--hoverb);
	color: var(--hoverc);
	cursor: pointer;
}

body > header nav li.selected,
body.generic main details > nav li.selected {
	background: var(--back);
	color: var(--color);
	border-bottom-color: var(--back);
}

body > header nav li.selected a:any-link,
body.generic main details > nav li.selected a:any-link {
	cursor: default;
}

body > header nav a:any-link {
	color: var(--color);
	text-decoration: none;
}

body > header nav img {
	position: absolute;
	bottom: 2px;
	left: 4px;
	width: 23px;
}

body > footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 2px 0;
	background: var(--header);
	font-size: 10px;
	z-index: var(--z-header);
}

body > footer span {
	float: right;
	padding: 0 .5em;
}

body > main {
	position: relative;
/* 	padding: 4.2ex 2em 0; */	/*enzo*/
	padding: 36px 2em 0;	/*enzo*/
	padding: 2lh 2em 0;
}


/* -------------------------- generics -------------------------- */

@media screen and (prefers-color-scheme: dark) {
	body.generic,
	body.generic main details.list section {
		scrollbar-color: #ddd #222;
	}
}

body.generic {
	--label: 7em;
	--image: 50px;
	--gap-pad: 1.5em;
	--gap-hor: 4px;
	--gap-int: var(--gap-hor);
	--gap-end: calc(var(--gap-hor) + var(--gap-int));
	--gap-ver: 6px;
}

body.generic main details {
	position: relative;
	margin: 60px 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

body.generic main details[open] {
	padding: var(--gap-pad);
}

body.generic main details > summary {
	position: absolute;
	top: calc(-1lh - 3px);
	left: var(--gap-pad);
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 0 4px;
	color: var(--legendc);
	background: var(--legendb);
	cursor: pointer;
}

body.generic main details > summary:hover {
	transform: translate(0, -3px) scaleY(1.3);
}

body.generic main details > summary menu {
	display: inline;
	margin: 0 .5em;
	padding: 0;
}

body.generic main details > summary menu::after {
	content: '⌵';
	position: relative;
	top: -0.15lh;
	left: .5em;
}

/* 
body.generic main details > summary sup {
	position: relative;
	top: -0.4em;
	top: -0.3lh;
	vertical-align: baseline;
	margin-right: .5em;
}
 */
sup {
	position: relative;
	top: -0.4em;
	top: -0.3lh;
	vertical-align: baseline;
	margin-right: .5em;
}

body output:has(output) {
	position: absolute;
	top: -0.7em;
	right: 1em;
}
body header output:has(output) {
	top: 1.6em;
}
body output output {
	border: 1px solid var(--border);
	border-radius: 1em;
	margin-left: 4px;
	padding: 2px 3px 2px 0;
	background: var(--back);
}
body output output blockquote {
	display: inline;
	margin: 0 0 0 6px;
}
body output output button {
	position: relative;
	top: -1px;
	margin-left: 4px;
	border-radius: calc(var(--radius) * 2);
	background: var(--buttonb);
	font-size: small;
}


body.generic main details output:has(img),
body.bord main fieldset output:has(img) {
	position: absolute;
	right: calc(var(--trigger) / -2 - 4px);
	display: flex;
	flex-direction: column;
	row-gap: 4px;
}

/* body.generic main details output:nth-of-type(2n) button, */
body.generic main details output:has(img) button,
body.bord main fieldset output:has(img) button {
	box-sizing: content-box;
	border-radius: 50%;
	padding: 2px;
	background: var(--buttonb);
	height: var(--trigger);
	width: var(--trigger);
	font-size: 1.5rem;
	line-height: 1px;
}

body.generic main details output button img,
body.bord main fieldset output button img {
	position: relative;
	top: 1px;
/* 	width: 24px; */
	width: calc(var(--trigger) - 2px);
}

body.generic main details :where(section, form) > output:last-child {
	position: absolute;
	bottom: -0.7em;
	right: 1em;
}

body.generic main details :where(section, form) > output:last-child input[type=submit] {
	margin-left: 4px;
	border-radius: calc(var(--radius) * 2);
	background: var(--buttonb);
	color: var(--buttonc);
	font-size: small;
}


body.generic main details.search section {
/* 	padding-left: var(--gap-marge); */
/* 	padding-right: var(--gap-marge); */
	min-width: 40em;
	max-width: var(--large);
	margin: 0 auto;
}

body.generic main details.search section fieldset {
	border: none;
	margin: 0 2em;
	padding: var(--gap-ver) 0;
}

body.generic main details.search section fieldset legend {
	position: relative;
	left: -2em;
/* 	text-decoration: underline; */
/* 	text-decoration-color: var(--border); */
/* 	text-underline-position: under; */
}

body.generic main details.search section fieldset label {
	display: flex;
}

body.generic main details.search section fieldset label input[type=checkbox] {
	margin-right: .5em;
}

body.generic main details label.find {
	position: relative;
}

body.generic main details label.find:before {
	content: '🔍';
	position: absolute;
	left: .5em;
}

body.generic main details label.find input {
	padding: 4px 4px 4px 2em;
	border-radius: 1em;
	width: 100%;
}

body.generic main details.map > div {
	height: 100%;
	overflow-x: scroll;
	overflow-y: scroll;
}

body.generic main details.list header {
	font-weight: bold;
	text-align: center;
	max-width: var(--large);
	margin: 0 auto;
}

body.generic main details.list section {
/* 	border-bottom: 1px solid var(--border); */
	height: calc(100% - 1lh - 20px);
/* 	height: calc(100vh + 150px); */
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	max-width: var(--large);
	margin: 0 auto;
}


body.generic main details.list header ol li {
	background: var(--titleb);
	color: var(--titlec);
}

body.generic main details.list ol li {
	padding: 2px 6px;
	border: 1px solid var(--border);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: hidden;
}

body.generic main details.list header > ol li:first-child {
/* body.generic details.list header ul > li:first-child li:first-child { */
	border-radius: var(--radius) 0 0 0;
}

body.generic main details.list header > ol li:last-child {
/* body.generic details.list header ul > li:first-child li:last-child { */
	border-radius: 0 var(--radius) 0 0;
}

body.generic main details.list section ul > li:nth-child(even) ol {
	background: var(--evenb);
	color: var(--evenc);
}

body.generic main details.list section ins {
	float: right;
	text-decoration: none;
	color: var(--inkd);
	font-size: small;
}

body.generic main details.society ul > li.selected ol li {
	background: var(--selectb) ! important;
	color: var(--selectc) ! important;
}

body.generic main details.society section ul > li ol:hover {
	background: var(--hoverb) ! important;
	color: var(--hoverc) ! important;
	cursor: pointer;
}

body.generic main details.info[open] {
	height: auto;
}

body.generic main details.info section {
	min-width: 40em;
	max-width: var(--xlarge);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: var(--gap-ver);
}

body.provider main details.info section b.mercurial,
body.generic main details section div b {
	font-weight: normal;
	text-align: right;
}

body.generic main details section div b:nth-of-type(even) {
	margin-left: var(--gap-int);
/* 	width: auto; */
}

body.generic main details section div b:after {
/* 	content: ':'; */
}

body.generic main details.info section article {
	grid-column: 1/3;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	margin: 0;
	border: none;
}

body.generic main details.info section article.photo label figure {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 4px;
}

body.generic main details.info section article.photo label figure {
	cursor: pointer;
}

body.generic main details.info section article.photo label:nth-child(4n+3) figure {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--lightb);
	color: var(--lightc);
}

body.generic main details.info section article.photo label:nth-child(4n+0) {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--darkb);
	color: var(--darkc);
}

body.generic main details.info section article.photo figure figcaption {
/* 	width: auto; */
	margin-right: var(--gap-hor);
}

body.generic main details.info section article.photo figure input {
	display: none;
}

body.generic main details.info img {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2px;
	height: var(--image);
}

body.generic main details.info input[readonly] {
/* 	background: transparent; */
}
body.generic input::-webkit-inner-spin-button {
/* 	opacity: 0; */
/* 	display: none; */
/* 	-webkit-appearance: none; */
}

body.generic main details.info div.password {
	display: block;
	text-align: right;
	padding-right: var(--gap-pad);
}

body.generic main details.info div.password a:any-link {
	text-decoration: none;
}

body.generic main details.info div.phone {
	display: grid;
	align-items: baseline;
	align-items: self-start;
	column-gap: var(--gap-hor);
	grid-template-columns: var(--label) 12em auto;
}

body.generic main details.info div.phone a {
	text-decoration: none;
	margin-left: var(--gap-int);
}

body.generic main details.info div.large {
	display: grid;
	align-items: self-start;
	column-gap: var(--gap-hor);
	grid-template-columns: var(--label) 1fr auto;
}


body.generic main details.info div.large input,
body.generic main details.info div.large select {
	width: 100%;
}

body.generic main details.info div.large a {
	text-decoration: none;
	margin-left: var(--gap-end);
}

body.generic main details.info div.city {
	grid-template-columns: var(--label) 4em auto 1fr;
}

body.generic main details.info div.double {
	grid-template-columns: repeat(2, var(--label) 1fr);
}

body.generic main details > nav {
	position: absolute;
	top: -25px;
	right: 10px;
	margin: 0;
	border: none;
	max-width: calc(100% - 7em - 20px);
	font-size: 0.8em;
}

body.generic main details.info section div {
	display: grid;
	grid-template-columns: var(--label) 1fr;
	align-items: self-start;
/* 	align-items: baseline; */
	column-gap: var(--gap-hor);
}

body.generic main details.info input[name=phone],
body.generic main details.info input[name=fax],
body.generic main details.info input[name=cp] {
	padding-right: 8px;
	text-align: right;
}

body.generic main details.bill ol {
	display: grid;
	grid-template-columns: 1fr 3em 6em 7em;
/* 	max-width: var(--large); */
/* 	margin: 0 auto; */
}

body.generic main details.bill section ol li:last-child {
	text-align: right;
	
}

body.generic main details.bill dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 9em 7em;
	max-width: var(--large);
	margin: 0 auto;
}

body.generic main details.bill dl dt {
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	row-gap: 4px;
	padding: 2px 6px;
}

body.generic main details.bill dl dt:nth-child(even) {
	text-align: center;
}

body.generic main details.bill dl dt:last-child {
	text-align: right;
}



header ol li[dn-sieve] {
	position: relative;
	padding-left: 1em;
}

header ol:hover li[dn-sieve]::before {
	position: absolute;
	left: 2px;
	content: '🔍';
	cursor: pointer;
}

header ol li[dn-sieve] input {
	position: absolute;
	left: 1.5em;
	border-radius: 1ex;
	width: calc(100% - 2.8em);
	top: 1px;
}

header ol li[dn-sieve]::after {
	position: absolute;
	right: 2px;
	cursor: pointer;
}
header ol:hover li[dn-sieve]::after {
	content: '□';
}
header ol li[dn-sieve].up1::after {
	content: '▲';
}
header ol li[dn-sieve].up2::after {
	content: '△²';
}
header ol li[dn-sieve].up3::after {
	content: '△³';
}
header ol li[dn-sieve].up4::after {
	content: '△⁴';
}
header ol li[dn-sieve].up5::after {
	content: '△⁵';
}
header ol li[dn-sieve].up6::after {
	content: '△⁶';
}
header ol li[dn-sieve].up7::after {
	content: '△⁷';
}
header ol li[dn-sieve].up8::after {
	content: '△⁸';
}
header ol li[dn-sieve].up9::after {
	content: '△⁹';
}
header ol li[dn-sieve].down1::after {
	content: '▼';
}
header ol li[dn-sieve].down2::after {
	content: '▽²';
}
header ol li[dn-sieve].down3::after {
	content: '▽³';
}
header ol li[dn-sieve].down4::after {
	content: '▽⁴';
}
header ol li[dn-sieve].down5::after {
	content: '▽⁵';
}
header ol li[dn-sieve].down6::after {
	content: '▽⁶';
}
header ol li[dn-sieve].down7::after {
	content: '▽⁷';
}
header ol li[dn-sieve].down8::after {
	content: '▽⁸';
}
header ol li[dn-sieve].down9::after {
	content: '▽⁹';
}


/* -------------------------- members -------------------------- */

body.member details.search section fieldset {
	display: grid;
	grid-template-columns: repeat(3, 12em);
}

body.member details.search section fieldset:first-child {
	display: block;
}

body.member details.search section fieldset:last-child {
/* 	border-left: 1px solid var(--border); */
}

body.member main details.map[open] {
	height: 300px;
}

body.member details.society.list > div,	/* bug chrome 131 */
body.member details.society[open] {
	height: 300px;
}

body.member details.society ol {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
}

body.generic.extend details.society header,
body.generic.extend details.society section {
	max-width: var(--xlarge);
}

body.member.extend details.society ol {
	grid-template-columns: 2fr 1fr 1fr 7em 5em 8em 7em 7em 7em 7em;
}

body.member details.info section {
	grid-template-rows: 74px repeat(6, 3ex);
}


body.member details.info input[name=entry] {
	width: 4em;
	text-align: center;
}

body.member details.info section label div.year {
	grid-template-columns: var(--label) 1fr var(--label) 4em;
}

body.generic main details.report section {
	position: relative;
	width: 100%;
}

body.member details.report.list > div,	/* bug chrome 131 */
body.member details.report[open] {
	height: 240px;
}

body.member details.report ol {
	display: grid;
	grid-template-columns: 1fr 7em 1fr 7em 1fr 7em;
/* 	max-width: var(--large); */
/* 	margin: 0 auto; */
}

body.member details.report header li:nth-child(odd) {
	border-radius: var(--radius) 0 0 0;
}

body.member details.report header li:nth-child(even) {
	border-radius: 0 var(--radius) 0 0;
}


body.member details label.eda {
	display: block;
	margin-top: 25px;
	text-align: center;
}
body.member details section.indicator {
	text-align: center;
}
body.member details section.indicator label b {
	margin-right: var(--gap-hor);
}



/* -------------------------- providers -------------------------- */

body.generic main details.warning ul {
	max-width: var(--large);
	margin: 0 auto;
}

body.generic main details.warning ul li {
	margin: 0;
	padding: 3px 0 3px 14px;
	background: var(--back);
	color: var(--inkd);
}

body.generic main details.warning ul li::before {
	content: '⚠️';
	margin-right: .5em;
}

body.generic main details.warning ul li:not(.new)::before {
	filter: grayscale(1);
}

body.generic main details.warning ul li.new {
	color: var(--inkc);
	cursor: pointer;
}

body.generic main details.warning ul li.new:hover {
	background: var(--hoverb);
	color: var(--hoverc);
}

body.generic main details.warning ul time {
	margin-right: 8px;
	padding: 2px 6px;
	border-radius: 16px;
	background-color: var(--inkd);
	color: var(--back);
}

body.provider details.search section fieldset:nth-child(even) {
	display: flex;
	column-gap: 2em;
}


details[open]::details-content { display: contents }

body.provider main details.map[open] {
	height: 300px;
}

body.provider details.society.list > div,	/* bug chrome 131 */
body.provider details.society[open] {
	height: 300px;
}

body.provider details.society ol {
	display: grid;
	grid-template-columns: 1fr 1fr;
/* 	max-width: var(--large); */
/* 	margin: 0 auto; */
}

body.provider.extend details.society ol {
	grid-template-columns: 2fr 1fr 7em 5em 8em 7em 7em 7em 7em;
/* 	max-width: var(--xlarge); */
}

li.center {
	text-align: center;
}

li.right {
	text-align: right;
}

body.provider details.info section {
	grid-template-rows: 74px repeat(5, 3ex) auto;
}

body.provider details.info div.category {
	grid-template-columns: var(--label) 10em 1fr;
}

body.provider main details.info section label.mercurial {
	grid-column: 1 / 3;
	display: flex;
	text-align: center;
}

body.provider main details.info section label.mercurial div {
}

body.provider main details.info section label.mercurial figure {
	max-width: 200px;
	margin: 0 10px;
}

body.provider main details.info section label.mercurial figure h1,
body.provider main details.info section label.mercurial figure h2,
body.provider main details.info section label.mercurial figure h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: normal;
}

body.provider main details.info section label.mercurial figure button {
	position: relative;
	margin: 4px;
}

body.provider main details.info section label.mercurial figure button img {
}

body.provider main details.info section label.mercurial figure button input {
	position: absolute;
	top: -9px;
	box-sizing: content-box;
	border: none;
	border-radius: 50%;
	padding: 2px;
	width: 12px;
	height: 12px;
	color: black;
	filter: opacity(0.5);
}

body.provider main details.info section label.mercurial figure button input:first-of-type {
	left: -10px;
	font-size: 12px;
	background: #ff5f57;
}

body.provider main details.info section label.mercurial figure button input:last-of-type {
	right: -10px;
	font-size: 18px;
	line-height: 12px;
	background: #29c840;
}

li button:hover,
output button:enabled:hover {
	filter: drop-shadow(2px 4px 6px black);
	transform: translate(1px, -1px);
}

body.provider main details.info section label.mercurial figure button input:hover {
	filter: drop-shadow(2px 4px 6px black);
}

body.provider details.report > div,	/* bug chrome 131 */
body.provider details.report[open] {
	height: 200px;
}

body.provider details.report ol {
	display: grid;
	grid-template-columns: 1fr 6em 1fr 6em 1fr 6em;
}

body.provider details.statement > div,	/* bug chrome 131 */
body.provider details.statement[open] {
	height: 200px;
}

body.provider details.statement ol {
	display: grid;
	grid-template-columns: minmax(4em, 2fr) minmax(6em, 15em) minmax(4em, 9em) minmax(6em, 1fr) minmax(5ch, 11ch) minmax(4em, 1fr) minmax(9ch, 12ch);
/* 	max-width: var(--large); */
/* 	margin: 0 auto; */
}


body.provider details.statement ol li:last-child {
	text-align: right;
	direction: rtl;
	text-overflow: clip;
}

body.provider details.statement ol li:nth-child(7n+5) {
	text-align: center;
	direction: rtl;
	text-overflow: clip;
}

body.provider details.statement section {
	height: calc(100% - var(--gap-pad) * 1 + 16px);
}


body.provider details.trade > div,	/* bug chrome 131 */
body.provider details.trade[open] {
	height: 200px;
}

body.provider details.trade ol {
	display: grid;
	grid-template-columns: 1fr 14em 15em 10em;
}

body.provider main[name=provider] details.trade ol,
body.provider.extend details.trade ol {
	grid-template-columns: 1fr 14em 15em 10em 4em;
}

body.provider details.trade section ol li:nth-child(5n+4) input {
	padding-right: 8px;
	text-align: right;
}

body.provider details.trade section ol li:nth-child(5n+5) {
	border-color: transparent;
}

body.provider details.trade section ol li:nth-child(5n+5) button {
	border-radius: 50%;
}



/* -------------------------- forum -------------------------- */


body.forum {
	--lead: 6ex;
	--collapse: 10px;
	overflow-y: hidden;
}

body.forum > main {
	display: grid;
	grid-template-columns: 140px 5px 300px 5px 1fr;
	margin: 40px 0;
	padding: 0;
/* 	height: calc(100vh - 70px); */
	height: 1px;
}

body.forum main hr {
	border-style: solid;
	border-width: 0 2px 0 3px;
	border-color: #000 var(--shadow) #000 var(--border);
	cursor: ew-resize;
}

body.forum main section {
	position: relative;
	border-bottom: 3px solid var(--border);
	padding-bottom: 11px;
}

body.forum main section:first-child {
	background: var(--panelb);
	color: var(--panelc);
}

body.forum main section header {
	padding: 6px 0 0;
	background: inherit;
}

body.forum main section header div {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 4px;
}

body.forum main section header div button {
	border-radius: var(--radius);
	background: var(--buttonb);
	color: var(--buttonc);
	font-size: small;
}

body.forum main section header input {
	border-radius: 1ex;
	padding: 0 8px;
	height: 2em;
	width: 100%;
}

body.forum main section header h1 {
	margin: 0;
	padding: 10px 6px;
	font-size: 2em;
}

body.forum main section main {
	height: 100vh;
	height: calc(100vh - 7em);
	overflow-x: hidden;
	overflow-y: auto;
}

body.forum main section.talk main {
	height: calc(100vh - 7em - 57px);
}

body.forum main section main article {
	padding: 10px 8px;
	text-wrap: nowrap;
}

body.forum main section main article:nth-of-type(even) {
	background: var(--evenb);
	color: var(--evenc);
}

body.forum main section main article:hover {
	background: var(--hoverb);
	color: var(--hoverc);
	cursor: pointer;
}

body.forum main section main article.selected {
	background: var(--selectb);
	color: var(--selectc);
}

body.forum main section main details {
	position: relative;
	margin: 40px 10px 0 22px;
}

body.forum main section main details:before {
	content: ' ';
	display: block;
	position: absolute;
	top: calc(var(--lead) + var(--collapse));
	left: 10px;
	width: 3px;
	height: calc(100% - var(--lead));
	background: var(--evenb);
	cursor: n-resize;
}

body.forum main section main details:first-child {
	margin: 0 4px 0;
}

body.forum main section main details > summary {
	list-style: none;
}

body.forum main section main details > summary hgroup {
	display: grid;
	grid-template-columns: auto 1fr auto;
}

body.forum main section main details > summary hgroup img {
	box-sizing: border-box;
	margin-right: 6px;
	border: 1px solid var(--border);
	padding: 2px;
	height: var(--lead);
}

body.forum main section main details > summary hgroup aside address {
	font-size: 1.5em;
	font-style: normal;
	font-weight: 600;
}

body.forum main section main details > summary hgroup aside time {
	color: var(--inkd);
	font-weight: 200;
}

body.forum main section main details > summary hgroup output button {
	border: none;
	font-size: 1.5em;
	background: transparent;
	color: var(--inkc);
}

body.forum main section main details > summary hgroup output button:active {
	transform: translate(2px, 2px);
}

body.forum main section main details > summary hgroup output button:last-child {
	font-size: 2em;
	transition-duration: .5s;
	transform: rotate(0deg);
	color: red;
}
body.forum main section main details > summary hgroup output button:last-child:active {
	transform: rotate(-90deg);
}
body.forum main section main details[open] > summary hgroup output button:last-child {
	transform: rotate(-90deg);
	color: green;
}
body.forum main section main details[open] > summary hgroup output button:last-child:active {
	transform: rotate(0deg);
}

body.forum main section main details > p {
	margin: 0;
	padding: var(--collapse) 8px 0 27px;
	white-space: pre-line;
}


/* -------------------------- mercurial -------------------------- */

body.mercurial {
	--woodb: #eeccab;
	--woodc: black;
	--wtop: 0.7em;
	--wborder: 0.7em;
	--wfloor: 0.7em;
	--wsep: 0.7em;
	--woodi: url(wood.webp) 120;
	--woodb: #f3e5d3;
	--gap: 16px;
}

@media screen and (prefers-color-scheme: dark) {
	body.mercurial {
		--woodi: url(woodd.webp) 200;
		--woodb: #473a29;
	}
}

body.mercurial section {
	display: flex;
	flex-wrap: wrap;
	max-height: calc(100vh - 7em);
	margin: 20px 10px;
	border: solid var(--woodb);
	border-width: var(--wtop) var(--wborder);
	border-image: var(--woodi);
	border-radius: 6px;
	overflow-x: hidden;
	overflow-y: auto;
}

body.mercurial section article {
	flex: 1;
	position: relative;
	display: grid;
	grid-template-rows 1fr 20px;
	justify-items: center;
	padding: 0 10px;
	border-style: solid;
	border-image: var(--woodi);
	border-width: var(--wfloor) 0;
}

body.mercurial section article:last-child {
	flex: auto;
}

body.mercurial section article hgroup {
	justify-self: start;
	position: absolute;
	z-index: var(--z-label);
}

body.mercurial section article hgroup :where(h1, h2),
body.mercurial section article hgroup > * {
	position: relative;
	top: -1ex;
	left: 1em;
	display: inline;
	margin-right: 4px;
	padding: 4px 5px;
	font-size: 1em;
}

body.mercurial section article hgroup *:before {
	content: '⊘';
	position: relative;
	top: -4px;
	left: -2px;
}

body.mercurial section article hgroup *:after {
	content: '⊘';
	position: relative;
	top: -4px;
	right: -2px;
}

body.mercurial section article hgroup h1 {
	background: #ff0;
	color: black;
}

body.mercurial section article hgroup h2 {
	background: #0ff;
	color: black;
}

body.mercurial section article main {
	text-align: center;
	cursor: pointer;
}

body.mercurial section article.popover main,
body.mercurial:not(.popover) section article main:hover {
	transform: scale(1.15);
	transition-delay: .4s;
	transition-duration: .3s;
	text-decoration: underline;
	text-underline-position: auto;
	z-index: var(--z-hover);
}

body.mercurial section article main img {
	height: 150px;
	margin-top: var(--gap);
	max-width: 20vw;
	object-fit: contain;
}

body.mercurial section article main h6 {
	font-weight: normal;
	font-size: 1em;
	margin: 4px;
	max-width: 20vw;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

body.mercurial section article h3 {
	position: absolute;
	bottom: -20px;
	left: 0;
	margin: 0;
	padding: 0 20px 0 6px;
	border-right: 1px solid var(--shadow);
	box-shadow: 2px -4px 4px 0px black;
	font-size: 1em;
	background: cyan;
	color: black;
	z-index: var(--z-label);
}

body.mercurial section article h3:before {
	content: '';
	display: block;
	position: absolute;
	top: -200px;
	left: 0;
	height: 200px;
	width: 0;
	border-style: solid;
	border-image: var(--woodi);
	border-width: 0 var(--wsep) 0 0;
}

body.mercurial section article h3:after {
	content: '';
	display: block;
	background: cyan;
	width: 100%;
	height: 4px;
	display: block;
	position: absolute;
	top: -4px;
	left: 2px;
	transform: skew(140deg, 0deg);
	border-right: 1px solid var(--shadow);
}

body.mercurial dl.popover {
	display: none;
	position: absolute;
	background: var(--menub);
	color: var(--menuc);
	padding: 38px 8px 8px;
	box-sizing: border-box;
	box-shadow: 5px 5px 5px var(--menus);
	z-index: var(--z-panel);
}

body.mercurial dl.popover dt {
	color: var(--group);
	font-weight: bold;
	padding: 4px 0;
}

body.mercurial dl.popover dd {
	margin: 0;
	padding: 4px 0 4px 20px;
	cursor: pointer;
}

body.mercurial dl.popover dd:hover {
	background: var(--hoverb);
	color: var(--hoverc);
}



/* -------------------------- authentication -------------------------- */

body.auth {
	--window: 800px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.auth main {
	border: 2px solid var(--border);
	padding: 2ex;
	width: var(--window);
	text-align: center;
}

body.auth main picture img {
	margin-bottom: 3ex;
	width: 240px;
}

body.auth main form {
	display: flex;
	flex-direction: column;
	row-gap: 2px;
}

body.auth main form label {
	display: grid;
	grid-template-columns: 12em auto;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
}

body.auth main form label span {
	display: inline-block;
	padding: 3px;
	text-align: right;
	font-weight: bold;
}

body.auth main form output {
	margin-top: 2ex;
	color: red;
	font-weight: bold;
}

body.auth main form label img {
	justify-self: stretch;
	border-radius: 6px;
}

body.auth main form label input[type=submit] {
	margin-top: 2ex;
}

body.auth main p {
	margin: 4ex 10% 0;
	white-space: pre-line;
}

body.auth main address {
	white-space: pre-line;
}

body.auth aside {
	margin-top: 3ex;
	width: var(--window);
	text-align: center;
}

body.auth aside h1 {
	font-size: large;
}

body.auth aside dl {
	text-align: justify;
}

body.auth aside dl dt {
	display: inline;
}

body.auth aside dl dt::after {
	content: ' ✶';
	padding: 0 1em;
	color: blue;
}

body.auth aside dl dt:nth-child(even) {
	color: #555;
}

body.auth aside dl dt:last-child::after {
	content: none;
}



/* -------------------------- bord -------------------------- */


body.bord main {
	display: grid;
	grid-template:
"a a a a a a b b b b b b" 100px
"a a a a a a b b b b b b" 100px
"a a a a a a b b b b b b" 100px
". c c c . . . . . . . ." 100px
". c c c . d d d d d d ." 100px
". c c c . d d d d d d ." 100px
". c c c . . . . . . . ." 100px
". c c c . . e e e e . ." 100px
". c c c . . e e e e . ." 100px
". c c c . . e e e e . ." 100px
". . . . . . . . . . . ." 100px
". . f f f f f f f f . ." 100px
". . f f f f f f f f . ." 100px
". . f f f f f f f f . ." 100px
"g g g g g g g g g g g g" 100px
"g g g g g g g g g g g g" 100px
"g g g g g g g g g g g g" 100px
/ 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	column-gap: 10px;
	row-gap: 20px;
	margin-top: 20px;
	padding-top: 7ex;
	padding-bottom: 200px;
}

body.bord main fieldset {
	position: relative;
	border-radius: var(--radius);
	border: 4px solid var(--border);
	padding: 8px;
}

body.bord main fieldset legend {
	position: relative;
	top: -9px;
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 2px 4px;
	background: var(--legendb);
	color: var(--legendc);
	cursor: pointer;
}

body.bord main fieldset section {
	display: flex;
	justify-content: center;
	height: 100%;
	overflow-x: auto;
	overflow-y: auto;
}

body.bord main fieldset section.reminder {
	display: block;
}

body.bord main fieldset section.reminder li {
	margin: 8px 20px;
	list-style-type: '➔ ';
}

body.bord main fieldset section img {
	max-width: 100%;
	max-height: 100%;
}












/* -------------------------- mail -------------------------- */


body.generic main details.mail section {
	display: flex;
	flex-direction: column;
	row-gap: var(--gap-ver);
	--navigate: 26px;
}

body.generic main details.mail section label {
	display: grid;
	grid-template-columns: 5em 1fr;
	column-gap: var(--gap-hor);
}

body.generic main details.mail section label b {
	text-align: right;
}

body.generic main details.mail section div#mail_tool {
	display: flex;
	justify-content: flex-start;
	border: 1px solid var(--border);
	padding: 4px;
}

body.generic main details.mail section div#mail_tool button {
	height: var(--navigate);
	width: var(--navigate);
	border-radius: 6px;
}

body.generic main details.mail section div#mail_tool button:has(span) {
	width: auto;
}

body.generic main details.mail section div#mail_tool pre {
	padding-left: 8px;
}

body.generic main details.mail section div#mail_tool dl {
	display: none;
}

body.generic main details.mail section div#mail_tool dl.popover {
	display: flex;
	flex-direction: column;
	position: absolute;
	background: var(--menub);
	color: var(--menuc);
	margin: 0;
	padding: 4px;
	height: 15em;
	height: 12.6lh;
	overflow: auto;
	box-sizing: border-box;
	box-shadow: 5px 5px 5px var(--shadow);
	z-index: var(--z-menu);
}

body.generic main details.mail section div#mail_tool dl.popover dt {
	padding: 4px 8px;
	border-radius: var(--radius);
	cursor: pointer;
}

body.generic main details.mail section div#mail_tool dl.popover dt:hover {
	background: var(--hoverb);
	color: var(--hoverc);
}

body.generic main details.mail section div#mail_main {
	box-sizing: border-box;
	border-bottom: 1px dotted var(--border);
	padding: 8px 10px;
	height: 200px;
	background: var(--inkb);
	color: var(--inkc);
	font-family: Arial;
	font-size: 14px;
}

body.generic main details.mail section footer {
	display: flex;
	column-gap: 20px;
	margin-top: 4px;
}

body.generic main details.mail section footer button {
	position: relative;
	border-radius: var(--radius);
	width: 80px;
	height: 80px;
	background: transparent;
	color: var(--inkc);
}

body.generic main details.mail section footer button img,
body.generic main details.mail section footer button input {
	display: none;
}

body.generic main details.mail section footer button.attached span {
	display: none;
}

body.generic main details.mail section footer button.attached img {
	display: block;
	background: white;
	max-width: 100%;
	max-height: 100%;
}

body.generic main details.mail section footer button.attached input {
	position: absolute;
	top: -8px;
	left: -8px;
	display: block;
	box-sizing: content-box;
	border: none;
	border-radius: 50%;
	padding: 2px;
	width: 12px;
	height: 12px;
	font-size: 12px;
	text-align: center;
	background: #ff5f57;
	color: black;
	filter: opacity(0.5);
	cursor: pointer;
}

body.generic main details.mail section footer button.attached input:hover {
	filter: drop-shadow(2px 4px 6px black);
}



/* -------------------------- facture -------------------------- */

body.invoice main nav,
body.config main nav {
	position: relative;
	top: 1em;
	text-align: right;
}

plume-enum.panel li {
	padding: 2px 8px;
}

body.invoice section {
	display: none;
	position: relative;
}

body.invoice section.selected {
	display: block;
}

body.invoice section h3 {
	margin: .5em 0 2px 0;
}

body.invoice section[name=send] {
	max-width: var(--xlarge);
	margin: 0 auto;
}

body.invoice section[name=send] ol {
	display: grid;
	grid-template-columns: minmax(3.1ch, 7ch) minmax(3em, 8em) minmax(3.3ch, 5em) 1fr minmax(9ch, 12ch) minmax(9ch, 12ch) minmax(3.3ch, 5em) minmax(3.3ch, 5em) minmax(9ch, 12ch) minmax(9ch, 12ch) minmax(2em, 8em) minmax(2em, 8em);
}


body.invoice section[name=send] ol li {
	padding: 2px 6px;
	border: 1px solid var(--border);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: hidden;
}

body.invoice section[name=send] header {
	font-weight: bold;
	text-align: center;
}

body.invoice section[name=send] header ol li {
	background: var(--titleb);
	color: var(--titlec);
}

body.invoice section[name=send] header ol li:first-child {
	border-radius: var(--radius) 0 0 0;
}

body.invoice section[name=send] header ol li:last-child {
	border-radius: 0 var(--radius) 0 0;
}

body.invoice section[name=send] article {
	border-bottom: 1px solid var(--border);
	height: calc(100vh - 9em);
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-color: #ddd #222;
}

body.invoice section[name=send] article ul > li.selected {
	background: var(--selectb) ! important;
	color: var(--selectc) ! important;
}

body.invoice section[name=send] article ul > li:nth-child(even) {
	background: var(--evenb);
	color: var(--evenc);
}

body.invoice section[name=send] article ul li ol li:nth-child(12n+1),
body.invoice section[name=send] article ul li ol li:nth-child(12n+5),
body.invoice section[name=send] article ul li ol li:nth-child(12n+6),
body.invoice section[name=send] article ul li ol li:nth-child(12n+9),
body.invoice section[name=send] article ul li ol li:nth-child(12n+10) {
	text-align: right;
	direction: rtl;
	text-overflow: clip;
}

body.invoice section[name=send] article ol li:nth-child(12n+3) {
	text-overflow: clip;
}

body.invoice section[name=send] article ol:hover {
	background: var(--hoverb);
	color: var(--hoverc);
}

body.invoice section[name=send] dialog main {
	display: grid;
	grid-template-rows: 1fr auto;
	min-width: min-content;
	min-height: 340px;
	padding: .5em .5em 1em .5em;
	background: var(--panelb);
	color: var(--panelc);
}

body.invoice section[name=send] dialog main form {
	display: flex;
	flex-direction: column;
}

body.invoice section[name=send] dialog main form > label {
	display: grid;
	grid-template-columns: 13em 1fr;
	column-gap: .5em;
	margin: .5em;
}

body.invoice section[name=send] dialog main form > label:first-child {
	flex-grow: 1;
}

body.invoice section[name=send] dialog main form > label b {
	text-align: right;
}

body.invoice section[name=send] dialog main form > label span {
	max-width: 8em;
	text-align: right;
}

body.invoice section[name=send] dialog main form > label label {
	max-width: max-content;
}

body.invoice section[name=send] dialog main form > label input[type=euro] {
	max-width: 8em;
}

body.invoice section[name=send] dialog main form > label input[type=date] {
	width: fit-content;
	text-align: center;
}

body.invoice section[name=send] dialog main output {
	display: flex;
	justify-content: space-evenly;
	margin-top: 8px;
}

body.invoice section[name=send] dialog main output input[type=close] {
	width: 4.6em;
	text-align: center;
}