/*  Variante du thème */
body {
	display:grid;
	min-height:100vh;
	max-width:100%;
}
html body :is(header.header, .bg , main,h1 ,article h2,h2 a,h3,h4,h5,h6 ) {
	transition: 0.25s ease-in-out;
}
header.header{
	position:sticky;
	top:0;
	pointer-events:none;
	opacity:0.95;
	/*background:#f9f9cf*/
}

.bg {
	transform-origin: 0 0;
	transform: translate(25%,0) rotate(-270deg);
	min-width:100vh;
	position:fixed;
	top:0;
	left:0;
}
main{
	padding-left:var(--bg-height);
}
body, html body div.grid :is(h1,article h2,h2 a,h3,h4,h5,h6, footer p ) {
	color:#745D1E;
	
}

html body div.grid li a[class], 
footer p a, 
span,
ul li.menu span, 
ul li.menu a, 
ul.menu li a, 
ul,
li,
label,
.header a:hover,
a{
	color:#ef56a2;
	font-weight: bolder;
	pointer-events: auto;
	background:none;
}
html body div.grid aside.aside  a,
html body  a:hover{ 
	color: #258fd6;
}
li.menu li {
	background white;
}
footer.footer{
	background: white;
	position: relative;
	z-index: 3;
	border-top: solid 1px lightgray; 
	padding: 1rem 0;
	/*background:#f9f9cf*/
}



@media (max-width: 760px) {
	main {
		padding-left:0;
	}
	.bg {
		transform: translate(10%,0) rotate(-270deg);
		opacity:0.1
	}	
}
@media (max-width: 850px) {
	main {
		--bg-height: 100px;
	}
	.bg {
		transform: translate(10%,0) rotate(-270deg);	
	}	
	.responsive-menu label {
		width: 5em;
		margin-left:auto;
	} 
	.responsive-menu {

	}
	.responsive-menu ul.menu {
		background:white;
		border:solid 1px;
	}
	
	#mySubStatic {
		font-size:12px;
	}
}