/* Logo animé « La balle » (anime/logo.js) : les personnages derrière le mot, la signature dessous. */
.logo-anime { position: absolute; }
.logo-anime .zone-persos { position: absolute; left: 0; right: 0; top: 0; }
.logo-anime .perso { position: absolute; bottom: 0; object-fit: contain; }
.logo-anime .zone-mot { position: absolute; left: 0; right: 0; bottom: 0; }
.logo-anime .signature { position: absolute; left: 0; right: 0; text-align: center; font-family: Fredoka, sans-serif; font-weight: 600; line-height: 1.2; }

/* Accueil de lunello.family : « Une journée Lunello ». La page se lit comme une journée, du réveil au dodo.
   Le ciel (fixe, derrière tout) passe du matin au soir puis à la nuit sur les histoires, et revient au matin pour l'offre.
   La balle du logo s'envole du « o » et devient le soleil, qui traverse le ciel au fil du défilement et se couche côté parents.
   Défilement natif (animation-timeline: view() et timelines nommées) là où il existe ; ailleurs, la page reste lisible :
   ciel du matin, soleil posé dans le haut de page, nuit portée par la section des histoires elle-même.
   Le logo animé « La balle » (anime/logo.css et logo.js des Reels) est relu tel quel. */

body.page-accueil { --pli: clamp(80px, 13vh, 150px); }

/* ---- Le ciel */
.ciel { position: absolute; top: 0; left: 0; width: 100%; height: 100svh; z-index: -1; pointer-events: none; overflow: hidden; }
.ciel > div, .ciel-soir-boite > div { position: absolute; inset: 0; }
.ciel-matin { background: radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--bleu-ciel) 46%, var(--creme)) 0%, color-mix(in srgb, var(--bleu-ciel) 20%, var(--creme)) 45%, var(--creme) 80%); }
.ciel-soir { opacity: 0; background: radial-gradient(130% 80% at 15% 0%, color-mix(in srgb, var(--abricot) 40%, var(--creme)) 0%, color-mix(in srgb, var(--sable) 34%, var(--creme)) 42%, var(--creme) 85%); }
.ciel-nuit { opacity: 0; background: linear-gradient(to bottom, var(--nuit) 0%, var(--nuit) 55%, color-mix(in srgb, var(--nuit) 82%, var(--lilas)) 100%); }

/* Le soleil : la balle abricot du logo, avec un halo sable. Deux enveloppes : l'une avance, l'autre monte et descend. */
.soleil-x { position: absolute; left: 0; top: 0; translate: 80vw 0; }
.soleil-y { translate: 0 var(--soleil-haut); }
/* Sur un téléphone le soleil reste dans le haut du ciel, au-dessus des titres, et ne descend qu'au coucher */
.ciel { --soleil-haut: 20vh; --soleil-milieu: 62vh; --soleil-taille: clamp(84px, 9vw, 132px); }
@media (max-width: 900px) { .ciel { --soleil-haut: 11vh; --soleil-milieu: 13vh; --soleil-taille: 66px; } }
.soleil { position: relative; width: var(--soleil-taille); aspect-ratio: 1; margin: calc(var(--soleil-taille) / -2) 0 0 calc(var(--soleil-taille) / -2); border-radius: 50%; background: radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--abricot) 55%, var(--creme)) 0%, var(--abricot) 58%); transition: scale 1s var(--ressort), opacity .12s linear; }
.soleil::before { content: ""; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sable) 70%, transparent) 0%, color-mix(in srgb, var(--sable) 22%, transparent) 38%, transparent 68%); z-index: -1; transition: opacity 1.2s ease .2s, scale 1.4s var(--ressort) .1s; }
.soleil::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--abricot), color-mix(in srgb, var(--abricot) 70%, var(--lilas)) 75%); opacity: 0; }
html.js .soleil:not(.allume) { scale: .22; opacity: 0; }
html.js .soleil:not(.allume)::before { opacity: 0; scale: .4; }
.balle-volante { position: fixed; left: 0; top: 0; z-index: 25; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--abricot); pointer-events: none; will-change: transform; }

/* ---- Héros : le réveil */
.hero { position: relative; max-width: var(--largeur); margin: 0 auto; min-height: calc(100svh - 64px); padding: 28px 22px 110px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px 48px; }
.hero-texte { position: relative; z-index: 1; }
.surtitre { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 16px 7px 9px; border-radius: 999px; background: color-mix(in srgb, var(--creme) 72%, transparent); border: 1px solid color-mix(in srgb, var(--cacao) 10%, transparent); font-weight: 700; font-size: 15px; }
.surtitre::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--abricot); }
.hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.012em; margin: 0 0 20px; }
.chapo { font-size: clamp(17.5px, 1.6vw, 20px); line-height: 1.55; max-width: 34em; margin: 0 0 26px; }
.hero-stores p { margin: 10px 0 0; font-size: 15px; color: var(--cacao-clair); }
.hero-logo { position: relative; width: 100%; max-width: 560px; aspect-ratio: 596 / 540; justify-self: center; }
.hero-logo .scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hero-logo .logo-anime .perso { transition: translate .9s var(--ressort); translate: var(--px, 0) var(--py, 0); }
.statique { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.statique .persos { display: grid; grid-template-columns: .28fr .35fr .27fr .23fr; align-items: end; margin-bottom: -6%; }
.statique .persos img { width: 100%; height: auto; }
.statique .mot-logo { width: 100%; height: auto; }
.statique .signature { text-align: center; font-family: Fredoka, sans-serif; font-weight: 600; font-size: clamp(16px, 2.4vw, 23px); margin: -4% 0 0; }
html.js .statique { visibility: hidden; }
.indice { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--cacao); text-decoration: none; font-weight: 700; font-size: 14.5px; }
.indice-balle { width: 14px; height: 14px; border-radius: 50%; background: var(--abricot); animation: rebondit 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes rebondit { 0%, 100% { transform: translateY(-14px); } 46% { transform: translateY(0) scale(1.15, .82); } 54% { transform: translateY(0) scale(1, 1); } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 8px; gap: 8px; }
  .hero-logo { order: -1; max-width: 430px; }
  .chapo { margin-inline: auto; }
  .hero-stores .badges { justify-content: center; }
  .indice { display: none; }
}

/* ---- Les moments de la journée */
.moment { position: relative; max-width: var(--largeur); margin: 0 auto; padding: var(--pli) 22px; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.moment.inverse > .moment-texte { order: 2; }
.heure { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 15px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--creme) 70%, transparent); border: 1px solid color-mix(in srgb, var(--cacao) 11%, transparent); font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.heure::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--abricot); }
.moment h2, .parents h2, .semaine h2, .demain h2, .nuit h2 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.04; font-weight: 700; margin: 18px 0 18px; letter-spacing: -.01em; }
.moment-texte > p { font-size: 18px; max-width: 32em; }
.points { list-style: none; padding: 0; margin: 22px 0 24px; display: grid; gap: 10px; }
.points li { position: relative; margin: 0; padding-left: 32px; }
.points li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: var(--menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%236B5B57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.gratuit { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 15px; border-radius: 999px; background: var(--menthe); font-weight: 700; font-size: 15px; }
.chiffres-jeux { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.chiffres-jeux li { margin: 0; background: color-mix(in srgb, var(--creme) 75%, transparent); border: 1px solid color-mix(in srgb, var(--cacao) 10%, transparent); border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 15px; }
.chiffres-jeux b { font-family: Fredoka, Nunito, sans-serif; font-size: 19px; margin-right: 4px; }

/* Panneau coloré : la tuile de l'app en grand, avec son halo */
.panneau { position: relative; isolation: isolate; overflow: clip; border-radius: 44px; padding: clamp(28px, 4vw, 52px); min-height: 460px; display: grid; place-items: center; }
.panneau::before { content: ""; position: absolute; z-index: -1; width: 78%; aspect-ratio: 1; border-radius: 50%; right: -16%; top: -22%; background: color-mix(in srgb, var(--creme) 30%, transparent); }
.panneau.bleu-ciel { background: var(--bleu-ciel); } .panneau.abricot { background: var(--abricot); } .panneau.sable { background: var(--sable); } .panneau.lilas { background: var(--lilas); } .panneau.menthe { background: var(--menthe); }
.perso-panneau { position: absolute; width: clamp(110px, 13vw, 170px); height: auto; left: 6%; bottom: 4%; z-index: 2; filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--nuit) 22%, transparent)); animation: flotte 5.5s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-10px); } }

/* Téléphone : une vraie capture de l'app, et ce que fait le doigt rejoué par-dessus */
.telephone { position: relative; width: min(290px, 70%); aspect-ratio: 390 / 844; padding: 9px; border-radius: 48px; background: var(--nuit); box-shadow: 0 40px 70px -28px color-mix(in srgb, var(--nuit) 60%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--creme) 14%, transparent); rotate: -2deg; }
.telephone::before { content: ""; position: absolute; z-index: 3; top: 15px; left: 50%; translate: -50% 0; width: 28%; height: 18px; border-radius: 999px; background: var(--nuit); }
.ecran { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: var(--creme); }
.ecran > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-voile { position: absolute; left: 6.15%; top: 30.8%; width: 87.7%; height: 23.7%; border-radius: 6.4% / 14%; background: var(--menthe); opacity: 0; transition: opacity .32s ease; }
.app-barre { position: absolute; left: 6.15%; top: 24.17%; width: 87.7%; height: 2.37%; border-radius: 999px; overflow: hidden; }
.app-barre > span { position: absolute; inset: 0; background: var(--menthe); transform-origin: left; scale: 0 1; transition: scale .8s var(--ressort) .1s; }
.app-coche { position: absolute; left: 74.87%; top: 55.93%; width: 15.38%; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.app-coche { color: var(--creme); }
.app-coche svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--menthe); scale: 0; transition: scale .9s var(--ressort); }
.app-coche::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 2px solid var(--creme); opacity: 0; scale: .4; }
.app-coche.onde::after { animation: onde .55s var(--sortie); }
@keyframes onde { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.5; } }
.telephone.fait .app-voile { opacity: .45; }
.telephone.fait .app-barre > span { scale: .25 1; }
.telephone.fait .app-coche svg { scale: 1; animation: coche-pop .9s var(--ressort); }
@keyframes coche-pop { 0% { scale: 0; } 45% { scale: 1.25; } 100% { scale: 1; } }
.confetti { position: absolute; width: 9px; height: 13px; border-radius: 3px; pointer-events: none; will-change: transform, opacity; }

/* ---- La semaine : le jour en grand sur l'accueil */
.semaine { position: relative; padding: calc(var(--pli) * .6) 0 var(--pli); }
.semaine-texte { max-width: var(--largeur); margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 60px; align-items: end; }
.semaine-texte > p:last-child { font-size: 18px; margin: 0 0 26px; }
.ruban-cadre { overflow-x: auto; scrollbar-width: none; margin-top: 18px; padding: 10px 0 18px; }
.ruban-cadre::-webkit-scrollbar { display: none; }
.ruban { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); width: max-content; padding: 0 22px; }
.jour { font-family: Fredoka, Nunito, sans-serif; font-weight: 700; font-size: clamp(50px, 8vw, 118px); line-height: 1; letter-spacing: -.01em; color: color-mix(in srgb, var(--cacao) 88%, transparent); }
.jour.c1 { color: var(--bleu); } .jour.c2 { color: var(--abricot); } .jour.c3 { color: color-mix(in srgb, var(--lilas) 70%, var(--nuit)); }
.activite { display: grid; justify-items: center; gap: 2px; flex: none; }
.activite img { width: clamp(80px, 9vw, 130px); height: auto; filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--nuit) 18%, transparent)); }
.activite span { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 17px; background: var(--creme); border-radius: 999px; padding: 3px 13px; }

/* ---- 10 h : la roulette des jeux à tirage (Danse des animaux) */
.roulette { text-align: center; min-height: 520px; align-content: center; gap: 0; }
.roulette .etiquette-jeu { margin: 0; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.roulette h3 { margin: 4px 0 0; font-size: 30px; font-weight: 700; }
.disque { position: relative; width: min(270px, 74vw); aspect-ratio: 1; margin: 22px auto 14px; border-radius: 50%; background: var(--creme); box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--creme) 50%, var(--abricot)), 0 26px 40px -22px color-mix(in srgb, var(--nuit) 55%, transparent); display: grid; place-items: center; }
.disque img { width: 80%; height: auto; transform-origin: 50% 80%; }
.disque img.pas { animation: pas .2s var(--sortie); }
.disque img.tire { animation: tire 1s var(--ressort); }
@keyframes pas { from { scale: .9; translate: 0 6px; } }
@keyframes tire { 0% { scale: .9; } 35% { scale: 1.14; } 100% { scale: 1; } }
.phrase-tirage { min-height: 1.3em; margin: 0 0 18px; font-family: Fredoka, Nunito, sans-serif; font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; }
.phrase-tirage .mot { display: inline-block; animation: mot-monte .7s var(--ressort) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes mot-monte { from { opacity: 0; translate: 0 .6em; } }
.bouton { font: inherit; font-weight: 700; font-size: 17px; line-height: 1.2; border: 0; border-radius: 999px; padding: 15px 28px; min-height: 54px; background: var(--cacao); color: var(--creme); cursor: pointer; transition: transform .6s var(--ressort), opacity .2s ease; }
.bouton:active { transform: scale(.96); transition-duration: .15s; }
.bouton:disabled { opacity: .6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .bouton:not(:disabled):hover { transform: translateY(-2px); } }
.bouton.clair { background: var(--creme); color: var(--cacao); }

/* ---- 16 h 30 : les émotions, la bulle de respiration (le souffle de la bougie) */
.respiration { text-align: center; min-height: 520px; align-content: center; }
.respiration .etiquette-jeu { margin: 0; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.respiration h3 { margin: 4px 0 0; font-size: 30px; font-weight: 700; }
.respiration .sous-titre { margin: 2px 0 0; }
.bulle { position: relative; width: min(210px, 56vw); aspect-ratio: 1; margin: 46px auto 40px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; animation: respire 6s ease-in-out infinite; }
.bulle::before { content: ""; position: absolute; inset: -20%; border-radius: 50%; background: color-mix(in srgb, var(--creme) 38%, transparent); z-index: -1; }
.bulle.exercice { animation: none; }
@keyframes respire { 50% { scale: 1.06; } }
.bougie { width: 30%; height: auto; overflow: visible; }
.flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: flamme 2.4s ease-in-out infinite alternate; }
.bulle.expire .flamme { animation: flamme-souffle .45s ease-in-out infinite alternate; }
@keyframes flamme { from { rotate: -3deg; scale: 1 1; } to { rotate: 3deg; scale: .96 1.04; } }
@keyframes flamme-souffle { from { rotate: -14deg; scale: 1.06 .9; } to { rotate: 9deg; scale: .94 1.06; } }
.consigne { min-height: 3.1em; max-width: 26em; margin: 0 auto 18px; font-size: 18px; font-weight: 600; }
.consigne.change { animation: consigne .6s ease both; }
@keyframes consigne { from { opacity: 0; translate: 0 8px; } }
.emotions-cartes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 12px; }
.carte-emotion { background: var(--creme); border-radius: 24px; overflow: hidden; box-shadow: 0 14px 30px -22px color-mix(in srgb, var(--nuit) 50%, transparent); }
.carte-emotion img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: scale .9s var(--ressort); }
@media (hover: hover) and (pointer: fine) { .carte-emotion:hover img { scale: 1.06; } }
.carte-emotion div { padding: 10px 14px 14px; }
.carte-emotion strong { display: block; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.2; }
.carte-emotion span { font-size: 14.5px; color: var(--cacao-clair); }

/* ---- 18 h : côté parents (pense-bête, souvenirs) */
.parents { max-width: var(--largeur); margin: 0 auto; padding: var(--pli) 22px; }
.parents-tete { max-width: 760px; }
.parents-tete > p:last-child { font-size: 18px; }
.parents-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.parents-grille .panneau { place-items: stretch; align-content: start; min-height: 0; }
.parents-grille h3 { margin: 0 0 6px; font-size: 28px; font-weight: 700; }
.parents-grille .panneau > p { margin: 0 0 18px; max-width: 30em; position: relative; z-index: 1; }
.liste-pb { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.liste-pb li { margin: 0; }
.ligne-pb { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; color: var(--cacao); background: var(--creme); border: 0; border-radius: 20px; padding: 14px 16px; cursor: pointer; overflow: hidden; transition: transform .6s var(--ressort); }
.ligne-pb::after { content: ""; position: absolute; inset: 0; background: var(--menthe); opacity: 0; transition: opacity .32s ease; }
.ligne-pb:active { transform: scale(.96); transition-duration: .15s; }
.ligne-pb > * { position: relative; z-index: 1; }
.case { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--cacao) 30%, transparent); display: grid; place-items: center; transition: background-color .25s ease, border-color .25s ease; }
.case { color: var(--cacao); }
.case svg { width: 18px; height: 18px; }
.case path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .26s ease-out .08s; }
.ligne-pb strong { display: block; font-weight: 700; transition: color .32s ease; }
.ligne-pb small { display: block; font-size: 14.5px; color: var(--cacao-clair); }
.ligne-pb[aria-pressed="true"]::after { opacity: .45; }
.ligne-pb[aria-pressed="true"] .case { background: var(--creme); border-color: var(--creme); animation: coche-pop .9s var(--ressort); }
.ligne-pb[aria-pressed="true"] .case path { stroke-dashoffset: 0; }
.ligne-pb[aria-pressed="true"] strong { color: var(--cacao-clair); }
.ligne-pb.rebond { animation: rebond-ligne .8s var(--ressort); }
@keyframes rebond-ligne { 40% { transform: scale(1.04); } }
.pense-bete .perso-panneau { left: auto; right: 6%; top: 22px; bottom: auto; width: clamp(80px, 8vw, 108px); }
.parents-grille .pense-bete > h3, .parents-grille .pense-bete > p { margin-right: clamp(92px, 9vw, 118px); }
.souvenirs .telephone { justify-self: center; margin-top: 8px; width: min(250px, 70%); rotate: 3deg; }
.souvenirs .mini-telephone { display: grid; justify-items: center; }

/* ---- 20 h : la nuit tombe sur les histoires du soir. Rien ne rebondit ici : fondus lents, zoom continu. */
.nuit { position: relative; color: var(--creme); padding: 38vh 0 30vh; background: linear-gradient(to bottom, transparent 0, var(--nuit) 32vh, var(--nuit) calc(100% - 26vh), transparent 100%); overflow: clip; }
.nuit .etoiles-section { position: absolute; inset: 22vh 0 18vh; }
.nuit .int { position: relative; z-index: 1; max-width: var(--largeur); margin: 0 auto; padding: 0 22px; }
.nuit .int > p { font-size: 18px; max-width: 36em; color: color-mix(in srgb, var(--creme) 92%, transparent); }
.nuit .heure { background: color-mix(in srgb, var(--creme) 9%, transparent); border-color: color-mix(in srgb, var(--creme) 22%, transparent); }
.nuit .heure::before { background: var(--creme); box-shadow: 0 0 14px 2px var(--lilas); }
.nuit .precision { font-size: 15.5px; color: var(--lilas); margin-top: 22px; }
.nuit .titre-mots .mot > span { transition-duration: 1.5s; transition-timing-function: var(--sortie); transition-delay: calc(var(--i) * 90ms); }
html.js .nuit [data-apparait] { transition-duration: 1.4s, 1.6s, 1.6s, .7s; transition-timing-function: ease, var(--sortie), var(--sortie), var(--ressort); }
.lune { position: absolute; z-index: 0; top: 30vh; right: 9%; width: clamp(96px, 12vw, 160px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--creme) 0%, color-mix(in srgb, var(--creme) 82%, var(--lilas)) 72%); box-shadow: 0 0 80px 18px color-mix(in srgb, var(--lilas) 42%, transparent); }
.lune::before, .lune::after { content: ""; position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--lilas) 34%, transparent); }
.lune::before { width: 22%; height: 22%; left: 56%; top: 30%; }
.lune::after { width: 13%; height: 13%; left: 30%; top: 60%; }
.couvertures { position: relative; z-index: 1; margin-top: 60px; display: grid; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.couvertures::-webkit-scrollbar { display: none; }
.rangee { display: flex; gap: 20px; width: max-content; padding: 0 22px; }
.couverture { width: clamp(230px, 25vw, 330px); flex: none; margin: 0; border-radius: 24px; overflow: hidden; background: color-mix(in srgb, var(--creme) 7%, transparent); border: 1px solid color-mix(in srgb, var(--creme) 12%, transparent); }
.couverture .cadre { overflow: hidden; aspect-ratio: 4 / 3; }
.couverture img { display: block; width: 100%; height: 100%; object-fit: cover; animation: zoom-lent 16s ease-in-out infinite alternate; }
.rangee .couverture:nth-child(2n) img { animation-delay: -8s; }
@keyframes zoom-lent { from { scale: 1.02; } to { scale: 1.1; } }
.couverture figcaption { padding: 11px 15px 14px; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; }
.couverture figcaption span { display: block; font-family: Nunito, sans-serif; font-weight: 600; font-size: 14px; color: var(--lilas); }
.ambiances { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px 0 0; }
.ambiances li { margin: 0; padding: 7px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--creme) 24%, transparent); font-weight: 700; font-size: 15px; }
.dodo { position: relative; z-index: 1; text-align: center; margin-top: 22vh; }
.dodo img { width: clamp(120px, 14vw, 170px); height: auto; animation: flotte 6s ease-in-out infinite; }
.dodo p { margin: 12px 0 0; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); }

/* ---- Le lendemain : l'offre, le soleil se relève */
.demain { position: relative; max-width: var(--largeur); margin: 0 auto; padding: calc(var(--pli) * .7) 22px calc(var(--pli) * .4); }
.lever { position: absolute; z-index: 0; left: 50%; top: -24vh; width: clamp(120px, 14vw, 190px); aspect-ratio: 1; margin-left: calc(clamp(120px, 14vw, 190px) / -2); border-radius: 50%; background: radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--abricot) 55%, var(--creme)) 0%, var(--abricot) 58%); }
.lever::before { content: ""; position: absolute; inset: -80%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sable) 55%, transparent) 0%, transparent 65%); z-index: -1; }
.demain-tete { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto; padding-top: 80px; }
.demain-tete > p:last-child { font-size: 18px; }
.offre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.offre > div { border-radius: 32px; padding: 26px 26px 28px; }
.offre .menthe { background: var(--menthe); } .offre .sable { background: var(--sable); } .offre .lilas { background: var(--lilas); }
.offre strong { display: block; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.offre .prix { font-family: Fredoka, Nunito, sans-serif; font-weight: 700; font-size: 44px; line-height: 1; margin: 2px 0 10px; }
.offre p { margin: 0; font-size: 16px; }
.offre .note { grid-column: 1 / -1; padding: 0 4px; color: var(--cacao-clair); font-size: 14.5px; }
.appel { margin-top: 26px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: var(--nuit); color: var(--creme); border-radius: 36px; padding: clamp(26px, 4vw, 44px); overflow: hidden; position: relative; isolation: isolate; }
.appel h3 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.appel p { margin: 0 0 18px; color: color-mix(in srgb, var(--creme) 85%, transparent); }
.appel .qr { width: 156px; height: 156px; border-radius: 18px; background: var(--creme); padding: 8px; }
.appel .persos-appel { position: absolute; right: 200px; bottom: -14px; display: flex; align-items: flex-end; z-index: -1; opacity: .95; }
.appel .persos-appel img { width: 96px; height: auto; margin-left: -18px; transition: translate .8s var(--ressort); }
@media (hover: hover) and (pointer: fine) { .appel:hover .persos-appel img { translate: 0 -12px; } .appel:hover .persos-appel img:nth-child(2) { transition-delay: 60ms; } .appel:hover .persos-appel img:nth-child(3) { transition-delay: 120ms; } .appel:hover .persos-appel img:nth-child(4) { transition-delay: 180ms; } }

/* ---- Le mot d'Axel : la vidéo « Pourquoi j'ai créé Lunello », juste après le réveil */
.voir-video { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 6px 14px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--creme) 76%, transparent); border: 1px solid color-mix(in srgb, var(--cacao) 10%, transparent); color: var(--cacao); text-decoration: none; text-align: left; transition: transform .7s var(--ressort); }
.voir-video img { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--sable); transition: rotate .7s var(--ressort); }
.voir-video strong { display: block; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 16.5px; line-height: 1.2; }
.voir-video small { display: block; font-size: 14px; color: var(--cacao-clair); }
.rond-lecture { position: relative; width: 32px; height: 32px; flex: none; margin-left: 6px; border-radius: 50%; background: var(--abricot); transition: transform .7s var(--ressort); }
.rond-lecture::before { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--creme); }
.voir-video:active { transform: scale(.96); transition-duration: .15s; }
@media (hover: hover) and (pointer: fine) { .voir-video:hover { transform: translateY(-2px); } .voir-video:hover img { rotate: -8deg; } .voir-video:hover .rond-lecture { transform: scale(1.12); } }
.createur { position: relative; max-width: var(--largeur); margin: 0 auto; padding: calc(var(--pli) * .5) 22px var(--pli); display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.createur-video { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.createur-video::before { content: ""; position: absolute; z-index: -1; inset: -6% -22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sable) 60%, transparent) 0%, color-mix(in srgb, var(--bleu-ciel) 22%, transparent) 45%, transparent 70%); }
.cadre-video { position: relative; border-radius: 38px; overflow: hidden; background: var(--creme-fonce); rotate: -1.5deg; box-shadow: 0 0 0 9px var(--creme), 0 46px 80px -34px color-mix(in srgb, var(--nuit) 55%, transparent); transition: transform .9s var(--ressort); }
.cadre-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--creme); }
.cadre-video.en-lecture { transform: rotate(1.5deg) scale(1.03); }
/* La balle et son étiquette se posent dans la zone vide de l'affiche, entre « Axel » et le sous-titre incrusté (58 % de la hauteur) */
.lecture { position: absolute; inset: 0; display: grid; grid-auto-flow: column; align-items: center; justify-content: center; align-content: start; gap: 12px; border: 0; padding: calc(100% * 16 / 9 * .33) 0 0; background: transparent; cursor: pointer; font: inherit; }
.lecture[hidden] { display: none; }
.balle-lecture { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--abricot); box-shadow: 0 20px 34px -14px color-mix(in srgb, var(--abricot) 70%, var(--nuit)); transition: transform .7s var(--ressort); }
.balle-lecture::before { content: ""; position: absolute; left: 37px; top: 29px; border-style: solid; border-width: 19px 0 19px 30px; border-color: transparent transparent transparent var(--creme); }
.balle-lecture::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--abricot); animation: appel-lecture 2.6s var(--sortie) infinite; }
@keyframes appel-lecture { 0% { opacity: .85; scale: 1; } 70%, 100% { opacity: 0; scale: 1.75; } }
.lecture-texte { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 18px; color: var(--cacao); background: var(--creme); padding: 6px 18px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .lecture:hover .balle-lecture { transform: scale(1.08); } }
.lecture:active .balle-lecture { transform: scale(1.14, .86); transition-duration: .12s; }
.lecture.part { animation: lecture-part .45s var(--sortie) forwards; pointer-events: none; }
@keyframes lecture-part { to { opacity: 0; scale: .7; } }
.createur-texte > p { font-size: 18px; max-width: 32em; }
.createur h2 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.04; font-weight: 700; margin: 18px 0 18px; letter-spacing: -.01em; }

/* ---- Nouvelles */
.bloc { max-width: var(--largeur); margin: 0 auto; padding: calc(var(--pli) * .6) 22px; }
.nouvelles h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; margin: 0 0 6px; }
.nouvelles-grille { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px 40px; margin-top: 22px; align-items: start; }
.nouvelles-grille .nouveaute { margin-top: 0; background: var(--creme-fonce); border-radius: 0 26px 26px 0; padding: 18px 22px; }
.nouvelles-grille .articles { margin-top: 0; }
.contact { text-align: center; font-size: 18px; padding: 10px 22px var(--pli); margin: 0; }

/* ---- Petits écrans */
@media (max-width: 900px) {
  .moment { grid-template-columns: 1fr; }
  .moment.inverse > .moment-texte { order: 0; }
  .panneau { min-height: 420px; border-radius: 36px; }
  .semaine-texte { grid-template-columns: 1fr; }
  .emotions-cartes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 44%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -22px; padding-inline: 22px; scroll-padding-inline: 22px; scrollbar-width: none; }
  .emotions-cartes::-webkit-scrollbar { display: none; }
  .carte-emotion { scroll-snap-align: start; }
  .parents-grille, .offre, .nouvelles-grille { grid-template-columns: 1fr; }
  .appel { grid-template-columns: 1fr; }
  .appel .qr, .appel .persos-appel { display: none; }
  .createur { grid-template-columns: 1fr; }
  .createur-video { max-width: 300px; }
  .balle-lecture { width: 80px; height: 80px; }
  .balle-lecture::before { left: 31px; top: 24px; border-width: 16px 0 16px 25px; }
  .lune { top: 26vh; right: 6%; }
}
@media (max-width: 520px) {
  .moment h2, .parents h2, .semaine h2, .demain h2, .nuit h2 { font-size: 36px; }
  .perso-panneau { width: 96px; }
}

/* ---- Défilement natif : le décor suit la page. Rien de ceci ne s'applique sous mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ruban-cadre, .couvertures { overflow: clip; }
    .ruban { animation: ruban linear both; animation-timeline: view(); }
    @keyframes ruban { from { translate: 4vw 0; } to { translate: calc(-100% + 96vw) 0; } }
    .rangee.a { animation: rangee-a linear both; animation-timeline: view(); }
    .rangee.b { animation: rangee-b linear both; animation-timeline: view(); }
    @keyframes rangee-a { from { translate: 6vw 0; } to { translate: calc(-100% + 94vw) 0; } }
    @keyframes rangee-b { from { translate: calc(-100% + 94vw) 0; } to { translate: 6vw 0; } }
    .moment .telephone { animation: telephone-entre linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes telephone-entre { from { translate: 0 110px; rotate: -9deg; } to { translate: 0 0; rotate: -2deg; } }
    .souvenirs .telephone { animation: telephone-penche linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes telephone-penche { from { translate: 0 90px; rotate: 10deg; } to { translate: 0 0; rotate: 3deg; } }
    .perso-panneau { animation: flotte 5.5s ease-in-out infinite, perso-monte linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% cover 45%; }
    @keyframes perso-monte { from { translate: 0 70px; scale: .7; } to { translate: 0 0; scale: 1; } }
    .hero-logo { animation: hero-sort linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes hero-sort { to { translate: 0 -10vh; scale: .9; opacity: .2; } }
    .cadre-video { animation: video-entre linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes video-entre { from { translate: 0 100px; rotate: 6deg; scale: .9; } to { translate: 0 0; rotate: -1.5deg; scale: 1; } }
    .lune { animation: lune linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes lune { from { translate: 0 50vh; } 40% { translate: 0 0; } to { translate: 0 -26vh; } }
    .lever { animation: lever linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes lever { from { translate: 0 34vh; scale: .6; } to { translate: 0 0; scale: 1; } }
    .dodo img { animation: flotte 6s ease-in-out infinite, dodo linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% cover 50%; }
    @keyframes dodo { from { opacity: 0; translate: 0 40px; } }
  }
  /* Le ciel et le soleil : timelines nommées partagées par toute la page */
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    body.page-accueil { timeline-scope: --journee, --soir, --nuit; }
    .journee { view-timeline: --journee block; }
    .s-emotions { view-timeline: --soir block; }
    .nuit { view-timeline: --nuit block; }
    .ciel { position: fixed; height: 100lvh; }
    .ciel-soir { animation: soir linear both; animation-timeline: --soir; }
    @keyframes soir { entry 0% { opacity: 0; } exit 60% { opacity: 1; } }
    .ciel-soir-boite { animation: soir-fin linear both; animation-timeline: --nuit; }
    @keyframes soir-fin { entry 90% { opacity: 1; } exit 0% { opacity: 0; } }
    .ciel-nuit, .entete::after { animation: nuit linear both; animation-timeline: --nuit; }
    @keyframes nuit { entry 0% { opacity: 0; } entry 75% { opacity: 1; } exit 0% { opacity: 1; } exit 45% { opacity: 0; } }
    .entete { animation: entete-nuit linear both; animation-timeline: --nuit; }
    @keyframes entete-nuit { entry 40% { color: var(--cacao); } entry 75% { color: var(--creme); } exit 0% { color: var(--creme); } exit 40% { color: var(--cacao); } }
    .nuit .etoiles-section { display: none; }
    .soleil-x { animation: soleil-x linear both; animation-timeline: --journee; animation-range: contain 0% contain 100%; }
    .soleil-y { animation: soleil-y linear both; animation-timeline: --journee; animation-range: contain 0% contain 100%; }
    .soleil::after { animation: soleil-couchant linear both; animation-timeline: --journee; animation-range: contain 0% contain 100%; }
    @keyframes soleil-x { from { translate: 80vw 0; } to { translate: 14vw 0; } }
    @keyframes soleil-y { 0% { translate: 0 var(--soleil-haut); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 30% { translate: 0 13vh; animation-timing-function: cubic-bezier(.4, 0, .8, .6); } 82% { translate: 0 var(--soleil-milieu); animation-timing-function: cubic-bezier(.5, 0, 1, 1); } 100% { translate: 0 118vh; } }
    @keyframes soleil-couchant { 0%, 62% { opacity: 0; } 100% { opacity: 1; } }
  }
}