@font-face {
  font-family: "Dauphin";
  src: url("../fonts/Dauphin_Regular.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Neue Med";
  src: url("../fonts/NeueHaasDisplayMedium.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
:root {
  --color: black; /* default */
}
body {
  overflow: hidden;
  font-family: "Dauphin";
  background-color: black;
  text-transform: uppercase;
  letter-spacing: -0.1rem;
  color: var(--color);
}

body a {
  color: black;
}

.tiles-outer {
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  position: relative;
}

.navigation a {
  color: white;
  text-decoration: none;
}

.navigation > nav {
  color: white;
}

.tiles-wrapper {
  display: flex;
  width: 100vw;
  height: 100svh;
  will-change: transform;
  justify-content: center;
}
.tiles-wrapper .tiles {
  flex: 0 0 33.333vw;
  height: 100svh;
  position: relative;
  scroll-snap-align: start;
  background: #111;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  /* transition: opacity 0.2s ease-in-out; */
}

.tiles-wrapper .tiles.grow {
  flex: 0 0 100vw;
}

.video-title {
  position: absolute;
  bottom: 1rem;
  left: 0.5rem;
  color: white !important;
}

.video-title h1,
.intro h1,
header h1 {
  font-size: 2.5rem;
  letter-spacing: -0.1rem;
  font-weight: 600;
}

header a {
  color: white;
  text-decoration: none;
}

.black a {
  color: black;
}
.intro {
  padding-bottom: 0.25rem;
}

.desc {
  padding-top: 0.25rem;
  border-top: 1px solid black;
}

.desc p {
  text-align: justify;
}

.video-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  background-color: black;
  /* transition: opacity 0.2s ease-in-out; */
}

.video-wrapper video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.notouch .video-wrapper:hover {
  opacity: 0.2;
}

.active-tile .video-wrapper {
  opacity: 1;
}

.grow-tile .video-wrapper {
  opacity: 1;
}

.notouch .tiles {
  pointer-events: none;
}

.info-content {
  display: flex;
  flex-direction: column;
  height: 100svh;
  width: 100vw;
  box-sizing: border-box;
  color: white;
  position: relative;
  min-height: 100svh;
  z-index: 2;
}

.info-content * {
  border-color: black !important;
}

.info-content a {
  color: white;
  text-decoration: none;
  text-decoration: underline;
}

.text-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  font-family: "Dauphin";
  letter-spacing: -0.1em;
}

.credits-wrapper {
  display: flex;
  flex-direction: column;
}

.credit-wrapper {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;
  padding: 0.25rem 0;
}

.credit-wrapper:last-child {
  border-bottom: 1px solid black;
}

.credit-wrapper h2 {
  text-transform: uppercase;
  flex: 1;
  width: max-content;
  padding-right: 0.5rem;
}

.names-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.names-wrapper h3 {
  text-align: right;
}

.about-wrapper {
  min-height: 100svh;
}

.streams {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.images-wrapper {
  flex-grow: 1;
  display: flex;
  height: 1px;
}

.slider,
.slider.keen-slider {
  flex: 1 1 auto;
  display: flex;
  overflow-x: auto;
  width: fit-content;
}

.slider img,
.keen-slider__slide img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

.keen-slider__slide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content !important;
}

.close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 10000;
}

.close a {
  color: white;
  text-decoration: none;
  font-size: 3rem;
}

.close svg {
  width: 2rem;
  height: 2rem;
  fill: white;
}

.close svg * {
  stroke: white;
}
.movie-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100svh;
  width: 100vw;
  z-index: 100000;
}

.movie-wrapper .video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.no-video .video-title,
.no-video .movie-wrapper .video-wrapper {
  opacity: 0;
}

.show-title-info .grow .video-title {
  opacity: 0;
}

.active-tile {
  /* border: 3px solid red; */
}

.actual-title {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  opacity: 1;
}

.actual-title > * {
  width: 100%;
}

.actual-title h1 {
  font-size: 2.5rem;
  letter-spacing: -0.1rem;
  font-weight: 600;
  color: white;
  padding: 1rem;
  padding-left: 0.5rem;
}

.show-title-info .actual-title {
  opacity: 0;
}

.tiles .video-title {
  display: none;
}

.grow .video-wrapper {
  opacity: 1;
}

.darker {
  background-color: #000000d6;
}

.open-content-movie {
  height: 2rem;
  width: 2rem;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: white;
  background-color: rgba(211, 211, 211, 0.443);
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000000000;
}

header h1 {
  color: white;
}

header h2 {
  color: white;
}

.about {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000000;
  color: white;
  opacity: 0;
  width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000d1;
  pointer-events: none;
}

.about.is-open {
  pointer-events: all;
}

.about p {
  max-width: 51ch;
  padding-top: 4rem;
  padding-left: 1.5rem;
  text-align: justify;
}

.info-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  height: 100svh;
  box-sizing: border-box;
  gap: 2rem;
  transform: translateY(calc(100% - 10rem));
  color: black;
  background-color: white;
  /* background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); */
}

.info-wrapper .text-wrapper {
  padding: 0.5rem;
  box-sizing: border-box;
  flex-shrink: 0;
}

.title-no-visible {
  opacity: 0;
}

.title-visible {
  opacity: 1;
}

.buttons-wrapper {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  gap: 1rem;
  z-index: 1000000;
  display: flex;
  font-family: "Dauphin";
}

.buttons-wrapper nav {
  height: 2rem;
  min-width: 2rem;
  border: 1px solid var(--color);
  display: flex;
  cursor: pointer;
  align-items: center;
  color: var(--color);
  padding-right: 0.5rem;
}

.buttons-wrapper nav svg {
  height: 100%;
  width: 100%;
}

.buttons-wrapper nav svg > * {
  stroke: var(--color);
}

.unmute {
  padding-left: 0.5rem;
}

/*  pointer on the cover  */
.image-cover img {
  cursor: zoom-in;
}

.image-cover {
  opacity: 0;
}

/*  full-screen overlay  */
#lightbox {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 1003900; /* above everything else */
}

/*  the enlarged image  */
#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
}

/*  “open” state toggled by JS  */
#lightbox.open {
  opacity: 1;
  visibility: visible;
}

.about.is-open {
  /* expanded state */
  opacity: 1;
}

.gradient {
  height: 10vh;
  /* background: white; */
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 0;
  opacity: 0;
}

.no-video #about-toggle {
  display: none;
}

.col:last-child {
  display: flex;
}

.col:last-child .image-cover {
  width: 100%;
}

.image-cover {
  width: 100%;
  display: flex;
  align-items: flex-start; /* pour que l’image suive la hauteur */
  justify-content: center;
}

.image-cover img {
  width: 50%;
  object-fit: contain;
}

.index-container {
  height: 100svh; /* hauteur fixe d’écran */
  overflow-y: auto; /* défilement vertical uniquement */
}

.index-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem;
  background-color: #fff;

  width: 100vw;
  box-sizing: border-box; /* fond blanc */
  padding-top: 10rem;
}

.index-wrapper .tiles {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.index-wrapper .tiles .video-title {
  position: relative;
  bottom: inherit;
  left: inherit;
  color: black !important;
  display: block;
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
}

.index-wrapper .tiles .video-title h1 {
  font-size: 2rem;
}
.index-wrapper .tiles .video-title h3 {
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

.index-wrapper a {
  text-decoration: none;
}

/* Chaque tuile occupe une colonne (1 fr est implicite) */
.index-wrapper .tiles .video-wrapper {
  opacity: 1;
  aspect-ratio: 16/9;
  height: auto;
  /* rien d’autre n’est nécessaire :              */
  /* chaque item d’une grille prend 1 fr par défaut */
  /* ajoutez vos propres styles si besoin :         */
  /* aspect-ratio, border-radius, box-shadow, etc.  */
}

.index-wrapper h2 {
  padding-top: 0.25rem;
}


@media (max-width: 800px) {

  html,body {
    font-size: 14px;
  }

  .tiles-wrapper {
    flex-direction: column;
    height: 100svh;
  }


  .tiles-wrapper .tiles {
      flex: 0 0 33.333vh;
      height: 33.33vh;

  }


.info-wrapper {
 overflow: scroll;
}

  .text-content {
        grid-template-columns: repeat(1, 1fr);
  }

  .images-wrapper {
    height: 25vh;
  }

.index-wrapper{
  grid-template-columns: repeat(1, 1fr);
  padding-left: 1rem;
  padding-right: 1rem;
}

.navigation {
  display: flex;
  padding-left: 0.25rem;
  gap: 1rem;
}

  .buttons-wrapper {
    width: 100%;
    padding: 1rem;
    gap: 1rem;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
  }

.buttons-wrapper nav {
  background-color: white;
    border: 1px solid black !important;
  color: black;

}

.buttons-wrapper nav svg > * {
    stroke: black !important;

}

.buttons-wrapper nav svg {
  width: auto;
}

.about-wrapper p {
  color: black;
}



 }