/* ==========================================================================
   Ellena — univers jungle : bois, lianes, lucioles, calcul mental
   ========================================================================== */

.page-ellena {
  --forest-950: #07170a;
  --forest-900: #0c2410;
  --forest-800: #133417;
  --forest-700: #1d4a1f;
  --leaf: #6cc832;
  --leaf-2: #4ea726;
  --leaf-light: #c3f26a;
  --wood: #94512a;
  --wood-dark: #5a2c10;
  --wood-light: #c27a3c;
  --cream: #fdedc4;
  --cream-2: #f6dba0;
  --sun: #f6b23e;
  --rose: #ff6fa5;
  --teal: #2ec4c9;
  --ink: #3b1d08;

  --font-game: "Lilita One", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-display: var(--font-game);

  --nav-bg: rgba(12, 36, 16, 0.86);
  --nav-border: rgba(195, 242, 106, 0.16);
  --nav-accent: var(--sun);
  --nav-cta-fg: #3b1d08;

  background: var(--forest-950);
  color: #f4f8ea;
}
.page-ellena .brand-name { font-family: var(--font-body); font-weight: 800; }

/* ---------- Composants « jeu » ---------- */
.wood {
  position: relative;
  border-radius: 30px;
  background:
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(180deg, transparent 0 74px, rgba(60, 25, 5, 0.55) 74px 78px),
    linear-gradient(180deg, #a85f30, #8a4822);
  box-shadow:
    inset 0 0 0 6px var(--wood-dark),
    inset 0 10px 0 6px rgba(255, 200, 140, 0.18),
    inset 0 -14px 24px rgba(40, 15, 0, 0.45),
    0 30px 60px -20px rgba(0, 0, 0, 0.7);
}
.wood::before,
.wood::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1d3a8, #7b4a22 70%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.wood::before { left: 18px; }
.wood::after { right: 18px; }

.leaf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 18px;
  font-family: var(--font-game);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(20, 70, 10, 0.6);
  background: linear-gradient(180deg, #8ee04c, #4ea726 60%, #3d8f1c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -5px 0 rgba(20, 70, 10, 0.45), 0 10px 22px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s var(--ease-bounce), filter 0.2s;
}
.leaf-btn:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); }
.leaf-btn:active { transform: translateY(1px); }
.leaf-btn svg { width: 22px; height: 22px; }

.game-title {
  font-family: var(--font-game);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

.section-e { position: relative; padding: clamp(80px, 10vw, 130px) 0; }
.e-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-900);
  background: var(--leaf-light);
}
.e-title {
  font-family: var(--font-game);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.e-title em { font-style: normal; color: var(--leaf-light); }
.e-lead { margin-top: 18px; max-width: 60ch; font-size: clamp(17px, 1.5vw, 19px); color: #d3e2c3; }
.e-head { text-align: center; margin: 0 auto clamp(40px, 6vw, 60px); max-width: 760px; }
.e-head .e-lead { margin-inline: auto; }

/* ---------- HERO JUNGLE ---------- */
.jungle-hero {
  position: relative;
  min-height: max(760px, 100svh);
  padding: calc(var(--nav-h) + 30px) 0 200px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(255, 244, 170, 0.55), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(246, 178, 62, 0.18), transparent 70%),
    linear-gradient(180deg, #4f9a2c 0%, #2b6a1d 32%, #164018 62%, #0c2410 100%);
  display: flex;
  align-items: center;
}
.jh-rays {
  position: absolute;
  inset: -40% -20% auto;
  height: 140%;
  z-index: -3;
  background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255, 250, 200, 0.14) 0 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
  animation: rays-sway 16s ease-in-out infinite alternate;
}
@keyframes rays-sway {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}
.jh-trees {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  z-index: -2;
  width: 100%;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 0.4s var(--ease);
}
.jh-trees svg { position: absolute; bottom: 0; left: -5%; width: 110%; height: 100%; }

.bushes {
  position: absolute;
  left: -5%; right: -5%;
  bottom: -2px;
  pointer-events: none;
  transform: translate3d(var(--px, 0), 0, 0);
  transition: transform 0.4s var(--ease);
}
.bushes--mid {
  z-index: -1;
  height: 260px;
  background:
    radial-gradient(circle 80px at 50% 100%, #2f7a20 97%, transparent 100%) 0 100% / 150px 150px repeat-x,
    radial-gradient(circle 100px at 50% 100%, #276b1b 97%, transparent 100%) 70px 100% / 210px 200px repeat-x,
    linear-gradient(#276b1b, #276b1b) 0 100% / 100% 90px no-repeat;
}
.bushes--front {
  z-index: 2;
  height: 190px;
  background:
    radial-gradient(circle 52px at 50% 100%, #7ccf3a 96%, transparent 100%) 30px 100% / 104px 96px repeat-x,
    radial-gradient(circle 70px at 50% 100%, #5db82f 97%, transparent 100%) 0 100% / 140px 130px repeat-x,
    radial-gradient(circle 64px at 50% 100%, #4ea726 97%, transparent 100%) 60px 100% / 170px 150px repeat-x,
    linear-gradient(#4ea726, #4ea726) 0 100% / 100% 70px no-repeat;
  filter: drop-shadow(0 -8px 16px rgba(0, 0, 0, 0.25));
}
.bushes--front::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--e-fade, var(--forest-900)));
}

/* Lianes */
.vines { position: absolute; inset: 0 0 auto; height: 100%; pointer-events: none; z-index: 1; }
.vine {
  position: absolute;
  top: -10px;
  width: 60px;
  transform-origin: 50% 0;
  animation: vine-sway 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}
.vine.v1 { left: 4%; height: 330px; animation-delay: -1s; }
.vine.v2 { left: 17%; height: 210px; animation-delay: -3s; animation-duration: 7s; }
.vine.v3 { right: 22%; height: 260px; animation-delay: -2s; animation-duration: 5.5s; }
.vine.v4 { right: 6%; height: 400px; animation-delay: -4s; }
.vine.v5 { left: 46%; height: 150px; animation-delay: -0.5s; animation-duration: 6.5s; }
@keyframes vine-sway {
  from { transform: rotate(-3.5deg); }
  to { transform: rotate(3.5deg); }
}

/* Lucioles & feuilles */
.fireflies, .falling-leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fireflies { z-index: 1; }
.falling-leaves { z-index: 3; }
.firefly {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fbff9c;
  box-shadow: 0 0 10px 3px rgba(240, 255, 120, 0.8), 0 0 24px 8px rgba(200, 255, 80, 0.35);
  animation: firefly-drift var(--dur, 12s) ease-in-out infinite alternate, firefly-blink var(--blink, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes firefly-drift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(var(--x1, 30px), var(--y1, -40px)); }
  66% { transform: translate(var(--x2, -20px), var(--y2, -80px)); }
  100% { transform: translate(var(--x3, 40px), var(--y3, -20px)); }
}
@keyframes firefly-blink {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}
.falling-leaf {
  position: absolute;
  top: -60px;
  width: var(--size, 26px);
  color: var(--c, #7ccf3a);
  animation: leaf-fall var(--dur, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.falling-leaf svg { width: 100%; height: auto; animation: leaf-spin var(--spin, 3s) ease-in-out infinite alternate; }
@keyframes leaf-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate(var(--drift, 120px), calc(100svh + 120px)); opacity: 0.9; }
}
@keyframes leaf-spin {
  from { transform: rotate(-40deg) rotateY(0deg); }
  to { transform: rotate(50deg) rotateY(160deg); }
}

/* Contenu du hero */
.jh-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
}
.sign-wrap { position: relative; padding-top: 70px; max-width: 620px; }
.sign-ropes { position: absolute; top: -200px; left: 0; right: 0; height: 290px; pointer-events: none; }
.sign-ropes::before,
.sign-ropes::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 10px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(160deg, #c99a5e 0 6px, #8d6233 6px 12px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.sign-ropes::before { left: 18%; }
.sign-ropes::after { right: 18%; }
.wood-sign {
  padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 48px) clamp(30px, 4vw, 44px);
  text-align: center;
  transform-origin: 50% -200px;
  animation: sign-swing 5s ease-in-out infinite alternate;
}
@keyframes sign-swing {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}
.sign-small {
  font-family: var(--font-game);
  font-size: clamp(26px, 3.4vw, 42px);
  color: #d9ff7e;
  -webkit-text-stroke: 1.5px #1e5410;
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 #2c5a12);
}
.sign-title {
  margin-top: 4px;
  font-family: var(--font-game);
  font-weight: 400;
  font-size: clamp(78px, 12vw, 158px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f1ff9a 8%, #a5ea4a 45%, #4fb526 70%, #2f8b16);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #1d5410;
  filter: drop-shadow(0 6px 0 #1b4a0e) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.45));
}
.sign-leaf { position: absolute; width: 74px; color: #5db82f; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.sign-leaf.l1 { top: 44px; left: -26px; transform: rotate(-50deg); }
.sign-leaf.l2 { top: 34px; left: 12px; width: 52px; color: #7ccf3a; transform: rotate(-12deg); }
.sign-leaf.l3 { bottom: -30px; right: -18px; transform: rotate(140deg); width: 84px; }
.sign-leaf.l4 { bottom: -22px; right: 40px; width: 50px; color: #8ee04c; transform: rotate(190deg); }
.sign-flower { position: absolute; width: 38px; }
.sign-flower.f1 { top: 52px; left: 44px; }
.sign-flower.f2 { bottom: -12px; right: 92px; width: 30px; }

.jh-tagline {
  margin-top: 34px;
  max-width: 52ch;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  color: #f1f8e3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.jh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.jh-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jh-badges > span {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  background: rgba(7, 23, 10, 0.5);
  box-shadow: inset 0 0 0 1px rgba(195, 242, 106, 0.3);
  backdrop-filter: blur(4px);
}
.jh-badges .star { color: var(--sun); }

.hero-portrait {
  position: relative;
  justify-self: center;
  width: min(400px, 82vw);
  aspect-ratio: 1;
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-16px) rotate(1.5deg); }
}
.portrait-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sun);
  box-shadow:
    0 0 0 12px var(--wood),
    0 0 0 18px var(--wood-dark),
    0 0 0 22px rgba(195, 242, 106, 0.35),
    0 40px 70px -20px rgba(0, 0, 0, 0.7);
}
.portrait-ring img { width: 100%; height: 100%; object-fit: cover; }
.portrait-leaf { position: absolute; color: #5db82f; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)); }
.portrait-leaf.p1 { width: 110px; top: -40px; left: -30px; transform: rotate(-40deg); color: #4ea726; }
.portrait-leaf.p2 { width: 80px; top: -20px; left: 50px; transform: rotate(10deg); color: #7ccf3a; }
.portrait-leaf.p3 { width: 120px; bottom: -36px; right: -34px; transform: rotate(150deg); }
.portrait-leaf.p4 { width: 70px; bottom: 10px; right: -48px; transform: rotate(100deg); color: #8ee04c; }
.portrait-flower { position: absolute; width: 44px; }
.portrait-flower.pf1 { top: 6px; left: 26px; }
.portrait-flower.pf2 { bottom: 40px; right: -14px; width: 36px; }
.bubble {
  position: absolute;
  top: 6%;
  right: -12%;
  padding: 12px 18px;
  border-radius: 20px 20px 20px 4px;
  font-family: var(--font-game);
  font-size: 19px;
  color: var(--ink);
  background: var(--cream);
  box-shadow: 0 0 0 4px var(--wood-dark), 0 12px 24px rgba(0, 0, 0, 0.35);
  animation: bubble-pop 0.6s 1.2s var(--ease-bounce) both;
}
@keyframes bubble-pop { from { transform: scale(0); opacity: 0; } }

/* ---------- AVENTURE ---------- */
.adventure {
  background:
    radial-gradient(50% 60% at 90% 10%, rgba(108, 200, 50, 0.12), transparent 70%),
    linear-gradient(180deg, var(--forest-900), #1d1309 100%);
}
.adventure-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.feature-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.feature-list li { display: flex; gap: 16px; align-items: flex-start; }
.feature-list .fi {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #a85f30, #7c3f1c);
  box-shadow: inset 0 0 0 3px var(--wood-dark), inset 0 3px 0 3px rgba(255, 200, 140, 0.2);
}
.feature-list .fi svg { width: 26px; height: 26px; }
.feature-list b { display: block; font-family: var(--font-game); font-weight: 400; font-size: 21px; color: #fff; }
.feature-list span { color: #cbd8bd; }

.adventure-visual { position: relative; }
.adventure-visual .device { transform: rotate(2deg); }
.eq-float {
  position: absolute;
  display: flex;
  gap: 6px;
  z-index: 2;
  animation: bob 6s ease-in-out infinite;
}
.eq-float.e1 { top: -34px; left: -20px; animation-delay: -2s; }
.eq-float.e2 { bottom: -28px; right: -10px; }

.tile {
  display: inline-grid;
  place-items: center;
  min-width: 52px; height: 56px;
  padding: 0 8px;
  border-radius: 14px;
  font-family: var(--font-game);
  font-size: 32px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, #a85f30, #7c3f1c);
  box-shadow: inset 0 0 0 3px #5a2c10, inset 0 4px 0 3px rgba(255, 200, 140, 0.25), 0 0 0 3px #6cc832, 0 10px 18px -6px rgba(0, 0, 0, 0.5);
}
.tile--num { color: #c3f26a; }
.tile--op { color: #fff; }
.tile--q { color: #fff; background: linear-gradient(180deg, #8a8f86, #5d625a); box-shadow: inset 0 0 0 3px #3d413a, inset 0 4px 0 3px rgba(255, 255, 255, 0.2), 0 0 0 3px #6cc832, 0 10px 18px -6px rgba(0, 0, 0, 0.5); }
.tile--ok { background: linear-gradient(180deg, #8ee04c, #3d8f1c); color: #fff; }

/* ---------- OPTIONS ---------- */
.options {
  background:
    radial-gradient(40% 50% at 10% 20%, rgba(108, 200, 50, 0.12), transparent 70%),
    #1d1309;
}
.options-board { max-width: 980px; margin: 0 auto; padding: clamp(56px, 7vw, 76px) clamp(18px, 4vw, 44px) clamp(28px, 4vw, 44px); }
.board-tab {
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 36px 12px;
  border-radius: 22px;
  font-family: var(--font-game);
  font-size: clamp(22px, 3vw, 32px);
  color: var(--leaf-light);
  -webkit-text-stroke: 1px #1e5410;
  paint-order: stroke fill;
  white-space: nowrap;
  background: linear-gradient(180deg, #a85f30, #7c3f1c);
  box-shadow: inset 0 0 0 5px var(--wood-dark), 0 10px 20px -6px rgba(0, 0, 0, 0.6);
}
.ops-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.op-card {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff4d6, var(--cream-2));
  box-shadow: inset 0 0 0 4px #e3b874, 0 8px 0 #6b3514, 0 16px 24px -8px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  text-align: center;
  transition: transform 0.3s var(--ease-bounce), filter 0.3s;
}
.op-card.is-off { filter: grayscale(0.7) brightness(0.85); }
.op-card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-game);
  font-weight: 400;
  font-size: 24px;
  color: #6b3514;
}
.op-sym {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--leaf-2);
  color: #fff;
  font-size: 24px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.op-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.op-label { font-weight: 900; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #9a5a2a; }
.switch {
  position: relative;
  width: 86px; height: 38px;
  border: 0;
  border-radius: 999px;
  background: #c9b590;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px #e3b874;
  transition: background 0.25s;
}
.switch::before {
  content: attr(data-off);
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  font-size: 12px;
  color: #7a6a4a;
}
.switch::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #dfe8e8);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--ease-bounce);
}
.switch[aria-checked="true"] { background: linear-gradient(180deg, #4fd8dd, #1ba3a8); }
.switch[aria-checked="true"]::before { content: attr(data-on); left: 12px; right: auto; color: #fff; }
.switch[aria-checked="true"]::after { transform: translateX(48px); }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper button {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  font-family: var(--font-game);
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #4fd8dd, #1ba3a8);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 0 0 3px #e3b874;
  transition: transform 0.2s var(--ease-bounce);
}
.stepper button:hover { transform: scale(1.1); }
.stepper button:disabled { opacity: 0.4; transform: none; cursor: default; }
.stepper output {
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 12px;
  font-family: var(--font-game);
  font-size: 24px;
  color: #6b3514;
  background: #fff8e6;
  box-shadow: inset 0 0 0 3px #e3b874;
}
.options-note { margin-top: 26px; text-align: center; font-weight: 700; color: #f3e1bb; }

/* ---------- DÉMO ---------- */
.demo {
  background:
    radial-gradient(60% 40% at 50% 45%, rgba(195, 242, 106, 0.1), transparent 70%),
    linear-gradient(180deg, #1d1309, var(--forest-900) 40%, var(--forest-950));
}
.game-board {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px);
  overflow: hidden;
}
.game-inner {
  position: relative;
  border-radius: 20px;
  padding: clamp(16px, 3vw, 28px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.0) 55%, rgba(80, 50, 20, 0.12)),
    linear-gradient(180deg, #fff6d9, #f7dda4);
  box-shadow: inset 0 0 0 4px #e3b874;
  color: var(--ink);
}
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}
.hud-group { display: flex; align-items: center; gap: 8px; }
.hearts { display: flex; gap: 4px; }
.hearts svg { width: 30px; height: 30px; transition: transform 0.3s var(--ease-bounce), opacity 0.3s, filter 0.3s; }
.hearts svg.is-lost { opacity: 0.25; filter: grayscale(1); transform: scale(0.8); }
.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  font-family: var(--font-game);
  font-size: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 3px #e3b874;
}
.hud-pill svg { width: 26px; height: 26px; }
.energy { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; }
.energy svg { width: 26px; height: 26px; flex: none; }
.energy-bar {
  position: relative;
  flex: 1;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: #6b3514;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.energy-bar i {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px) * var(--e, 1));
  border-radius: 999px;
  background: linear-gradient(180deg, #a6f1ff, #3cc7e8);
  transition: width 0.1s linear;
}
.energy-bar.is-low i { background: linear-gradient(180deg, #ffb3b3, #ef4b4b); }

.equation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 26px 0 22px;
  min-height: 64px;
}
.equation .tile { min-width: 56px; height: 62px; font-size: 36px; }
.equation .gap { width: 10px; }

.answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.answer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  background: #fffaf0;
  box-shadow: inset 0 0 0 3px #e3b874, 0 5px 0 #c7955a;
  transition: transform 0.2s var(--ease-bounce), box-shadow 0.2s, background 0.2s;
}
.answer:hover:not(:disabled) { transform: translateY(-2px); background: #fff; }
.answer:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 3px #e3b874, 0 2px 0 #c7955a; }
.answer:disabled { cursor: default; }
.answer-letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-family: var(--font-game);
  font-size: 24px;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #f6b23e 60%, #d9861a);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.answer-value {
  font-family: var(--font-game);
  font-size: 32px;
  letter-spacing: 0.04em;
  color: #4a2a10;
}
.answer.is-right { background: #d9ffc0; box-shadow: inset 0 0 0 3px #4ea726, 0 5px 0 #3d8f1c; }
.answer.is-wrong { background: #ffd5d5; box-shadow: inset 0 0 0 3px #e14b4b, 0 5px 0 #b13434; animation: shake 0.45s; }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.track {
  position: relative;
  height: 76px;
  margin-top: 26px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle 16px at 50% 100%, #4ea726 96%, transparent 100%) 0 100% / 34px 22px repeat-x,
    linear-gradient(180deg, #bfe7ff 0%, #e7f6d5 58%, #b78a54 58%, #9c6f3e 100%);
  box-shadow: inset 0 0 0 3px #e3b874;
}
.track::before {
  content: "";
  position: absolute;
  inset: 8px 0 auto;
  height: 36px;
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 255, 255, 0.9) 40px 50px, transparent 50px 64px, rgba(255, 255, 255, 0.8) 64px 70px, transparent 70px 120px);
  opacity: 0.6;
}
.track-flag {
  position: absolute;
  right: 12px; bottom: 16px;
  width: 34px;
}
.runner {
  position: absolute;
  bottom: 12px;
  left: calc(10px + (100% - 90px) * var(--p, 0));
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sun);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--leaf-2), 0 6px 10px rgba(0, 0, 0, 0.3);
  transition: left 0.6s var(--ease-bounce);
}
.runner img { width: 100%; height: 100%; object-fit: cover; }
.runner.is-hop { animation: hop 0.6s var(--ease); }
@keyframes hop { 40% { transform: translateY(-16px); } }

.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 20px;
  text-align: center;
  background: rgba(20, 40, 14, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.35s, visibility 0s;
}
.game-overlay[hidden] { display: grid; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.overlay-card { max-width: 440px; padding: 34px 28px 30px; color: #fff; }
.overlay-card.wood {
  background:
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #a85f30, #8a4822);
}
.overlay-card h3 { font-family: var(--font-game); font-weight: 400; font-size: clamp(30px, 4vw, 40px); color: var(--leaf-light); -webkit-text-stroke: 1px #1e5410; paint-order: stroke fill; }
.overlay-card p { margin: 12px 0 22px; font-weight: 700; color: #ffe9c4; }
.overlay-medal { font-size: 56px; line-height: 1; margin-bottom: 6px; }
.demo-hint { margin-top: 20px; text-align: center; font-size: 14px; font-weight: 700; color: #a9c29a; }
.demo-hint kbd {
  display: inline-block;
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--forest-900);
  background: var(--cream);
  box-shadow: 0 2px 0 #c7955a;
}

/* ---------- GALERIE ---------- */
.shots { background: var(--forest-950); overflow: hidden; padding-top: clamp(40px, 5vw, 70px); }
.shots .gallery > * { width: min(620px, 84vw); }
.shots .device { transition: transform 0.4s var(--ease); }
.shots .gallery a:hover .device { transform: translateY(-6px) rotate(-0.6deg); }
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.wood-arrow {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, #8ee04c, #3d8f1c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -4px 0 rgba(20, 70, 10, 0.4), 0 0 0 4px var(--wood-dark);
  transition: transform 0.2s var(--ease-bounce);
}
.wood-arrow:hover { transform: scale(1.08); }
.wood-arrow svg { width: 26px; height: 26px; }

/* ---------- FICHE ---------- */
.facts { background: linear-gradient(180deg, var(--forest-950), var(--forest-900)); }
.facts-board { max-width: 1000px; margin: 0 auto; padding: clamp(56px, 7vw, 72px) clamp(18px, 4vw, 40px) clamp(26px, 4vw, 40px); }
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fact {
  padding: 16px 14px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #fff4d6, var(--cream-2));
  box-shadow: inset 0 0 0 3px #e3b874, 0 6px 0 #6b3514;
  color: var(--ink);
}
.fact small { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #9a5a2a; }
.fact strong { display: block; margin-top: 4px; font-family: var(--font-game); font-weight: 400; font-size: 22px; color: #4a2a10; }
.privacy-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(20, 40, 14, 0.55);
  box-shadow: inset 0 0 0 2px rgba(195, 242, 106, 0.3);
}
.privacy-strip p { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.privacy-strip svg { width: 30px; height: 30px; flex: none; color: var(--leaf-light); }
.privacy-strip a { font-weight: 800; color: var(--leaf-light); }

/* ---------- CTA FINAL ---------- */
.final-cta {
  position: relative;
  padding: clamp(90px, 12vw, 150px) 0 clamp(160px, 18vw, 220px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(50% 45% at 50% 55%, rgba(255, 244, 170, 0.22), transparent 70%),
    linear-gradient(180deg, var(--forest-900), #1d4a1f 35%, #2b6a1d 75%, #3f8a24);
  isolation: isolate;
}
.final-cta .e-title { font-size: clamp(40px, 6vw, 76px); }
.final-cta .jh-ctas { justify-content: center; }
.final-cta .bushes--front::after { background: linear-gradient(180deg, transparent, #050f07); }
.final-icon {
  width: 120px; height: 120px;
  margin: 0 auto 26px;
  border-radius: 28px;
  box-shadow: 0 0 0 6px var(--wood), 0 0 0 10px var(--wood-dark), 0 24px 40px -10px rgba(0, 0, 0, 0.6);
  animation: bob 5s ease-in-out infinite;
}

.page-ellena { --footer-bg: #050f07; --footer-line: rgba(195, 242, 106, 0.1); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .jh-inner { grid-template-columns: 1fr; text-align: center; }
  .sign-wrap { margin: 0 auto; }
  .jh-tagline { margin-inline: auto; }
  .jh-ctas, .jh-badges { justify-content: center; }
  .hero-portrait { width: min(300px, 70vw); margin-top: 20px; }
  .bubble { right: -4%; }
  .adventure-grid { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .ops-grid, .answers { grid-template-columns: 1fr; }
  .vine.v2, .vine.v5 { display: none; }
  .vine.v1 { height: 200px; }
  .vine.v4 { height: 240px; }
  .tile { min-width: 42px; height: 48px; font-size: 26px; }
  .equation .tile { min-width: 44px; height: 52px; font-size: 28px; }
  .eq-float { transform: scale(0.8); }
  .gallery-head { flex-direction: column; align-items: flex-start; }
  .hud { justify-content: center; }
  .sign-ropes::before { left: 14%; }
  .sign-ropes::after { right: 14%; }
}

/* ==========================================================================
   Mode clair — « Ellena de jour »
   ========================================================================== */
:root[data-theme="light"] .page-ellena {
  --e-fade: #eef8e2;
  --footer-bg: #1d4a1f;
  --footer-fg: #d6ecbf;
  --footer-head: #fff;
  --footer-line: rgba(255, 255, 255, 0.12);
  background: #eef8e2;
  color: #1d3a12;
}
:root[data-theme="light"] .page-ellena .jh-badges > span { color: #fff; background: rgba(20, 60, 12, 0.55); }
:root[data-theme="light"] .page-ellena .final-cta .bushes--front::after { background: linear-gradient(180deg, transparent, #1d4a1f); }
:root[data-theme="light"] .page-ellena .site-nav.is-scrolled,
:root[data-theme="light"] .page-ellena .site-nav.is-open {
  --nav-fg: #1d3a12;
  --nav-bg: rgba(246, 252, 238, 0.9);
  --nav-border: rgba(29, 58, 18, 0.12);
}
:root[data-theme="light"] .page-ellena .jungle-hero {
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(255, 250, 200, 0.75), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(246, 178, 62, 0.25), transparent 70%),
    linear-gradient(180deg, #8fd35a 0%, #5fae35 32%, #3f8a24 62%, #2b6a1d 100%);
}
:root[data-theme="light"] .page-ellena .jh-trees { opacity: 0.75; }
:root[data-theme="light"] .page-ellena .firefly { opacity: 0.5; }
:root[data-theme="light"] .page-ellena .adventure {
  background:
    radial-gradient(50% 60% at 90% 10%, rgba(246, 178, 62, 0.16), transparent 70%),
    linear-gradient(180deg, #eef8e2, #f7efdc);
}
:root[data-theme="light"] .page-ellena .options {
  background: radial-gradient(40% 50% at 10% 20%, rgba(108, 200, 50, 0.14), transparent 70%), #f7efdc;
}
:root[data-theme="light"] .page-ellena .demo {
  background:
    radial-gradient(60% 40% at 50% 45%, rgba(108, 200, 50, 0.14), transparent 70%),
    linear-gradient(180deg, #f7efdc, #eaf6dc 40%, #e3f2d2);
}
:root[data-theme="light"] .page-ellena .shots { background: #e3f2d2; }
:root[data-theme="light"] .page-ellena .facts { background: linear-gradient(180deg, #e3f2d2, #d6ecbf); }
:root[data-theme="light"] .page-ellena .final-cta {
  background:
    radial-gradient(50% 45% at 50% 55%, rgba(255, 250, 200, 0.7), transparent 70%),
    linear-gradient(180deg, #d6ecbf, #b4e08a 60%, #8bd14f);
}
:root[data-theme="light"] .page-ellena .e-title { color: #1d3a12; text-shadow: none; }
:root[data-theme="light"] .page-ellena .e-title em { color: #3d8f1c; }
:root[data-theme="light"] .page-ellena .e-lead { color: #4b5d3c; }
:root[data-theme="light"] .page-ellena .feature-list b { color: #1d3a12; }
:root[data-theme="light"] .page-ellena .feature-list span { color: #55684a; }
:root[data-theme="light"] .page-ellena .demo-hint { color: #55684a; }
:root[data-theme="light"] .page-ellena .e-kicker { background: #3d8f1c; color: #fff; }
:root[data-theme="light"] .page-ellena .wood,
:root[data-theme="light"] .page-ellena .device { box-shadow: inset 0 0 0 6px var(--wood-dark), inset 0 10px 0 6px rgba(255, 200, 140, 0.18), inset 0 -14px 24px rgba(40, 15, 0, 0.45), 0 30px 50px -24px rgba(60, 40, 10, 0.45); }
:root[data-theme="light"] .page-ellena .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 50px -26px rgba(40, 60, 20, 0.5); }