@charset "UTF-8";

/* -------------------------- */
/* ---------defaults--------- */
/* -------------------------- */
@font-face {
  font-family: "MNKYMarcel";
  src: url("../fonts/MNKYMarcel-Semibold.otf") format("opentype");
}
@font-face {
  font-family: "MNKYMaurice";
  src: url("../fonts/MNKYMaurice-Black.otf") format("opentype");
}
.container-chapitre {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.chapitre {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
}

* {
  font-family: "MNKYMarcel", sans-serif;
}

body {
  font-family: "MNKYMarcel", sans-serif;
  background-color: #fefefe;
  position: relative;
  min-height: 100vh;
}

/* -------------------------- */
/* ---------Trottoirs-------- */
/* -------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.site-title-overlay {
  position: absolute;
  top: 6vh; /* moitié de la hauteur du trottoir (12vh) */
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 5vw;
  font-family: "MNKYMaurice", sans-serif;
  color: gray;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

.bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  visibility: visible;
}

.bar-container.hidden {
  visibility: hidden;
}

.bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  visibility: visible;
}

.bar-container.hidden {
  visibility: hidden;
}

/* 1. Trottoir GRIS CLAIR (haut et bas) */
.bar1,
.bar5 {
  height: 12vh; /* légèrement plus haut */
  background-color: #999; /* gris plus clair qu'avant */
  /* box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1); relief subtil */
}

/* 2 & 4. Route GRIS FONCÉ */
.bar2,
.bar4 {
  height: 20vh;
  background-color: #222;
}

/* 3. Ligne JAUNE pointillée au centre */
.bar3 {
  height: 5vh;
  background-color: #222;
  position: relative;
}

.bar3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5px; /* plus épais */
  background-image: repeating-linear-gradient(
    to right,
    #ffcc00 0,
    #ffcc00 15px,
    /* longueur d’un tiret */ transparent 15px,
    transparent 25px /* petit espace entre les traits */
  );
  transform: translateY(-50%);
}
.button-wrapper {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 10;
}

#changeTextButton {
  padding: 10px 20px;
  background-color: #e0e0e0;
  color: white;
  border: none;
  /* border-radius: 5px; */
  cursor: pointer;
  font-family: "MNKYMarcel", sans-serif;
  font-size: 1.5rem;
}
@media screen and (max-width: 600px) {
  .button-wrapper {
    top: 4vh;
    right: 8px;
  }

  #changeTextButton {
    font-size: 0.8rem;
    padding: 4px 8px;
  }

  .site-title-overlay {
    font-size: 6vw;
  }

  /* .text-info {
    margin: 20px 10px 0 10px; /* ✅ ça remplace le margin du bloc ci-dessus */
  /* font-size: 1.1rem;
  } */
}
*/ */ */ .bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  visibility: visible;
}

.bar-container.hidden {
  visibility: hidden;
}
.text-info {
  width: calc(100% - 20px); /* 👈 adapte à tout écran */
  max-width: 600px;
  margin: 40px auto 0 auto;
  padding: 10px 20px 20px 20px; /* top right bottom left */
  background-color: #000080;
  border: 15px solid white;
  border-radius: 12px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: "MNKYMarcel", sans-serif;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.text-blue {
  color: white;
}
.chapitre:nth-child(1) {
  background-color: #ddd; /* ou #e0e0e0, #f0f0f0 selon le gris désiré */
  background-image: none;
  background-size: initial;
  background-attachment: initial;
  background-position: initial;
  position: relative;
  min-height: 100vh;
}

/* -------------------------- */
/* ---------Train-------- */
/* -------------------------- */

.chapitre:nth-child(2) {
  margin: 0;
  padding: 0;
  /* background: url(" ../images/gare.jpg") center center / cover no-repeat; */
  background-color: #222;
  font-family: "MNKYMarcel", sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.train-line {
  min-height: fit-content;
  height: auto;
  padding: 2vh 0;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.train-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  border-bottom: 4px dashed #ffd500;
}

.line1 .train {
  animation-duration: 22s;
}
.line2 .train {
  animation-duration: 18s;
}
.line3 .train {
  animation-duration: 24s;
}
.line4 .train {
  animation-duration: 20s;
}
.line5 .train {
  animation-duration: 26s;
}

.train {
  display: flex;
  gap: 10px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.direction-right {
  animation-name: move-right;
  flex-direction: row-reverse;
}

.direction-left {
  animation-name: move-left;
  flex-direction: row;
}

.car {
  max-width: 100vw;
  padding: 10px 20px 20px 20px;
  line-height: 1.4;
  background-color: #000080;
  border-radius: 12px;
  font-size: clamp(1.5rem, 2vw, 1.5rem);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  height: auto;
  /* min-height: 20vh; */
  white-space: normal;
  word-break: normal;
  /* overflow-wrap: break-word; */
  hyphens: none;
}
@media (max-width: 768px) {
  .car {
    width: 100vw;
    max-width: 100vw;
    padding: 6vw; /* tu peux aussi augmenter un peu le padding */
    font-size: 1.4rem;
    border-radius: 10;
    box-sizing: border-box;
    hyphens: none;
  }

  .train-line {
    padding: 5vh 0;
  }
}
.red-text {
  color: white;
}

.blue-text {
  color: white;
}

#panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #111;
  color: #ffd500;
  padding: 10px 20px;
  font-family: "MNKYMarcel", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 1px;
  border-radius: 6px;
  /* box-shadow: 0 0 10px #ffd500; */
  z-index: 1000;
  cursor: pointer;
  /* animation: blink 2s ease-in-out infinite; */
}

/* @keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
} */

@keyframes move-right {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes move-left {
  0% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(-120%);
  }
}

/* -------------------------- */
/* ---------Musées-------- */
/* -------------------------- */

.chapitre:nth-child(3) {
  margin: 0;
  padding: 0;
  height: 100vh;
  /* background: url("../images/4.jpg") no-repeat center center; */
  background-size: cover;
  background-color: #d1bc8a;
  overflow: hidden;
  position: relative;
  font-family: "MNKYMarcel", sans-serif;
}

#moving-block {
  position: absolute;
  font-family: "MNKYMarcel", sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000080;
  padding: 10px 20px 20px 20px;
  width: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;

  box-shadow: 0 0 0 24px #ffd500; /* couche externe dorée foncée */
}

.text {
  display: none;
  font-size: 1.5rem;
  line-height: 1.5;
}

.red {
  color: white;
  display: block;
}

.blue {
  color: white;
}

/* -------------------------- */
/* ---------Education-------- */
/* -------------------------- */
.chapitre:nth-child(4) {
  background-color: #d1bc8a;
  background-size: cover;
  font-family: "MNKYMarcel", sans-serif;
  font-size: 1.5rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 90px;
  justify-items: center;
  padding: 10px 20px 20px 20px;
  box-sizing: border-box;
}

.text-block {
  position: relative;
  z-index: 1;
  font-family: "MNKYMarcel", sans-serif;
  font-weight: bold;
  color: white;
  background-color: #c6965c; /* couleur bois */
  padding: 40px 30px;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
}

.text-block.clicked {
  color: red;
}

.text-block.stuck {
  transform: translateY(4px) scale(0.97);
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.15);
}

/* Cercles de vis */
.text-block::before,
.text-block::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #7c4f26;
  border-radius: 50%;
  z-index: 2;
}

/* Position cercles petit écran */
.text-block::before {
  top: 15px;
  right: 15px;
}

.text-block::after {
  bottom: 15px;
  right: 15px;
}

/* Ligne visible par défaut (horizontal) */
/* .text-block .line {
  position: absolute;
  background-color: #7c4f26;
  z-index: 0;
  opacity: 0.6;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
} */

/* Ligne verticale sur grand écran */
@media (min-width: 1000px) {
  .text-block .line {
    width: 5px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Cercles repositionnés en haut */
  .text-block::before {
    top: 15px;
    left: 15px;
    right: auto;
  }

  .text-block::after {
    top: 15px;
    right: 15px;
    bottom: auto;
  }
}
@media (min-width: 1000px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------- */
/* ---------Social-------- */
/* -------------------------- */

.chapitre:nth-child(5) {
  background-color: #d1bc8a;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  height: 100vh;
}

.container {
  position: relative;
  /* z-index: 1; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#main-text {
  font-family: "MNKYMarcel", sans-serif;
  color: white;
  font-size: 1.5rem;
  padding: 20px;
  max-width: 80%;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.wheel-background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(180deg); /* rotation + centrage */
  width: 100vmin; /* plus grand : 100% de la plus petite dimension écran */
  height: 50vmin; /* moitié de la hauteur = demi-cercle */
  border-top-left-radius: 100vmin;
  border-top-right-radius: 100vmin;
  background: transparent;
  border: 50px solid #222;
  border-bottom: none;
  z-index: 0;
  overflow: hidden;
}

.spoke {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5px;
  height: 50vmin;
  background: #222;
  transform-origin: bottom center;
}
.wheel-background.left {
  left: 50%;
  transform: translateX(-50%) rotate(180deg); /* centrée */
  z-index: 1;
}

.wheel-background.right {
  border-color: #111;
  left: 80%;
  transform: translateX(-50%) rotate(180deg);
  z-index: 0;
}
#hover-text {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  z-index: 2;
  background: none;
  font-size: 1.5rem;
  font-family: "MNKYMarcel", sans-serif;
  max-width: 90%;
  padding: 20px;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
}

#hover-text .blend {
  color: red;
  /* mix-blend-mode: difference; effet demandé */
  transition: all 1s ease;
  display: inline-block;
  z-index: 100000;
}
.explode {
  opacity: 0.85 !important;
  /* mix-blend-mode: difference !important; */
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 9999999999999999 !important;
  text-align: center;
  /* PAS de background ici */
  /* PAS de mix-blend-mode ici */
}

.explode .blend {
  font-family: "MNKYMaurice", sans-serif;
  /* mix-blend-mode: difference !important; */
  font-size: 6vw !important;
  color: white;
}

/* Agrandir encore plus sur mobile */
@media screen and (max-width: 600px) {
  .explode .blend {
    font-size: 10vw !important;
  }
}