:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(1rem, 1vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--background);
	font-family : monospace;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}

a {
    color: var(--orange);

}

a.inactivated {
    pointer-events:none;
}
a.inactivated:hover {
	cursor: pointer;
}

/* On reset le forcage en gras des font-awesome*/
/*.fa-solid {
  text-transform: none !important;
}*/

#top-nav {
	top: 0;
	left: 0;
	width: 100%;
	/*height : 3em;*/
	z-index: 1000;
	padding : 0px;
	border-bottom : 1px solid var(--topnavBorder);
	background-color: var(--topnavBg);
}

#main-content {
	margin : 0;
	padding : 0;
}
.fixedOnScroll {
	position : fixed;
}

.PageWithoutTopMenu {
	padding-top : 0em;
}

.mirror-h {
    transform: scale(-1, -1);
}

.mirror-v {
	transform: scaleX(-1);
}

.main-topper {
    font-size: var(--topperFontSize);
    line-height: 1.3em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 0.25rem;
    display: block;
}

ul.nav-menu {
	margin : 0px;
	display: flex;
	justify-content: flex-start;
  	list-style: none;
  	padding: 0;
	list-style-type: none;
	gap : 0; /* Prevents space between li */
 	white-space: nowrap; /* Prevents wrapping */
	font-size : 1.6em;
	font-family: sans-serif;
}

ul.nav-menu li {
  	padding: 0;
	margin : 0px 5px 0px 0px;

}



#li-actionButtonFullscreen {
	display : inline-block;
	position : absolute;
	top : 0px;
	right : 0px;
	margin-right : 55px;
}


#li-actionButtonUserMenu {
	display : inline-block;
	position : absolute;
	top : 0px;
	right : 0px;
	margin-right : 0px;
	height : 100%;
	vertical-align : center;
}
#li-actionButtonUserMenu i{

}


#actionLoginForm {
	position : absolute;
	right : 0px;
}

#actionButtonHome, #actionButtonBack {
	padding : 0px 0px;
	background-color : var(--backbuttonBg);
	color : var(--backbuttonTextColor);
	margin-right : 5px;
}

#actionButtonHome a{
	padding : 4px 15px 4px 15px;
	color : var(--backbuttonTextColor);
	display : block;
	text-decoration : none;
}

#actionButtonBack a{
	padding : 7px 30px 5px 15px;
	color : var(--backbuttonTextColor);
	display : block;
	text-decoration : none;
}

.actionButton {
	padding : 0px;
	color : var(--buttonTextColor);
	margin-right : 0px;
	color : #fff;
}
.actionButton span, .actionButton a, .actionButton input{
	background-color : var(--topbuttonBg);
	margin : 0px;
	padding : 7px 3px 5px 3px;
	min-width: 1.9em;
	color : var(--topbuttonTextColor);
	display : block;
	text-decoration : none;
	height : 100%;
	text-align : center;

}
.actionButton input{
	padding : 3px 5px 4px 5px;
	font-size : 0.8em;
	border: 1px solid #ccc;
}

.actionButton span:hover,.actionButton a:hover, .actionButton input:hover {
	cursor: pointer;
	background-color : var(--topbuttonHoverBg);
}


.actionButtonElementWithIconAndText {
	font-size : 0.6em;
	padding-top : 5px;
	padding-left : 2px;
	padding-right : 2px;
}

.actionButtonElementWithIconAndText i{
	padding : 0px;
	margin : 0px;
}

.actionButtonElementWithIconAndText div{
	width : 100%;
	font-size : 0.65em;
	padding : 0px;
}




span.button-submenu {
	background-color : transparent;
}

span.button-submenuActive {
	background-color : var(--topSubmenuBg);
}

ul.nav-submenu {
	background-color : var(--topSubmenuBg);
	margin: 0px;
	padding : 0px;
	display : none;
}
ul.nav-submenu li {
	margin: 0px;
	padding : 0px;
	height : 100%;
}
.nav-submenu span, .nav-submenu a, .nav-submenu input {
	background-color : var(--topSubmenuBg);
	padding : 7px 3px 5px 3px;

}


.nav-submenu span:hover,.nav-submenu a:hover, .nav-submenu input:hover {
	cursor: pointer;
	background-color : var(--topSubmenubuttonHoverBg);
}

#actionButtonScan  {

}
#actionButtonStop  {


}

#nav-userMenu {
	/*min-height : 2em;*/
	padding : 5px 0px 1px 0px;
}


#nav-searchMenu {
	color : #fff;
}

#nav-searchMenu li#li-actionButtonSearch{
	margin: 5px 0px 5px 0px;
	display : flex;

}
li#li-actionButtonSearch input{
	margin-left:10px;

}

li#li-actionButtonInstrumentsChordsMenu div, li#li-actionButtonMusicTheory div{
	padding-left : 7px;
	padding-right : 7px;
}


#li-actionButtonInstrumentsDatas {
	margin-right : 0px;
}


#li-actionButtonInstrumentsMenu {
	float : left;
	margin-left : 0px;
}
#nav-instrumentsMenuButton {
	font-size : 0.5em;
	text-align : left;
	padding-left : 0px;
}


#nav-instrumentsMenu{
	color : #fff;
}

#nav-instrumentsMenu li{
	margin: 5px 0px 5px 0px;
	display : flex;
}


.instrumentsMenuElement {
	font-size : 0.8em;
	padding-top : 5px;
	padding-left : 10px;
	padding-right : 10px;
}

.instrumentsMenuElement i {
	padding : 0px;
	margin : 0px;
}

.instrumentsMenuElement div {
	width : 100%;
	font-size : 0.65em;
	padding : 0px 10px 0px 10px;
}

#nav-metronomeMenu {
	/*min-height : 2em;*/
	padding : 5px 0px 1px 0px;
}

#nav-buttonSubmenuUser input:focus, #nav-buttonSubmenuUser input:active{
  border: 1px solid #ccc;
  box-shadow: none;
}

#li-actionButtonMetronome {
	margin-right : 0px;
}
#li-actionButtonMetronomeMenu {
	float : left;
	margin-left : 0px;
}

#nav-metronomeMenuButton {
	font-size : 0.5em;
	text-align : left;
	padding-left : 0px;
}

span.actionButtonInactive, span.actionButtonInactive:hover, span.actionButtonInactive i, span.actionButtonInactive i:hover{
	background-color : var(--topActiveButtonInactiveBg);
	color : var(--topActiveButtonInactiveColor);
	cursor: normal;

}

/* HOME */

#home-maintitle {
	display : block;
    margin: 0 0 1em 0;
	text-align : center;
	font-family : monospace;
    color: var(--maintitle);
	font-size : 1.1em;
}


#home-songsLists {

}

#home-songsLists .home-songsLists-ul {
    width: 100%;
    margin: 0px 0 0 0;
    padding: 0;

	/*padding: 20px;*/

}

#home-songsLists .home-songsLists-li {
	list-style: none;
	flex: 0 0 20%;
	aspect-ratio: 1 / 1; /* Ensures height equals width */
	border : 1px solid var(--homeSongsListsItemBorder);
	border-radius: 5%;
	background-color : var(--homeSongsListsItemBg);
  background-image: 
    linear-gradient(random(0deg, 360deg), #999 15px, transparent 0),
    linear-gradient(90deg, #666 37px, transparent 0),
    linear-gradient(90deg, #333 27px, transparent 0);
  background-size: 31px 100%, 75px 100%, 57px 100%;
}

#home-songsLists .home-songsLists-li:doodle {
  @grid: 10 / 8em;
  background: hsl(@r(360), 60%, 70%);
  transform: rotate(@r(360deg)) scale(@r(.5, 1.5));
  border-radius: @rand(10%, 50%);
}

#home-songsLists .home-songsLists-li:hover {
	background-color : var(--homeSongsListsItemHoverBg);
}
#home-songsLists .home-songsLists-li a{
    height: 100%;
	aspect-ratio: 1 / 1; /* Ensures height equals width */
    display: flex;
    justify-content: center;
    align-items: center;
	transition: transform 0.2s ease;
    color: var(--white);
	text-decoration : none;
	font-size : 1.3em;
	font-family : monospace;
	font-weight : bold;

}
#home-songsLists .home-songsLists-li a:hover {
  transform: scale(1.3); /* Zooms text to 130% of original size */
}



/*CAtegory*/
ul.songs-list {
	margin-left : -2em;
	max-width : 600px;
	list-style: none;
	font-size : 1.1em;
}

.songslist-item-artist {
	color : var(--bodyTextColor);
	font-weight : bold;
	padding : 2px 0px;
	margin-top : 5px;
}
.songslist-item {
	/*border-bottom : 1px solid var(--songslistBorder);*/
	padding : 0px;
	margin : 0px;
}


.songslist-item {
	display : block;
   	background-color: var(--songslistBg);
	margin : 0px;
}

.songslist-item:nth-child(odd) {
    	background-color: var(--songslistBg2);
}

.songslist-item a{
	display : block;
	color : var(--orange);
	margin : 0px;
	padding : 2px 10px;
	text-decoration : none;
}
.songslist-item a:hover {
   	background-color: var(--songslistHoverBg);
	text-decoration : underline;
}

#song-title {
	font-size : 1.4em;
	color : var(--bodyTextColor);
	margin-bottom : 20px;
}

#song-favoriteButton {
	margin-right : 10px;
	font-size : 0.8em;
	color  : var(--songFavoriteIconColor);
}
#song-favoriteButton:hover {
	cursor : pointer;
}

#keySwitcher {
	color : var(--bodyTextColor);
	margin-bottom : 20px;
	font-size : 1.3em;
	display : block;
}

.keySwitcherButton {
	color : var(--orange);
	padding : 0px 6px;
}

.keySwitcherButton:not(:nth-child(2)) {
	border-left : 1px solid #ccc;
}

.keySwitcherButton:hover {
	cursor: pointer;

}

#keySwitcherSongKey {
	font-weight : bold;
	color : var(--bodyTextColor);
	border-left : 1px solid #ccc;
	padding : 0px 5px;
}

#keySwitcherSongKey:hover {
	cursor: text;
}

#songContent {
	color : var(--songTextColor);
	font-size : 1em;
	padding : 0px 0px 0px 0.5em;
	margin : 0px 0px 0px 0em;
	white-space: pre-wrap;
	/*word-spacing: 0.1em;*/
	font-family: monospace;
}

#song {
	max-width : 100%;
	word-wrap: break-word;
	letter-spacing: 0.0em;
}

#songBottom {
	display : block;
	margin-top : 3em;
}
#songEnd {

	padding : 5px 10px;
	background-color: var(--songEndboxBg);
	color: var(--songEndboxColor);
}

#songBottomDatas {
	display : block;
	width : 100%;
	margin : 10px 0px 0px 0px;
	padding : 20px 20px;
	font-size : 0.85em;
	background-color: var(--songEndboxBg);
	color: var(--songsongBottomDatasColor);
	font-family: monospace;

}
/* Ligne avec Infos instruments */
div.songIData {
	display : block;
	line-height : 1.5em;
}



/* Ligne avec Lyrics uniquement SANS accords associées à la ligne au dessus*/
div.songL {

	line-height : 3.5em;
  	display: block;
	position: relative;
	font-size : 1em;
	font-weight : bold;
}


/*
div.songLC {
	line-height : 2.8em;
  	display: block;
	position: relative;
	font-size : 1em;
	letter-spacing: 0.05em;
}
*/
/*Empty ligne*/
div.songBR {
	display : block;
	height : 1em;

}


/* Ligne de Lyrics AVEC  des accords associées à la ligne au dessus */
/*
div.songLC {
	line-height : 2.8em;
  	display: block;
	font-size : 1em;
	letter-spacing: 0.05em;
	white-space: pre-wrap;
   	background-color: red;
}
*/

/* Ligne avec Chords associés a une ligne de texte en dessous */
span.songCL {
	position : relative;
	top: -1em;
	font-weight : normal;
  	/*display: inline-block;*/
	/*position: relative;*/
	font-size : 1em;
	letter-spacing: 0.05em;
}

span.songChord {
	font-size : 1em;
	color : var(--orange);

}

span.songChord:hover {
	cursor : default;
}

/* N'importe quel contenu correspondant aux partitions
	permet d'etre cachés en JS */
.songInstrumentsData {
}

.songTab {
	display : inline-block;
}


/* from ltimate guitare */
span.song-ulitmateguitare-chord {
	font-size : 0.87em;
	color : var(--orange);
}

#popBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--popboxDefaultBg);
  color:  var(--popboxDefaultColor);
  padding: 20px;
  border-radius: 8px;
  display: none;
  animation: fadeIn 0.5s ease-in-out;
  z-index: 5000;

}

#popBox.success {
  background-color: var(--popboxSuccessBg);
  color:  var(--popboxSuccessColor);
}
#popBox.error {
  background-color: var(--popboxErrorBg);
  color:  var(--popboxErrorColor);


}


#chordBox {
	display: none;
	color : var(--chordboxColor);
	border : 0px solid var(--chordboxBorder);
	background-color: var(--chordboxBg);
	padding : 0px 0px -5px 0px;
	margin : 0px;
	z-index : 3000;
}

#chordBox img{
	object-fit: cover;
	object-position: 0px -50px ; /* Adjust to show different parts */
	background-color: var(--chordboxImgBg);
	padding : 0px;
	margin : 0px;
	border : 0px;

}
#chordBox h1{
	background-color: var(--chordboxBg);
	font-size : 1.2em;
	color : var(--chordboxColor);
	text-align : center;
	padding : 5px 0px 5px 0px;
	margin : 0px;
	border : 0px;
}

#songEditorSongTitle {
	display : block;
	width : 100%;
	margin : 5px 0px 0px 0px;
}
#songEditorSongArtist {
	display : inline-block;
	margin : 5px 0px 0px 0px;
}
#songEditorSongKey {
	display : inline-block;
	margin : 5px 0px 0px 10px;
}


#songEditorSongCatsL {
	display : block;
	width : 100%;
	margin : 5px 0px 0px 0px;
}

#songEditorSongCatsS {
	display : block;
	width : 100%;
	margin : 5px 0px 0px 0px;
}
.songEditorSongCatsInput {
	margin-right : 10px;

}

#songEditorSongContentButtons {
	display : block;
	width : 100%;
	margin-top : 10px;

}


#songEditor div.songInstrumentsData {
}
 
#songEditor div.songHeadDatas {
	display : none;
}
/*Ligne avec Infos Instrumentales uniquement */
#songEditor div.songI {
	background-color: var(--editorChordsLineBg);
}
/*Ligne avec Lyrics uniquement */
#songEditor  div.songL {
	background-color: var(--editorChordsLineBg);
}

/*Span des Chords imbriquées dans les paroles */
#songEditor span.songChord {
}

/*Empty ligne*/
#songEditor  div.songBR {
}


/* METRONOME */
.play {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 50px solid #e9e9e9;
    margin-left: 15px;
}

.pause {
    width: 15px;
    height: 60px;
    border: none;
    border-left: 15px solid #e9e9e9;
    border-right: 15px solid #e9e9e9;
}


#footer {
	display : block;
	width : 100%;
	margin : 0px 0px 0px 0px;
	padding : 20px 20px;
	font-size : 0.85em;
	background-color: var(--footerBg);
	color: var(--footerColor);
	font-family: monospace;

}

/*UL AS CAROUSEL*/
div.carousel-container {
	position: relative;
	display : block;
	width : 100%;
	margin : 0px 0px 10px 0px;
	padding : 0px;

}
div.home-carousel-container {
}

.carousel-title {
	display : block;
	margin: 20px 0 5px 20px;
	font-family : monospace;
    color: var(--maintitle);
	font-size : 1em;
}

ul.carousel {
	display: flex;
	transition: transform 0.5s ease-in-out;
	gap: 1vw;
	overflow-x: auto; /*Needed to make it scrollable on mobile touch*/
	overflow-y: hidden;
	/*overflow: auto; */
	scrollbar-width: none; /* for Firefox and latest Chromium */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}
ul.carousel::-webkit-scrollbar {
	display: none; /* for Safari and legacy Chromium */
}

ul.carousel li{
	list-style : none;
	scroll-snap-align: center; /* scroll result */
	/*flex: 1 1 0;*/
	aspect-ratio: 1 / 1; /* Ensures height = width */
}

/*On trigger nos carousels */
#home-songsLists-ul-style {
	anchor-name: --home-songsLists-ul-style;
}
#home-songsLists-ul-lg {
	anchor-name: --home-songsLists-ul-lg;
}





/*-- -------------------------- -->
<---       RESPONSIVE           -->
<--- -------------------------- -*/

/* Mobile - 360px */
/* MUST BE EMPTY AS ITS THE DEFAULTS VALUES */
@media only screen and (min-width: 0rem) {

	#main-content {
		padding : 5em 10px 10px 5px;
	}

}


/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

	#home-maintitle {
		font-size : 1.5em;
	}

	#home-songsLists .home-songsLists-li {
		flex: 0 0 10%;
	}


	ul.nav-menu {
		font-size : 1.8em;

	}


	#song-title {
		font-size : 2em;
	}

	#songContent {
		font-size : 1.6em;
	}


}



/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {

	ul.nav-menu li {
	  	padding: 0;
		margin : 0px 20px 0px 0px;

	}

	#actionButtonBack {
		margin-right : 20px;
	}

	#li-actionButtonFullscreen {
		margin-right : 75px;
	}

	#li-actionButtonUserMenu {
		margin-right : 20px;
	}

	#main-content {
		padding : 5em 10px 10px 10px;
	}

	.PageWithoutTopMenu {
		padding-top : 0;
	}


	#home-maintitle {
		margin: 0.7em 0 2em 0;
		font-size : 1.7em;
	}

	#home-songsLists {
	}


	div.carousel-container {
		display : block;
		padding-bottom : 30px; /*For the arrows*/
		transition: transform 0.5s ease-in-out;
	}
	.carousel-title {
		margin-bottom: 0 0 5px 0;
	}


	ul#home-songsLists-ul-style::scroll-button(*) {
	  position: absolute;
	  position-anchor: --home-songsLists-ul-style;
	  border: 0;
	  font-size: 2rem;
	  background: none;
	  color: black;
	  opacity: 0.7;
	  cursor: pointer;
	}

	ul#home-songsLists-ul-lg::scroll-button(*) {
	  position: absolute;
	  position-anchor: --home-songsLists-ul-lg;
	  border: 0;
	  font-size: 2rem;
	  background: none;
	  color: black;
	  opacity: 0.7;
	  cursor: pointer;
	}

	ul#home-songsLists-ul-style::scroll-button(*):hover, ul#home-songsLists-ul-lg::scroll-button(*):hover,
	ul#home-songsLists-ul-style::scroll-button(*):focus, ul#home-songsLists-ul-lg::scroll-button(*):focus {
		opacity: 1;
	}

	ul#home-songsLists-ul-style::scroll-button(*):active, ul#home-songsLists-ul-lg::scroll-button(*):active {
		translate: 1px 1px;
	}

	ul#home-songsLists-ul-style::scroll-button(*):disabled, ul#home-songsLists-ul-lg::scroll-button(*):disabled {
		opacity: 0.2;
		cursor: unset;
		display : inline-block;
	}


	ul#home-songsLists-ul-style::scroll-button(left), ul#home-songsLists-ul-lg::scroll-button(left) {
		content: "◄" / "Previous";
		right: calc(anchor(center));
		bottom: calc(anchor(bottom) - 60px);
	}

	ul#home-songsLists-ul-style::scroll-button(right), ul#home-songsLists-ul-lg::scroll-button(right) {
		content: "►" / "Next";
		left: calc(anchor(center));
		bottom: calc(anchor(bottom) - 60px);
	}

	#home-songsLists .home-songsLists-ul {
		gap: 0.5rem;
	}

	#home-songsLists .home-songsLists-li {
		flex: 0 0 10%;
	}
	#home-songsLists .home-songsLists-li a{

	}

	#song-title {
		font-size : 2em;
	}
	#songContent {
		font-size : 1.5em;
		padding : 0px 0px 0px 2em;
	}
	#keySwitcher {
		font-size : 1.3em;
	}

	.keySwitcherButton {
		padding : 0px 10px;
	}
	#keySwitcherSongKey {
		padding : 0px 10px;
	}
}