/* ═══════════════════════════════════════════════════════════════════════════
   Pongara Hero — SmoothScrollHero vanilla JS port
   Mécanisme :
     • .ph-center   z-index:2, clip-path polygon — seule la zone du polygone
       est opaque. En dehors : transparent → laisse voir les parallaxes.
     • .ph-parallax-wrap   z-index:1 — visibles SOUS le center, dans les
       zones transparentes (hors polygone).
     • overflow:hidden sur .ph-sticky → les images traduites hors viewport
       entrent progressivement au scroll.
   pongara-hero.css
   ═══════════════════════════════════════════════════════════════════════════ */

#pongara-hero {
  --ph-bg:    #0c1f10;   /* vert forêt sombre */
  --ph-teal:  #184445;
  --ph-gold:  #C79645;
  --ph-cream: #faf7f1;
  background: var(--ph-bg);
  font-family: 'Marcellus', serif;
  position: relative;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.ph-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  pointer-events: none;
}
.ph-nav > * { pointer-events: auto; }
.ph-nav__logo {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.ph-nav__cta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Marcellus', serif;
  text-decoration: none;
  transition: color .3s;
}
.ph-nav__cta:hover { color: rgba(255,255,255,.9); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO WRAPPER — scroll track (1500px + 100vh)
══════════════════════════════════════════════════════════════════════════ */
.ph-hero-wrap {
  height: calc(1750px + 50vh);
  position: relative;
  width: 100%;
}

/* ── Sticky viewport — contient tout ce qui est visible ─────────────────── */
.ph-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;   /* cache les images translateées hors viewport */
}

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE CENTRALE — z:2, clip-path polygon croissant
   La zone HORS polygone est transparente → les parallaxes (z:1) sont
   visibles à travers.
══════════════════════════════════════════════════════════════════════════ */
.ph-center {
  position: absolute;
  inset: 0;
  background-size: 170%;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
  will-change: clip-path, background-size, opacity;
  z-index: 2;   /* AU-DESSUS des parallaxes, mais le clip-path crée des trous */
}

/* ══════════════════════════════════════════════════════════════════════════
   IMAGES PARALLAXE — z:1, visibles SOUS le center dans les trous du clip
══════════════════════════════════════════════════════════════════════════ */
.ph-parallax-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;   /* SOUS le center */
  pointer-events: none;
}

.ph-pi {
  position: absolute;
  object-fit: cover;
  will-change: transform, opacity;
}

/*
 * Positions initiales dans le viewport sticky.
 * Les translateY du JS s'ajoutent à ces positions CSS.
 * start=-200 → image démarre 200px au-dessus de sa position CSS
 * start=200  → image démarre 200px en-dessous (hors viewport si près du bas)
 *
 * pi-1 (même photo que center, z:5) : upper-left, entre par le haut
 * pi-2 (large, z:3)                 : centre-bas, monte depuis le bas
 * pi-3 (z:3)                        : upper-right, entre par le haut
 * pi-4 (z:4, monte vite)            : lower-right, traverse pi-1 en montant
 */
.ph-pi--1 {
  width: 38%;
  height: 50vh;
  left: 3%;
  top: 12%;
  z-index: 5;   /* le plus haut → traverse les autres */
}
.ph-pi--2 {
  width: 62%;
  height: 55vh;
  left: 19%;
  bottom: -5%;  /* commence hors viewport (+ start=200px du JS) */
  z-index: 3;
}
.ph-pi--3 {
  width: 40%;
  height: 48vh;
  right: 2%;
  top: 5%;
  z-index: 3;
}
.ph-pi--4 {
  width: 32%;
  height: 40vh;
  right: 4%;
  bottom: 5%;
  z-index: 4;
}

/* ── Fondu bas ───────────────────────────────────────────────────────────── */
.ph-fade-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 320px;
  background: linear-gradient(to bottom, transparent, var(--ph-bg));
  z-index: 10;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCHEDULE (Activités)
══════════════════════════════════════════════════════════════════════════ */
.ph-schedule {
  background: var(--ph-bg);
  max-width: 1024px;
  margin: 0 auto;
  padding: 12rem 1rem;
  color: #fff;
}
.ph-schedule__title {
  font-family: 'Marcellus', serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fafafa;
  margin: 0 0 5rem;
  font-weight: 400;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .75s ease-in-out, transform .75s ease-in-out;
}
.ph-schedule__title.is-visible { opacity: 1; transform: translateY(0); }

.ph-sch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 2.25rem .75rem;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .75s ease-in-out, transform .75s ease-in-out;
}
.ph-sch-item.is-visible { opacity: 1; transform: translateY(0); }

.ph-sch-item__name {
  font-family: 'Marcellus', serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #fafafa;
  margin: 0 0 .3rem;
}
.ph-sch-item__type {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0;
}
.ph-sch-item__loc {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ph-pi--1 { width: 55%; height: 38vh; }
  .ph-pi--2 { width: 82%; height: 44vh; left: 5%; }
  .ph-pi--3 { width: 52%; height: 36vh; }
  .ph-pi--4 { width: 44%; height: 32vh; }
  .ph-schedule { padding: 6rem 1.5rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ph-center {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    background-size: 100% !important;
    opacity: 1 !important;
  }
  .ph-pi { transform: none !important; opacity: 1 !important; }
  .ph-schedule__title,
  .ph-sch-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Marquee pleine largeur, chevauchant la vidéo ──────────────────────────── */
#pongara-marquee-wrap {
  position: absolute;           /* positionné par JS selon videoTop */
  left: 0;
  width: 100vw;                 /* pleine largeur viewport */
  overflow: visible;            /* pas de cadre */
  pointer-events: none;
  background: transparent;
  z-index: 2;                   /* au-dessus du fond cream, derrière la vidéo */
  visibility: hidden;           /* JS reveals after positioning */
}

.pongara-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: pongara-marquee 18s linear infinite;
  will-change: transform;
}

.pongara-marquee-track span {
  font-family: 'Marcellus', Georgia, serif;
  font-size: clamp(2.5rem, 4.68vw, 3.74rem);
  color: #dbdbdb;
  opacity: 1;
  padding-right: 4rem;
  flex-shrink: 0;
}

@keyframes pongara-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-end, -50%)); }
}

/* Section entre stats et vidéo — fond crème */
.elementor-element-ec1ca69 {
  background-color: #faf7f1 !important;
}

/* La vidéo doit être au-dessus du marquee */
.elementor-element-daff1e7 {
  position: relative;
  z-index: 3;
}

/* ─── Hide modern hero on mobile & tablet (≤1024px) ─────────────────────── */
@media (max-width: 1024px) {
  #pongara-hero,
  #pongara-hero-placeholder,
  #pongara-teleport-hero {
    display: none !important;
  }
}