/* ===== Les Mirteilles — design system v0 ===== */
:root{
  --myrtille:#5b3a9e;      /* violet myrtille */
  --myrtille-fonce:#3e2570;
  --indigo:#4263eb;
  --corail:#ff6b6b;
  --soleil:#ffd43b;
  --menthe:#38d9a9;
  --creme:#fff7ee;
  --encre:#2b2140;
  --blanc:#ffffff;
  --radius:26px;
  --ombre:0 10px 30px rgba(62,37,112,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Baloo 2",system-ui,sans-serif;
  color:var(--encre);
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(255,212,59,.25), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(66,99,235,.18), transparent 55%),
    var(--creme);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---- limaces baladeuses ---- */
.slugs{position:fixed;inset:0;pointer-events:none;z-index:0}
.slug{
  position:absolute;opacity:.18;
  width:var(--w,90px);height:calc(var(--w,90px)*0.45);
  animation:crawl var(--dur,60s) linear infinite;
}
.slug-shape{
  width:100%;height:100%;
  background:linear-gradient(160deg,#8a63d2,var(--myrtille) 70%);
  border-radius:70% 90% 42% 46% / 100% 100% 36% 36%;
  animation:scoot 2.6s ease-in-out infinite;
  transform-origin:bottom center;
}
.slug-shape::before,.slug-shape::after{ /* antennes + yeux */
  content:"";position:absolute;top:-38%;width:8%;height:52%;
  background:var(--myrtille);border-radius:999px;
}
.slug-shape::before{right:22%;transform:rotate(-14deg)}
.slug-shape::after{right:8%;transform:rotate(16deg)}
.slug.flip{transform:scaleX(-1)}
@keyframes crawl{
  from{translate:-160px 0}
  to{translate:110vw 0}
}
@keyframes scoot{ /* petit effet chenille */
  0%,100%{scale:1 1}
  50%{scale:1.12 0.9}
}

/* ---- topbar ---- */
.topbar{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--myrtille-fonce)}
.berry-dot{ /* mini-limace du logo */
  width:34px;height:16px;position:relative;
  background:linear-gradient(160deg,#8a63d2,var(--myrtille));
  border-radius:70% 90% 42% 46% / 100% 100% 36% 36%;
  box-shadow:0 3px 8px rgba(62,37,112,.35);
}
.berry-dot::after{content:"";position:absolute;top:-6px;right:6px;width:3px;height:8px;
  background:var(--myrtille);border-radius:999px;transform:rotate(14deg)}

/* ---- boutons ---- */
.btn{
  font-family:inherit;font-weight:700;color:#fff;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--corail),#ff8787);
  border-radius:999px;box-shadow:0 6px 0 #d64545, var(--ombre);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #d64545}
.btn-small{padding:10px 18px;font-size:15px}
.btn-big{padding:18px 42px;font-size:22px;margin-top:26px}

/* ---- hero ---- */
main{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px}
.hero{text-align:center;padding:40px 0 30px}
.title{
  font-size:clamp(52px,9vw,96px);font-weight:800;line-height:1.02;
  color:var(--myrtille);letter-spacing:-1px;
  text-shadow:0 3px 0 rgba(62,37,112,.12);
}
.title .ch{display:inline-block;white-space:pre}
.title .ch:nth-child(5n+1){color:var(--myrtille)}
.title .ch:nth-child(5n+2){color:var(--indigo)}
.title .ch:nth-child(5n+3){color:var(--corail)}
.title .ch:nth-child(5n+4){color:#0ca678}
.title .ch:nth-child(5n){color:#f76707}
.tagline{font-size:clamp(18px,2.6vw,24px);margin-top:12px;color:#5a4a7d}

/* ---- mascotte limace ---- */
.mascot{display:flex;justify-content:center;margin-bottom:6px}
.slug-mascot{position:relative;width:190px;height:130px}
.slug-body{
  position:absolute;bottom:10px;left:0;width:190px;height:86px;
  background:linear-gradient(160deg,#9b78de 0%,var(--myrtille) 65%,var(--myrtille-fonce));
  border-radius:72% 88% 44% 48% / 100% 100% 38% 38%;
  box-shadow:var(--ombre);
  transform-origin:bottom center;
  animation:scootbig 2.8s ease-in-out infinite;
}
@keyframes scootbig{0%,100%{transform:scale(1,1)}50%{transform:scale(1.07,0.93)}}
.stalk{
  position:absolute;top:0;width:10px;height:52px;background:var(--myrtille);
  border-radius:999px;transform-origin:bottom center;z-index:2;
}
.stalk-l{right:64px;transform:rotate(-14deg);animation:wiggle 3.4s ease-in-out infinite}
.stalk-r{right:34px;transform:rotate(14deg);animation:wiggle 3.4s ease-in-out infinite reverse}
@keyframes wiggle{0%,100%{rotate:0deg}50%{rotate:8deg}}
.eyeball{
  position:absolute;top:-18px;left:-8px;width:26px;height:26px;
  background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(62,37,112,.3);overflow:hidden;
}
.pupil{position:absolute;top:7px;left:8px;width:11px;height:12px;background:var(--encre);border-radius:50%;transition:transform .08s}
.smile{
  position:absolute;bottom:26px;right:34px;
  width:32px;height:15px;border:4px solid rgba(255,255,255,.85);border-top:0;
  border-radius:0 0 30px 30px;
}
.cheek{position:absolute;bottom:38px;width:14px;height:9px;background:var(--corail);opacity:.75;border-radius:50%}
.cheek-l{right:70px}.cheek-r{right:14px}
.spot{position:absolute;background:rgba(255,255,255,.18);border-radius:50%}
.s1{width:22px;height:16px;top:18px;left:28px}
.s2{width:14px;height:11px;top:40px;left:62px}
.s3{width:10px;height:8px;top:24px;left:96px}
.slime{ /* trace de bave scintillante */
  position:absolute;bottom:2px;left:-34px;width:250px;height:10px;
  background:linear-gradient(90deg,transparent,rgba(56,217,169,.5),rgba(56,217,169,.15));
  border-radius:999px;filter:blur(1px);
}

/* ---- cartes ---- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;padding:38px 0 10px;
}
.card{
  position:relative;display:block;text-decoration:none;color:#fff;
  border-radius:var(--radius);padding:30px 26px 24px;min-height:230px;
  box-shadow:var(--ombre);
  transform:rotate(var(--tilt,0deg));
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:0 18px 44px rgba(62,37,112,.28)}
.card-fil{background:linear-gradient(140deg,var(--indigo),#748ffc);--tilt:-1.2deg}
.card-albums{background:linear-gradient(140deg,var(--corail),#ffa8a8);--tilt:1deg}
.card-jeux{background:linear-gradient(140deg,#12b886,var(--menthe));--tilt:-0.8deg}
.card-emoji{
  font-size:44px;background:rgba(255,255,255,.22);width:74px;height:74px;
  display:flex;align-items:center;justify-content:center;border-radius:22px;margin-bottom:14px;
}
.card h2{font-size:28px;font-weight:800;margin-bottom:6px}
.card p{font-size:16px;line-height:1.45;opacity:.94}
.card-go{
  display:inline-block;margin-top:14px;font-weight:700;font-size:15px;
  background:rgba(255,255,255,.24);padding:7px 14px;border-radius:999px;
  transition:background .15s;
}
.card:hover .card-go{background:rgba(255,255,255,.4)}

/* ---- teaser ---- */
.teaser{padding:34px 0 20px}
.teaser-inner{
  background:linear-gradient(120deg,var(--soleil),#ffe066);
  border-radius:var(--radius);padding:26px 30px;box-shadow:var(--ombre);
  color:#5c4a00;text-align:center;transform:rotate(.5deg);
}
.teaser-inner h3{font-size:24px;font-weight:800}
.teaser-inner p{margin-top:4px;font-size:17px}

footer{
  position:relative;z-index:1;text-align:center;color:#7a6b9b;
  font-size:15px;padding:36px 20px 26px;
}

@media (max-width:560px){
  .btn-big{width:100%;}
  .hero{padding-top:22px}
}