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

/* ============= General Page styles ============= */
html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--textStyle), Helvetica, sans-serif;
	font-size: var(--fontSize);
	color: var(--contentFG);
	background-color: var(--rootBG);
	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;
	}
}

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

table {
	border-collapse: collapse;

	@media (max-width: 800px) {
	    &[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);
    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: 5px;

	& 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;
        }
    }
    @media (max-width: 800px) {
        & .tplWaiNav {
            position: fixed;
            top: 0.5em;
            right: 0.5em;
            line-height: 2lh;

            & span {
                display: none;
            }
            & a {
                opacity: 1;

                &::before {
                    font-family: "fontello";
                    content: "\E823";
                    font-size: 2em;
                }
                &.selected::before {
                    font-family: "fontello";
                    content: "\2716";
                }
            }
        }
    }
}

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

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

    	@media (max-width: 800px) {
    	    flex-direction: column;
            align-items: flex-start;
            padding: 0.5em;
    	}
    }
    & .tplTitle {
        font-size: clamp(1.125rem, 0.17vw + 1.093rem, 1.375rem);
        font-family: var(--titleStyle);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0;
        max-width: 40vw;

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

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

/* ILLUS HOME	*/
.illus {
	position: fixed;
	z-index: -1;
	overflow: hidden;
	width: 100%;

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

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

/* NAVIGATION */
#navigation {
	flex: 1;

	@media (max-width: 800px) {
	    display: none;
        align-self: flex-start;

        &:target {
            display: block;
        }
	}
}

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

ul.tileLinks {
    display: flex;
    justify-content: flex-end;
    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 {
        &::before {
            font-family: "fontello";
            content : "\E822";
            font-size: 110%;
        }
        & span {
            position: absolute;
            left: -9999px;
        }
        .home & {
            color: var(--headerFG);
    	    border-block-end: 3px solid var(--accentColor);
        }
    }
    & .tileLink {
        font-family: var(--titleStyle);
        display: inline-block;
        position: relative;

        &:hover {
            opacity: 0.8;
        }
    	& img {
    	    display: none;
    	}
    }

    @media (max-width: 800px) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        column-gap: 0.5em;
        row-gap: 0.2em;
        margin-block: 0.5em;
        padding: 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: 800px) {
        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);

    & > .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: 800px) {
                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: 800px) {
            display: contents;
        }
    }
}

/* TILE BLOCKS */
.bkTileSet {
    margin-inline: auto;
    width: -webkit-fill-available;
    width: -moz-available;
    width: -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;
	border-radius: 1.5rem;
	box-shadow: 0px 5px 10px -1px rgba(0,0,0,0.25);
	transition: all 0.1s ease-out;

    &:hover{
    	filter: brightness(0.9);
    	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
    	top: 2px;
    }
    @media (max-width: 800px) {
        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;
            width: -moz-available;
            width: fill-available;
            height: -webkit-fill-available;
            height: -moz-available;
            height: fill-available;
            object-fit: cover;
            filter: brightness(0.4);
        }
    }
    & .tileTitle,
    & .tileAbstract {
    	margin-block: 0.2rem;
    	margin-inline: 1rem;
        width: -webkit-fill-available;
        width: -moz-available;
        width: -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;
    width: -moz-available;
    width: -fill-available;
	padding: 0;
	background-color: var(--footerBG);
	color: var(--footerFG);

    & img {
    	vertical-align: middle;
    }
}

#extras {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	padding-block: 1em;
}

.permMargin {
	display: flex;
	flex-flow: wrap;
	justify-content: center;

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

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

div.margin {
	padding: 5px;
	max-width: 30rem;
}

.margin_ti {
	font-size: 110%;
	margin: 0;
	margin-block-end: 0.5em;
	color: var(--footerFG);
}

.margin_co {
	font-size: 90%;
	overflow: auto;

    & p {
        text-align: left;
    }
    & .event .tt_a {
        display: block;
    }
}

.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 %);
        }
    }
}

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

	.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;
    width: -moz-available;
    width: -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;
            width: -moz-available;
            width: -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);
        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: 0px;
    }
}

.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: 100% !important;
	height: auto;
}
.binImgInline {
	vertical-align: middle;
}

.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_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: 800px) {
        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;

    .hasSecMenu & {
    	top: 89px;
    }
    & img {
    	transition: left 1s cubic-bezier(0, 0, 0.27, 1);
    }
    .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%;
    }
}

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: 800px) {
        padding: 0px;
        margin-inline-start: 1px !important;
        margin-inline-end: 1px !important;
    }
}

.txt_anim_ex iframe {
    @media (max-width: 800px) {
        max-width: -webkit-fill-available;
        max-width: -moz-available;
        max-width: -fill-available;
    }
}
/* ---------- 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);
    border: 0;
    background-color: transparent;
    flex: 1;
}

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

input.searchSubmit,
input.schBtnLaunch {
    background: url("img/co/search.svg") center no-repeat;
    background-color: transparent;
    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;

    &:hover,
    &:active,
    &:focus {
        background-color: color-mix(in oklab, var(--schBG), #000 5%);
    }
}

.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;
}
/* === ConceptTree ========================================================== */
.treeRoot {
    background-color: var(--treeBG);
    color: var(--treeFG);
    border: 1px solid var(--borderColor);
    border-radius: 0.5em;

    &.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: 8px 10px;
    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-block-end-left-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);
    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;
    }
}
/* ---------- 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;
    }
}

.galFra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    & img {
        padding: 5px;
    }
}

.galMiniFra {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;

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

.scImgSep {
    display: none;
}

a.galPvLnk:hover {
    filter: brightness(0.9);
}

.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);
    font-family: var(--titleStyle);
    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;
}

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-top: 0.3em;
        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-top: 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;
    }
}