{"id":9302,"date":"2026-08-26T12:00:00","date_gmt":"2026-08-26T10:00:00","guid":{"rendered":"https:\/\/kokojungle.be\/?page_id=9302"},"modified":"2026-09-01T21:36:37","modified_gmt":"2026-09-01T19:36:37","slug":"koko-app","status":"publish","type":"page","link":"https:\/\/kokojungle.be\/nl\/koko-app\/","title":{"rendered":"Koko App"},"content":{"rendered":"\n\n\n\n<style>\n:root {\n  --bg:#0A100C; --bg2:#0E1710; --panel:#101B13;\n  --glass:rgba(236,242,232,.05); --glass2:rgba(236,242,232,.08); --gborder:rgba(236,242,232,.12);\n  --ink:#ECF1E8; --dim:#A7B5A7; --line:rgba(236,242,232,.1);\n  --glow:#8FD1A8; --glow-deep:#3F7A5A; --lamp:#E4BE7C;\n  --serif:\"Fraunces\", Georgia, serif; --sans:\"Inter\", -apple-system, \"Segoe UI\", sans-serif;\n  --r-lg:26px; --r-md:16px; --wrap:1180px; --pad:clamp(20px, 5vw, 56px);\n  --shadow:0 30px 70px -28px rgba(0,0,0,.7);\n}\n* { margin:0; padding:0; box-sizing:border-box; }\nhtml { scroll-behavior:smooth; scroll-padding-top:110px; }\nbody { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.65; font-size:16.5px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }\nimg { max-width:100%; display:block; }\na { color:inherit; text-decoration:none; }\n::selection { background:rgba(143,209,168,.35); color:#F4FAF1; }\n::-webkit-scrollbar { width:11px; }\n::-webkit-scrollbar-track { background:#0A100C; }\n::-webkit-scrollbar-thumb { background:#25342A; border-radius:8px; border:2px solid #0A100C; }\n::-webkit-scrollbar-thumb:hover { background:#3F7A5A; }\nh1, h2, h3 { font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:-.01em; }\nh1 em, h2 em { font-style:italic; font-weight:400; color:var(--glow); }\n.noise { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05; background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'\/%3E%3C\/svg%3E\"); }\n#fireflies { position:fixed; inset:0; z-index:1; pointer-events:none; }\nmain, .footer { position:relative; z-index:3; }\n.eyebrow { font-size:12.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--glow); display:flex; align-items:center; gap:12px; }\n.eyebrow::before { content:\"\"; width:34px; height:1.5px; background:var(--glow-deep); border-radius:2px; }\n.center .eyebrow, .section-head .eyebrow { justify-content:center; }\n.section-head .eyebrow::after { content:\"\"; width:34px; height:1.5px; background:var(--glow-deep); border-radius:2px; }\n.body-lg { font-size:clamp(16.5px, 1.35vw, 18.5px); color:var(--dim); font-weight:300; }\n.body-lg strong { font-weight:600; color:var(--ink); }\n.section-head { text-align:center; max-width:720px; margin:0 auto clamp(44px, 6vw, 72px); padding:0 var(--pad); }\n.section-head h2 { font-size:clamp(30px, 4vw, 46px); margin:18px 0 14px; }\n.btn { display:inline-flex; align-items:center; gap:9px; font-weight:500; font-size:15px; padding:14px 28px; border-radius:999px; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, background .3s, border-color .3s; }\n.btn:hover { transform:translateY(-2px); }\n.btn-solid { background:var(--glow-deep); box-shadow:0 0 0 1px rgba(143,209,168,.25), 0 12px 34px -12px rgba(63,122,90,.65); }\n.btn-solid, .btn-solid:hover { color:#F4FAF1 !important; }\n.btn-solid:hover { background:#4C8F6A; box-shadow:0 0 0 1px rgba(143,209,168,.4), 0 0 34px -6px rgba(143,209,168,.45); }\n.btn-glass { background:var(--glass); border:1px solid var(--gborder); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }\n.btn-glass, .btn-glass:hover { color:#DCE8DA !important; }\n.btn-glass:hover { border-color:rgba(143,209,168,.5); box-shadow:0 0 26px -8px rgba(143,209,168,.35); }\n.btn-lumen { background:var(--glow); }\n.btn-lumen, .btn-lumen:hover { color:#0A100C !important; }\n.btn-lumen:hover { box-shadow:0 0 34px -4px rgba(143,209,168,.6); }\n.reveal, .reveal-img { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }\n.reveal-img { transform:translateY(36px) scale(.985); }\n.in { opacity:1; transform:none; }\n.d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; } .d3 { transition-delay:.3s; } .d4 { transition-delay:.4s; }\n@media (prefers-reduced-motion: reduce) {\n  html { scroll-behavior:auto; }\n  .reveal, .reveal-img { opacity:1; transform:none; transition:none; }\n  .kenburns img { animation:none !important; }\n  .marquee-track { animation:none !important; }\n  #fireflies { display:none; }\n}\n\/* Nav pilule *\/\n.nav { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100; width:min(1060px, calc(100vw - 24px)); border-radius:999px; background:rgba(14,22,16,.5); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--gborder); box-shadow:0 18px 50px -20px rgba(0,0,0,.65); transition:background .4s, box-shadow .4s; }\n.nav.scrolled { background:rgba(10,16,12,.82); }\n.nav-inner { display:flex; align-items:center; gap:26px; padding:10px 20px; }\n.brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:19px; font-weight:600; color:#EAF2E6; }\n.brand-leaf { width:24px; height:24px; color:var(--glow); }\n.nav-links { display:flex; gap:26px; margin-left:auto; }\n.nav-links a { font-size:14px; font-weight:500; color:var(--dim); position:relative; padding:4px 0; transition:color .3s; }\n.nav-links a::after { content:\"\"; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--glow); border-radius:2px; transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.22,1,.36,1); }\n.nav-links a:hover { color:var(--ink); }\n.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }\n.nav-cta { padding:9px 18px; font-size:13.5px; }\n.nav-burger { display:none; }\n.nav-mobile { display:none; }\n@media (max-width: 900px) {\n  .nav-links, .nav-cta { display:none; }\n  .nav-burger { display:grid; gap:6px; margin-left:auto; background:none; border:none; cursor:pointer; padding:10px; }\n  .nav-burger span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .35s; }\n  .nav-burger.open span:first-child { transform:translateY(4px) rotate(45deg); }\n  .nav-burger.open span:last-child { transform:translateY(-4px) rotate(-45deg); }\n  .nav-mobile { position:absolute; top:calc(100% + 10px); left:0; right:0; display:grid; gap:4px; padding:16px 22px 20px; background:rgba(10,16,12,.96); backdrop-filter:blur(18px); border:1px solid var(--gborder); border-radius:24px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .4s; }\n  .nav-mobile.open { transform:none; opacity:1; pointer-events:auto; }\n  .nav-mobile a:not(.btn) { padding:12px 4px; font-size:16px; font-weight:500; border-bottom:1px solid var(--line); color:var(--ink); }\n  .nav-mobile .btn { margin-top:14px; justify-content:center; }\n}\n\/* Marquee *\/\n.marquee { overflow:hidden; border-block:1px solid var(--line); background:var(--bg2); padding:18px 0; }\n.marquee-track { display:flex; gap:0; width:max-content; animation:marq 36s linear infinite; }\n.marquee:hover .marquee-track { animation-play-state:paused; }\n.marquee-track span { font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#B9CBB6; white-space:nowrap; padding:0 28px; display:flex; align-items:center; gap:28px; }\n.marquee-track span::after { content:\"\u2726\"; color:var(--glow); font-size:11px; }\n@keyframes marq { to { transform:translateX(-50%); } }\n\/* Cartes verre + glow curseur *\/\n.gcard { position:relative; background:var(--glass); border:1px solid var(--gborder); border-radius:var(--r-lg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow:hidden; transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .5s, box-shadow .5s; }\n.gcard::before { content:\"\"; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(143,209,168,.12), transparent 65%); opacity:0; transition:opacity .4s; pointer-events:none; }\n.gcard:hover { transform:translateY(-6px); border-color:rgba(143,209,168,.35); box-shadow:0 24px 60px -24px rgba(0,0,0,.8), 0 0 40px -12px rgba(143,209,168,.2); }\n.gcard:hover::before { opacity:1; }\n\/* Sections communes *\/\nsection.pad { padding:clamp(72px, 10vw, 128px) 0; }\n.split { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px, 6vw, 84px); align-items:center; }\n.split h2 { font-size:clamp(28px, 3.6vw, 42px); margin:16px 0 14px; }\n.split-fig img { width:100%; aspect-ratio:.9; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow); }\n.kenburns { overflow:hidden; border-radius:var(--r-lg); }\n.kenburns img { animation:kb 16s ease-in-out infinite alternate; }\n@keyframes kb { from { transform:scale(1); } to { transform:scale(1.07); } }\n\/* CTA \/ bandes *\/\n.cta { padding:clamp(76px, 10vw, 118px) var(--pad); background:linear-gradient(160deg, #14251A, #0A100C); border-block:1px solid var(--line); text-align:center; }\n.cta h2 { font-size:clamp(30px, 4vw, 46px); color:#F2F7EE; }\n.cta p { margin:16px auto 32px; max-width:56ch; font-size:17px; font-weight:300; color:#C0D0BC; }\n.cta-actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }\n\/* Galerie *\/\n.gallery-row { max-width:1240px; margin:clamp(48px, 7vw, 80px) auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; align-items:end; }\n.gallery-row img { width:100%; aspect-ratio:.8; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow); transition:transform .6s cubic-bezier(.22,1,.36,1); }\n.gallery-row img:hover { transform:scale(1.04) rotate(0deg) !important; }\n.gallery-row img:nth-child(1) { transform:rotate(-2deg) translateY(6px); }\n.gallery-row img:nth-child(2) { transform:translateY(-10px); }\n.gallery-row img:nth-child(3) { transform:rotate(1.5deg) translateY(4px); }\n.gallery-row img:nth-child(4) { transform:rotate(-1deg) translateY(-6px); }\n@media (max-width:680px) { .gallery-row { grid-template-columns:repeat(2, 1fr); } }\n\/* Footer *\/\n.footer { background:var(--bg); border-top:1px solid var(--line); }\n.footer-inner { max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px, 4vw, 56px); padding:clamp(48px, 6vw, 72px) var(--pad) 36px; }\n.footer-brand p { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--dim); margin-top:14px; }\n.footer-col h4 { font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--glow); margin-bottom:12px; }\n.footer-col p { font-size:14.5px; color:var(--dim); line-height:1.9; }\n.footer-col a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }\n.footer-legal { text-align:center; font-size:12.5px; color:#6E7E6E; padding:0 var(--pad) 30px; }\n@media (max-width: 900px) { .split, .contact-grid { grid-template-columns:1fr; } .footer-inner { grid-template-columns:1fr 1fr; } }\n@media (max-width: 540px) { .footer-inner { grid-template-columns:1fr; gap:28px; } }\n\/* Hero home *\/\n.hero { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; }\n.hero-bg { position:absolute; inset:0; overflow:hidden; }\n.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; animation:kb 20s ease-in-out infinite alternate; }\n.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,12,.6) 0%, rgba(10,16,12,.22) 42%, rgba(10,16,12,.9) 86%, var(--bg) 100%); }\n.hero-content { position:relative; z-index:2; text-align:center; padding:130px var(--pad) 90px; max-width:860px; }\n.hero h1 { font-size:clamp(42px, 6.2vw, 88px); line-height:1.04; margin:20px 0 22px; color:#F4F9F0; }\n.hero h1 .hline { display:block; overflow:hidden; }\n.hero h1 .hline > span { display:inline-block; transform:translateY(110%); animation:lineup 1.1s cubic-bezier(.22,1,.36,1) forwards; }\n.hero h1 .hline:nth-child(2) > span { animation-delay:.15s; }\n@keyframes lineup { to { transform:translateY(0); } }\n.hero h1 em { animation:lampglow 4.5s ease-in-out infinite; }\n@keyframes lampglow { 0%, 100% { text-shadow:0 0 18px rgba(143,209,168,.25); } 50% { text-shadow:0 0 34px rgba(143,209,168,.6); } }\n@media (prefers-reduced-motion: reduce) { .hero h1 .hline > span { transform:none; animation:none; } .hero h1 em { animation:none; } .hero-bg img { animation:none; } }\n.hero .lead { font-size:clamp(16.5px, 1.4vw, 19px); font-weight:300; color:#C6D5C2; max-width:54ch; margin:0 auto; }\n.hero-actions { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:34px; }\n.hero-hint { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#9DB79D; display:flex; flex-direction:column; align-items:center; gap:10px; }\n.hero-hint::after { content:\"\"; width:1.5px; height:34px; background:linear-gradient(var(--glow), transparent); animation:drip 1.8s ease-in-out infinite; }\n@keyframes drip { 0% { transform:scaleY(.15); transform-origin:top; opacity:.4; } 55% { transform:scaleY(1); transform-origin:top; opacity:1; } 100% { transform:scaleY(.15); transform-origin:bottom; opacity:.3; } }\n\/* Concept points *\/\n.points { list-style:none; margin-top:34px; display:grid; gap:22px; }\n.points li { display:flex; gap:18px; }\n.picon { flex-shrink:0; width:46px; height:46px; border-radius:14px; background:var(--glass2); border:1px solid var(--gborder); color:var(--glow); display:grid; place-items:center; }\n.picon svg { width:22px; height:22px; }\n.points h3 { font-size:18px; margin-bottom:4px; }\n.points p { font-size:14.5px; color:var(--dim); font-weight:300; }\n.concept-visual { position:relative; }\n.concept-visual .main { width:88%; aspect-ratio:.82; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow); }\n.concept-inset { position:absolute; right:0; bottom:-44px; width:46%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-md); border:5px solid var(--bg); box-shadow:var(--shadow); }\n\/* D\u00e9cors *\/\n.decors-grid { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }\n.decor-card { position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:.74; box-shadow:var(--shadow); }\n.decor-card img { width:100%; height:100%; object-fit:cover; filter:grayscale(.45) brightness(.9); transition:transform .9s cubic-bezier(.22,1,.36,1), filter .7s; }\n.decor-card:hover img { transform:scale(1.06); filter:grayscale(0) brightness(1); }\n.decor-label { position:absolute; inset:auto 0 0; padding:44px 20px 18px; background:linear-gradient(transparent, rgba(4,9,5,.88)); color:#F0F6EC; }\n.decor-label h3 { font-size:20px; margin-bottom:4px; }\n.decor-label p { font-size:13px; font-weight:300; color:#C2D2BE; opacity:0; max-height:0; transition:opacity .5s, max-height .5s; line-height:1.45; }\n.decor-card:hover .decor-label p, .decor-card:focus-within .decor-label p { opacity:1; max-height:80px; }\n@media (hover:none) { .decor-label p { opacity:1; max-height:none; } .decor-card img { filter:none; } }\n@media (max-width:1020px) { .decors-grid { grid-template-columns:repeat(2, 1fr); } }\n@media (max-width:540px) { .decors-grid { grid-template-columns:1fr; } .decor-card { aspect-ratio:1; } }\n\/* Mod\u00e8les *\/\n.models-grid { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 2.6vw, 32px); }\n.model-card { display:flex; flex-direction:column; }\n.model-flag { position:absolute; top:16px; left:16px; z-index:2; background:rgba(10,16,12,.7); backdrop-filter:blur(8px); border:1px solid rgba(143,209,168,.4); color:var(--glow); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:999px; }\n.model-img { aspect-ratio:1.04; overflow:hidden; }\n.model-img img { width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,1,.36,1); }\n.model-card:hover .model-img img { transform:scale(1.05); }\n.model-body { padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; position:relative; z-index:1; }\n.model-body h3 { font-size:23px; color:#F0F6EC; }\n.model-dim { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#8FA08F; margin:5px 0 12px; }\n.model-desc { font-size:14.5px; color:var(--dim); font-weight:300; flex:1; }\n.model-price { font-family:var(--serif); font-size:32px; font-weight:500; color:var(--glow); margin:18px 0 18px; text-shadow:0 0 24px rgba(143,209,168,.3); }\n.model-price span { font-family:var(--sans); font-size:13px; font-weight:500; color:#8FA08F; text-shadow:none; }\n.models-note { text-align:center; font-size:13px; color:#8FA08F; margin-top:34px; padding:0 var(--pad); }\n@media (max-width:1020px) { .models-grid { grid-template-columns:1fr; max-width:520px; } }\n\/* Lampe *\/\n.lamp { position:relative; overflow:hidden; background:var(--panel); border-block:1px solid var(--line); }\n.lamp::before { content:\"\"; position:absolute; right:-160px; top:-160px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(228,190,124,.14), transparent 68%); }\n.lamp-points { list-style:none; margin-top:26px; display:grid; gap:12px; }\n.lamp-points li { display:flex; gap:12px; font-size:15px; color:#D5E2D0; }\n.lamp-points li::before { content:\"\u2713\"; color:var(--lamp); font-weight:600; }\n.lamp-rings { margin-top:32px; padding:22px 26px; background:var(--glass); border:1px solid var(--gborder); border-radius:var(--r-md); backdrop-filter:blur(10px); }\n.lamp-rings p { font-size:14.5px; color:#D5E2D0; }\n.lamp-rings strong { color:#F2F7EE; }\n.rings { display:flex; gap:10px; margin-top:14px; }\n.ring { width:30px; height:30px; border-radius:50%; background:var(--c); border:3px solid rgba(236,242,232,.2); transition:transform .3s, box-shadow .3s; }\n.ring:hover { transform:scale(1.2); box-shadow:0 0 18px -2px var(--c); }\n.lamp-visual { display:grid; grid-template-columns:1fr 1fr; gap:16px; }\n.lamp-visual img { width:100%; aspect-ratio:.8; object-fit:cover; border-radius:var(--r-md); box-shadow:0 24px 50px -20px rgba(0,0,0,.7); }\n.lamp-visual img:first-child { margin-top:44px; }\n@media (max-width:540px) { .lamp-visual img:first-child { margin-top:0; } }\n\/* Sous-pages : hero *\/\n.phero { max-width:var(--wrap); margin:0 auto; padding:clamp(140px, 18vh, 180px) var(--pad) clamp(48px, 6vw, 76px); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px, 5vw, 72px); align-items:center; }\n.phero.solo { grid-template-columns:1fr; max-width:880px; }\n.phero h1 { font-size:clamp(36px, 4.6vw, 60px); line-height:1.06; margin:16px 0 18px; color:#F2F7EE; }\n.phero .lead { font-size:clamp(16.5px, 1.4vw, 19px); color:var(--dim); font-weight:300; max-width:54ch; }\n.phero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px; }\n.phero-fig img { width:100%; aspect-ratio:.92; object-fit:cover; border-radius:var(--r-lg) 110px var(--r-lg) var(--r-lg); box-shadow:var(--shadow); }\n@media (max-width:900px) { .phero { grid-template-columns:1fr; } .phero-fig { order:-1; } }\n\/* Cartes num\u00e9rot\u00e9es *\/\n.cards { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }\n.cards .gcard { padding:28px 30px 30px; }\n.cards .num { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--glow); display:block; margin-bottom:12px; }\n.cards h3 { font-size:19px; margin-bottom:8px; color:#F0F6EC; }\n.cards p { font-size:14.5px; color:var(--dim); font-weight:300; }\n@media (max-width:680px) { .cards { grid-template-columns:1fr; } }\n\/* \u00c9tapes *\/\n.steps { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(22px, 3vw, 40px); }\n.step .num { font-family:var(--serif); font-style:italic; font-size:26px; color:var(--lamp); }\n.step h3 { font-size:19px; margin:8px 0 6px; color:#F0F6EC; }\n.step p { font-size:14.5px; color:var(--dim); font-weight:300; }\n@media (max-width:680px) { .steps { grid-template-columns:1fr; } }\n\/* Entretien *\/\n.care { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }\n.care .gcard { display:flex; gap:16px; padding:22px 24px; border-radius:var(--r-md); }\n.care .num { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--glow); flex-shrink:0; padding-top:2px; }\n.care h3 { font-size:17px; margin-bottom:4px; color:#F0F6EC; }\n.care p { font-size:14px; color:var(--dim); font-weight:300; }\n@media (max-width:800px) { .care { grid-template-columns:1fr; } }\n.callout { max-width:820px; margin:clamp(36px, 5vw, 56px) auto 0; padding:26px 30px; background:rgba(228,190,124,.07); border-left:3px solid var(--lamp); border-radius:0 var(--r-md) var(--r-md) 0; }\n.callout h3 { font-size:18px; margin-bottom:6px; color:#F2E9D4; }\n.callout p { font-size:15px; color:#CDBFA2; font-weight:300; }\n\/* Contact *\/\n.contact-grid { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px, 5vw, 64px); align-items:start; }\n.form-card { padding:clamp(26px, 3.4vw, 44px); }\n.form-card h2 { font-size:clamp(24px, 3vw, 32px); margin-bottom:18px; color:#F0F6EC; }\n.form-card .wpforms-container label, .form-card .wpforms-container .wpforms-field-label, .form-card .wpforms-container .wpforms-field-sublabel { color:#C6D5C2 !important; }\n.form-card .wpforms-container input[type=text], .form-card .wpforms-container input[type=email], .form-card .wpforms-container select, .form-card .wpforms-container textarea { border-radius:12px !important; border:1px solid var(--gborder) !important; background:rgba(236,242,232,.06) !important; color:#ECF1E8 !important; padding:12px 14px !important; font-family:var(--sans) !important; }\n.form-card .wpforms-container button[type=submit] { background:var(--glow-deep) !important; color:#F4FAF1 !important; border:none !important; border-radius:999px !important; padding:14px 30px !important; font-weight:500 !important; }\n.info-stack { display:grid; gap:16px; }\n.info-block { padding:24px 26px; border-radius:var(--r-md); }\n.info-block h3 { font-size:18px; margin-bottom:8px; color:#F0F6EC; }\n.info-block p { font-size:14.5px; color:var(--dim); font-weight:300; }\n.info-block a { color:var(--glow); font-weight:500; }\n.info-block a:hover { text-decoration:underline; text-underline-offset:3px; }\n.info-block .btn { margin-top:14px; }\n.shops { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }\n.shops .gcard { padding:26px 28px; border-radius:var(--r-md); }\n.shops h3 { font-size:19px; margin-bottom:4px; color:#F0F6EC; }\n.shops p { font-size:14.5px; color:var(--dim); font-weight:300; }\n@media (max-width:680px) { .shops { grid-template-columns:1fr; } }\n<\/style>\n<div class=\"noise\" aria-hidden=\"true\"><\/div>\n<canvas id=\"fireflies\" aria-hidden=\"true\"><\/canvas>\n<header class=\"nav\" id=\"kjnav\">\n  <div class=\"nav-inner\">\n    <a href=\"https:\/\/kokojungle.be\/\" class=\"brand\" aria-label=\"Koko Jungle \u2014 accueil\"><svg class=\"brand-leaf\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 21C12 21 4 16.5 4 9.5C4 5.4 7.1 3 12 3C16.9 3 20 5.4 20 9.5C20 16.5 12 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><path d=\"M12 21V7M12 11L8.5 8.5M12 14.5L15.5 12\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><\/svg><span>Koko&nbsp;Jungle<\/span><\/a>\n    <nav class=\"nav-links\" aria-label=\"Navigation principale\">\n      <a href=\"https:\/\/kokojungle.be\/#concept\">Le concept<\/a>\n      <a href=\"https:\/\/kokojungle.be\/#modeles\">Mod\u00e8les<\/a>\n      <a href=\"https:\/\/kokojungle.be\/#lampe\">Lumi\u00e8re<\/a>\n      <a href=\"https:\/\/kokojungle.be\/koko-app\/\">Koko App<\/a>\n      <a href=\"https:\/\/kokojungle.be\/entretenir-son-koko\/\">Entretien<\/a>\n    <\/nav>\n    <div class=\"kj-lang\" role=\"group\" aria-label=\"Langue du site\"><a href=\"\/koko-app\/\" hreflang=\"fr\" lang=\"fr\">FR<\/a><a href=\"\/nl\/koko-app\/\" hreflang=\"nl\" lang=\"nl\">NL<\/a><\/div><a class=\"btn btn-solid nav-cta\" href=\"https:\/\/kokojungle.be\/categorie-produit\/terrariums\/\">Commander un Koko<\/a>\n    <button class=\"nav-burger\" id=\"kjburger\" aria-label=\"Ouvrir le menu\" aria-expanded=\"false\"><span><\/span><span><\/span><\/button>\n  <\/div>\n  <nav class=\"nav-mobile\" id=\"kjnavmobile\" aria-label=\"Menu mobile\">\n    <a href=\"https:\/\/kokojungle.be\/#concept\">Le concept<\/a>\n      <a href=\"https:\/\/kokojungle.be\/#modeles\">Mod\u00e8les<\/a>\n      <a href=\"https:\/\/kokojungle.be\/#lampe\">Lumi\u00e8re<\/a>\n      <a href=\"https:\/\/kokojungle.be\/koko-app\/\">Koko App<\/a>\n      <a href=\"https:\/\/kokojungle.be\/entretenir-son-koko\/\">Entretien<\/a>\n    <a class=\"btn btn-solid\" href=\"https:\/\/kokojungle.be\/categorie-produit\/terrariums\/\">Commander un Koko<\/a>\n  <div class=\"kj-lang\" role=\"group\" aria-label=\"Langue du site\"><a href=\"\/koko-app\/\" hreflang=\"fr\" lang=\"fr\">FR<\/a><a href=\"\/nl\/koko-app\/\" hreflang=\"nl\" lang=\"nl\">NL<\/a><\/div><\/nav>\n<\/header>\n<main>\n<section class=\"phero\">\n  <div>\n    <p class=\"eyebrow reveal\">Koko App \u00b7 KokoBot<\/p>\n    <h1 class=\"reveal d1\">Votre terrarium, enfin <em>facile \u00e0 comprendre<\/em>.<\/h1>\n    <p class=\"lead reveal d2\">Toutes les informations utiles sur votre Koko, r\u00e9unies au m\u00eame endroit : ses plantes, ses conseils d&rsquo;entretien \u2014 et un assistant qui r\u00e9pond \u00e0 vos questions.<\/p>\n    <div class=\"phero-actions reveal d3\">\n      <a class=\"btn btn-lumen\" href=\"https:\/\/app.kokojungle.be\/\">Acc\u00e9der \u00e0 Koko App<\/a>\n      <a class=\"btn btn-glass\" href=\"\/#fonctionnement\">Comment \u00e7a fonctionne<\/a>\n    <\/div>\n  <\/div>\n  <figure class=\"kjph reveal-img d2\">\n<span class=\"kjph-halo\" aria-hidden=\"true\"><\/span>\n<div class=\"kjph-device\">\n<span class=\"kjph-btn kjph-btn--vol\" aria-hidden=\"true\"><\/span>\n<span class=\"kjph-btn kjph-btn--pow\" aria-hidden=\"true\"><\/span>\n<div class=\"kjph-screen\">\n<img src=\"https:\/\/kokojungle.be\/wp-content\/uploads\/2026\/08\/koko-app-screen.webp\" width=\"760\" height=\"1520\" alt=\"Koko App ouverte sur la fiche \u00ab Koko de Tom \u00bb : \u00e2ge du terrarium, nombre d\u2019esp\u00e8ces, rappel d\u2019entretien du mois et acc\u00e8s au KokoBot.\" fetchpriority=\"high\" decoding=\"async\">\n<span class=\"kjph-island\" aria-hidden=\"true\"><\/span>\n<span class=\"kjph-sheen\" aria-hidden=\"true\"><\/span>\n<\/div>\n<\/div>\n<figcaption class=\"kjph-cap\">Votre Koko, sa fiche et son assistant \u2014 dans votre poche.<\/figcaption>\n<\/figure>\n<\/section>\n\n<section class=\"pad\">\n  <div class=\"section-head\">\n    <p class=\"eyebrow reveal\">Dans l&rsquo;app<\/p>\n    <h2 class=\"reveal d1\">Ce que vous <em>retrouvez<\/em> dans Koko App.<\/h2>\n  <\/div>\n  <div class=\"cards\">\n    <article class=\"gcard reveal\"><span class=\"num\">01<\/span><h3>Les plantes de votre composition<\/h3><p>Chaque plante de votre Koko, avec son nom, une photo, une courte explication et quelques conseils simples pour mieux la comprendre.<\/p><\/article>\n    <article class=\"gcard reveal d1\"><span class=\"num\">02<\/span><h3>Les conseils d&rsquo;entretien<\/h3><p>Les bons gestes pour votre mod\u00e8le, au bon moment \u2014 un suivi tr\u00e8s simple, environ deux minutes par semaine.<\/p><\/article>\n    <article class=\"gcard reveal d2\"><span class=\"num\">03<\/span><h3>KokoBot<\/h3><p>Une question ? Posez-la directement dans l&rsquo;app : KokoBot vous r\u00e9pond avec des conseils clairs, adapt\u00e9s \u00e0 votre terrarium.<\/p><\/article>\n    <article class=\"gcard reveal d3\"><span class=\"num\">04<\/span><h3>L&rsquo;analyse photo<\/h3><p>Envoyez une simple photo de votre Koko : KokoBot identifie les plantes, rep\u00e8re ce qu&rsquo;il faut surveiller et vous guide.<\/p><\/article>\n  <\/div>\n<\/section>\n\n<section class=\"pad\" id=\"fonctionnement\" style=\"background:var(--bg2); border-block:1px solid var(--line);\">\n  <div class=\"section-head\">\n    <p class=\"eyebrow reveal\">Trois gestes<\/p>\n    <h2 class=\"reveal d1\">Comment \u00e7a <em>fonctionne<\/em> ?<\/h2>\n  <\/div>\n  <div class=\"steps\">\n    <div class=\"step reveal\"><span class=\"num\">01<\/span><h3>Scannez le QR code<\/h3><p>Il se trouve sous votre terrarium en verre, ou sur la cl\u00e9 QR fournie avec votre Koko.<\/p><\/div>\n    <div class=\"step reveal d1\"><span class=\"num\">02<\/span><h3>Connectez-vous \u00e0 l&rsquo;app<\/h3><p>Le QR code vous m\u00e8ne directement \u00e0 Koko App, dans votre navigateur.<\/p><\/div>\n    <div class=\"step reveal d2\"><span class=\"num\">03<\/span><h3>Retrouvez votre Koko<\/h3><p>Sa composition, ses plantes, ses conseils d&rsquo;entretien \u2014 tout est l\u00e0, propre \u00e0 votre terrarium.<\/p><\/div>\n  <\/div>\n<\/section>\n\n<section class=\"cta\">\n  <h2 class=\"reveal\">Un accompagnement pens\u00e9 pour <em>durer<\/em>.<\/h2>\n  <p class=\"reveal d1\">L&rsquo;app vous suit aussi longtemps que votre jungle vit. Et si une question reste sans r\u00e9ponse, nous sommes \u00e0 un message.<\/p>\n  <div class=\"cta-actions reveal d2\">\n    <a class=\"btn btn-lumen\" href=\"https:\/\/app.kokojungle.be\/\">Acc\u00e9der \u00e0 Koko App<\/a>\n    <a class=\"btn btn-glass\" href=\"https:\/\/kokojungle.be\/#modeles\">D\u00e9couvrir les mod\u00e8les<\/a>\n  <\/div>\n<\/section>\n<\/main>\n<footer class=\"footer\">\n  <div class=\"footer-inner\">\n    <div class=\"footer-brand\">\n      <a href=\"https:\/\/kokojungle.be\/\" class=\"brand\"><svg class=\"brand-leaf\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 21C12 21 4 16.5 4 9.5C4 5.4 7.1 3 12 3C16.9 3 20 5.4 20 9.5C20 16.5 12 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><path d=\"M12 21V7M12 11L8.5 8.5M12 14.5L15.5 12\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><\/svg><span>Koko&nbsp;Jungle<\/span><\/a>\n      <p>Laissez la nature illuminer votre espace.<\/p>\n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Adresse<\/h4>\n      <p>57 avenue Baron d&rsquo;Huart<br>1150 Bruxelles, Belgique<\/p>\n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Contact<\/h4>\n      <p><a href=\"mailto:hello@kokojungle.be\">hello@kokojungle.be<\/a><br><a href=\"https:\/\/www.instagram.com\/kokojungle.be\/\">Instagram<\/a><br><a href=\"https:\/\/kokojungle.be\/contact2\/\">Nous \u00e9crire<\/a><\/p>\n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Explorer<\/h4>\n      <p><a href=\"https:\/\/kokojungle.be\/#modeles\">Les mod\u00e8les<\/a><br><a href=\"https:\/\/kokojungle.be\/koko-app\/\">Koko App<\/a><br><a href=\"https:\/\/kokojungle.be\/entretenir-son-koko\/\">Entretenir son Koko<\/a><\/p>\n    <\/div>\n  <\/div>\n  <p class=\"footer-legal\">\u00a9 Koko Jungle \u2014 Bruxelles. Tous droits r\u00e9serv\u00e9s.<\/p>\n<\/footer>\n<script>\n(function(){\nvar kjN = document.getElementById('kjnav');\naddEventListener('scroll', function(){ kjN.classList.toggle('scrolled', scrollY > 24); }, {passive:true});\nvar kjB = document.getElementById('kjburger');\nvar kjM = document.getElementById('kjnavmobile');\nkjB.addEventListener('click', function(){\n  var o = kjM.classList.toggle('open');\n  kjB.classList.toggle('open', o); kjB.setAttribute('aria-expanded', o);\n});\nkjM.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', function(){\n  kjM.classList.remove('open'); kjB.classList.remove('open'); kjB.setAttribute('aria-expanded','false');\n}); });\nvar kjIO = new IntersectionObserver(function(es){\n  es.forEach(function(e){ if (e.isIntersecting || e.boundingClientRect.top < 0) { e.target.classList.add('in'); kjIO.unobserve(e.target); } });\n}, {threshold:0.12, rootMargin:'0px 0px -40px 0px'});\ndocument.querySelectorAll('.reveal, .reveal-img').forEach(function(el){ kjIO.observe(el); });\naddEventListener('scroll', function(){\n  document.querySelectorAll('.reveal:not(.in), .reveal-img:not(.in)').forEach(function(el){\n    if (el.getBoundingClientRect().top < innerHeight) el.classList.add('in');\n  });\n}, {passive:true});\ndocument.querySelectorAll('.gcard').forEach(function(card){\n  card.addEventListener('mousemove', function(e){\n    var r = card.getBoundingClientRect();\n    card.style.setProperty('--mx', (e.clientX - r.left) + 'px');\n    card.style.setProperty('--my', (e.clientY - r.top) + 'px');\n  });\n});\nif (!matchMedia('(prefers-reduced-motion: reduce)').matches) {\n  var cv = document.getElementById('fireflies');\n  if (cv) {\n    var ctx = cv.getContext('2d'), W, H, flies = [];\n    function size(){ W = cv.width = innerWidth; H = cv.height = innerHeight; }\n    size(); addEventListener('resize', size);\n    var N = innerWidth < 700 ? 14 : 26;\n    for (var i = 0; i < N; i++) flies.push({\n      x: Math.random()*innerWidth, y: Math.random()*innerHeight,\n      r: 1 + Math.random()*1.8, a: Math.random()*Math.PI*2,\n      s: .12 + Math.random()*.3, ph: Math.random()*Math.PI*2, tw: 1.2 + Math.random()*2.4\n    });\n    var t = 0;\n    (function loop(){\n      t += .016; ctx.clearRect(0, 0, W, H);\n      flies.forEach(function(f){\n        f.a += (Math.random()-.5)*.08;\n        f.x += Math.cos(f.a)*f.s; f.y += Math.sin(f.a)*f.s*.7;\n        if (f.x < -20) f.x = W+20; if (f.x > W+20) f.x = -20;\n        if (f.y < -20) f.y = H+20; if (f.y > H+20) f.y = -20;\n        var glow = .25 + .75*Math.abs(Math.sin(t\/f.tw + f.ph));\n        var g = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, f.r*7);\n        g.addColorStop(0, 'rgba(190,235,190,' + (.7*glow) + ')');\n        g.addColorStop(.4, 'rgba(143,209,168,' + (.22*glow) + ')');\n        g.addColorStop(1, 'rgba(143,209,168,0)');\n        ctx.fillStyle = g;\n        ctx.beginPath(); ctx.arc(f.x, f.y, f.r*7, 0, 7); ctx.fill();\n      });\n      requestAnimationFrame(loop);\n    })();\n  }\n}\n})();\n<\/script>\n\n\n<style>\n:root { --bg:#060707; --bg2:#0B0C0B; --panel:#0D0F0D; --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.08); --gborder:rgba(255,255,255,.11); --ink:#F2F3F0; --dim:#B7BFB5; --line:rgba(255,255,255,.09); }\nbody { background:#060707; }\n#fireflies { display:none !important; }\n.noise { opacity:.03; }\n.marquee { background:#0B0C0B; }\n.marquee-track span { color:#C9D2C6; }\n.cta { background:linear-gradient(160deg, #0D120E, #060707); }\n.lamp { background:#0C0E0C; }\n.nav { background:rgba(10,11,10,.55); }\n.nav.scrolled { background:rgba(6,7,7,.85); }\n.nav-mobile { background:rgba(6,7,7,.96); }\n.model-dim, .models-note { color:#A8B0A6; }\n.footer-legal { color:#8B948A; }\n.step p, .cards p, .care p, .points p, .info-block p, .shops p { color:#B7BFB5; }\n.cta p { color:#C6D0C2; }\n<\/style>\n\n\n\n\n<style>\/* KJTYPO2 \u2014 typo harmonisee sans droit (Outfit + Work Sans, pairing UI\/UX Pro Max) + accents unifies *\/\n:root{--serif:\"Outfit\",\"Inter\",-apple-system,sans-serif;--sans:\"Work Sans\",\"Inter\",-apple-system,\"Segoe UI\",sans-serif;--lamp:#8FD1A8;}\nbody{font-family:var(--sans) !important;}\nbutton,input,textarea,select,.btn-primary,.btn-ghost,a.btn{font-family:var(--sans) !important;}\nh1,h2,h3,h4,h5,h6{font-family:var(--serif) !important;}\nh1,h2,h3{font-style:normal !important;color:#F2F3F0 !important;}\nh1,h2{font-weight:700 !important;letter-spacing:-.02em;line-height:1.08;}\nh3{font-weight:600 !important;letter-spacing:-.01em;line-height:1.3;}\nh1 em,h2 em,h3 em{font-style:normal !important;font-weight:700 !important;color:#8FD1A8 !important;}\nem{font-style:normal;}\np em{font-weight:500;color:#D5E2D0;}\n.hero h1{font-size:clamp(40px,5.8vw,74px);letter-spacing:-.025em;line-height:1.05;}\n.phero h1{font-size:clamp(34px,4.4vw,56px);}\n.section-head h2,.cta h2{font-size:clamp(28px,3.6vw,42px);}\n.split h2{font-size:clamp(26px,3.3vw,38px);}\n.cta h2{color:#F2F7EE !important;}\n.step h3,.cards h3,.care h3,.info-block h3,.shops h3,.points h3,.model-body h3,.decor-label h3{font-size:19px;color:#F0F6EC !important;}\n.form-card h2{color:#F0F6EC !important;}\n.body-lg,.hero .lead,.phero .lead{font-weight:400;}\n.eyebrow{letter-spacing:.14em;color:#8FD1A8 !important;}\n.marquee-track span{letter-spacing:.14em;}\n.hero-hint{letter-spacing:.18em;}\n.footer-col h4{letter-spacing:.13em;font-weight:600;}\n.model-dim{letter-spacing:.1em;}\n.cards .num,.step .num,.care .num{font-family:var(--serif) !important;font-style:normal !important;font-weight:600;color:#8FD1A8 !important;}\n.step .num{font-size:22px;}\n.model-price{font-family:var(--serif) !important;font-weight:600;font-size:30px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}\n.brand{font-family:var(--serif) !important;font-weight:700;letter-spacing:-.01em;}\n.footer-brand p{font-style:normal;font-weight:400;}\n.callout{background:rgba(143,209,168,.06);border-left-color:#8FD1A8;}\n.lamp::before{background:radial-gradient(circle,rgba(143,209,168,.10),transparent 68%);}\n.lamp-points li::before{color:#8FD1A8;}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Koko&nbsp;Jungle Le concept Mod\u00e8les Lumi\u00e8re Koko App Entretien FRNL Commander un Koko Le concept Mod\u00e8les Lumi\u00e8re Koko App Entretien Commander un Koko FRNL Koko App \u00b7 KokoBot Votre terrarium, enfin facile \u00e0 comprendre. Toutes les informations utiles sur votre Koko, r\u00e9unies au m\u00eame endroit : ses plantes, ses conseils d&rsquo;entretien \u2014 et un assistant qui [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"iawp_total_views":10,"footnotes":""},"class_list":["post-9302","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/pages\/9302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/comments?post=9302"}],"version-history":[{"count":10,"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/pages\/9302\/revisions"}],"predecessor-version":[{"id":9612,"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/pages\/9302\/revisions\/9612"}],"wp:attachment":[{"href":"https:\/\/kokojungle.be\/nl\/wp-json\/wp\/v2\/media?parent=9302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}