/* Global Reset */
* {
  margin: 0;
  padding: 0;
}

/* Font-Face Definitions */

@font-face {
  font-family: 'infinit justice';
  src: url('fonts/infinite-justice/InfiniteJustice.woff2') format('woff2'),
    url('fonts/infinite-justice/InfiniteJustice.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'anton sc';
  src: url('fonts/anton-sc/AntonSC-Regular.woff2') format('woff2'),
    url('fonts/anton-sc/AntonSC-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'marker felt';
  src: url('fonts/markerfelt/MarkerFelt-Wide.woff2') format('woff2'),
    url('fonts/markerfelt/MarkerFelt-Wide.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'amiamie black round';
  src: url('fonts/amiamie-black-round/Amiamie-BlackRound.woff2') format('woff2'),
    url('fonts/amiamie-black-round/Amiamie-BlackRound.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'FE-font';
  src: url('fonts/fe-font/FE-Font.woff2') format('woff2'),
    url('fonts/fe-font/FE-Font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Aachen';
  src: url('fonts/aachen/AachenStd-Bold.woff2') format('woff2'),
    url('fonts/aachen/AachenStd-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Racing';
  src: url('fonts/racing-sans/RacingSansOne-Regular.woff2') format('woff2'),
    url('fonts/racing-sans/RacingSansOne-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bauhaus';
  src: url('fonts/bauhaus/Bauhaus.woff2') format('woff2'),
    url('fonts/bauhaus/Bauhaus.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.anton-sc-regular {
  font-family: "Anton SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  background: url(image/street.png);
  background-size: cover;
}

html,
body,
#root {
  height: 100%;
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* Content Section */
.content {
  position: fixed;
  display: grid;
  grid-template-rows: 2.5% 2.5% 10% 10% 5% 2.5% 2.5% 5% 5% 2.5% 2.5% 5% 5% 2.5% 2.5% 5% 5% 2.5% 2.5% 5% 2.5% 2.5% 5% 5%;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  width: 20vw;
  height: 100vh;
  text-align: left;
  justify-content: flex-start;
  font-size: 1.3vw;
  z-index: 1001;
  /*background-color: #e8e8e8;*/
}

.logo-head {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 11;
}

.logo-head img {
  width: 90%;
  height: auto;
  display: block;
}

#pngcln {
  z-index: 4000;

  grid-row-start: 11;
  grid-row-end: 14;
  grid-column-start: 3;
  grid-column-end: 10;
}

#gsmcln {
  grid-row-start: 15;
  grid-row-end: 18;
  grid-column-start: 3;
  grid-column-end: 10;

}

#fontcln {
  grid-row-start: 19;
  grid-row-end: 23;
  grid-column-start: 3;
  grid-column-end: 10;

}

#pngcln,
#gsmcln,
#fontcln {
  overflow-y: auto;
  /* Ajoute un scroll vertical */
  overflow-x: hidden;
  /* Empêche un scroll horizontal */
  max-height: 100%;
  /* Garantit que la hauteur maximale correspond à celle définie dans le grid */
}

/* Slider Container */
.image-slider-container {
  grid-row-start: 9;
  grid-row-end: 11;
  grid-column-start: 3;
  grid-column-end: 10;
  z-index: 1000;
}

/* Slider Input */
#image-size-slider {
  -webkit-appearance: none;
  width: 100%;
  /* Slider width */
  border-radius: 3px;
  height: 5px;
  background: hwb(0 0% 0%);
}

/* Style du curseur */
#image-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6vw;
  height: 6vh;
  background: url('image/zoom.png') no-repeat center center;
  background-size: 50%;
  cursor: pointer;
  border: none;
}

#image-size-slider::-moz-range-thumb {
  width: 4vw;
  height: 6vh;
  background: url('image/zoom.png') no-repeat center center;
  background-size: 70%;

  cursor: pointer;
  border: none;
}

.creds {
  grid-row-start: 5;
  grid-column-start: 4;
  z-index: 10000;
  cursor: pointer;
}

.creds img {
  width: 160%;
  height: auto;
  display: block;
}

.credits {
  display: none;
  position: fixed;
  top: 50%;
  left: 1vw;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 2vh;
  transform: rotate(33deg);
}

.credits.show {
  display: block;
  z-index: 2000;
  position: fixed;
}

.infos {
  grid-row-start: 3;
  grid-column-start: 2;
  z-index: 10000;
  cursor: pointer;
}

.infos img {
  width: 160%;
  height: auto;
  display: block;
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-2px, 2px) rotate(-2deg);
  }

  40% {
    transform: translate(-2px, -2px) rotate(2deg);
  }

  60% {
    transform: translate(2px, 2px) rotate(0deg);
  }

  80% {
    transform: translate(2px, -2px) rotate(-2deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.infos:hover {
  animation: shake 0.4s;
  animation-iteration-count: 1;
}

.creds:hover {
  animation: shake 0.4s;
  animation-iteration-count: 1;
}

.infos-text {
  opacity: 0;
  transition: opacity 0.2s;
  position: fixed;
  transform-origin: bottom right;
  bottom: 0vh;
  left: -70vw;
  width: 62%;
  -webkit-filter: drop-shadow(1px 1px 5px #222);
  filter: drop-shadow(3px 3px 5px #222);
  z-index: 4000;
}

.infos-text.show {
  animation: rotateIn 0.7s forwards;
  opacity: 1;
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
  }

  to {
    opacity: 1;
    transform: rotate(120deg) scale(1);
  }
}

.infos-text.hide {
  animation: rotateOut 0.7s forwards;
  opacity: 0;
}

@keyframes rotateOut {
  from {
    opacity: 1;
    transform: rotate(120deg) scale(1);
  }

  to {
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
  }
}

/*
.modal {
  display: none;
  position: fixed;
  z-index: 7000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  animation: none;
}
.modal-content {
  background-color: yellow;
  border: 10px solid #ffffff;
  box-shadow: #ddd;
  position: absolute;
  cursor: grab;
  left: 40%;
  transform: translate(-50%, 0);
  bottom: 0;
  margin: 0;
  padding: 2vh 2vw 3vh 2vw;
  width: 30vw;
  font-size: 2.1vh;
  line-height: 2.3vh;
  animation: fall 1s linear;
  text-align: center;
}

.modal-content:active {
  cursor: grabbing;
}

@keyframes fall {
  0% {
    transform: translate(-50%, -120vh) rotate(-60deg) scale(1);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, 0) rotate(-35deg) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 0) rotate(10deg) scale(1);
  }
  100% {
    transform: translate(-50%, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}*/

/*carte langue*/
.card {
  width: 7vw;
  height: 5vh;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
  grid-row-start: 4;
  grid-column-start: 9;
  z-index: 10000;
}

.card img {
  width: 50%;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-back {
  transform: rotateY(180deg);
}


/* Item Section */
.cont-item-sect {
  position: relative;
  left: 20%;
  width: 80%;
  /*background-color: #dbdbdb;*/
}

.item-section {
  display: flex;
  flex-wrap: wrap;

  box-sizing: border-box;
  justify-content: center;
  padding: 0vh 2vw 5vh 2vw;
}

.item-section img {
  width: 800px;
  /* Default size */
  height: auto;
  -webkit-filter: drop-shadow(1px 1px 5px #222);
  filter: drop-shadow(3px 3px 5px #222);
  transition: width 0.3s ease;
  /* Smooth resizing */
  cursor: pointer;
  /* Indicates image is clickable */
}

.item-section img:hover {
  transform: scale(1.1);
  /* Zoom on hover */
}

/* Lightbox */
.lightbox {
  display: none;
  /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Smooth appearance transition */
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 6000;
  
}

.lightbox.active {
  display: flex;
  opacity: 1;
  /* Make visible */
}

.lightbox img {
  width: 70vw;
  /* Lightbox image size */
  transform: none;
  /* No scaling */
  pointer-events: none;
  /* Prevent hover interactions */
  -webkit-filter: drop-shadow(1px 1px 5px #222);
  filter: drop-shadow(3px 3px 5px #222);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0, 8);
  /*border: hsl(0, 0%, 0%) solid 3px;*/
  border-radius: 50%;
  width: auto;
  cursor: pointer;
  z-index: 2;
  padding: 0.1vh 1.4vw;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 4vh;
  box-shadow: #222 0px 0px 5px;
}

#prev-btn {
  left: 3vw;
}

#next-btn {
  right: 3vw;
}

/* Filters */
.filters {
  display: block;
  /* Hidden by default */
  background-color: rgb(245, 245, 245);
}

.filters.active {
  display: block;
  /* Display filters when active */
}

.filtering-group {
  justify-content: center;
}

.filtering-filter {
  cursor: pointer;
  display: block;
  align-items: center;
  padding-bottom: 0.5vh;
  padding-left: 1vw;
  background-color: white;
}


.filtering-filter svg {
  width: 7vh;
  /* Filter icon size */
}

.filtering-filter.checked svg {
  fill: rgb(255, 0, 0);
}

.filtering-filter.checked svg {
  .st0 {
    fill: rgb(255, 195, 195);
  }
}

.filtering-filter.checked svg {
  .st1 {
    fill: rgb(255, 86, 86);
  }
}

.filtering-filter.checked {
  color: rgb(255, 0, 0);
  /* Highlight checked filters */
}

.filtering-filter.disabled {
  color: lightgrey;
  /* Dim disabled filters */
}

/* Items */
.filtering-item.filtered {
  display: none;
  /* Hide filtered items */
}


/* Typography for Specific Fonts */
.marker {
  font-family: 'marker felt';
  font-size: 2, 2vh;
  color: rgb(0, 0, 0);
}

.racing {
  font-family: 'Racing', sans-serif;
  font-weight: 400;
  font-size: 2vh;
  line-height: 2vh;
  color: rgb(0, 0, 0);
}

.fefont {
  font-family: FE-font;
  font-size: 1.8vh;
  line-height: 2vh;
  color: rgb(0, 0, 0);
}

.bauhaus {
  font-family: 'Bauhaus';
  font-size: 2vh;
  line-height: 2vh;
  color: rgb(0, 0, 0);
}

.aachen {
  font-family: 'Aachen', sans-serif;
  font-weight: 700;
  font-size: 1.8vh;
  line-height: 2vh;
  color: rgb(0, 0, 0);
}

.anton {
  font-family: "Anton SC", sans-serif;
  font-weight: 400;
  font-size: 1.8vh;
  line-height: 2vh;
  color: rgb(0, 0, 0);
}

.infinite {
  font-family: 'infinit justice';
  font-size: 1.6vh;
  line-height: 1.8vh;
  color: rgb(0, 0, 0);
}

#gsm,
#font {
  font-weight: 600;
  font-size: 1.8vh;
  color: rgb(0, 0, 0);
  line-height: 2vh;
}

.scrolling-text {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 2000;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  background-image: url(image/bande.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: hsl(0, 0%, 100%);
  background-color: rgb(0, 0, 0);
}

.scrolling-inner {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 25s linear infinite;
  font-size: 2vh;
  font-weight: 600;
  width: 100%;
}

.scrolling-container {
  width: 100%;
  overflow: hidden;
}

@keyframes scroll {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}