:root {
	--navHeight: 5rem;
}


#Main-TOC{
	display: flex;
}
#Main-TOC > #TOC{
	/* flex: 1 0 auto; */
	/* flex: 1 0 max-content; */
	/* flex: 1 0 min-content; */
	flex: 1 0 30ch;
}
#Main-TOC > main {
	flex: 1 1 100%;
}



#TOC{
	max-height: 100vh;
	/* height: calc(100vh - var(--navHeight));
	height: calc(100svh - var(--navHeight)); */
	height: 100svh;
	position: sticky;
	/* top: var(--navHeight); */
	top:0;
	padding-right: 1rem;

	--TOCindentBase: 1.0rem;
	--TOCindentStep: 1.0rem;

}
#TOC {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}



#TOC ul, #TOC ul li {
	display: contents; /* flatten the list! */
}

#TOC a {
	padding: 0.25rem;
	flex: 1 1 auto;	/* fill the space */
	align-content: center;
	/* outline: 1px solid magenta; */
}

#TOC a.L0{ padding-left: calc( var(--TOCindentBase) + ( var(--TOCindentStep) * 0) ); }
#TOC a.L1{ padding-left: calc( var(--TOCindentBase) + ( var(--TOCindentStep) * 1) ); }
#TOC a.L2{ padding-left: calc( var(--TOCindentBase) + ( var(--TOCindentStep) * 2) ); }
#TOC a.L3{ padding-left: calc( var(--TOCindentBase) + ( var(--TOCindentStep) * 3) ); }







section {
	/* min-height: calc(100vh - var(--navHeight));
	min-height: calc(100svh - var(--navHeight)); */
	min-height: 100svh;
	padding-bottom: calc(var(--navHeight) * 2);
}







layout-row:has(.statBlock){
	gap: 2rem;
} /* un-nested for PrinceXML */

	/* & layout-col:has(.statBlock) { */
	layout-row:has(.statBlock) layout-col:has(.statBlock) {
		padding-left: 2rem;
		border-left: 1px solid #CCC;
	}
/* } */

@media(max-width: 75rem){
	layout-row:has(.statBlock){
		flex-direction: column;
	} /* un-nested for PrinceXML */
		/* & layout-col:has(.statBlock) { */
		layout-row:has(.statBlock) layout-col:has(.statBlock) {
			padding-left: unset;
			border-left: none;
		}
	/* } */
}
















header { 
	min-height: calc(100vh - var(--navHeight)); 
	min-height: calc(100svh - var(--navHeight)); 
}

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

nav.navBar a {
	padding: 1rem;
}

nav.navBar{ padding: 0 1rem; }

nav.navBar ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* justify-content: center; */
	justify-content: flex-start;
}
nav.navBar li { display: contents; }




nav.navBar a { 
	height: var(--navHeight);
	align-content: center;
}




@media(max-width: 960px){
	:root {
		--navHeight: 0px;
	}
	nav.navBar ul {
		/* hyphens: auto; */
		flex-direction: column;
		display: none;

	}
}





header{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5vh;
}

#CoverTitles { display: contents; }




section.introPage{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* gap: 5vh; */
}







/* Main contenet area */
main {
	padding: 2rem;
}


/* Sections are used for document chapter structure. */

section{
	padding-bottom: 8rem;
}

/* Adticles are content wrappers. */

article{}

article + article{
	margin-top: 4rem;
}





nav.navBar{
	/* position: sticky; */
	top: 0;
	z-index: 9;
}


/* footer */
footer{
	min-height: 25vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
}



@media(max-width: 720px){
	#Main-TOC{
		display: flex;
		flex-direction: column;
	}
	#TOC{ 
		/* display: none;  */
		position: relative;
	}
}



#Organigramme img{
	/* max-width: 75rem; */
	max-height: min(800px, 80vh);
	margin-bottom: 2rem;
}


nav img.icon{
	display: inline; height: 18px;
}