@import url('font/font.css');

/* ============= General Page styles ============= */
html,
body {
	margin: 0;
	padding: 0;
}
html {
	scroll-padding-top:150px;
}
body {
	font-family: var(--textStyle), sans-serif;
	font-size: var(--fontSize);
	color: var(--contentFG);
	background-color: var(--contentBG);
	overflow-x: hidden;
	position: static !important;
}

a {
	color: var(--accentColor);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
	&.txt_doc_ul::before,
	&.txt_ref_ul::before {
		font-family: "fontello";
		margin-inline-end: 0.1em;
		font-style: normal;
		font-weight: normal;
		text-decoration: none;
	}
	&.txt_doc_ul::before {
		content: "\E828";
	}
	&.txt_ref_ul::before {
		content: "\E82A";
	}
	& img {
		border-width: 0;
	}
	&:focus img {
		border: 1px solid #fff;
	}
}

ul,
ol {
	margin: 5px 0 0 0;
	list-style-position: outside;
}

table {
	border-collapse: collapse;

	@media (max-width: 700px) {
		&[data-responsive] {
			display:block;

			& tr {
				display:flex;
				flex-direction: column;
			}
			& tbody {
				display:block;
			}
		}
	}
}

q::before,
q::after {
	content: "";
}

h1, h2, h3, h4, h5, h6 {
	margin-block-end: 0.5em;
	color: var(--titleColor);
	font-family: var(--titleStyle), sans-serif;
	font-weight: 500;
}

h1 {font-size: clamp(1.75rem, 0.17vw + 1.718rem, 2rem);}
h2 {font-size: clamp(1.625rem, 0.17vw + 1.593rem, 1.875rem);}
h3 {font-size: clamp(1.5rem, 0.17vw + 1.468rem, 1.75rem);}
h4 {font-size: clamp(1.375rem, 0.17vw + 1.343rem, 1.625rem)}
h5 {font-size: clamp(1.25rem, 0.17vw + 1.218rem, 1.5rem)}
h6 {font-size: clamp(1.125rem, 0.17vw + 1.093rem, 1.375rem)}

.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	visibility: hidden;
	top: -10000px;
	left: -10000px;
}

/* ============= Accessibility menu ============= */
#accessibility {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	width: auto;
	z-index: 90;
	font-size: 0.6em;
	top: 0;

	& li {
		float: left;
		margin-inline-end: 10px;
	}
	& a {
		color: var(--headerFG);
		text-decoration: none;
		opacity: 0;

		&:hover,
		&:focus {
			opacity: 1;
			color: color-mix(in oklab, var(--headerLink), #000 50 %);
		}
	}
	/* ILLUS */
	& li.tplWaiStopVideoIllustration a{
		width:30px;
		height: 30px;
		display: block;
		background-color: rgba(0, 0, 0, 0.6);
		color:#fff;
		position:absolute;
		right: 1em;
		top: 95px;
		opacity: 1;
		text-align: center;
		font-size:2em;
		line-height:30px;
		border-radius: 50%;

		&::before{
			font-family: 'fontello';
			content: "\23F8";
		}
		&.paused::before{
			font-family: 'fontello';
			content:"\23F5";
		}
		& span{
			position:absolute;
			left:-9999px;
		}
	}
}

/* ============= header ============= */
#header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	background-color: var(--headerBG);
	color: var(--headerFG);

	& .inline {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		background-color: var(--headerBG);
		padding: 1em;
		column-gap: 1em;
		order: 1;

		@media (max-width: 800px) {
			padding: 0.5em;
		}
	}
	& .tplTitle {
		flex: 1;
		max-width: 90lvw;
		font-size: clamp(1.125rem, 0.17vw + 1.093rem, 1.375rem);
		font-family: var(--titleStyle), sans-serif;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin: 0;

		& a {
			color: var(--headerFG);
			text-decoration: none;

			&:hover {
				opacity: 0.8;
			}
		}
	}
	@media (max-width: 1200px) {
		.multipleSections & .inline {
			flex-direction: column;
		}
	}
}

.illus {
	position: fixed;
	overflow: hidden;
	width: 100%;

	& img,
	& video {
		height: auto;
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(0px, -50%);

		@media (max-width: 700px) {
			display: block;
			position: relative;
		}
	}
}

/* NAVIGATION */
#navigation {
	@media (max-width: 800px) {
		display: none;
		align-self: flex-start;

		.menuOpen & {
			display: block;
			flex: 100%;
		}
	}

	& ul.tileLinks {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 0.8em;
		padding: 0;
		margin: 0;

		& .currentTile a {
			color: var(--headerFG);
			border-block-end: 3px solid var(--accentColor);

			&:hover {
				text-decoration: none;
			}
		}
		& a.homeLink {
			display: flex;
			align-items: baseline;
			width: fit-content;

			&::before {
				font-family: "fontello";
				content : "\E822";
				font-size: 110%;
			}
			& span {
				position: absolute;
				left: -9999px;

				@media (max-width: 800px) {
					position: relative;
					left: auto;
					margin-inline-start: 0.5em;
				}
			}
			.home & {
				color: var(--headerFG);
				border-block-end: 3px solid var(--accentColor);
			}
		}
		& a {
			font-family: var(--titleStyle), sans-serif;
			display: inline-block;
			position: relative;

			&:hover {
				opacity: 0.8;
			}
			& img {
				max-height: 2em;
				width: auto;
				vertical-align: middle;
				margin-inline-end: 0.5em;
			}
		}
		& .urlLink::after {
			font-family: "fontello";
			content: "\E81D";
			vertical-align: top;
			font-size: 75%;
			margin-inline-start: 0.2em;
		}

		@media (max-width: 800px) {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: column;
			gap: 0.5em;
			margin-block: 0.5em;
			padding: 0;
		}
	}
}

ul.tileLinks,
ul.outBk {
	list-style: none;
	margin: 0;
}



ul.outBk {
	& .outBk_i {
		padding: 4px 5px;
		text-decoration: none;
		color: var(--headerLink);
		background-color: transparent;
	}
	& a.outBk_i:hover {
		opacity: 0.9;
		color: color-mix(in oklab, var(--headerLink), #000 50 %);
	}
	@media (max-width: 700px) {
		text-align: left;
		padding: 0.5em;

		& li {
			display: block;
			border-block-end: none;
			border-inline-start: none;
		}
	}
}

.tt_fra.tile {
	& .tt_co{
		display:flex;
	}
	& .tileIcon{
		margin: 0 1em;

		& img{
			max-width:64px;
			height:auto;
		}
	}
}

#stack {
	color: var(--headerStackFG);
	padding: 0.5em 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.5em;
	background-color:var(--headerStackBG);
	order: 3;
	flex: 100%;

	& > .sw_outStack_navRoot {
		flex: 2 1 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 0.4em;

		& a {
			color: var(--headerStackFG);
			text-decoration: underline;
		}
		@media (max-width: 800px) {
			order: 4;
		}
	}
	& a {
		text-decoration: none;

		&:hover {
			opacity: 0.9;
		}
	}
	& span.page {
		font-style: italic;

		&.sep {
			color: transparent;
			display: inline-flex;
			width: 0.8em;

			&::before {
				font-family: "fontello";
				content: "\E821";
				width: 0.8em;
				color: var(--headerStackFG);
			}
		}
	}
	.home & {
		display: none;

		&:has(.searchFra) {
			display: flex;
		}
	}
}

/* Navigation */
.outNav {
	background: var(--contentBG);
	padding-inline: 0.5em;

	& ul {
		display: flex;
		column-gap: 0.5em;
		list-style: none;
		justify-content: center;
		padding:0;
		margin-inline: auto;
		max-width: var(--maxWidth);
		padding-block: 1em 2em;
	}
	& li {
		& a {
			background-color: var(--accentColor);
			color: var(--invColor);
			padding: 0.3rem 0.6rem;
			border-radius: 0.2rem;
			display: flex;
			column-gap: 0.3em;
			align-items: center;
			text-decoration: none;

			&:hover {
				text-decoration: none;
				background-color: color-mix(in oklab, var(--accentColor), #000 50%);
			}
			& > span > span {
				display:none;
			}
			@media (max-width: 700px) {
				flex: 1;
				justify-content: center;
				padding-block: 0.5em;
			}
		}
		& > span {
			display:none;
		}
		& #btnPrv::before,
		& #btnNxt::after {
			font-family: "fontello";
		}
		& #btnPrv::before {content: "\E820";}
		& #btnNxt::after {content: "\E821";}
		@media (max-width: 700px) {
			display: contents;
		}
	}
}

/* TILE BLOCKS */
.bkTileSet {
	margin-inline: auto;
	width: -webkit-fill-available;
	max-width: var(--maxWidth);

	& .pres {
		margin: 0.3em 0;
	}
	& .tiles {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em;

		@media (max-width: 900px) {
			grid-template-columns: 1fr 1fr;
		}
		@media (max-width: 500px) {
			grid-template-columns: 1fr;
		}
	}
}

article.tile {
	border: var(--tileBorderWidth) solid var(--tileBorderColor);
	text-align: center;
	position: relative;
	height: 230px;
	border-radius: var(--tileRadius);
	background-color: var(--tileBG);
	overflow: hidden;
	box-shadow: 0 5px 10px -1px rgba(0,0,0,0.25);
	transition: all 0.1s ease-out;

	&:hover{
		filter: brightness(0.9);
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
		top: 2px;
	}
	@media (max-width: 700px) {
		height: auto;
	}
}


div.tiles a.tileLink {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	position: relative;

	& > div {
		display: contents;
	}
	& .tileIcon {
		background-color: color-mix(in oklab, var(--tileBG), #000 10%);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		& > img {
			width: -webkit-fill-available;
			height: -webkit-fill-available;
			object-fit: cover;
			filter: brightness(0.4);
		}
	}
	& .tileTitle,
	& .tileAbstract {
		margin-block: 0.2rem;
		margin-inline: 1rem;
		width: -webkit-fill-available;
		text-align: center;
		z-index: 1;
	}
	& .tileTitle {
		color:var(--tileTitleColor);
		grid-area: title;
	}
	& .tileAbstract {
		color:var(--tileFG);
		grid-area: abstract;

		& p {
			margin-block: 0.2rem;
		}
	}
	@media (max-width: 800px) {
		min-height: 15lvh;
	}
}

/* FOOTER */
footer {
	clear: both;
	float: left;
	width: -webkit-fill-available;
	padding: 0;
	background-color: var(--footerBG);
	color: var(--footerFG);

	& img {
		vertical-align: middle;
	}
}

#extras {
	display: flex;
	justify-content: center;
	position: relative;
	padding: 2em 1em;
}

.permMargin {
	flex: 1;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	gap: 1.5em;
	max-width: 1400px;

	& .margin {
		flex: 1 20%;

		& a {
			color: var(--invColor);
			text-decoration: underline;

			&:hover {
				text-decoration: none;
			}
		}
		& .margin_ti {
			font-size: 110%;
			margin-inline: 0;
			margin-block: 0 0.5em;
			color: var(--footerFG);
		}
		& .margin_co {
			font-size: 90%;
			overflow: auto;

			& p {
				margin-block: 0.7em;
			}
			& .event .tt_a {
				display: block;
			}
		}
		@media (max-width: 800px) {
			flex: 1 40%;
		}
		@media (max-width: 500px) {
			flex: 1 100%;
		}
	}
}

.tplFootBanner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0.2em;
	color: var(--footerFG);
	background-color: var(--footerBG);
	font-size: 0.8em;
	cursor: default;

	& a {
		margin-inline-end: 0.5em;
		color: var(--footerFG);
		text-decoration: underline;

		&:hover {
			text-decoration: none;
			opacity: 0.8;
		}
		&.legalLnk {
			order: 2;
		}
		&.cookieWarnBtnBar {
			order: 3;
		}
		&.generatorLink {
			order: 4;
		}
	}
	& span.copyright {
		padding: 2px 0 0 5px;
		order: 1;
		flex: 2 1 auto;
	}
}

/* EVENT */
.margin .evtList {
	padding-inline-end: 1px;
}

.evtListEvt {
	list-style-image: url("img/co/evt.svg");
}

.evtListDesc {
	list-style-type: square;
}

.event_closed,
.event_open {
	&::before {
		font-family: "fontello";
		width: 0.9em;
		display: inline-block;
		vertical-align: baseline;
		text-align: center;
		margin-inline-end: 0.2em;
		color: var(--extraFG);
	}
	&:hover,
	&:hover::before {
		color: color-mix(in oklab, var(--extraFG), #000 50%);
	}
}
.event_closed::before {
	content: "\E802";
}
.event_open::before{
	content: "\e801";
}

.event {
	margin-block-end: 5px;


	& .anchor {
		visibility: hidden;
		text-decoration: none;
		color: var(--accentColor);
		font-size: .95em;
		margin-inline-start: 0.2em;

		&::before {
			font-family: "fontello";
			content: "\E827";
		}
		& > span {
			display: none;
		}
	}
	& .event_ti {
		margin: 0;
		font-weight: normal;
		font-size: 1.2em;

		&::before {
			font-family: "fontello";
			content: "\E81F";
			margin-inline-end: 0.3em;
		}

		& a {
			color: var(--extraFG);
		}
	}
	& .event_co {
		margin-inline-start: 2.2em;
		margin-block: 0.3em 0.8em;
		padding-inline-start: 1em;
		border-inline-start: 1px solid var(--extraFG);

		& li {
			list-style-image: none;
		}
		& a:hover {
			color: color-mix(in oklab, var(--accentColor), #000 50 %);
		}
	}
}

/* MENU MOBILE */
menu, .menuBtnParent {
	display: contents;
}
.menuBtn {
	display: none;

	@media (max-width: 800px) {
		display: inline-block;
		appearance: none;
		border: 1px solid var(--borderColor);
		background-color: transparent;
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 0.4em;
		padding: 0;
		order: 2;
		margin-inline-end: 0.5em;
		align-self: center;

		&:hover {
			background-color: color-mix(in oklab, var(--contentBG), #000 5%);
			cursor: pointer;
		}
		&::before {
			font-family: fontello;
			content: "\E823";
		}
		.menuOpen &::before {
			content: "\E814";
		}
		& span {
			display: none;
		}
		.menuOpen & {
			align-self: flex-start;
			margin-block-start: 0.5em;
		}

	}
}

/* CONTENT */
#content {
	background-color: var(--contentBG);
	width: 100%;
	overflow: hidden;
	z-index: 2;
	position: relative;

	.hasSlider & {
		min-height: 550px;
	}
	& > section {
		padding-inline: 0.5em;
	}
}

.bkBase {
	margin-inline: auto;
	margin-block: 1.5em;
	max-width: var(--maxWidth);
	width: -webkit-fill-available;

	section& {
		margin-block: 2em;
	}
	&:is(.bkInfo, .bkCptTree, .bkGallery, .bkEvtList, .bkLegal, .bkPrivacy, .bkTyped) {
		background-color: var(--contentBG);
	}
	&.bkSec > .bkBase_ti {
		background-color: var(--contentBG);

		& span {
			margin-inline: auto;
			max-width: var(--maxWidth);
			width: -webkit-fill-available;
		}
	}

	&.bkPage > .bkBase_ti {
		font-size: clamp(1.75rem, 0.17vw + 1.718rem, 2rem);
		color:var(--titleColor);
		text-align: center;
	}
	&:is(.bkInfo, .bkEmphasis, .bkExtra, .bkCptTree, .bkGallery, .bkEvtList, .bkLegal, .bkPrivacy, .bkTyped, .bkTileSet) > .bkBase_co {
		margin-block: 1em;
	}
}

.bkBase_ti {
	margin-block: 0 0.8em;

	& > span {
		display: block;
	}
	@media (max-width: 900px) {
		#content > .bkBase:first-child > & {
			font-size: 2.0em;
		}
	}
}

.bkSec > h3.bkBase_ti {
	font-size: 1.8em;
}

/* bkTyped */
.bkBase.bkTyped {
	margin-block: 1em;
	border: 2px solid var(--extraFG);
	border-radius: var(--bkRadius);

	& .bkBase_ti {
		margin-block-start: 0;

		&:has(a.bkBase_closed) {
			margin-block-end:0;
		}
		& > * {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 0.1em;
		}
		& > a span {
			color: var(--extraFG);
		}
	}
	& i.type{
		order: 1;
		font-size: 0.9rem;
		font-style: normal;
		font-family: var(--textStyle), sans-serif;
		display: inline-flex;
		align-items: center;
		gap: 0.2em;
		padding: 0.2em 0.5em;
		background-color: var(--extraBG);
	}
	& .title {
		order: 2;
		flex: 1 85%;
		padding-inline-start: 0.1em;
	}
	& .bkBase_closed::after,
	& .bkBase_open::after {
		order: 3;
	}
}

.binCap {
	text-align: center;
	margin: 10px;

	.animFra & {
		margin: 0;
	}
}

.binCap_ti {
	margin-block-start: 0.25em;
	font-size: 0.9em;
}

.webCap {
	text-align: center;
	margin: 10px;
}

.webCap_ti {
	font-style: italic;
}

div.margin_co .binCap,
div.margin_co .webCap {
	margin: 2px 0 3px 0;
}

.binImg, .remoteImage {
	max-width: -webkit-fill-available!important;
	height: auto;
}
.binImgInline {
	vertical-align: middle;
	max-width: -webkit-fill-available;
}

.binNet, .binWeb {
	max-width: 100%;
}

.bkEmphasis {
	background-color: var(--emphasisBG);
	color: var(--emphasisFG);
	padding: 1.5em;
	border-radius: var(--bkRadius);

	& .bkBase_ti {
		color: var(--emphasisTitle);
		padding: 0;
	}
	& a {
		text-decoration: underline;
		color: var(--emphasisFG);

		&:hover {
			opacity: 0.8;
		}
	}
	& .bkBase_co {
		font-weight: lighter;
	}
}

.bkExtra {
	padding: 1em;
	border: 2px solid var(--extraFG);
	border-radius: var(--bkRadius);

	& .bkBase_ti{
		padding: 0;
		margin: 0;
		font-size: 1.2em;
		color: var(--extraFG);

		& > a span {
			color: var(--extraFG);
			flex: 1;
		}
	}
	& .collBlk_open {
		margin-block-start: 0.5em;
	}
}

/* ---------- text ---------- */
.txt_tbpt {
	overflow-y: auto;
}
.txt_tb {
	margin: auto;
	border: 1px solid var(--borderColor);

	& caption {
		color: #737373;
		font-style: italic;
	}
	& td,
	& th {
		border: 1px solid var(--borderColor);
		padding: 0.5em;
	}
	& th {
		background-color: #0000002e;
	}
	& thead {
		border-block-end: 1px solid var(--borderColor);
	}
	& tfoot {
		border-block-start: 1px solid var(--borderColor);
	}
	& p {
		margin: 1px 0;
	}
}

.txt_t_tbcl,
.txt_t_tbtr {
	background-color: #0000002e;
}

.txt_n_tbtd p {
	text-align: right;
}

.txt_w_tbtd p {
	text-align: center;
}

.lnkZoom {
	background: url("img/co/search.svg") center no-repeat;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-inline-start: 3px;

	&:hover {
		opacity: .8;
	}
	& span {
		display: none;
	}
}

ul.txt_il {
	@media (max-width: 700px) {
		padding-inline-start: 0.5em;
	}
}

/* TYPES DE FICHIERS */
.lnkBin {
	&::before {
		font-family: "fontello";
		display: inline-block;
		padding-inline-end: 0.1em;
	}
	&.lnkBinWeb::before {
		content: "\E80D";
	}

	&.lnkBinDoc::before {
		content: "\E807";
	}

	&.lnkBinMp3::before {
		content: "\E808";
	}

	&.lnkBinOdg::before {
		content: "\E812";
	}

	&.lnkBinOdp::before {
		content: "\E813";
	}

	&.lnkBinOds::before {
		content: "\E809";
	}

	&.lnkBinOdt::before {
		content: "\E80F";
	}

	&.lnkBinPdf::before {
		content: "\E80A";
	}

	&.lnkBinPpt::before {
		content: "\E80B";
	}

	&.lnkBinRtf::before {
		content: "\E811";
	}

	&.lnkBinSwf::before {
		content: "\E810";
	}

	&.lnkBinXls::before {
		content: "\E80C";
	}

	&.lnkBinZip::before {
		content: "\E80E";
	}
}

iframe.pdfFrame{
	max-height: 70vh !important;
}

/* ---------- tooltips ---------- */
a.tt_a.info {
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	margin-inline-start: 0.3rem;

	&::before {
		font-family: "fontello";
		content: "\E82D";
	}
	& span {
		display: none;
	}
}

a.tt_act {
	color: var(--invColor);
	background-color: var(--accentColor);
}

.tt {
	font-size: 0.9em;
	background-color: var(--contentBG);
	border-radius: 0.2em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tt_ti {
	background-color: var(--accentColor);
	color: var(--invColor);
	padding-inline: 0.2em 1.5em;
	padding-block: 0.2em;
	border-radius: 0.2em 0.2em 0 0;
}

.tt_x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 1px;
	right: 1px;
	background-color: var(--invColor);
	color: var(--accentColor);
	line-height: 20px;
	border-radius: 50%;
	font-size: .9em;

	&:hover {
		text-decoration: none;
	}
	&::before {
		font-family: "fontello";
		content: "\E814";
	}
	& > span {
		display: none;
	}
}

div.tt_co {
	padding: 0.5em;

	& p {
		margin: 0 0 2px 0;
		text-align: left;
	}
}

a.ttEvt_act {
	color: #ffffff;
}

div.ttEvt_ti {
	display: none;
}

div.ttEvt_co {
	padding: 0 18px 0 0;
	background-color: var(--accentColorLight);
}

div.ttExtCo {
	padding: 5px 5px 5px 5px;
	background-color: white;
}

ol.footNotes {
	margin: 10px;
	font-size: 0.8em;
	padding-block-start: 5px;
	padding-inline-start: 20px;

	& li.footNotes_it {
		margin-block-end: 10px;
		padding: 2px;

		& div.footNotes_itti {
			font-weight: bold;
		}
	}
	& p {
		margin: 0 0 5px 0;
	}
	& .tt_x {
		display: none;
	}
	& *:target {
		background-color: #eeecdd;
	}
}

table.docHead th {
	padding-inline-end: 5px;
	text-align: right;
}

/* ---------- Slider ---------- */
.sliderFra {
	height: 440px;
	overflow: hidden;
	padding-block-end: 3em;

	& img {
		transition: left 1s ease-out;
		max-width: initial!important;
		height: auto!important;
	}
	.isResized& > img {
		transition: none;
	}
	.sliderLoading & > img {
		display: none;
	}
	.sliderLoading &:before {
		content: "";
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("img/co/loader.svg");
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

a.scImgSliderBtnPrv {
	display: flex!important;
}

div.scImgSliderTools {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--contentBG);
	display: flex;
	z-index: 9;

	& .scImgSliderToolsOver {
		display: contents!important;
	}
}

a.scImgSliderBtnPause,
a.scImgSliderBtnPlay,
a.scImgSliderBtnPrv,
a.scImgSliderBtnNxt {
	text-transform: none;
	color: var(--accentColor);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;

	& span {
		display: none;
	}
	&::before {
		font-family: "fontello" !important;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		font-size: 30px;
	}
}

a.scImgSliderBtnPause::before {content: "\E816";}
a.scImgSliderBtnPlay::before {content: "\E815";}
a.scImgSliderBtnPrv::before {content: "\E820";}
a.scImgSliderBtnNxt::before {content: "\E821";}


.scImgSliderTimer {
	color: var(--contentFG);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	padding-inline-end: 0.8em;
	width: 50px;
	height: 50px;
	order: 8;
}

svg.scImgSliderTimerProgressBarSvg {
	stroke: var(--contentFG);
	stroke-linecap: round;
	fill: none;
	stroke-width: 12;
	width: 30px;
	height: 30px;
	transform: rotate(-90deg);
}

/* VOIR + OU - */
.bkBase_closed,
.bkBase_open {
	display: flex;
	align-items: baseline;
	column-gap: 0.2em;

	&::after {
		font-family: "fontello";
		font-size: 0.8em;
		width: 2em;
		line-height: 2em;
		display: inline-block;
		text-align: center;
		border-radius: 50em;
		background-color: var(--extraBG);
		color: var(--extraFG);
	}
	&:hover {
		text-decoration: none;

		&::after {
			background-color: color-mix(in oklab, var(--extraBG), #000 10%);
		}
	}
}
.bkBase_closed {
	border-block-end: none;

	&::after {
		content: "\E81E";
	}
}
.bkBase_open::after {content: "\E817";}

/* ---------- Options ---------- */
.optContent {
	background-color: #fff;
	padding: 30px 15px;
}

/* ---------- search, optSearch ---------- */
input.searchSubmit,
input.schBtnLaunch {
	border: medium none;
	background-color: transparent;
}

/* ============= Cookie warn bar ============= */
.cookieWarnBar {
	position: fixed;
	border-block-start: 1px solid var(--borderColor);
	background-color: var(--contentBG);
	opacity: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;

	&.acknowledged {
		display: none;
	}
}

.cookieWarnContent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.5em;
	max-width: var(--maxWidth);
	margin: 0 auto;
	padding: 6px 10px;
	box-sizing: border-box;

	& > a {
		display: inline-block;
		background-color: var(--accentColor);
		color: var(--invColor);
		border-radius: 0.2em;
		padding: 0.1em 0.3em;
		margin: 0 0.3em;
		text-decoration: none;

		&:hover {
			background-color: color-mix(in oklab, var(--accentColor), #000 20%);
		}
	}
}

.cookieWarnMsg {
	flex: 1 1 auto;
}

li.outBkBtn {
	@media (max-width: 1000px) {
		padding: 4px;
		margin-inline-start: 4px !important;
		margin-inline-end: 4px !important;
	}
	@media (max-width: 900px) {
		padding: 2px;
		margin-inline-start: 2px !important;
		margin-inline-end: 2px !important;
		font-size: 1.0em;
	}
	@media (max-width: 700px) {
		padding: 0;
		margin-inline-start: 1px !important;
		margin-inline-end: 1px !important;
	}
}

.txt_anim_ex iframe {
	@media (max-width: 700px) {
		max-width: -webkit-fill-available;
	}
}
/* ---------- Gallery ---------- */
.imgLoading {
    & .scImgGalCvs::before {
        content: "";
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url("img/co/loader.svg");
        position: fixed;
        overflow: hidden;
        top: 0;
        left: 0;
        z-index: 2001;
        width: 100%;
        height: 100%;
    }
    & .scImgGalFra {
        display: none;
    }
}

.galMiniFra {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    text-align: start;
    list-style: none;
    padding-inline-start: 0;

    & img {
        height: 80px;
        width: auto;
    }
}

.scImgSep {
    display: none;
}

.galFra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: start;
    list-style: none;
    padding-inline-start: 0;

    & img {
        padding: 5px;
        max-width: -webkit-fill-available;
    }
    & .galPv {
        position:relative;
        max-width: -webkit-fill-available;

        &:focus-within a.galPvLnk,
        &:hover a.galPvLnk {
            border-radius:  0.3em .3em 0 0;
            background-color: var(--menuBG);
            opacity: 1;
        }
        &:focus-within a.galPvLnk + .imgPvCap,
        &:hover a.galPvLnk + .imgPvCap {
            display:block;
            background-color: var(--menuBG);
            border-radius: 0 0 0.3em .3em;
            box-shadow: 0 7px 8px -3px rgba(0,0,0,0.2);
        }
    }
    & a.galPvLnk {
        display: inline-block;
        max-width: -webkit-fill-available;

        &:hover {
            border-radius:  0.3em .3em 0 0;
            background-color: var(--menuBG);
            opacity: 1;

            & + .imgPvCap:not(:empty) {
                display:block;
                background-color: var(--menuBG);
                border-radius: 0 0 0.3em .3em;
                box-shadow: 0 7px 8px -3px rgba(0,0,0,0.2);
            }
            & img {
                filter: brightness(0.9);
            }
        }
    }
    & .imgPvCap {
        display:none;
        text-align: center;
        position:absolute;
        width: 100%;
        z-index:10;
        padding-block-end:0.2em;
    }
}
.galFra .galPv:has(.imgPvCap:empty) a.galPvLnk:hover,
.galFra .galPv:has(.imgPvCap:empty) a.galPvLnk:focus-within {
    background-color: transparent;
    border-radius: 0;

    & + .imgPvCap {
        display: none;
    }
}

.schDisplay_on .galFra .imgPvCap {
    display: block;
    position: relative;
}

.scImgGalCvs {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scImgGalFra {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.scImgGalImgFra {
    background-color: var(--contentBG);
    border-radius: 5px;
    padding: 5px 5px 3em 5px;
    overflow: hidden;
}

.scImgGalCo {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 0;
}

.scImgGalTbr {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 10px;
    z-index: 1;
    padding-inline: 10px;
    height: 3em;

    & .scImgGalCount {
        order: 1;
        font-style: italic;
        color: var(--contentFG);
    }
}

div.scImgGalOver,
div.scImgZmOver {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.scImgGalTi {
    order: 3;
    color: var(--titleColor);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

div.scImgGalBtns {
    order: 2;
    background-color: var(--galleryBG);
    display: flex;
    column-gap: 5px;
    justify-content: center;
    align-items: center;
    border-radius: 50em;
    padding: 0.2em;
}

a.scImgGalBtnPly span,
a.scImgGalBtnPse span,
a.scImgGalBtnNoPrv,
a.scImgGalBtnNoNxt {
    display: none!important;
}

a.scImgGalBtnCls,
a.scImgZmBtnCls,
a.scImgSeqBtnCls,
a.scImgSeqBtnPrv,
a.scImgGalBtnPrv,
a.scImgSeqBtnNxt,
a.scImgGalBtnNxt,
a.scImgSeqBtnPlay,
a.scImgGalBtnPly,
a.scImgSeqBtnPause,
a.scImgGalBtnPse {
    text-transform: none;
    background-color: var(--contentBG);
    color: var(--accentColor);
    font-size: 1.3em;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50em;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.scImgGalBtnCls,
a.scImgZmBtnCls,
a.scImgSeqBtnCls {
    position: fixed;
    top: 10px;
    right: 10px;

    &:hover {
        background-color: color-mix(in oklab, var(--contentBG), #000 10%);
    }
    &::before {
        font-family: "fontello";
        font-style: normal;
        font-weight: normal;
        content: "\E814";
        font-size: 0.9em;
    }
    .isMobile_true & {
        position: absolute;
    }
    & span {
        display: none;
    }
}

div.scImgGalTbr a {
    color: var(--accentColor);

    &:hover {
        background-color: color-mix(in oklab, var(--contentBG), #000 10%);
    }
}

.isMobile_true a.scImgGalBtnNxt {
    position: absolute !important;
}

a.scImgGalBtnPrv::before,
a.scImgGalBtnNxt::before,
a.scImgGalBtnPse::before,
a.scImgGalBtnPly::before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
}

a.scImgGalBtnPrv {
    left: 5px;

    &::before {
        content: "\e833";
    }
    .isMobile_true & {
        position: absolute !important;
    }
    & span {
        display: none!important;
    }
}

a.scImgGalBtnNxt {
    right: 5px;

    &::before {
        content: "\ea34";
    }
    .isMobile_true & {
        position: absolute !important;
    }
    & span {
        display: none!important;
    }
}

a.scImgGalBtnPse::before {content: "\E816";}
a.scImgGalBtnPly::before {content: "\E815";}

.noScroll {
    overflow: hidden;
}

/* ---------- sequence ---------- */
.scImgSeqOver {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.scImgSeqMag {
    box-shadow: 0 0 5px 0 #000000;
    cursor: crosshair;
}

.seqFra,
.seqFraMini {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 1em;
}

a.scImgSeqBtnPrv,
a.scImgSeqBtnNxt,
a.scImgSeqBtnPlay,
a.scImgSeqBtnPause {
    &:hover {
        background-color: color-mix(in oklab, var(--contentBG), #000 10%);
    }
    &::before {
        font-family: "fontello";
        font-weight: normal;
    }
    & span {
        display: none;
    }
}
a.scImgSeqBtnPlay,
a.scImgSeqBtnPause {
    margin-inline-end: 0.3em;
    order: 1;
}
a.scImgSeqBtnPrv::before {content: "\e833";}
a.scImgSeqBtnNxt::before {content: "\ea34";}
a.scImgSeqBtnPause::before {content: "\E816";}
a.scImgSeqBtnPlay::before {content: "\E815";}

.scImgSeqToolsOver {
    background-color: var(--galleryBG);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    border-radius: 50em;
    padding: 0.2em;
}

.galPv {
    .seqFra & {
        margin-block-start: 0.3em;
        display: flex;
        flex-direction: column;
        align-items: center;
        visibility: hidden;
    }
    .seqFraMini & {
        visibility: hidden;
    }
}

.seqFraMini img {
    width: 180px;
    height: auto;
}

/* ---------- zoom ---------- */
.scImgZmCvs,
.scImgSeqCvs {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;

    .imgLoading &::before {
        content: "";
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url("img/co/loader.svg");
        position: fixed;
        overflow: hidden;
        top: 0;
        left: 0;
        z-index: 2001;
        width: 100%;
        height: 100%;
    }
}

div.scImgZmFra {
    background-color: white;
    border-radius: 5px;
    padding: 5px;
}

div.scImgZmTlb {
    margin-block-start: 5px;
    text-align: right;
}

.scImgZmCo,
.scImgSeqCo {
    text-align: center;

    & div {
        z-index: 2002;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 0;
    }
    & iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 0;
    }
    & a {
        text-decoration: none;

        & img {
            border: 0;
        }
    }
    & img {
        background-color: white;
    }
}
/* === ConceptTree ========================================================== */
.treeRoot {
    background-color: var(--treeBG);
    color: var(--treeFG);
    border: 1px solid var(--borderColor);
    border-radius: 0.5em;
    padding-inline: 0.3rem;
    padding-block-end: 0.3rem;

    &.treeHasToolbar {
        & .nodeDepth_0 {
            margin: 0.5em;
        }
        &.treeSearch_off .treeScroll {
            overflow: auto;
        }
        &.treeSearch_on .treeScroll {
            max-height: 600px;
            overflow: auto;
        }
    }
}

.nodeRoot {
    display: inline-block;

    & > .nodeLblFra {
        border-inline-start: 0;

        & > .nodeLbl {
            border-width: 2px;
        }
    }
}

.nodeChildren {
    margin-inline-start: 5px;
}
.nodeChildren_hide {
    & > .nodeLblFra > .nodeLbl {
       border-block-end-width: 5px;
    }
    & > div > .nodeLbl {
        border-block-end: 4px solid var(--treeCardBD);
    }
    & > .nodeChildren {
        opacity: 0;
        height: 0 !important;
        transition-property: opacity, display;
        transition-duration: 0.1s;

        & > .nodeChild {
            display: none;
        }
    }
}
.nodeChildren_show {
    & > .nodeChildren {
        opacity: 1;
        height: auto;
        transition-property: opacity, display;
        transition-duration: 1.5s;
    }
}
.nodeChild {
    margin-inline-start: 10px;
}
.nodeChild_pre {
    border-inline-start: 1px solid color-mix(in oklab, var(--treeCardBD), transparent 10%);
}
.nodeLbl,
.nodeRef {
    padding: 5px;
    display: inline-block;
    margin-block-start: 5px;
    background-color: var(--treeCardBG);
    max-width: 300px;
    border-radius: 0.2em;
    position: relative;
}
.nodeLbl {
    .nodeChildren_1 & {
        min-width: 60px;
    }
    .nodeChildren_2 & {
        min-width: 120px;
    }
    .nodeChildren_3 & {
        min-width: 180px;
    }
    .nodeChildren_4 & {
        min-width: 240px;
    }
    .nodeChildren_5 & {
        min-width: 300px;
    }
    .nodeChildren_6 & {
        min-width: 360px;
    }
    .nodeChildren_7 & {
        min-width: 420px;
    }
    .nodeChildren_8 & {
        min-width: 480px;
    }
    .nodeChildren_9 & {
        min-width: 540px;
    }
}
.nodeRef {
    border-color: color-mix(in oklab, var(--treeCardBD), transparent 10%);
}
.nodeDesc {
    font-size: 0.8em;
}
.nodeLead {
    display: inline-block;
    height: 18px;
    border-inline-start: 1px solid color-mix(in oklab, var(--treeCardBD), transparent 10%);
    border-block-end: 1px solid color-mix(in oklab, var(--treeCardBD), transparent 10%);
    border-end-start-radius: 10px;
    vertical-align: top;
    border-radius: 0 0 0 0.5em;
}
.nodeLeadSpacer {
    display: inline-block;
    width: 12px;
    height: 18px;
}
.nodeLblFra,
.nodeRefFra {
    display: inline-block;
}
span.nodeTi,
a.nodeTi {
    font-family: var(--titleStyle), sans-serif;
    color: var(--titleColor);
}
div.nodeTi:has(a.nodeMoreDesc_a) > .nodeTi {
    padding-inline-end: 1.5em;
}
a.nodeMoreDesc_a {
    color: var(--invColor);
    background-color: var(--accentColor);
    text-decoration: none;
    border-radius: 0 0.2em 0 0.8em;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 0.9em;
    position: absolute;
    top: 0;
    right: 0;

    &:hover {
        background-color: color-mix(in oklab, var(--accentColor), #000 50%);
    }
    &::before {
        font-family: "fontelloConcept";
        content: "\E800";
        position: relative;
        top: 3px;
        right: 3px;
    }
    &.tt_act {
        color: color-mix(in oklab, var(--accentColor), #000 70%);
        background-color: transparent;
    }
    & span {
        display: none;
    }
}

/* Node types */
.nodeType_imp {
    background-color: var(--emphasisBG);
    color: var(--emphasisFG);

    & span.nodeTi,
    & a.nodeTi {
        color: var(--emphasisFG);
    }
}
.nodeLblCo {
    display: grid;
    grid-template-areas:
        "icon title"
        "icon desc";
    column-gap: 0.3em;

    &::before {
        display: inline-block;
        font-family: "fontelloConcept";
        font-size: 1.2em;
        grid-area: icon;
        align-self: center;
    }
    .nodeType_normal & {
        display: block;

        &::before {
            display: none;
        }
    }
    .nodeType_imp & {
        & span.nodeTi,
        & .nodeType_imp a.nodeTi {
            color: var(--emphasisTitle);
        }
        &::before {
            content: "\E831";
        }
    }
    .nodeType_info &::before {
        content: "\E832";
        color: royalblue;
    }
    .nodeType_quest &::before {
        content: "\E839";
    }
    /* Directions */
    .nodeType_back &::before {
        content: "\E82F";
    }
    .nodeType_forward &::before {
        content: "\E830";
    }
    .nodeType_down &::before {
        content: "\E835";
    }
    .nodeType_up &::before {
        content: "\E83A";
    }
    /* Contraires */
    .nodeType_nok &::before {
        content: "\E804";
        color: red;
    }
    .nodeType_ok &::before {
        content: "\E834";
        color: green;
    }
    .nodeType_tfc-go &::before {
        content: "\E838";
        color: green;
    }
    .nodeType_tfc-stop &::before {
        content: "\E83B";
        color: red;
    }
    .nodeType_add &::before {
        content: "\E842";
    }
    .nodeType_delete &::before {
        content: "\E843";
    }
    /* Personnages */
    .nodeType_pers-female &::before {
        content: "\E83D";
    }
    .nodeType_pers-group &::before {
        content: "\E836";
    }
    .nodeType_pers-male &::before {
        content: "\E840";
    }
    /* Smileys */
    .nodeType_sm-happy &::before {
        content: "\E83F";
        color: orange;
    }
    .nodeType_sm-sad &::before {
        content: "\E837";
        color: royalblue;
    }
    /* Numéros */
    .nodeType_0 &::before {
        content: "\E83E";
    }
    .nodeType_1 &::before {
        content: "\E841";
    }
    .nodeType_2 &::before {
        content: "\E828";
    }
    .nodeType_3 &::before {
        content: "\E827";
    }
    .nodeType_4 &::before {
        content: "\E829";
    }
    .nodeType_5 &::before {
        content: "\E82A";
    }
    .nodeType_6 &::before {
        content: "\E82B";
    }
    .nodeType_7 &::before {
        content: "\E82E";
    }
    .nodeType_8 &::before {
        content: "\E82D";
    }
    .nodeType_9 &::before {
        content: "\E82C";
    }
    /* Étiquettes */
    .nodeType_tag-blue &::before {
        content: "\E83C";
        color: blue;
    }
    .nodeType_tag-green &::before {
        content: "\E83C";
        color: green;
    }
    .nodeType_tag-orange &::before {
        content: "\E83C";
        color: orange;
    }
    .nodeType_tag-pink &::before {
        content: "\E83C";
        color: pink;
    }
    .nodeType_tag-red &::before {
        content: "\E83C";
        color: red;
    }
    .nodeType_tag-yellow &::before {
        content: "\E83C";
        color: yellow;
    }
    /* Extras */
    .nodeType_date &::before {
        content: "\E81F";
    }
    .nodeType_flag &::before {
        content: "\E84F";
    }
    .nodeType_forbn &::before {
        content: "\E845";
    }
    .nodeType_home &::before {
        content: "\E846";
    }
    .nodeType_idea &::before {
        content: "\E847";
    }
    .nodeType_key &::before {
        content: "\E848";
    }
    .nodeType_star &::before {
        content: "\E84B";
    }
    .nodeType_stop &::before {
        content: "\E84A";
    }
    .nodeType_wait &::before {
        content: "\E84C";
    }
    .nodeType_pencil &::before {
        content: "\E849";
    }
    .nodeType_puzzle &::before {
        content: "\E84D";
    }
    .nodeType_wand &::before {
        content: "\E850";
    }
    .nodeType_zoom &::before {
        content: "\E824";
    }
    .nodeType_attach &::before {
        content: "\E844";
    }
    .nodeType_cog &::before {
        content: "\E84E";
    }
}

div.nodeTi {
    grid-area: title;
    display: flex;
    align-items: center;
    column-gap: 0.3em;
}
div.nodeDesc {
    grid-area: desc;
}
.treeSearch_mach > .nodeLblFra > .nodeLbl {
    border: 1px solid var(--accentColor);

    & .nodeTi {
        background-color: var(--schCurrentBG);
    }
}

.treeSearch_cur > .nodeLblFra > .nodeLbl {
    animation: glow 0.5s ease-in-out 0s 1 alternate;
    background-color: var(--accentColorLight);
}

@keyframes glow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

/* TOOLBAR */
.treeToolbar {
    padding: 0;
    height: 30px;
    padding-inline: 0.2em;
    z-index: 2;
    position: relative;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    column-gap: 0.2em;

    & form.treeSearchForm {
        flex: 1;
        display: flex;
        align-items: baseline;
        column-gap: 0.2em;
    }
    & span.treeSearchLabel {
        display: inline-block;
        margin-inline-end: 5px;
        font-size: 0.9em;
    }
    & span.treeSearchResultLabel {
        display: inline-block;
        margin-inline-start: 5px;
        color: var(--contentFG);
    }
    & input.treeSearchInput {
        border: 1px solid var(--borderColor);
        height: 22px;
        border-radius: 0.2em;
        margin: 0;
        padding-block: 0;
        padding-inline: 0.2em;
    }
    .treeSearch_off & form.treeSearchForm {
        display: none;
    }
    & a {
        background-color: var(--invColor);
        color: var(--accentColor);
        text-decoration: none;
        border-radius: 50em;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9em;

        &:hover {
            filter: brightness(0.8);
        }

        &::before {
            font-family: "fontello";
        }
        &.treeBtnSearch::before {
            content: "\E824";
        }
        &.treeBtnOpenAll::before {
            content: "\E82C";
        }
        &.treeBtnCloseAll::before {
            content: "\E82B";
        }
        &.treeBtnPrv::before {
            content: "\E833";
        }
        &.treeBtnNxt::before {
            content: "\EA34";
        }
        & span {
            display: none;
        }
    }
    .treeSearch_on & a.treeBtnSearch {
        color: var(--invColor);
        background-color: var(--accentColor);
        border: 1px solid var(--invColor);
    }
    & span.treeSep {
        display: none;
    }
    & div.treeSearch_noact a.treeBtnNxt,
    & div.treeSearch_noact a.treeBtnPrv {
        display: none;
    }
}

.treeStatusbar {
    background-color: var(--accentColor);
    border-block-start: 1px solid var(--borderColor);
    padding: 0;
    text-align: left;
    padding: 3px;
    z-index: 2;
    font-size: 0.75em;
    position: relative;
    display: none;
    color: var(--invColor);

    .treeSearch_on & {
        display: block;
    }
}
/* ---------- search, optSearch ---------- */
.searchResults {
	.schDisplay_off &,
	.schDisplayList_off &,
	:not(.schDisplay_on) & {
		display: none;
	}
	.schDisplay_on & {
		display: block;
	}
	& a.schPgeBtn,
	& a.mnu_lnk {
		margin: 2px;
		display: flex;
		justify-content:space-between;

		&:hover {
			color: color-mix(in oklab, var(--accentColor), #000 50%);
		}
	}
	& a.mnu_tgle_o,
	& a.mnu_tgle_c {
		position: absolute;
		left: -22px;
		top: 0;
		width: 7px;
		height: 7px;
		font-family: "fontello";
		font-size: 1rem;

		&:hover {
			text-decoration: none;
		}
		& span {
			display: none;
		}
	}
	& div.mnu_sch_yes a.mnu_tgle_c::before {
		content:"\e800";
	}
	& div.mnu_sch_yes a.mnu_tgle_o::before {
		content:"\e801";
	}
}

.searchFra {
	order: 3;
	position: relative;
	width: fit-content;

	@media (max-width: 800px) {
		width: auto;
		flex: 100%;

		.menuOpen & {
			display: block;
			margin-block: 0.5em;
		}
	}
}

.schCmds {
	position: relative;
	width: fit-content;

	@media (max-width: 800px) {
		width: auto;
	}
}

form.schForm,
#optSearchForm{
	display: flex;
	align-items: center;
	width: fit-content;
	background-color: var(--schBG);
	border-radius: 0.2em;
	border: 0;

	@media (max-width: 800px) {
		width: auto;
	}
}

input.searchText,
input.schInput {
	font-size: 0.9em;
	padding-inline: 0.3em;
	font-family: var(--textStyle), sans-serif;
	border: 0;
	background-color: transparent;
	flex: 1;
}

.schLabel {
	position: absolute;
	left: -9999px;
}

input.searchSubmit,
input.schBtnLaunch {
	background: transparent url("img/co/search.svg") no-repeat center;
	background-size: contain;
	width: 1.3rem;
	height: 1.3rem;
	color: transparent;
	cursor: pointer;
	box-sizing: border-box;
	border: 0;
	padding: 0;
	margin: 0.2em;
}

div.schNoRes {
	text-align: center;
	font-size: 1.063em;
	margin-block-start: 18px;
}

.schPgeBk {
	li& {
		position: relative;
	}
	& span.schPgeRank {
		&::before {
			font-family: "fontello";
			font-size: 1.3em;
			color: var(--accentColor);
			display: inline-block;
		}
		& > span {
			display: none;
		}
	}
}

span.schPgeRank::before {
	.schPgeRank_1 & {content:"\E804";}
	.schPgeRank_2 & {content:"\E804" "\E804";}
	.schPgeRank_3 & {content:"\E804" "\E804" "\E804";}
	.schPgeRank_4 & {content:"\E804" "\E804" "\E804" "\E804";}
	.schPgeRank_5 & {content:"\E804" "\E804" "\E804" "\E804" "\E804";}
	.schPgeRank_6 & {content:"\E804" "\E804" "\E804" "\E804" "\E804" "\E804";}
	.schPgeRank_7 & {content:"\E804" "\E804" "\E804" "\E804" "\E804" "\E804" "\E804";}
	.schPgeRank_8 & {content:"\E804" "\E804" "\E804" "\E804" "\E804" "\E804" "\E804" "\E804";}
	.schPgeRank_9 & {content:"\E804" "\E804" "\E804" "\E804" "\E804" "\E804" "\E804" "\E804" "\E804";}
}

.schPropose {
	position: absolute;
	left: 0;
	right: 0;
	border-radius: 0.5em;
	background-color: var(--schBG);
	z-index: 100;
	font-size: 0.9em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	overflow: hidden;

	& a:hover {
		text-decoration: none;
	}
}

.schBtnPropose {
	display: block;
	text-decoration: none;
	padding: 0.4em;
	border-radius: 0.5em;

	&:hover,
	&:active,
	&:focus {
		background-color: color-mix(in oklab, var(--schBG), #000 5%);
	}
	&:focus {
		border: 1px solid #2761C4;
	}
}

.schProposeExceeded {
	display: block;
	color: var(--contentFG);
	font-style: italic;
	padding: 2px 3px;
}

div.schProp_no {
	display: none;
}

.schResFrame {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100%;
	max-width: 700px;
	background-color: var(--contentBG);
	border-inline: 1px solid var(--accentColor);
	border-block-start: 1px solid var(--accentColor);
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	flex-wrap: wrap;
	transition: all 0.4s ease-out;
	z-index: 91;
}

.schResList {
	display: none;
	flex: 100%;
	order: 10;

	.schDisplayList_on & {
		display: block;
	}
}

.schResListSrl {
	overflow: auto;
	padding-block: 8px;
	padding-inline: 10px;
	max-height: 200px;
	background-color: var(--schBG);
}

a.schParentBtn {
	text-decoration: none;
}

a.schBtnTgle,
a.schBtnReset {
	align-self: center;
	z-index: 1;
	text-decoration: none;
	padding: 5px;
	display: flex;
	align-items: center;
	column-gap: 5px;
	border: 1px solid;
	border-radius: 5px;
	margin: 8px;

	&::before {
		font-family:"fontello";
	}
	&:hover {
		color: color-mix(in oklab, var(--accentColor), #000 50%);
	}
}

.schBtnTgle {
	.schDisplayList_on &::before {
		content:"\F103";
	}
	.schDisplayList_off &::before {
		content:"\F102";
	}
}

.schBtnReset {
	&::before{
		content:"\E814";
	}
	& span {
		display: none;
	}
}

.schHitBox,
.schResBox,
.schPageBox {
	flex: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 5px;
	border-block-end: 1px solid var(--borderColor);
	padding-block: 5px;
	padding-inline: 8px;
	text-align: center;
}

.schHitBox {
	border-block-start: 1px solid var(--borderColor);

	.schDisplay_none & {
		display: none;
	}
}

.schPageBox {
	margin-inline-start: 0;
	z-index: 0;
	column-gap: 10px;
}

.schDisplay_none .schResBox {
	text-align: center;
	margin-block:20px 6px;
	margin-inline:200px;
}

.schResCnt,
.schHitCnt {
	order:3;
}
.schResCnt {
	text-align: left;

	&:empty,
	.schDisplay_none &,
	.schDisplay_one & {
		display: none;
	}
}

.schBtnNxt,
.schBtnPrv,
.schBtnPrvHit,
.schBtnNxtHit {
	flex: 1;
	z-index: 1;
	padding: 3px;

	&:hover {
		color: color-mix(in oklab, var(--accentColor), #000 50%);
		text-decoration: none;
	}
	& span,
	.schDisplay_none & {
		display: none;
	}
}
.schBtnPrvHit,
.schBtnPrv {
	order: 1;
	text-align: left;

	&::before {
		font-family: "fontello";
		content:"\E833";
	}
}
.schBtnNxtHit,
.schBtnNxt {
	order: 4;
	text-align: right;

	&::before {
		font-family: "fontello";
		content:"\EA34";
	}
}

.schHitLbl {
	order: 2;
}

.schResLbl {
	order: 2;
}

.schBtnAct_no,
.schBtnHitAct_no {
	visibility: hidden;
}

.schDisplay_one .schBtnNxt,
.schDisplay_one .schBtnPrv {
	display: none;
}

.schHitFrame {
	position: absolute;
	bottom: 8px;
	right: 40px;
	left: 40px;
	height: 20px;
	font-size: 1.2em;
}

li.mnu_sel_yes .schPgeBtn,
div.mnu_sel_yes .mnu_lnk {
	font-weight: bold;
	cursor: default;
	pointer-events: none;

	&:hover {
		color: var(--accentColor);
	}
}

div.mnu_sch_no a.mnu_lnk {
	color: var(--accentColor);
	cursor: default;
}

.schResListSrl {
	& ul {
		margin-block: 0;
		margin-inline: 0;
		list-style: none;
		padding-inline-start: 20px;
		display: flex;
		flex-direction: column;
		gap: 5px;

		&.mnu_root {
			padding: 0;
		}
		&.schParentList {
			list-style-type: none;
		}
		&.schParentList_c {
			display: none;
		}
		&.schParentList_o {
			display: flex;
			flex-direction: column;
			gap: 3px;
			margin-block-end: 0.3em;
		}
		& li {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 5px;

			& a {
				flex: 1;
			}
		}
	}

	& li.mnu_b {
		list-style-type: none;
		margin: 0;
	}
}

a.schParent_tgle_c,
a.schParent_tgle_o {
	position: absolute;
	margin-inline-start: -16px;
	top: 2px;
	width: 7px;
	height: 7px;
	display: inline-block;
	font-family: "fontello";
	font-size: 1rem;

	&:hover {
		text-decoration: none;
		color: var(--accentColor);
	}
	& span {
		display: none;
	}
}

a.schParent_tgle_c::before {
	content:"\e800";
}

a.schParent_tgle_o::before {
	content:"\e801";
}

.schHit {
	background-color: var(--schBG);
	color: var(--schFG);
	border-radius: 3px;
}

.schHit_current {
	background-color: var(--schCurrentBG);
	color: var(--schFG);
	border-radius: 3px;
}

.schTerm {
	font-weight: bold;

	& em {
		font-weight: normal;
	}
}

.schDisplay_on #menu ul.mnu_root .mnu_sch_no > a{
	&:hover {
		text-decoration: none;
	}
	&.mnu_lnk {
		color: var(--accentColor);
		cursor: default;
	}
}

.tplSchBox {
	position: relative;
	z-index: 2;
}