/* Les dons après un service rendu (handoff Refontes/design_handoff_dons, 31/10/2026) : le bandeau et la fenêtre.
   Écrite à la main d'après les deux maquettes (la scène y porte la marmite de /don, pas le bocal). Classes dv-, tout
   sous .dv ; variables --dv-*. Module : public/app/js/popotam-don-moment.js. */
.dv{--dv-ink:#2A211B;--dv-ink2:#6A5C4C;--dv-muted:#9C8B79;--dv-line:#EEDFC2;--dv-line2:#E6D3AE;--dv-cream:#FFF8EA;--dv-cream2:#FCEFD9;--dv-orange:#F0682F;--dv-orange-d:#DA541E;--dv-green-d:#2C8B4E;--dv-green-bg:#E6F3E9;--dv-sun:#FFC53D;--dv-dark:#33261B;--dv-fd:"Bricolage Grotesque",var(--font-display,system-ui),sans-serif;--dv-fb:"Hanken Grotesk",var(--font-body,system-ui),sans-serif;--dv-fh:"Caveat",cursive;--dv-spring:cubic-bezier(.3,1.35,.45,1);--dv-ease:cubic-bezier(.2,.8,.2,1);font-family:var(--dv-fb);color:var(--dv-ink)}
.dv *,.dv *::before,.dv *::after{box-sizing:border-box}
.dv [hidden]{display:none!important}
.dv button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;margin:0}
.dv a{color:var(--dv-orange-d)}
.dv h2,.dv h3,.dv p{margin:0}

/* ---------- le bandeau ---------- */
.dv-pli{display:grid;grid-template-rows:1fr;margin:14px 0;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),opacity .4s,margin .55s cubic-bezier(.2,.8,.2,1)}
.dv-pli>div{min-height:0}
.dv-pli.dv-parti{grid-template-rows:0fr;opacity:0;margin:0}
.dv-carte{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;padding:12px 22px 12px 12px;border-radius:30px;background:#FFFCF5;border:2px solid var(--dv-ink);box-shadow:0 5px 0 var(--dv-ink);margin-bottom:5px;animation:dv-in .7s var(--dv-spring)}
.dv-sc{position:relative;min-height:216px;border-radius:22px;background:#FFE6A6;overflow:hidden}
.dv-sun{position:absolute;left:-36px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#FFD45E 0 55%,rgba(255,212,94,0) 56%),repeating-conic-gradient(rgba(255,197,61,.55) 0 8deg,transparent 8deg 22deg);transition:transform 1.2s var(--dv-ease)}
.dv-paid .dv-sun{transform:rotate(60deg) scale(1.2)}
.dv-cloth{position:absolute;left:0;right:0;bottom:0;height:40px;border-top:2px solid var(--dv-ink);background:repeating-linear-gradient(0deg,rgba(240,104,47,.42) 0 9px,transparent 9px 18px),repeating-linear-gradient(90deg,rgba(240,104,47,.42) 0 9px,transparent 9px 18px),#fff}
.dv-pp{position:absolute;left:4px;bottom:16px;z-index:1;width:132px;transition:transform .5s var(--dv-spring)}
.dv-pp svg{display:block;width:100%;height:auto}
.dv-sel .dv-pp{transform:rotate(4deg) translateX(4px)}
.dv-paid .dv-pp{animation:dv-hop .7s var(--dv-spring)}
.dv-pot{position:absolute;right:0;bottom:6px;width:170px}
.dv-pot svg{display:block;width:100%;height:auto}
.dv-hearts{position:absolute;left:62%;top:30px;pointer-events:none}
.dv-hearts i{position:absolute;width:14px;height:14px;background:#E8536F;transform:rotate(45deg);border-radius:3px 0 3px 3px;opacity:0;animation:dv-heart 1.8s var(--dv-ease) forwards;animation-delay:var(--d)}
.dv-hearts i::before,.dv-hearts i::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:inherit}
.dv-hearts i::before{left:-7px}.dv-hearts i::after{top:-7px}
.dv-ct{display:flex;flex-direction:column;gap:12px;padding:14px 34px 6px 0;min-width:0;container-type:inline-size}
.dv-hand{display:block;font:700 21px/1 var(--dv-fh);color:var(--dv-orange-d);transform:rotate(-2deg);transform-origin:left}
.dv-ct .dv-hand{margin-bottom:-6px}
.dv-ct h3{font:800 25px/1.15 var(--dv-fd);letter-spacing:-.02em;text-wrap:balance}
.dv mark{color:inherit;background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);padding:0 2px}
.dv mark.g{--hl:#BFE0C9}.dv mark.y{--hl:#FFD45E}
.dv-ct p{font-size:15px;line-height:1.5;color:var(--dv-ink2);text-wrap:pretty;max-width:560px}
.dv-ct p b{color:var(--dv-ink)}
.dv-tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.dv-tl{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:18px;background:var(--bg)!important;border:2px solid var(--dv-ink)!important;box-shadow:0 3px 0 var(--dv-ink);text-align:left;transform:rotate(var(--r));transition:transform .4s var(--dv-spring),box-shadow .25s}
.dv-tl:hover{transform:rotate(0) translateY(-3px);box-shadow:0 6px 0 var(--dv-ink)}
.dv-tl[aria-pressed="true"]{transform:rotate(0) translateY(-4px);box-shadow:0 7px 0 var(--dv-ink)}
.dv-il{flex:none;width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--dv-ink);display:grid;place-items:center;transition:transform .5s var(--dv-spring)}
.dv-tl:hover .dv-il{transform:rotate(-10deg)}
.dv-tl[aria-pressed="true"] .dv-il{transform:rotate(-14deg) scale(1.08)}
.dv-tl>span:not(.dv-il){display:flex;flex-direction:column;gap:2px;min-width:0}
.dv-tl small{font-size:13px;line-height:1.25;color:var(--dv-ink);text-wrap:balance}
.dv-tl b{font:800 21px/1 var(--dv-fd);letter-spacing:-.02em}
.dv-ok{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:var(--dv-ink);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--dv-spring)}
.dv-ok svg{width:15px;height:15px}
.dv-tl[aria-pressed="true"] .dv-ok{transform:scale(1)}
.dv-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;min-height:48px;margin-top:4px}
.dv-sg{display:flex;align-items:baseline;gap:8px;margin-right:auto;font-size:13.5px;color:var(--dv-ink2)}
.dv-sg b{font:700 22px/1 var(--dv-fh);color:var(--dv-orange-d)}
.dv-lk{display:inline-flex;align-items:center;font:700 13.5px var(--dv-fb)!important;color:var(--dv-orange-d)!important;text-decoration:underline;text-underline-offset:3px;min-height:36px}
.dv-lk:hover{color:var(--dv-ink)!important}
.dv-row .dv-later{margin-left:auto}
.dv-later{min-height:40px;padding:0 16px!important;border-radius:999px;border:1.5px solid var(--dv-line2)!important;background:#fff!important;font:700 13.5px var(--dv-fb)!important;color:var(--dv-ink2)!important;transition:all .2s}
.dv-later:hover{border-color:var(--dv-ink2)!important;color:var(--dv-ink)!important}
.dv-om{display:inline-flex;align-items:center;gap:4px;height:42px;padding:0 12px;border-radius:14px;background:#fff;border:2px solid var(--dv-ink)}
.dv-om input{width:54px;border:0;outline:0;font:800 18px var(--dv-fd);color:var(--dv-ink);background:none;padding:0}
.dv-om span{font:800 18px var(--dv-fd);color:var(--dv-muted)}
.dv-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-left:auto;padding:0 20px!important;border-radius:16px;background:var(--dv-orange)!important;color:#fff!important;font:800 16px var(--dv-fd)!important;box-shadow:0 4px 0 var(--dv-orange-d);transition:transform .2s var(--dv-spring),box-shadow .2s;white-space:nowrap;animation:dv-in .45s var(--dv-spring)}
.dv-cta:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--dv-orange-d)}
.dv-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--dv-orange-d)}
.dv .dv-cta{margin-left:auto}
.dv .dv-plein{margin:14px 0 0}
.dv-cta:disabled{opacity:.6;cursor:progress}
.dv-cta svg{width:18px;height:18px}
.dv-cta.dv-dk{background:var(--dv-dark)!important;box-shadow:0 4px 0 #000}
.dv-wh{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dv-wh div{padding:10px 12px;border-radius:14px;background:var(--dv-cream);font-size:13px;line-height:1.35;color:var(--dv-ink2)}
.dv-wh b{display:block;font:800 15px var(--dv-fd);color:var(--dv-ink)}
.dv-wh a{font-weight:700;margin-left:2px}
.dv-x{position:absolute!important;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%!important;display:grid!important;place-items:center;color:var(--dv-muted)!important;transition:background .2s,color .2s}
.dv-x:hover{background:var(--dv-cream2)!important;color:var(--dv-ink)!important}
.dv-x svg{width:18px;height:18px}
.dv-bye{display:flex;align-items:center;gap:10px;padding:6px 4px;font:700 20px var(--dv-fh)!important;color:var(--dv-ink2)!important;animation:dv-in .4s var(--dv-ease)}
.dv-bye svg{width:24px;height:24px;flex:none;color:#33A15B}
@container (max-width:560px){.dv-tl{flex-direction:column;align-items:center;text-align:center;padding:12px 6px 10px}.dv-tl>span:not(.dv-il){align-items:center}.dv-wh{grid-template-columns:1fr}}
/* Téléphone : une colonne, et une scène plus basse que la maquette (200 px) : sur l'accueil du téléphone, la carte
   de 450 px se lisait comme une demande d'argent (handoff don_accueil, 26/10/2026). */
@media (max-width:760px){
  /* Téléphone : sans l'illustration, et resserré (retour de Jérémy, 31/10/2026 : ~560 px, presque un écran). */
  .dv-carte{grid-template-columns:1fr;gap:0;padding:14px 14px 12px;border-radius:24px;box-shadow:0 4px 0 var(--dv-ink)}
  .dv-sc{display:none}
  .dv-ct{padding:0;gap:9px}
  .dv-ct .dv-hand{font-size:18px;margin:0 40px -4px 0}
  .dv-ct h3{font-size:19px;padding-right:28px}
  .dv-ct p{font-size:13.5px;line-height:1.45}
  .dv-tags{gap:8px;margin-top:2px}
  .dv-tl{padding:8px 4px 7px!important;gap:4px}
  .dv-il{width:38px;height:38px;border-width:1.5px}
  .dv-il svg{width:28px;height:28px}
  .dv-tl small{font-size:11.5px}
  .dv-tl b{font-size:16px}
  .dv-row{min-height:0;gap:6px 12px;margin-top:2px}
  .dv-sg{font-size:12.5px}.dv-sg b{font-size:19px}
  .dv-later{min-height:36px;padding:0 13px!important}
  .dv-cta{width:100%;min-height:46px}
  .dv-x{top:8px;right:8px}
}

/* ---------- la fenêtre ---------- */
.dv-voile{position:fixed;inset:0;z-index:440;background:rgba(51,38,27,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:dv-fade .3s var(--dv-ease)}
.dv-voile.dv-sort{opacity:0;transition:opacity .25s}
.dv-fen{position:relative;width:min(540px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#FFFCF5;border-radius:30px;box-shadow:0 30px 80px -30px rgba(60,30,10,.55),0 2px 0 rgba(255,255,255,.8) inset;animation:dv-rise .55s var(--dv-spring)}
.dv-fen .dv-x{top:14px;right:14px;width:40px;height:40px}
.dv-rc{position:relative;padding:26px 28px 22px;background:var(--dv-green-bg);border-radius:30px 30px 0 0}
.dv-rc::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:18px;background:radial-gradient(circle at 9px 0,var(--dv-green-bg) 8.5px,transparent 9px) 0 0/18px 18px repeat-x}
.dv-rc-h{display:flex;align-items:center;gap:14px;padding-right:30px}
.dv-av{flex:none;width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--dv-ink);box-shadow:0 3px 0 var(--dv-ink);display:grid;place-items:center;overflow:hidden}
.dv-av svg{width:54px;height:54px;margin-top:4px}
.dv-rc .dv-hand{font-size:19px;color:var(--dv-green-d);margin-bottom:4px}
.dv-rc h2{font:800 23px/1.15 var(--dv-fd);letter-spacing:-.02em;text-wrap:balance}
.dv-rc-t{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dv-rc-t span{display:inline-flex;align-items:baseline;gap:6px;padding:8px 13px;border-radius:14px;background:#fff;font:600 14px var(--dv-fb);color:var(--dv-ink2)}
.dv-rc-t b{font:800 17px var(--dv-fd);color:var(--dv-green-d)}
.dv-bd{padding:30px 28px 22px}
.dv-ask h3{margin:0 0 6px;font:800 20px/1.2 var(--dv-fd);letter-spacing:-.01em}
.dv-ask p{font-size:15px;line-height:1.5;color:var(--dv-ink2);text-wrap:pretty}
.dv-ig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.dv-it{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 12px!important;border-radius:20px;background:#fff!important;border:2px solid var(--dv-line)!important;text-align:center;transition:transform .35s var(--dv-spring),border-color .2s,box-shadow .25s}
.dv-it:hover{transform:translateY(-2px);border-color:var(--dv-line2)!important}
.dv-it[aria-pressed="true"]{border-color:var(--dv-ink)!important;box-shadow:0 5px 0 var(--dv-ink);transform:translateY(-3px)}
.dv-it .dv-il{width:58px;height:58px;margin-bottom:6px;border:0;background:var(--bg)}
.dv-it[aria-pressed="true"] .dv-il{transform:rotate(-8deg) scale(1.08)}
.dv-it small{font-size:13px;line-height:1.3;color:var(--dv-ink2);min-height:2.6em;display:flex;align-items:center;text-wrap:balance}
.dv-it b{font:800 20px var(--dv-fd);letter-spacing:-.02em}
.dv-fq{display:flex;justify-content:flex-end;margin-top:12px}
.dv-om-l{display:flex;margin-top:12px;height:auto;padding:6px 6px 6px 16px;border-radius:16px}
.dv-om-l input{flex:1;width:auto;min-width:0;font-size:20px}
.dv-om-l span{font-size:20px;padding-right:8px}
.dv-plein{display:flex;width:100%;min-height:56px;margin:14px 0 0;border-radius:18px;font-size:17px!important}
.dv-mt{margin-top:22px;padding-top:18px;border-top:1.5px dashed var(--dv-line)}
.dv-mt-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:14px;color:var(--dv-ink2)}
.dv-mt-h b{color:var(--dv-ink)}
.dv-bar{position:relative;height:12px;margin-top:9px;border-radius:999px;background:var(--dv-cream2);overflow:hidden}
.dv-bar i{position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--dv-sun);transition:width .9s var(--dv-ease)}
.dv-bar em{position:absolute;inset:0 auto 0 0;width:var(--v2,0);border-radius:inherit;background:var(--dv-orange);opacity:.85;transition:width .9s var(--dv-ease)}
.dv-bar i{z-index:1}
.dv-mt .dv-wh{margin-top:12px}
.dv-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.dv-sgn{font:500 13px var(--dv-fb);color:var(--dv-muted)}
.dv-ft .dv-later{min-height:44px}
.dv-ty{padding:40px 28px 28px;text-align:center}
.dv-big{width:130px;height:130px;margin:0 auto 6px;animation:dv-pop .6s var(--dv-spring)}
.dv-big svg{width:100%;height:100%}
.dv-ty .dv-hand{font-size:22px;transform-origin:center}
.dv-ty h2{margin:6px 0 8px;font:800 26px/1.15 var(--dv-fd);letter-spacing:-.02em;text-wrap:balance}
.dv-ty p{margin:0 auto;max-width:360px;font-size:15px;line-height:1.5;color:var(--dv-ink2);text-wrap:pretty}
.dv-ty .dv-mt{text-align:left;margin-top:24px}
.dv-ty .dv-plein{margin-top:20px}
@media (max-width:600px){
  .dv-voile{place-items:end center;padding:0}
  .dv-fen{width:100%;max-height:94vh;border-radius:28px 28px 0 0;animation:dv-sheet .5s var(--dv-ease)}
  .dv-fen::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:9px;background:rgba(42,33,27,.18);z-index:2}
  .dv-rc{padding:26px 20px 20px;border-radius:28px 28px 0 0}
  .dv-rc h2{font-size:20px}.dv-av{width:54px;height:54px}.dv-av svg{width:46px;height:46px}
  .dv-bd{padding:26px 20px 20px}
  .dv-ig{gap:8px}.dv-it{padding:12px 4px 10px!important}.dv-it .dv-il{width:50px;height:50px}.dv-it small{font-size:12.5px}.dv-it b{font-size:18px}
  .dv-wh{grid-template-columns:1fr}
}
@keyframes dv-in{from{opacity:0;transform:translateY(10px)}}
@keyframes dv-hop{40%{transform:translateY(-14px) rotate(-4deg)}}
@keyframes dv-heart{0%{opacity:0;transform:translate(0,10px) rotate(45deg) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),-70px) rotate(45deg) scale(1)}}
@keyframes dv-fade{from{opacity:0}}
@keyframes dv-rise{from{opacity:0;transform:translateY(30px) scale(.96)}}
@keyframes dv-sheet{from{transform:translateY(100%)}}
@keyframes dv-pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.dv *,.dv{animation:none!important;transition:none!important}}