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, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, 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 ;
}

H3, p {
	margin-left : 25px ;
}

h1, h2, h3, h4, h5, h6, summary {
	color: #000000;
	line-height: 1.5;
}
		
h1 {
	padding-top: 50px;
	font-family: Roboto, sans-serif;
	font-weight: 300 !important;
	font-size: 3.75em;
	color: #9E2529 !important;
}	

h2 {
	font-family: Roboto, sans-serif;
	font-size: 3.75em;
	font-weight: 100;
	color : #000000 ;
	margin-top: 1.0em;
}

h3 {
	line-height: 2.5em;
	font-size: 1.5em;
	font-weight: 100;
	color : #000000 ;	
}

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: #fffef9 ;
}

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;
}
	
.heading-1 {
	font-size: 2.5em;    
	font-weight: 400;
}
			
.heading-2 {
	font-family: Roboto, sans-serif;
	font-size: 3.00em;
	font-weight: 100;
	color: #000000;
	margin-top: 1.0em;
}	
	
.LigneChapitreChinois,  .LigneChapitrePinyin, .LigneChapitrePinyinTuanZhan, .LigneChapitreMotàMot, .LigneChapitrePhrase {
	text-align: center;
}

.LigneChapitreChinoisTuanZhan, .LigneChapitrePinyinTuanZhan, .LigneChapitreMotàMotTuanZhan, .LigneChapitrePhraseTuanZhan {
	text-align: left;
}
	
.TitresChapitre2 {
	text-align: right;
	margin-right: 90px;
}
	
.ChapitreCompletChinois, .LigneChapitreChinois, .ChapitreCompletPetiteImageChinois {
	font-family: Roboto, sans-serif;
	font-size: 2.0em;		
}

.LigneChapitreChinoisTuanZhan{ 
 	font-family: Roboto, sans-serif;
	font-size: 1.5em;		
}

.ChapitreCompletChinois, .ChapitreCompletPetiteImageChinois{
	margin-top: -0.5em;
	margin-left: 30px;
}
		
.LigneChapitreChinois, .LigneChapitreChinoisTuanZhan {
	word-spacing: 0.2em;
	margin-top: 0.7em;
}

.LigneChapitreChinois a, .LigneChapitreChinoisTuanZhan a {
	color: #000000;
}	
	
.LigneChapitreChinois a:hover, .LigneChapitreChinois a:active, .LigneChapitreChinoisTuanZhan a:hover, .LigneChapitreChinoisTuanZhan a:active {
	color: #FFFFFF;
	background: #A32711;
}	
	
.ChapitreCompletPetiteImagePinyin {
	margin-top: -0.5em;
	margin-left: 30px;
	color: #A32711;
	word-spacing : 1.1em;
}
	
.ChapitreCompletPinyin {
	margin-top: -0.5em;
	margin-left: 30px;
	color: #A32711;
	font-weight: 600;	
	font-size: 1.1em;		
	word-spacing : 0.6em;
}
	
.LigneChapitrePinyin {
	color: #A32711;
	word-spacing : 1.3em;
	margin-top: 0.5em;
}

.LigneChapitrePinyinTuanZhan {
	color: #A32711;
	word-spacing : 0.5em;
	margin-top: 0.5em;
}

.LigneChapitreMotàMot, .LigneChapitreMotàMotTuanZhan {
	margin-top: 0em;
}
	
.LigneChapitrePhrase, .LigneChapitrePhraseTuanZhan {
	color: #A32711;
	font-weight: 600;			
}
	
.ChapitreCompletPetiteImageChinois, .ChapitreCompletPetiteImagePinyin{
	margin-left: 50px;
}
	
.TexteInterprétation, .TexteGaoHeng, .TexteStructure, .TexteHtml {
	margin-left: 50px;
	margin-right: 30%;
	text-align: justify;
	max-width : 525px;
}

.PetitesImages, TitreStructure{
	margin-bottom: 0.5em;
	font-weight: 100;
}
	
.TexteStructure span {
	color : black ;
	font-weight: 600;			
}

.TexteStructure span:hover {
	color : white ;
	font-weight: 600;		
	padding-top : 3px ;
	padding-bottom : 3px ;
	background: #A32711;		
}	

.TexteStructure p {
	margin-bottom: 1em;
	line-height: 1.75;
	text-align: justify;
}

.TexteStructure i {
	font-style: italic;
}

.TexteStructure strong {
	font-weight: 600;
}

.TexteStructure a {
	text-decoration: none;
}

.TexteStructure a:hover {
	color: #FFFFFF;
	background: #A32711;
}

/* Style spécifique pour les références d'hexagrammes */
.TexteStructure a[href^="/hexagramme-"] {
    font-weight: 600;
}

/* Style pour les caractères chinois dans la structure */
.TexteStructure span:lang(zh), .TexteStructure strong:lang(zh) {
    font-family: "Noto Sans SC", sans-serif;
}

details > summary > * {
	display: inline;
}
	
details summary { 
	cursor: pointer;
}

details summary:hover { 
		color : #A32711;
}

summary {
	list-style: none
}

summary::-webkit-details-marker {
	display: none; 
}

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

details[open] summary::before { 
	content: '\f358' ' ' ' ';
}	

.TexteHtml p, .TexteHtml2Colonnes p {
	margin-left : 0px ;
}

.TexteHtml li, .TexteHtml2Colonnes li, .texte-deux-colonnes li  {
	list-style-type: initial;
	margin-left : 30px ;
}

.TexteHtml2Colonnes .et_pb_row {
	margin-left : 50px !important;
}	
/********************************************************************************************************/
/* Sidebar */
/********************************************************************************************************/

#sidebar {
	padding-top: 2.5em ;
	padding-bottom: 2.5em ;
	padding-right: 1.0em ;
	padding-left: 1.0em ;
	background: #9e2529;
	cursor: default;
	height: 100vh;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	text-align: center;
	top: 0;
	width: 18em;
	z-index: 10000;
}

#sidebar .inner {
	margin-top : 1.5em ;
	margin-bottom : 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;
}
	
/* #sidebar + #enveloppe { */
#enveloppe {
	margin-left: 25em;	
}
	
.enveloppe > .inner {
	padding: 5em 5em 3em 5em ;
	max-width: 100%;
	width: 75%;
}
		
.ImageGrandeImage4 {
	width : 80% ;
	display:block;
	margin-left :auto ;
	margin-right :auto ;
}

.ImageGrandeImage {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	margin: 0 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: 0em;	
	}

	#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: 4px;
		text-align: center;
		width: 100%;
		border-radius: 10px;
		background: #A32711;
		margin : 2px 0;
	}

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

.trait {
	display: block;
	margin-bottom: -1.5em !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
	
.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);
}

.bigramme, .bigramme:hover, .trigramme, .trigramme:hover {
	color : black !important ;
	font-size: 20pt !important;	
	font-weight: 600 !important;
	line-height: 0.8 !important;
	vertical-align: middle !important; 
	background : transparent !important ; 
}	

/* Positionnement précis du bouton */
.sidebar-bottom-button {
  position: absolute !important; /* Changement de fixed à absolute */
  bottom: 20px !important;
  left: 0 !important;
  right: 0 !important; /* Pour centrer horizontalement */
  margin: 0 auto !important;
  width: 160px !important; /* Légèrement réduit pour s'assurer qu'il reste dans les limites */
  text-align: center !important;
  z-index: 9999 !important; /* Valeur très élevée pour garantir la visibilité */
  background-color: #841c1c !important;
  padding: 5px 0 !important; /* Padding minimal */
  transform: translateY(-20px) !important; /* Déplacement vers le haut */
}

/* Style du bouton transparent */
.bouton-toggle.transparent {
  background-color: transparent;
  color: white; /* Texte blanc pour meilleur contraste sur fond rouge */
  border: none ;
  padding: 0px 0px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  font-weight: 500;
  width: 80%; /* Limiter la largeur du bouton */
  margin: 0 auto; /* Centrer le bouton */
}

.bouton-toggle.transparent:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.bouton-toggle.transparent[data-etat="deplie"] {
  border-color: transparent;
}

/* Adaptez cette valeur selon votre mise en page */
@media screen and (max-width: 768px) {
  .sidebar-bottom-button {
    display: none;
  }
}

.texte-deux-colonnes {
    column-count: 2;
    column-gap: 3em;
    column-rule: 1px solid #ddd;
    text-align: justify;
    hyphens: auto;
    line-height: 1.7;
	margin-left : 50px;
	margin-right : 50px;
}

.texte-deux-colonnes p {
    break-inside: avoid;
    margin-bottom: 1em;
}

/* Responsive : une seule colonne sur mobile */
@media (max-width: 600px) {
    .texte-deux-colonnes {
        column-count: 1;
        column-gap: 0;
        column-rule: none;
    }
}

.TexteGaoHeng a {
    color: #0c71c3;
    text-decoration: none;
}

.TexteGaoHeng a:hover {
    color: #FFFFFF;
    background: #A32711;
}

.TexteGaoHeng p:first-child {
    color: #A32711;
}