:root{
  --accent:#6fa8dc;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  cursor: url(cursor/lucario.cur), auto;
}

body{
  font-family:'Roboto', sans-serif;
  color:white;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent), rgba(0, 0, 0) 97%) 70%, color-mix(in srgb, var(--accent), rgba(0, 0, 0) 90%));
  min-height:100vh;
  overflow-x:hidden;
}

.video-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

.header{
  font-weight: 700;
  text-align:center;
  font-size:5rem;
  text-shadow: 0px 0px 50px rgba(255, 255, 255, 0.3);
  letter-spacing:8px;
  margin:40px 0;
}

.wrapper{
  display:flex;
  justify-content:center;
  gap:30px;
  width:90%;
  max-width:1500px;
  margin:0 auto 60px auto;
  align-items:stretch;
}

.glass{
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--accent), rgba(0, 0, 0, 1) 97%), color-mix(in srgb, var(--accent), rgba(0, 0, 0, 1) 90%));
  border:4px solid;
  border-color:var(--accent);
  transition: border-color 0.35s ease, background 0.35s ease;
  box-shadow:0px 0px 20px color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 70%);
  padding:28px;
}

.glass-acc{
  background-image: linear-gradient(to bottom, rgba(10, 10, 10, 1), rgba(42, 42, 42, 1));
  border:4px solid;
  border-color:grey;
  transition: border-color 0.35s ease, background 0.35s ease;
  box-shadow:0 0 50px rgba(128, 128, 128, 0.2);
  padding:28px;
}

.glass-toolbox{
  border:2px ridge;
  border-color:var(--accent);
  transition: border-color 0.35s ease, background 0.35s ease;
  box-shadow:0 0 0px color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 70%);
  padding:8px;
  background-color: color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 95%);
}

.sidebar{
  width:260px;
  position:sticky;
  top:40px;
  height:fit-content;
  max-height:calc(100vh - 80px);
}

.access-box{
  padding:22px;
}

.access-box button{
  width:100%;
  margin-top:7px;
  padding:5px;
  background:transparent;
  color:white;
  border:2px grey solid;
  font-family:'Roboto';
  cursor:pointer;
  transition:0.25s;
}

.access-box button:hover{
  background:lightgrey;
  color:black;
}

.access-box button.active{
  background:dimgrey;
  color:white;
  box-shadow:0 0 10px dimgrey;
}

.access-box h3{
  letter-spacing:1.5px;
  font-size:1.3rem;
  opacity:1;
}

.access-box summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  letter-spacing:3px;
  font-size:1.1rem;
}

.access-box summary::-webkit-details-marker{
  display:none;
}

.access-box summary::after{
  content:"+";
  font-size:2rem;
  transition:0.25s;
}

.access-box details[open] summary::after{
  content:"–";
}

.access-content{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nav-section{
  margin-bottom:26px;
}

.nav-section hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.4);
  margin:16px 0;
  width:70%;
}

.nav-link{
  display:block;
  font-size:1.3rem;
  text-decoration:none;
  margin:2px 0px;
  transition:0.25s;
  opacity:0.60;
  color:white;
  font-weight: 500;
}

.nav-link:hover{
  transform:translateX(6px);
}

.nav-link.active{
  opacity:1;
}

.blue::first-letter{ color:#7fd6ff; }
.orange::first-letter{ color:#FFBC87; }
.red::first-letter{ color:#e2b8ff; }
.purple::first-letter{ color:#ff9c9c; }

.main{
  flex:1;
  padding:40px;
  height:auto;
  align-self:flex-start;
  letter-spacing:0.2px;
}

.section{
  animation:fade 0.35s ease;
}

.section.active{
  display:block;
}

@keyframes fade{
  from{opacity:0; transform:translateY(0px);} 
  to{opacity:1; transform:translateY(0);} 
}

.section h2{
  font-size:2.6rem;
  margin-bottom:20px;
  font-weight: 700;
  
}

.section p{
  line-height:1.8;
  text-align: justify;
  margin-top:10px;
  font-weight: 400;
}

.section p b{
  font-weight: 900;
}

.section ul{
  margin-top: 5px;
  margin-left: 30px;
  list-style-type: square;
}

.section ul li{
  line-height:1.8;
}

.section hr{
  width: 40%;
  min-width: 0px;
  margin-top: 4px;
  margin-bottom: -7px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color:var(--accent);
}

.stamps {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
  gap: 10px;
}

.stamps img {
  transition:0.2s;
}
.stamps img:hover{
  transform: scale(1.09);
  
}

.emote {
  width:1.6em;
  height:auto;
  position: relative;
  vertical-align: middle;
  top: -4px;
}

.train {
  width: 0.7em;
  height: auto;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
}

.train {
  width: 0.7em;
  height: auto;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  right: 0.05em;
}

.socials{
  margin-top:30px;
  margin-bottom:30px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.social{
  height:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:2px dashed;
  box-shadow:0 0 6px white;
  transition:0.25s;
  background:rgba(0, 0, 0, 0.5);
  backdrop-filter:blur(16px);
}

.social svg{
  width:22px;
  height:22px;
  fill:white;
}

.social:hover{
  transform:scale(1.12);
}

.bluesky{border-color:#61aaff; box-shadow:0 0 10px #61abff6a;}
.instagram{border-color:#FF599F; box-shadow:0 0 10px #ff599e76;}
.twitch{border-color:#B56BFF; box-shadow:0 0 10px #b56bff7b;}
.patreon{border-color:#8A8A8A; box-shadow:0 0 10px #8a8a8a7c;}
.soundcloud{border-color:#FFA929; box-shadow:0 0 10px #61abff81;}
.spotify{border-color:#59FF6A; box-shadow:0 0 10px #59ff6a71;}
.bandcamp{border-color:#73A2FF; box-shadow:0 0 10px #73a2ff73;}
.mail{border-color:#999999; box-shadow:0 0 10px #9999997b;}

.grid-bao-vid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 7fr;
  grid-column-gap: 0px;
  grid-row-gap: 23px;
}

.divA1 { grid-area: 1 / 1 / 2 / 2; background-color:white}
.divA2 { grid-area: 2 / 1 / 3 / 2; background-color:blue}
.divA3 { grid-area: 1 / 1 / 3 / 2; background-color:red}

.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 0fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  font-size:1.4rem;
  color:white;
  transition: border-color 0.35s ease, background 0.35s ease;
  box-shadow:0 0 0px color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 70%);
  padding-right:25px;
  padding-left:25px;
  padding-top:15px;
  background:rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.toolbox-grid h3{
  font-size: 1.4rem;
  padding:5px;
  margin-bottom: 0px;
}

.tuto-id{
  display: inline-block;
  min-width: 2.2em;
  padding: 2px 6px;
  margin-right: 8px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 1;
  transition: ease 0.2s;
}

.tuto-title{
  vertical-align: middle;
  font-size: 1rem;
}

.toolbox-grid ul li a:hover .tuto-id{
  background: color-mix(in srgb, currentColor 20%, transparent);
  opacity: 1;
}


.toolbox-grid ul{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.toolbox-grid ul li{
  margin-bottom: 0px;
}

.toolbox-grid ul li a{
  color: var(--accent);
  text-decoration: none;
  transition: ease 0.2s;
}

.toolbox-grid ul li a:hover{
  opacity: 1;
  color: white;
}

.divB1 { grid-area: 1 / 1 / 2 / 5;}
.divB2 { grid-area: 2 / 1 / 3 / 2;}
.divB3 { grid-area: 2 / 2 / 3 / 3;}
.divB4 { grid-area: 2 / 3 / 3 / 4;}
.divB5 { grid-area: 2 / 4 / 3 / 5;}

.toolbox-content{
  opacity:1;
  transform:translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toolbox-content.is-transitioning{
  opacity:0;
}

.nav-toolbox{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  margin-bottom:30px;
}

.nav-toolbox a {
  margin: 0 10px;
  opacity:0.60;
  color:white;
  transition:0.25s;
  display: block;
  text-decoration: none;
  color: inherit;
}

.nav-toolbox a:hover {
  cursor:pointer;
  opacity:1;
}

.nav-prev{
  justify-self:start;
}

.nav-next{
  justify-self:end;
}

.nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.video-text {
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  justify-content: space-between;
}

.video-text h2{
 font-size:3rem;
 margin: 0;
}

.video-text p{
  font-size:1.2rem;
  margin:0px 0;
  letter-spacing:1px;
  white-space: pre-line;
}

.video-trig{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.2);
}

.video-trig details{
  background-color: color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 95%);
  border: 1px dashed var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.video-trig ul li{
  margin-left:36px;
  margin-top:5px;
}
.video-trig summary{
  list-style:none;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.video-trig summary:hover{
  opacity: 1;
  transition: opacity 0.2s;
}

.video-trig details[open] summary{
  opacity: 1;
}

.video-trig summary::-webkit-details-marker{
  display:none;
}

.video-infos{
  margin-top:15px;
}

.video-infos details{
  background-color: color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 95%);
  border: 1px dashed var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.video-infos p{
  font-size:1rem;
  margin-left:24px;
  margin-top:5px;
}

.video-infos summary{
  list-style:none;
 opacity: 0.65;
  transition: opacity 0.2s;
}

.video-infos summary:hover{
  opacity: 1;
  transition: opacity 0.2s;
}

.video-infos details[open] summary{
  opacity: 1;
}

.video-infos summary::-webkit-details-marker{
  display:none;
}

.video-warning{
  margin-top:11px;
}

.video-warning details{
  background-color: color-mix(in srgb, var(--accent), rgba(0, 0, 0, 0) 95%);
  border: 1px dashed var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.video-warning ul li{
  margin-left:36px;
  margin-top:5px;
}
.video-warning summary{
  opacity: 1;
  transition: opacity 0.2s;
}

.video-warning summary:hover{
  opacity: 1;
  transition: opacity 0.2s;
}

.video-warning details[open] summary{
  opacity: 1;
}

.video-warning summary::-webkit-details-marker{
  display:none;
}

.tag-filters-container {
  margin-bottom: 30px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top:10px;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-bar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 15px;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

#video-search {
  width: 100%;
  padding: 12px 20px 12px 45px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

#video-search:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

#video-search::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.filter-label {
  font-size: 0.75rem; 
  opacity: 0.5; 
  margin: 15px 0 8px 5px;
  text-transform: uppercase; 
  letter-spacing: 1px;
}

.filter-controls-top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
}

.search-bar-wrapper {
  flex-grow: 1;
}

.sort-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  height: 45px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 0.9rem;
}

.sort-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

#sort-icon {
  transition: transform 0.3s ease;
}

.no-results {
  grid-column: 1/-1; 
  text-align: center; 
  padding: 60px; 
  opacity: 0.5;
  font-style: italic;
}

.tag-pill {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  user-select: none;
  border: 1px solid transparent;
}

.tag-active {
  background: color-mix(in srgb, var(--accent), rgba(0, 0, 0) 50%);
  border: 1px solid var(--accent);
  color: white;
  opacity: 1;
}

.tag-disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  filter: grayscale(1);
  opacity: 0.5;
}

.tag-pill:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.tuto-text h2{
 font-size:3rem;
 margin: 0;
}

.tuto-text p{
  font-size:1.2rem;
  margin:0px 0;
  letter-spacing:1px;
}

.tuto-refs{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.2);
}

.tuto-refs h3{
  font-size:1.6rem;
  margin-bottom:8px;
  letter-spacing:1px;
}

.tuto-refs ul{
  list-style:none;
  padding-left:0;
  font-size:1.2rem;
}

.tuto-refs li{
  margin:6px 0;
  font-size:1.2rem;
}

.tuto-refs a{
  color:var(--accent);
  text-decoration:none;
}

.tuto-refs a:hover{
  text-decoration:underline;
}

.tuto-refs span{
  color:#B5B5B5;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.video-card {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
  opacity: 0;
  animation: cardEntrance 0.6s ease-out forwards;
  display: block;
  text-decoration: none;
  color: inherit;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}

.video-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.static-thumb {
  z-index: 2;
}

.video-info {
  padding: 10px;
}

.video-tags {
  padding-top:5px;
  display: flex;

}

.video-tags .tag {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-right: 5px;
  background: rgba(255,255,255,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.video-tags .tag-date {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-right: 5px;
  background: rgba(255,255,255,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  align-items: center;
}

.date {
  justify-self:end;
}

.nav-indicator{
  position:absolute;
  left:18px;
  width:4px;
  height:32px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  border-radius:4px;
  transition:top 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.riolu01{
  float:right;
  width:500px;
  height:auto;
  overflow:visible;
  position:relative;
  left:200px;
  top:-250px;
  transform-origin: 35% 50%;
  transition: transform 0.3s ease, filter 0.3s ease;
  shape-outside: inset(0% 0% 0px 250px);
  shape-margin: 50px;
  filter: drop-shadow(0px 0px 10px rgba(179, 224, 255, 0.15));
  margin-bottom: -247px;
}

.riolu01:hover{
  transform: scale(110%) rotate(4deg);
}

.riolu02{
  width: 27em;
  height: auto;
  float: right;
  overflow: visible;
  position: relative;
  right: 0px;
  bottom: 0px;
}

.music-container {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 40px;
  align-items: start;
}
.music-player-col {
  position: relative;
}

.sticky-wrapper {
  position: sticky;
  top: 100px;
}

.player-wrap {
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
}

.playlist-wrap {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.music-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Gemunu Libre', sans-serif;
  font-size: 1.1rem;
  transition: 0.3s;
}

.filter-btn:hover, .filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: black;
}

.play-all-btn {
  margin-left: auto;
  background: white;
  color: black;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-family: 'Gemunu Libre', sans-serif;
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.play-all-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255,255,255,0.4);
}

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px;
}

.music-card {
  animation: fade 0.5s ease;
}

.music-cover-wrapper {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.music-cover-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.music-overlay {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-overlay span {
  font-size: 3rem;
  color: white;
  filter: drop-shadow(0 0 10px black);
}

.music-cover-wrapper:hover .music-overlay {
  opacity: 1;
}

.music-cover-wrapper:hover img {
  transform: scale(1.05);
}

.music-info {
  margin-top: 10px;
}

.music-info h3 {
  font-size: 1.2rem;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-type {
  font-size: 0.9rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hark-player {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
}

.player-header {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.toggle-view-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  width: 35px; height: 35px;
  border-radius: 5px;
  cursor: pointer;
  fill: white;
}

.player-content {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.now-playing-info p{
  margin-top: 0px;
}

.cover-view img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.playlist-view { 
  position: absolute; top:0; left:0; width:100%; height:100%; 
  background: rgba(120,120,120,0.2); transform: translateY(100%); transition: 0.4s ease;
  padding: 20px; overflow-y: auto;
}

.hark-player.show-playlist .playlist-view { transform: translateY(0); }
.hark-player.show-playlist .cover-view { opacity: 0.3; filter: blur(5px); }

#p-list { list-style: none; }
#p-list li { 
  padding: 10px; border-radius: 5px; cursor: pointer; display: flex; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
#p-list li:hover { background: rgba(255,255,255,0.05); }
#p-list li.active { color: var(--accent); font-weight: bold; background: rgba(111, 168, 220, 0.1); }

.player-controls { padding: 15px; background: rgba(0,0,0,0.1); }
.seek-row { display: flex; align-items: center; gap: 10px; font-family: monospace; font-size: 0.8rem; margin-bottom: 15px; }
.seek-row input { flex: 1; accent-color: var(--accent); cursor: pointer; }
.buttons-row { display: flex; justify-content: center; align-items: center; gap: 30px; }
.buttons-row button { background: none; border: none; fill: white; cursor: pointer; width: 30px; }
.buttons-row .main-play { width: 50px; fill: var(--accent); }

.volume-control {
  position: relative;
  display: flex;
  align-items: center;
}

.volume-btn {
  background: none;
  border: none;
  fill: white;
  cursor: pointer;
  width: 25px !important;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.volume-control:hover .volume-btn { opacity: 1; }

.volume-slider-pop {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.95);
  padding: 15px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  display: none;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  z-index: 100;
  height: 120px; 
  width: 40px;
}

#p-volume {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.1);
  border-radius: 5px;
  transform: rotate(-90deg);
  transform-origin: center;
  width: 80px; 
  height: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -3px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 101;
}

#p-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--accent);
}

#p-volume::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

.volume-control:hover .volume-slider-pop {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideUp 0.2s ease-out forwards;
}

.volume-control::after {
  content: "";
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  height: 25px;
  display: none;
}

.volume-control:hover::after {
  display: block;
}

.volume-slider-pop {
  bottom: 40px;
  padding-bottom: 20px;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.secondary-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 22px !important;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.secondary-btn:hover {
  transform: scale(1.1);
  opacity: 1 !important;
}

.buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 33%;
  max-width: 33%;
  padding: 0 8px;
}

.column img {
  margin-top: 16px;
  vertical-align: middle;
  width: 100%;
  transition: transform 0.2s ease, filter 0.2s ease;
  border-radius: 12px;
  z-index:1;
}

.column img:hover {
  transform: scale(1.04);
}

.page{
  display: none;
  padding:25px 25px 25px 25px;
  background:rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.page.active {display: block;}

.ressource{
  display: block;
  padding:25px 25px 25px 25px;
  background:rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ressource a{
  color:var(--accent);
  text-decoration: none;
  transition: ease 0.2s
}

.ressource a:hover{
  color:white;
}

.ressource p{
  line-height:1.2;
}

.ressource svg{
  position:relative;
  vertical-align: middle;
}

.ressource h3{
  font-size: 1.4rem;
  margin-bottom:5px;
}

.ressource ul {
  margin-top:15px;
}

.ressource ul li {
  list-style-type: none;
  margin-left:-10px;
}

.ressource li::before {
    content: "◆";
    padding-right:5px;
    color: var(--accent);
}

.ressource hr{
  margin-bottom:5px;
  margin-top:5px;
}

.artist-card {
  transition: 0.3s;
  border-radius: 5px;
}

.artist-card img:hover {
  transform:scale(1.05);
}

.artist-card img {
  border-radius: 5px 5px 0 0;
  transition: 0.3s;
}

.artist-card-container {
  padding: 18px 0px 0px;
}

.artist{
  display: block;
  width:300px;
  padding:25px 25px 25px 25px;
  background:rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  position: absolute;
  bottom: 5%;
  left: 10%;
  font-size:1.3rem;
  font-family: sans-serif;
}

.reduce-motion *{
  transition:none !important;
}

.reduce-motion .static-thumb{
  opacity:1 !important;
}

.reduce-motion .video-bg{
  display:none;
}

.no-blur *{
  cursor: auto;
}


.high-contrast .glass{
  backdrop-filter:none;
  background:#181818;
  border-color:white;
  box-shadow:0 0 0px;
}

.high-contrast .glass-acc{
  backdrop-filter:none;
  background:#181818;
  border-color:white;
  box-shadow:0 0 0px;
}

.high-contrast .glass-toolbox{
  border-color:white;
}

.high-contrast .nav-link.active{
  text-shadow:none;
}

.high-contrast body{
  font-family:'Lexend';
}

.high-contrast .access-box button{
  border-color:white;
  box-shadow:0 0 0px;
  font-family:'Lexend';
}

.high-contrast .social{
  backdrop-filter:none;
  background:#181818;
  border-color:white;
  box-shadow:0 0 0px;
}

.reduce-motion .toolbox-content{
  transition:none;
}

/* Tablette - Mobile */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media (max-width: 950px) {
  .wrapper {
    flex-direction: column;
    width: 95%;
    gap: 20px;
    margin-bottom: 20px;
  }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .header {
    font-size: 4rem;
    margin: 20px 0;
    letter-spacing: 4px;
  }

  .sidebar {
    width: 100%;
    position: relative;
    top: 0;
    max-height: none;
    height: auto;
  }

  .nav-indicator {
    display: none;
  }

  .nav-link {
    padding: 10px 0;
    opacity: 0.9;
  }
  
  .socials {
    margin-top: 15px;
    margin-bottom: 15px;
    gap: 8px;
  }

  .main {
    padding: 20px;
    width: 100%;
  }

  .section h2 {
    font-size: 2rem;
  }

  .toolbox-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  
  .nav-toolbox {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    margin-bottom: 20px;
  }

  .nav-center {
    position: relative;
    left: auto;
    transform: none;
    order: -1;
    margin-bottom: 10px;
  }
  
  .nav-prev, .nav-next {
    justify-self: center;
  }

  .filter-controls-top {
    flex-direction: column;
    align-items: stretch;
  }
  
  .sort-button {
    justify-content: center;
  }

  .video-text {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .video-bg {
     display: none;
  }
  
  .riolu01 {
    display: none;
  }
  .music-container {
    grid-template-columns: 1fr;
  }

  .sticky-wrapper {
    position: relative;
    top: 0;
    margin-bottom: 40px;
  }
  
  .play-all-btn {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 600px) {

  .column {
    flex: 100%;
    max-width: 100%;
  }
  .video-grid { grid-template-columns: 1fr; }
  .header {
    font-size: 3rem;
  }

  * {
    cursor: auto !important;
  }

  .video-bg {
    display: none;
  }
  
  .video-grid {
    grid-template-columns: 1fr !important;
  }
  
  .toolbox-grid ul li {
    font-size: 1.1rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}