@font-face {
	font-family: 'Merienda';
	src: url('../fonts/Merienda-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
}
* {
	box-sizing: border-box;
	max-width:100%;
}

span,
p,
ul,
ol,
table,
td,
th,
hr,
blockquote,
input,
textarea {
	margin-bottom: 1.5em;
	line-height: 1.65em;
}
img {
	display:block;
	max-width:clamp(200px,700px,80%);
	margin:1em auto;
}
pre{
	overflow: auto;
}
a {
	color:inherit;
}
a:hover,
#main a:hover {
	color:#9400D3;
}
a:visited {
	text-decoration:underline 1px #34737A;
}
.pagination a {
	text-decoration:none;
	color:ivory;
	margin: 0 .25em;
}
html {
	min-height: 100vh;
	background: url(../img/colorful-2609978_640.jpg)
    center / 100% 100vh fixed #d48657;
	box-shadow: inset 0 0 0 55vmax #d48657f8;
	color: #594a38;
	font-size: 20px;
	line-height:1.6;
	font-family: "Merienda", cursive;
	-webkit-text-stroke: 1px;
}
body {
	margin:0;
	display: grid;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto auto;
	padding-inline: 0.5em;
}
div.bg-decorative {
	float: left;
	aspect-ratio: 4/3;
	width: 250px;
	padding: 1px;
	border-radius: 100%;
	display:block;
	margin:auto;
}
#dizinTop {
	background: url(../img/maple-6656343_640.jpg)
    0 0 / cover content-box #fff;
	box-shadow: inset 0 0 2em 2.1em #d48657, 0 0 1em 1em #d48657;
	margin: 0 -1em;
}
#dizinBottom {
	float: right;
	background: url(../img/fall-foliage-1740841_640.jpg)
    0 0 / cover content-box #fff;
	box-shadow: inset 0 0 2em 2.2em #d48657, 0 0 1em 1.5em #d48657;
}
h1 {
	color: #807c1e;
	text-shadow: 0 0 2px #d3d02e;
	font-size:clamp(24px,5vw, 3rem);
	letter-spacing: 5px;
	text-transform: uppercase;
	font-weight:900;
	
}
:is(h2, h3, h4, h5, h6) {
	color: #ae3034;
	text-decoration: underline #cdc310 1px;
}
p {
	color: #594a38;
	padding: 0.1em 0;
	margin: 0;
}
form ~ p:has(a:only-child) {
	text-align:center;
	margin-top:4em;
	padding-bottom:1.2em;
	border-bottom:dotted #CACF38 1px;
	line-height:2.4;
}
#header {
	text-align:center;
}
#header .navigation ul{
	float:right;
	text-align:initial;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:.5rem;
	padding:0
}
.menu .menu:has(ul), .menu .menu ul {
	display:contents;
}
.menu .menu span ,.menu .menu:has(ul)::before{
	display:none;
}
#header h1 a,
#header h2{
	text-decoration:none;
}
#header h2 {
    color: #594a38;
    text-shadow:0 0 2px   white ;
}
#header h2 .svg {
	max-height:2.5em;
}
#header, article{
	border-bottom:solid #cdc310 1px;
}


.repertory.menu.breadcrumb {
	display:flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to left, #fff0,#fff1,#fff0);
	gap:1em;
	padding:.5em 0; 
	font-size: clamp(12px, 2.5vw, 1.5rem);
	white-space: nowrap;
}
.repertory.menu.breadcrumb li + li::before  {
	content:'/';
	padding-inline-end:1em;
}
.repertory.menu.breadcrumb li::before {
	vertical-align: middle
}
.repertory li b {
	color: #367379;
	text-shadow: 0 0 1px white;
	-webkit-text-stroke: 1px cadetblue;
	font-weight: 800;
}
main {
	overflow:hidden;
}
article{
	padding:1em;
}

.clear {
	display:flex;
	justify-content: center;
}
article header h2 {
	float:left;
	text-shadow: 0 0 1px white;
	-webkit-text-stroke: 1px #f005;
	font-weight: 900;
}
.mode-erreur article {
	background:url(../img/pexels-goumbik-628227.jpg) 0 0 /cover;
	aspect-ratio: 4/2.7;
	display:grid;
	text-align:center;
	color:white;
	grid-auto-rows:1fr 
}
.mode-erreur article h2{
	margin:auto;
	padding-top:1em;  
}
article header div {
	text-align:end;
	font-size:0.8em;
	color:#34737A;
}
time {
	padding:.5rem 0;
	color:beige;
}
article time{
	rotate:-5deg;
	text-indent:-1rem;
	display:block;
	width:max-content;
}
.infosArt {
	display:grid;
	grid-template-columns: 1fr auto auto;
	grid-template-rows:auto;
	background:linear-gradient(to right, #fff0, #fff0,#fff2);
	gap:0 .5em;
	padding:1.2em .75em 0;
	min-width:min-content;
}
.infosArt small {
	display:inherit;
	grid-template-columns: subgrid;
	grid-column:2/4;
}
.infosArt span {
	line-height:.9;	
}
.infosArt a,
.infosArt span:first-child {
	white-space:nowrap;
}
.infosArt span:last-child {
	text-align: initial;
	color: oklch(from currentColor l c calc(h + 290) );
}
.more {
	text-align:end;
	padding:2em 0;
	color:#F5C619;
}
fieldset {
	display: grid;
	margin:2em auto;
	width:80%;
	border: none;
	padding: 0;
	
	outline: groove oklch(from currentColor calc(l - .4) c h );
	outline-offset: 1em;
}
fieldset [type="submit"] {
	padding:.25em .5em;
	margin:auto;
	width:auto;
	box-shadow:inset 0 0 0 2em #8C7D25;
}

#id_answer:not(:empty) {
	padding: 1em;
	background:#012;
	color: #3F51B5
}
[onclick="cancelCom()"] {
	color:crimson
}
#id_answer .content_com.type-normal {
	color:aqua;
}
aside {
	column-width:250px;
	column-rule:dotted #CACF38 1px;
	border-inline:dotted #CACF38 1px;
	padding:0 .5em;
}
aside div {
	display:inline-block;
	width:100%;
}
aside div h3 {
	color:inherit;
}
aside a {
	color:#34737A;
}
aside div:nth-child(odd) a{
	color:#CACF38;
}
aside ul {
	padding-left:.5em;
}
.pagination,
.rss{
	line-height:2.4;
	text-align:center;
	margin:2rem;
	background:#fff1;
}
:is(#main,footer)  a[href*="feed"]:hover {
	padding:1em;
	border-radius:8px;
	color:orange;
	background:#fffa;
	line-height:2.4;
	box-decoration-break: clone;
}
footer {
	text-align:center;
	padding:1em 0;
	line-height:2.4;
	border-top:dotted #CACF38 1px;
	margin-inline:-.5em;
	max-width:100vw;
}
section {display:bnone;}
footer ul {
	clear:both;
	line-height:2.4;
}
li{
	list-style:none;
}
p:has(a:only-child) a::before,
.more a::before,
li:has(a:only-child)::before{
	content:'';
	vertical-align:-.3em;
	display:inline-block;
	background:url(../img/1298988-3f51b5.svg) 0 0 / cover;
	width:1.5em;
	margin:0 .25em;
	aspect-ratio:1;
}
@media (min-width: 1200px) {
	html {
		padding-left: 4em;
	}
	body {
		padding-inline: 3em;
		max-width: 1200px;
		box-shadow: 2em 0 #cdc31088, 1200px 0  #807c1ecc;
		border-inline-end: #807c1edd solid 2em;
	}
	
	#header h1::first-line {
		line-height:250px;
	}
	#header	.svg {
		max-width: 120%;
	}
	#header h2 .svg {
		max-height:10em;
	}
	#header h2 {
		position: fixed;
		left: 0;
		top: 0;
		writing-mode: vertical-lr;
		padding-top: 1vh;
		font-size: clamp(1.5rem, 8vmin, 4.5em);
		line-height: 1.5;
		background: linear-gradient(to left, #fff4, #fff0);
		width: 1.5em;
		height: 100%;
		margin: 0;
		scale:-1;
		text-decoration:none;
		border-left: solid 3px;
	}
	
	div.bg-decorative {
		width: 400px;
	}
	footer {
		margin:0 -2em;
		display:grid;
		grid-template-columns:1fr auto;
		align-items:center;  
		margin-left: -1em; 
		margin-right: -1em;
		max-width: calc(100% + 2em);
	}
}