/*
	# ------------------ BEGIN LICENSE BLOCK ------------------
	#
	# This file is part of PluXml : https://www.pluxml.org
	#
	# Template for theme 11-05-24
	# Package:		theme.css
	# Copyright (c) 2024-NowDays - PluXml - Pluxthemes.com
	# Authors		G.Cyrillus.
	# Licensed under the GPL license.
	# See http://www.gnu.org/licenses/gpl.html
	#
	# ------------------- END LICENSE BLOCK -------------------
*/

/***********/
/*  reset  */
/***********/
* {
	box-sizing: border-box;
}

html {
	overflow: hidden;
}
body {
	margin:0;
	padding: 0;
	height: 100vh;
	height: 100dvh;
	max-width: 100%;
	overflow: auto;
	display: grid;
  scroll-behavior: smooth;
  }

ul,
ol {
	overflow: hidden;
}

details, summary {
	max-width:100%;
}

img {
	max-width:100%;
}
/***********/
/*  fonts  */
/***********/



/*****************/
/* CSS variables */
/*****************/
:root{
	/* fonts */
	--fontFamilyHTML 	: "Merriweather", serif;
	--fontFamilyTitles	: "Lora", serif;
	
	/*sizes */
	--rem				: clamp(12px,1.25vw,18px);
	
	/* colors */
	--textColor 		: #777;
	--titlesColor		: #555;
	--articleH2LinkColor: #2e8044;
	--ligthTranslucentBG: #fff6;
	--grayTranslucent	: #3333;
	--linkColor			: #2d87c0;
	
}

/***********/
/*   base  */
/***********/
html {
	font-family: var(--fontFamilyHTML);
	font-size: var(--rem);
	color: var(--textColor);
	background: #cde;
}
:is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fontFamilyTitles);
	text-transform: uppercase;
	color: var(--titlesColor);
}


a {
	color: var(--linkColor) ;#2d87c0;
}

/***********/
/* LAYOUT  */
/***********/

body {
	grid-template-rows: auto 1fr auto auto;
	grid-template-columns: 1fr 0;
}

body:has(details[role="navigation"][open]) {
	overflow: hidden;
}
body > :is(details, header) {
	grid-row: 1;
}

body > :is(details, header, footer) {
	grid-column: 1/-1;
}

main {
	grid-row: 2;
}

aside ul.tag-list {
	display:inherit;
	grid-template-columns:inherit;
	grid-column:auto/span 2;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding-top: .5rem;
}
aside h3 {
	grid-column:1/-1;
	border-bottom:solid 1px;
}
footer {
	grid-row: 4;
}
@media screen and (min-width: 800px) {
	body {
		grid-template-columns: 65fr 35fr 0;
		gap: 0.5em;
	}
main,
aside {
	grid-row: 2;
	grid-column:2;
	display:block
}
footer {
	grid-row: 3;
}
}
#goTotop {
	container-type: size;
	container-name: backTotop;
	grid-column: 3;
	grid-row: 1/ 3;
	height: 100%;
	overflow: visible;
	margin-left: -1em;
}

@media (max-width: 800px) {
	aside {
		grid-row: 3;
	}
	footer {
		grid-row: 4;
	}
	#goTotop {
		grid-column: 2;
		grid-row: 1/ 4;
	}
}
/**************************/
/*navigation - back to top*/
/**************************/

body > details summary {
	cursor:pointer;
	text-align: center;
}
body > details#top summary {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 2;
}
body > details[open] {
	inset: 0 1em auto 0;
}
summary {
	line-height: 1.6;
	position: relative;
	margin: 1rem auto;
	width: max-content;
	padding: 0.25rem 0.5rem;
	border: solid #fff5;
	border-radius: 1.6em;
	background: #e91e63;
	color: white;
}
[href="#main"] {
	position: fixed;
	bottom: 100vh;
	right: 100vw;
}
details#top ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.6;
	position: fixed;
	z-index:1;
	inset: 0 0 0 0;
	display: grid;
	gap: 0.75rem;
	place-content: center;
	place-content: safe center;
	backdrop-filter: blur(3px);
	background: #3331;
}
body > details li a {
	display: block;
	text-decoration: none;
	color: #333;
	background: #fff;
	border: solid 1px;
	padding: 0.5rem;
	border-radius: 5px;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 2px 2px 2px 2px;
	transition: 0.5s;
}
body > details li a:hover {
	background: lightgreen;
	box-shadow: -1px -1px 1px 0;
}


@media screen and (max-height: 500px) {
	details ul {
		grid-template-columns: repeat(2, auto);
	}
}


#goTotop::before {
	content: "";
	float: left;
	height: 140vh;
	max-height: 100cqh;
}
#goTotop a {
	clear: both;
	position: sticky;
	display: block;
	top: calc(100vh - 7em);
	z-index: 40;
	overflow: visible;
	right: 10em;
	margin-left: -10em;
	width: max-content;
	background: #777a;
	padding: 0.5em;
	border-radius: 1em;
	color: white;
}

@container backTotop (max-height :140vh) {
	#goTotop::before,
	#goTotop a {
		display: none;
	}
}

/***********/
/* header  */
/***********/
body > header {
	display: grid;
	align-items: center;
	min-height: 25vh;
	background: url(../img/chris-robert-champs-1920-unsplash.jpg)
    center / cover;
	padding: 1em max(12px, calc(30vw - 400px));
	width: 100%;
}
body > header h2 {
	float: left;
	box-shadow: 2px 2px 2px 1px;
	text-shadow: 1px 1px white;
	background: var(--ligthTranslucentBG);
}
body > header :is(h1, h2) {
	border-radius: 5px;
	max-width: calc(100% - 1em);
	padding: 0.25em;
}


/***********/
/*   MAIN  */
/***********/
body>main {  
	grid-column: 1/3;
  padding-inline:24px;
	border-inline:solid max(12px, calc(25vw - 100px)) transparent;
	background: #fff8 ;
  background-clip:padding-box;  
}
body:has(>aside) > main {
	grid-column: 1;
  border:none;
	padding-inline: max(12px, calc(25vw - 100px)) 12px;
	background: linear-gradient(90deg, transparent 0 calc(55vw - 70%), #fff8 0);
}


.repertory.menu.breadcrumb {
	background: #80972320;
  display: flex;
  align-items: center;
  gap:.5rem 0.2rem;
  list-style: none;
  font-size:1.2rem;
  padding:.5em;
  margin:1em 0 2em;
}
.repertory.menu.breadcrumb li:not(:last-of-type):after{
  content:' /';
}



/***********/
/* article */
/***********/
main article {
	border-bottom: dotted 1px;
	margin-bottom: 3em;
	max-width:45vw;
}

@media (max-width:800px) {
	main article {
		max-width: 80vw;
	}
}
article:nth-child(even) {
  background: #fff3
}
article header {
	padding-bottom: 2em;
}
div:has(.written-by) {
  margin-bottom:1em;
}
article header h2 {
  padding-bottom:1em;
}
article h2 a {
	color: var(--articleH2LinkColor);
	float: left;
	max-width:60%;
	clear:none;
}
article h2 + div {
	display: grid;
	margin-left: auto;
	width: max-content;
	max-width: 35%;
	min-width: 200px;
	border-left: solid 3px var(--grayTranslucent);
	padding-left: 0.5em;
}
.written-by {
	font-weight: bold;
	box-shadow: 0 1px 1px -1px;
}
article h2 ~ div small span {
	float: left;
	clear: left;
	margin-bottom: 0.75em;
}
article .art-date {
	writing-mode: vertical-lr;
	float: left;
	transform: translate(-30px, 0.25em) rotate(180deg);
	font-size: 2em;
	margin-left: -1em;
}

@media (max-width: 700px) {
	header .art-date {
		all: revert;
	}
}
a:has(.art_thumbnail):not([data-big]) {
	float: left;
	padding-right: 1.5em;
	max-width:50%;
}
.art_thumbnail{
	margin-top:-3em;
	max-width:100%;
}
a[data-big] img.art_thumbnail {
  margin-top: -6em;
  max-width: 40%;
}
@media (max-width: 420px) {
	article  a[data-big] img.art_thumbnail {
		max-width:37%;
	}
}
p.more {
	clear: both;
	text-align: right;
	font-size: 1.1em;
	font-weight: bold;
}
/***************/
/* COMMENTAIRE */
/***************/
#form fieldset {
  display:grid;  
}
#id_answer:not(:empty) {
  margin:1em;
  padding:1em;
  background: white;
  border:dotted;
}

/**************/
/* NAVIGATION */
/**************/

nav.pagination:not(:empty),
footer ul {
	font-size: 1.1em;
	font-weight: bold;
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin: 2em 0;
	background: #80972320;
	padding: 1em;
	list-style: none;
}
/***********/
/*  ASIDE  */
/***********/
body > aside {
	padding-inline: 12px max(12px, calc(25vw - 90px));
	background: linear-gradient(90deg, #fff8 0 calc(33vw - 35%), transparent 0);
}
aside ul {
	margin: 0 0 12px;
	padding: 0 0 0 12px;
	list-style: none;
	line-height: 1.6;
}
aside li[data-mother="1"] {
	font-weight: bold;
	font-size: 1.1em;
}
aside .cat-list li:not([data-daughter="000"]) {
	text-indent: 1em;
}
aside h3 {
	margin-bottom: 0;
}
ul.arch-list,
ul.tag-list {
	column-width:160px;
}
.tag {
	border: 1px solid;
	padding: 0 0.15rem;
	background: #CCDDEE;
}
/***********/
/*  FOOTER */
/***********/

body > footer {
	background: linear-gradient(#fff8, #fff8),
    url(../img/chris-robert-champs-1920-unsplash.jpg)
	center 80% / cover;
	padding: 12px max(12px, calc(30vw - 400px));
	color: white;
	text-shadow: 1px 1px 1px #777;
	text-align: center;
}
body > footer a {
	color: #333;
	text-shadow: 0 0;
}

/* Animation si autorisée */
@media not (prefers-reduced-motion: reduce) {
  /* Animations */
  body>header,
  body>footer {
    animation: bgzoom 25s alternate infinite linear;
  }
  @keyframes bgzoom {
    from {
      background-size: 100% auto;
      background-position-x:0;
    }
    to {
      background-size: 150% auto;
      background-position-x:100%;
    }
  }
}
/* suplements*/

body:has(form.kzSkinSelect) details#top summary {
  top:2em
}