/* TonVillage — animations du site vitrine.
   Couche posée par-dessus styles.css. Tout est rangé sous html.anim, que le
   petit script de <head> n'ajoute que sur un navigateur récent (propriété CSS
   translate + IntersectionObserver : Safari/iOS 14.5+, Chrome/Android 104+,
   Samsung Internet 20+, Firefox 72+) et sans « réduire les animations ».
   Ailleurs, la page reste exactement la version statique. */

html, body { overflow-x: clip; }
:root { --ease-out: cubic-bezier(.2, .9, .25, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Apparition au défilement ---------- */
.anim .rv { opacity: 0; translate: 0 32px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out), clip-path .9s var(--ease-out); transition-delay: var(--d, 0s); }
.anim .rv.in { opacity: 1; translate: 0 0; }
.anim .rv-clip { clip-path: inset(0 0 100% 0); translate: 0 18px; }
.anim .rv-clip.in { clip-path: inset(0 0 -20% 0); }
.anim .rv-left { translate: -40px 0; }
.anim .rv-pop { scale: .85; transition-property: opacity, scale, translate; transition-timing-function: var(--ease-pop); }
.anim .rv-pop.in { scale: 1; }

/* ---------- Barre de progression sous l'en-tête ---------- */
.progress { position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--sun); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.anim .progress { border-bottom: 2px solid var(--ink); height: 6px; bottom: -6px; }
html:not(.anim) .progress { display: none; }

/* ---------- Accueil ---------- */
.hero { position: relative; }
.anim .hero-copy > * { animation: monte .9s var(--ease-out) both; }
.anim .hero-copy > .eyebrow { animation-delay: .05s; }
.anim .hero-copy > .lead { animation-delay: .55s; }
.anim .hero-copy > .actions { animation-delay: .7s; }
.anim .hero-copy > .stores { animation-delay: .82s; }
.anim .hero-copy > .note { animation-delay: .94s; }
.anim .hero h1 { animation: none; }
.anim .hero h1 > span { animation: ligne 1s var(--ease-out) both; }
.anim .hero h1 > span:nth-child(2) { animation-delay: .18s; }
@keyframes monte { from { opacity: 0; translate: 0 26px; } }
@keyframes ligne { from { opacity: 0; translate: 0 60px; clip-path: inset(0 -50% 100% -50%); } to { clip-path: inset(-50% -50% -50% -50%); } }
@keyframes fondu { from { opacity: 0; } }

/* Coup de surligneur soleil sous « Du monde pour les partager. » */
.anim .hero h1 .accent {
  display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--sun), var(--sun)) no-repeat 0 92% / 0% 30%;
  animation: fondu .9s var(--ease-out) .25s both, surligne .9s var(--ease-out) 1.1s forwards;
}
.anim .hero h1 > span:first-child::after { content: "\A"; white-space: pre; }
@keyframes surligne { to { background-size: 100% 30%; } }

.anim .hero-img { animation: posee 1.1s var(--ease-pop) .25s both; translate: var(--hx, 0) var(--hy, 0); transition: translate .4s var(--ease-out); }
@keyframes posee { from { opacity: 0; scale: .82; rotate: -9deg; } }
.anim .sticker { animation: tampon .8s var(--ease-pop) 1s both, balance 6s ease-in-out 2s infinite; translate: calc(var(--hx, 0) * -1.6) calc(var(--hy, 0) * -1.6); transition: translate .4s var(--ease-out); }
@keyframes tampon { from { opacity: 0; scale: 2.2; rotate: 40deg; } 60% { opacity: 1; } }
@keyframes balance { 50% { rotate: -6deg; } }
.anim .photo-label { animation: glisse .8s var(--ease-out) 1.25s both; }
@keyframes glisse { from { opacity: 0; translate: -60px 0; } }

/* Gribouillis flottants */
.doodles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero > *:not(.doodles) { position: relative; z-index: 1; }
.doodle { position: absolute; width: var(--w, 44px); translate: 0 calc(var(--sy, 0) * var(--k, .2) * 1px); }
.doodle svg { display: block; width: 100%; height: auto; overflow: visible; }
.anim .doodle svg { animation: flotte var(--t, 7s) ease-in-out var(--dl, 0s) infinite, apparait .7s var(--ease-pop) calc(1.2s + var(--dl, 0s)) both; }
html:not(.anim) .doodles { display: none; }
@keyframes flotte { 50% { transform: translateY(-14px) rotate(var(--r, 12deg)); } }
@keyframes apparait { from { opacity: 0; scale: 0; } }

/* ---------- Bande : défilé continu ---------- */
.anim .chapter-items { flex: 1 1 360px; min-width: 0; overflow: hidden; display: block; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee { display: flex; width: max-content; gap: 36px; animation: defile 26s linear infinite; }
.marquee > span { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; white-space: nowrap; }
.marquee > span::after { content: "✦"; color: var(--sun); margin-left: 26px; }
.chapter-strip:hover .marquee { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
html:not(.anim) .marquee { animation: none; flex-wrap: wrap; width: auto; gap: 12px 32px; }
html:not(.anim) .marquee > span.dup, html:not(.anim) .marquee > span.extra { display: none; }
html:not(.anim) .marquee > span::after { content: none; }

/* ---------- Les quatre piliers : affiches qui s'empilent ---------- */
/* html.pile est posée par motion.js dès 700 px de large et 500 px de haut
   (ordinateur, iPad dans les deux sens). --top accroche plus haut une affiche
   plus haute que l'écran. Sur un cellulaire, les affiches défilent normalement. */
.anim.pile .poster { position: sticky; top: var(--top, calc(100px + var(--i, 0) * 18px)); transform-origin: 50% 0; transform: scale(calc(1 - var(--stack, 0) * .06)); filter: brightness(calc(1 - var(--stack, 0) * .14)); }
.anim.pile .poster-list { gap: 56px; }
.anim .poster .icon { transition: rotate .4s var(--ease-pop), scale .4s var(--ease-pop); }
.anim .poster:hover .icon { rotate: -12deg; scale: 1.12; }

/* Chiffres qui roulent */
/* nowrap : sans lui, le navigateur peut couper « 02 » entre ses deux chiffres. */
.poster-num { white-space: nowrap; }
.digit { display: inline-block; overflow: hidden; vertical-align: top; }
.digit > span { display: inline-block; }
.anim .poster-num .digit > span { translate: 0 105%; transition: translate .8s var(--ease-pop); transition-delay: calc(var(--j, 0) * .09s + .1s); }
.anim .poster.in .poster-num .digit > span { translate: 0 0; }

/* 01 : bouton qui appelle */
.anim .poster-0 .vignette .btn-forest { animation: appel 2.4s ease-out infinite; }
@keyframes appel { 0% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 0 rgba(18, 77, 57, .45); } 70%, 100% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 14px rgba(18, 77, 57, 0); } }
.anim .poster-0 .stamp-sun svg { animation: eclair 1.8s steps(1) infinite; }
@keyframes eclair { 0%, 100% { opacity: 1; } 85% { opacity: .25; } }

/* 02 : la conversation s'écrit */
.anim .poster-1 .bubble { opacity: 0; scale: .6; transform-origin: 0 100%; }
.anim .poster-1 .bubble-me { transform-origin: 100% 100%; }
.anim .poster-1.in .bubble { animation: bulle .5s var(--ease-pop) both; }
.anim .poster-1.in .bubble:nth-child(1) { animation-delay: .5s; }
.anim .poster-1.in .bubble:nth-child(2) { animation-delay: 1.6s; }
.anim .poster-1.in .bubble:nth-child(3) { animation-delay: 2.7s; }
@keyframes bulle { to { opacity: 1; scale: 1; } }
.typing { align-self: flex-end; display: none; gap: 5px; padding: 12px 14px; border: var(--line); border-radius: 16px 16px 4px 16px; background: var(--sun); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: points 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes points { 0%, 60%, 100% { translate: 0 0; opacity: .4; } 30% { translate: 0 -5px; opacity: 1; } }
.anim .poster-1.in .typing { display: inline-flex; animation: bulle .4s var(--ease-pop) 3.6s both; opacity: 0; scale: .6; }

/* 03 : des voisins s'ajoutent */
.avatars { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.avatars b { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -8px; border: var(--line); border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--ink); }
.avatars b:first-child { margin-left: 0; background: var(--sky); } .avatars b:nth-child(2) { background: var(--rose); }
html:not(.anim) .avatars { display: none; }
.anim .poster-2 .avatars b { scale: 0; }
.anim .poster-2.in .avatars b { animation: pop .5s var(--ease-pop) both; }
.anim .poster-2.in .avatars b:nth-child(1) { animation-delay: .8s; } .anim .poster-2.in .avatars b:nth-child(2) { animation-delay: 1.3s; }
@keyframes pop { to { scale: 1; } }

/* 04 : coups de tampon */
.anim .poster-3 .stamp { opacity: 0; }
.anim .poster-3.in .stamp { animation: coup-de-tampon .5s var(--ease-pop) both; }
.anim .poster-3.in .stamps .stamp:nth-child(1) { animation-delay: .4s; }
.anim .poster-3.in .stamps .stamp:nth-child(2) { animation-delay: .6s; }
.anim .poster-3.in .stamps .stamp:nth-child(3) { animation-delay: .8s; }
.anim .poster-3.in .stamps .stamp:nth-child(4) { animation-delay: 1s; }
.anim .poster-3.in .vignette .stamp { animation-delay: 1.4s; }
.anim .poster-3.in .vignette .stamp + .stamp { animation-delay: 1.6s; }
@keyframes coup-de-tampon { from { opacity: 0; scale: 1.9; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* ---------- Objets : barre « Je veux… » vivante ---------- */
.seg { transition: background .25s, color .25s, translate .25s var(--ease-pop), box-shadow .25s; }
.anim .seg { cursor: pointer; }
.anim .seg:hover { translate: 0 -3px; }
.anim .seg.on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--terra); }
.anim .seg-all:not(.on) { background: var(--white); color: var(--ink); box-shadow: none; }
.anim .seg.on svg { animation: hop .5s var(--ease-pop); }
@keyframes hop { 40% { translate: 0 -6px; rotate: -10deg; } }
.anim .mode-card { transition: translate .4s var(--ease-pop), box-shadow .4s var(--ease-pop), opacity .3s, filter .3s; }
.anim .mode-grid.focus .mode-card { opacity: .45; filter: grayscale(.6); }
.anim .mode-grid.focus .mode-card.hl { opacity: 1; filter: none; translate: -4px -10px; box-shadow: 10px 14px 0 var(--ink); }
.anim .mode-card.hl .mode-top svg { animation: tourne 1.6s var(--ease-out); }
.anim .mode-loan.hl .mode-top svg { animation: tourne-full 1.2s var(--ease-out); }
@keyframes tourne { 30% { rotate: -14deg; scale: 1.2; } 60% { rotate: 8deg; } }
@keyframes tourne-full { to { rotate: 360deg; } }
.anim .mode-card.rv { translate: 0 40px; rotate: 3deg; transition-property: opacity, translate, rotate, box-shadow, filter; }
.anim .mode-card.rv.in { rotate: 0deg; }
.anim .mode-grid.focus .mode-card.hl.rv.in { translate: -4px -10px; }

/* ---------- Cartes qui suivent la souris ---------- */
.anim .tilt { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s var(--ease-out), opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay: 0s, var(--d, 0s), var(--d, 0s); }
.anim .tilt.moving { transition-duration: .08s, .7s, .7s; }
.anim .hosp-card .icon { transition: rotate .4s var(--ease-pop); }
.anim .hosp-card:hover .icon { rotate: 14deg; }

/* ---------- Départ : le chemin se trace ---------- */
@media (min-width: 801px) {
  .start-list { position: relative; }
  .anim .start-list::before { content: ""; position: absolute; top: 28px; left: 28px; right: 10%; border-top: 3px dashed var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease-out) .2s; z-index: 0; }
  .anim .start-list.in::before { transform: scaleX(1); }
  .start-list li { position: relative; z-index: 1; }
}
.anim .start-num { scale: 0; transition: scale .6s var(--ease-pop); transition-delay: calc(var(--j, 0) * .45s + .2s); }
.anim .start-list.in .start-num { scale: 1; }

/* ---------- Questions : ouverture douce ---------- */
.anim .faq details[open] p { animation: deplie .45s var(--ease-out); }
@keyframes deplie { from { opacity: 0; translate: 0 -10px; } }
.anim .faq summary { transition: background .2s; }
.anim .faq summary:hover { background: color-mix(in srgb, var(--sun) 40%, var(--white)); }

/* ---------- Fondateur ---------- */
.anim .founder-card.rv { rotate: 6deg; transition-property: opacity, translate, rotate; transition-timing-function: var(--ease-pop); }
.anim .founder-card.rv.in { rotate: 0deg; }
.anim .avatar { animation: halo 3s ease-out infinite; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(194, 84, 47, .5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(194, 84, 47, 0); } }

/* ---------- Appel final ---------- */
.final-cta { position: relative; overflow: hidden; }
.final-inner { position: relative; z-index: 1; }
.final-cta .doodles { z-index: 0; }

/* ---------- Boutons magnétiques ---------- */
.anim .btn { translate: var(--mx, 0) var(--my, 0); transition: transform .12s ease, box-shadow .12s ease, translate .3s var(--ease-out); }

/* ---------- Confettis ---------- */
.confetti { position: fixed; z-index: 200; width: 12px; height: 12px; border: 2px solid var(--ink); pointer-events: none; animation: confetti 1.2s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes confetti { to { translate: var(--cx) var(--cy); rotate: var(--cr); opacity: 0; } }


/* Au cellulaire, l'accueil passe en une colonne : le soleil chevauchait la
   petite ligne « ON EST BIEN, ENSEMBLE. ». On le range dans le coin droit. */
@media (max-width: 800px) {
  .hero .doodle:first-child { left: auto !important; right: 2%; top: 1% !important; --w: 40px !important; }
}