/* Layout: filter bar on top, grid of illustrated project cards with community stars, full project sheet with a rating form */
:root{
  --bg:#eef1f4; --card:#fbfcfd; --ink:#1f2a37; --muted:#5b6878; --line:#d5dbe3;
  --kraft:#c9955b; --kraft-soft:#ecd7bd; --tape:#f2c230; --tape-soft:#fbeeb8;
  --accent:#2f6fd1; --accent-soft:#dce7fa; --warn:#b4431f; --warn-soft:#fbe3d8; --ok:#2e7d4f; --ok-soft:#dcf1e3;
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141a21; --card:#1c242e; --ink:#e6ebf1; --muted:#9aa7b6; --line:#2e3946;
  --kraft:#b98552; --kraft-soft:#3a2d20; --tape:#e0b22a; --tape-soft:#3b3219;
  --accent:#6fa2f0; --accent-soft:#1f3150; --warn:#f08a64; --warn-soft:#3d2319; --ok:#6fcf97; --ok-soft:#1b3326; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141a21; --card:#1c242e; --ink:#e6ebf1; --muted:#9aa7b6; --line:#2e3946;
  --kraft:#b98552; --kraft-soft:#3a2d20; --tape:#e0b22a; --tape-soft:#3b3219;
  --accent:#6fa2f0; --accent-soft:#1f3150; --warn:#f08a64; --warn-soft:#3d2319; --ok:#6fcf97; --ok-soft:#1b3326; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;background-attachment:fixed}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:28px 64px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
header h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;margin:0;text-wrap:balance}
header h1 span{background:var(--tape);color:#1f2a37;padding:0 .25em;display:inline-block;transform:rotate(-1.5deg)}
header p{color:var(--muted);max-width:62ch;margin:.6rem 0 0}
.pulse{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.pulse span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;font-size:.88rem;font-variant-numeric:tabular-nums}
.filters{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flabel{font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:118px}
.chip{font:inherit;font-size:.95rem;border:1.5px solid var(--line);background:transparent;color:var(--ink);
  border-radius:999px;padding:.35rem .85rem;cursor:pointer;min-height:38px}
.chip.age{min-width:44px;padding:.35rem .6rem;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--card)}
.chip:focus-visible,.card:focus-visible,.btn:focus-visible,.close:focus-visible,.star:focus-visible,.send:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.resbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:22px 2px 12px}
.resbar strong{font-family:var(--display);font-size:1.25rem}
.btn{font:inherit;border:0;background:none;color:var(--accent);cursor:pointer;text-decoration:underline;padding:.3rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:left;font:inherit;color:inherit;
  cursor:pointer;display:flex;flex-direction:column;padding:0;transition:transform .15s ease, box-shadow .15s ease;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px -12px rgba(20,30,45,.45)}
.card .pic{background:var(--kraft-soft);aspect-ratio:16/10;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.card .pic svg{width:92%;height:auto}
.card .body{padding:14px 16px 16px;display:grid;gap:8px;min-width:0}
.card h3{font-family:var(--display);font-weight:800;font-size:1.2rem;margin:0;line-height:1.2}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.done{position:absolute;top:10px;left:10px;background:var(--ok);color:var(--card);font-size:.78rem;font-weight:700;border-radius:999px;padding:.15rem .6rem}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.8rem;border-radius:6px;padding:.1rem .5rem;background:var(--bg);border:1px solid var(--line);white-space:nowrap}
.tag.t{background:var(--tape-soft);border-color:transparent}
.rate{font-size:.9rem;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.rate b{color:var(--ink)}.rate .s{color:var(--tape);letter-spacing:1px;font-size:1rem}
.rate .none{color:var(--muted);font-style:italic}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:28px;text-align:center;color:var(--muted);grid-column:1/-1}
/* sheet */

.panel{background:var(--card);color:var(--ink);border-radius:16px;max-width:760px;width:100%;overflow:hidden;box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
.panel .hero{background:var(--kraft-soft);position:relative;padding:16px;display:grid;place-items:center}
.panel .hero svg{width:100%;max-width:560px;height:auto}

.pbody{padding:20px 22px 26px;display:grid;gap:18px}
.pbody h2{font-family:var(--display);font-weight:800;font-size:1.8rem;margin:0;line-height:1.1;text-wrap:balance}
.pbody h4{font-family:var(--display);font-size:1.1rem;margin:0 0 8px}
.lead{margin:0;color:var(--muted);max-width:65ch}
.mats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mats label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.mats input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.mats input:checked + span{text-decoration:line-through;color:var(--muted)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;background:var(--tape);color:#1f2a37;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.95rem}
.box{border-radius:10px;padding:12px 14px}
.box.why{background:var(--accent-soft)}
.box.fix{background:var(--bg);border:1px solid var(--line)}
.box.safe{background:var(--warn-soft)}
.box.safe strong{color:var(--warn)}
.box ul{margin:4px 0 0;padding-left:18px}
.box p{margin:0}
/* rating */
.review{border:2px solid var(--tape);border-radius:14px;padding:16px;display:grid;gap:12px;background:var(--tape-soft)}
.review h4{margin:0}
.stars{display:flex;gap:4px}
.star{font-size:2rem;line-height:1;border:0;background:none;cursor:pointer;color:var(--line);padding:2px 4px}
.star.on{color:var(--tape);text-shadow:0 0 0 var(--ink)}
.star.on{-webkit-text-stroke:1px var(--ink)}
.rrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rrow label{font-weight:700;font-size:.9rem}
.rrow select,.review textarea{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:.35rem .5rem}
.review textarea{width:100%;min-height:70px;resize:vertical}
.send{font:inherit;font-weight:700;border:0;background:var(--accent);color:var(--card);border-radius:999px;padding:.55rem 1.2rem;cursor:pointer;justify-self:start}
.send[disabled]{opacity:.5;cursor:not-allowed}
.rmsg{font-size:.9rem;color:var(--muted);margin:0}
.rmsg.ok{color:var(--ok);font-weight:700}
.others{display:grid;gap:10px}
.op{border-bottom:1px solid var(--line);padding-bottom:10px}
.op:last-child{border-bottom:0}
.op .top{display:flex;gap:8px;align-items:center;font-size:.88rem;color:var(--muted)}
.op .top .s{color:var(--tape);-webkit-text-stroke:.5px var(--ink)}
.op p{margin:4px 0 0}
/* illustration tokens */
.ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.thin{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.dash{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.arr{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fk{fill:var(--kraft);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ft{fill:var(--tape);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.fw{fill:var(--card);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.fa{fill:var(--accent);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.fs{fill:var(--accent-soft);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.fr{fill:var(--warn);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.lbl{fill:var(--ink);font-family:var(--body);font-size:12px;font-weight:700}
@media (max-width:560px){.flabel{min-width:100%}.pbody{padding:18px 16px 22px}.pbody h2{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

[hidden]{display:none!important}
.page .panel{border-radius:16px;overflow:hidden}
/* pages (in addition to the prototype styles) */
a.card{text-decoration:none;color:inherit}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.brand{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--ink);text-decoration:none}
.brand span{background:var(--tape);color:#1f2a37;padding:0 .2em}
.back{color:var(--accent);font-weight:700;text-decoration:none}
.back:hover{text-decoration:underline}
.back:focus-visible,.brand:focus-visible,a.card:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.page .panel{max-width:760px;margin:0 auto;box-shadow:0 8px 30px -18px rgba(20,30,45,.45);border:1px solid var(--line)}
.ptitle{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);margin:0;line-height:1.1;text-wrap:balance}
.pbody h2{font-family:var(--display);font-size:1.15rem;margin:0 0 8px}
.review h2{margin:0}
.rrow input[type="text"],.rrow input:not([type]){font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:.35rem .5rem;min-width:0;flex:1 1 160px}
.rrow select:focus-visible,.rrow input:focus-visible,.review textarea:focus-visible,.mats input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.foot{margin-top:48px;color:var(--muted);font-size:.9rem;text-align:center}
.foot a{color:var(--muted)}
/* stats */
.sform{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:10px;max-width:420px}
.sform input{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:.5rem .6rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.kpi span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.kpi b{font-family:var(--display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px}
table.stats{border-collapse:collapse;width:100%;min-width:560px;font-variant-numeric:tabular-nums}
table.stats th,table.stats td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:right}
table.stats th:first-child,table.stats td:first-child{text-align:left}
table.stats th button{font:inherit;font-weight:700;font-size:.85rem;background:none;border:0;color:var(--ink);cursor:pointer;padding:0}
table.stats td a{color:var(--accent);text-decoration:none}
table.stats tbody tr:last-child td{border-bottom:0}
.scom{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px}
/* vidéo YouTube */
.yt-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--ink)}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.ytplay{position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:14px;background:rgba(200,30,30,.92);color:#fff;font-size:22px;display:grid;place-items:center}
.yt-facade:hover .ytplay{background:#e21b1b}
.yt-facade:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
section > .rmsg{margin-top:6px}
/* créations des papas */
.crea{display:grid;gap:12px}
.crea h2{margin:0}
.crea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.crea-item{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.crea-item img,.crea-item video{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#000}
.crea-item figcaption{padding:8px 10px;font-size:.88rem;display:grid;gap:6px}
.crea-send{border:2px dashed var(--line);border-radius:12px;padding:12px 14px}
.crea-send[open]{border-color:var(--accent)}
.crea-send summary{cursor:pointer;font-weight:700;color:var(--accent)}
.crea-send form{display:grid;gap:10px;margin-top:10px}
.filepick{display:block;border:1.5px solid var(--line);border-radius:10px;padding:14px;text-align:center;background:var(--card);cursor:pointer;font-weight:700;overflow-wrap:anywhere}
.filepick input{position:absolute;opacity:0;width:1px;height:1px}
.filepick:focus-within{outline:3px solid var(--accent);outline-offset:1px}
.cap{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:.45rem .6rem}
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
/* modération */
.crea-item.mod.pending{border:2px solid var(--tape)}
.crea-item.mod.rejected{opacity:.5}
.st{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.modbtns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.modbtns .send{padding:.35rem .9rem;font-size:.9rem}
.crea-grid > .rmsg{grid-column:1/-1;margin:0}
/* cachet "Fait" */
.stamp{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);border:4px solid var(--ok);border-radius:10px;padding:.15rem .7rem;transform:rotate(-12deg);background:color-mix(in srgb,var(--card) 70%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ok) 35%,transparent);pointer-events:none;opacity:.92}
.stamp.sm{top:10px;right:10px;left:auto;font-size:.95rem;border-width:3px;padding:.05rem .5rem}
.stamp.new{animation:stampin .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stampin{0%{transform:rotate(-12deg) scale(2.6);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:.92}}
@media (prefers-reduced-motion:reduce){.stamp.new{animation:none}}
/* où acheter */
.shop{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.shop ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.shop a{display:inline-block;background:var(--card);border:1.5px solid var(--accent);color:var(--accent);border-radius:12px;padding:.3rem .8rem;font-weight:700;font-size:.9rem;text-decoration:none}
.shop a::after{content:" ↗"}
.shop a:hover{background:var(--accent-soft)}
.shop a:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.shop .rmsg{margin:8px 0 0}

/* animated illustrations: parts move only inside .play (fiche) or on card hover */
[class^="a-"],[class*=" a-"]{transform-box:fill-box;transform-origin:center}
.a-sway,.a-swing,.a-flick,.a-armlift,.a-settle,.a-wobble,.a-shadow,.a-crank{transform-box:view-box}
.play .a-drive,a.card:hover .a-drive{animation:drive 2.6s linear infinite}
@keyframes drive{0%{transform:translateX(40px);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateX(-60px);opacity:0}}
.play .a-jitter,a.card:hover .a-jitter{animation:jitter 1.6s linear infinite}
@keyframes jitter{0%{transform:translate(20px,0)}10%{transform:translate(16px,-1.5px)}20%{transform:translate(12px,1px)}30%{transform:translate(8px,-1.5px)}40%{transform:translate(4px,1px)}50%{transform:translate(0,-1.5px)}60%{transform:translate(-4px,1px)}70%{transform:translate(-8px,-1.5px)}80%{transform:translate(-12px,1px)}90%{transform:translate(-16px,-1px)}100%{transform:translate(-20px,0)}}
.play .a-spin,a.card:hover .a-spin{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.play .a-updown,a.card:hover .a-updown{animation:updown 2.4s ease-in-out infinite}
@keyframes updown{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.play .a-roll,a.card:hover .a-roll{animation:roll 5s linear infinite}
@keyframes roll{0%{transform:translate(0,0);opacity:1}18%{transform:translate(118px,16px)}24%{transform:translate(132px,48px)}40%{transform:translate(66px,57px)}46%{transform:translate(48px,87px)}62%{transform:translate(106px,97px)}70%{transform:translate(126px,122px);opacity:1}88%{transform:translate(126px,122px);opacity:1}94%,100%{transform:translate(126px,122px);opacity:0}}
.a-flow{stroke-dashoffset:0}
.play .a-flow,a.card:hover .a-flow{animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.play .a-launch,a.card:hover .a-launch{animation:launch 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes launch{0%,30%{transform:translateY(0);opacity:1}75%{transform:translateY(-70px);opacity:1}76%,100%{transform:translateY(-70px);opacity:0}}
.play .a-press,a.card:hover .a-press{animation:press 2.4s ease-in infinite}
@keyframes press{0%,20%{transform:translateY(-18px)}30%,100%{transform:translateY(0)}}
.play .a-lift,a.card:hover .a-lift{animation:lift 3s ease-in-out infinite}
@keyframes lift{0%,10%{transform:translateY(0)}60%,80%{transform:translateY(-34px)}100%{transform:translateY(0)}}
.play .a-whirl,a.card:hover .a-whirl{animation:whirl 2.6s linear infinite}
@keyframes whirl{0%{transform:translateY(-30px) scaleX(1)}12%{transform:translateY(-22px) scaleX(-1)}25%{transform:translateY(-15px) scaleX(1)}37%{transform:translateY(-7px) scaleX(-1)}50%{transform:translateY(0) scaleX(1)}62%{transform:translateY(7px) scaleX(-1)}75%{transform:translateY(15px) scaleX(1)}87%{transform:translateY(22px) scaleX(-1)}100%{transform:translateY(30px) scaleX(1)}}
.play .a-glow,a.card:hover .a-glow{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,40%{filter:none;opacity:.55}50%,90%{filter:drop-shadow(0 0 6px var(--warn));opacity:1}100%{opacity:.55}}
.play .a-blink,a.card:hover .a-blink{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.play .a-sway,a.card:hover .a-sway{animation:sway 3s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.play .a-glide,a.card:hover .a-glide{animation:glide 3s ease-in-out infinite}
@keyframes glide{0%{transform:translate(50px,0)}50%{transform:translate(-50px,-3px)}100%{transform:translate(50px,0)}}
.play .a-swing,a.card:hover .a-swing{animation:swing 1.2s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.play .a-spray,a.card:hover .a-spray{animation:spray 1.2s ease-out infinite}
@keyframes spray{0%{transform:translate(12px,12px);opacity:0}30%{opacity:1}100%{transform:translate(-14px,-10px);opacity:0}}
.play .a-flick,a.card:hover .a-flick{animation:flick 2.4s ease-in infinite}
@keyframes flick{0%,40%{transform:rotate(8deg)}46%,100%{transform:rotate(-10deg)}}
.play .a-armlift,a.card:hover .a-armlift{animation:armlift 3.2s ease-in-out infinite}
@keyframes armlift{0%,15%,100%{transform:rotate(18deg)}50%,70%{transform:rotate(-6deg)}}
.play .a-push,a.card:hover .a-push{animation:push 3.2s ease-in-out infinite}
@keyframes push{0%,15%,100%{transform:translateX(-14px)}50%,70%{transform:translateX(0)}}
.play .a-wave,a.card:hover .a-wave{animation:wave 1.4s linear infinite}
@keyframes wave{0%{transform:translateX(-10px);opacity:0}25%{opacity:1}100%{transform:translateX(30px);opacity:0}}
.play .a-float,a.card:hover .a-float{animation:float 3.4s ease-in-out infinite}
@keyframes float{0%{transform:translate(0,-20px) rotate(-3deg)}50%{transform:translate(8px,6px) rotate(3deg)}100%{transform:translate(0,30px) rotate(-3deg);opacity:0}}
.play .a-sail,a.card:hover .a-sail{animation:sail 3s ease-in-out infinite}
@keyframes sail{0%{transform:translate(30px,0)}25%{transform:translate(10px,-3px)}50%{transform:translate(-10px,0)}75%{transform:translate(-30px,-3px)}100%{transform:translate(30px,0)}}
.a-pour{stroke-dasharray:6 6}
.play .a-pour,a.card:hover .a-pour{animation:flow .6s linear infinite}
.play .a-flip,a.card:hover .a-flip{animation:flip .35s linear infinite}
@keyframes flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.15)}}
.play .a-buzz,a.card:hover .a-buzz{animation:buzz .12s linear infinite}
@keyframes buzz{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
.play .a-attract,a.card:hover .a-attract{animation:attract 2s ease-in infinite}
@keyframes attract{0%,20%{transform:translateX(14px)}45%,85%{transform:translateX(0)}100%{transform:translateX(14px)}}
.play .a-settle,a.card:hover .a-settle{animation:settle 4s ease-out infinite}
@keyframes settle{0%{transform:rotate(70deg)}20%{transform:rotate(-35deg)}35%{transform:rotate(18deg)}50%{transform:rotate(-8deg)}62%,100%{transform:rotate(0)}}
.play .a-maze,a.card:hover .a-maze{animation:maze 5s ease-in-out infinite}
@keyframes maze{0%{transform:translate(0,0)}20%{transform:translate(138px,0)}35%{transform:translate(138px,58px)}50%{transform:translate(78px,58px)}62%{transform:translate(78px,98px)}82%,100%{transform:translate(188px,98px)}}
.play .a-strum,a.card:hover .a-strum{animation:buzz .1s linear infinite}
.play .a-drop,a.card:hover .a-drop{animation:drop 3s ease-in infinite}
@keyframes drop{0%{transform:translateY(-40px);opacity:0}25%{transform:translateY(0);opacity:1}90%{opacity:1}100%{opacity:0}}
.play .a-wobble,a.card:hover .a-wobble{animation:wobble 2.4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.play .a-shadow,a.card:hover .a-shadow{animation:shadowturn 6s linear infinite}
@keyframes shadowturn{0%{transform:rotate(60deg)}100%{transform:rotate(-60deg)}}
.play .a-zoom,a.card:hover .a-zoom{animation:zoom 2.2s ease-in infinite}
@keyframes zoom{0%{transform:translateX(-60px);opacity:1}80%{transform:translateX(110px);opacity:1}100%{transform:translateX(130px);opacity:0}}
.play .a-crank,a.card:hover .a-crank{animation:spin 3s linear infinite}
/* play control */
.hero{position:relative}
.playbtn{position:absolute;bottom:10px;right:10px;border:0;background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;border-radius:999px;padding:.4rem .9rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.playbtn:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
@media (prefers-reduced-motion:reduce){a.card:hover svg [class^="a-"],a.card:hover svg [class*=" a-"]{animation:none!important}}
.play .a-door,a.card:hover .a-door{animation:door 4s ease-in-out infinite}
@keyframes door{0%,15%{transform:translateY(0)}45%,65%{transform:translateY(-84px)}95%,100%{transform:translateY(0)}}
.a-grip{transform-origin:center bottom}
.play .a-grip,a.card:hover .a-grip{animation:grip 2.4s ease-in-out infinite}
@keyframes grip{0%,20%,100%{transform:scaleY(1)}45%,75%{transform:scaleY(.3)}}
.play .a-prop,a.card:hover .a-prop{animation:prop .18s linear infinite}
@keyframes prop{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
.play .a-carousel,a.card:hover .a-carousel{animation:carousel 3.2s linear infinite}
@keyframes carousel{0%{transform:translateX(-72px) scale(.85);opacity:.9}25%{transform:translateX(0) scale(1.1);opacity:1}50%{transform:translateX(72px) scale(.85);opacity:.9}75%{transform:translateX(0) scale(.7);opacity:.45}100%{transform:translateX(-72px) scale(.85);opacity:.9}}

/* effets bluffants */
.a-pendA,.a-pendB{transform-box:view-box}
.play .a-yoyo,a.card:hover .a-yoyo{animation:yoyo 3.4s ease-in-out infinite}
@keyframes yoyo{0%{transform:translateY(0)}45%,50%{transform:translateY(80px)}95%,100%{transform:translateY(0)}}
.a-yostring{transform-origin:center top}
.play .a-yostring,a.card:hover .a-yostring{animation:yostring 3.4s ease-in-out infinite}
@keyframes yostring{0%{transform:scaleY(1)}45%,50%{transform:scaleY(3)}95%,100%{transform:scaleY(1)}}
.play .a-uphill,a.card:hover .a-uphill{animation:uphill 3.6s ease-in-out infinite}
@keyframes uphill{0%,8%{transform:translate(0,0)}80%,92%{transform:translate(150px,-12px)}100%{transform:translate(150px,-12px);opacity:0}}
.play .a-soap,a.card:hover .a-soap{animation:soap 3.4s cubic-bezier(.1,.8,.3,1) infinite}
@keyframes soap{0%,18%{transform:translateX(0)}70%{transform:translateX(160px)}90%{transform:translateX(175px);opacity:1}100%{transform:translateX(175px);opacity:0}}
.play .a-ripple,a.card:hover .a-ripple{animation:blink 3.4s ease-in-out infinite}
.play .a-rise,a.card:hover .a-rise{animation:rise 2s ease-out infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.play .a-drivefwd,a.card:hover .a-drivefwd{animation:drivefwd 4s ease-in infinite}
@keyframes drivefwd{0%,10%{transform:translateX(30px);opacity:1}90%{transform:translateX(-50px);opacity:1}100%{transform:translateX(-50px);opacity:0}}
.play .a-lower,a.card:hover .a-lower{animation:lower 4s ease-in infinite}
@keyframes lower{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(50px)}}
.play .a-pendA,a.card:hover .a-pendA{animation:pendA 10s linear infinite}
.play .a-pendB,a.card:hover .a-pendB{animation:pendB 10s linear infinite}
@keyframes pendA{0%{transform:rotate(0.0deg)}1%{transform:rotate(10.6deg)}2%{transform:rotate(18.5deg)}3%{transform:rotate(21.9deg)}4%{transform:rotate(19.7deg)}5%{transform:rotate(12.8deg)}6%{transform:rotate(2.7deg)}7%{transform:rotate(-7.9deg)}8%{transform:rotate(-16.4deg)}9%{transform:rotate(-20.8deg)}10%{transform:rotate(-19.9deg)}11%{transform:rotate(-14.2deg)}12%{transform:rotate(-5.1deg)}13%{transform:rotate(5.0deg)}14%{transform:rotate(13.6deg)}15%{transform:rotate(18.6deg)}16%{transform:rotate(18.9deg)}17%{transform:rotate(14.6deg)}18%{transform:rotate(6.8deg)}19%{transform:rotate(-2.3deg)}20%{transform:rotate(-10.5deg)}21%{transform:rotate(-15.7deg)}22%{transform:rotate(-16.9deg)}23%{transform:rotate(-13.9deg)}24%{transform:rotate(-7.7deg)}25%{transform:rotate(-0.0deg)}26%{transform:rotate(7.3deg)}27%{transform:rotate(12.3deg)}28%{transform:rotate(14.0deg)}29%{transform:rotate(12.2deg)}30%{transform:rotate(7.6deg)}31%{transform:rotate(1.5deg)}32%{transform:rotate(-4.3deg)}33%{transform:rotate(-8.6deg)}34%{transform:rotate(-10.4deg)}35%{transform:rotate(-9.5deg)}36%{transform:rotate(-6.4deg)}37%{transform:rotate(-2.2deg)}38%{transform:rotate(2.0deg)}39%{transform:rotate(5.1deg)}40%{transform:rotate(6.5deg)}41%{transform:rotate(6.0deg)}42%{transform:rotate(4.2deg)}43%{transform:rotate(1.8deg)}44%{transform:rotate(-0.5deg)}45%{transform:rotate(-2.0deg)}46%{transform:rotate(-2.5deg)}47%{transform:rotate(-2.1deg)}48%{transform:rotate(-1.2deg)}49%{transform:rotate(-0.3deg)}50%{transform:rotate(-0.0deg)}51%{transform:rotate(0.3deg)}52%{transform:rotate(1.2deg)}53%{transform:rotate(2.1deg)}54%{transform:rotate(2.5deg)}55%{transform:rotate(2.0deg)}56%{transform:rotate(0.5deg)}57%{transform:rotate(-1.8deg)}58%{transform:rotate(-4.2deg)}59%{transform:rotate(-6.0deg)}60%{transform:rotate(-6.5deg)}61%{transform:rotate(-5.1deg)}62%{transform:rotate(-2.0deg)}63%{transform:rotate(2.2deg)}64%{transform:rotate(6.4deg)}65%{transform:rotate(9.5deg)}66%{transform:rotate(10.4deg)}67%{transform:rotate(8.6deg)}68%{transform:rotate(4.3deg)}69%{transform:rotate(-1.5deg)}70%{transform:rotate(-7.6deg)}71%{transform:rotate(-12.2deg)}72%{transform:rotate(-14.0deg)}73%{transform:rotate(-12.3deg)}74%{transform:rotate(-7.3deg)}75%{transform:rotate(-0.0deg)}76%{transform:rotate(7.7deg)}77%{transform:rotate(13.9deg)}78%{transform:rotate(16.9deg)}79%{transform:rotate(15.7deg)}80%{transform:rotate(10.5deg)}81%{transform:rotate(2.3deg)}82%{transform:rotate(-6.8deg)}83%{transform:rotate(-14.6deg)}84%{transform:rotate(-18.9deg)}85%{transform:rotate(-18.6deg)}86%{transform:rotate(-13.6deg)}87%{transform:rotate(-5.0deg)}88%{transform:rotate(5.1deg)}89%{transform:rotate(14.2deg)}90%{transform:rotate(19.9deg)}91%{transform:rotate(20.8deg)}92%{transform:rotate(16.4deg)}93%{transform:rotate(7.9deg)}94%{transform:rotate(-2.7deg)}95%{transform:rotate(-12.8deg)}96%{transform:rotate(-19.7deg)}97%{transform:rotate(-21.9deg)}98%{transform:rotate(-18.5deg)}99%{transform:rotate(-10.6deg)}100%{transform:rotate(-0.0deg)}}
@keyframes pendB{0%{transform:rotate(0.0deg)}1%{transform:rotate(0.3deg)}2%{transform:rotate(1.2deg)}3%{transform:rotate(2.1deg)}4%{transform:rotate(2.5deg)}5%{transform:rotate(2.0deg)}6%{transform:rotate(0.5deg)}7%{transform:rotate(-1.8deg)}8%{transform:rotate(-4.2deg)}9%{transform:rotate(-6.0deg)}10%{transform:rotate(-6.5deg)}11%{transform:rotate(-5.1deg)}12%{transform:rotate(-2.0deg)}13%{transform:rotate(2.2deg)}14%{transform:rotate(6.4deg)}15%{transform:rotate(9.5deg)}16%{transform:rotate(10.4deg)}17%{transform:rotate(8.6deg)}18%{transform:rotate(4.3deg)}19%{transform:rotate(-1.5deg)}20%{transform:rotate(-7.6deg)}21%{transform:rotate(-12.2deg)}22%{transform:rotate(-14.0deg)}23%{transform:rotate(-12.3deg)}24%{transform:rotate(-7.3deg)}25%{transform:rotate(-0.0deg)}26%{transform:rotate(7.7deg)}27%{transform:rotate(13.9deg)}28%{transform:rotate(16.9deg)}29%{transform:rotate(15.7deg)}30%{transform:rotate(10.5deg)}31%{transform:rotate(2.3deg)}32%{transform:rotate(-6.8deg)}33%{transform:rotate(-14.6deg)}34%{transform:rotate(-18.9deg)}35%{transform:rotate(-18.6deg)}36%{transform:rotate(-13.6deg)}37%{transform:rotate(-5.0deg)}38%{transform:rotate(5.1deg)}39%{transform:rotate(14.2deg)}40%{transform:rotate(19.9deg)}41%{transform:rotate(20.8deg)}42%{transform:rotate(16.4deg)}43%{transform:rotate(7.9deg)}44%{transform:rotate(-2.7deg)}45%{transform:rotate(-12.8deg)}46%{transform:rotate(-19.7deg)}47%{transform:rotate(-21.9deg)}48%{transform:rotate(-18.5deg)}49%{transform:rotate(-10.6deg)}50%{transform:rotate(-0.0deg)}51%{transform:rotate(10.6deg)}52%{transform:rotate(18.5deg)}53%{transform:rotate(21.9deg)}54%{transform:rotate(19.7deg)}55%{transform:rotate(12.8deg)}56%{transform:rotate(2.7deg)}57%{transform:rotate(-7.9deg)}58%{transform:rotate(-16.4deg)}59%{transform:rotate(-20.8deg)}60%{transform:rotate(-19.9deg)}61%{transform:rotate(-14.2deg)}62%{transform:rotate(-5.1deg)}63%{transform:rotate(5.0deg)}64%{transform:rotate(13.6deg)}65%{transform:rotate(18.6deg)}66%{transform:rotate(18.9deg)}67%{transform:rotate(14.6deg)}68%{transform:rotate(6.8deg)}69%{transform:rotate(-2.3deg)}70%{transform:rotate(-10.5deg)}71%{transform:rotate(-15.7deg)}72%{transform:rotate(-16.9deg)}73%{transform:rotate(-13.9deg)}74%{transform:rotate(-7.7deg)}75%{transform:rotate(-0.0deg)}76%{transform:rotate(7.3deg)}77%{transform:rotate(12.3deg)}78%{transform:rotate(14.0deg)}79%{transform:rotate(12.2deg)}80%{transform:rotate(7.6deg)}81%{transform:rotate(1.5deg)}82%{transform:rotate(-4.3deg)}83%{transform:rotate(-8.6deg)}84%{transform:rotate(-10.4deg)}85%{transform:rotate(-9.5deg)}86%{transform:rotate(-6.4deg)}87%{transform:rotate(-2.2deg)}88%{transform:rotate(2.0deg)}89%{transform:rotate(5.1deg)}90%{transform:rotate(6.5deg)}91%{transform:rotate(6.0deg)}92%{transform:rotate(4.2deg)}93%{transform:rotate(1.8deg)}94%{transform:rotate(-0.5deg)}95%{transform:rotate(-2.0deg)}96%{transform:rotate(-2.5deg)}97%{transform:rotate(-2.1deg)}98%{transform:rotate(-1.2deg)}99%{transform:rotate(-0.3deg)}100%{transform:rotate(-0.0deg)}}

.play .a-comeback,a.card:hover .a-comeback{animation:comeback 4.4s ease-in-out infinite}
@keyframes comeback{0%{transform:translateX(0) rotate(0)}40%,52%{transform:translateX(150px) rotate(360deg)}95%,100%{transform:translateX(0) rotate(0)}}
.play .a-climb,a.card:hover .a-climb{animation:climb 4s ease-in-out infinite}
@keyframes climb{0%{transform:translateY(0) rotate(0)}12%{transform:translateY(-10px) rotate(-5deg)}24%{transform:translateY(-20px) rotate(5deg)}36%{transform:translateY(-30px) rotate(-5deg)}48%{transform:translateY(-40px) rotate(5deg)}60%,75%{transform:translateY(-50px) rotate(0)}100%{transform:translateY(0)}}
.a-jet{transform-origin:center bottom}
.play .a-jet,a.card:hover .a-jet{animation:jet .6s linear infinite}
@keyframes jet{0%{stroke-dashoffset:0;transform:scaleY(1)}50%{transform:scaleY(.88)}100%{stroke-dashoffset:-20;transform:scaleY(1)}}
.a-fill{transform-origin:center bottom}
.play .a-fill,a.card:hover .a-fill{animation:fill 6s linear infinite}
@keyframes fill{0%{transform:scaleY(.05)}75%{transform:scaleY(1)}86%,100%{transform:scaleY(.05)}}
.a-drain{opacity:0}
.play .a-drain,a.card:hover .a-drain{animation:drain 6s linear infinite}
@keyframes drain{0%,74%{opacity:0}76%,86%{opacity:1}88%,100%{opacity:0}}
/* badge création */
.ours{display:inline-block;background:var(--ink);color:var(--card);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:.12rem .5rem}