html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
		}
		
	body, input, select, textarea {
		color: #000000 ;
		font-family: 'Raleway', sans-serif;
		font-size: 12pt ;
		font-weight: normal ;
		line-height: 1.75 ;
	}
	
	h1, h2, h3, h4, h6, summary {
		color: #000000;
		line-height: 1.5;
	}
	
	h1 {
		font-family: 'Kaiti', sans-serif;
		font-size: 10.0em;	
		font-weight: 100;
	}
		
	h2 {
		font-family: Roboto, sans-serif;
		font-size: 3.75em;
		font-weight: 100;
		color : #000000 ;
	}


	h3{
		font-family: Roboto, sans-serif;
		margin-top: 1.0em;
		font-size: 2.75em;
		font-weight: 300;
		color : #000000 ;	
	}
	
	h5{
		font-family: Roboto, sans-serif;
		margin-top: 0.3em;
		font-size: 2.0em;
		font-weight: 500;
		color: #A32711;
		line-height: 1.0em;

	}
	
	summary, h4{
		margin-top: 1.0em;
		font-size: 1.2em;
		font-weight: 600;
		color : #000000 ;	
	}
	
	a {
		text-decoration: none ;
	}	

	*, *:before, *:after {
		box-sizing: inherit;
	}
	
	body {
		background: #f4f1ed;
	}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}
		
	body {
		-webkit-text-size-adjust: none;
	}
	
	.BlocChapitre{
		margin-bottom:3em;
	}
	
	.LigneChapitrePinyin, .LigneChapitreMotàMot, .LigneChapitrePhrase {
		text-align: center;
	}
	
	.ChapitreCompletChinois, .LigneChapitreChinois , .ChapitreCompletPetiteImageChinois {
		font-family: Roboto, sans-serif;
		font-size: 2.0em;		
	}

	.ChapitreCompletChinois, .ChapitreCompletPetiteImageChinois {
		margin-top: -0.5em;
		margin-left: 30px;
	}
	
	.LigneChapitrePhrase + .LigneChapitreChinois {
		margin-top: 1.0em;
	}

	.Occurrences {
		/* font-family: Roboto, sans-serif; */
		font-size: 1.0em;		
	}

	.LigneChapitreChinois a {
		color: #A32711;
	}	
	.Occurrences a {
		color: #A32711;
		font-weight: 600;
	}	
	
	.LienComposition {
		font-family: Roboto, sans-serif;
		font-size: 2.0em;		
		color: #A32711;	
	}
	
	.LigneChapitreChinois a:hover, .LigneChapitreChinois a:active, .Occurrences a:hover, .Occurrences a:active, .LienComposition:hover, .LienComposition:active{
		color: #FFFFFF;
		background: #A32711;
	}	
	
	.ChapitreCompletPinyin {
		margin-top: -0.5em;
		margin-left: 30px;
		color: #A32711;
 		word-spacing : 1.1em;
	}
	
	.LigneChapitrePinyin {
		color: #A32711;
		word-spacing : 1.3em;
	}
	
	.LigneChapitrePhrase {
		color: #A32711;
		font-weight: 600;			
	}
	
	.TexteStructure {
		margin-left: 50px;
	}
	
	.TexteStructure span {
		color : black ;
		font-weight: 600;			
	}

	.TexteStructure span:hover {
		color : white ;
		font-weight: normal;		
		padding-top : 3px ;
		padding-bottom : 3px ;
		background: #A32711;		
	}
	
	.references {
		color : white ;
		text-align: left;
	}

	.references hr {
		margin-left : 1.5em ;
	}

	.references p {
		margin-left : 25px ;
	}
	
	details summary { 
		cursor: pointer;
	}

	details summary:hover { 
		color : #A32711;
	}

	summary::marker {
		content: '\f35a' ' ' ' ';
		font-family: 'Font Awesome\ 5 Free';
		font-weight: 500;
		color : #A32711;
	}

	details[open] summary::marker {
		content: '\f358' ' ' ' ';
	}
	
	#Couvreur span {
		font-weight: 900;
		color : #A32711;
	}	
	
	#Traductions {
		font-weight: 700;
	}
	
	#Traducteurs span{
		font-style: italic;
	}
	
	#Images{
		display: flex ;
		flex-wrap : wrap ;
		flex-direction: raw;		
		flex-basis: max-content;	
        align-items: baseline;
	}
	
	#Images figure {
		text-align: center;
		font-style: italic;
		font-size: smaller;
		/* border: thin silver solid; */
		margin : 10px ;
		padding : 15px ;
		transition: transform .5s;
        -webkit-filter: drop-shadow(4px 4px 4px #BBBBBB);
        filter: drop-shadow(4px 4px 4px #BBBBBB);		
	}
	
	#Images figure:hover {
		-ms-transform: scale(1.3); /* IE 9 */
		-webkit-transform: scale(1.3); /* Safari 3-8 */
		transform: scale(1.3);
	}
	/********************************************************************************************************/
	/* Sidebar */
	/********************************************************************************************************/
	
	#sidebar {
		padding-top: 2.5em ;
		padding-bottom: 2.5em ;
		padding-right: 1.0em ;
		padding-left: 1.0em ;
		/*background: #A32711;*/
		cursor: default;
		height: 100vh;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		position: fixed;
		text-align: center;
		top: 0;
		width: 18em;
		z-index: 10000;
	}
	
	.CarTC {
		background: #A32711;;
	}
	.CarComposantTC {
		background: #163a1e;
	}
	.CarAutres {
		background: #424543;
	}

	#sidebar .inner {
		margin : 0em ;
	}
		
	#sidebar hr, .navbar hr {
		width : 40% ;
	}
	
	#sidebar nav a:before, #sidebar nav a:after {
		border-radius: 0.2em;
		bottom: 0;
		content: '';
		height: 0.2em;
		position: absolute;
		right: 0;
		width: 100%;
	}

	#sidebar nav a:before {
		background: #3c2c62;
	}

	#sidebar nav a:after {
		background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91);
		background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91);
		background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91);
		background-image: linear-gradient(to right, #5e42a6, #b74e91);
		-moz-transition: max-width 0.2s ease;
		-webkit-transition: max-width 0.2s ease;
		-ms-transition: max-width 0.2s ease;
		transition: max-width 0.2s ease;
		max-width: 0;
	}

	#sidebar nav a:hover {
		color: rgba(255, 255, 255, 0.55);
	}

	#sidebar nav a.active {
		color: #ffffff;
	}

	#sidebar nav a.active:after {
		max-width: 100%;
	}

	/********************************************************************************************************/
	/* Navbar */
	/********************************************************************************************************/

	.navbar {
	  position: fixed;
	  width: 100%;
	  background: transparent;
	  color: #000;
	  height: 50px;
	  z-index: 12;
	}

	.navbar-container {
	  display: none;
	  height: 64px;
	}

	.navbar input[type="checkbox"], .navbar .hamburger-lines {
		display: none;
	}	
	
	/********************************************************************************************************/
	/* Body */
	/********************************************************************************************************/

	body.is-preload #sidebar > .inner {
		opacity: 0;
	}

	body.is-preload #sidebar nav ul li {
		-moz-transform: translateY(2em);
		-webkit-transform: translateY(2em);
		-ms-transform: translateY(2em);
		transform: translateY(2em);
		opacity: 0;
	}
	
	/* enveloppe */
	.enveloppe {
		position: relative;
	}
	

	#enveloppe {
		margin-left: 25em;	
	}
	
	.enveloppe > .inner {
		padding: 5em 5em 3em 5em ;
		max-width: 100%;
		width: 75%;
	}
		
	.ImageGrandeImage {
		width : 80% ;
		display:block;
		margin-left :auto ;
		margin-right :auto ;
	}

  .navbar .menu-items {
	padding-left: 50px;
	padding-top: 100px;
 
	background: #fff;
    height: 100vh;
    max-width: 300px;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
 
    transition: transform 0.5s ease-in-out;
    box-shadow: 5px 0px 10px 0px #aaa;
  }	
	
@media screen and (max-width: 767px) {
	
	#enveloppe {
		margin-left: 10%;	
	}

	#sidebar {
		display: none; 
		opacity: .5;
	}

	.navbar-container {
	  display: block;
	}

	.navbar-container[type="checkbox"], .navbar-container .hamburger-lines {
		display: flex;
	}

	.navbar-container input[type="checkbox"] {
	position: absolute;
	display: block;
	height: 32px;
	width: 35px;
	top: 17px;
	right: 10px;
	z-index: 9500;
	opacity: 0;
	cursor : pointer ;
	}

	.navbar .menu-items{
		padding: 2.5em ;
		background: #A32711;
		opacity: 0.9;
		cursor: default;
		height: 80vh;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		position: fixed;
		text-align: center;
		top: 0;
		width: 70vw ; 
		z-index: 5000;
	}
	
	.navbar-container .hamburger-lines {
		display: block;
		height: 24px;
		width: 35px;
		position: absolute;
		top: 17px;
		right: 10px;
		z-index: 7000;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.navbar-container .hamburger-lines .line {
	display: block;
	height: 6px;
	text-align: center;
	width: 100%;
	border-radius: 10px;
	background: #A32711;
	z-index: 10000;
	}

	.navbar-container .hamburger-lines .line1 {
	transform-origin: right bottom;
	transition: transform 0.4s ease-in-out;
	}

	.navbar-container .hamburger-lines .line2 {
	transition: transform 0.2s ease-in-out;
	}

	.navbar-container .hamburger-lines .line3 {
	transform-origin: right top;
	transition: transform 0.4s ease-in-out;
	}
}

	.navbar-container input[type="checkbox"]:checked ~ .menu-items {
		transform: translateX(0);
	}

	.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
		transform: translate(0px, -3px) rotate(-45deg)
	}

	.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
 		opacity: 0 ;
		transform: scale(0.5) ;
	}

	.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
		transform:  translate(0px, 6px) rotate(-315deg)
	}


/**********************************************************************/	

	li {
		list-style-type : none ;		
	}
	
	.chapeau {
		margin : 0em ;
		color : white;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;		
	}
	
	.ombre a {
		line-height : 2.5em;
		color : white ;
		font-weight : bold ; 
	}

	.ombre a:hover {
		color: white ;
		padding : 7px ;
		background: rgba(255,255,255,0.1);
	}

	.trait a .img2, .menu-items a .img2{
		display:none ;
	}
	
	.trait a:hover .img1, .menu-items a:hover .img1 {
		display:none ;
	}

	.trait a:hover .img2, .menu-items a:hover .img2{
		display:inline ;
	}
	
 	.autreshexagrammes {
		margin : 0em ;		
	}

	.autreshexagrammes a {
		margin : 0em ;		
		color: white ;
	}
	
	.autreshexagrammes a:hover {
		color: white ;
		padding-top : 7px ;
		padding-bottom : 7px ;
		background: rgba(255,255,255,0.1);
	}