/** DEFAULTING **/

.bs-wrapper {
	position: relative;
	z-index: 0;
	color: #DBD2C9;
}

.bs-wrapper,
.bs-wrapper p,
.bs-wrapper .wp-block-heading,
.bs-wrapper h1 , 
.bs-wrapper h2 , 
.bs-wrapper h3 , 
.bs-wrapper h4 , 
.bs-wrapper h5 , 
.bs-wrapper h6  {
	font-family: opensans;
}

.bs-wrapper h2.wp-block-heading {
	font-size: 2em;
}
.bs-wrapper h3.wp-block-heading {
	font-size: 1.8em;
}
.bs-wrapper h4.wp-block-heading {
	font-size: 1.6em;
}
.bs-wrapper h5.wp-block-heading {
	font-size: 1.4em;
}
.bs-wrapper h6.wp-block-heading {
	font-size: 1.2em;
}

.bs-wrapper a {
	font-family: congenial;
	color: #DBD2C9;
}

.bs-wrapper p {
	margin: 0;
}

:root {
	--wp--style--global--content-size: 100%;
	--naiv-content-size: 850px;
}

.bs-exp-inner,
.bs-exp-header {
	width: var(--naiv-content-size);
	max-width: var(--max-content-size);
}

.bs-exp-inner {
	display: flex;
	flex-direction: column; 
	align-items: center; 
}


/** STYLE **/

/** BS INTRO **/

.bs-btns-container {
	position:relative;
	width: 100%;
	height: 330px;
	min-width:330px;
}

.bs-btns-container:before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 205px;
	aspect-ratio: 1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/naiv/assets/icons/branch/branch.svg');
}

.bs-btn {
	width: 70px;
	aspect-ratio:1;

	margin-top: auto;

	transform: scale(1);
	transition: transform .12s;
}

.bs-btn i {
	display:block;
	width: 100%;
	height: 100%;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: invert(.8);
}

.bs-btn:hover {
	transform: scale(1.2);
}

.bs-btn.bs-btn-menu {
  position: unset;
  width: unset;
  aspect-ratio: unset;
  margin-top: unset;
  transform: unset;
  transition: unset;
}

.bs-exp-header .branch-root a {
	/** text-decoration: none; **/
}
.bs-exp-header .branch-name {
	background: rgba(249, 255, 128, .25);
}


.bs-content-menu .bs-exp-header {
	display:none;
}

.bs-btn .label {
	position: absolute;
	white-space: nowrap;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	text-align: center;
	
	font-family: naivcursed;
	font-size: 22px;
}

/** pos **/

.bs-btns {
	position: absolute;
	left: 50%;
	bottom:0;
}

.bs-btn {
	position: absolute;
}

.branches-count-2 .branch-0 {
	right: 80px;
	bottom: 80px;
}
.branches-count-2 .branch-1 {
	left: 35px;
	bottom: 30px;
}

.branches-count-3 .branch-0 {
	right: 95px;
	bottom: 85px;
}
.branches-count-3 .branch-1 {
	left: -40px;
	bottom: 115px;
}
.branches-count-3 .branch-2 {
	left: 80px;
	bottom: 75px;
}

.branches-count-3 .bs-btn i {
	transform: scale(.8);
}

.branches-count-3 .label {
	font-size: 18px;
}
/** excep **/

.branches-count-3 .bs-btn.illustr-navire i {
	transform: scale(.9);
}

/** icons **/

.bs-btn-menu i {
	background-image: url('/naiv/assets/icons/branch/branch-simplified.svg');
}

.bs-btn.not-home-branch i {
	background-image: var(--illustr);
}


/** more icons **/

.illustr-paperplane i:before {
	content: '';
	width: 165px;
	aspect-ratio: 1;
	position: absolute;
	top: -126%;
	left: -162%;
	
	background-image: url('/naiv/assets/icons/branch/trace.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.bs-btn-menu i:before {
	content: '';
	width: 35px;
	top: 0;
	right: -12px;
	aspect-ratio: 1;
	position: absolute;
	
	
	background-image: url('/naiv/assets/icons/back-arrow-filled.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/** intro text **/

.bs-intro {
	margin-bottom: var(--total-menu-area-height);
}

.bs-intro-text {
	text-align: center;
	margin-bottom: 20px;
}

.bs-intro-text .highlight {
	font-weight: 700;
	color: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(1.75) 
		hue-rotate(35deg);	
}

/** BS CONTENT **/

.bs-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.nb-branch:has(.bs-explanation), .bs-explanation {
	min-height: calc(100dvh - var(--total-menu-area-height));
	position: relative;
	display: flex;
	flex-direction: column; 
	align-items: center; 

	overflow-x: clip;

	transition:  opacity .25s, width .25s;
	width:0;
	height:0;
	opacity: 0;
}

.nb-branch:has(.bs-explanation.expanded), .bs-explanation.expanded {
	width:100%;
	opacity: 1;
	height:auto;
}

:root {
	--dynamic-offset: 0;
}

.bs-explanation .bs-exp-inner > * {
	margin-right: var(--dynamic-offset);
}
@media (max-width: 600px) {
	.bs-explanation .bs-exp-inner > * {
		margin-right: calc(var(--dynamic-offset) / 2);
	}
}



.bs-content-menu {
	display:flex;
	justify-content:center;
	align-items:center;
}


/** BS ISLANDS **/

/** global **/

.nb-ile:has(.int-island-container .expanded) {
	z-index: 10;
}

.nb-ile {
	max-width: 100%;
}


.int-island .textBox {
	position: absolute;
	left: var(--islTextBox-x);
	top: var(--islTextBox-y);
	width: var(--islTextBox-w);
	height: var(--islTextBox-h);
	
	text-align:center;
	color: black;
}

:root {
	--islWidth: 300px;
}


.int-island-container {
	--islTextBox-x: 0;
	--islTextBox-y: 0;
	--islTextBox-w: 100%;
	--islTextBox-h: 100%;
	
	transition: 
		width .5s,
		height .5s,
		margin-top .5s;
	
	width: var(--islWidth);
	height: var(--islWidth);
	
	margin-bottom: 50px !important;
}


.int-island:before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	
	background: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(1.75) 
		hue-rotate(35deg);	
	mask: var(--islSvgPath);
	mask-size: 100% 100%;
	-webkit-mask: var(--islSvgPath);
	-webkit-mask-size: 100% 100%;
	
}
.int-island {
	filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
	
	width: var(--islWidth);
	
	position: absolute;
	top: 50%;
	left: 50%;
	
	
	z-index:5;
	aspect-ratio: 1;

	transition: 
		transform .12s,
		width .5s;
	transform: translate(-50%, -50%) scale(1);
}



/** ==== jardin-zen ==== **/

.int-island.jardin-zen {
	transition: 
		transform .12s;
}
.int-island.jardin-zen:hover {
	transform: translate(-50%, -50%) scale(1.2);
}


.jardin-zen.int-island-container .title p {
	font-size: 14px;
	font-family: shikamaru;
	text-transform: uppercase;
}
.jardin-zen.int-island-container .title p::first-letter {
	color: #8A0000;
	font-size: 18px;
}

/** side popup **/
.jardin-zen .island-content.side-popup:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(2) 
		hue-rotate(35deg);	
	opacity: .6;
}

.jardin-zen .island-content.side-popup {
	position: absolute;
	
	z-index:4;
	
	padding: 10px;
	
	transition:
	opacity		.5s,
    width		.5s,
    max-height	1.5s,
    left		.5s,
    top			.5s,
	transform	0s;
	
	opacity: 0;
	left: var(--islTextBox-center-x);
	top: var(--islTextBox-center-y);
	width:0;
	height:0;
	max-height: 0; 
	transform: translate(-50%, -50%) scale(1); 
	will-change: transform; 
}


.jardin-zen.int-island-container.side-popup {
	position: relative;
	left:0;
	transition:
		left .25s;
}

.int-island-container.jardin-zen {
	--islWidth: 100px;
}

.jardin-zen .isl-title {
	filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform:translate(-50%,100%);
	
	font-size: 20px;
	white-space: preserve nowrap;
	margin: 0;
}


.jardin-zen .island-content.side-popup.expanded {
	opacity: 1;
	left: 50%;
	top: 50%;
	width:fit-content;
	height:fit-content;
	max-height: 500px; 
	transform: translate(-50%, -50%) scale(1.4, 1.4);
	transition: transform 30s ease-out;
	z-index: 5;
}

.jardin-zen .island-content.side-popup .close-cross {
	position: absolute;
	top: 0%;
	left: 100%;
	transform: translate(-50%,-50%);
	
	width:12px;
	height: 12px;
	
	border-radius: 100%;
	
	background: var(--mapBgColor);
		filter: 
		saturate(25%) 
		brightness(2) 
		hue-rotate(35deg);	
	opacity: .6;
}
.jardin-zen .island-content.side-popup .close-cross::after {
	content: '';
	background-image:url("/naiv/assets/icons/cross.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	width:50%;
	height: 50%;
	
	filter: brightness(0);
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index:5;
}

@media (max-width: 600px) {
	.jardin-zen .island-content.side-popup.expanded,
	.jardin-zen .island-content.side-popup {
		position: fixed;
		z-index:10;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(1); 
	}
	.jardin-zen .island-content.side-popup.expanded {
		width: 70dvw;
		max-width: 70dvw;
		transform: translate(-50%, -50%) scale(1.2, 1.2);
	}
}


.jardin-zen .island-content .content,
.jardin-zen .island-content .title {
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.jardin-zen .island-content .content,
	.jardin-zen .island-content .title {
		white-space: normal;
	}
}

.jardin-zen .island-content {
	font-size: 13px;
	color: black;
}

/** ==== ile-shoji-bas  ==== **/


.ile-shoji-bas.int-island-container {
	width: 100%;
	--islWidth: 100px;
	height: fit-content;
	margin-bottom: 75px !important;
}

.ile-shoji-bas .int-island::before {
  position: relative;
  width: var(--islWidth);
  height: unset;
  display: block;
  aspect-ratio: 1;
}

.ile-shoji-bas .int-island {
  position: relative;
  left: 50%;
  transform: translateX(-50%) scale(1);
}

.ile-shoji-bas .int-island:hover {
	transform: translateX(-50%) scale(1.2);
}

.ile-shoji-bas .island-content {
	height: 0px;
	overflow-y: hidden;
	transition: height .2s ease-in-out;
	margin-top: 15px;
}

.ile-shoji-bas .island-content .nb-vitrail {
	margin-top: 0;
}

.ile-shoji-bas .isl-title, 
.ile-shoji-bas .isl-subtitle {
	line-height: 1.5rem;
	width: 100%;
}

.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title h1 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title h2 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title h3 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title h4 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title h5 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title h6 ,
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle h1 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle h2 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle h3 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle h4 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle h5 , 
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle h6 ,
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-title p,
.bs-content-prendre-le-temps .bs-exp-inner .ile-shoji-bas .isl-subtitle p {
	width: 100%;
}

.ile-shoji-bas .island-wrapper {
	margin: auto;
	width: fit-content;
	position: relative;
}

.ile-shoji-bas .island-wrapper .audio-control {
  /* Reset complet */
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  
  width: 50px;
  height: 50px;
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  
  filter: invert(1);
  background-image: url("/naiv/assets/icons/micro.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 50px;
  
  pointer-events: none;
  right: 0px;
  opacity: 0;
  transition: right .25s ease-in-out, opacity .15s ease-in-out, transform .15s ease-in-out;
}

.int-island-container.expanded .audio-control {
	pointer-events: unset;
	right: -70px;
	opacity: 1;
}

.int-island-container.expanded .audio-control:hover {
	transform: translateY(-50%) scale(1.2);
}
.int-island-container .isl-subtitle p {
	margin-left: auto;
	margin-right: auto;
}

/** BRANCH TITLE **/

.branch-title-container {
	position: relative;
	width: fit-content;
	margin: auto;
}

.branch-title-container h2 {
	width: fit-content;
	font-family: mistral;
	font-size: 40px;
}

.branch-title-container .rect-grey {
	position: absolute;
	background: rgba(127,127,127,.5);
	width: 200%;
	height: 130%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.branch-title-container .rect-color {
	position: absolute;
	background: rgba(46, 73, 130,.3);
	width: 110%;
	height: 110%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	border: 1px solid rgba(37, 61, 110,.5);
}

.bs-exp-header-embarquer
.branch-title-container {
	width: 0;
	height: 0;
	overflow: hidden;
}

.bs-exp-header-prendre-le-temps
.branch-title-container .rect-color {
	top: 35%;
}

.bs-exp-header-prendre-le-temps
.branch-title-container .rect-grey {
	top: 65%;
}

.bs-exp-header-en-passant
.branch-title-container .rect-color {
	top: 50%;
	left: -20%;
	width: 165%;
	height: 175%;
}

.bs-exp-header-en-passant
.branch-title-container .rect-grey {
	top: 50%;
	width: 150%;
	height: 120%;
}

.jardin-zen-container .nb-ile:nth-child(even) {
	position: relative;
	left: 60px;
}

.jardin-zen-container .nb-ile:nth-child(odd) {
	position: relative;
	right: 60px;
}  

.first-letter-title {
  position: relative;
  padding-left: 60px;
}

.first-letter-title::first-letter {
  color: transparent;
  user-select: none;
}

.first-letter-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 75px;
	height: 50px;
	mask-size: 100%;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	display: inline-block;
	background-color: currentColor;
}

.first-letter-title.first-histo {
	padding-left: 70px;
}
.first-letter-title.first-histo::before {
	mask-image: url("/naiv/assets/images/first-letter-symbol/hito.webp");
	top: -17px;
	width: 90px;
	height: 75px;
}

.first-letter-title.first-enso::before {
	mask-image: url("/naiv/assets/images/first-letter-symbol/enso.webp");
	top: -17px;
	width: 85px;
	height: 80px;
}