/* Orbe Kids — home page (owner's request, 26/09/2026).
   Starry hero, living collection portals, page per collection, and sections revealed on scroll.
   Every motion here is gentle and slow, and stops with "Effets réduits" (body.effects-off) or prefers-reduced-motion. */
.home-v2{--leo:#f1c875;--free:#7fd8b0;--tales:#b9a2ff}
.portal-voyages,.collection-page.portal-voyages{--accent:var(--leo,#f1c875)}
.portal-independent,.collection-page.portal-independent{--accent:#7fd8b0}
.portal-other-side,.collection-page.portal-other-side{--accent:#b9a2ff}
.portal-enquetes,.collection-page.portal-enquetes{--accent:#ff9f6b}
.portal-lumi,.collection-page.portal-lumi{--accent:#a6e86b}
.portal-sciences,.collection-page.portal-sciences{--accent:#6fd6ff}

/* 1. Hero: a night sky with twinkling stars, a title that appears word by word, a shimmering "horizon". */
.home-top{position:relative;overflow:hidden;isolation:isolate}
.home-hero{position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:20px 20px 56px}
.home-top .sky{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 55% at 50% 100%,#1a4a6e55,transparent 70%),radial-gradient(ellipse 45% 35% at 80% 10%,#f1c87512,transparent 70%)}
.home-top .sky-layer{position:absolute;inset:-6%;will-change:transform}
.home-top .sky-layer.far{animation:sky-drift 90s ease-in-out infinite alternate}
.home-top .sky-layer.near{animation:sky-drift-near 55s ease-in-out infinite alternate}
@keyframes sky-drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-2.5%,1.5%,0) rotate(1.2deg)}}
@keyframes sky-drift-near{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5%,2.5%,0)}}
.home-top .sky i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff6dc;box-shadow:0 0 6px #f1c87580;opacity:.25;animation:star-twinkle var(--t) ease-in-out var(--d) infinite}
.home-top .sky i.bright{box-shadow:0 0 10px 1px #f1c875aa,0 0 22px #fff6dc40;animation-name:star-twinkle-bright}
@keyframes star-twinkle{0%,100%{opacity:.18;transform:scale(.8)}50%{opacity:.95;transform:scale(1.15)}}
@keyframes star-twinkle-bright{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.5)}}
/* Shooting stars: a thin trail with a glowing head, each on its own path, angle and rhythm (about one every 2-3 s). */
.shooting-star{position:absolute;top:var(--y);left:var(--x);width:160px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff6dc99 70%,#fff);opacity:0;transform:rotate(var(--a));transform-origin:right center;animation:shooting var(--t) ease-in var(--d) infinite}
.shooting-star::after{content:'';position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #fff6dc,0 0 16px 4px #f1c87566}
@keyframes shooting{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scaleX(.3)}2%{opacity:1}8%{opacity:0;transform:rotate(var(--a)) translateX(58vw) scaleX(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(58vw)}}
.home-hero-copy{max-width:820px}
.home-hero h1{font:400 clamp(2.4rem,6vw,4.6rem)/1.08 Georgia,serif;margin:14px 0 18px;letter-spacing:-.01em}
.home-hero .word{display:inline-block;opacity:0;transform:translateY(14px);animation:word-in .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--w) * .12s)}
@keyframes word-in{to{opacity:1;transform:none}}
.home-hero .shimmer{font-style:italic;color:transparent;background:linear-gradient(100deg,#f1c875 0%,#f1c875 40%,#fff3cf 50%,#f1c875 60%,#f1c875 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:word-in .9s cubic-bezier(.2,.7,.2,1) forwards,shimmer 6s ease-in-out 2s infinite;animation-delay:calc(.25s + var(--w) * .12s),2s}
@keyframes shimmer{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
.home-subtitle{color:#bfcddd;font-size:1.08rem;margin:0 auto;max-width:520px;opacity:0;animation:word-in 1s ease 1.4s forwards}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #f1c87555;background:#06182a80;cursor:pointer;display:grid;place-items:center;animation:cue-breathe 2.8s ease-in-out infinite}
.scroll-cue span{width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:translateY(-2px) rotate(45deg)}
.scroll-cue:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@keyframes cue-breathe{0%,100%{transform:translate(-50%,0);opacity:.6}50%{transform:translate(-50%,8px);opacity:1}}

/* 2. Collections (owner's request, 09/10/2026): wide cards, their first books fanned out, two per row. The first card,
   and an odd last one, span the whole row, so 4, 5, 6 or 9 collections all fall into place; an age picker filters them. */
.home-collections{margin:0;padding-top:22px;position:relative;z-index:1;scroll-margin-top:90px}
.collections-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px;margin-bottom:24px}
.collections-head h2{font:400 clamp(1.8rem,3.4vw,2.5rem)/1.1 Georgia,serif;margin:6px 0 0}
.age-picker{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.age-picker>span{color:#8ba2b9;font-size:.85rem;margin-right:6px}
.age-picker button{min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff08;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:background .3s,border-color .3s}
.age-picker button:hover{border-color:#f1c87588}
.age-picker button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#06182a}
.age-picker button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.home-v2 .collection-portals{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.collection-portals .portal:first-child,.collection-portals .portal:last-child:nth-child(even){grid-column:1/-1}
.portal{position:relative;display:grid;grid-template-columns:minmax(170px,40%) 1fr;align-items:center;gap:22px 30px;min-height:260px;padding:28px 32px;border-radius:22px;border:1px solid #ffffff17;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 13%,#0d2a42),#081c2e 62%);color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate;opacity:0;transform:translateY(34px);animation:portal-in .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1.1s + var(--i) * .14s);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s}
.collection-portals.filtered .portal{animation-duration:.5s;animation-delay:calc(var(--i) * .06s)}
@keyframes portal-in{to{opacity:1;transform:none}}
.collection-portals .portal:first-child,.collection-portals .portal:last-child:nth-child(even){grid-template-columns:minmax(240px,34%) 1fr;min-height:300px;padding:34px 44px}
.portal-glow{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 18% 60%,var(--accent),transparent 55%);opacity:.12;transition:opacity .5s}
/* The fan of books: the first in front, the next two tilted behind it; they open a little more on hover. */
.portal-books{position:relative;height:200px}
.portal-books>span{position:absolute;bottom:4px;left:50%;width:min(48%,140px);aspect-ratio:3/4;border-radius:8px;overflow:hidden;box-shadow:0 18px 34px -14px #000d,0 0 0 1px #ffffff1a;transform:translateX(-50%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.portal-books>span img{width:100%;height:100%;object-fit:cover;display:block}
.portal-books>span[style*="--k:0"]{z-index:3}
.portal-books>span[style*="--k:1"]{z-index:2;transform:translateX(-112%) translateY(-6px) rotate(-9deg) scale(.9)}
.portal-books>span[style*="--k:2"]{z-index:1;transform:translateX(12%) translateY(-6px) rotate(9deg) scale(.9)}
.collection-portals .portal:first-child .portal-books,.collection-portals .portal:last-child:nth-child(even) .portal-books{height:240px}
.portal-books .mirror-art{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);opacity:.55}
.portal-books .mirror-art svg{width:90px;height:90px}
.portal-symbol{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.portal-symbol svg{width:19px;height:19px}
.portal-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
.portal-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.portal-title{font:400 1.75rem/1.15 Georgia,serif}
.collection-portals .portal:first-child .portal-title,.collection-portals .portal:last-child:nth-child(even) .portal-title{font-size:clamp(1.9rem,3vw,2.4rem)}
.portal-tagline{font-style:italic;color:var(--accent)}
.portal-description{color:#b8c7d7;font-size:.94rem;line-height:1.55;max-width:56ch}
.portal-action{margin-top:6px;font-weight:700;color:var(--accent);font-size:.9rem}
.portal-action span{display:inline-block;transition:transform .4s}
.portal:hover,.portal:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 26px 60px -24px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.portal:hover .portal-glow,.portal:focus-visible .portal-glow{opacity:.3}
.portal:hover .portal-books>span[style*="--k:0"]{transform:translateX(-50%) translateY(-8px)}
.portal:hover .portal-books>span[style*="--k:1"]{transform:translateX(-128%) translateY(-2px) rotate(-14deg) scale(.9)}
.portal:hover .portal-books>span[style*="--k:2"]{transform:translateX(28%) translateY(-2px) rotate(14deg) scale(.9)}
.portal:hover .portal-symbol,.portal:focus-visible .portal-symbol{transform:rotate(-12deg) scale(1.08)}
.portal:hover .portal-action span,.portal:focus-visible .portal-action span{transform:translateX(6px)}
.portal:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* 3. Sections revealed while scrolling. */
.home-v2 [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.home-v2 [data-reveal].in{opacity:1;transform:none}
.home-v2 section[data-reveal]{margin:0 0 96px}
.home-v2 h2{font:400 clamp(1.7rem,3.4vw,2.4rem)/1.2 Georgia,serif;margin:8px 0 14px}

.home-resume{display:grid;grid-template-columns:1.1fr 1fr;border-radius:24px;overflow:hidden;border:1px solid #f1c87533;background:#0b2238}
.resume-art{min-height:280px;overflow:hidden}
.resume-art img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.home-resume.in .resume-art img{transform:scale(1.06)}
.resume-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.resume-copy .primary{align-self:flex-start;margin-top:14px}

.home-how{text-align:center}
.how-track{position:relative;margin-top:34px}
.how-track::before{content:"";position:absolute;top:34px;left:16%;right:16%;border-top:2px dashed #f1c87540}
.how-traveller{position:absolute;z-index:2;top:-30px;left:16%;width:26px;height:26px;margin-left:-13px;color:var(--gold);filter:drop-shadow(0 0 8px #f1c87570);animation:travel 9s ease-in-out infinite}
.how-traveller svg{width:26px;height:26px}
@keyframes travel{0%,8%{left:16%;transform:rotate(0)}40%,48%{left:50%;transform:rotate(360deg)}80%,88%{left:84%;transform:rotate(720deg)}100%{left:16%;transform:rotate(720deg)}}
.how-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.how-steps li{position:relative;padding:74px 16px 8px}
.how-icon{position:absolute;top:0;left:50%;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#0b2238;border:1px solid #f1c87555;color:var(--gold)}
.how-icon svg{width:28px;height:28px}
.how-number{position:absolute;top:-4px;left:calc(50% + 20px);width:22px;height:22px;border-radius:50%;background:var(--gold);color:#06182a;font:700 .75rem/22px Arial,sans-serif}
.how-steps h3{font:400 1.35rem Georgia,serif;margin:18px 0 6px}
.how-steps p{color:#b8c7d7;margin:0}
.home-how.in .how-steps li{animation:word-in .8s ease both;animation-delay:calc(.15s + var(--i) * .18s)}

.home-paper{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;padding:40px;border-radius:24px;background:radial-gradient(circle at 20% 50%,#f1c8751f,transparent 60%),#0a2035;border:1px solid #ffffff14}
.paper-books{position:relative;height:300px}
.paper-books span{position:absolute;top:4%;left:calc(8% + var(--i) * 17%);width:44%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;box-shadow:0 18px 40px -10px #000c;transform:rotate(calc(-9deg + var(--i) * 6deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.paper-books span img{width:100%;height:100%;object-fit:cover}
.home-paper:hover .paper-books span{transform:rotate(calc(-12deg + var(--i) * 8deg)) translateY(-8px)}
.paper-copy p{color:#c3d0de}
.paper-titles{font-size:.9rem}
.paper-titles a{color:var(--gold)}

.home-parents{text-align:center}
.parent-pills{list-style:none;padding:0;margin:26px auto 22px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.parent-pills li{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid #f1c87540;background:#0b2238}
.parent-pills svg{width:20px;height:20px;color:var(--gold)}
.home-parents.in .parent-pills li{animation:word-in .7s ease both;animation-delay:calc(.1s + var(--i) * .15s)}

.home-journal{text-align:center}
.journal-stars{display:block;padding:28px;border-radius:22px;border:1px solid #ffffff17;background:#0a2035;color:var(--ink);text-decoration:none;transition:border-color .4s,transform .4s}
.journal-stars:hover{border-color:#f1c87566;transform:translateY(-4px)}
.journal-head{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.journal-head svg{width:28px;height:28px;color:var(--gold)}
.journal-head small{display:block;color:#a5b6cc}
.journal-count{margin-left:18px;font:400 1.6rem Georgia,serif;color:var(--gold)}
.journal-sky{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;font-size:1rem;color:#ffffff22}
.journal-sky i{font-style:normal}
.journal-sky i.lit{color:var(--gold);text-shadow:0 0 10px #f1c875aa;animation:star-twinkle 4s ease-in-out infinite;animation-delay:calc(var(--i) * .2s)}
.home-journal .save-note{display:block;text-align:center;color:#8ba2b9;font-size:.85rem;margin-top:14px}

/* 4. One page per collection. */
.collection-page .collection-hero{text-align:center;max-width:720px;margin:10px auto 40px;padding:26px 0}
.collection-page .collection-hero .portal-symbol{margin:0 auto 14px}
.collection-page .collection-hero h1{font:400 clamp(2rem,5vw,3.2rem)/1.1 Georgia,serif;margin:8px 0 12px}
.collection-page .collection-hero .eyebrow{color:var(--accent)}
/* Themes of a big collection (the sciences): cards with three fanned covers, then one page per theme. */
.collection-page{--theme:var(--accent)}
.themes-title{text-align:center;font:400 clamp(1.4rem,3vw,1.85rem)/1.2 Georgia,serif;color:#e4ecf2;margin:-8px 0 24px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin:0 0 48px}
.theme-card{--theme:var(--accent);position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;text-decoration:none;color:var(--ink);background:radial-gradient(ellipse 90% 70% at 50% 0%,color-mix(in srgb,var(--theme) 30%,transparent),transparent 72%),linear-gradient(165deg,#11293fee,#071827);border:1px solid color-mix(in srgb,var(--theme) 32%,#ffffff12);box-shadow:0 12px 32px #0007;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;animation:theme-in .55s ease both;animation-delay:calc(var(--i,0)*70ms)}
.theme-card:hover,.theme-card:focus-visible{transform:translateY(-5px);border-color:var(--theme);box-shadow:0 18px 44px #0009,0 0 0 1px var(--theme),0 0 40px color-mix(in srgb,var(--theme) 25%,transparent)}
.theme-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.theme-covers{position:relative;display:block;height:158px;margin-top:24px}
.theme-covers>span{position:absolute;top:8px;left:50%;width:42%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:2px solid #ffffff2e;box-shadow:0 10px 22px #000b;transform:translateX(calc(-50% + (var(--k) - 1) * 56%)) rotate(calc((var(--k) - 1) * 9deg));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.theme-covers>span:nth-child(2){z-index:2;top:0}
.theme-covers>span:only-child{transform:translateX(-50%)}
.theme-card:hover .theme-covers>span{transform:translateX(calc(-50% + (var(--k) - 1) * 68%)) rotate(calc((var(--k) - 1) * 12deg)) translateY(-4px)}
.theme-covers img{width:100%;height:100%;object-fit:cover;display:block}
.theme-copy{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 22px 24px;text-align:center;flex:1}
.theme-icon{position:relative;z-index:3;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--theme);background:#0b2136;box-shadow:0 0 0 1px color-mix(in srgb,var(--theme) 50%,transparent),0 6px 18px #0008,inset 0 0 18px color-mix(in srgb,var(--theme) 22%,transparent);margin-top:-22px}
.theme-icon .icon{width:24px;height:24px}
.theme-copy strong{font:400 1.45rem/1.2 Georgia,serif;margin-top:4px}
.theme-description{color:#b8c7d4;font-size:.92rem;line-height:1.5}
.theme-count{margin-top:auto;padding-top:8px;color:var(--theme);font-weight:700;font-size:.9rem;letter-spacing:.02em}
@keyframes theme-in{from{opacity:0;transform:translateY(16px)}}
.collection-page.theme-open .collection-hero{margin:0 auto 6px;padding:8px 0}
.collection-page.theme-open .collection-hero .muted,.collection-page.theme-open .collection-hero .portal-symbol{display:none}
.collection-page.theme-open .collection-hero h1{font-size:clamp(1.4rem,3vw,1.9rem)}
.theme-hero{display:flex;align-items:center;gap:22px;margin:16px 0 30px;padding:26px 28px;border-radius:24px;background:radial-gradient(ellipse 70% 120% at 0% 0%,color-mix(in srgb,var(--theme) 28%,transparent),transparent 70%),linear-gradient(165deg,#11293f,#08192a);border:1px solid color-mix(in srgb,var(--theme) 38%,transparent)}
.theme-hero .theme-icon{margin:0;width:72px;height:72px;flex-shrink:0}
.theme-hero .theme-icon .icon{width:36px;height:36px}
.theme-hero .eyebrow{color:var(--theme);margin:0 0 6px}
.theme-hero h2{font:400 clamp(1.8rem,4.5vw,2.6rem)/1.1 Georgia,serif;margin:0 0 8px;color:#f3f6f8}
.theme-hero h2:focus{outline:0}
.theme-hero p:last-child{margin:0;color:#c3d1dd;max-width:60ch}
.theme-page .upcoming-grid .upcoming.illustrated:hover{border-color:var(--theme)}
.theme-others{margin:48px 0 8px;text-align:center}
.theme-others>div{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.theme-others a{--theme:var(--accent);display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme) 40%,transparent);background:#ffffff06;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;transition:border-color .3s,background .3s}
.theme-others a .icon{width:18px;height:18px;color:var(--theme)}
.theme-others a:hover,.theme-others a:focus-visible{border-color:var(--theme);background:color-mix(in srgb,var(--theme) 12%,transparent)}
@media (max-width:600px){.theme-grid{grid-template-columns:1fr 1fr;gap:12px}.theme-covers{height:112px;margin-top:16px}.theme-covers>span{border-radius:8px}.theme-copy{padding:0 10px 16px;gap:5px}.theme-icon{width:40px;height:40px;margin-top:-18px}.theme-icon .icon{width:20px;height:20px}.theme-copy strong{font-size:1.05rem}.theme-description{display:none}.theme-count{font-size:.8rem}.theme-hero{flex-direction:column;text-align:center;padding:22px 18px;gap:14px}.theme-hero .theme-icon{width:60px;height:60px}}
@media (prefers-reduced-motion:reduce){.theme-card,.theme-covers>span{animation:none;transition:none}}

/* Phones and tablets. */
@media (max-width:1100px) and (min-width:761px){.portal{grid-template-columns:1fr;text-align:left}.portal-books{height:170px}}
@media (max-width:760px){.home-v2 .collection-portals{grid-template-columns:1fr}.collection-portals .portal,.collection-portals .portal:first-child,.collection-portals .portal:last-child:nth-child(even){grid-template-columns:1fr;min-height:0;padding:24px 22px}.collection-portals .portal-books,.collection-portals .portal:first-child .portal-books,.collection-portals .portal:last-child:nth-child(even) .portal-books{height:170px}.collections-head{align-items:flex-start}.age-picker button{min-width:36px;height:36px;padding:0 10px}}
@media (max-width:900px){.home-collections{margin-top:-30px}.home-resume,.home-paper{grid-template-columns:1fr}.resume-art{min-height:200px}.paper-books{height:190px;max-width:360px}}
@media (max-width:650px){.home-hero{padding:26px 18px 40px}.how-steps{grid-template-columns:1fr;gap:34px}.how-track::before,.how-traveller{display:none}.home-paper,.resume-copy{padding:26px}.journal-head{flex-wrap:wrap}.journal-count{margin-left:0}}

/* No motion: everything is shown at once, still. */
body.effects-off .shooting-star{display:none}
body.effects-off .home-v2 *,body.effects-off .home-v2 [data-reveal]{animation:none!important;transition:none!important}
body.effects-off .home-v2 [data-reveal],body.effects-off .portal,body.effects-off .home-hero .word,body.effects-off .home-subtitle{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.home-top .sky-layer{animation:none}.shooting-star{display:none}.home-v2 [data-reveal],.portal,.home-hero .word,.home-subtitle{opacity:1!important;transform:none!important}.home-top .sky i{opacity:.5}}
/* Age range of a collection: a small, readable pill next to the number of books and on the collection page. */
.portal-kicker-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.age-pill{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--accent,#e8c36a);background:color-mix(in srgb,var(--accent,#e8c36a) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#e8c36a) 40%,transparent);width:fit-content;white-space:nowrap}
.collection-hero .age-pill{display:flex;margin:4px auto 12px}
/* Readers' reviews from Amazon: on the home page (a selection) and on the book page (all of them). */
.home-reviews{margin:0 0 90px;text-align:center}
.home-reviews h2,.book-reviews h2{font:400 clamp(1.7rem,3.2vw,2.3rem)/1.15 Georgia,serif;margin:8px 0 26px}
.book-reviews{margin:50px 0 10px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;text-align:left}
.reader-review{margin:0;display:flex;flex-direction:column;gap:12px;padding:26px 28px;border-radius:20px;background:radial-gradient(circle at 0 0,#f1c87514,transparent 55%),#0a2035;border:1px solid #ffffff14}
.review-stars{color:var(--gold,#f1c875);font-size:1.15rem;letter-spacing:.12em}
.review-stars span{color:#ffffff26}
.reader-review blockquote{margin:0;color:#d5e0ea;line-height:1.6}
.reader-review blockquote p{margin:0 0 10px}
.reader-review .review-heading{font:italic 400 1.2rem/1.35 Georgia,serif;color:var(--ink)}
.reader-review details summary{cursor:pointer;color:var(--gold,#f1c875);font-weight:700;font-size:.9rem;margin-bottom:10px}
.reader-review details[open] summary{margin-bottom:12px}
.reader-review figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:#8ba2b9}
.reader-review figcaption strong{color:var(--ink);font-size:.95rem}
.reviews-source{margin:18px 0 0;font-size:.85rem;color:#8ba2b9}
.reviews-source a,.reader-review figcaption a{color:var(--gold,#f1c875)}
.reader-review figcaption a{margin-top:8px;font-size:.85rem;width:fit-content}

/* « Choisis ton héros » (owner's request, 28/10/2026): the chosen hero in front, the others smaller, blurred and faded
   behind on either side (--pos, --abs from app.js), the collection's panel beside them (below on a phone). */
.heroes{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);grid-template-rows:auto auto 1fr;grid-template-areas:"stage panel" "controls panel" "ages panel";gap:8px 32px;align-items:start}
.hero-stage{--h:clamp(360px,44vw,540px);--w:calc(var(--h)*.6);grid-area:stage;position:relative;height:var(--h);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-stage:before{content:"";position:absolute;left:50%;bottom:0;width:min(90%,520px);height:42%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#f1c87533,transparent 70%);pointer-events:none}
.hero-pick{position:absolute;left:50%;bottom:0;width:var(--w);aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;border-radius:18px;transform-origin:50% 100%;transform:translateX(calc(-50% + var(--pos)*var(--w)*.62)) scale(calc(1 - var(--abs)*.18));z-index:calc(10 - var(--abs));opacity:calc(1 - var(--abs)*.32);filter:blur(calc(var(--abs)*1.6px)) brightness(calc(1 - var(--abs)*.2));transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s}
.hero-pick[data-far]{opacity:0;pointer-events:none}
.hero-pick:not([aria-pressed=true]):hover{filter:blur(calc(var(--abs)*1px)) brightness(1)}
.hero-pick[aria-pressed=true]{filter:drop-shadow(0 14px 28px #000a)}
.hero-pick:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.hero-pick img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none;-webkit-user-drag:none}
.hero-anim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-pick:not(.playing) .hero-anim{visibility:hidden}
.hero-pick.playing img{visibility:hidden}
.hero-symbol{display:grid;place-items:center;width:100%;height:100%;color:var(--gold)}
.hero-symbol .icon{width:40%;height:auto}
.hero-controls{grid-area:controls;display:flex;align-items:center;justify-content:center;gap:18px}
.hero-name{margin:0;min-width:10ch;text-align:center;font:400 clamp(1.3rem,2.4vw,1.7rem)/1.2 Georgia,serif;color:var(--gold)}
.hero-arrow{width:46px;height:46px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff0a;color:var(--ink);font-size:1.2rem;cursor:pointer;transition:background .3s,border-color .3s}
.hero-arrow:hover{border-color:#f1c87599;background:#f1c87514}
.hero-panel{grid-area:panel;display:grid;padding:26px 26px 22px;border-radius:22px;background:radial-gradient(circle at 100% 0,#f1c8751a,transparent 55%),#0a2035;border:1px solid #ffffff17}
.hero-slide{grid-area:1/1;display:flex;flex-direction:column}
.hero-slide:not(.on){visibility:hidden}
.hero-slide>.btn-row{margin-top:auto}
.hero-slide.swap{animation:hero-panel-in .45s ease-out}
@keyframes hero-panel-in{from{opacity:0;transform:translateY(8px)}}
.hero-panel h3{font:400 clamp(1.5rem,2.6vw,1.9rem)/1.15 Georgia,serif;margin:6px 0 10px}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;color:#8ba2b9;font-size:.88rem}
.hero-description{color:#c8d5e2;line-height:1.55;margin:0 0 16px}
.hero-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.hero-cover{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:3/4;border:1px solid #ffffff1a;transition:transform .3s,border-color .3s}
.hero-cover:hover{transform:translateY(-3px);border-color:#f1c87588}
.hero-cover img{width:100%;height:100%;object-fit:cover;display:block}
.hero-free{position:absolute;left:4px;right:4px;bottom:4px;padding:2px 0;border-radius:6px;background:#f1c875;color:#06182a;font-size:.78rem;font-weight:800;text-align:center}
.hero-panel .btn-row{gap:10px;flex-wrap:wrap}
@media(max-width:860px){.heroes{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"stage" "controls" "ages" "panel";gap:12px}.hero-stage{--h:clamp(340px,min(60vh,120vw),520px)}.hero-panel{padding:22px 18px 18px}}
@media(prefers-reduced-motion:reduce){.hero-pick,.hero-cover{transition:none}.hero-slide.swap{animation:none}}
/* Search (owner's request 28/10/2026): the box under the home title, on the search page and in « Mes découvertes ». */
.nav .search-link{display:inline-flex;align-items:center;gap:6px}
.nav .search-link .icon{width:18px;height:18px}
@media(max-width:650px){.nav .search-link-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nav .search-link .icon{width:22px;height:22px}}
.search-box{display:flex;align-items:center;gap:10px;width:min(100%,560px);margin:22px auto 0;padding:6px 6px 6px 16px;border-radius:999px;background:#0a2035e6;border:1px solid #f1c87555;box-shadow:0 10px 30px #0006}
.search-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #f1c87533,0 10px 30px #0006}
.search-box>.icon{flex:none;width:20px;height:20px;color:var(--gold)}
.search-box input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:1.05rem;padding:10px 0;outline:none}
.search-box input::placeholder{color:#8ea3b9}
.search-box input::-webkit-search-cancel-button{filter:invert(.7)}
.search-box button{flex:none;border-radius:999px;padding:10px 18px;margin:0}
.search-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;max-width:640px}
.topic-chip{display:inline-block;padding:6px 13px;border-radius:999px;border:1px solid #ffffff26;background:#ffffff0d;color:#dbe6f1;text-decoration:none;font-size:.86rem}
.topic-chip:hover,.topic-chip:focus-visible{border-color:var(--gold);color:var(--gold)}
.search-page .intro{text-align:center}
.search-page .search-box{margin-top:6px}
.search-count,.search-empty{text-align:center;color:var(--muted);margin:26px 0 14px}
.search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.search-card{display:flex;gap:14px;padding:12px;border-radius:18px;background:#0a2035;border:1px solid #ffffff14;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.search-card:hover,.search-card:focus-visible{border-color:#f1c87588;transform:translateY(-2px)}
.search-card img{flex:none;width:88px;height:118px;object-fit:cover;border-radius:10px}
.search-card-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.search-card .eyebrow{margin:0;font-size:.68rem}
.search-card strong{font:400 1.08rem/1.25 Georgia,serif;color:var(--ink)}
.search-excerpt{color:#b9c9dc;font-size:.86rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.search-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.search-badges .badge.free{border-color:#7fd1a0;color:#a7e8c0}
.library-wall~.search-box,.intro .search-box{margin-left:0}
@media(max-width:650px){.search-box{padding-left:12px}.search-box button{padding:9px 14px}.search-results{grid-template-columns:1fr}.search-card img{width:74px;height:100px}}
@media(max-width:650px){.search-page.has-results .search-topics{display:none}}
.home-hero{grid-template-columns:minmax(0,1fr)}.home-hero-copy{min-width:0;width:100%}
/* The heroes open the page (owner's request 28/10/2026): the age buttons sit under the arrows, small. */
.heroes>.age-picker{grid-area:ages;justify-content:center;gap:5px}
.heroes>.age-picker button{min-width:34px;height:34px;padding:0 9px;font-size:.85rem}
.home-collections .collections-head{margin-bottom:6px}
@media(max-width:650px){.home-collections{padding-top:14px}.home-collections .collections-head h2{font-size:1.6rem}.home-hero{padding:8px 18px 40px}}