::-moz-selection { /* Code for Firefox */
  background: #d2ff56;
  color: #100a13;
}

::selection {
  background: #d2ff56;
  color: #100a13;
}

	#container {
		height: 100vh;
		height: 100dvh;
		width: 100vw;
		    background: linear-gradient(0deg, rgb(151 75 75 / 100%), #28182f);

		position: fixed;
		top: 0;
	}

	body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		font-family: 'Raleway';
	}

	#coco {
    position: absolute;
    font-size: clamp(25px, 2vw, 123px);
    font-family: 'Orna';
    left: 50%;
    top: 3%;
    transform: translate(-50%, 0%);
    /* width: 100%; */
    text-align: center;
    line-height: 90%;
    max-width: 13vw;
    color: #d2ff56;
    z-index: 3;
    opacity: 1;
    transition: opacity 0.5s 0.75s;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
	}

	#coco.close {
		opacity: 0;
		    transition: opacity 0s 0s;

	}

		#coco div, .subtitle {
	    font-family: 'Raleway';
	    font-size: clamp(12px,  0.25vw, 25px);
	    color: #100a13;
	    line-height: 27px;
	    margin: 0.2vw auto;
	    background: #cdff44;
	    width: max-content;
	    padding: 0px 1vw;
	    border-radius: 59%;
	    font-weight: bold;
		}

	canvas {
		aspect-ratio: unset !important;
		filter: saturate(150%);
    transition: opacity 0.5s;
    display: none !important;
	}

	#iframeCarrier {
		display: none;
	}

  .flickity-button:disabled {
    display: none !important;
  }


/* Texte défilant */
.messagedefilant {
  display: block;
  /* margin: 40px auto; */
  padding: 0;
  overflow: hidden;
  position: relative;
  /* width: 50%; */
  /* max-width: 640px; */
  height: 50px;
  flex: 1;
}

.messagedefilant div {
  position: absolute;
  min-width: 100%;
  height: 100%;
  display: flex;
}

.messagedefilant div span {
  position: relative;
  display: inline-block;
  font-size: 17px;
  white-space: nowrap;
  top: 0;
  font-weight: 500;
  height: max-content;
  transform: translateY(35%);
  color: #100a13;;;
  padding-left: 10px;
  line-height: 28px;
  animation:  calc(5 * 5s) infinite linear reverse;

}

.messagedefilant div span p {
  margin: 0;
}

.messagedefilant div span p a {
  color: inherit;
}

.messagedefilant div span:first-child {
  animation-name: defilement;
}

.messagedefilant div span:last-child {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: defilement2;
}

.dbai {
    padding: 0;
    font-family: 'Orna';
    animation: none;
    cursor: pointer;
    border: none;
    /* text-transform: capitalize; */
    background: transparent;
       font-size: clamp(25px, 2vw, 123px);
    text-shadow: 0 0 8px #000, 0 0 30px #000000;
    color: white;
    font-weight: normal;
    position: fixed;
    border-radius: 0px;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2%;
    z-index: 6;
}

.info .dbai {
	bottom: unset;
	top: 10px;
}

.header {
	  display: inline-flex;
    width: 100vw;
    height: 50px;
    position: absolute;
    bottom: 0;
    background: #cdff44;
    left: 0;

}

.info {
    position: fixed;
    height: 100vh;
    height: calc(100dvh - 8vw);
    top: 8vw;
    margin: auto;
    width: 100vw;
    z-index: 5;
    opacity: 0;
    z-index: -10;
    transition: transform 0.5s;
/*    background: #d2ff56;
    box-shadow: 0px 0px 70px #d2ff56, 0px 0px 20px #d2ff56;
    color: #28182f;*/
    color: #d2ff56;
    display: inline-flex;
}

body:has(menu.close) .info.open  {
     opacity: 1;
    z-index: 1;
    
}

body:has(menu:not(.close)) #container canvas, body:has(.info.open) #container canvas {
     opacity: 0.1;
    
}

.info.open .header {
	border-top: 1px solid #100a13;

}


 .info.open .header  .messagedefilant span {
	    color: #cdff44;
}

.info.open .header button {
			background: transparent;
}


.header button {
	  font-family: 'Orna';
    text-transform: uppercase;
    font-size: 25px;
    line-height: 50px;
    padding: 0px;
    background: linear-gradient(90deg, white 0%, transparent 90%);
    color: #100a13;;
    border: transparent;
    cursor: pointer;
}

h2, h4, ul:not(.flickity-enabled), p, blockquote {
	    margin: auto;
   max-width: 800px;
}

.pres {    
    margin: auto;}


.header img {
	    height: 20px;
    padding-left: 5px;
    margin-bottom: 0;
}

.info.open .header button span:last-child, .info:not(.open) .header button span:first-child, .info.open .messagedefilant {
	display: none;
}

.info.open .header button span:first-child {
	    width: 160px;
    display: block;
    transform: scale(3.5, 0.5);
    font-size: 50px;
}

.info:not(.open) .header button span:last-child {
	padding-left: 12px;
}

.info .content {
	    height: calc(100% - 4vw);
    overflow-x: hidden;
    overflow-y: auto;
    padding:  0px;
    flex: 2;

}

.info .content a {
	overflow-wrap: anywhere;
	color: #100a13;
}

.info .content .pres a {
  overflow-wrap: anywhere;
  color: inherit;
}

[page="residency"] .gallery img {
  height: 400px;
}


.info .content .pres p {
	  font-size: 20px;
    line-height: 123%;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.info .content .pres h2, .info .content .pres h3 {
      font-size: clamp(25px, 2vw, 123px);
    font-family: 'Orna';
    text-align: center;
    font-weight: normal;
    margin: 2vw auto;
    width: fit-content;
    
}

.info .content .pres h2{
	     font-size: clamp(25px, 4vw, 123px);    }

.info .content .pres h4 {
	font-size: 20px;
	line-height: 123%;
}

.info .content .facts h2 {
	font-size: 22px;
}

.info .content .pres ul:not(.flickity-enabled) {
	padding-inline-start: 75px;
	font-size: 20px;
	width: 75%;
}

ul.flickity-enabled li {
  display: block;
}

ul.flickity-enabled, figure {
  margin: 0;
  padding: 0;
}

ul .flickity-button {
  background: #d2ff5680;
}

ul .flickity-button:hover {
  background: #d2ff56;
}

figure.gallery, figure:not(.gallery) img {
  margin: 0.5vw auto;
}

figure:not(.gallery) img {
    max-width: 800px;
    object-fit: contain;
    object-position: center;
    max-height: 60vh;
    margin: 0.5vw auto;
    display: block;
}

.info .content .facts ul {
	padding-inline-start: 135px;
	font-size: 17px;
	width: 75%;
}

.closed {
        position: fixed;
    top: 19px;
    right: 19px;
    font-weight: bold;
    display: none;
    z-index: 5;
    align-items: center;
    column-gap: 20px;
  }

  .closed .titre, .titre.mobile {
    font-size: clamp(10px, 1.25vw, 35px);
    color: #d2ff56;
  }

  .closed  button{

    cursor: pointer;
    font-size: 20px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
  }


  body:has(.info.open) .closed, body.focusPeople .closed {
    display: flex;
  }

.info .facts {
		    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(22px, 5vw, 100px);
    justify-content: space-between;
    padding: 0vw;
    min-width: 350px;
    }

.info .facts section {
}

.info .facts p {
	padding-left: clamp(15px, 5vw, 50px); 
	font-size: 17px;
	max-width: 500px;
}

.apply {
	
    flex: 1;
    padding: 2.5vw;
    height: calc(100dvh - 5vw - 50px);
    height: calc(100vh - 5vw - 50px);
    font-size: 17px;
    border-right: 1px solid #100a13;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;

} 

.apply .titre {
    font-size: 5vw;
    text-align: center;
    line-height: 95%;
    font-family: orna;
    color: #d2ff56;
}

.apply img {
	  width: 80%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    position: absolute;
    display: none;

}

.apply img:last-child {
	 object-position: bottom;
}

.apply .subtitle {
	font-size: clamp(10px,  1.25vw, 35px);
	margin: 10px auto;
}

blockquote {
  font-size: clamp(25px, 2vw, 123px);
    font-family: 'Orna';
    text-align: center;
}

blockquote footer {
      font-family: 'Raleway';
    font-size: clamp(12px,  0.25vw, 25px);
    color: #100a13;
    line-height: 27px;
    margin: 0.2vw auto;
    background: #cdff44;
    width: fit-content;
    padding: 0px 1vw;
    border-radius: 59%;
    font-weight: bold;
}

h2, h3, h4 {
  text-align: center;
}

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: #f5f5f5;
    }

    menu {
            transition: width 0.5s, background 0.5s 0.5s, height 0.5s;
            position: relative;   z-index: 5;    margin: 0;

    }

    menu:not(.close) {
        width: 100vw;
    height: 100vh;   
    }

    menu.close {
      width: 80px;
      height: 80px;
                  transition: width 0.5s, background 0s 0s, height 0.5s;

    }

    menu.close button.metaball-btn {
    width: 60px !important;
    top: 20px !important;
    left: 20px !important;
    height: 60px !important;
     }


    button.metaball-btn {
      position: absolute;
      border: none;
      overflow: hidden;
      line-height: 89%;
      border-radius: 50%;
      color: #100a13;
      cursor: pointer;
      transition: top 0.5s ease, left 0.5s ease, transform 0.3s, width 0.5s, height 0.5s;
    }



    menu button {
        font-family: Raleway;
      font-size: clamp(10px, 0.75vw, 35px);
      font-weight: bolder;
            transition: top 0.5s ease, left 0.5s ease, transform 0.3s, width 0.5s, height 0.5s;
      background: radial-gradient(white, #d2ff56);;

    }

    menu button.metaball-btn span {
      font-weight: lighter;
            font-size: clamp(8px, 0.55vw, 35px);
    }

    menu button:hover, .checkpodcast:hover {
      transform: scale(1.1);
      color: white;
      background: radial-gradient(#100a13, #d2ff56);;
    }

    menu button.metaball-btn:has(span:not(:empty)) div {
      padding-top:0.35vw 
         }

  
    .menu-toggle {
          position: absolute;
    top: 19px;
    left: 19px;
    z-index: 10;
    width: 62px;
    height: 62px;
    border: none;
    color: #100a13;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    }

    #metaball-svg {
  position: absolute;
  top: 0px; left: 0;
  width: 100%; height: 100%;

  pointer-events: none;
}

 menu.close svg {
  display: none;
 }

#tooltip {
    position: fixed;
  pointer-events: none;
    color: #d2ff56;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 50px;
  white-space: nowrap;
  z-index: 10;
  display: none;
  color: white;
  background: radial-gradient(#100a13, #d2ff56);
}

body.focusPeople #tooltip {
z-index: 1000;
}

 body.focusPeople #tooltip strong::before {
  content: "✕ ";
 }

.bio {
  z-index: -5;
  opacity: 0;
  transition: z-index 0.5s, opacity 0.5s 0.5s, transform 0.5s 4s;
  position: fixed;
  right: 19px;
  max-width: clamp(80px, 550px, calc(100% - 38px));
  margin-top: 20px;
  font-weight: 500;
  max-height: 81dvh;
  overflow-y: auto;
  pointer-events: none;

}

.bio.active {
    z-index: 60;
    opacity: 1;
    pointer-events: auto;
}

.bio .text {
    padding: 20px;
    background: #d2ff56;
    color: #28182f;
    border-radius: 30px;
}

.bio .text a {
    color: #28182f;
}

.bio .residency {
  background: #28182f;
  color: #d2ff56;
  padding: 20px;
  border-radius: 30px;
  margin-top: 10px;

}

.bio .residency a {
  color: #d2ff56;
}


.bio figure.gallery {
      max-height: clamp(400px, 26vh, 700px);
    margin-bottom: 20px;
    overflow: hidden;
}

.bio figure.gallery img {
    width: 100%;
    object-fit: contain;
    margin: auto;
}

 body:has(menu:not(.close)) .closed {
      display: none !important;
     }

     .artwork-frame {
      border-radius: 50%;
      width: 0px;
      height: 0px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.8s, height 0.8s, border-radius 0.8s, top 0.8s, left 0.8s, z-index 0s 0.7s, transform 0.7s, background 0s 0.8s;
      z-index: -60;
      border: none;
     }

     .artwork-frame.loaded {
      width: 100vw;
      border-radius: 0%;
      z-index: 9500;
      top: 0;
      left: 0;
      transform: translate(0%);
      height: 100dvh;
      transition: width 0.8s, height 0.8s, border-radius 0.8s, top 0.8s, left 0.8s, z-index 0s, transform 0.7s;
      }

           .listening .artwork-frame.loaded {
            height: calc(100dvh - 50px);
           }

           .loading {
                position: fixed;
    z-index: 50;
    width: clamp(650px, 25vw, 700px); 
    max-width: calc(100% - 60px);
    color: #d2ff56;
    /* background: #28182f; */
    padding: 20px;
    border-radius: 50px;
    top: 50%;
    font-weight: bold;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
           }

           body:has(.info.open) .loading, body.charge .loading.close {
              display: none !important;
           }

           body:not(.charge) .loading .enter, body.charge .chargement, body:not(.charge) menu {
              display: none !important;
           }

           body.charge .loading {
            /*display: none;*/
           }

           body.charge:has(.loading.close) #container canvas {
              display: block !important;
           }





@keyframes defilement {
  0% {
    margin-left: -100%;
  }

  100% {
    margin-left: 0%;
  }
}

@keyframes defilement2 {
  0% {
    margin-left: 0%;
  }

  100% {
    margin-left: 100%;
  }
}

.checkpodcast {
    width: 100%;
    border-radius: 50px;
    padding: 10px;
    color: #28182f;
    font-family: 'Raleway';
    font-weight: 600;
    font-size: 18px;
    margin-top: 8px;
    cursor: pointer;
    background: radial-gradient(white, #d2ff56);
    border: none;
          transform: scale(1.0) !important;
}

.dirbutton {
      width: 170px;
    height: 170px;
    border-radius: 50%;
    border: none;
        background: radial-gradient(white, #d2ff56);
            color: #28182f;
    font-family: 'Raleway';
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
}

.dirbutton:hover {
      transform: scale(1.1);
    color: white;
    background: radial-gradient(#100a13, #d2ff56);
}

body:has(.info.open) #tooltip, body:not(.charge) #tooltip  {
  display: none !important;
}

.playlist {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100vw;
    background: #28182f !important;
    color: #cdff44;
}


.playlist button:not(.plyr__controls__item, .plyr__control), .plyr__control, .plyr__controls__item {
  color: #cdff44 !important;
}

.playlist button:hover, .plyr__menu__container .plyr__control, .plyr__tooltip {
  color: white !important;
}

.pp {
      position: fixed;
    z-index: 80000;
    transform: rotate(90deg) translateX(-50%);
    color: #d2ff56;
    bottom: 6px;
    right: -64px;
    font-size: 13px;

}

.pp a {
    color: #d2ff56;
    margin: 0px 5px;
}

.listening .pp {
  bottom: 58px;
}


.blocksys .song {
  position: relative;
  color: #100a13;
  background: radial-gradient(white, #d2ff56);
  font-size: 20px;
  cursor: pointer;
}

.blocksys .song:hover {
    color: white;
    background: radial-gradient(#100a13, #d2ff56);
}

.blocksys .song img {
      position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0.05;

}

.blocksys .song div {
  margin: auto;
}

.blocksys {
      padding: 10px 20px;
    margin-bottom: 10px;
    height: calc(100% - 20px);
}

.blocksys h2 {
  font-size: clamp(25px, 2vw, 123px);
  font-family: "Orna";
  font-weight: normal;
    line-height: 100%;
}

.blocksys h3 {
  margin-top: 0;
}

.artwork-frame.carry {
      height: 75dvh;
    width: calc(100vw - 150px);
    background: white;
    opacity: 1;
    visibility: visible;
    z-index: 60;
    box-shadow: 0px 0px 55px #100d51;
    top: 53%;
    border-radius: 50px;
}

.mobile {
  display: none;
}



@media screen and (min-width: 980px) {

.header button:hover, .dbai:hover {
	filter: invert(100%);
}

.listening .dbai {
  bottom: 5%;
}


.info.open .header button:hover {
			color: #100a13;
}

.bio figure.gallery img {
     height: clamp(300px, 20vh, 700px);
}


}

@media screen and (max-width: 980px) {

  .computer {
    display: none !important;
  }


  .titre.mobile {
        text-align: center;
    width: 100%;
    display: block;
    font-size: 25px;
    font-weight: bold;
  }

  #tooltip {
    display: none !important;
  }

	.info.open .header {
   
}

	.apply {
		padding: 25px 2.5vw;
		border-right: 0px;
		border-bottom: 1px solid #100a13;
    height: fit-content;
    flex: unset;
    display: block;
	}

	.apply .titre {
		font-size: 6vh;
		margin: auto;
	}

	.apply .subtitle {
		    font-size: 11px;
    padding: 0px 14px;
    margin: 8px auto;
	}

	.info {
      flex-direction: column;
    top: 13dvh;
    height: 81dvh;
	}

	#coco div {
		padding: 2px 10px;
		margin: 7px auto;
	}

  .closed button, .menu-toggle {
       width: fit-content;
    height: fit-content;
    padding: 4px 9px;
    font-size: 14px;
    z-index: 9;
    color: black;
    text-align: center;
  }

  .closed .titre {
    display: none;
  }

  menu.close button.metaball-btn {
    width: 29px !important;
    height: 29px !important;
  }





.info.open .header button span:first-child {
		width: fit-content;
    display: block;
    transform: scale(1.5, 0.5);
    font-size: 50px;
    padding-left: 22px;
}

	.info .content {
		padding: 0px 22px;
		max-width: unset;
	}

	.info .content .pres p {
		font-size: 17px;
	}

	.info .facts p {
    padding: 0px 22px 0px 45px;
    font-size: 14px;
}

.info .content .facts h2 {
	  margin-bottom: -3px;
    margin-right: 15px;
    line-height: 123%;
}

.dbai {
	text-shadow: none;
	margin-bottom: -2px;
}


.dbai.close {
	color: #100a13;
}


.info .content .pres ul:not(.flickity-enabled) {
	padding-inline-start: 45px;
	font-size: 17px;
	width: 75%;
}

.info .content .facts ul:not(.flickity-enabled) {
	padding-inline-start: 90px;
	font-size: 14px;
	width: 65%;
}
.info .content .facts {  
padding-bottom: 75px;
}

	#container {
		
}

figure.gallery, figure:not(.gallery) img {
  margin: 15px auto;
}

.bio {
  transform: translateY(100dvh);
  height: 77dvh;
}

.bio.active {
  transform: translateY(0vh);
}

.listening .bio {
  height: 71dvh;
}



#coco {
     	min-width: 80vw;
      font-size: 22px;
     }

     figure img {
      max-width: 100% !important;
     }

     figure.gallery img {
      height: 28vh;
      object-fit: contain;
     }

     .flickity-button  {
        transform: translateY(-50%) scale(0.5) !important;
     }

  .plyr--audio {
    background: #28182f !important;
  }
  .listening .artwork-frame.loaded {
            height: calc(100dvh - 82px);
           }

           .pp {
                right: -70px;
           }

           .listening .pp {
              bottom: 83px;
           }

           .blocksys .song {
            font-size: 13px;
           }

           .blocksys h2 {
            padding-bottom: 10px;
           }

           .blocksys {
              padding: 10px 0px 10px 20px;
              width: calc(100% - 40px);
           }


.artwork-frame.carry {
width: 100vw;
}
.dirbutton {
      width: 100px;
    height: 100px;
    font-size: 14px;

}

.loading {
  width: 100%;
  margin-top: 25px;
}
    

}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #100a13; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightgrey; 
}