/*!
Theme Name: Under the Starry Vault v2
Theme URI: https://www.underthestarryvault.com/
Author: Michel Ravey
Author URI: https://www.michelravey.com/
Description: Sous la voûte étoilée | Under the Starry Vault
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: utsv
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

v2 - Fully Editable - 2026
*/

body { margin:0; }
div { 
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: solid 0px lightgrey;
}
::-webkit-scrollbar { display:none; }
a { 
	text-decoration: none;
	transition:  all 0.2s ease-in;
	-webkit-transition:  all 0.2s ease-in;
	-moz-transition:  all 0.2s ease-in;
	
	font-family: 'Graphit-Medium';
}
a:link, a:visited { color:#02a9a1; }
a:hover, a:active { color:#283884;text-decoration: underline; }

.clear { clear:both; }

.chapter-content h3, .chapter-content-2 h3 {
	font-family: 'Graphit-Bold';
	font-size: 24px;
	color: #283884;
	line-height: 1.2em;
	margin-bottom: 10px;
}




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

Custom Editor Styles Plugin

* * * * * * * * * * * * * * */
.Medium {
	font-family: 'Graphit-Medium';
}
.Bold {
	font-family: 'Graphit-Bold';
}

.Chapeau {
	font-family: 'Graphit-LightItalic';
	font-size: 16px;
	color: #3fa53d;
}
.Titrage_grand_bleu {
	font-family: 'Graphit-Bold';
	font-size: 24px;
	color: #283884;
	line-height: 1.2em;
	margin-bottom: 10px;
}



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

MENU

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

#menu-hamburger {
	position:fixed;
	top: 0.25rem;right: 0.25rem;
	width:130px;height:130px;
	background:transparent;
	z-index:20000;
	mix-blend-mode: exclusion;
	-webkit-mix-blend-mode: exclusion;
	-moz-mix-blend-mode: exclusion;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
}
/*
#menu-hamburger:hover {
	mix-blend-mode: normal;
	-webkit-mix-blend-mode: normal;
	-moz-mix-blend-mode: normal;
}
*/

#menu-langSwitcher {
	position:fixed;
	top: 3.25rem;right: 4.75rem;
	width:130px;
	z-index:15000;
	font-family: 'Graphit-Light';
	font-size: 22px;
	color: #ffed00;
	text-transform: uppercase;
	
}
#menu-langSwitcher-2 {
	position:fixed;
	top: 2.25rem;left: 2.25rem;
	width:130px;
	z-index:15000;
	font-family: 'Graphit-Light';
	font-size: 22px;
	color: #ffed00;
	text-transform: uppercase;
	
	display: none;
}
/* POLYLANG */
.lang_switcher { width:90px; }
.lang_switcher ul {
	list-style-type:none
}
.lang_switcher li {
	display: inline;
}
.lang_switcher li a:hover, .lang_switcher li a:active {
	text-decoration: underline;
}
.lang_switcher li.lang-item a {
	font-family: 'Graphit-Light';
	font-size: 22px;
	color: #ffed00;
}
.lang_switcher li:first-child {
	margin-right:  15px;
}
/* highlight current language anchor */
.lang_switcher li.current-lang a {
	font-family: 'Graphit-Medium';color: #ffed00;
}


#menu {
	position:fixed;
	overflow-y:auto;
	display:none;
	padding:90px 15px 50px 15px;
	top:0;
	width:100vw;height:100vh;
	background-color:#ffed00;
	z-index:10000;
	display: none;
	tttext-transform: uppercase;
	font-family: 'Graphit-Light';
}

#menu-conteneur {
	border: solid 0px red;
}


#menu-title {
	position: absolute;
	top: 2rem;left: 3rem;
	width: 33%;height: auto;


}
#menu-logo-utsv {
	position: relative;
	width: 75%;
	padding-bottom: 30px;
}
#menu-contenu {
	width:200%;
	border:solid 0px orange;
	padding-bottom: 100px;
	padding-left: 10px;
}
#menu-contenu .digit { display: none; }
.menu-element {
	position: relative;
	font-family: 'Graphit-Bold';
	font-size: 32px;
	margin-bottom: 30px;
	line-height: 1.2em;
}
.menu-element .digit { 
	position: relative;display: inline-block;
	top: 12px;padding-right: 10px;
 }
 .menu-element .digit img { height: 50px; }

#menu-contenu a { color:black; }
#menu-contenu a:hover, #menu-contenu a:active { text-decoration: underline; }
.menu-element a { 
	text-decoration: none;
	transition:  all 0.2s ease-in;
	-webkit-transition:  all 0.2s ease-in;
	-moz-transition:  all 0.2s ease-in;
	font-family: 'Graphit-Bold';
	font-size: 32px;
	color: black;
}
.menu-element a:link, .menu-element a:visited { color: black;text-decoration: none; }
.menu-element a:hover, .menu-element a:active { color: black;text-decoration: underline; }

.nav-header {
	position: relative;
	width: 100%;min-height: 137px;
	background-color: #ffed00;
	display: flex;align-items: center;
	padding: 0 3rem;
	font-family: 'Graphit-Medium';
	font-size: 40px;
	line-height: 1.2em;
}
.nav-header .digit { 
	position: relative;display: inline-block;
	top: 5px;padding-right: 20px;
 }
 .nav-header .digit img { height: 75px; }
 .nav-header-logo { position: relative;top:10px;margin-right: 4rem;width: 160px;height:130px; }
 #nav-header-logo { 
 	position: absolute;top:1rem;left: 3rem;width: 160px;height:130px; 
 	z-index: 1000;
 }

.nav-header .suivant { 
	position: relative;display: inline-block;
	top: 5px;padding-right: 20px;
	margin-right: 30px;
	width: 75px;
	font-family: 'Graphit-Light';
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
 }
 .nav-header .suivant img { height: 35px; }

 .nav-header .nextPrev {
 	font-family: 'Graphit-Light';
	font-size: 40px;
	color: white;
 }
.nav-header a { 
	text-decoration: none;
	transition:  all 0.2s ease-in;
	-webkit-transition:  all 0.2s ease-in;
	-moz-transition:  all 0.2s ease-in;
	font-family: 'Graphit-Bold';
	
}
.nav-header a:link, .nav-header a:visited { color: black;text-decoration: none; }
.nav-header a:hover, .nav-header a:active { color: black;text-decoration: underline; }




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

SPLASH

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

#splash {
	position: absolute;
	top: 0;left: 0;
	width: 100%;height: 100%;
	border: solid 0px #0b24fa;
	background-size: cover;
	background-position: left center;
	background-image:  url(imgs/starryVault001-2024.jpg);
	background-repeat: no-repeat;
}
#splash-name {
	position: absolute;
	top: 0rem;right: 4rem;
	width: 33%;height: 3.5rem;
	padding: 0;
	display:flex;
	align-items:flex-end;
	font-size:43px;
	font-family: 'Alpino-Thin';
	text-transform: uppercase;
	color: #01a9a1;
}
.splash-name {
	font-size:22px;
	font-family: 'Alpino-Light';
	text-transform: uppercase;
	color: #01a9a1;
	padding-bottom:15px;
}
#splash-title {
	position: absolute;
	top: 2rem;left: 3rem;
	width: 33%;height: auto;
}
#splash-logo-utsv {
	position: relative;
	width: 75%;
	padding-bottom: 30px;
}

#splash-subhead {
	position: relative;
	padding: 1.5rem;
	background-color: #ffed00;
	color: #0b24fa;
	
}
.splash-title {
	position: relative;margin-bottom: 15px;
	font-family: 'Graphit-Bold';
	font-size: 36px;
	color: #000;
}
.splash-subtitle {
	font-family: 'Graphit-Medium';
	font-size: 24px;
	color: #000;
}
#splash-logo {
	position: absolute;
	bottom: 4rem;right: 4rem;
	width: 33%;height: 50px;
	padding: 1.5rem;
	cursor: pointer;
	background-size: contain;
	background-position: calc(100% - 1.5rem) center;
	background-image:  url(imgs/logo-numered.svg);
	background-repeat: no-repeat;
}
#splash-logo img { width:100%; }
#splash-logo2 {
	position: absolute;
	bottom: -4rem;right: 0;
	width: 50%;height: 50px;
	cursor: pointer;
	background-size: contain;
	background-position: right center;
	background-image:  url(imgs/logo-numered.svg);
	background-repeat: no-repeat;
	display:none;
}
#splash-logo2 img { width:100%; }




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

INTRO

* * * * * * * * * * * * * * */
#intro {
	position: relative;
	width: 100%;height: 600px;
}

#intro-keywords {
	position: relative;
	top: 0;left: 0;width: 100%;height: 25%;
	
	background: rgb(2,169,161);
	background: linear-gradient(90deg, rgba(2,169,161,1) 0%, rgba(40,56,132,1) 100%);
}
.centrage {
	position: relative;width: 100%;max-width: 1200px;margin: 0 auto;
}
#intro-keywords-conteneur {
	height: 100%;
	
	display: flex;
	flex-flow: row nowrap;
	justify-content:  space-around;
	align-items: center;
}
.intro-keyword {
	text-align: left;	
	width: 20%;
	color: #fff;
}
.intro-keyword-title {
	position: relative;margin-bottom: 8px;
	font-family: 'Graphit-Medium';
	font-size: 32px;
}
.intro-keyword-subtitle {
	font-family: 'Graphit-Light';
	font-size: 20px;
}
#intro-bg {
	position: absolute;
	top: 25%;height: 75%;width: 100%; 
	background-size: cover;
	background-position: center center;
	background-image:  url(imgs/intro-fond.jpg);
	background-repeat: no-repeat;
}
#intro-copy {
	position: absolute;
	top: 40%;left: 12%;width: 76%;height: 45%;
	overflow: auto;
	padding:  3rem;
	background-color: #E5F2F0;
	opacity: 0.95;
	font-family: 'Graphit-Light';
	font-size: 18px;
}
.intro-copy-title {
	position: relative;margin-bottom: 30px;
	font-family: 'Graphit-Medium';
	font-size: 32px;
}
.intro-copy-exergue {
	font-family: 'Graphit-Medium';
}





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

NAV

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


#nav {
	position:fixed;
	height:60%;top:20%;width:50px;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
	align-items:center;
	opacity:0;
	z-index:50000;
}
.bullet {
	width:36px;height:36px;
	border:solid 0px red;
	background-position:center center;
	background-size:contain;
	background-repeat: no-repeat;
	background-image:url(imgs/bullet-off.svg);
}
.bullet:hover { background-image:url(imgs/bullet-on.svg);cursor: pointer; }
.sub-bullet {
	width:18px;height:18px;
	border:solid 1px orange;
}


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

CONTENT

* * * * * * * * * * * * * * */
#fresques {
	background: rgb(2,169,161);
	background: linear-gradient(90deg, rgba(2,169,161,1) 0%, rgba(40,56,132,1) 100%);
	padding: 9rem 0;
}
.categorie {
	position: relative;
	margin: 0;
	padding:0.5rem;
	
}
#popups {
	background: rgb(0,0,0);
	background: linear-gradient(315deg, rgba(0,0,0,1) 0%, rgba(0,44,255,1) 100%);
	padding: 6rem 0;
}
#livres_num {
	background: rgb(2,169,161);
	background: linear-gradient(90deg, rgba(2,169,161,1) 0%, rgba(40,56,132,1) 100%);
	padding-bottom: 6rem;
	padding: 6rem 0;
}
#pied {
	background: rgb(2,169,161);
	background: linear-gradient(90deg, rgba(2,169,161,1) 0%, rgba(40,56,132,1) 100%);
	padding: 6rem 0;
	
}





.chapter {
	position: relative;
	/*
	width: 50%;
	max-width: 640px;
	*/
	margin: 0 auto 1.5rem auto;
	width: calc(100% - 6rem);
	max-width: 1200px;
	/* height: calc(100% - 6rem); */
	background-color: #E5F2F0;
	
}
.chapter p:first-child { margin-top:0; }
.chapter-header2 {
	position: relative;
	margin: 0 auto 0.5rem auto;
	width: calc(100% - 6rem);
	max-width: 1200px;
	/* height: calc(100% - 6rem); */
	font-family: 'Graphit-Medium';
	font-size: 60px;
	color: #ffed00;
	padding: 1.5rem 0rem;
}


.chapter-header {
	width: 100%;height: auto;
	background-color: #333;
	font-family: 'Graphit-Medium';
	font-size: 32px;
	color: #fff;
	padding: 20px 30px;
}
.chapter-content {
	padding: 3rem;
	font-family: 'Graphit-Light';
	font-size: 16px;
	text-align: justify;
	text-justify: inter-word;
      max-width: 640px;
     -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  	-moz-column-fill: balance;
       	column-fill: balance;
      column-gap: 100px;
      max-width: 1280px;
}
.chapter-content-2 {
	padding: 3rem;
	font-family: 'Graphit-Light';
	font-size: 16px;
	text-align: justify;
	text-justify: inter-word;
      max-width: 640px;
     -webkit-columns: 1;
     -moz-columns: 1;
          columns: 1;
  	-moz-column-fill: balance;
       	column-fill: balance;
      column-gap: 100px;
      max-width: 1280px;
}
.chapter-intro { 
	background-color:#fff;
	font-family: 'Graphit-Regular';
	font-size: 18px;
	 min-height: 400px;
}
.chapter-title {
	padding: 3rem 3rem 0.5rem 3rem;
	font-family: 'Graphit-Medium';
	font-size: 44px;
	color: #283884;
	line-height: 1.2em;
}
.chapter-subtitle {
	padding: 0 3rem;
	font-family: 'Graphit-Light';
	font-size: 20px;
}
.chapter-chapeau {
	font-family: 'Graphit-LightItalic';
	font-size: 16px;
	color: #3fa53d;
}
.chapter-exergue {
	font-family: 'Graphit-Medium';
}
.chapter-pleine-largeur {
	width: 100%;
	border: solid 0px blue;
	max-width: 640px;
     -webkit-columns: 1;
     -moz-columns: 1;
          columns: 1;
  	-moz-column-fill: balance;
       	column-fill: balance;
      column-gap: 100px;
      max-width: 1280px;
      padding-bottom: 3rem;
}


.chapter-focus-white {
	padding: 1.5rem;
	background-color: white;
}
.chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert {
	position: relative;
	margin-top: 1.5rem;
	max-width: 475px;
	padding: 3rem;
	background-color: #fde0c2;
	font-family: 'Graphit-Regular';
	font-size: 20px;
	float: left;
}
.chapter-focus-jaune { background-color:#ffed00; }
.chapter-focus-tomato { background-color:tomato; }
.chapter-focus-vert { background-color:#02a9a1; }

.galerie {
	border: solid 0px tomato;
	padding-bottom: 25px;
	display: none;
}
.galerie-vignette, .galerie-vignette-unit {
	position: relative;
	border: solid 0px orange;
	width: 32.83%;
	margin: 3px 0.25%;
	float: left;
}

.legende {
	font-family: 'Graphit-Light';
	font-size: 13px;
}
.legende-pleine-largeur {
	font-family: 'Graphit-Light';
	font-size: 13px;
	padding-left: 1.5rem;
}
.legende-pleine-largeur2 {
	font-family: 'Graphit-Light';
	font-size: 15px;
	color: #ffed00;
	line-height: 1.4em;
}
.owl-ClickToZoom {
	font-family: 'Graphit-Bold';
	color: black;
}
.bouton-conteneur {
	width: calc(100% - 6rem);
	max-width: 1200px;
	border:  solid 0px tomato;
	margin: 0 auto;display: block;
}
.bouton {
	position: relative;
	margin-top: -4.5rem;
	background-color: #283884;
	font-family: 'Graphit-Medium';
	
	color: #fff;
	font-size: 24px;
	padding: 20px 30px;
	width: fit-content;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	cursor: pointer;
}
.chapter-content img, 
.chapter-pleine-largeur img {
	width: 100%;display: block;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

#a-tire-d-aile-jaune-titre {
	position: relative;
	font-family: 'Graphit-Bold';
}
#a-tire-d-aile-jaune-titre img {
	width: 70px;height: 70px;
	transform: rotate(-22deg);
	margin-top: -12px;
	float: left;
	margin-bottom: 30px;
}
.a-tire-d-aile-jaune-titre {
	transform: rotate(-22deg);
	margin-top: -12px;
	float: left;
	margin-bottom: 30px;
	margin-right: 30px;
}

#arbres-mondes-bologne {
	width: 50%;
}
/*
.bouton:hover {
	background-color: #0b24fa;
}
*/




.vignette-video {
	position: relative;
	width: 50%;height: auto;border: solid 0px red;
	margin-bottom: 30px;padding: 0;
}
.vignette-video:hover { cursor: pointer; }
.vignette-video img { width:100%; }
.lecteur-video {
	position: fixed;
	z-index: 20000;
	top: 0;left: 0;width: 100vw;height: 100vh;
	border: solid 0px tomato;
	background: rgb(2,169,161);
	background: linear-gradient(90deg, rgba(2,169,161,1) 0%, rgba(40,56,132,1) 100%);
	display: none;
}
.lecteur-video-conteneur {
	position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;
	display: flex;justify-content: center;align-items: center;
}
.lecteur-video-conteneur video {
	width: 100%;height: 100%;
}
.lecteur-video-fermer {
	position: absolute;
	top: 30px;right: 30px;
	font-size:40px;font-family: 'Graphit-Light';
	color: #fff;
	cursor: pointer;
	z-index: 100;
}


.image-equipe {
	width: 100%;
}
#equipe-mravey { 
	width: 30%;
	mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
	-moz-mix-blend-mode: multiply;
}
.circles {
	background: transparent;
	
}
div#conteneur { 
    width:99%;
    height:99%;
    position:absolute;
    top: 0;left: 0;
    z-index: 99;
    border: solid 0px orange;
}
div.move {

    position: absolute;width: 200px;height: 200px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-repeat: no-repeat; 
    background-size:contain;
    border: solid 0px red;
    display: flex;justify-content: center;align-items: center;text-align: center;
    mix-blend-mode: screen;
	-webkit-mix-blend-mode: screen;
	-moz-mix-blend-mode: screen;
	opacity: 0.3;
	font-family: 'Graphit-Bold';
	font-size: 20px;
	cursor: pointer;
	transition: opacity 0.1s ease-in;
	-webkit-transition: opacity 0.1s ease-in;
	-moz-transition: opacity 0.1s ease-in;
	padding: 1.5rem;
}
div.move:hover { opacity:5; }
.green { background-color:#02a9a1; }
.yellow { background-color:#ffed00; }
.red { background-color:tomato; }



.pied-citation {
	position: relative;float: right;
	padding-right: 3rem;
	width: 50%;
	
	font-family: 'Graphit-LightItalic';
	font-size: 30px;
	color: #fff;
}
.chapter-focus-pied {
	position: relative;
	max-width: 475px;
	padding: 3rem;
	padding-left: 0;
	color: #fff;
	font-family: 'Graphit-Regular';
	font-size: 20px;

}
.bouton-pied {
	position: relative;
	margin: 1.5rem 0;
	background-color: #000;
	font-family: 'Graphit-Medium';
	color: #fff;
	font-size: 24px;
	padding: 15px 24px;
	width: fit-content;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	cursor: pointer;
}
.mail-pied { text-decoration: underline;color:#ffed00; }