* {
	box-sizing: border-box;
}
@font-face {
	font-family: 'Chewy';
	src: url('../fonts/Chewy-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Fascinate Inline';
	src: url('../fonts/FascinateInline-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
html {
	scroll-behavior:smooth;
}
html::after {
  content:url(/themes/retrokiss/img/eiffel.png);
  position: fixed;
  z-index: 5;
  bottom:-2em;
  left:-200px;
  mix-blend-mode:  overlay;
  pointer-events: none;
  z-index: -1;
  opacity:.1;
	filter:drop-shadow(2px 3px 1px #fff) drop-shadow(-2px -3px  #A1603B)
}
body {
	font-family: "Chewy", system-ui;
	display: grid;
	margin: 0 auto;
	padding: 1rem clamp(1rem,10vw,5rem);
	min-height: 100vh;
	grid-template-columns: repeat(auto-fit, 48ch);
	place-content: center;
	gap: 6ch 10ch;
	background:
    linear-gradient(
	90deg,
	transparent 10px,
	#5e796c 10px calc(10px + 2em),
	#c7bc8d calc(10px + 2em) calc(10px + 4em),
	#e0c590 calc(10px + 4em) calc(10px + 6em),
	#be7957 calc(10px + 6em) calc(10px + 8em),
	transparent calc(10px + 8em)
    ),
    
    url("../img//grain.png")0 0 / 200px fixed #faedcd;
	background-blend-mode:multiply, luminosity;
	filter: drop-shadow(2px 2px 5px);
	color: #333;
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: #706556;
		background-blend-mode:multiply,color-burn;
	}
}
a:hover,
.pagination span:hover {
	filter:invert(80%) brightness(140%) ;
}
hr {
	clear:both;
	margin:3px -.5rem;
}
dl,ol,ul {
	padding:1ch;
	font-family: courier,monospace;
}
code {
  background: ivory;
  padding: 0 0.25em;
}
summary {
  cursor: pointer;
  color:#454545;
  text-decoration: underline;
  position:relative
}
summary::after {
  content:'';
  background:url(/data/medias/256x256/pointerhand.jpg) center / 100%;
  height:2.5em;
  width:2.5em;
  position:absolute;
  margin:-1rem 1rem;
  mix-blend-mode: multiply;
  left:-3.5em;
  bottom: 35%;
}
details {
  margin: 1em;
  background: #fff5;
  padding: 1ch;
}
.box {
	line-height: 1.2;
	margin: 2ch auto;
	padding: 2.2ch 2ch;
	background: repeating-conic-gradient(#fff8 0% 25%, #0000 0% 50%) 100% top /
	2ch 2ch repeat-x,
    repeating-conic-gradient(#fff8 0% 25%, #0000 0% 50%) 0 bottom / 2ch 2ch
	repeat-x;
	background-color: #69c8c2;
	rotate: 1.5deg;
	border: 1ch solid #69c8c2;
	color: #784939;
	font-size: 1.2em;
}
.box.full {
	grid-column:1/-1;
	rotate:0deg;
	display:block;
}
.box:nth-child(odd) {
	rotate: -1.5deg;
}
#top main:has(article.full.box) > :is(article, .modeTitle) {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
article.box:nth-child(odd) >:first-child {
	order:2;  
}
.box:nth-child(2n of article),
.button,
.pagination span,
.asideLinks a{
	background-color: #fcc874;
	border-color: #fcc874;
	color:inherit;
}
.box:nth-child(3n of article),
.button:nth-child(2n),
.pagination span:nth-child(2n),
.asideLinks a:nth-child(8n + 2)  {
	background-color: #f57f5b;
	color: white;
	border-color: #f57f5b;
}
.box:nth-child(4n of article),
.button:nth-child(3n),
.pagination span:nth-child(3n),
.asideLinks a:nth-child(8n + 3){
	background-color: #dd5442;
	border-color: #dd5442;
	color: white;
}
.box:nth-child(5n of article),
.button:nth-child(4n),
.pagination span:nth-child(4n),
.asideLinks a:nth-child(8n + 4 ) {
	background-color: #784939;
	border-color: #784939;
	color: white;
}

.box:nth-child(6n of article),
.button:nth-child(5n),
.pagination span:nth-child(5n),
.asideLinks a:nth-child(8n + 5) {
	background-color: #8d9435;
	border-color: #8d9435;
}

.box:nth-child(7n of article),
.button:nth-child(6n),
.pagination span:nth-child(6n),
.asideLinks a:nth-child(8n  + 6){
	background-color: #f59004;
	border-color: #f59004;
	color: white;
}
.box:nth-child(8n of article),
.button:nth-child(7n),
.pagination span:nth-child(7n),
.asideLinks a:nth-child(8n + 7) {
	background-color: #f15887;
	border-color: #f15887;
}
.box:nth-child(9n of article),
.button:nth-child(8n),
.pagination span:nth-child(8n),
.asideLinks a:nth-child(8n + 1) {
	background-color: #bc514b;
	border-color: #bc514b;
}
.box.full.static {
  max-width:960px;
  margin: auto;
  background-color: #FCC874;
  border-color: #FCC874;
  color:#454545
}
fieldset {
  display:grid;
  justify-content: center
}
.box.full.static p:has(label) {
  display: contents
}

.box.full.static p:has([for="piece_1"], small br)
 {
   display:inline;
   order:2;
   color:#777;
}
.author {
	color: #FFF8DC;
	font-size: 3rem;
	text-shadow: 1px 1px 1px black, 2px 2px white;
	letter-spacing: 2px;
	float: inline-end;
	background: linear-gradient(to top, #fff1 33%, #fff3 33% 66%, #fff5 66%) tomato;
	border-radius: 100%;
	padding: 1rem;
	border: dotted 3px;
	box-shadow: 0 0 0 3px tomato, 3px 3px 10px black;
}

.button,
.pagination span,
.asideLinks a 
{
	display:inline-block;
	font-size:.8em;
	padding:.15rem .5rem;
	border-radius:1ch;
	margin-bottom:0.2em;
	box-shadow:1px 1px 1px , -1px -1px 1px gray;
}
.button:hover,
.pagination span {
	box-shadow:-1px -1px 1px , 1px 1px 1px gray;
}
header {  
	grid-column: 1/-1;
}
header h1.box:nth-child(1n) {
	font-family: "Fascinate Inline", system-ui;
	rotate: 0deg;
	background-color: #f4eeb3aa;
	border-color: #f4eeb300;
	margin: 0 auto;
	max-width: max-content;
	border-radius: 3px;
	font-size: 3em;
	border-block-width: 0;
	transform:skew(-5deg)
}
header h1 a:visited  {
	color:maroon
}

.subtitle {
	grid-column: 1/-1;
	text-align: center;
	font-size: 4rem;
	color: cornsilk;
	font-family: "Fascinate Inline", system-ui;
	margin: 4rem;
	rotate: -5deg;
}
header {
  display:grid;
  grid-template-columns:1fr auto;
  align-items: center
}
header :is(h1, p) {
  grid-column:1;
}
header nav#statNav {
  grid-column:2;
  grid-row:1;
  background-color:#8D9435;
  padding: 1rem;
  border-radius: 3px;
  border-color:#8D9435;
  line-height:2;
  color:ivory;
}
nav#statNav ul {
  list-style-type:disclosure-closed;
}
nav#statNav ul ::marker {
  color: #B9E5E3
}
nav#statNav a {
  color:inherit
}
@media (max-width:1240px) {
#top  header :is(h1,#statNav) {
    grid-column:1/-1;
  width:100%
  }
 #top nav#statNav  {
    margin:0 -10rem;
    max-width:auto!important;
    width:calc(100% + 20rem)!important;
    grid-row:auto;
  }
  #statNav ul {
    display:flex;
    flex-wrap:wrap;
    gap:1em 2em;
  }
}
@media (max-width:860px) {
  
 #top nav#statNav  {
   margin:0 -5rem;
    width:calc(100% + 10rem)!important;
  }
}
.modeTitle {
	grid-column: 1/-1;
	text-align: center;
	font-size: 3rem;
	margin: 0 4rem;
	color: gainsboro;
	font-family: "Fascinate Inline", system-ui;
	display: flex;
	gap: .5em;
	clip-path: polygon(25% 0%, 75% 0%, 100% 55%, 75% 100%, 25% 100%, 0% 55%);
}
.modeTitle::before, .modeTitle::after {
	content: '';
	flex: 1;
	border: solid 1px;
	margin: 2.1em 0 auto;
	box-shadow: 0 5px,0 10px,0 15px, 0 20px, 0 25px, 0 -5px, 0 -10px, 0-15px, 0 -20px, 0 -25px;
}
p {
	margin: 1ch 0;
}
main {
	grid-column:1/-1;
	display:grid;
	gap:inherit;
	grid-template-columns:subgrid;
}
article.box {
	display:grid;
	align-items: center;
	margin:0.1ch;
	grid-template-columns:repeat(2,1fr);
	gap:.25em 1em ;
	border-radius:3px;
}
#top .box {
  margin-top:5rem;
}

.box > div > h2:first-of-type  {
  position:relative;
  filter:drop-shadow(2px 2px 2px gray)
}

.box > div > h2:first-of-type a::before {
  display:block;
  content:attr(title);
  position:absolute;
  bottom:100%;
  font-size:.5em;
  margin-bottom:2em;
  width:max-content;
  max-width:130%;
  text-align:center;
  padding:1.5em;
  background: linear-gradient(to bottom, #fff2 33%, #fff4 33% 66%, #fff6 66%)  #F15887;
  border:dotted 3px;
  box-shadow:0 0 0 3px #FFF8DC;
  border-radius:100%;
  color:#454545;
  z-index: 1;
}

.box > div > h2:first-of-type a:first-of-type::before,
.box > div > h2:first-of-type a:first-of-type::after {
	scale:1.25;
	transition:scale .25s
}

.box > div > h2:first-of-type a:hover:first-of-type::before,
.box > div > h2:first-of-type a:hover:first-of-type::after {
  filter:invert() brightness(160%);
	scale:2;
}


.box > div > h2:first-of-type a:first-of-type::after {
content:'';
font-size:1em;
  position:absolute;
  height:1.5em;
  width:1em;
  bottom:100%;
  top:-1.5em;
  right:calc(100% - 2em );
  background-color:#FFF8DC;
  clip-path: polygon(24% 0, 0 100%, 100% 0);
}

.box:nth-child(even) > div > h2:first-of-type a::before {
  right:0;
}
.box:nth-child(even) > div > h2:first-of-type a::after {
 scale: -1 1;
  right:2em;
}
article img {
	margin-block:3ch;
	border-radius:1ch;
	border:dashed #be7957;
	box-shadow:0 0 0  2px #c7bc8d,0 0 0  4px #e0c590, 0 0 0 8px #5e796c;
	width:100%;
    object-fit:cover;
}
article img:first-child {
	background:#0004;
	line-height:200px;
	text-align:center;
}
article.box.full img:first-child {
	display:block;
	max-width: 800px;
	margin: 2ch auto;
}
h2 {  
	font-family: "Fascinate Inline", system-ui;
	margin:1ch 0 0;
	font-weight:100;
}
.blockMirror {
  scale: -1;
  display: block;
}
h2 a {color:inherit}
.artTitle {
	color:#454545;
    text-align:center;
	font-size: 2em;
	margin:0 0 3ch ;
}
div.chapo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	padding:0;
	margin:0;
	max-width:50cqw;
}

.pagination {
	grid-column:1/-1;
	display:flex;
  align-items: center;
	justify-content:space-around;
  flex-wrap:wrap;
  gap:.2rem;
}
.pagination a,
.pagination span{
	color:inherit;
	font-size:1.2rem;
	padding:1rem;
	text-decoration:none;
}
.pagination span.p_current {
	box-shadow:0 0;
	background:none;
}

nav.pagination a {
  font-size:1.4rem;
}
nav.pagination span:is(.p_first,.p_last) a {
  font-size:4rem;
  line-height: 0.2
}

footer.box {
	max-width:auto;
	min-width:100%;
	grid-column:1/-1;
	margin: 1rem -5rem;
	background-color:#837C5F;
	border-color:#837C5F;
	color:wheat;
	border-radius:3px;
}
footer.box ul{
	display:flex;
	flex-wrap:wrap;
	gap:1em;
	justify-content:space-around;
	list-style:none;
}
footer.box  a {
	color:inherit;
}
footer p {
	text-align:center;
	color:orange
}

@media (max-width: 660px) {
  footer.box, 
	#top nav#statNav {
    margin: 1rem auto;
    max-width: 90vw;
    min-width: auto;
  }
}




/* extra plugins ou autre */


.searchfields p {
  max-width:80vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
#top .searchfields p input {
  margin: 0;
  padding: .25rem .5rem;
  border: none;
  font-size: 1.25em;
  color: #837C5F;
  width:auto
}


.mode-static nav .pagination {
  position:relative;
  padding:0!important;
  align-items:center;
}
#top.mode-static nav .pagination  :is(li:first-child:not(.fa),li:first-child span){
  display: contents;
}
#top.mode-static nav .pagination  :is( .fa )::before {
  position: absolute;
  top:0.25em;
 right:-1.2em;
  margin:0;
  padding:0;
  width:auto;
  translate:0 -.5rem ;
}


footer.box {
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-around;
  gap:1em;
}
footer.box ul {
  display: contents;
}
[data-mother='0'] {
display:none;
}