/* ==========================================================================
   MC Coach Sportif — pages/projets.css
   Page Projets (projets.html) uniquement.
   ========================================================================== */

.projects-page {
  background: var(--ivory);
}
.projects-page > .wrap {
  display: grid;
  gap: 14px;
}
.future-panel {
  min-height: 310px;
  padding: 36px;
  background: linear-gradient(140deg, #f7edd0, #fff8e7);
  border: 1px solid #ebdcae;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.future-panel.light {
  background: #fff;
  border-color: var(--line);
}
.future-panel.shop {
  background: linear-gradient(140deg, #f3f0e7, #fff);
}
.future-panel p {
  max-width: 570px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}
.future-badge {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--gold3);
  border: 1px solid #ddcb94;
  padding: 9px 11px;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .future-panel {
    min-height: 250px;
    padding: 28px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.scene-hourglass {
  width: 190px;
  height: 285px;
  translate: 0 -2px;
  animation: hourglassFloat 4.6s ease-in-out infinite;
}
.hg-frame {
  position: absolute;
  left: 20px;
  width: 150px;
  height: 22px;
  border-radius: 9px;
  background: linear-gradient(180deg, #f0d779, #b88b23);
  box-shadow:
    inset 0 5px 7px rgba(255, 255, 255, 0.4),
    0 10px 14px rgba(93, 70, 23, 0.12);
  z-index: 5;
}
.hg-frame.top {
  top: 0;
}
.hg-frame.bottom {
  bottom: 0;
}
.hg-glass {
  position: absolute;
  left: 32px;
  top: 18px;
  width: 126px;
  height: 248px;
  border-radius: 58px 58px 36px 36px / 34px 34px 46px 46px;
  background: linear-gradient(
    90deg,
    rgba(231, 219, 184, 0.2),
    rgba(255, 255, 255, 0.65) 22%,
    rgba(213, 170, 53, 0.06) 55%,
    rgba(213, 170, 53, 0.2)
  );
  border: 2px solid rgba(211, 170, 53, 0.24);
  clip-path: polygon(0 0, 100% 0, 79% 46%, 100% 100%, 0 100%, 21% 46%);
  box-shadow:
    inset 14px 0 18px rgba(255, 255, 255, 0.28),
    inset -15px 0 18px rgba(167, 130, 33, 0.08);
  transform: translateZ(8px);
}
.hg-glass::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 18px;
  width: 8px;
  height: 180px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
  transform: rotate(7deg);
  filter: blur(1px);
}
.top-sand {
  top: 48px;
  height: 74px;
  clip-path: polygon(0 0, 100% 0, 65% 100%, 35% 100%);
  animation: sandTop 5s linear infinite;
}
.bottom-sand {
  bottom: 48px;
  height: 80px;
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  animation: sandBottom 5s linear infinite;
}
.hg-highlight {
  position: absolute;
  left: 58px;
  top: 38px;
  width: 28px;
  height: 194px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.56), transparent);
  filter: blur(2px);
  z-index: 6;
  transform: rotate(8deg);
}
.scene-project:hover .scene-hourglass {
  rotate: 0 1 0 8deg;
  translate: 0 -10px;
}
@keyframes hourglassFloat {
  0%,
  100% {
    translate: 0 0;
    rotate: 0 1 0 -2deg;
  }
  50% {
    translate: 0 -11px;
    rotate: 0 1 0 3deg;
  }
}
@keyframes sandTop {
  0%,
  12% {
    height: 74px;
  }
  100% {
    height: 12px;
  }
}
@keyframes sandBottom {
  0%,
  12% {
    height: 20px;
  }
  100% {
    height: 80px;
  }
}
@media (max-width: 760px) {
  .scene-hourglass {
    transform: translate(-50%, -50%) scale(0.78);
  }
}
.scene-project .scene-hourglass {
  animation: none;
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 26px rgba(93, 70, 23, 0.16));
}
.scene-project .scene-hourglass .hg-frame {
  height: 24px;
  border: 1px solid rgba(184, 139, 35, 0.28);
}
.scene-project .scene-hourglass .hg-glass {
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.62) 26%,
    rgba(244, 234, 207, 0.2) 54%,
    rgba(201, 164, 75, 0.14)
  );
  backdrop-filter: blur(1px);
}
.hg-glass-inner {
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  clip-path: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.34),
    transparent 24%,
    rgba(255, 255, 255, 0.08) 52%,
    rgba(174, 132, 28, 0.08)
  );
  pointer-events: none;
}
.scene-project .scene-hourglass .hg-sand {
  will-change: height, transform;
}
.scene-project .scene-hourglass .top-sand {
  animation: sandTopV11 5.2s linear infinite;
}
.scene-project .scene-hourglass .bottom-sand {
  animation: sandBottomV11 5.2s linear infinite;
}
.scene-project .scene-hourglass .hg-stream {
  animation: sandStreamV11 5.2s linear infinite;
}
.scene-project .scene-hourglass.hg-turning .top-sand {
  animation: none;
  height: 0;
}
.scene-project .scene-hourglass.hg-turning .bottom-sand {
  animation: none;
  height: 82px;
}
.scene-project .scene-hourglass.hg-turned {
  transform: translateY(-2px) rotateY(180deg);
}
.scene-project .scene-hourglass.hg-turned .top-sand {
  animation: none;
  height: 0;
}
.scene-project .scene-hourglass.hg-turned .bottom-sand {
  animation: none;
  height: 82px;
}
@keyframes sandTopV11 {
  0%,
  8% {
    height: 74px;
    opacity: 1;
  }
  84% {
    height: 10px;
    opacity: 1;
  }
  92%,
  100% {
    height: 0;
    opacity: 0.1;
  }
}
@keyframes sandBottomV11 {
  0%,
  8% {
    height: 20px;
  }
  84% {
    height: 82px;
  }
  92%,
  100% {
    height: 82px;
  }
}
@keyframes sandStreamV11 {
  0%,
  8% {
    height: 82px;
    opacity: 1;
  }
  82% {
    height: 82px;
    opacity: 1;
  }
  90%,
  100% {
    height: 0;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-project .scene-hourglass .top-sand,
  .scene-project .scene-hourglass .bottom-sand,
  .scene-project .scene-hourglass .hg-stream {
    animation: none !important;
  }
}