/** couleurs principales **/
/** couleurs secondaires **/
/**nuances de gris **/
/** mobile **/
/** mobile **/
/** tablette **/
/** variable **/
/** variable **/
/** import des polices 

@font-face {
    font-family : 'lato-light';
    src : url(../polices/lato-light.ttf') format('truetype');
}
**/
@import url("https://fonts.googleapis.com/css2?family=MuseoModerno&display=swap");
@font-face {
  font-family: "made-kenfold";
  src: url("../polices/made_kenfolg/MADE-Kenfolg.otf");
}
@font-face {
  font-family: "newake";
  src: url("/polices/Newake-Font/newake-demo-400.otf");
}
@font-face {
  font-family: "luthon-southard-serif";
  src: url("../polices/Luthon-Southard/Luthon-Southard-Serif.otf");
}
@font-face {
  font-family: "inter-regular";
  src: url("../polices/Inter/static/Inter-Regular.ttf");
}
@font-face {
  font-family: "inter-light";
  src: url("../polices/Inter/static/Inter-Light.ttf");
}
@font-face {
  font-family: "inter-medium";
  src: url("../polices/Inter/static/Inter-Medium.ttf");
}
@font-face {
  font-family: "nimbus";
  src: url("../polices/nimbus-sans-l/NimbusSanL-Reg.otf");
}
@font-face {
  font-family: "work-san";
  src: url("../polices/Work_Sans/static/WorkSans-Medium.ttf");
}
@font-face {
  font-family: "work-san";
  src: url("../polices/Work_Sans/static/WorkSans-Medium.ttf");
}
@font-face {
  font-family: "volume-dealer";
  src: url("../polices/volume_dealer/VolumeDealer.otf");
}
@font-face {
  font-family: "century-old";
  src: url("../polices/century_old/CenturyOldStyleStd-Regular.ttf");
}
/** style de police **/
.work-san-caption,
.work-san-0,
.work-san-1,
.work-san-2,
.work-san-3,
.work-san-4 {
  font-family: "work-san";
}

.work-san-4 {
  font-size: 4rem;
}

.work-san-3 {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  .work-san-3 {
    font-size: 2.5rem;
  }
}

.work-san-2 {
  font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
  .work-san-2 {
    font-size: 1rem;
  }
}

.work-san-1 {
  font-size: 1rem;
}

.work-san-0 {
  font-size: 0.8rem;
}

.work-san-caption {
  font-size: 0.5rem;
}

.luthon-southard-serif,
.luthon-southard-serif-big,
.luthon-southard-serif-narrow,
.luthon-southard-serif-medium,
.luthon-southard-serif-small {
  font-family: "luthon-southard-serif";
  letter-spacing: 6px;
  font-weight: normal;
}

.luthon-southard-serif {
  font-size: 4rem;
}

.luthon-southard-serif-narrow {
  letter-spacing: 3px;
  font-size: 4rem;
}
@media screen and (min-width: 1279px) and (max-width: 1440px) {
  .luthon-southard-serif-narrow {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .luthon-southard-serif-narrow {
    font-size: 2rem;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .luthon-southard-serif-narrow {
    font-size: 3rem;
  }
}

.luthon-southard-serif-small {
  font-family: "luthon-southard-serif";
  letter-spacing: 3px;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .luthon-southard-serif-small {
    font-size: 1.5rem;
  }
}

.inter,
.inter-sm {
  font-family: "inter-regular";
  letter-spacing: 0.5px;
}

.inter {
  font-size: 1rem;
}
@media screen and (min-width: 1279px) and (max-width: 1440px) {
  .inter {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 767px) {
  .inter {
    font-size: 0.6rem;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .inter {
    font-size: 0.8rem;
  }
}

.inter-sm {
  font-size: 0.8rem;
}

.inter-light-1,
.inter-light-2,
.inter-light-0 {
  font-family: "inter-light";
  font-weight: normal;
  letter-spacing: 1px;
}

.inter-light-2 {
  font-size: 2rem;
}

.inter-light-1 {
  font-size: 1rem;
}

.inter-light-0 {
  font-size: 0.9rem;
}
@media screen and (min-width: 1279px) and (max-width: 1440px) {
  .inter-light-0 {
    font-size: 0.8rem;
  }
}

.icone-rs {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .icone-rs {
    font-size: 1rem;
  }
}

.century-old {
  font-family: "century-old";
  font-size: 1rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  word-break: break-word !important;
  background-color: #fafaff;
}

figure {
  position: relative;
}
figure .placeholder-image {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 5%;
  height: 5%;
  text-align: center;
  font-size: 1em;
}

.chargement {
  width: 100vw;
  height: 100vh;
  background-color: #0f0d0f;
  z-index: 9998;
  position: absolute;
}
.chargement .spinner {
  --animation-duration: 1000ms;
  --size: 75px;
  --clr1: #e0d23cbe;
  --clr2: #e4d31f;
  --clr3: #ffec1e;
  --clr4: #fdf05a;
  --clr5: #fbf077af;
  background-color: transparent;
  height: var(--size);
  width: var(--size);
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  top: calc(50vh - var(--size) / 2);
  left: calc(50vw - var(--size) / 2);
}
.chargement .spinner .spinner-item {
  width: calc(var(--size) / 12);
  height: 80%;
  background: var(--clr-spinner);
  animation: spinner1 var(--animation-duration) ease-in-out infinite;
}
@keyframes spinner1 {
  50% {
    transform: scaleY(0.25);
  }
}
.chargement .spinner .spinner-item:nth-child(1) {
  --clr-spinner: var(--clr1);
  animation-delay: calc(var(--animation-duration) / 10 * -3);
}
.chargement .spinner .spinner-item:nth-child(2) {
  --clr-spinner: var(--clr2);
  animation-delay: calc(var(--animation-duration) / 10 * -1);
}
.chargement .spinner .spinner-item:nth-child(3) {
  --clr-spinner: var(--clr3);
  animation-delay: calc(var(--animation-duration) / 10 * -2);
}
.chargement .spinner .spinner-item:nth-child(4) {
  --clr-spinner: var(--clr4);
  animation-delay: calc(var(--animation-duration) / 10 * -1);
}
.chargement .spinner .spinner-item:nth-child(5) {
  --clr-spinner: var(--clr5);
  animation-delay: calc(var(--animation-duration) / 10 * -3);
}

.lazy-load-bg {
  background-image: url("");
  background-color: #1e1a10;
}
.lazy-load-bg.loaded {
  background-image: attr(data-background url);
}

.header {
  height: 40vh;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position-y: 43% !important;
  transition: ease-in-out 0.5s;
}
@media screen and (max-width: 767px) {
  .header {
    height: 25vh;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .header {
    height: 25vh;
  }
}
.header h1 {
  text-align: center;
  text-transform: uppercase;
  color: #fafaff;
  position: relative;
  padding-top: 5%;
}
@media screen and (max-width: 767px) {
  .header h1 {
    padding-top: 15%;
  }
}

.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.navbar {
  width: 100%;
  background-color: #292929;
  text-align: right;
  position: fixed;
  top: 0;
  opacity: 0;
  z-index: 100;
  padding: 10px 0px;
  transform: translateY(-100%);
  transition: 0.5s all ease;
}
@media screen and (max-width: 767px) {
  .navbar {
    background-color: #1e1a10;
    opacity: 1;
    color: #1e1a10;
    bottom: 0px;
    transform: none;
    height: 60px;
    -webkit-backface-visibility: hidden;
    top: unset;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .navbar {
    display: none;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .navbar {
    height: 8vh;
  }
}

.navbar.active {
  transform: translateY(0%);
  opacity: 1;
}

.pseudo-nav {
  width: 100%;
  padding: 10px 0px;
  text-align: right;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .pseudo-nav {
    display: none;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .pseudo-nav {
    display: none;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .pseudo-nav {
    height: 8vh;
  }
}

.navigation {
  list-style: none;
  margin: 0;
  padding-right: 2%;
  display: flex;
  align-items: center;
  float: right;
  height: 100%;
  color: #fafaff;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .navigation {
    color: #7f7f7f;
    background-color: #1e1a10;
    width: 100%;
    padding: 0;
  }
}
.navigation a {
  color: inherit;
  margin: auto;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}
.navigation a:focus, .navigation a:active {
  filter: brightness(85%);
}
.navigation li {
  display: inline-block;
  padding: 0.5% 0px;
  margin-right: 20px;
  border-bottom: 2px solid transparent;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: ease-in-out 200ms;
}
.navigation li.active {
  border-bottom: 2px solid #ffec1e;
}
@media screen and (max-width: 767px) {
  .navigation li.active {
    color: #ffec1e;
    transition: ease-in-out 0.5s;
    border-bottom: none;
  }
}
.navigation li:hover {
  border-bottom: 2px solid #ffec1e;
  transition: ease-in-out 500ms;
}
.navigation li.nav-emphase {
  background-color: #ffec1e;
  padding: 0.7em 1em;
  color: #292929;
  text-transform: uppercase;
}
.navigation li.nav-emphase:hover {
  transform: scale(1.05);
  transition: ease-in-out 200ms;
}
@media screen and (max-width: 767px) {
  .navigation li.nav-emphase {
    border-radius: 5px;
  }
}
@media screen and (max-width: 767px) {
  .navigation li {
    margin: 0;
  }
}
.navigation li i {
  display: block;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  .navigation li span {
    position: relative;
    top: 0.5rem;
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 767px) {
  .titre-header {
    font-size: 2.5em;
  }
}

button {
  padding: 1em 2em;
  text-transform: uppercase;
  color: #292929;
  cursor: pointer;
  transition: color 0.5s, transform 0.2s, background-color 0.2s;
}
button.principal {
  background-color: #ffec1e;
  border-color: #ffec1e;
  stroke: #ffec1e;
}
button.secondaire {
  background-color: #691eff;
  border: #691eff;
  stroke: #691eff;
}
button.texte-clair {
  color: #fafaff;
  text-shadow: 0px 0px 2px #292929;
}
button.texte-clair:hover {
  text-shadow: 0 0 20px black;
}
buttontexte-fonce {
  color: #292929;
}
button.plein {
  border: none;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}
button.plein.effet-brillant:after {
  background: #fff;
  content: "";
  height: 120%;
  left: -100%;
  opacity: 0.5;
  position: absolute;
  top: 20%;
  transform: rotate(-55deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 80%;
}
button.plein:hover {
  letter-spacing: 1px;
  font-weight: bold;
}
button.plein:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
button.plein:disabled {
  background-color: #b3b1a9;
  color: #7f7f7f;
  text-shadow: unset;
}
button.plein:disabled:hover {
  transform: unset !important;
  letter-spacing: unset;
  font-weight: unset;
}
button.bordure {
  background-color: transparent;
  position: relative;
  transition: 0.2s;
  border: none;
}
button.bordure svg,
button.bordure svg rect {
  width: 100%;
  height: 100%;
  fill: transparent;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}
button.bordure svg rect {
  stroke-width: 8;
  transition: 0.5s;
  stroke-dasharray: 1000, 100;
  stroke-dashoffset: 0;
}
button.bordure span {
  position: relative;
  z-index: 2;
}
button.bordure:hover {
  font-weight: bold;
  letter-spacing: 1px;
}
button.bordure:hover svg rect {
  stroke-dasharray: 200, 800;
  stroke-dashoffset: 592;
}

.couleur-erreur {
  color: #e63946;
}

section {
  width: auto;
  margin-bottom: 5%;
}
section .titre-section {
  padding: 3% 0% 3% 15%;
}
@media screen and (max-width: 767px) {
  section .titre-section {
    padding: 5%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  section .titre-section {
    padding: 3% 0% 3% 5%;
  }
}
section p {
  font-family: "nimbus";
  margin: 5% 0%;
  max-width: 600px;
}

.section-blanche {
  background-color: #fafaff;
  color: #292929;
}

.section-noire {
  background-color: #292929;
  color: #fafaff;
}

footer {
  background-color: #1e1a10;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #1e1a10;
  display: grid;
  grid-template-areas: ". rs contact" ". cp contact";
  grid-template-columns: 1fr 3fr 1fr;
}
@media (min-width: 481px) and (max-width: 767px) {
  footer {
    background-position-x: -100px;
  }
}
footer div.reseaux-sociaux {
  text-align: center;
  color: #fafaff;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: rs;
}
footer div.reseaux-sociaux h2 {
  margin-bottom: 3%;
  margin-top: 2%;
}
footer div.reseaux-sociaux div {
  display: flex;
  flex-direction: row;
  flex-direction: row;
  width: 25%;
  font-size: 1em;
  color: #fafaff;
}
@media screen and (max-width: 767px) {
  footer div.reseaux-sociaux div {
    font-size: 0.3em;
  }
}
footer div.reseaux-sociaux div a {
  margin: auto;
  color: #fafaff;
}
footer div.reseaux-sociaux div a span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  border: 1px solid #7f7f7f;
  transition: ease-in-out 0.5s;
}
footer div.reseaux-sociaux div a span:hover {
  background-color: #fafaff;
  color: #1e1a10;
}
@media screen and (min-width: 1279px) and (max-width: 1439px) {
  footer div.reseaux-sociaux div a span {
    width: 2em;
    height: 2em;
  }
}
@media screen and (max-width: 767px) {
  footer div.reseaux-sociaux div a span {
    width: 4em;
    height: 4em;
  }
}
@media screen and (max-width: 767px) {
  footer div.reseaux-sociaux {
    padding: 10%;
    padding-bottom: 30%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  footer div.reseaux-sociaux {
    padding-bottom: 20%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  footer div.reseaux-sociaux {
    padding: 10%;
  }
}
footer div.contact {
  grid-area: contact;
  color: #b3b1a9;
  cursor: pointer;
}
footer div.contact a {
  text-decoration: none;
  color: #b3b1a9;
}
footer div.contact h3 {
  margin: 13% 0% 2% 0%;
}
footer div.contact h3:hover {
  color: #fafaff;
  transition: ease-in-out 0.5s;
}
footer div.contact hr {
  border-bottom: 1px;
  margin: 0 5% 3% 0%;
}
footer div.contact p {
  line-height: 1.5;
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  footer div.contact {
    display: none;
  }
}
footer p.copyright {
  grid-area: cp;
  text-align: center;
  color: #7f7f7f;
  margin: 2%;
  line-height: 1.5;
}

.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

.lecteur-audio {
  top: 90vh;
  left: 0;
  width: 100vw;
  height: 10vh;
  position: fixed;
  display: none;
  z-index: 2;
}
.lecteur-audio audio {
  width: 100%;
  height: 100%;
  background: black;
}
@media (min-width: 481px) and (max-width: 767px) {
  .lecteur-audio {
    height: 20vh;
    top: 80vh;
  }
}

.audio-container {
  display: grid;
  background-color: #0f0d0f;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid #5c595e;
  padding: 0 1%;
}
@media screen and (max-width: 1180px) {
  .audio-container {
    grid-template-columns: 4fr 1fr;
  }
}

/** section information sur le morceau qui passe **/
.info-morceau {
  display: flex;
  align-items: center;
}
.info-morceau .affiche-miniature {
  height: 8vh;
  margin: 0 2em 0 0;
}
.info-morceau .affiche-miniature img {
  width: 100%;
  height: 100%;
}
@media (min-width: 481px) and (max-width: 767px) {
  .info-morceau .affiche-miniature {
    height: 16vh;
  }
}
.info-morceau .information-texte-cont .titre-morceau {
  display: block;
  color: #fafaff;
  margin-bottom: 0.5em;
  font-size: 0.8em;
}
.info-morceau .information-texte-cont .compositeurs-morceau {
  color: #898495;
}

/** section controle sur le morceau qui passe **/
.controles {
  display: flex;
  flex-direction: column;
  width: 100%;
  bottom: 0;
  border-radius: 5px 5px 0px 0px;
  align-items: center;
  transition: opacity 0.2s;
}
.controles .controles-cont {
  margin: auto;
  display: flex;
  -moz-column-gap: 20px;
       column-gap: 20px;
  align-items: center;
}
.controles .controles-cont .timeline {
  width: 100%;
}
.controles .controles-cont .control-button {
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  color: #fafaff;
}
.controles .controles-cont .control-button.play-button {
  margin: auto;
  font-size: 2em;
  color: #fafaff;
}
.controles .controles-cont .control-button.play-button:hover {
  transform: scale(1.1);
}
.controles .controles-cont .control-button.nav-button {
  font-size: 1.2em;
  opacity: 0.5;
}
.controles .controles-cont .control-button.nav-button:hover {
  opacity: 1;
}

.range {
  -webkit-appearance: none;
  height: 0.3em;
  background-color: rgba(255, 255, 255, 0.1882352941);
  border-radius: 5px;
  background-size: 0% 100%;
  background-image: linear-gradient(#fafaff, #fafaff);
  background-repeat: no-repeat;
  margin: 0 auto auto auto;
  width: 100%;
}
@media screen and (max-width: 1180px) {
  .range {
    grid-column-start: 1;
    grid-column-end: 3;
    display: grid;
  }
}
.range.display-thumb {
  background-image: linear-gradient(#ffec1e, #ffec1e);
  cursor: pointer;
}
.range.display-thumb::-webkit-slider-thumb {
  opacity: 1;
}
.range.display-thumb::-moz-range-thumb {
  opacity: 1;
}
.range.display-thumb::-ms-thumb {
  opacity: 1;
}
.range::-webkit-slider-thumb:hover {
  background-color: #dadadd;
}
.range::-moz-range-thumb:hover {
  background-color: #dadadd;
}
.range::-ms-thumb:hover {
  background-color: #dadadd;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fafaff;
  opacity: 0;
}
.range::-moz-range-thumb {
  -moz-appearance: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  background-color: #fafaff;
}
.range::-ms-thumb {
  -ms-progress-appearance: none;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  background-color: #fafaff;
}
.range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.range::-moz-range-track {
  -moz-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.range::-ms-track {
  -ms-progress-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

/** section outils **/
.outils {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 5px;
       column-gap: 5px;
  padding-right: 10px;
}
.outils .tool-button {
  color: #fafaff;
  font-size: 1em;
  opacity: 0.5;
  transition: all ease-in-out 0.2s;
  cursor: pointer;
}
.outils .tool-button:hover {
  opacity: 1;
}
.outils .tool-button.download-button {
  margin-right: 1em;
}
.outils .volume-range {
  width: auto;
  background-size: 100% 100%;
}
.outils input {
  margin: unset;
}

/** version mobile **/
@media screen and (max-width: 480px) {
  .bureau {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .bureau {
    display: none !important;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .bureau {
    display: none !important;
  }
}

@media screen and (min-width: 767px) {
  .mobile {
    display: none;
  }
}

@media screen and (min-width: 480px) {
  .mobile-portrait {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .non-mobile-portrait {
    display: none;
  }
}

@media screen and (min-width: 1180px) {
  .tablet {
    display: none;
  }
}

@media screen and (max-width: 1179px) {
  .min-tablet {
    display: none;
  }
}

.hamburger {
  height: 20px;
  width: 30px;
  position: fixed;
  z-index: 99;
  top: 20px;
  left: calc(100vw - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .hamburger {
    left: calc(100vw - 80px);
    height: 40px;
    width: 60px;
  }
}
.hamburger .ligne {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 10px;
  background: #7f7f7f;
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .hamburger .ligne {
    height: 6px;
  }
}
.hamburger .ligne.ligne1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.hamburger .ligne.ligne2 {
  transition: transform 0.2s ease-in-out;
}
.hamburger .ligne.ligne3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.hamburger-menu-items {
  position: fixed;
  left: 50vw;
  z-index: 98;
  padding-top: 10vh;
  padding-left: 2.5em !important;
  background: #1e1a10;
  height: 100vh;
  width: 70vw;
  transform: translate(150%);
  display: flex;
  flex-direction: column;
  margin-top: 0;
  transition: transform 0.5s ease-in-out;
  list-style: none;
}
.hamburger-menu-items a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: #b3b1a9;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}
.hamburger-menu-items a:focus, .hamburger-menu-items a:active {
  color: #ffec1e;
}
.hamburger-menu-items a li {
  margin-bottom: 2.5rem;
  font-size: 1.2rem;
}
@media screen and (min-height: 374px) and (max-height: 500px) {
  .hamburger-menu-items a li {
    margin-bottom: 1rem;
    font-size: 1rem;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .hamburger-menu-items a li {
    font-size: 2rem;
  }
}
@media screen and (min-height: 374px) and (max-height: 500px) {
  .hamburger-menu-items {
    width: 35vw;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .hamburger-menu-items {
    transform: translate(300%);
  }
}

.hamburger-input {
  position: fixed;
  display: block;
  height: 30px;
  width: 30px;
  top: 20px;
  left: calc(100vw - 50px);
  z-index: 100;
  opacity: 0;
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .hamburger-input {
    left: calc(100vw - 80px);
    height: 40px;
    width: 60px;
  }
}
.hamburger-input[type=checkbox]:checked ~ .hamburger-menu-items {
  transform: translateX(0%);
}
@media (min-width: 481px) and (max-width: 767px) {
  .hamburger-input[type=checkbox]:checked ~ .hamburger-menu-items {
    transform: translate(43%);
  }
}
.hamburger-input[type=checkbox]:checked ~ .hamburger .ligne1 {
  transform: rotate(35deg);
}
.hamburger-input[type=checkbox]:checked ~ .hamburger .ligne2 {
  transform: scaleY(0);
}
.hamburger-input[type=checkbox]:checked ~ .hamburger .ligne3 {
  transform: rotate(-35deg);
}

.header-principal {
  height: 100vh;
  width: auto;
  background-image: url("/images/arriere-plans/accueil-trompette.jpg");
  transition: background-image 3s ease-in-out;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position-y: 95%;
  background-blend-mode: color-dodge;
  background-color: #1e1a10;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 767px) {
  .header-principal {
    background-size: cover;
    background-position-x: 25%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .header-principal {
    background-size: cover;
    justify-content: unset;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .header-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
}
.header-principal div.conteneur-elements {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  right: 3%;
  top: 25%;
}
@media screen and (max-width: 480px) {
  .header-principal div.conteneur-elements {
    width: 95%;
    top: 40%;
    right: 0%;
    align-items: flex-end;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .header-principal div.conteneur-elements {
    width: -moz-fit-content;
    width: fit-content;
    top: 20%;
    right: 0%;
    align-items: flex-end;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .header-principal div.conteneur-elements {
    position: initial;
    right: unset !important;
    left: unset !important;
    top: 20% !important;
    bottom: unset !important;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .header-principal div.conteneur-elements {
    position: relative;
    bottom: 30%;
    left: 15%;
    top: unset;
  }
}

.titre {
  text-align: left;
  max-width: 13ch;
  text-shadow: 0px 0px 4px black;
  color: #faffff;
  text-transform: uppercase;
  padding-right: 5%;
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
  font-size: 7em;
  line-height: 1.4;
}
@media screen and (min-width: 1279px) and (max-width: 1440px) {
  .titre {
    max-width: 20ch;
    font-size: 4em;
  }
}
@media screen and (max-width: 767px) {
  .titre {
    margin-bottom: 20%;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.6);
    font-size: 2.8em;
    max-width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .titre {
    margin-bottom: 5%;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.6);
    font-size: 2.8em;
    max-width: 100%;
  }
}
.titre::after {
  content: "";
  width: 5px;
  height: 80%;
  position: absolute;
  top: 10%;
  right: 0;
  background-color: #8a868e;
  float: right;
}
.titre.active {
  transform: translateY(0);
  opacity: 1;
}

.watermark {
  position: absolute;
  opacity: 0.2;
  filter: brightness(50%) grayscale(100%);
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  transform: rotate(20deg);
  left: 30vw;
  top: 0vh;
  z-index: 0;
}
@media screen and (max-width: 480px) {
  .watermark {
    transform: rotate(75deg);
    left: -15vw;
    top: 50vh;
    width: 100%;
  }
}

.sous-titre {
  margin-bottom: 15%;
  max-width: 50ch;
  color: #8a868e;
  padding-right: 5%;
  opacity: 0;
  transform: translateX(150px);
  transition: 2s all ease;
}
@media screen and (min-width: 1279px) and (max-width: 1440px) {
  .sous-titre {
    font-size: 1.2rem;
  }
}
.sous-titre.active {
  transform: translateX(0);
  opacity: 1;
}

.boutons-accueil {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 5%;
       column-gap: 5%;
  justify-content: left;
  width: 100%;
  white-space: nowrap;
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
}
@media screen and (min-width: 1279px) and (max-width: 1439px) {
  .boutons-accueil {
    transform: translateY(0px);
  }
}
@media screen and (min-height: 374px) and (max-height: 500px) {
  .boutons-accueil {
    bottom: 70vh;
  }
}
.boutons-accueil.active {
  transform: translateY(0);
  opacity: 1;
}

.evenements {
  height: 22%;
  position: relative;
  margin-top: 5%;
}
.evenements button {
  position: absolute;
  right: 20%;
  bottom: 5%;
}
@media screen and (max-width: 767px) {
  .evenements button {
    left: 5%;
    bottom: 10%;
    font-size: 0.6em;
    right: none;
    width: 43%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .evenements button {
    right: 3%;
    width: 30%;
    bottom: 5%;
    left: unset;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .evenements button {
    right: 5%;
  }
}

.contenu-evenement {
  display: flex;
  height: 100%;
  -moz-column-gap: 5%;
       column-gap: 5%;
  cursor: pointer;
  overflow-y: hidden;
}
@media screen and (max-width: 767px) {
  .contenu-evenement div {
    width: 50%;
  }
}
.contenu-evenement div h3 {
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .contenu-evenement div p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 767px) {
  .contenu-evenement figure {
    height: 300px;
  }
}
.contenu-evenement figure img {
  max-width: 100%;
  max-height: 80%;
}
@media screen and (max-width: 767px) {
  .contenu-evenement figure img {
    height: 100%;
    width: 100%;
  }
}

.contenu-evenement-colonne {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  row-gap: 20px;
}
@media screen and (max-width: 767px) {
  .contenu-evenement-colonne {
    row-gap: 50px;
  }
}
@media screen and (max-width: 767px) {
  .contenu-evenement-colonne div {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .contenu-evenement-colonne figure {
    height: 300px;
  }
}
.contenu-evenement-colonne figure img {
  max-width: 100%;
  max-height: 80%;
}
@media screen and (max-width: 767px) {
  .contenu-evenement-colonne figure img {
    height: 100%;
    max-height: 100%;
  }
}

.snap-carousel {
  padding-top: 10% !important;
}

.snapList-container {
  align-items: center;
}

.element {
  margin: 0;
}

.evenement-dates {
  color: #7f7f7f;
  margin-bottom: 5%;
  display: block;
}

.section-orchestre {
  background-color: #1e1a10;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .section-orchestre {
    background-size: cover;
    background-blend-mode: difference;
  }
}
.section-orchestre div.elements {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 5% 15%;
  text-align: center;
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .section-orchestre div.elements {
    margin: 5%;
    align-items: flex-start;
  }
}
.section-orchestre div.elements div p {
  text-align: left;
}
@media screen and (min-width: 800px) and (max-width: 1920px) {
  .section-orchestre div.elements div p {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .section-orchestre div.elements div p {
    margin: 10% 0% 20% 0%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .section-orchestre div.elements div p {
    margin: 10% 0% 7% 0%;
  }
}
.section-orchestre div.elements div button {
  float: left;
  margin-top: 10%;
}

.section-directeur-musical div.elements {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 10%;
       column-gap: 10%;
  margin: 0% 10% 0% 15%;
  padding-bottom: 5%;
}
@media screen and (max-width: 767px) {
  .section-directeur-musical div.elements {
    flex-direction: column;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .section-directeur-musical div.elements {
    align-items: center;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .section-directeur-musical div.elements {
    margin: 0% 5%;
  }
}
.section-directeur-musical div.elements figure {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .section-directeur-musical div.elements figure {
    width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .section-directeur-musical div.elements figure {
    width: 60%;
  }
}
.section-directeur-musical div h3 {
  margin-bottom: 10%;
  line-height: 0.8;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .section-directeur-musical div h3 {
    font-size: 1.5em;
    text-align: center;
    margin-top: 10%;
  }
}

.section-musiciens {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.section-musiciens div.elements {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 7em;
  padding: 15% 0%;
}

.section-programme {
  position: relative;
}
.section-programme a {
  text-decoration: none;
  color: #292929;
  position: relative;
}
.section-programme div.elements {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  align-items: stretch;
  -moz-column-gap: 10%;
       column-gap: 10%;
  margin: 0% 20%;
  padding-bottom: 10%;
}
@media (min-width: 481px) and (max-width: 767px) {
  .section-programme div.elements {
    margin: 0% 5%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .section-programme div.elements {
    margin: 0% 5%;
  }
}
.section-programme div.elements button {
  overflow: initial;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  margin-top: 3em;
}
@media screen and (min-width: 1279px) and (max-width: 1439px) {
  .section-programme div.elements button {
    font-size: small;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .section-programme div.elements button {
    font-size: 0.6em;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .section-programme div.elements button {
    font-size: 0.8em;
  }
}
.section-programme div.elements figure img {
  box-shadow: #7f7f7f 0px 0px 5px;
  border: 1px solid #fafaff;
  cursor: pointer;
  transition: ease-in-out 0.5s;
}
.section-programme div.elements figure img:hover {
  box-shadow: #292929 0px 0px 10px;
}
.section-programme div.elements::-webkit-scrollbar {
  height: 15px;
}
.section-programme div.elements::-webkit-scrollbar-track {
  background: transparent;
}
.section-programme div.elements::-webkit-scrollbar-thumb {
  border: 5px solid transparent;
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #898495;
}
.section-programme .scroll-program {
  position: absolute;
  top: 45%;
  border: none;
  background-color: transparent;
  padding: none;
}
.section-programme .scroll-program.start {
  left: 10%;
}
.section-programme .scroll-program.end {
  right: 10%;
}

.wrapper {
  flex: 0 0 25%;
}
.wrapper .fig-cont {
  display: grid;
  grid-template-rows: 82% 18%;
  row-gap: 10%;
}

.section-speciale {
  height: 100vh;
  background-color: #252e3a;
  position: relative;
}
@media screen and (max-width: 480px) {
  .section-speciale {
    height: 35vh;
    margin-bottom: 10%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .section-speciale {
    height: 40vh;
  }
}
.section-speciale .custom-button {
  position: absolute;
  left: 73%;
  bottom: 5%;
  width: 20%;
}
@media screen and (max-width: 767px) {
  .section-speciale .custom-button {
    position: relative;
    left: 0;
    bottom: 0;
    width: auto;
    float: right;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .section-speciale .custom-button {
    position: relative;
    left: 0;
    bottom: 0;
    width: auto;
    float: right;
  }
}
.section-speciale img {
  max-height: 100vh;
}

.carousel {
  height: 80%;
  position: relative;
  margin: 0% 15%;
  margin-top: 0;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  perspective: 100px;
}
.carousel .carousel__viewport,
.carousel .carousel__slide {
  margin: 0;
  padding: 0;
}
.carousel .carousel__viewport {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.carousel .carousel__viewport::-webkit-scrollbar {
  display: none !important;
}
.carousel .carousel__viewport a {
  color: #292929;
  text-decoration: none;
}
.carousel .carousel__viewport a:visited, .carousel .carousel__viewport a:hover, .carousel .carousel__viewport a:focus, .carousel .carousel__viewport a:active {
  text-decoration: none;
  color: #292929;
}
.carousel .carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
@media screen and (max-width: 767px) {
  .carousel {
    margin: 0 5%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .carousel {
    margin: 0 5%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .carousel {
    margin: 0 5%;
  }
}

.carousel__navigation {
  position: relative;
  right: 0;
  padding: 3%;
  left: 0;
  text-align: center;
}
@media (min-width: 481px) and (max-width: 767px) {
  .carousel__navigation {
    bottom: 45px;
  }
}
@media screen and (min-width: 767px) and (max-width: 1180px) {
  .carousel__navigation {
    bottom: 75px;
  }
}

.carousel__navigation-list {
  padding: 0;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}
@media screen and (max-width: 767px) {
  .carousel__navigation-button {
    width: 1rem;
    height: 1rem;
  }
}

.fadein {
  animation: fadeIn 0.5s 1;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    background-color: #292929;
  }
  100% {
    background-color: #691eff;
  }
}
.fadeout {
  animation: fadeOut 0.5s 1;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    background-color: #691eff;
  }
  100% {
    background-color: #292929;
  }
}/*# sourceMappingURL=styles.css.map */