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

/* ============= General Page styles ============= */
html,
body {
	margin: 0;
	height:100dvh;
	outline: 0;
}

body {
    font-family: var(--textStyle), sans-serif;
    font-size: var(--fontSize);
	display:flex;
	flex-direction:column;
    color: var(--contentFG);
    background-color: var(--contentBG);
}

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

    &:hover {
        color: var(--accentColorDark);

        & > span {
            text-decoration: underline;
        }
    }
    &.txt_doc_ul::before,
    &.txt_ref_ul.sub_a::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.sub_a::before {
        content: "\E82A";
    }
    & img {
        border-width: 0;
    }
}

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

p {
    text-align: left;
    margin: 2px 0 5px 0;
    line-height: 1.3em;
}

table {
    border-collapse: collapse;
    width: 100%;
}

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-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    width: auto;
    z-index: 90;
    font-size: 0.8em;
    top: 5px;

    @media (max-width: 1100px) {
        display: none;
    }

    & li {
        float: left;
        margin-inline-end: 10px;
    }
    & a {
        opacity: 0;

        &:hover {
            text-decoration: none;
            opacity: 1;
        }
        &:focus {
            opacity: 1;
        }
    }
}

/* ============= template ============= */
div.tplPge{
    width: -moz-available;
    width: -webkit-fill-available;
    width: -fill-available;
	margin: 0;
}
div.tplPgeFra {
	display:flex;
	flex-direction:column;
	min-height:100dvh;
}

#tplMain {
	z-index:9;
	display: flex;
	flex:1;

	@media (max-width: 1100px) {
	    flex-direction:column;
	}

	& > #content > .tplCoFra > section > .bkBase_ti {
	    font-size: clamp(1.75rem, 0.17vw + 1.718rem, 2rem);
	}
}

#menu {
    flex: 1;
    width: -webkit-fill-available;
    width: -moz-available;
    width: -fill-available;
    max-width: var(--menuWidth);
    order: 1;
    cursor: default;
    background-color: var(--menuBG);
    border-radius: var(--menuRadius);
    font-family: var(--titleStyle);
    margin-block-start: 1em;
    border: 1px solid var(--borderColor);

    @media (max-width: 1100px) {
        max-width: initial;
        padding-block: 0.5em;
        border-radius: 0;
        margin: 0;
    }
}

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;

        &: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;
        }

    }
}

#content {
    flex: 3;
    order: 2;
    margin-block: 1em 5em;
    margin-inline: 2em;

    @media (max-width: 1100px) {
        margin: 1em;
    }
}

div.tplCoFra {
    max-width: var(--maxWidth);
    width: -webkit-fill-available;
    width: -moz-available;
    width: -fill-available;
    margin-inline: auto;
}

/* ============= header ============= */
#header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 1em;
    position: sticky;
    top:0;
    background-color: var(--headerBG);
    color: var(--headerFG);
    border-block-end: 1px solid var(--borderColor);
    z-index: 999;
    min-height: 1em;

    &:has(.scCommentToolBar) {
        padding-inline-start: 5em;
    }
    @media (max-width: 1100px) {
        padding: 0.3em;
        align-items: flex-start;
        gap: 0;
        position: relative;
    }
}

h1.tplTitle {
    font-size: clamp(1.125rem, 0.17vw + 1.093rem, 1.375rem);
    font-family: var(--titleStyle);
    margin: 0;

    @media (max-width: 1100px) {
        order: 1;
        flex: 1;
        font-size: 1.25rem;
        align-self: center;
        max-width: initial;
    }
}

a.rootLnk {
    text-decoration: none;
    color: var(--titleColor);

    &:hover {
        color: color-mix(in oklab, var(--titleColor), transparent 40%);
    }
}

/* ============= Category menu ============= */
#navigation {
    flex:1;
    position: relative;
    overflow: hidden;

    @media (max-width: 1100px) {
        max-width: -moz-available;
        max-width: -webkit-fill-available;
        max-width: -fill-available;
        width: 100%;
        flex: 1 100%;
        order: 3;
        padding-block: 0.3em;
    }
    &::before {
        content:'';
        width:0.5em;
        position:absolute;
        left: 0;
        top:0;
        bottom: 0;
        background: linear-gradient(90deg, var(--headerBG) 0%, transparent 100%);
        z-index: 1;
    }
    &::after {
        content:'';
        width:0.5em;
        position:absolute;
        right: 0;
        top:0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, var(--headerBG) 100%);
        z-index: 1;
    }
    @media (max-width: 800px) {
        display: none;

        &::before,
        &::after {
            display: none;
        }
        .menuOpen & {
            display: inline-block;
            order: 4;
            margin-block: 0.5em;

            & ul.outCat {
                flex-direction: column;
                row-gap: 0.5em;
                padding-inline: 0.5em;
            }
        }
    }
}

ul.outCat {
    display: flex;
    column-gap: 1em;
    padding-inline: 1em;
    padding-block: 0;
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    &::-webkit-scrollbar {
        display: none;
    }
    & li {
        white-space: nowrap;
        list-style: none;

        & a[target="_blank"]::after {
            content: "\E81D";
            font-family: "fontello";
            margin-inline-start: 0.2em;
            font-size: 70%;
            vertical-align: super;
        }
    }
    & .outCat_i {
        display: inline-block;
        font-family: var(--titleStyle);
        position: relative;
    }
    & span.outCat_i {
        color: var(--titleColor);
    }
    & li.outCat_sel_yes .outCat_i {
        border-block-end: 3px solid var(--accentColor);
    }
}

/* ============= To hide ============= */
.optHead {
    display: contents;
}

/* ============= Bottom Nav menu ============= */
ul.outNav {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-inline: 0;
    margin-block: 1em 0;
    padding: 0;
    display: flex;
    justify-content: center;
    column-gap: 0.5em;

    & li {
        display: contents;
    }
    & span.outNav_i {
        visibility: hidden;
    }
    & a {
        background-color: var(--accentColor);
        color: var(--invColor);
        padding: 0.4em 0.8em;
        border-radius: 0.5em;
        text-decoration: none;

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

#btnPrv > span > span,
#btnNxt > span > span {
    display: none;
}
#btnPrv::before {
    font-family: "fontello";
    content: "\E820";
    margin-inline-end: 0.2em;
}
#btnNxt:after {
    font-family: "fontello";
    content: "\E821";
    margin-inline-start: 0.2em;
}

/* ============= Top back menu ============= */
#navigation ul.outBk {
    list-style: none;

    & a.outBk_i {
        display: flex;
        align-items: center;
        column-gap: 0.3em;

        &:hover {
            filter: brightness(0.7);
        }
        &::before {
            font-family: "fontello";
            content: "\E820";
        }
    }
}

/* ============= Left menu ============= */
ul.outMnu {
    list-style-type: none;
    padding: 0;
    margin: 0.5em;

    & ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;

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

            & .outMnuLbl {
                padding-block: 0.2em;
            }
        }
    }
    & ul.outMnu_sub {
        margin-inline-start: 0.55em;
        padding-inline-start: 0.5em;
        border-inline-start: 1px solid var(--accentColor);

        & a.outMnu_i {
            display: block;
        }
        & .outMnu_b > a.outMnu_i {
            margin-inline-start: 0!important;
        }
        & ul.outMnu_sub {
            & a.outMnu_i {
                display: block;
            }
            & ul.outMnu_sub {
                & a.outMnu_i {
                    display: block;
                }
            }
        }
    }
    & li.outMnu_b {
        list-style-type: none;

        & .outMnu_i {
            padding-inline-start: 5px;
        }
    }
    & a.outMnu_tgle_o,
    & a.outMnu_tgle_c {
        font-family: "fontello";
        color:var(--accentColor);
        font-size: 1.2em;
        text-decoration: none;

        &:hover {
            color: color-mix(in oklab, var(--accentColor), #000 50%);
        }
        & span {
            display: none;
        }
    }
    & a.outMnu_tgle_o::before {
        content:"\e801";
    }
    & a.outMnu_tgle_c::before {
        content:"\E802";
    }
    & li.outMnu_l {
        & .outMnu_i {
            margin-inline-start: 1.2em;
            display: block;
        }
        &.outMnu_sel_yes .outMnu_i::after {
            content: "";
            vertical-align: middle;
            display: inline-block;
            height: 4px;
            width: 25px;
            background-color: var(--accentColor);
            margin-inline-start: 0.3em;
        }
    }
    & li.outMnu_sel_yes {
        color: var(--titleColor);

       & li.outMnu_sel_yes>div>a.outMnu_tgle_c,
       & li.outMnu_sel_yes>div>a.outMnu_tgle_o {
           color:var(--accentColor);
       }
    }
}

ul.outMnuOneRoot {
    list-style-type: none;
    padding: 0;
}

div.outMnu_typ_folder,
div.outMnu_typ_section {
    display: flex;
}

ul.mnu_root {
    & ul.outMnu_sub {
        & ul.outMnu_sub {
            margin-inline-start: 0.55em;
            padding-inline-start: 0.5em;
            border-inline-start: 1px solid var(--accentColor);
        }
    }
}

li.outPre ul.outMnu_sub .outMnu_i {
    font-style: normal;
}

/* ---------- Content ---------- */
.noscript {
    color: #737373;

    #navigation & {
        color: white;
    }
}

/* MARGIN */
#extras {
    flex: 1;
    width: -webkit-fill-available;
    width: -moz-available;
    width: -fill-available;
    max-width: var(--asideWidth);
    order: 3;
    background-color: var(--asideBG);
    border-radius: var(--asideRadius);
    margin-block-start: 1em;
    border: 1px solid var(--borderColor);

    @media (max-width: 1100px) {
		border-radius: 0;
		max-width: initial;
		margin: 0;
    }

    & > .margin,
    & > .noIndex,
    & > .permMargin {
        margin: 1em;
        border-block-end: 1px solid var(--borderColor);

        & .margin_ti {
            font-size: 1.15em;
            margin-block-start: 0;
        }
    }
    & .event_ti {
    	font-size: 1em;
    }
}

div.margin_co {
    font-size: 0.9em;
    overflow: auto;

    & p {
        text-align: left;
    }
    & .event .tt_a {
        display: block;
    }
    & .binCap,
    & .webCap {
        margin: 2px 0 3px 0;
    }
}

.margin .txt_anim_ex {
    margin: -10px -10px -10px 0;
	max-width:210px;

	@media (max-width: 1100px) {
	    max-width:100% !important;
	}
}


/* FOOTER */
#footer {
    flex: 0 0 auto;

    & img {
        vertical-align: middle;
    }
}

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

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

    & .binCap_ti {
        font-style: italic;
    }
}

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

    & .webCap_ti {
        font-style: italic;
    }
    & iframe {
        max-width: -webkit-fill-available;
        max-width: -moz-available;
        max-width: -fill-available;
    }
}

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

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

/* info tt anc */
.txt_def_act,
.txt_doc_act,
.txt_ref_act {
    color: #ffffff;
    background-color: var(--accentColorLight);

    &:hover {
        color: white;
    }
}

/* External links */
.txt_url_ul::after,
div.docUrl a::after {
    content: "\E81D";
    font-family: "fontello";
    margin-inline-start: 0.2em;
    font-size: 70%;
    vertical-align: super;
}

/* Event lists */
.evtList {
    padding: 0;
    list-style-type: none;

    & .evtListEvt {
        margin-block-end: 0.5em;
    }
}

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

*:hover>.anchor, .anchor:focus {
    visibility: visible;
}

.notification {
	position: fixed;
	display: flex;
	justify-content: center;
	margin-block-start: 1em;
	width: 100%;
	z-index: 2000;

	& > div {
		width: fit-content;
    	background: var(--contentBG);
    	padding: 1em;
    	border: 1px solid var(--borderColor);
    	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	}
}

/* Balises pédagogiques */
.margin_co {
    & .bkBase_ti {
        font-weight: bold;
        color: var(--accentColor);
    }
    & .bkBase .bkBase_ti {
        border-block-end: none;
    }
}

div.bkBase {
    margin-block: 1em;
}
.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";}

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

    & a {
        color: var(--emphasisFG);

        &:hover {
            text-decoration: none;
            color: color-mix(in oklab, var(--emphasisFG), transparent 40%);
        }
        & > span {
            text-decoration: underline;
        }
    }

    & .bkBase_ti {
        color: var(--emphasisTitle);
        margin-block: 0 0.6em;
    }
}

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

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

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

/* bkTyped */
.bkTyped {
    padding: 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 80%;
        padding-inline-start: 0.1em;
    }
    & .bkBase_closed::after,
    & .bkBase_open::after {
        order: 3;
    }
}

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

    & caption {
        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") no-repeat center center / 100% auto;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-start: 3px;

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

/* ---------- binary files lnks ---------- */
.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;
    }
}

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

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

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

a.ttEvt_act {
    color: var(--invColor);
}

div.ttEvt_ti {
    min-height: 1.1em;
}

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;
}

/* ---------- Options ---------- */
div.optContent {
    margin-block-start: 30px;
    padding-block-start: 10px;
}

/* ---------- search, optSearch ---------- */
input.searchSubmit,
input.schBtnLaunch {
    background-color: var(--accentColorLight);
    border: 2px solid var(--accentColor);
}

/* ============= 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;
}

/* ============= Blog stuff ============= */
.lastPosts {
    margin-block: 1em;
}

.bkPostItem {
    background-color: var(--blogBG);
    padding: 1em;
    margin-block: 1em;
    border-radius: 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.3);

    & > .bkBase_ti {
        flex: 100%;
        order: 2;
        margin: 0;
    }
    & > .bkBase_co {
        display: contents;
    }
}

.bkPost {
    padding: 1em;
    margin-block: 1em;
    border-radius: 0.5em;
    display: flex;
    flex-wrap: wrap;

    & .bkBase {
        order: 3;
        flex: 100%;
    }
    & > .bkBase_ti {
        flex: 100%;
        margin-block-start: 0;
    }
    & .bkInfo .bkBase_ti {
        margin-block-start: 0;
    }
    & .bkBase_co .bkBase_ti {
        margin-block: 0.5em;
        font-size: 1.2em;
    }
    & .postTags {
        order: 5;
        margin-block: 0.5em;
        display: inline-flex;
    }
}

a.postLink {
    width: -webkit-fill-available;
    width: -moz-available;
    width: -fill-available;
    display: block;

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

.postHead {
    color: color-mix(in oklab, var(--contentFG), transparent 20%);
    order: 1;
    font-size: 0.9em;

    & em {
        font-style: normal;
    }
}

.postCo {
    order: 3;
    width: -webkit-fill-available;
    width: -moz-available;
    width: -fill-available;

    & .bkBase_ti {
        margin-block: 0.5em;
        font-size: 1.2em;
    }
    & .bkBase {
        margin: 0.5em 0;
    }
}

.postInfo {
    order: 4;
}

.postTags {
    font-size: 0;
}
.postTag {
    font-size: 1rem;
    font-style: normal;
    margin-inline-end: 0.4em;
}
.tagLink {
    border: 1px solid var(--borderColor);
    color: color-mix(in oklab, var(--contentFG), transparent 20%);
    padding: 0.2em 0.6em;
    border-radius: 50em;

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

ul.tagList {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: 0;

    & > li {
        padding: 0 3px;
        margin: 3px 0;

        &.tagFilter_true {
            background-color: var(--accentColor);
            color: var(--invColor);

            & > a {
                color: var(--invColor);
            }

            & .tagDisplay_false {
                display: none;
            }
        }
        & a {
            display: block;
        }
    }
}

.postShade,
.postShade span {
    display: none;
}
/* ---------- 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;
    text-align: start;
    list-style: none;
    padding-inline-start: 0;

    & img {
        padding-block: 5px;
        padding-inline: 5px;
    }
}

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

a.galPvLnk {
	display: inline-block;

    &:hover img {
        filter: brightness(0.9);
    }
}

.galFra {
    & .galPv {
        position:relative;

        &:hover {
            box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.2);
        }
        &: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: 0px 7px 8px -3px rgba(0,0,0,0.2);
        }
   }
    & a.galPvLnk:hover {
        border-radius:  0.3em .3em 0 0;
        background-color: var(--menuBG);
        opacity: 1;

        & + .imgPvCap {
            display:block;
            background-color: var(--menuBG);
            border-radius: 0 0 0.3em .3em;
            box-shadow: 0px 7px 8px -3px rgba(0,0,0,0.2);
        }
    }
    & .imgPvCap {
    	display:none;
    	text-align: center;
    	position:absolute;
    	width: 100%;
    	z-index:10;
    	padding-block-end:0.2em;
    }
}

.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;

    &.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-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;
    }
}
/* ---------- 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;
}