:root { --ink: #183e37; --deep: #10332e; --leaf: #397451; --leaf-dark: #275d43; --mint: #dcebc9; --paper: #fbf4e6; --surface: #fffdf8; --line: #d9d5ba; --orange: #e88337; --aqua: #4ebeb9; --purple: #7d4fc1; }
* { box-sizing: border-box; } html { background: var(--paper); color: var(--ink); font-family: ui-rounded, "Avenir Next", Avenir, "Nunito", system-ui, sans-serif; line-height: 1.55; scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; } button { font: inherit; }.shell { margin: 0 auto; width: min(100% - 40px, 1180px); }
.skip-link { background: var(--deep); color: white; left: 12px; padding: 10px 14px; position: fixed; top: -60px; z-index: 50; }.skip-link:focus { top: 12px; }.site-header { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--paper) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--leaf) 14%, transparent); position: sticky; top: 0; z-index: 20; }.nav-wrap { align-items: center; display: flex; gap: 28px; justify-content: space-between; min-height: 78px; }.brand { flex: 0 0 auto; text-decoration: none; }.brand img { height: 47px; object-fit: contain; width: 126px; }nav { align-items: center; display: flex; gap: 24px; }nav a { color: var(--leaf-dark); font-size: .9rem; font-weight: 850; text-decoration: none; }nav a:hover { color: var(--orange); }.nav-paw { border: 2px solid white; border-radius: 50%; box-shadow: 0 7px 18px rgba(26,75,51,.15); height: 44px; overflow: hidden; width: 44px; }.nav-paw img { height: 100%; object-fit: cover; width: 100%; }
.eyebrow { color: var(--leaf); font-size: .76rem; font-weight: 900; letter-spacing: .13em; margin: 0 0 10px; text-transform: uppercase; }h1,h2,h3,p { margin-top: 0; }h1,h2,h3 { color: var(--deep); letter-spacing: -.045em; line-height: 1.02; }h1 { font-size: clamp(3rem,6.2vw,5.5rem); margin-bottom: 22px; max-width: 10ch; }h2 { font-size: clamp(2.25rem,4vw,4rem); margin-bottom: 18px; max-width: 17ch; }h3 { font-size: 1.55rem; margin-bottom: 8px; }
.hero { background: linear-gradient(140deg,#edf3d6 0%,#fbf5e8 48%,#f6dc9a 100%); min-height: min(780px,calc(100vh - 78px)); overflow: hidden; position: relative; }.hero::before { background: url("brand/park-welcome.webp") center / cover; content: ""; inset: 0; mix-blend-mode: multiply; opacity: .2; position: absolute; }.hero-grid { align-items: center; display: grid; gap: 38px; grid-template-columns: 1fr 1fr; min-height: min(720px,calc(100vh - 78px)); padding: 58px 0 80px; position: relative; z-index: 1; }.hero-copy { padding: 26px 0; }.hero-lead { color: #37594c; font-size: clamp(1.08rem,1.75vw,1.32rem); max-width: 43ch; }.store-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 31px 0 12px; }.store-button { align-items: center; background: #163630; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; color: white; display: inline-flex; gap: 9px; line-height: 1.06; min-width: 166px; padding: 9px 14px; text-decoration: none; transition: transform .2s ease,background .2s ease; }.store-button:hover { background: #0d2924; transform: translateY(-2px); }.store-button small { display: block; font-size: .62rem; font-weight: 650; letter-spacing: .01em; margin-bottom: 2px; opacity: .8; }.store-button span:last-child { font-size: .98rem; font-weight: 850; }.store-mark { font-size: 1.7rem; line-height: .5; }.play-mark { color: #82e0b5; font-size: 1.25rem; }.store-note { color: #5d7569; font-size: .8rem; margin-bottom: 23px; }.text-link { color: var(--leaf-dark); font-weight: 900; text-decoration: none; }.text-link span { display: inline-block; margin-left: 7px; transition: transform .2s ease; }.text-link:hover span { transform: translateY(3px); }
.hero-visual { min-height: 590px; position: relative; }.sun-glow { background: #f9db83; border-radius: 50%; filter: blur(2px); height: min(38vw,460px); opacity: .72; position: absolute; right: 2%; top: 12%; width: min(38vw,460px); }.phone-stage { height: 590px; position: relative; }.orbit { border: 1px solid rgba(57,116,81,.28); border-radius: 50%; position: absolute; }.orbit-one { height: 410px; right: 10%; top: 65px; transform: rotate(-23deg); width: 550px; }.orbit-two { border-color: rgba(232,131,55,.36); height: 300px; right: 18%; top: 120px; width: 430px; }.phone { background: #ebf0d5; border: 9px solid #17342f; border-radius: 48px; box-shadow: 0 34px 60px rgba(39,74,48,.28),inset 0 0 0 2px rgba(255,255,255,.2); height: 550px; left: 50%; overflow: hidden; position: absolute; top: 15px; transform: translateX(-50%) rotate(5deg); width: 270px; z-index: 2; }.phone::before { background: #17342f; border-radius: 0 0 14px 14px; content: ""; height: 24px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 98px; z-index: 4; }.phone-scene { height: 100%; inset: 0; object-fit: cover; position: absolute; transform: scale(1.06); width: 100%; }.phone-sheen { background: linear-gradient(160deg,rgba(255,255,255,.52),transparent 38%,rgba(23,79,61,.1)); inset: 0; position: absolute; }.phone-ui { position: absolute; z-index: 3; }.phone-title { align-items: center; color: #204b3d; display: flex; font-size: .58rem; font-weight: 850; justify-content: space-between; left: 18px; right: 18px; top: 31px; }.phone-title strong { font-size: .8rem; }.phone-message { background: rgba(255,253,247,.82); border: 1px solid rgba(255,255,255,.88); border-radius: 14px; bottom: 72px; box-shadow: 0 7px 18px rgba(32,67,49,.12); color: var(--leaf-dark); left: 18px; padding: 9px 11px; right: 18px; }.phone-message span { display: block; font-size: .58rem; font-weight: 750; text-transform: uppercase; }.phone-message strong { display: block; font-size: .8rem; margin-top: 2px; }.phone-card { animation: float-card 4.8s ease-in-out infinite; bottom: 133px; filter: drop-shadow(0 12px 13px rgba(36,63,50,.27)); margin: 0; position: absolute; right: -22px; transform: rotate(-13deg); width: 144px; z-index: 4; }.phone-card img { border-radius: 12px; }.phone-bao { animation: bob-bao 4.8s ease-in-out infinite; bottom: 129px; filter: drop-shadow(0 9px 8px rgba(30,61,43,.2)); left: 17px; position: absolute; width: 118px; z-index: 3; }.phone-chip { animation: pulse-chip 3s ease-in-out infinite; background: var(--purple); border-radius: 999px; color: white; font-size: .65rem; font-weight: 850; padding: 7px 10px; right: 17px; top: 72px; }.motion-control { align-items: center; background: rgba(255,253,247,.88); border: 1px solid rgba(57,116,81,.24); border-radius: 999px; bottom: 4px; color: var(--leaf-dark); cursor: pointer; display: flex; font-size: .76rem; font-weight: 850; gap: 7px; left: 50%; padding: 8px 12px; position: absolute; transform: translateX(-50%); z-index: 5; }.motion-play { display: none; font-size: .65rem; }.phone-stage.is-paused .phone-card,.phone-stage.is-paused .phone-bao,.phone-stage.is-paused .phone-chip { animation-play-state: paused; }.phone-stage.is-paused .motion-pause { display: none; }.phone-stage.is-paused .motion-play { display: inline; }.hero-path { background: radial-gradient(ellipse at center,#f2d58f 0 22%,transparent 23%); bottom: -97px; height: 200px; left: 22%; opacity: .65; position: absolute; transform: rotate(-6deg); width: 70%; }@keyframes float-card { 0%,100% { transform: translateY(0) rotate(-13deg); }50% { transform: translateY(-15px) rotate(-8deg); }}@keyframes bob-bao { 0%,100% { transform: translateY(0) rotate(0); }50% { transform: translateY(-9px) rotate(2deg); }}@keyframes pulse-chip { 0%,100% { box-shadow: 0 0 0 0 rgba(125,79,193,.2); }50% { box-shadow: 0 0 0 9px rgba(125,79,193,0); }}
.promise-section,.characters-section,.collection-section,.download-section { padding: 112px 0; }.promise-section { background: var(--surface); }.section-heading { display: flex; gap: 46px; justify-content: space-between; margin-bottom: 48px; }.section-heading > div { flex: 1.15; }.section-heading > p { color: #50675c; flex: .85; font-size: 1.05rem; max-width: 44ch; padding-top: 29px; }.centered { align-items: center; flex-direction: column; margin-left: auto; margin-right: auto; max-width: 700px; text-align: center; }.centered h2 { max-width: 13ch; }.centered > p { padding: 0; }.journey-grid { display: grid; gap: 20px; grid-template-columns: repeat(3,1fr); }.journey-card { background: #f8f3e6; border: 1px solid #ece3cb; border-radius: 28px; min-height: 365px; overflow: hidden; padding: 24px; position: relative; }.journey-card:nth-child(2) { background: #e8f0dc; }.journey-card:nth-child(3) { background: #f7e5bd; }.step-number { color: var(--leaf); font-size: .76rem; font-weight: 900; letter-spacing: .12em; }.journey-card p { color: #597064; font-size: .95rem; max-width: 28ch; }.booster-shot,.flip-card,.memory-stamp { align-items: center; display: flex; height: 174px; justify-content: center; margin: 4px 0 17px; }.booster-shot { animation: booster-sway 5s ease-in-out infinite; filter: drop-shadow(0 14px 13px rgba(33,71,50,.22)); overflow: hidden; position: relative; transform: rotate(-4deg); width: 92px; }.booster-skia { height: 235px; max-width: none; position: absolute; top: -35px; transform: translateX(-10px); width: auto; }.booster-copy { align-items: center; bottom: 11px; color: #fff1bd; display: flex; flex-direction: column; left: 0; line-height: 1; position: absolute; right: 0; text-align: center; text-shadow: 0 1px 2px #0c2925; }.booster-copy strong { font-size: 1rem; letter-spacing: -.05em; }.booster-copy span { font-size: .56rem; font-weight: 850; letter-spacing: .09em; margin: 4px 0 7px; }.booster-copy em { background: #f4d178; border-radius: 5px; color: #163e37; font-size: .39rem; font-style: normal; font-weight: 900; letter-spacing: .04em; padding: 4px 6px; }.flip-card { perspective: 800px; }.flip-card-inner { animation: card-turn 6s ease-in-out infinite; height: 164px; position: relative; transform-style: preserve-3d; width: 123px; }.flip-card img { backface-visibility: hidden; border-radius: 11px; filter: drop-shadow(0 13px 13px rgba(33,71,50,.22)); height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }.flip-card .flip-front { transform: rotateY(180deg); }.memory-stamp { position: relative; }.memory-stamp::before { border: 2px dashed rgba(199,80,28,.48); border-radius: 50%; content: ""; height: 132px; position: absolute; transform: rotate(13deg); width: 132px; }.memory-stamp img { animation: stamp-pop 5.4s ease-in-out infinite; filter: drop-shadow(0 10px 8px rgba(112,59,27,.2)); height: 145px; object-fit: contain; position: relative; width: 145px; }@keyframes booster-sway { 0%,100% { transform: translateY(0) rotate(-4deg); }50% { transform: translateY(-9px) rotate(4deg); }}@keyframes card-turn { 0%,28% { transform: rotateY(0); }45%,72% { transform: rotateY(180deg); }88%,100% { transform: rotateY(360deg); }}@keyframes stamp-pop { 0%,100% { transform: scale(.92) rotate(-4deg); }18% { transform: scale(1.08) rotate(3deg); }30% { transform: scale(1) rotate(0); }}
.characters-section { background: linear-gradient(180deg,#e5efd3,#f8f2e4); overflow: hidden; }.characters-grid { display: grid; gap: 16px; grid-template-columns: repeat(5,1fr); }.character { align-items: flex-end; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 385px; overflow: hidden; padding: 16px; position: relative; transition: transform .25s ease,box-shadow .25s ease; }.character:hover { box-shadow: 0 18px 25px rgba(52,82,57,.15); transform: translateY(-8px); }.character img { align-self: center; height: 230px; object-fit: contain; transition: transform .35s ease; width: 100%; }.character:hover img { transform: scale(1.06) rotate(-2deg); }.character > div { background: rgba(255,253,247,.78); border-radius: 17px; padding: 11px 13px; position: relative; width: 100%; }.character span { color: var(--leaf); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.character h3 { font-size: 1.45rem; margin: 3px 0 5px; }.character p { color: #557064; font-size: .83rem; line-height: 1.35; margin: 0; }.bao { background: #d9ece3; }.pom { background: #f6dfaa; }.ron { background: #f0dbc2; }.gex { background: #d3e6ca; }.max { background: #d8cfbf; }
.collection-section { background: #163c35; color: white; overflow: hidden; }.collection-grid { align-items: center; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; }.collection-copy h2 { color: #fff9ea; }.collection-copy p { color: #d6e5d3; font-size: 1.08rem; max-width: 45ch; }.collection-copy .eyebrow { color: #9cd4b2; }.collection-art { height: 420px; position: relative; }.collection-card { filter: drop-shadow(0 24px 22px rgba(0,0,0,.35)); position: absolute; width: 225px; z-index: 2; }.collection-card.one { left: 9%; top: 25px; transform: rotate(-12deg); }.collection-card.two { right: 8%; top: 72px; transform: rotate(15deg); }.collection-halo { background: radial-gradient(circle,rgba(92,197,175,.38),transparent 65%); height: 400px; left: 50%; position: absolute; top: 8px; transform: translateX(-50%); width: 400px; }.leaf-list { list-style: none; margin: 28px 0 0; padding: 0; }.leaf-list li { border-top: 1px solid rgba(255,255,255,.18); color: #e5efdf; padding: 12px 0 12px 29px; position: relative; }.leaf-list li::before { color: #9cd4b2; content: "✦"; left: 2px; position: absolute; }
.download-section { background: var(--paper); }.download-card { align-items: center; background: linear-gradient(120deg,#e4f0d5,#fff4d5); border: 1px solid #d8e3c5; border-radius: 34px; display: grid; gap: 30px; grid-template-columns: 150px 1fr auto; overflow: hidden; padding: 36px 42px; position: relative; }.download-card::after { background: radial-gradient(circle,rgba(78,190,185,.18),transparent 65%); content: ""; height: 340px; position: absolute; right: -100px; top: -160px; width: 340px; }.download-icon { border-radius: 27px; box-shadow: 0 17px 28px rgba(63,89,59,.2); position: relative; width: 142px; z-index: 1; }.download-card h2 { font-size: clamp(2rem,3.2vw,3.2rem); margin-bottom: 8px; max-width: 14ch; }.download-card p:not(.eyebrow) { color: #587065; margin-bottom: 0; max-width: 48ch; }.download-actions { display: grid; gap: 10px; position: relative; z-index: 1; }.site-footer { background: #102f2a; color: #d7e4d5; padding: 46px 0; }.footer-grid { align-items: end; display: grid; gap: 30px; grid-template-columns: 1.3fr .8fr auto; }.footer-grid img { height: 50px; object-fit: contain; object-position: left; width: 145px; }.footer-grid p { color: #b5cab9; font-size: .88rem; margin: 11px 0 0; }.footer-grid > div:nth-child(2) { display: grid; gap: 7px; }.footer-grid a { color: #f3f5df; font-size: .9rem; font-weight: 750; }.footer-grid > p { text-align: right; white-space: nowrap; }
/* Styles partagés avec les pages légales. */.prose { padding: 48px 0 64px; }.prose h1 { font-size: clamp(2.5rem,6vw,4.3rem); max-width: 14ch; }.prose h2 { font-size: 1.35rem; max-width: none; }.lead { color: #52665a; font-size: clamp(1.05rem,2vw,1.22rem); max-width: 61ch; }.identity { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 7px 22px; grid-template-columns: max-content 1fr; margin: 24px 0; max-width: 690px; padding: 18px 20px; }.identity dt { color: var(--deep); font-weight: 850; }.identity dd { margin: 0; }.prose section { border-top: 1px solid var(--line); padding: 27px 0; }.prose ul { padding-left: 21px; }.prose li + li { margin-top: 8px; }.notice { background: #fff8e9; border: 1px solid #d5b079; border-radius: 18px; margin: 28px 0; padding: 21px; }.meta { color: #65786d; font-size: .9rem; }.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }.button { background: var(--leaf); border-radius: 13px; color: white; display: inline-block; font-weight: 850; padding: 12px 16px; text-decoration: none; }.button:hover { background: var(--deep); color: white; }
body:not(.landing) > header { background: linear-gradient(135deg,#e4ecd4,#f7f3e7 58%,#fbebc7); border-bottom: 1px solid var(--line); }.masthead { align-items: center; display: flex; gap: 24px; justify-content: space-between; min-height: 106px; padding: 20px 0; }.masthead .brand { align-items: center; color: var(--deep); display: inline-flex; font-size: 1.45rem; font-weight: 900; gap: 12px; letter-spacing: -.03em; }.paw { align-items: center; background: var(--leaf); border-radius: 50%; color: #fffdf7; display: inline-flex; font-size: 1.3rem; height: 44px; justify-content: center; transform: rotate(-8deg); width: 44px; }body:not(.landing) > footer { border-top: 1px solid var(--line); color: #62746a; font-size: .9rem; padding: 30px 0 46px; }body:not(.landing) > footer .shell { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; }
@media (max-width:950px) { .hero-grid,.collection-grid { grid-template-columns: 1fr; }.hero { min-height: auto; }.hero-grid { padding-top: 50px; }.hero-copy { text-align: center; }.hero-copy h1,.hero-copy p { margin-left: auto; margin-right: auto; }.store-actions { justify-content: center; }.hero-visual { min-height: 550px; order: -1; }.phone-stage { transform: scale(.88); transform-origin: center bottom; }.characters-grid { grid-template-columns: repeat(3,1fr); }.download-card { grid-template-columns: 130px 1fr; }.download-actions { display: flex; grid-column: 1 / -1; grid-row: 2; }.section-heading { gap: 22px; }.collection-art { margin: 0 auto; max-width: 520px; width: 100%; } }
@media (max-width:650px) { .shell { width: min(100% - 28px,1180px); }.nav-wrap { gap: 10px; min-height: 68px; }.brand img { height: 39px; width: 106px; }nav { display: none; }.nav-paw { height: 39px; width: 39px; }.hero-grid { gap: 0; padding: 34px 0 56px; }.hero-visual { min-height: 468px; }.phone-stage { transform: scale(.75); transform-origin: center bottom; }.hero-copy { padding-bottom: 0; }.hero-copy h1 { max-width: 9.5ch; }.promise-section,.characters-section,.collection-section,.download-section { padding: 76px 0; }.section-heading { display: block; margin-bottom: 30px; }.section-heading > p { font-size: 1rem; padding-top: 0; }.journey-grid { grid-template-columns: 1fr; }.journey-card { min-height: 305px; }.journey-card > img,.card-window { height: 125px; margin-bottom: 12px; }.characters-grid { grid-template-columns: repeat(2,1fr); }.character { min-height: 310px; padding: 10px; }.character img { height: 175px; }.character p { display: none; }.collection-grid { gap: 34px; }.collection-art { height: 315px; }.collection-card { width: 175px; }.collection-card.one { left: 4%; }.collection-card.two { right: 4%; }.collection-halo { height: 300px; width: 300px; }.download-card { border-radius: 26px; display: block; padding: 28px; text-align: center; }.download-icon { margin: 0 auto 21px; width: 125px; }.download-card h2 { margin-left: auto; margin-right: auto; }.download-actions { align-items: center; display: flex; flex-direction: column; margin-top: 24px; }.download-actions .store-button { width: 205px; }.footer-grid { grid-template-columns: 1fr; }.footer-grid > p { text-align: left; }.identity { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }.motion-control { display: none; } }

/* The source capture includes Skia's folded side gusset; the landing visual uses only the printed front face. */
.booster-shot { width: 84px; }