/*
 *
 * Théme d'après https://demo.themegrill.com/masonic/
 *
 * Written by Jean-Pierre Pourrez "bazooka07"
 *
 * Published on may, the 4th of 2021
 * */

@import '../fonts/fontello/css/fontello.css';

html {
	--bg-color1: #444;
	--fg-color1: #fff;
	--fg-color2: #ffc800;
	--bg-color2: #666;
	--bd-color3: rgba(194,194,194,1);
	--bg-color0: #fafafc;
	--bg-color4: #ececec;
	--bgfigure: #f2efef;
}

body {
	margin-right: 1rem;
	background-color: var(--bg-color0);
}

.main-content article {
	background-color: #fff;
}

a {
	text-decoration: none;
}

a:hover,
.color1 a:hover {
	color: var(--fg-color2);
	text-decoration: none;
}

textarea {
	width: 100%;
}

.logo {
	display: none;
}

.txt-center {
	text-indent: 0;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

hr {
	color: var(--bd-color3);
}

.main-header {
	position: relative;
	/*
	position: sticky;
	top: 0;
	* */
}

.main-header * {
	color: #fff;
}

.main-header > div:last-of-type {
	position: absolute;
	bottom: 0;
	left: 1rem;
}

#nav-header {
	position: sticky;
	top: 0;
	padding: 0.5rem 1rem;
	z-index: 50;
}

/* -------- Tabs ------------ */

.tabs-container {
	position: relative;
	height: calc(100vh - var(--tabs-container-offset));
	overflow-x: auto;
	white-space: nowrap;
}

.tabs-container > * {
	display: inline-block;
}

.tabs-container .tabs-container {
	position: absolute;
	left: 0;
	width: 100%;
	padding: 0;
	overflow-x: auto;
	max-height: calc(100vh - var(--tabs-container-offset) - 4rem);
}

.toggle {
	display: none;
}

[type="radio"].toggle:not(:checked) + * + * {
	display: none;
}

#toggle-menu + label + ul > li > :not(.sub-menu) {
	display: inline-block;
	padding: 0 0.5rem;
}

.menu.categories .sub-menu a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

#toggle-menu + label + ul span.active,
#toggle-menu + label + ul .active > a,
#toggle-menu + label + ul a.active {
	background-color: #888;
}

#toggle-menu + label + ul .group::after,
#toggle-arch-list + h3 label::after {
	content: '▼';
	padding-left: 1rem;
}

.sub-menu {
	white-space: nowrap;
}

.brand {
	text-align: center;
}

.brand > * {
	margin-bottom: 1rem;
}

.burger-button > * {
	--color-burger: #fff;
	background-image: linear-gradient(var(--color-burger), var(--color-burger));
}

.burger-button > ::after,
.burger-button > ::before {
	background: var(--color-burger);
}

.burger-button:hover > *  {
	--color-burger: var(--fg-color2);
}

#toggle-menu:checked + .burger-button > * {
	background-image: none;
	justify-content: center;
}

#toggle-menu:checked + .burger-button > ::before {
	transform: translateY(50%) rotate(45deg);
}

#toggle-menu:checked + .burger-button > ::after {
	transform: translateY(-50%) rotate(-45deg);
}

.main-content {
	padding: 1rem;
	background-color: inherit;
}

.art-header h2 {
	margin-bottom: 1rem;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.main-content > header,
.main-content article,
div[data-gallery] figure {
	padding: 1rem;
	-webkit-box-shadow: 0 0 7px 0 var(--bd-color3);
	-moz-box-shadow: 0 0 7px 0 var(--bd-color3);
	box-shadow: 0 0 7px 0 var(--bd-color3);
}

div[data-gallery] figure {
	margin: 5px;
}

#pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.color1,
.main-aside,
.sub-menu {
	background-color: var(--bg-color1);
	color: var(--fg-color1);
}

.main-aside a {
	color: inherit;
}

.color1 a {
	color: #fff;
}

.breadcrumb {
	padding: 0;
	list-style: none;
}

.breadcrumb > li {
	display: inline-block;
}

.breadcrumb > li:not(:first-of-type)::before {
	content: '>';
	padding: 0 1rem;
}

.main-aside {
	padding: 0.5rem 1rem 0;
	border-top: 5px solid var(--fg-color2);
	border-bottom: 1px solid #444;
}

.main-aside h3 {
	padding-left: 0.5rem;
	background-color: var(--bg-color2);
	color: inherit;
	border-left: 5px solid var(--fg-color2);
}

.main-aside a {
	margin: 0.15rem 0;
	padding: 0 0.5rem;
}

.main-aside a.active {
	background-color: var(--fg-color2);
	color: var(--bg-color1);
}

.main-aside ul,
#art-navigation ul {
	list-style: none;
}

.main-aside > ul,
#art-navigation ul {
	padding: 0;
}

#art-navigation {
	text-align: center;
}

#art-navigation ul {
	margin: 0;
	white-space: nowrap;
}

#art-navigation li {
	display: inline-block;
	margin: 0 1rem;
}

#art-navigation .button,
#pagination .button {
	padding: 0;
	font-size: 200%;
	margin: 0;
}

/* --------- sidebar.php ---------- */

.main-aside .nowrap {
	white-space: nowrap;
}

.main-aside .nowrap li {
	overflow-x: hidden;
	text-overflow: ellipsis;
}


/*
#cat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
*/

.cat.thumbnail {
	display: block;
	float: left;
	margin-right: 1rem;
}

.cat-header > hr {
	margin: 0;
	color: transparent;
}

#cat-list > li,
#author-list > li,
#arch-list > li {
	display: flex;
	justify-content: space-between;
}

#tag-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem;
}

/* https://www.w3schools.com/colors/colors_2019.asp - The Hottest Autumn 2019 / Winter 2020 Colors */
/* https://www.w3schools.com/lib/w3-colors-2020.css */
.tag-size-1   a { font-size:  40%; color:#34568B; } /* classic-blue */
.tag-size-2   a { font-size:  56%; color:#CD212A; } /* flame-scarlet */
.tag-size-3   a { font-size:  72%; color:#FFA500; } /* saffron */
.tag-size-4   a { font-size:  88%; color:#1C6D57; } /* #23866c */
.tag-size-5   a { font-size: 104%; color:#4B5335; } /* chive */
.tag-size-6   a { font-size: 120%; color:#446ED5; } /* #6e8cd5 */
.tag-size-7   a { font-size: 136%; color:#C84803; } /* #FA7A35 orange-peel */
.tag-size-8   a { font-size: 152%; color:#6B5876; } /* grape-compote */
.tag-size-9   a { font-size: 168%; color:##7A6027; } /* #93742f */
.tag-size-10  a { font-size: 184%; color:#B6472E; } /* #E8A798 coral-pink */
.tag-size-11  a { font-size: 200%; color:#9C4722; } /* cinnamon-stick */

#nav-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 0.5rem 1rem;
}

.rss a {
	/* background: no-repeat left center url('../img/rss.min.svg'); */
	background: no-repeat left center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M437 0H75A75 75 0 000 75v362a75 75 0 0075 75h362a75 75 0 0075-75V75a75 75 0 00-75-75zM106.2 446.4a44.1 44.1 0 110-88.2 44.1 44.1 0 010 88.2zm149-8.1c-22 0-40-18-40-40 0-58-47-105-105-105a40 40 0 010-80c102 0 185 83 185 185 0 22-18 40-40 40zm150 0c-22 0-40-18-40-40 0-68.1-26.5-132.2-74.7-180.3a253.3 253.3 0 00-180.3-74.7 40 40 0 010-80c89.5 0 173.6 34.8 236.9 98.1a332.8 332.8 0 0198.1 236.9c0 22-18 40-40 40z' fill='%23ffb500'/%3E%3Cpath d='M437 0H257.7v97.3c32.7 16 62.9 37.6 89.4 64.1a332.8 332.8 0 0198.1 236.9 40 40 0 01-80 0 253.3 253.3 0 00-107.5-208v96.5a184 184 0 0137.5 111.5 40 40 0 01-37.5 39.9V512H437a75 75 0 0075-75V75a75 75 0 00-75-75z' fill='%23ff9300'/%3E%3C/svg%3E%0A");
	background-size: 1.8rem;
	padding-left: 2.5rem;
}

.art-header > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.art-main {
	border-top: 1px solid var(--bd-color3);
	padding-top: 1rem;
	margin-top: 1rem;
}

.art.thumbnail {
	display: block;
	margin: 0 auto;
	width: max-content;
	max-width: 100%;
}

.art-footer {
	display: flex;
	justify-content: space-between;
}

.written-by::before,
.art-date::before,
.art-nb-com::before,
.cats::before,
.tags::before {
	font-family: fontello;
	color: var(--fg-color2);
	margin-right: 1rem;
}

.main-aside .rss {
	padding: 1.5rem 0 0.5rem 2rem;
}

.main-aside > ul > li {
	padding-bottom: 1rem;
}

body:not(.mode-archives) #toggle-arch-list:not(:checked) + h3 + ul {
	display: none;
}

#toggle-arch-list:checked + h3 label::after {
	content: '▲';
}

.written-by::before { content: '\e801'; }
.art-date::before   { content: '\e807'; }
.art-nb-com::before  { content: '\e808'; }
.cats::before       { content: '\e800'; }
.tags::before       { content: '\e806'; }

.more {
	text-align: end;
}

.more a::after {
	font-family: fontello;
	content: '\e803';
	color: var(--fg-color2);
	padding-left: 1rem;
}

.author-infos {
	border-top: 1px solid var(--bd-color3);
	padding-top: 1rem;
}

.footnotes {
	font-size: 80%;
}

/* -------- static-gallery.php (slideshow) --------------- */

div[data-gallery] figure {
	padding: 0.5rem;
	background-color: var(--bd-color3);
	text-align: center;
	border-radius: 0.5rem;
}

body.slideshow {
	overflow: hidden;
}

.mode-static img[src*=".tb."],
.mode-article img[src*=".tb."] {
	cursor: zoom-in;
}

div[data-gallery] {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 1rem;
}

div[data-gallery] a {
	display: inline-block !important;
	margin: 0;
}

div[data-gallery] figure {
	margin: 0;
	padding: 0.5rem;
	max-width: 20rem;
	background-color: var(--bgcolor1) /* var(--bgfigure) */;
	text-align: center;
	border: 1px solid var(--brcolor1);
	border-radius: 0.5rem;
}
div[data-gallery].no-caption a { margin: 0.5rem 0.5rem; }

#slideshow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: none;
	z-index: 99;
	transition: opacity ease 1.4s;
}

body.slideshow #slideshow {
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
}

#slideshow .overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgb(63,63,63,0.85);
}

#slideshow figure {
	justify-self: center;
	margin: 0;
	padding: 0.3rem;
	text-align: center;
	background-color: var(--bgfigure);
	border-radius: 0.5rem;
}

body.slideshow #slideshow.no-gallery {
	grid-template-rows: 1fr;
}

#slideshow .gallery {
	padding: 0.2rem;
	text-align: center;
}
#slideshow figure,
#slideshow .gallery {
	z-index: 100; /* more than #slideshow */
}
#slideshow .gallery {
	display: none;
	background-color: var(--bgcolor1);
	overflow-x: hidden;
}
#slideshow.with-gallery .gallery {
	display: flex;
	justify-content: space-between;
}
#slideshow-gallery {
	white-space: nowrap;
	overflow-x: hidden;
}
#slideshow-gallery img {
	height: 100%;
	margin: 0 0.1rem;
	border: 2px solid transparent
}
#slideshow-gallery img.active {
	border-color: red;
}
#slideshow .button {
	font-size: 2rem;
	padding: 0 0.6rem;
}
#slideshow .button,
#slideshow-gallery {
	height: 3rem;
}
#slideshow-gallery img {
	cursor: zoom-in;
}
#slideshow .button,
#slideshow-close {
	cursor: pointer;
}
#slideshow-prev { left: 0.2rem; }
#slideshow-next { right: 0.2rem; }
#slideshow-close {
	padding: 0 0.3rem;
	color: red;
	font-weight: bold;
}
#slideshow-close:hover {
	background-color: #ccc;
}
#slideshow-img {
	max-height: calc(100vh - 7rem);
	max-width: calc(100vw - 2rem);
	border: 2px inset var(--bgcolor2);
	border-radius: 0.4rem;
	transition:  width ease 1.5s, height ease 1.5s;
}
#slideshow figcaption {
	display: flex;
}
#slideshow-caption {
	flex-grow: 1;
	text-transform: capitalize;
}
#slideshow-counter {
	padding: 0 0.3rem;
}

.art-main figure {
	margin: 1rem auto;
	text-align: center;
}

.art-main figcaption span {
	word-wrap: nowrap;
}

/* -- article divided into multi-parts -- */

.art-nav {
	display: flex;
	justify-content: space-around;
}

.art-nav button {
	flex-grow: 1;
	border-bottom: 1px solid var(--bd-color3);
	cursor: pointer;
}

.art-nav button:hover {
	color: var(--fg-color2);
}

.art-nav button.active {
	border: 1px solid var(--bd-color3);
	border-bottom-color: transparent;
}

/* ---------- */

.new-page:not(.active) {
	display: none;
}

/* ------ contact ------ */

#frm-contact input:not([type="submit"]),
#frm-search input[type="text"],
select,
textarea {
	width: 100%;
}

#frm-contact input:not([type="submit"]),
#frm-comment input:not([type="submit"]),
#frm-search input:not([type="submit"]),
select,
textarea {
	margin-bottom: 1rem;
	background-color: #fff;
	border: 1px solid var(--bd-color3);
}

#frm-contact .infos {
	column-count: 2;
}

#frm-contact .capcha-challenge {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.capcha-challenge > * {
	margin: 0;
}

.capcha-word {
	margin: 0 1rem;
	padding: 0 0.25rem;
	font-weight: bold;
	letter-spacing: 0.25rem;
	border: 1px solid var(--bd-color3);
}

#frm-contact input[name="rep"] {
	width: 3rem;
	text-align:  center;
}

#frm-contact > div:last-of-type,
#frm-search > div:last-of-type {
	text-align: center;
}

#frm-search .extra {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#frm-contact button,
#frm-search button {
	background-color: var(--bg-color2);
	color: var(--fg-color1);
}

#nav-header .icon-search {
	font-size: 200%;
}

#frm-search .dates {
	display: flex;
}

.comments .level-1 { margin-left: 3rem; }
.comments .level-2 { margin-left: 6rem; }
.comments .level-3 { margin-left: 9rem; }

#answer-coms > div {
	display: grid;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 0.25rem;
	border: 1px solid #ccc;
	border-radius: 0.75rem;
}

/* ------- static-download.php ----------- */

div[data-download] > div {
	overflow-x: auto;
}

div[data-download] table {
	min-width: 100%;
	table-layout: auto;
	white-space: nowrap;
	margin-bottom: 1rem;
}

div[data-download] table tbody tr:nth-of-type(even),
.tabs-container .articles li:nth-of-type(2n) {
	background-color: var(--bg-color4);
}

div[data-download] table td {
	padding: 0.2rem 0.5rem;
}

div[data-download] table td:first-of-type {
	width: 3rem;
}

div[data-download] table td:nth-of-type(3) {
	text-align: right;
}

/* -------- plxShow::artNavigation() ------ */

#art-navigation ul {
	display: flex;
	justify-content: space-around;
	margin: 0;
	padding: 0;
}

#art-navigation ul a {
	padding: 0;
	font-size: 200%;
}

/* -------------- static-sitemap.php -------------- */

.sitemap .tab-content {
	position: absolute;
	left: 0;
	min-width: 100%;
	margin-bottom: 1rem;
	padding: 0;
	white-space: nowrap;
	max-height: calc(100vh - var(--tabs-container-offset) - 4rem);
	overflow-y: auto;
}

.sitemap .tab-content.level-2 {
	top: 3.5rem;
	height: calc(100vh - var(--tabs-container-offset) - 9rem);
}

.sitemap main ul {
	margin: 0;
	padding: 0 1rem 0 0;
}

.sitemap h4 + ul {
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 1rem;
}

.sitemap .toggle + * label {
	background-color: var(--bgcolor1);
	padding: 0 1rem;
	white-space: nowrap;
	border: 1px solid var(--brcolor1);
}

.sitemap .toggle:checked + * label {
	background-color: #ccc;
}

.tabs-container .articles li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

/* ============== Responsive design ========= */

@media screen and (max-width: 575px) {
	.brand {
		font-size: 80%;
	}

	.posts > article {
		margin: 2rem 0;
	}

	#nav-footer > *:first-of-type {
		flex: 1 80%;
		text-align: center;
		border-top: 1px solid #444;
	}

	div[data-gallery] figure {
		width: 90%;
		margin: 1rem 0;
	}

	.multi-cols {
		column-count: 2;
	}
}

@media screen and (min-width: 576px) {
	body {
		--art-cols: 2;
	}

	.colspan-full {
		grid-column: 1 / -1;
	}

	.main-content > header {
		margin-bottom: 2rem;
	}

	.main-content > .posts:not(.flex) {
		display: grid;
		grid-template-columns: repeat(var(--art-cols), 1fr);
		gap: 2rem;
	}

	.main-content > .posts.flex {
		display: flex;
		justify-content: space-around;
		gap: 2rem;
	}

	.main-content > .posts.flex > article:not(.solo) {
		flex: 1 !important;
	}

	#art-navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	div[data-gallery] {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 0.5rem;
	}

	.multi-cols {
		column-count: 3;
	}

	#frm-search .dates {
		justify-content: space-around;
	}

	#frm-search .dates label {
		display: inline-flex;
		gap: 1rem;
	}

}

@media screen and (max-width: 767px) {
}

@media screen and (min-width: 768px) {
	.multi-cols {
		column-count: 4;
	}

	#frm-search .extra {
		display: grid;
		grid-template-columns: repeat(3, auto);
		gap: 1rem;
	}
}

@media screen and (max-width: 1023px) {
	#toggle-menu + label + ul {
		position: fixed;
		left: 0;
		top: 0;
		max-height: 100vh;
		padding: 1rem;
		transition: transform 0.5s ease;
	}

	#toggle-menu:not(:checked) + label + ul {
		transform: translateX(-100%);
	}

	#toggle-menu + label {
		display: block;
		width: max-content;
		margin-top: 1rem;
	}

	#toggle-menu:checked + label {
		margin-left: auto;
	}

	#menu > li:not(:hover) > :not(.active) + .sub-menu {
		display: none;
	}

	.sub-menu {
		margin-left: 2rem;
		padding-top: 0.25rem;
	}

	#nav-header {
		display: flex;
		justify-content: space-between;
	}

	#tag-list a { /* fond sombre */
		color: var(--fg-color1);
	}

	.tabs-container.level-0 {
		height: calc(100vh - 16.5rem);
	}
}

@media screen and (min-width: 1024px) {
	/* aside passe sur le côté */

	.with-sidebar {
		display: grid;
		grid-template-rows: auto auto 1fr auto;
		grid-template-columns: 1fr 32%; /* .., width of sidebar */
		grid-template-areas:
			'header header'
			'nav nav'
			'main sidebar'
			'footer footer';
		min-height: 100vh;
		grid-gap: 0;
	}

	.with-sidebar > .main-header {
		grid-area: header;
	}

	.with-sidebar > #nav-header {
		grid-area: nav;
		position: sticky;
		top: 0;
		padding: 0;
		margin-bottom: 1rem;
		background-color: #fff;
		border-bottom: 1px solid var(--brcolor1);
	}

	#toggle-menu + label + ul span,
	#toggle-menu + label + ul a {
		padding: 0.5rem 1rem;
	}

	.with-sidebar #menu {
		padding: 0.75rem;
	}

	.with-sidebar > .main-content {
		grid-area: main;
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.with-sidebar > .main-aside {
		grid-area: sidebar;
	}

	.with-sidebar > #nav-footer {
		grid-area: footer;
		position: sticky;
		bottom: 0;
	}

	.brand {
		font-size: 150%;
	}

	.burger-button,
	.icon-search {
		display: none;
	}

	#menu > li {
		position: relative;
		display: inline-block;
	}

	.group + ul {
		position: absolute;
	}

	.sub-menu {
		padding: 1rem 0.25rem;
	}

	.sub-menu a {
		display: inline-block;
		width: 100%;
	}

	#menu li:hover {
		background-color: #666;
	}

	#menu li:not(:hover) > .sub-menu {
		display: none;
	}

	.sitemap {
		height: 100%;
		display: grid;
		grid-template-rows: auto 1fr;
	}

	.sitemap main > div {
		height: 100%;
	}

	.sitemap .tab-content {
		max-height: none;
		height: auto;
	}

	.sitemap .tab-content.level-2 {
		height: auto;
	}

	.sitemap .tab-content .tab-content {
		bottom: 0;
	}

	.sitemap .tabs-container {
		height: 100%;
		max-height: none;
	}

	.sitemap .tabs-container .tabs-container {
		height: calc(100% - 4rem);
	}

	.main-aside > ul > li {
		background-color: #fff;
	}

	.with-sidebar .main-aside {
		background-color: inherit;
		color: inherit;
		border: none;
	}

	.with-sidebar .main-aside > ul > li {
		padding: 0.15rem 0 0.5rem;
		-webkit-box-shadow: 0 0 7px 0 var(--bd-color3);
		-moz-box-shadow: 0 0 7px 0 var(--bd-color3);
		box-shadow: 0 0 7px 0 var(--bd-color3);
	}

	.with-sidebar .main-aside > ul > li:not(:last-of-type) {
		margin-bottom: 2rem;
	}

	.with-sidebar .main-aside h3 {
		background-color: var(--bg-color1);
		color: var(--fg-color1);
	}

	.with-sidebar .main-aside {
		padding: 0;
		padding-left: 1rem;
		padding-right: 0.75rem;
	}

	.multi-cols {
		column-count: 2;
	}

	.multi-cols,
	#author-list {
		padding-right: 1rem;
	}

	#arch-list {
		padding-left: 0.5rem;
		font-size: 85%;
	}

	#arch-list li:last-of-type {
		border-top: 5px solid var(--bd-color3);
	}
}

@media screen and (max-width: 1329px) {
}

@media screen and (min-width: 1330px) {
	html {
		background-color: var(--bg-color1);
	}

	body {
		--art-cols: 3;
		max-width: 1390px;
		margin: 0 auto;
	}

	.with-sidebar {
		grid-template-columns: 1fr 23.5%; /* .., width of sidebar */
	}

	.brand {
		font-size: 200%;
	}

}


/* ----- print ------ */
/*Connection*/
a#log {
  background:gold;
  width:auto;
  padding:0 0.5em;
  border-radius:5px;
  box-shadow:3px 3px 3px;
  border:solid 1px gray;
}