/* Accueil — même langage que les jeux : aplats, angles droits, aucune ombre */
:root{
  --bg:#F1F3FA; --paper:#FFFFFF; --ink:#1E1B3A; --muted:#55526E;
  --sun:#FFD23F; --coral:#FF6B57; --mint:#2EC4B6; --grape:#7B61FF;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --f-display:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5;font-weight:600}
.wrap{max-width:1080px;margin:0 auto;padding-block:max(24px,env(safe-area-inset-top)) max(40px,env(safe-area-inset-bottom));
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:16px}

.hero{background:var(--ink);color:#FFFFFF;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sticker{margin:0;display:inline-block;font-family:var(--f-display);font-weight:600;font-size:14px;padding:3px 10px;background:var(--sun);color:var(--ink);transform:rotate(-3deg)}
h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(48px,10vw,104px);line-height:.9;letter-spacing:-.02em;text-wrap:balance}
.lead{margin:0;max-width:34ch;font-size:clamp(19px,2.4vw,24px);line-height:1.35}
.who{margin:0;font-size:15px;color:#C9C6E6}

.section-title{margin:12px 0 0;font-family:var(--f-display);font-weight:700;font-size:28px}
.tools{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.tool{animation:enter 360ms var(--ease-out) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}}
.tool a{display:flex;flex-direction:column;height:100%;background:var(--paper);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out)}
.tool a:active{transform:scale(0.98)}
.tool a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.tool-top{background:var(--c);color:var(--ci);height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tool-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tool h3{margin:0;font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1.05}
.tool p{margin:0;color:var(--muted)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.tags li{font-size:13px;font-weight:700;padding:2px 8px;background:var(--bg)}
.go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;background:var(--c);color:var(--ci);
  font-family:var(--f-display);font-weight:600;font-size:18px;transition:background-color 150ms ease,color 150ms ease}
.go span{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .tool a:hover .go{background:var(--ink);color:#FFFFFF}
  .tool a:hover .go span{transform:translateX(4px)}
  .tool a:hover .art-rhythm i{animation-play-state:running}
}

/* illustrations : immobiles au repos, elles s'animent au survol de la carte */
.art-rhythm{display:flex;align-items:flex-end;gap:14px;height:70px}
.art-rhythm i{width:30px;height:30px;border-radius:50%;background:currentColor}
.art-rhythm i:nth-child(2){background:var(--sun)} .art-rhythm i:nth-child(4){background:#FFFFFF}
.art-rhythm i{animation:hop 1.4s var(--ease-in-out) infinite paused}
.art-rhythm i:nth-child(2){animation-delay:.35s} .art-rhythm i:nth-child(3){animation-delay:.7s} .art-rhythm i:nth-child(4){animation-delay:1.05s}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-20px)}}
.art-notes{width:180px;height:auto}
.art-grooves{display:grid;grid-template-columns:repeat(8,18px);gap:4px}
.art-grooves i{height:18px;background:rgba(255,255,255,.32)}
.art-grooves i.a{background:var(--sun)} .art-grooves i.b{background:var(--coral)} .art-grooves i.c{background:var(--grape)}

.how{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.how div{display:flex;gap:14px;align-items:flex-start;background:var(--paper);padding:18px}
.how b{flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--sun);font-family:var(--f-display);font-weight:700;font-size:20px}
.how p{margin:0;color:var(--muted)}
.how strong{color:var(--ink)}
.empty{background:var(--paper);padding:24px;color:var(--muted)}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:12px;font-size:14px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .tool{animation:fade 200ms ease both}
  @keyframes fade{from{opacity:0}}
  .art-rhythm i,.go span,.tool a{animation:none;transition:none}
  .tool a:active{transform:none}
}