/* Le Jardin des Sons — style enfantin : grand, coloré, peu de texte. */
:root{
  --bg:#fff7ec; --ink:#3a2e22; --green:#5ec26a; --red:#ef6f6f;
  --tile:#ffffff; --tile2:#fff0d6; --accent:#ffb43a; --blue:#5aa9e6;
  --shadow:0 6px 0 rgba(0,0,0,.12), 0 12px 24px rgba(0,0,0,.10);
  /* GoCookies hérite cette variable -> le CMP prend la couleur du jeu */
  --gocookies-primary:var(--accent);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}   /* l'attribut hidden prime sur les display:flex ci-dessous */
html,body{margin:0;height:100%}
body{
  font-family:"Baloo 2",system-ui,"Segoe UI Rounded",Arial,sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
  user-select:none; touch-action:manipulation;
}
h1{font-size:2.2rem;margin:.2em} h2{margin:.2em}
.muted,.link{color:#9a8a76}

/* Overlays (start / parent) */
.overlay{
  position:fixed; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #fff 0%, var(--bg) 70%); padding:24px;
}
button{font-family:inherit; cursor:pointer; border:none; border-radius:18px}
.big{font-size:1.5rem; padding:18px 34px; background:var(--accent); color:#fff;
  box-shadow:var(--shadow); font-weight:800}
.big:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.12)}
.link{background:none; color:#9a8a76; font-size:1rem; text-decoration:underline}
.icon{display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  background:var(--tile2); width:60px; height:60px; border-radius:16px; box-shadow:var(--shadow);
  text-decoration:none; color:inherit; border:none; cursor:pointer}
.icon.sm{width:46px; height:46px; font-size:1.25rem}
.icon:active{transform:translateY(3px)}

/* Le widget cookies n'est caché QUE pendant le jeu (visible sur l'accueil). */
body.playing #gocookies-widget{display:none !important}

/* HUD */
#hud{position:fixed; top:52px; left:0; right:0; height:64px; display:flex;
  align-items:center; justify-content:space-between; padding:0 14px; z-index:5; gap:8px}
.hud-grp{display:flex; gap:8px; align-items:center}
.count{font-size:1.1rem; font-weight:800; background:#fff; padding:6px 12px;
  border-radius:14px; box-shadow:var(--shadow); white-space:nowrap}

/* Jeu */
#game{position:fixed; inset:116px 0 0 0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px; padding:18px}
#prompt{font-size:1.2rem; color:#9a8a76}
#choices{display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:center}
.choice{
  width:clamp(96px,28vw,150px); height:clamp(96px,28vw,150px); border-radius:28px;
  background:var(--tile); box-shadow:var(--shadow); font-size:clamp(3rem,12vw,5rem);
  font-weight:800; display:flex; align-items:center; justify-content:center;
  transition:transform .12s, background .2s; color:var(--ink);
}
.choice:active{transform:scale(.94)}
.choice.good{background:var(--green); color:#fff; animation:pop .4s}
.choice.bad{background:var(--red); color:#fff; animation:shake .4s}
.choice.dim{opacity:.45}
/* Ondulation douce de la bonne réponse (~2,5 s) — attire l'attention sans agresser. */
.choice.vibrate{animation:wiggle .25s ease-in-out 10 !important}
@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-2.5px)}75%{transform:translateX(2.5px)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#feedback{font-size:2.4rem; height:2.6rem}

/* Jardin (collection) */
#garden{position:fixed; left:0; right:0; bottom:0; height:86px; display:flex;
  gap:8px; padding:10px 14px; overflow-x:auto; align-items:center;
  background:linear-gradient(0deg,#eaf7e7,transparent)}
.seed{min-width:54px; height:62px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:1.6rem; font-weight:800; background:#e6ddcf; color:#b9ab97}
.seed.bloom{background:var(--green); color:#fff; box-shadow:var(--shadow); animation:pop .5s}

/* Heat-map parent */
#heatmap{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:10px; width:min(560px,92vw); margin:8px 0}
.hm{height:64px; border-radius:14px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-weight:800; color:#fff}
.hm small{font-weight:600; opacity:.9; font-size:.7rem}

/* Synchro multi-appareils (Espace parent) */
.sync-box{width:min(560px,92vw); text-align:left; background:#fff; border-radius:18px;
  padding:16px 18px; box-shadow:var(--shadow); margin:6px 0}
.sync-box h3{margin:.1em 0 .5em; font-size:1.1rem}
.sync-box .big{font-size:1.1rem; padding:12px 22px}
.sync-code{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--tile2); border-radius:12px; padding:10px 12px; margin-top:6px}
.sync-code code{font-size:.9rem; word-break:break-all}
.sync-restore{margin-top:12px}
.sync-restore summary{cursor:pointer; color:#9a8a76}
.sync-restore-form{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.sync-restore-form input{font:inherit; padding:10px 12px; border:1px solid #e0d6c6; border-radius:12px}

/* Header partagé (toutes les pages) + menu hamburger */
.site-header{position:fixed; top:0; left:0; right:0; height:52px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 14px;
  background:rgba(255,247,236,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{font-weight:800; font-size:1.02rem; text-decoration:none; color:var(--ink); white-space:nowrap}
.burger{font-size:1.5rem; background:none; border:none; width:46px; height:46px; cursor:pointer;
  color:var(--ink); border-radius:12px}
.burger:active{background:var(--tile2)}
.menu{position:absolute; top:54px; right:8px; min-width:210px; background:#fff; border-radius:14px;
  box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; z-index:60}
.menu a, .menu button{display:block; text-align:left; width:100%; padding:12px 14px; font:inherit;
  color:var(--ink); text-decoration:none; background:none; border:none; border-radius:10px; cursor:pointer}
.menu a:active, .menu button:active{background:var(--tile2)}

/* Espace parent : défilable sous le header */
#parent{justify-content:flex-start; overflow-y:auto; padding-top:64px; padding-bottom:28px}