/* ==========================================================================
   Ziban Xtreme Park — parc xtrême & hôtel 5*
   ========================================================================== */
body[data-page="zxp"]{
  --accent: var(--orange);
  --accent-bright: #f0a24d;
}

/* ---- Hero: CSS-drawn dune & wave landscape (signature element) ---- */
.zxp-hero{
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.zxp-sky{
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    #0b1a2a 0%, #133249 26%, #2c4f5c 42%,
    #b5722f 66%, #8f4a20 84%, #5f2c15 100%);
}
.zxp-sun{
  position: absolute;
  top: 16%; left: 50%;
  width: 220px; height: 220px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,196,120,0.9), rgba(240,196,120,0.25) 60%, transparent 72%);
  filter: blur(2px);
}
.zxp-wave{
  position: absolute;
  left: 0; right: 0;
  bottom: 30%;
  width: 100%; height: 40px;
  color: rgba(70,170,170,0.55);
  overflow: visible;
}
.zxp-wave path{ fill: none; stroke: currentColor; stroke-width: 2; }
.zxp-dune{
  position: absolute; left: -5%; right: -5%; bottom: -4%;
  height: 46%;
}
.zxp-dune-1{ background: #7a3d17; clip-path: polygon(0 60%, 12% 44%, 26% 58%, 40% 38%, 55% 56%, 68% 40%, 82% 60%, 100% 46%, 100% 100%, 0 100%); opacity: 0.55; z-index: 1; }
.zxp-dune-2{ background: #5c2c11; clip-path: polygon(0 72%, 15% 52%, 32% 68%, 50% 46%, 66% 66%, 84% 50%, 100% 68%, 100% 100%, 0 100%); opacity: 0.75; z-index: 2; height: 36%; }
.zxp-dune-3{ background: #35190a; clip-path: polygon(0 82%, 18% 64%, 38% 80%, 58% 60%, 78% 80%, 100% 66%, 100% 100%, 0 100%); z-index: 3; height: 26%; }

.zxp-hero-inner{ position: relative; z-index: 4; max-width: 720px; text-align: left; }
.zxp-dust{ z-index: 3; }

/* ---- Drifting bird silhouettes ---- */
.zxp-bird{
  position: absolute;
  width: 28px; height: 14px;
  color: rgba(20,26,36,0.55);
  z-index: 2;
  animation: birdDrift linear infinite;
}
.zxp-bird-1{ top: 18%; animation-duration: 26s; animation-delay: 0s; }
.zxp-bird-2{ top: 27%; width: 20px; height: 10px; color: rgba(20,26,36,0.4); animation-duration: 34s; animation-delay: -9s; }
.zxp-bird-3{ top: 12%; width: 16px; height: 8px; color: rgba(20,26,36,0.32); animation-duration: 40s; animation-delay: -22s; }
@keyframes birdDrift{
  0%   { left: -6%; }
  100% { left: 106%; }
}
@media (prefers-reduced-motion: reduce){
  .zxp-bird{ animation: none; display: none; }
}
.zxp-badge{
  width: 128px; height: 128px;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
}
.zxp-badge img{ width: 100%; filter: drop-shadow(0 16px 30px rgba(0,0,0,0.6)); }
.zxp-hero h1{
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.05;
  margin: 20px 0 22px;
  color: #fbf3e4;
}
.zxp-lede{
  color: rgba(251,243,228,0.78);
  font-size: 16.5px;
  line-height: 1.8;
  max-width: 500px;
}
@media (max-width: 720px){
  .zxp-hero{ height: auto; padding: calc(var(--nav-h) + 60px) 0 120px; }
  .zxp-sun{ width: 160px; height: 160px; }
}



/* ==========================================================================
   Vue d'ensemble — panoramic overview banner
   ========================================================================== */
.overview-banner h2{
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 10px 0 28px;
  line-height: 1.18;
}
.ov-frame{
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7);
}
.ov-frame img{ width: 100%; display: block; }

/* ==========================================================================
   Activity photo cards
   ========================================================================== */
.activity-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.activity-card{
  background: var(--ink);
  display: block;
  overflow: hidden;
  transition: background .3s var(--ease);
}
.activity-card:hover{ background: var(--ink-soft); }
.activity-media{
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink-soft);
}
.activity-media img, .activity-media video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.activity-card:hover .activity-media img, .activity-card:hover .activity-media video{ transform: scale(1.06); filter: saturate(1.15) brightness(1.04); }
.activity-media.icon-fallback{
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(217,131,43,0.12), transparent 70%);
}
.activity-media.icon-fallback svg{ width: 52px; height: 52px; color: var(--accent); opacity: 0.75; }
.activity-body{ padding: 22px 24px 26px; }
.activity-body h3{ font-size: 17.5px; margin-bottom: 8px; line-height: 1.3; }
.activity-body p{ color: var(--parchment-dim); font-size: 13.5px; line-height: 1.65; }
@media (max-width: 860px){ .activity-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .activity-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Stay banners — resort + QG showcase above the hébergement grid
   ========================================================================== */
.stay-banners{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 40px;
}
.stay-banner{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/10;
}
.stay-banner img, .stay-banner video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.stay-banner:hover img, .stay-banner:hover video{ transform: scale(1.05); }
.stay-banner figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(6,7,10,0.88), transparent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--parchment);
}
@media (max-width: 720px){
  .stay-banners{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Overview facts strip
   ========================================================================== */
.ov-facts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: none;
}
.ov-fact{
  background: var(--ink-soft);
  padding: 20px 22px;
  text-align: center;
}
.ov-fact strong{
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent-bright);
  margin-bottom: 4px;
}
.ov-fact span{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--parchment-dim);
  letter-spacing: 0.02em;
}
@media (max-width: 640px){ .ov-facts{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Solar / sustainability section
   ========================================================================== */
.solar-section{ background: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.solar-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.solar-video{
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--line);
}
.solar-video video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.solar-copy h2{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 14px 0 18px; line-height: 1.22; }
.solar-copy p{ color: var(--parchment-dim); font-size: 15px; line-height: 1.8; max-width: 440px; }
@media (max-width: 860px){
  .solar-grid{ grid-template-columns: 1fr; }
  .solar-video{ order: -1; }
}

/* ==========================================================================
   Mascots section
   ========================================================================== */
.mascots-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.mascots-copy h2{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 14px 0 18px; line-height: 1.22; }
.mascots-copy p{ color: var(--parchment-dim); font-size: 15px; line-height: 1.8; max-width: 420px; }
.mascots-photo{ border: 1px solid var(--line); overflow: hidden; }
.mascots-photo img{ width: 100%; display: block; }
@media (max-width: 860px){
  .mascots-grid{ grid-template-columns: 1fr; }
  .mascots-photo{ order: -1; }
}