@charset "UTF-8";

/*
Theme Name: Material 3 for Wordpress
Theme URI: https://m3.vole.photos/
Author: YJ Studio Jean F. Vole
Author URI: https://jf.vole.photos/
Description: Un theme Material Design 3 
Requires at least: 6.0.0
Tested up to: 6.0.0
Requires PHP: 7.3
Version: 3.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yjstwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Material Design WordPress Theme, (C) 2022 Jean F. Vole
Material Design is distributed under the terms of the GNU GPL.
*/

/***********************
	RAZ des elements
 ***********************/
a {
	text-decoration: inherit;
	color: inherit;
}

/***********************
	Body Grid 
 ***********************/
body {
	max-width: 1024px;
	margin: auto;
	display: grid;
	grid-template-areas: "body-aside body-wrapper";
	grid-template-columns: 80px auto;
	grid-gap: 0px;
}

body #body-aside {
	grid-area: body-aside;
	min-height: 100vh;
	position: fixed;
	z-index: 1;
	
}

body #body-wrapper {
	grid-area: body-wrapper;
	display: flex;
	flex-flow: column;
	gap: var(--md-layout-gap);
	padding: var(--md-layout-gap);
}

body #body-main>*:not(:last-child) {
	margin-bottom: var(--md-layout-gap) !important;
}

body #body-main>*:last-child, :where(.wp-block-columns):last-child {
	margin-bottom: 0 !important;
}

body #body-main-pagination {
	display: flex;
	gap: var(--md-layout-gap);
	width: fit-content;
	margin: auto;
}

/***********************
	Index Grid 
 ***********************/
#body-main-index-full {
	display: flex;
	flex-flow: column;
	gap: var(--md-layout-gap);
}

@media only screen and (max-width: 599px) {
	#body-main-index-excerpt {
		display: flex;
		flex-direction: column;
		gap: var(--md-layout-gap);
	}
	#body-main-post-format {
		display: flex;
		flex-direction: column;
		gap: 0px;
	}
}

@media only screen and (min-width: 600px) and (max-width: 839px) {
	#body-main-index-excerpt {
		display: grid;
		grid-template-columns: calc(50% - ( var(--md-layout-gap)/2))
			calc(50% - ( var(--md-layout-gap)/2));
		gap: var(--md-layout-gap);
	}
	#body-main-post-format {
		display: flex;
		flex-direction: column;
		gap: 0px;
	}
}

@media only screen and (min-width: 840px) {
	#body-main-index-excerpt {
		display: grid;
		grid-template-columns: calc(33.33% - ( 2 * var(--md-layout-gap)/3))
			calc(33.33% - ( 2 * var(--md-layout-gap)/3))
			calc(33.33% - ( 2 * var(--md-layout-gap)/3));
		gap: var(--md-layout-gap);
	}
	#body-main-index-excerpt div.sticky:first-of-type {
		grid-column: 1/3;
	}
	#body-main-post-format {
		display: grid;
		grid-template-columns: 50% 50%;
		gap: 0px;
	}
}

#body-main-index-grid {
    display: grid;
    grid-template-columns: auto calc(40% - 3px);
	gap: 6px;
}

/***********************
	Page Grid 
 ***********************/
#body-main-singular, #body-main-archive {
	gap: var(--md-layout-gap);
}

#body-main-singular-main, #body-main-archive-main {
	display: flex;
	flex-direction: column;
	gap: var(--md-layout-gap);
}

#body-main-singular-aside, #body-main-archive-aside {
	display: flex;
	flex-direction: column;
	gap: var(--md-layout-gap);
}

@media only screen and (max-width: 599px) {
	#body-main-singular, #body-main-archive {
		display: flex;
		flex-direction: column;
	}
	#body-main-singular-main-header {
		display: flex;
		flex-flow: column;
		gap: var(--md-layout-gap);
	}
	#body-main-content {
		display: flex;
		flex-direction: column;
		gap: var(--md-layout-gap);
	}
	#body-main-archive-aside .leaflet {
		height: 50vw;
	}
	#body-main-singular-prev-next {
		display: flex;
		flex-flow: column;
	}
	#body-main-singular-main-thumbnail {
		min-height: 100vw
	}
}

@media only screen and (min-width: 600px) and (max-width: 839px) {
	#body-main-singular, #body-main-archive {
		display: flex;
		flex-direction: column;
	}
	#body-main-singular-main-thumbnail {
		min-height: 50vw;
	}
	#body-main-content {
		display: flex;
		flex-flow: column;
		gap: var(--md-layout-gap);
	}
	#body-main-archive-aside .leaflet {
		height: 50vw;
	}
	#body-main-singular-prev-next {
		display: flex;
		flex-flow: column;
	}
}

@media only screen and (min-width: 840px) {
	#body-main-singular, #body-main-archive {
		display: flex;
		flex-direction: column;
	}
	#body-main-singular-main-thumbnail {
		min-height: 25vw;
	}
	#body-main-content {
		display: grid;
		grid-template-columns: calc(50% - ( 2 * var(--md-layout-gap)/3))
			calc(50% - ( 2 * var(--md-layout-gap)/3));
		grid-gap: var(--md-layout-gap);
	}
	#body-main-archive-aside .leaflet {
		height: calc(50vh - ( 2 * var(--md-layout-gap)/3));
	}
	#body-main-singular-prev-next {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-gap: 0px;
	}
}

#body-main-singular-main-header .layout-summary,
	#body-main-archive-main-header .layout-summary {
	display: flex;
	flex-flow: column;
	gap: var(--md-layout-gap);
	margin-left: var(--md-layout-gap);
	margin-top: var(--md-layout-gap);
}

#body-main-singular-main-header .layout-summary>*,
	#body-main-archive-main-header .layout-summary>* {
	margin: 0px;
	font-style: italic;
}

#body-main-singular-main-header .layout-summary>*:last-child,
	#body-main-archive-main-header .layout-summary>*:last-child {
	margin-bottom: var(--md-layout-gap);
}

#body-main-singular-main-thumbnail {
	background-position: center;
	background-size: cover;
	border-radius: var(--md-card-border-radius);
	position: relative;
}

#body-main-singular-main-thumbnail>* {
	position: absolute;
	bottom: 0;
	width: 100%;
}

#body-main-singular-main-thumbnail h1 {
	padding-left: 12px;
}

#body-main-singular-main-thumbnail h1, .layout-action-top> *, .layout-action-bottom> * {
	color: var(--md-sys-color-on-primary-container);
	background: linear-gradient(0deg, var(--md-sys-color-primary-container),
		#fff6);
	border-radius: var(--md-card-border-radius);
}

#body-main-singular-main .leaflet {
	height: 75vh;
	border-radius: var(--md-card-border-radius);
}

.wp-block-grid {
	display: grid;
    gap: 6px;
    margin: 0;
}

.wp-block-grid > *{
	margin: 0 !important;
}

.wp-block-grid.grid-5 {
    grid-template-columns: repeat(5, calc( 20% - (6px * 4 / 5)));
}