/** =============== Global =============== **/ 
html, body {
	height: 100%;
}
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

body {
	cursor: url(../assets/cursors/std.svg) 0 0, default;
}

*[onclick], a[href], input[type='submit'], input[type='image'], label[for], select, button, .clickable {
	cursor: url(../assets/cursors/clickable.svg) 5 5, pointer;
}

.not-clickable, .inactive {
	cursor: url(../assets/cursors/not-clickable.svg) 0 0, not-allowed;
}


/** =============== Specific =============== **/ 

/** ======= Menu boussole =======**/ 
#global-CalMenu-container { /* VAR DECLARATION */
	--menu-top-margin: 1.5rem;
	--menu-height:36px; /**36**/
}

#menu-boussole-overlay {
	position:fixed;
	z-index: 20;
	top: var(--menu-top-margin);
	left:0;
	width:100%;
	max-width:unset;
}
#menu-boussole-container {
	background: url("../assets/images/love-compass-bg-extended.jpg") center;
	background-size: contain;
	width: 0;
	margin-left:auto;
	margin-right:auto;
	transition: width 0.5s ease;  
}
#menu-boussole-container.expanded {
	width: 100%;  
}
#menu-boussole {
	display:flex;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height: var(--menu-height);
	color:white;
}
#menu-boussole div {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
#menu-b-left, #menu-b-right {
	width: 50%;
	align-content: center;
}
#menu-b-center {
	width:60px;
	align-content: center;
	padding: 20px;
}
#menu-b-center img {
	/** filter: invert(100%) drop-shadow(0 0 0.75rem black) drop-shadow(0 0 0.75rem black) ; **/
	width:75px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#menu-b-center img:hover { 
	filter: invert(25%);
}
#menu-b-left {
	direction: rtl;
	text-align:right;

	background: url("../assets/images/love-compass-bg-left.jpg") no-repeat left;
	background-size: contain;
}
#menu-b-right {
	background: url("../assets/images/love-compass-bg-right.jpg") no-repeat right;
	background-size: contain;
}
#menu-boussole span, #menu-boussole a {
	color:white;
}

#menu-b-left .page_item {
	padding-left: 15px;
}
#menu-b-right .page_item {
	padding-right: 15px;
}


#shining  {
  pointer-events: none;
  position: absolute;
  left:50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -53%);
  border-radius: 100%;
}

/*---
  shine animation
---*/

@keyframes shine {
  20% {
	opacity: 0;
    top: -110%;
    left: -210%;
  }
  23% {
	opacity: 1;
    top: -110%;
    left: -210%;
  }

  35% {
	opacity: 1;
    top: -30%;
    left: -30%;
  }
  
  100% {
	opacity: 0;
    top: -30%;
    left: -30%;
  }
}

#shining:after {
  animation-duration: 7s;
  animation-name: shine;
  animation-iteration-count: infinite;
  
  content: " ";
  position: absolute;
  
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 77%,
    rgba(255, 255, 255, 0.7) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}



/** ======= Cal =======**/ 
#cal-overlay {
	display:none;
	position:fixed;
	z-index: 10;
	margin-block-start: 0;
	top:0;
	left:0;
	max-width:unset;
	width:100%;
	height:100%;
}
#cal-overlay.displayed {
	display:block;
}
#cal-container {
	--cal-top-margin: calc(var(--menu-top-margin) * 2 + var(--menu-height));
	--cal-max-height:calc(100dvh - var(--cal-top-margin));
	--cal-padding: 70px;
	
	overflow: hidden;
	position:relative;
	top:var(--cal-top-margin);
	width:1300px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	background: url("../assets/images/book.png"); /** no-repeat; **/
	background-size: cover;
	background-position: center center;
	border-radius: 25px;
} 
#book-menu {
	
}

#book-menu-row1 {
	position:absolute;
	width:calc(100% - 10px);
	height:0;
	margin: 0 calc(var(--cal-padding) /12);
	top: 50%;
}
#book-menu-row2 {
	position:absolute;
	width:calc(100% - 10px);
	height:0;
	margin: 0 calc(var(--cal-padding) /12);
	top: 90%;
}
.book-btn {
	background: none;
	border: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/* put the height and width of your image here */
	height: 55px;
	width: 55px;
}
.book-btn span {
	display: none;
}
.book-btn.inactive {
	opacity: 0.4;
}


#book-btn-previous {
	transform: scale(-1, -1);
	background-image: url("../assets/icons/arrow.svg");
	float: left;
}
#book-btn-next{
	background-image: url("../assets/icons/arrow.svg");
	float:right;
}

#book-btn-start {
	transform: scale(-1, -1);
	background-image: url("../assets/icons/arrow2.svg");
	float: left;
}
#book-btn-end{
	
	background-image: url("../assets/icons/arrow2.svg");
	float:right;
}

#cal-micro {
	scrollbar-width: thin;
	scrollbar-color: rgba(102,102,102,0.7) rgba(255,255,255,0);
}

#cal-micro {
	max-height: calc(var(--cal-max-height) - var(--cal-padding) * 2);
	overflow: auto;
	padding: calc(var(--cal-padding) * 0.75) var(--cal-padding);
}
	
.bookpage {
	display:none;
}
.bookpage.displayed {
	display:block;
}
	
.ligne {
	display: flex;
	flex-direction: row;
}
	
.onpage {
	position:relative;
	display: flex;
	flex-direction: row;
	width: 50%; 
	margin-top:5px;
	margin-bottom:5px;
}

a.fill-onpage {
	height: 100%;
	width: 100%;
	text-decoration: none;
	display: flex;
	flex-direction: row;
}
.simili-btn:hover {
	filter: saturate(1.5);
	background:rgba(0, 0, 0, 0.040);
	border:2px dashed rgba(0, 0, 0, 0.1);
	margin:-2px;
}

.p-b .simili-btn:hover {
	background-image: url("../assets/icons/speaker.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 75px;
}
	
.ligne:nth-child(odd) .onpage {
	background:rgba(0,0,0,0.05);
}
.onpage.p-a {
	margin-right:20px
}
.onpage.p-b {
	margin-left:20px
}  


.ligne.ligne-sekki {
	margin-top:5px;
	margin-bottom:5px;
}
.ligne.ligne-sekki .onpage {
	background:unset;
	
	font-weight:550;
	
	border-top:1px solid darkred;
	border-bottom:1px solid darkred;
}
.ligne.ligne-sekki .p-a {
	justify-content: right;
}
.ligne.ligne-sekki .p-b {
	justify-content: left;
}

.sub-line {
	width:50%;
}
	
.cell {
	padding-left:10px;
	padding-right:10px;
	
	width: 50%;
}
.subcell {
	width:100%;
}
.cell, .subcell {
	display:table;
	vertical-align: middle;
} 
.cell {
	display:table-cell;
	vertical-align:middle
}
	
.cell.cell-key {
	width: auto;
}


.cell.cell-date {
	background:unset;
	padding-left:30px;
	padding-right:20px;
	width: 100%;
}
.subcell.cell-datefr {
	font-weight: bold;
}
.subcell.cell-datefr, .subcell.cell-daterep {
	color:#610101;
}
.subcell.cell-daterep {
	text-align: right;
	font-style: italic;
}
.cell.cell-jourrep {
	width: 100%;
}
.cell.cell-japanko {
	width: 50%;
}
.cell.cell-kofr {
	width: 50%;
}

.cell.cell-thumbnail {
	width:100px;
}
.cell.cell-thumbnail img {
	width:60px;
	height:60px;
}

.scotched-pic {
	border:5px white solid;
	box-sizing: border-box;
	rotate: 5deg; 
}

.scotch-wrapper {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: middle;
	width:fit-content;
}

.scotch-wrapper:after {
	position: absolute;
	width: 60px;
	right: -20px;
	top: 0;
	rotate: var(--scotch-rotate); 
	content: '';
	height: 15px;
	background-image: url("../assets/images/scotch/1.webp");
	background-size: contain;
	background-repeat: no-repeat;
}

.scotch-1:after {
	background-image: url("../assets/images/scotch/1.webp");
}
.scotch-2:after {
	background-image: url("../assets/images/scotch/2.webp");
}
.scotch-3:after {
	background-image: url("../assets/images/scotch/3.webp");
}
.scotch-4:after {
	background-image: url("../assets/images/scotch/4.webp");
}

.postal-card {
	position: absolute;
	z-index:15;
	left: calc(100% - 80px);
	top: 50%;
    transform: translateY(-50%);
	width: 400px;
	height: 250px;
	background-image: url("../assets/images/postalcard.webp");
	background-size: contain;
	background-repeat: no-repeat;
	rotate: 5deg; 
	display:none;
	box-shadow: 1px 3px 4px 0px #3d3d3d;
}

.sub-line:hover .postal-card {
	display:block;
}

.postal-card a {
	padding:0px;
	box-sizing: border-box;
}
.postal-card img {
	height:100%;
}
.postal-card .ipsumpostal {
  font-family: dream-script;
  font-size: 13px;
  line-height: 1.65em;
  display: block;
  position: absolute;
  width: 28%;
  right: 20px;
  top: 49%;
  word-spacing: 3px;
}
.hovertextpostal {
		background-image: url("../assets/images/faire-signe.svg");
	  background-size: contain;
	  background-repeat: no-repeat;
	  position: absolute;
	  font-family: slicker;
	  text-shadow: #176478 0 0 7px, #176478 0 0 7px, #176478 0 0 7px, #176478 0 0 7px, #176478 0 0 7px;
	  font-size: 3em;
	  line-height: 1em;
	  color: white;
	  rotate: -20deg;
	  top: 50%;
	  left:20px;
	  transform: translateY(-50%);
	  width: 100%;
	  height: 40%;
}