html {height:100%; font-size:13px; font-family:"Open Sans", "sans-serif"; scroll-behavior:smooth;}
body {height:100%; top:0; left:0; background-color: var(--body-bg);} /*  transition-duration: 1s; */

@keyframes fadeEffect {from {opacity: 0.1;} to {opacity: 1;}}
@keyframes fadeEffectIm {from {opacity: 0.1;} to {opacity: 0.9;}}
@keyframes fadeAlbum {from {opacity: 0;} to {opacity: 1;}}
@keyframes wipeEnter {0% {transform: scale(0, .025);} 100% {transform: scale(1, 1);}}
@keyframes pulseBlue {0% {transform: scale(1); color:#7E9DC0;} 50% {transform: scale(0.7); color:#2E74B5;} 100% {transform: scale(1); color:#7E9DC0;}}  /* animation: pulseBlue 1s 2; */
@keyframes pulsePlayer {0% {transform: scale(0.4);} 100% {transform: scale(1);}}
@keyframes slideOut {from {clip-path: inset(0 100% 0 0);} to {clip-path: inset(0 0 0 0);}}
@keyframes hoverPlay {0% {transform: scale(0.8);} 100% {transform: scale(1);}}
@keyframes pulsePause {0% {transform: scale(0.9);} 100% {transform: scale(1);}} /* animation:pulsePause 1s ease-out infinite; */

/* @-webkit-keyframes fade-in / -webkit-animation-duration: */

.barstatic {position:fixed; display:block; top:0px; left:0; right:0; top:0; width:100%; height:42px; border-bottom:var(--static-bd); z-index:2; background:var(--static-bg); transition: top 0.4s;}

/* screen 530 et plus */
@media screen and (min-width: 530px) {
#jcbar {font-family: 'Didact Gothic', 'Gentium Plus', 'Open Sans'; font-size:28px; font-weigh:bold; color:#8EA5BB; text-align:left; padding-top:5px; margin-left:65px; letter-spacing:1px; transition:opacity 0.6s, visibility 0.6s; opacity:0; visibility:hidden; z-index:1000; cursor:pointer;}
#jcbar.ok {opacity:1; visibility:visible; animation:wipeEnter 0.8s; transition: all 1s;}
}

/* screen en dessous de 529 : no button*/
@media screen and (max-width: 529px) {
#jcbar {font-family: 'Didact Gothic', 'Gentium Plus', 'Open Sans'; font-size:22px; font-weigh:bold; color:#8EA5BB; text-align:left; padding-top:9px; margin-left:55px; transition:opacity 0.6s, visibility 0.6s; opacity:0; visibility:hidden; z-index:1000; cursor:pointer;}
#jcbar.ok {opacity:1; visibility:visible; animation:wipeEnter 0.8s; transition: all 1s;}
}


/* screen 1440 et plus */
@media screen and (min-width: 1440px) {
.divmain {width:70%; max-width:700px; margin-right:auto; margin-left:auto; padding-top:1px; margin-top:0px;}
.playerdiv {display:flex; max-width:700px; margin:auto; opacity:1; animation:pulsePlayer linear 0.7s, fadeEffect 2s;} /* animation:wipeEnter 2s; */
.tittleblock {margin-left:0px; margin-right:auto; margin-bottom:-30px; padding-top:43px; animation: 2.2s ease-out 1 both slideOut;}
.tittlesite {font-size:min(8vw, 80px); color:var(--lemay-co); letter-spacing:1px; animation:fadeEffect 1.8s;} /* #9ABBC9 #339AC1 #24A0D0 #33A4D1 #459FBA #2E74B5 / text-shadow: var(--lemay-bd); */
.tittlesubsiteblock {margin-bottom:20px; margin-top:-24px; margin-left:155px;}
.tittlesubsite {font-size:min(3.3vw, 16.0pt); color:var(--lemay-sub); font-style:italic; display:inline-block; animation:fadeEffect 4s;}
.chapitre {padding-top:10px; margin-bottom:-10px;}
.textbox {color:var(--color-txt); padding-bottom:9px; padding-top:8px; padding-left:32px; padding-right:12px; margin-bottom:8px; margin-top:0px; margin-left:auto; margin-right:auto; line-height:20px; border:var(--txtdiv-bd); border-width:1px 0px 0px 0px; border-radius:0px 0px 10px 10px; background-color:var(--txtdiv-bg); animation:fadeAlbum 3s;}
}

/* screen entre 1260 et 1439 */
@media screen and (min-width: 1260px) and (max-width: 1439px)  {
.divmain {width:70%; max-width:700px; margin-right:auto; margin-left:auto; padding-top:1px; margin-top:0px;}
.playerdiv {display:flex; max-width:700px; margin:auto; opacity:1; animation:pulsePlayer linear 0.7s, fadeEffect 2s;}
.tittleblock {margin-left:0px; margin-right:auto; margin-bottom:-30px; padding-top:44px; animation: 4s ease-out 1 both slideOut;}
.tittlesite {font-size:min(8vw, 78px); color:var(--lemay-co); letter-spacing:1px; animation:fadeEffect 2s;}
.tittlesubsiteblock {margin-bottom:20px; margin-top:-22px; margin-left:150px;}
.tittlesubsite {font-size:min(3.3vw, 16.0pt); color:var(--lemay-sub); font-style:italic; display:inline-block; animation:fadeEffect 4s;}
.chapitre {padding-top:10px; margin-bottom:-12px;}
.textbox {color:var(--color-txt); padding-bottom:8px; padding-top:8px; padding-left:32px; padding-right:12px; margin-bottom:8px; margin-top:0px; margin-left:auto; margin-right:auto; line-height:20px; border:var(--txtdiv-bd); border-width:1px 0px 0px 0px; border-radius:0px 0px 10px 10px; background-color:var(--txtdiv-bg); animation:fadeAlbum 3s;}
}

/* screen entre 751 et 1259 */
@media screen and (min-width: 751px) and (max-width: 1259px) {
.divmain {width:83%; max-width:700px; margin-right:auto; margin-left:auto; padding-top:1px; margin-top:0px;}
.playerdiv {display:flex; max-width:700px; margin:auto; opacity:1; animation:pulsePlayer linear 0.7s, fadeEffect 2s;}
.tittleblock {margin-left:0px; margin-right:auto; margin-bottom:-30px; padding-top:42px; animation: 4s ease-out 1 both slideOut;}
.tittlesite {font-size:min(8vw, 78px); color:var(--lemay-co); letter-spacing:1px; animation:fadeEffect 2s;}
.tittlesubsiteblock {margin-bottom:20px; margin-top:-22px; margin-left:12vw;} /* 71px */
.tittlesubsite {font-size:min(3.3vw, 15.0pt); color:var(--lemay-sub); font-style:italic; display:inline-block; animation:fadeEffect 4s;}
.chapitre {padding-top:10px; margin-bottom:-15px;}
.textbox {color:var(--color-txt); padding-bottom:8px; padding-top:8px; padding-left:32px; padding-right:12px; margin-bottom:8px; margin-top:0px; margin-left:auto; margin-right:auto; line-height:20px; border:var(--txtdiv-bd); border-width:1px 0px 0px 0px; border-radius:0px 0px 7px 7px; background-color:var(--txtdiv-bg); animation:fadeAlbum 3s;}
}

/* screen portables jusqu'à 750 */
@media screen and (max-width: 750px) {
.divmain {width:90%; max-width:700px; margin-right:auto; margin-left:auto; padding-top:1px; margin-top:0px;}
.playerdiv {display:flex; max-width:700px; margin:auto; opacity:1; animation:pulsePlayer linear 0.7s, fadeEffect 2s;}
.tittleblock {margin-left:25px; margin-right:auto; margin-bottom:-38px; padding-top:37px;  animation: 4s ease-out 1 both slideOut;}
.tittlesite {font-size:min(8vw, 78px); color:var(--lemay-co); letter-spacing:1px; animation:fadeEffect 2s;}
.tittlesubsiteblock {margin-bottom:20px; margin-top:-22px; margin-left:6vw;} /* 20px */
.tittlesubsite {font-size:min(3.5vw, 14.0pt); color:var(--lemay-sub); font-style:italic; display:inline-block; animation:fadeEffect 4s;}
.chapitre {padding-top:10px; margin-bottom:-20px;}
.textbox {color:var(--color-txt); padding-bottom:7px; padding-top:7px; padding-left:32px; padding-right:12px; margin-bottom:8px; margin-top:0px; margin-left:auto; margin-right:auto; line-height:20px; border:var(--txtdiv-bd) border-width:1px 0px 0px 0px; border-radius:0px 0px 6px 6px; background-color:var(--txtdiv-bg); animation:fadeAlbum 3s;}
}

.titletop {color:#101010; line-height:24px; margin-bottom:20px;}

/* TITLE BIG DES CHAPITRES */
/* screen 920 et plus */
@media screen and (min-width: 920px) {
.tittlebig {font-size:32px; font-family: "Didact Gothic", "Open Sans", "sans-serif"; color:var(--albums-tt); font-weight:normal; text-align:left; padding:5px 5px 0px 10px; margin-bottom:9px; letter-spacing:1px; animation:4s linear 1 slideOut, fadeAlbum 2s;} /* animation:fadeAlbum 4s; #6895A8 #2B7C9F #257EA5 #2378B1 */
.supdate {font-size:22px !important;}
}
/* screen entre 645 et 919 */
@media screen and (min-width: 645px) and (max-width: 919px)  {
.tittlebig {font-size:26px; font-family: "Didact Gothic", "Open Sans", "sans-serif"; color:var(--albums-tt); font-weight:normal; text-align:left; padding:5px 5px 0px 10px; margin-bottom:9px; letter-spacing:1px; animation:4s linear 1 slideOut, fadeAlbum 2s;;}
.supdate {font-size:20px !important;}
}
/* screen entre 510 et 644 */
@media screen and (min-width: 510px) and (max-width: 644px)  {
.tittlebig {font-size:24px; font-family: "Didact Gothic", "Open Sans", "sans-serif"; color:var(--albums-tt); font-weight:normal; text-align:left; padding:5px 5px 0px 10px; margin-bottom:9px; letter-spacing:1px; animation:4s linear 1 slideOut, fadeAlbum 2s;;}
.supdate {font-size:19px !important;}
}
/* screen jusqu'à 509 */
@media screen and (max-width: 509px) {
.tittlebig {font-size:22px; font-family: "Didact Gothic", "Open Sans", "sans-serif"; color:var(--albums-tt); font-weight:normal; text-align:left; padding:5px 5px 0px 10px; margin-bottom:9px; letter-spacing:1px; animation:4s linear 1 slideOut, fadeAlbum 2s;;}
.supdate {font-size:18px !important;}
}

.footerbox {color:var(--color-txt); padding-bottom:7px; padding-top:6px; padding-left:20px; padding-right:12px; margin-bottom:10px; margin-top:6px; text-align:left; line-height:20px; border:0px solid #ededed; border-radius:10px; background-color:var(--txtdiv-bg);}


/* IMAGES */
.imgdeco {width:100%; height:auto; display:block; margin-left:auto; margin-right:auto; margin-bottom:min(1vw, 1px); padding-top:0px; margin-top:-2px; border-radius:10px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; opacity:0.9; animation:fadeEffectIm 2s, wipeEnter 2s 1;}

/* .imgdeco:hover {opacity:0.8; transition: all 0.6s ease-out; filter: saturate(120%) brightness(115%);} */


/* PADDING */
.padding10 {padding-bottom:10px;}
.paddingfluid1 {padding-bottom:1vw;}
.paddingfluid2 {padding-bottom:min(6vw, 45px);}

/* HREF ID TOP MARGIN */
.scrollalbum {scroll-margin-top: 58px;}

/* A HREF GENERAL */
a {color:var(--link-a); text-decoration:none;}
a:hover {color:var(--a-hover); text-decoration:none;}
a:visited {color:var(--a-visited); text-decoration:none;}
a:active {color:var(--a-active); text-decoration:none;}


/* SIDE NAV ALBUMS */
.MenuBtn {font-size:30px; cursor:pointer; margin-left:10px; margin-top:4px; color:#b1c0d1; position:fixed; z-index:10; transition:0.2s;}
.MenuBtn:hover {transition:0.2s; color:#8DA5BC;}
.closebtn {position:absolute; top:-10px; right:5px; font-size:50px; color:#ccc; padding:0px 0px 0px 0px !important; margin-bottom:0px; transition:all 0.8s ease-out;}
.closebtn:hover {color:#8DA5BC; cursor:pointer; transition:all 0.3s ease-out;}

.sidenav {position:fixed; height:100%; width:205px; top:0; left:0; background-color:var(--sidenav-bg); opacity:0; border-left:var(--sidenav-leftbd); visibility:hidden; z-index:900;}

.tittlenav {display:block; font-family: "Didact Gothic", "Open Sans", "sans-serif"; font-size:22px; color:var(--sidenav-tt); letter-spacing:1px; font-weight:bold; padding:0px 2px 1px 17px; margin-bottom:10px; margin-top:14px;}

.sidenav a {display:block; font-family: "Open Sans", "sans-serif"; font-size:13px; color:var(--sidenav-a); padding:6px 3px 6px 17px; text-decoration:none; border-top:var(--sidenav-bd); border-bottom:var(--sidenav-bd); border-right:var(--sidenav-bd); transition:all 0.2s ease-out;}

.sidenav a:hover {color:var(--sidenav-ahovco); background-color:var(--sidenav-ahovbg); border-top:#ddd 1px solid; border-bottom:#ddd 1px solid; border-left:var(--sidenav-leftbd); transition:all 0.1s ease-out;}

.sidenav.is-loaded {animation:fadeEffect 0.5s; opacity:1;} /* , wipeEnter 0.5s 1 */
.sidenav.is-out {transition:all 0.7s; opacity:0;}

.date {font-size:11px !important;}


/* DARK/LIGHT SWITCH https://codepen.io/whitep4nth3r/pen/VwEqrQL */
.swlight {position:fixed; top:10px; right:8px;}
[data-theme="light"] {
--body-bg: #fff; /* body background color */
--button-co: #777; /* light/dark button color */
--button-bg:#fff; /* light/dark button background color */
--track-tt: #548192; /* track title color */
--track-pl: #444; /* track playlist color */
--track-act: #488cb5; /* track playlist active color */
--track-ar: #f8f8f8; /* track playlist before arrow color */
--playlist-bg: #f8f8f8; /* playlist div color background */
--playlist-ho: #fcfcfc; /* playlist div color background hover */
--albums-tt: #5a8ea5; /* album titles color */
--lemay-co: #7A94AF; /* JC Lemay Title Color */
--lemay-bd:-1px 0 #666, 0 1px #666, 1px 0 #666, 0 -1px #666; /* JC Lemay Title Border */
--lemay-sub:#819CB4; /* JC Lemay Subtitle Color */
--opac-butt:0.8; /* audio player buttons opacity */
--filt-vol:contrast(100%) brightness(100%); /* volume button opacity */
--color-txt: #666; /* text font color */
--txtdiv-bd: solid #fff; /* text div border color*/
--txtdiv-bg: #F4F4F4; /* text div background color*/
--link-a: #2489cf;
--a-hover: #1D98F1 !important;
--a-visited: #2489cf;
--a-active: #2489cf;
--fa-ms: "\f186"; /* Moon FA Symbol */
--fa-color:#b1c0d1; /* Moon FA Color */
--fa-pad:-3px 3px 0 0; /* Moon FA Padding */
--buttop-bg: #f6f6f6; /* Button to Top Background color */
--buttop-co: #95a8bd; /* Button to Top color */
--buttop-hov: #EAEFF4; /* Button to Top Hover color */
--buttop-bd: #bbb 1px solid; /* Button to Top Border color */
--static-bg:#fff; /* Static Header Bar Background color */ /* #f5f5f5 */
--static-bd:#fff 1px solid; /* Static Header Bar Border color */ /* #ddd */
--sidenav-bg: #f7f8f9; /* Sidenav Background Color */
--sidenav-tt: #5a8ea5; /* Sidenav Title Color */
--sidenav-a: #4f7c91; /* Sidenav Links Color */
--sidenav-ahovbg: #ffffff; /* Sidenav Links Hover Background Color */
--sidenav-ahovco: #1f8cb6 !important; /* Sidenav Links Hover olor */
--sidenav-bd: #f7f8f9 1px solid; /* Sidenav Links Border */
--sidenav-leftbd:#33A4D1 5px solid; /* Sidenav Left Border */
--player-pgco: #D3E6EB; /* Player Progress Bar Color */
--player-pgbar: #b5d3dd; /* Player Progress Bar Loaded Color */
--player-pgpl: #7ca0c9; /* Player Progress Bar Played Color */
--volum-bar: #f7f8f9;
}
[data-theme="dark"] {
--body-bg: #0f0f0f;
--button-co: #eee;
--button-bg:#0f0f0f;
--track-tt: #eee;
--track-pl: #f5f5f5;
--track-act: #8EC5E6;
--track-ar: #394455;
--playlist-bg: #394455;
--playlist-ho: #3F4A5C;
--albums-tt: #B8D7E4; /* #a5c4d1 */
--lemay-co: #B1C0D7; 
--lemay-bd:-1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
--lemay-sub:#ddd;
--opac-butt:1;
--filt-vol:contrast(110%) brightness(120%);
--color-txt: #f5f5f5;
--txtdiv-bd: solid #828282;
--txtdiv-bg: #343D49;
--link-a: #86c5ee;
--a-hover: #1d98f1 !important;
--a-visited: #86c5ee;
--a-active: #86c5ee;
--fa-ms: "\f185"; /* Sun FA Symbol */
--fa-color:#b1c0d1;
--fa-pad:-3px 3px 0 0;
--buttop-bg: #738ca8;
--buttop-co: #f6f6f6;
--buttop-hov: #617d9c;
--buttop-bd: #555 1px solid;
--static-bg:#0f0f0f; /* #4a4a4a */
--static-bd:#0f0f0f 1px solid; /* #777 #0f0f0f */
--sidenav-bg: #4A4A50;
--sidenav-tt: #B1C0D1; /* #88b8e3 */
--sidenav-a: #fff !important;
--sidenav-ahovbg: #66666F;
--sidenav-ahovco: #ffffff !important;
--sidenav-bd: #4A4A50 1px solid;
--sidenav-leftbd:#617d9c 5px solid;
--player-pgco: #8cb5cc; /* Player Progress Bar Color */
--player-pgbar: #7BA9D2; /* Player Progress Bar Loaded Color */
--player-pgpl: #4f6884; /* Player Progress Bar Played Color */
--volum-bar: #3F4A5C;
}



/* BACK TO PAGE TOP BUTTON */
/* screen 751 et plus : bouton bottom */
@media screen and (min-width: 751px) {
#buttop {display:inline-block; background-color:var(--buttop-bg); width:47px; height:47px; text-align:center; border:var(--buttop-bd); border-radius:4px; position:fixed; bottom:8px; right:8px; transition:background-color .4s, opacity .6s, visibility .6s; opacity:0; visibility:hidden; z-index:1000;
}}

button {margin:var(--fa-pad); border-radius: 16px; cursor: pointer; background-color:transparent; border: 0 solid var(--button-co);}

button:hover {filter:saturate(130%) brightness(110%); transition:all 0.2s ease-in-out;}

button::before {
	position:relative;
	content:var(--fa-ms);
	font-family:FontAwesome;
        font-weight:bold;
        font-size:26px;
        color:var(--fa-color); /* #86c5ee */  
}

button::before:hover {
	filter:saturate(120%) brightness(110%);
}



/* screen en dessous de 750 : no button*/
@media screen and (max-width: 750px) {
#buttop {display:none; opacity:0; visibility:hidden;}
/* button {visibility:hidden;} */
}

#buttop::after {
  content: "\f077";
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  font-size:2em;
  line-height:42px;
  color:var(--buttop-co);
  padding-bottom:6px;
}

#buttop:hover {
  cursor:pointer;
  background-color:var(--buttop-hov);
  text-decoration:none;
}

#buttop:active {
  background-color:#4876A8;
  text-decoration:none;
}

#buttop.yes {
  opacity:1;
  visibility:visible;
}