/*!
Theme Name: Garance Lemarié v1, mai 2026
Theme URI: http://underscores.me/
Author: Michel Ravey
Author URI: https://www.michelravey.com
Description: Site officiel de Garance Lemarié
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: garancelemarie
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

garanceLemarie is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
  --darkBlue: #323242;
  --golden: #b89441;
  --golden2:  #b5ab2d;
  --green:  #3b7761;
  --flashyGreen: #c3e314;
  --laborLight: #d6f0ce;
  --laborDark: #3b7761;
  --smallNav:  #373E4A;
  
  --headerWidth : 200px;
  --headerWidth_S : 175px;
  --headerSmartphoneHeight : 100px;

  --containerMaxWidth : 1200px;
  --presMaxWidth : 700px;
  --newsMaxWidth : 1000px;
  
  --space30:  30px;
  --space50:  50px;

}

/* WP admin bar fix */
html {
    margin-top: 0 !important;
}

* html body {
    margin-top: 0 !important;
}
@media screen and (max-width: 782px) {
    html {
        margin-top: 0 !important;
    }
}


body { margin:0;background-color:var(--darkBlue); }
header, div {
	box-sizing: border-box;
	border: solid 0px #d0b7ea;
}
.clear { clear:both; }


a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
a:link, a:visited { color: var(--darkBlue); }
a:hover, a:active { color: var(--flashyGreen); }



/* ///////////////////////////////// 		

HEADER

///////////////////////////////// */

header {
	position: fixed;
	width: var(--headerWidth);height: 100vh;
	background-color: var(--golden);
	padding: var(--space50) var(--space30);
	z-index: 10000;
}
#header-container {
	height: 100%;
	overflow: auto;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
#header-smartphone { 
	position: fixed;
	width: 100vw;
	height: var(--headerSmartphoneHeight);
	background-color: var(--golden);
	display:none; 
	z-index: 10000;
	padding: 0px 15px;
}
#header-smartphone div { 
	position:relative; 
	font-family: "nitti-grotesk-condensedlight", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 36px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1em;
}

#logo {
	position: relative;
 	margin: 0 auto 75px auto;
 	cursor: pointer;
 	z-index: 1000;
 	font-family: "nitti-grotesk-condensedlight", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 15px;
	text-transform: uppercase;
	text-align: center;
}
#logo img { width:100px; }

#logo_smartphone {}

#logo_smartphone img {
	position: relative;
	width: 60px;padding-top: 10px;
}

#nav {
	position: relative;
	margin-bottom: 30px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	flex-grow: 1;
	text-align: center;

}
.nav-item a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
.nav-item a:link, .nav-item a:visited { color: black; }
.nav-item a:hover, .nav-item a:active { color: var(--flashyGreen); }
.nav-item {
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	text-transform: uppercase;
	color: #000;
}
.nav-item.on a { color:var(--flashyGreen); }
#nav-legal { font-size:12px; }

#header-lang {
	position: relative;
	margin-top: 40px;
	top: -3px;right: 0;
	margin-right: var(--space50);
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	font-family: "apparat", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	color: var(--blueGrey);
}

#menu-hamburger {
  
  right: -15px;
  width:100px;height:100px;
  z-index:100;
  display: none;
}


#menu-smartphone {
	position: fixed;
	width: 100vw;height: calc(100vh - var(--headerSmartphoneHeight));
	top: var(--headerSmartphoneHeight);left: 0;
	background-color: var(--golden);
	z-index: 10000;
	display: none;
	overflow: auto;
  padding-bottom: var(--space30);  
}
.smartphone-item { 
	padding-bottom:12px; 
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 32px;
	text-transform: uppercase;
	color: #000;
}
#menu-smartphone a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
#menu-smartphone a:link, #menu-smartphone a:visited { color: black; }
#menu-smartphone a:hover, #menu-smartphone a:active { color: var(--flashyGreen); }
#menu-smartphone.on a { color:var(--flashyGreen); }

#smartphone-nav-lang {
	font-size: 28px;
}

#index-footer-container {
	font-family: "nitti-grotesk-condensedlight", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	text-transform: uppercase;
}


/* ///////////////////////////////// 		

INDEX SLIDER

///////////////////////////////// */

#index-slider {
	position: absolute;width: calc(100vw - var(--headerWidth));height: 100vh;
	left: var(--headerWidth);
}

#index-slider-infos {
	position: absolute;
	bottom: var(--space50);
	left: var(--space50);
	width: 425px;height: 154px;
	z-index: 1000;
	overflow: hidden;
}
#index-slider-infos-container {
	height: 100%;
	display: flex;flex-flow: row nowrap;
	opacity: 1;
}
.index-slider-info {
	width: 421px;height: 150px;
	display: none;
	/*background-color: #fff;*/
	/*border: solid 2px black;*/
	padding: 12px 25px;
	cursor: pointer;
	
}

.index-slider-title {
	position: relative;padding-bottom: 5px;
	font-family: sorts-mill-goudy, serif;
	font-weight: 500;
	font-style: italic;
	font-size: 64px;
	text-shadow: 1px 1px 1px #b89441;
}
.index-slider-place {
	position: relative;
	margin-top: -15px;
	padding-bottom: 5px;
	font-family: linotype-sabon, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 28px;
}
.index-slider-date {
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	text-transform: uppercase;
}
.index-slider-cta {
	position: absolute;
	bottom: 25px;/*right: 30px;*/
	font-family: "nitti-grotesk-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
}










/* ///////////////////////////////// 		

INDEX NEWS

///////////////////////////////// */

#index-news {
	position: absolute;
	/*top: 100vh;*/
	top: 80px;
	width: calc(100vw - var(--headerWidth));
	left: var(--headerWidth);
	padding: var(--space50);
	height: 100vh;
}
#index-news-container {
	position: relative;
	max-width: var(--containerMaxWidth);
	padding-bottom: var(--space30);
}
#index-news-title {
	position: relative;margin: 0 0 50px 0;
	font-family: sorts-mill-goudy, serif;
	font-weight: 500;
	font-style: italic;
	font-size: 72px;
	color: var(--flashyGreen);
	padding-left: var(--space30);
}
#index-news-title.caps { text-transform: uppercase; }
#index-news-featured-img {
	position: absolute;
	width: 300px;height: 300px;
}
.index-news-featured-img {
	position: relative;
	float: left;
	width: 250px;min-height: 200px;
	margin-right:  var(--space30);
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	justify-content: flex-start;
	align-items:  flex-start;

}
.index-news-featured-img:first-child { display:block; }
.index-news-featured-img img { 
	max-width: 100%;max-height: 100%;
	border: solid 1px var(--golden); 
	transition: all 0.2s ease-in;
}
#index-news-items {
	position: relative;
	
}
/*#index-news-items a { text-decoration: none;color:black; }*/
.index-news-item {
	position: relative;
	padding: var(--space30) 0;
	margin-bottom: 0;
	cursor: pointer;
	
	border-top: solid 1px #3B655B;
}	
.index-news-item:first-child { opacity:1; }
.index-news-item-cat {
	/*
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	*/
	font-family: "nitti-grotesk-condensedlight", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--laborDark);
	margin-bottom: 15px;
}
.index-news-item-title {
	/*
	font-family: sorts-mill-goudy, serif;
	font-weight: 500;
	font-style: normal;
	*/
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 36px;
	line-height: 1.1em;
	
	margin-bottom: var(--space30);
	transition: all 0.2s ease-in;
}

.index-news-item-title a {
	text-decoration: none;
	transition: all 0.2s ease-in;
}
.index-news-item-title a:link, .index-news-item-title a:visited { color: var(--golden); }
.index-news-item-title a:hover, .index-news-item-title a:active { color:var(--flashyGreen); }

.index-news-item-place {
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	color: var(--laborLight);
	margin-bottom: 8px;
}
.index-news-item-date {
	/*
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	*/
	font-family: "nitti-grotesk-condensedlight", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: var(--laborDark);
}






/* ///////////////////////////////// 		



PAGES



///////////////////////////////// */




/* ///////////////////////////////// 		

BIJOUX

///////////////////////////////// */

#smallNav {
	position:absolute;
	top: var(--space30);
	left: var(--headerWidth);
	width: calc(100% - var(--headerWidth));
	height: 50px;
	
	
	display: flex;
	align-items: center;
	z-index: 1000;
}
#smallNav.fixed { position:fixed; }

#smallNav-bg {
	position: absolute;
	top: 0;left: 0;
	width: 100%;height: 100%;
	background-color: var(--smallNav);
	opacity: 0.9;
}
.retour {
	font-family: "nitti-grotesk-condensed", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 20px;
	color: var(--golden);
	text-transform: uppercase;
	padding-left: var(--space50);
	z-index: 2000;
}
.retour a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
.retour a:link, .retour a:visited { color: var(--golden); }
.retour a:hover, .retour a:active { color: var(--flashyGreen); }
.retour img { position: relative;height:24px;top:5px;padding-right:15px; }
.retour-sep { color:var(--green); }

#smallNav-button-container {
	position: absolute;
	width: 640px;height: 50px;
	/* border: solid 1px var(--golden2); */
	font-family: "nitti-grotesk-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: var(--flashyGreen);
	text-transform: uppercase;

}
#smallNav-gallery {
	position:  absolute;
	top: 0;right: -50px;
	width: fit-content;
	height: 100%;
	border: solid 0px tomato;
	background-image: url(imgs/fleche-fiche-bas.svg);
	background-position: right center;
	background-size: 16px;
	background-repeat: no-repeat;
	padding: 17px 33px 0 0;
	cursor: pointer;
}
#smallNav-infos {
	position:  absolute;
	top: 0;right: -50px;
	width: fit-content;
	height: 100%;
	border: solid 0px tomato;
	background-image: url(imgs/fleche-fiche-haut.svg);
	background-position: right center;
	background-size: 16px;
	background-repeat: no-repeat;
	padding: 17px 33px 0 0;
	cursor: pointer;
	display: none;
}


#screen-content {

	position: relative;
	top: 130px;left: var(--headerWidth);
	width:  calc(100% - var(--headerWidth));
	padding: 0 var(--space50) var(--space50) var(--space50);

	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 19px;
	color: var(--laborLight);
}

#screen-content a {
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
#screen-content a:link, #screen-content a:visited { color: var(--golden); }
#screen-content a:hover, #screen-content a:active { color: var(--flashyGreen); }

.screen-title {
	position: relative;
	max-width: 540px;
	margin: 0 0 60px 0;
	font-family: sorts-mill-goudy, serif;
	font-weight: 500;
	font-style: italic;
	font-size: 72px;
	color: var(--flashyGreen);
	line-height: 1.1em;
	padding-left: var(--space30);
}
.screen-title.caps {
	text-transform: uppercase;
}

.screen-grid {
	position: relative;
	max-width: var(--containerMaxWidth);
	padding: var(--space30) 0;
	
}
.screen-grid.wrap {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.screen-thumb {
	max-width: 30%;
	margin-bottom: var(--space50);
}
.screen-thumb-img {  }
.screen-thumb-img img { 
	position: relative;
	display: block;
	border:solid 1px var(--golden);
	width:100%;margin-bottom: 15px; 
	cursor: pointer;
	transition: all ease-in 0.2s;
}
.screen-thumb-img img:hover {
	border:solid 1px var(--flashyGreen);
}

.screen-thumb-title {
	font-family: linotype-sabon, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 25px;
	line-height: 1.1em;
	color: var(--golden);
	
	transition: all 0.2s ease-in;
}

.screen-labor {
	position: relative;
	max-width: 640px;
	text-align: justify;
  text-justify: inter-word;
  line-height: 1.3em;
  margin-bottom: 75px;
}


/* masonry */
/* vignettes de la grille d'arts visuels et numériques */
.case, .case-unit { 
    position:relative;
    height:auto;
    cursor:pointer;
    float:left;
    width:33.33%;padding:0% 2% 2% 2%;
    border:solid 0px red;
}
.case img, .case-unit img { width:100%; }
.case-titre { font-family: 'MavenPro-Regular';padding-top: 7px;font-size:16px; }
.case-legende { font-family: 'MavenPro-Regular';margin-top: 7px;padding: 5px 7px;font-size:12px;background-color:#efefef;text-align:center; }


.screen-grid-filters {
	position: relative;
}
.screen-grid-filters div { display:inline;cursor: pointer; }
.screen-grid-filters-title {
	font-family: "nitti-grotesk-condensed", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 20px;
	color: var(--green);
	text-transform: uppercase;
}
.screen-grid-filter {
	font-family: "nitti-grotesk-condensed", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 18px;
	color: var(--golden);
	text-transform: uppercase;
	transition: all 0.2s ease-in;
}
.screen-grid-filter:hover {
	color: var(--golden2);
}

.screen-grid-filters-all {
	position: relative;
	font-family: "nitti-grotesk-condensed", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	color: var(--golden2);
	text-transform: uppercase;
	display: none;
	margin-bottom: 7px;
	cursor: pointer;
}