@charset "UTF-8";

@font-face {
  font-family: 'Atacama';
  src: url('../fonts/Atacama-Medium.otf') format('opentype');
}

/* ══════════════════════════════
   INTERFACE 0 — portail
══════════════════════════════ */
/* ══════════════════════════════
   INTERFACE 0 — portail
══════════════════════════════ */

#interface-1 {
  display: none;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 2s ease-in-out, transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center top;
  overflow: hidden;
}

#interface-1.visible {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1350px) {
  #interface-1 {
    overflow: visible;
  }
}

#interface-2 { display: none; }

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #f5f0e8;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.img-wrapper {
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 1.2s ease-in-out;
  display: block;
  line-height: 0;
}

.img-wrapper img {
  display: block;
  max-height: 70vh;
  max-width: 40vw;
  height: auto;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.container.animate .left {
  transform: translateX(-120vw);
  opacity: 0;
}

.container.animate .right {
  transform: translateX(120vw);
  opacity: 0;
}

/* ══════════════════════════════
   INTERFACE 1
══════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Atacama';
  background: #f5f0e8;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.message {
  width: 100vw;
  margin-bottom: 2vh;
  padding: 0;
  font-family: 'Atacama', cursive;
  color: #000;
  font-size: clamp(8rem, 40vw, 30rem);
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.lettre-small {
  font-size: 0.8em;
  vertical-align: baseline;
  line-height: 1;
}

.subtitle-wrapper-1 {
  width: fit-content;
  margin: 0 auto;
  padding: 1vh 2vw;
  cursor: pointer;
  position: relative;
}

.subtitle {
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: 'Atacama', cursive;
  color: #000;
  font-size: clamp(1rem, 3vw, 2rem);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  pointer-events: none;
}

.description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  height: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 100;
  cursor: pointer;
}

.description::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255, 255, 255) 30%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.description p {
  width: 50vw;
  font-family: 'Atacama', cursive;
  font-size: clamp(1rem, 2.5vw, 2rem);
  text-align: center;
  color: #000;
  line-height: 1.6;
}

.subtitle-wrapper-1:hover .description {
  opacity: 1;
  pointer-events: auto;
}

.pieces {
  --piece-size: 30vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vmin;
  margin: 3vh auto 0;
  max-width: calc(1 * (var(--piece-size) + 2vmin));
  perspective: 1200px;
}

@media (min-width: 600px) {
  .pieces { max-width: calc(2 * (var(--piece-size) + 2vmin)); }
}
@media (min-width: 700px) {
  .pieces { max-width: calc(3 * (var(--piece-size) + 2vmin)); }
}
@media (min-width: 850px) {
  .pieces { max-width: calc(4 * (var(--piece-size) + 2vmin)); }
}
@media (min-width: 900px) {
  .pieces { max-width: calc(5 * (var(--piece-size) + 2vmin)); }
}

.piece-click {
  height: var(--piece-size);
  width: var(--piece-size);
  object-fit: contain;
  cursor: pointer;
  transition: transform 1s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.piece-click:hover {
  transform: scale(1.2);
}
/* ══════════════════════════════
   INTERFACE 2
══════════════════════════════ */

.archive-title {
  font-family: 'Atacama', serif;
  font-size: 9rem;
  text-align: center;
  padding: 4vh 0 2vh;
}

.scene-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  padding: 2vh 2vw;
  height: 10vh;
  margin-top: 10vh;
  background: radial-gradient(circle, black 0.2vw, transparent 0.2vw);
  background-size: 3vw 3vw;
}

.subtitle-wrapper {
  display: block;
}

.scene-header h1 {
  font-family: 'Atacama', serif;
  font-size: clamp(1rem, 6vw, 2rem);
  line-height: 1;
}

.header-tablet { display: none; }
.header-mobile { display: none; }

.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.header-center h1 {
  position: relative;
  z-index: 2;
}

.timeline-scene {
  position: relative;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.timeline-scene::before {
  content: '';
  position: absolute;
  left: 5vw;
  top: 0;
  height: 100%;
  width: 6px;
  background-image: radial-gradient(circle, black 0.2vw, transparent 0.2vw);
  background-size: 6px 40px;
  background-repeat: repeat-y;
}

.timeline-entry {
  position: relative;
  height: 20vh;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.sticky-date {
  position: sticky;
  align-self: flex-start;
  font-family: 'Atacama', serif;
  font-size: clamp(0.7rem, 1.2vw, 1rem);
  color: #503d3d;
  width: 5vw;
  flex-shrink: 0;
  padding-left: 1.5vw;
  z-index: 100;
}

.timeline-entry:nth-child(1)  .sticky-date { top: 0vh; }
.timeline-entry:nth-child(2)  .sticky-date { top: 2vh; }
.timeline-entry:nth-child(3)  .sticky-date { top: 4vh; }
.timeline-entry:nth-child(4)  .sticky-date { top: 6vh; }
.timeline-entry:nth-child(5)  .sticky-date { top: 8vh; }
.timeline-entry:nth-child(6)  .sticky-date { top: 10vh; }
.timeline-entry:nth-child(7)  .sticky-date { top: 12vh; }
.timeline-entry:nth-child(8)  .sticky-date { top: 14vh; }
.timeline-entry:nth-child(9)  .sticky-date { top: 16vh; }
.timeline-entry:nth-child(10) .sticky-date { top: 18vh; }
.timeline-entry:nth-child(11) .sticky-date { top: 20vh; }
.timeline-entry:nth-child(12) .sticky-date { top: 22vh; }
.timeline-entry:nth-child(13) .sticky-date { top: 24vh; }
.timeline-entry:nth-child(14) .sticky-date { top: 26vh; }
.timeline-entry:nth-child(15) .sticky-date { top: 28vh; }
.timeline-entry:nth-child(16) .sticky-date { top: 30vh; }
.timeline-entry:nth-child(17) .sticky-date { top: 32vh; }
.timeline-entry:nth-child(18) .sticky-date { top: 34vh; }

.entry-content {
  display: flex;
  align-items: center;
  gap: 2vw;
  position: absolute;
  max-width: 60vw;
  flex-wrap: nowrap;
  pointer-events: none;
}

.entry-content .pi {
  flex-shrink: 0;
  position: relative;
  z-index: 1000;
  transform: scale(1) rotate(0deg);
  transition: transform 0.5s ease;
  pointer-events: auto;
  cursor: pointer;
}

.entry-content .pi-text {
  width: 20vw;
  max-width: 150px;
  font-family: 'Atacama', serif;
  font-size: 0.85rem;
  line-height: 1;
  color: #000000;
}

.entry-content .pi:hover {
  transform: scale(3);
}

.timeline-entry:nth-child(1)  .entry-content { top: 8vh;  left: 48vw; }
.timeline-entry:nth-child(2)  .entry-content { top: 22vh; left: 12vw; }
.timeline-entry:nth-child(3)  .entry-content { top: 23vh;  left: 47vw; }
.timeline-entry:nth-child(4)  .entry-content { top: 25vh; left: 6vw;  }
.timeline-entry:nth-child(5)  .entry-content { top: 23vh; left: 50vw; }
.timeline-entry:nth-child(6)  .entry-content { top: 10vh; left: 25vw; }
.timeline-entry:nth-child(7)  .entry-content { top: 25vh; left: 42vw; }
.timeline-entry:nth-child(8)  .entry-content { top: 30vh;  left: 14vw; }
.timeline-entry:nth-child(9)  .entry-content { top: 20vh; left: 50vw; }
.timeline-entry:nth-child(10) .entry-content { top: 27vh; left: 18vw; }
.timeline-entry:nth-child(11) .entry-content { top: 20vh; left: 45vw; }
.timeline-entry:nth-child(12) .entry-content { top: 40vh; left: 10vw;  }
.timeline-entry:nth-child(13) .entry-content { top: 20vh; left: 47vw; }
.timeline-entry:nth-child(14) .entry-content { top: 28vh; left: 22vw; }
.timeline-entry:nth-child(15) .entry-content { top: 20vh;  left: 50vw; }
.timeline-entry:nth-child(16) .entry-content { top: 28vh; left: 11vw; }
.timeline-entry:nth-child(17) .entry-content { top: 18vh; left: 60vw; }
.timeline-entry:nth-child(18) .entry-content { top: 42vh; left: 16vw; }

.timeline-entry:nth-child(1)  .entry-content .pi { height: 15vw; }
.timeline-entry:nth-child(2)  .entry-content .pi { height: 10vw; }
.timeline-entry:nth-child(3)  .entry-content .pi { height: 12vw; }
.timeline-entry:nth-child(4)  .entry-content .pi { height: 15vw; }
.timeline-entry:nth-child(5)  .entry-content .pi { height: 15vw; }
.timeline-entry:nth-child(6)  .entry-content .pi { height: 13vw; }
.timeline-entry:nth-child(7)  .entry-content .pi { height: 14vw; }
.timeline-entry:nth-child(8)  .entry-content .pi { height: 10vw; }
.timeline-entry:nth-child(9)  .entry-content .pi { height: 13vw; }
.timeline-entry:nth-child(10) .entry-content .pi { height: 11vw; }
.timeline-entry:nth-child(11) .entry-content .pi { height: 14vw; }
.timeline-entry:nth-child(12) .entry-content .pi { height: 10vw; }
.timeline-entry:nth-child(13) .entry-content .pi { height: 13vw; }
.timeline-entry:nth-child(14) .entry-content .pi { height: 13vw; }
.timeline-entry:nth-child(15) .entry-content .pi { height: 10vw; }
.timeline-entry:nth-child(16) .entry-content .pi { height: 10vw; }
.timeline-entry:nth-child(17) .entry-content .pi { height: 12vw; }
.timeline-entry:nth-child(18) .entry-content .pi { height: 13vw; }

.desktop { display: none; }
.tablet  { display: block; }
.mobile  { display: none; }

@media (max-width: 1300px) {
  .desktop { display: block; }
  .tablet  { display: none; }
  .mobile  { display: none; }
  .header-desktop { display: none; }
  .header-tablet  { display: block; }

  .entry-content .pi {
    transition: transform 0.5s ease;
  }

  .entry-content .pi:hover {
    transform: scale(3) rotate(360deg);
  }

  .timeline-entry:nth-child(1)  .entry-content .pi { height: 15vw; }
  .timeline-entry:nth-child(2)  .entry-content .pi { height: 22vw; }
  .timeline-entry:nth-child(3)  .entry-content .pi { height: 20vw; }
  .timeline-entry:nth-child(4)  .entry-content .pi { height: 25vw; }
  .timeline-entry:nth-child(5)  .entry-content .pi { height: 40vw; }
  .timeline-entry:nth-child(6)  .entry-content .pi { height: 20vw; }
  .timeline-entry:nth-child(7)  .entry-content .pi { height: 35vw; }
  .timeline-entry:nth-child(8)  .entry-content .pi { height: 16vw; }
  .timeline-entry:nth-child(9)  .entry-content .pi { height: 20vw; }
  .timeline-entry:nth-child(10) .entry-content .pi { height: 35vw; }
  .timeline-entry:nth-child(11) .entry-content .pi { height: 40vw; }
  .timeline-entry:nth-child(12) .entry-content .pi { height: 15vw; }
  .timeline-entry:nth-child(13) .entry-content .pi { height: 25vw; }
  .timeline-entry:nth-child(14) .entry-content .pi { height: 30vw; }
  .timeline-entry:nth-child(15) .entry-content .pi { height: 15vw; }
  .timeline-entry:nth-child(16) .entry-content .pi { height: 35vw; }
  .timeline-entry:nth-child(17) .entry-content .pi { height: 20vw; }
  .timeline-entry:nth-child(18) .entry-content .pi { height: 15vw; }
}

@media (max-width: 700px) {
  .desktop { display: none; }
  .tablet  { display: none; }
  .mobile  { display: block; }
  .header-desktop { display: none; }
  .header-tablet  { display: none; }
  .header-mobile  { display: block; }
  .entry-content .pi {
    height: 30vw !important;
    transition: transform 0.5s ease;
  }
  .entry-content .pi:hover { transform: scale(3); }
}

.pi-text.gauche {
  order: -1;
}

.billet-1  { transform-origin: 5vw 7vh; }
.billet-2  { transform-origin: 15vw 7vh; }
.billet-3  { transform-origin: 15vw 7vh; }
.billet-4  { transform-origin: 27vw 7vh; }
.billet-5  { transform-origin: 25vw 7vh; }
.billet-6  { transform-origin: 30vw 7vh; }
.billet-7  { transform-origin: 28vw 7vh; }
.billet-8  { transform-origin: 25vw 7vh; }
.billet-9  { transform-origin: 10vw 7vh; }
.billet-10 { transform-origin: 25vw 7vh; }
.billet-11 { transform-origin: 13vw 7vh; }
.billet-12 { transform-origin: 13vw 7vh; }
.billet-13 { transform-origin: 22vw 7vh; }
.billet-14 { transform-origin: 13vw 7vh; }
.billet-15 { transform-origin: 13vw 7vh; }
.billet-16 { transform-origin: 16vw 7vh; }
.billet-17 { transform-origin: 20vw 7vh; }
.billet-18 { transform-origin: 18vw 7vh; }
.billet-19 { transform-origin: 18vw 7vh; }
.billet-20 { transform-origin: 18vw 7vh; }
.billet-21 { transform-origin: 15vw 7vh; }
.billet-22 { transform-origin: 25vw 7vh; }
.billet-23 { transform-origin: 15vw 7vh; }
.billet-24 { transform-origin: 25vw 7vh; }
.billet-25 { transform-origin: 15vw 7vh; }
.billet-26 { transform-origin: center center; }
.billet-27 { transform-origin: center center; }
.billet-28 { transform-origin: center center; }
.billet-29 { transform-origin: center center; }
.billet-30 { transform-origin: 18vw 7vh; }
.billet-31 { transform-origin: 15vw 7vh; }
.billet-32 { transform-origin: 25vw 7vh; }
.billet-33 { transform-origin: 15vw 7vh; }
.billet-34 { transform-origin: 20vw 7vh; }
.billet-35 { transform-origin: 10vw 7vh; }
.billet-36 { transform-origin: 15vw 7vh; }
.billet-37 { transform-origin: 15vw 7vh; }
.billet-38 { transform-origin: 20vw 7vh; }
.billet-39 { transform-origin: 15vw 7vh; }
.billet-40 { transform-origin: 18vw 7vh; }
.billet-41 { transform-origin: 15vw 7vh; }
.billet-42 { transform-origin: 25vw 7vh; }
.billet-43 { transform-origin: 15vw 7vh; }
.billet-44 { transform-origin: 15vw 7vh; }
.billet-45 { transform-origin: 15vw 7vh; }
.billet-46 { transform-origin: 20vw 7vh; }
.billet-47 { transform-origin: 15vw 7vh; }
.billet-48 { transform-origin: 25vw 7vh; }
.billet-49 { transform-origin: 20vw 7vh; }
.billet-50 { transform-origin: 20vw 7vh; }
.billet-51 { transform-origin: 15vw 7vh; }
.billet-52 { transform-origin: 18vw 7vh; }
.billet-53 { transform-origin: 15vw 7vh; }
.billet-54 { transform-origin: 20vw 7vh; }
.billet-55 { transform-origin: 15vw 7vh; }
.billet-56 { transform-origin: 15vw 7vh; }
.billet-57 { transform-origin: 15vw 7vh; }
.billet-58 { transform-origin: 18vw 7vh; }
.billet-59 { transform-origin: 15vw 7vh; }
.billet-60 { transform-origin: 15vw 7vh; }
.billet-61 { transform-origin: 15vw 7vh; }
.billet-62 { transform-origin: 18vw 7vh; }
.billet-63 { transform-origin: 15vw 7vh; }
.billet-64 { transform-origin: 20vw 7vh; }
.billet-65 { transform-origin: 10vw 7vh; }
.billet-66 { transform-origin: 15vw 7vh; }
.billet-67 { transform-origin: 15vw 7vh; }
.billet-68 { transform-origin: 15vw 7vh; }

.timeline-scene:has(.pi:hover) .timeline-entry:has(.pi:hover) {
  z-index: 9999;
}

.fin {
  text-align: center;
  padding: 60vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vh;
  position: relative;
}

.texte-fin {
  font-family: 'Atacama', serif;
  font-size: clamp(1.5rem, 6vw, 10rem);
  line-height: 1.2;
  color: #000;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: auto;
  z-index: 9999;
  white-space: normal;
  text-align: center;
  width: 90vw;
}

.fin-img {
  max-width: 20vw;
  height: auto;
  transition: transform 0.5s ease;
  cursor: pointer;
  transform: scale(0);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 99999;
  pointer-events: none;
}

.fin:has(.texte-fin:hover) .fin-img {
  transform: scale(3);
}

.desktop-fin { display: block; }
.tablet-fin  { display: none; }
.mobile-fin  { display: none; }

@media (max-width: 1300px) {
  .desktop-fin { display: none; }
  .tablet-fin  { display: block; }
  .mobile-fin  { display: none; }
  .fin:has(.texte-fin:hover) .fin-img {
    transform: scale(3) rotate(360deg);
  }
}

@media (max-width: 700px) {
  .desktop-fin { display: none; }
  .tablet-fin  { display: none; }
  .mobile-fin  { display: block; }
  .fin:has(.texte-fin:hover) .fin-img {
    transform: scale(5);
  }
}

@media (max-width: 700px) {
  .timbre-1  { transform-origin: center center; }
  .timbre-2  { transform-origin: 7vw 7vh; }
  .timbre-3  { transform-origin: center center; }
  .timbre-4  { transform-origin: 4vw 7vh; }
  .timbre-5  { transform-origin: center center; }
  .timbre-6  { transform-origin: 4vw 7vh; }
  .timbre-7  { transform-origin: 20vw 7vh; }
  .timbre-8  { transform-origin: 4vw 7vh; }
  .timbre-9  { transform-origin: 4vw 7vh; }
  .timbre-10 { transform-origin: center center; }
  .timbre-11 { transform-origin: 20vw 7vh; }
  .timbre-12 { transform-origin: center center; }
  .timbre-13 { transform-origin: center center; }
  .timbre-14 { transform-origin: 4vw 7vh; }
  .timbre-15 { transform-origin: center center; }
  .timbre-16 { transform-origin: 7vw 7vh; }
  .timbre-17 { transform-origin: 45vw 7vh; }
  .timbre-18 { transform-origin: 35vw 7vh; }
  .timbre-19 { transform-origin: 4vw 7vh; }
  .timbre-20 { transform-origin: 4vw 7vh; }
  .timbre-21 { transform-origin: 4vw 7vh; }
  .timbre-22 { transform-origin: center center; }
  .timbre-23 { transform-origin: 15vw 7vh; }
  .timbre-24 { transform-origin: 25vw 7vh; }
  .timbre-25 { transform-origin: 15vw 7vh; }
  .timbre-26 { transform-origin: 35vw 7vh; }
  .timbre-27 { transform-origin: 12vw 7vh; }
  .timbre-28 { transform-origin: 4vw 7vh; }
  .timbre-29 { transform-origin: center center; }
  .timbre-30 { transform-origin: 15vw 7vh; }
  .timbre-31 { transform-origin: 5vw 7vh; }
  .timbre-32 { transform-origin: 20vw 7vh; }
  .timbre-33 { transform-origin: center center; }
  .timbre-34 { transform-origin: center center; }
  .timbre-35 { transform-origin: 15vw 7vh; }
  .timbre-36 { transform-origin: 4vw 7vh; }
  .timbre-37 { transform-origin: 20vw 7vh; }
  .timbre-38 { transform-origin: 4vw 7vh; }
  .timbre-39 { transform-origin: 10vw 7vh; }
  .timbre-40 { transform-origin: 8vw 7vh; }
  .timbre-41 { transform-origin: 30vw 7vh; }
  .timbre-42 { transform-origin: center center; }
  .timbre-43 { transform-origin: 25vw 7vh; }
  .timbre-44 { transform-origin: 25vw 7vh; }
  .timbre-45 { transform-origin: 20vw 7vh; }
  .timbre-46 { transform-origin: 4vw 7vh; }
  .timbre-47 { transform-origin: center center; }
  .timbre-48 { transform-origin: center center; }
  .timbre-49 { transform-origin: 4vw 7vh; }
  .timbre-50 { transform-origin: 4vw 7vh; }
  .timbre-51 { transform-origin: 16vw 7vh; }
  .timbre-52 { transform-origin: center center; }
}


@media (max-width: 1300px) {
  .entry-content .pi.zoomed {
    transform: scale(3) rotate(360deg) !important;
  }
}

@media (max-width: 700px) {
  .entry-content .pi.zoomed {
    transform: scale(5) !important;
  }
}

@media (max-width: 700px) {
  .archive-title {
    font-size: clamp(2rem, 12vw, 5rem);
    padding: 4vh 2vw 2vh;
  }
}
@media (max-width: 1300px) {
  .archive-title {
    font-size: clamp(2rem, 8vw, 7rem);
  }
}