/*
Theme Name: Grandeur Nature 2026
Theme URI: 
Author: Nathanael Tardif
Author URI: 
Description: thème pour le site grandeur nature 2026
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2025.4
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: grandeurnature2025

Grandeur Nature 2025

*/

 @font-face {
        font-family: 'Garabosse-Gaillarde';
        font-weight: 400;
        font-style: normal;
        src: url('assets/fonts/Garabosse-Gaillarde.woff') format('woff')
    }
  @font-face {
        font-family: 'Garabosse-Mignonne';
        font-weight: 400;
        font-style: normal;
        src: url('assets/fonts/Garabosse-Mignonne.woff') format('woff')
    }

   @font-face {
        font-family: 'Garabosse-Nonpareille';
        font-weight: 400;
        font-style: normal;
        src: url('assets/fonts/Garabosse-Nonpareille.woff') format('woff')
    }

     @font-face {
        font-family: 'Garabosse-Parangonne';
        font-weight: 400;
        font-style: normal;
        src: url('assets/fonts/Garabosse-Parangonne.woff') format('woff')
    }

     @font-face {
        font-family: 'Garabosse-Perle';
        font-weight: 400;
        font-style: normal;
        src: url('assets/fonts/Garabosse-Perle.woff') format('woff')
    }


:root {
  --black: #1E1B3A;
  --gray: #F2F4F3;
  --green: #69FCB0;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


html{
	font-family: 'Garabosse-Parangonne', serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--black);
	background-color: var(--gray);
	line-height: 1.35;
}

body{
	    overflow-x: hidden;
	   /* cursor: url('assets/cursor.png'), auto;*/

}

/*commons*/
.mainColumn{
	margin: auto;
	max-width: 1500px;
	padding: 0px 40px;
}

.title1{
	font-size: 2.7rem;
}
h2{
	
	font-size: 2rem;
font-family: 'Garabosse-Perle', serif;

}
.title2, h3{
	font-size: 1.33rem;
	font-family: 'Garabosse-Perle', serif;
}

.title2-light{
	font-size: 1.33rem;
	font-family: 'Garabosse-Gaillarde', serif;
}

strong{
	/*font-weight: 600;*/
	font-family: 'Garabosse-Nonpareille', serif;
}

em{
	 font-style: italic;
}


.center{
	text-align: center;
}

.relative{
	position: relative;
}

a{
	text-decoration: none;
	color: var(--black);
}
a:hover, a:visited a:active{
	color: var(--black);
}

#header{
	position: sticky;
	top: 0px;
	background:	var(--gray);
	z-index: 100;
	/*height: 90px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;*/
}

#header #menu{
	position: relative;
	margin:auto;
}

#menu{
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#menu ul{
	display: flex;
	justify-content: space-between;
	width: 77%;
	margin:auto;
}

#menu li{
	list-style-type: none;
	margin-left: 0px;
	display: flex;
  justify-content: center;
  align-items: center;
}
#menu li span{
	text-align: center;
 	display: block;
 	font-size: 1.2rem;
}

.grid{
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 20px;
}

li{
	list-style-type: disc;
	margin-left: 16px;
}

footer{
	padding: 75px;
	position: relative;
	width: fit-content;
	margin: auto;
	padding-bottom: 0px;
	margin-top: -250px;
}

footer .background{
max-width: 1300px;
  width: 80vw;
display: block;
  margin: auto;
  pointer-events: none;
}

footer ul {
	display: flex;
	align-items: center;
  justify-content: space-evenly;
  gap: 50px;
  flex-wrap: wrap;
}
footer li{
	list-style-type: none;
	margin-left: 0px;
}
footer li img{
	max-height: 75px;
	width: auto;
}

footer .footerLogo{
	position: absolute;
}

footer #copyright{
	
	position: absolute;
	bottom: 15px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	font-size: 0.8rem;
}

body .wp-block-columns {
 column-gap: 15px;
 margin-block-start: 15px;
}

body .wp-block-columns:first-child {
 margin-block-start: 0px;
}

.square{
	 aspect-ratio : 1 / 1;
	 grid-column: span 1;
	 position: relative;
	/* background: red;*/
}




/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed !important; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: var(--gray);; /* Black fallback color */
  overflow-x: hidden; /* Disable horizontal scroll */
 transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  display: block; /* Display block instead of inline */
}

/* When you mouse over the navigation links, change their color */
/*.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}*/

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  width: 100%;
  text-align: center;
	
}

.overlay .closebtn img{

	  display: block;
		
		position: fixed !important;
    	background: var(--gray) !important;
    	padding: 15px !important;
}

.overlay ul{
/*width: 75%;
  margin: auto;*/
  margin-left: 40%;
}

.overlay li{
	list-style-type: none;
  margin-left: 0px;
  margin-bottom: 25px;
  text-align: left;
  position: relative;

}

.p5Canvas{
	max-width: 100vw;
  max-height: 80vw;
}

/*

page

*/

main .page a {

	border-image-source: url(assets/surlignage.png);
border-image-slice: 0 8% fill;
  border-image-width: 0px 1ch 0px 1ch;
  border-image-outset: 0.3ch 1ch;
  border-image-repeat: round stretch;
  background-color: transparent;
  box-decoration-break: clone;
}


.page .mainColumn>.wp-block-columns{
	margin-bottom: 150px;
}

.page .mainColumn>.wp-block-columns:last-child{
	margin-bottom: 0px;
}

.page .entry-content>figure:first-child img{
	display: block;
	width: 40%;
	max-width: 600px;
	margin-top: 175px;
	margin-bottom : 100px;
}


.page .picto img{
	display: block;
	margin:auto;
	
	height: auto;
	margin-top: -25px;
}

/* front page */
#p5-container{
	display: flex;
  justify-content: end;
  align-items: center;
  position: relative;
  max-width: 2000px;
}

#p5-container img{
	max-width: 800px;
  display: block;
  width: 50vw;
  position: absolute;
  z-index: 1;
  transform: translateX(-50%);
  left: 50%;

}


.site-excerpt{
	grid-column: 2 / span 7;
	font-size: 2rem;
	text-align: center;
	margin-bottom: 200px;
	margin-top: 200px;
}

.thumbnail{
	grid-column: span 3;
}
.thumbnail img{
	width: 80%;
  height: auto;
  opacity: 1;
  transition: opacity .4s;
  border: 2px solid var(--black);
  border-radius: 70px;
  display: block;
  margin: auto;
}

.thumbnail:hover img{
	opacity: .75;
}
.thumbnail {
	margin-top: 15px;
}

.thumbnail .infos{
	padding-top: 50px;
  padding-bottom: 100px;
}


#mapExcerpt{
font-family: "Garabosse-Perle";
  width: 75vw;
  font-size: 2rem;
  display: flex;
  align-items: center;
}

#mapExcerpt img{
margin-right: 25px;
}


#map{
	position: relative;
	grid-column: span 9;
}
#map img{
	width: 100%;
	height: auto;
}
.mapMarker{
	position: absolute;
	z-index: 1;
	width: 45px;
	height: 45px;
	cursor: pointer;
}

.mapInfos{

}

/*.mapInfos .title2, .mapInfos .title2-light, .mapInfos p{

	color: var(--gray);
}*/

.mapInfos .title2{

	font-family: "Garabosse-Perle";
}

/*.mapInfos .title2-light{

	font-family: "Garabosse-Perle";
}*/

.mapInfos a p{

	font-family: "Garabosse-Perle";
	font-size: 1rem;
border: 2px solid var(--black);
  border-radius: 22px;
  display: inline-block;
  padding: 12px 30px;
  margin-top: 25px;
}

#map .mapPopup img{
	width: 40%;
	margin: auto;
    margin-top: auto;
  display: block;
  margin-top: 16px;
}

.mapPopup{
	display: none;
	position: absolute;
  z-index: 1;
  top: -15%;
  right: 0%;
  background-color: var(--green);
  width: 400px;
  height: 400px;
  border-radius: 250px;
  box-shadow: 0px 0px 0px 25px var(--green);
  border: 2px solid var(--black);
  /*rotate: 15deg;*/
}





/*single*/

.single .mainColumn{
	margin-top: 200px;
}

.single h2{
	padding-top: 6px;
}

.single h3{
	margin-top: 0px;
}

.single h3:first-of-type{
	margin-top: 75px;
}


.single h4{
	font-family: 'Garabosse-Perle', serif;
	margin-top: 75px;
	margin-bottom: 50px;

  padding-left: 45px;
  background-image: url('assets/plan.png');
    background-repeat: no-repeat;
    background-size: 30px auto;
}

.single h4::before{
	/* content: '';
  background:url('assets/plan.png');
 
  display: block;*/
}

.single h5{
	text-decoration: underline;
	font-family: 'Garabosse-Perle', serif;
}

.single ul{
	font-size: .75rem;
}

.single .site-excerpt {
	margin-top:100px;
	margin-bottom: 50px;
}

body .single .wp-block-columns {
  column-gap: 70px;
  margin-bottom:70px;
}

body .single .wp-block-columns.no-gap {
  column-gap: 15px;
}

.swiper .wp-block-paragraph:first-of-type{
	margin-top: 25px;
text-align: center;
}


/*
.single .site-excerpt img{
	width: 75px;
  height: auto;
  margin-top: -10px;
  margin-right: 20px;
}
*/

/*media queries*/

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 800px) {

	.title1{
		font-size: 2.2rem;
	}

	.title2, h3{
	font-size: 1.4rem;
}


	#header{
		position: fixed;
	}

	#container{
		  margin-top: 70px;
	}

	#mobile-menu{
		display: block;
		border-right: 3px solid;
  margin-left: -3px;
	}
	#mobile-hamburger{
		display: block;
		text-align: center;
		position: fixed !important;
    	background: var(--gray) !important;
    	padding: 15px !important;
    	    z-index: 2;

	}

	#mobile-hamburger img{
		width: 35px;
  		height: auto;
	}


	#menu{
		display: none;
	}
	.separator {
    opacity: 0;
    max-height: 50px;
        overflow: hidden;
}
#p5-container{
	height: calc( 100vh - 100px );
	width: 100vw;
}

#p5-container h1 {
    font-size: 25vw;
}

	#p5-container div{
	position: absolute;
		top:0px;
		left:0px;		
		padding: 20px;
		height: 255px;
		min-width: 100vw;
		background: var(--gray);

	}


	.grid{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-excerpt{
		grid-column: span 3;
		/*margin-top:150px;
		margin-bottom:150px;*/
	}

	.thumbnail{
		grid-column: span 3;
	}

	.thumbnail .infos {
	  padding-top: 20px;
	  padding-bottom: 20px;
	}
	#mapLegend{
	grid-column: span 3;
	order: 2;
	}

	#map{
		margin-top: 400px;
	}
	.mapPopup{
		top: -400px;
	}

	.mapMarker {
  width: 25px;
  height: 25px;
}
	.single .titleContainer{
		grid-column: span 2;
	}
	.single #content{
		grid-column: span 3;
	}
	.single #medias{
		grid-column:  span 3;
	}


.page .entry-content > figure:first-child img {
  width: 100%;
}
	footer{
		margin-top: 0px;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 800px) {


	#header{
		position: sticky;
	}

	#container{
		  margin-top: 0px;
	}
	
	#mobile-menu{
		display: none;
	}
	#mobile-hamburger{
		display: none;
	}

	

	#menu{
		display: flex;
	}
/*
#p5-container{
	height: calc( 100vh - 100px );
}

.separator .square:last-child {
    display: none;
}


		#p5-container div{
	position: absolute;
		top:0px;
		left:0px;
	
		padding: 20px;
		height: 305px;
		width: 600px;
	}

	#p5-container h1 {
	  font-size: 14vw;
	}

	#p5-container .title2 {
	  font-size: 1rem;
	}

	.grid{
	grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	#site-excerpt{
		grid-column: 2 / span 6;

	}

	.thumbnail{
		grid-column: span 4;
	}
	#mapLegend{
	grid-column: span 4;
	}


	.single .titleContainer{
		grid-column: span 7;
	}
	.single #content{
		grid-column: span 4;
	}
	.single #medias{
		grid-column:  span 4;
	}*/
}


/* Extra large devices (laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

	#header{
		position: sticky;
	}

	#container{
		  margin-top: 0px;
	}

	.visible .square:last-child {
    display: block;
}
#p5-container{
	height: calc( 100vh - 100px );
}

	#p5-container div{
	position: absolute;
		top:0px;
		left:0px;
		
		padding: 20px;
		height: 390px;
		width: 620px;
	}
	#p5-container h1 {
	  font-size: 9rem;
	}

	#p5-container .title2 {
	  font-size: 2rem;
	}

	.grid{
	grid-template-columns: repeat(9, minmax(0, 1fr));
	}
	#site-excerpt{
	grid-column: 2 / span 7;
	/*margin-top:150px;
	margin-bottom:150px;*/
	}

	.thumbnail{
		grid-column: span 3;
	}
	#mapLegend{
	grid-column: span 3;
	}

	/*#map{
		grid-column: 5 / span 4;
	}*/


	/*single*/
	.single .titleContainer{
		grid-column: span 7;
	}
	.single #content{
		grid-column: span 2;
	}
	.single #medias{
		grid-column:  4 / span 6;
	}
} 


@media only screen and (min-width: 1200px) and (max-width: 1800px)  {
	.site-excerpt {
  grid-column: 3 / span 5;
}
}