/* Qui se cache ? · Colibouli — charte de la marque */
:root{
  --teal-dark:#1E5E57;
  --teal:#3FB09B;
  --teal-light:#7CCFBF;
  --rose:#D9546E;
  --rose-deep:#C7445F;
  --tuft:#F08C80;
  --cream:#FFF8EA;
  --cream-2:#F8E3B0;
  --sun:#FFD966;
  --ink:#1F2A30;
  --muted:#5B6B66;
  --leaf:#7CC77A;
  --leaf-dark:#4E9E57;
  --leaf-light:#9FD994;
  --display:"Fredoka","Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Trebuchet MS",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  min-height:100vh;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}

.game{
  width:min(100%,1000px);
  min-height:100vh;
  margin:0 auto;
  padding:14px 24px 12px;
  display:flex;
  flex-direction:column;
}

/* ---------- En-tête ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
}
.brandbar{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.logo{
  text-decoration:none;
  font-family:"Fredoka","Baloo 2","Arial Rounded MT Bold",sans-serif;
  font-weight:700;
  font-size:34px;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}
.logo svg{display:inline-block;width:.8em;height:.8em;vertical-align:-.07em}
.logo-c{color:var(--teal-dark)}
.logo-b{color:var(--rose)}
.progress{display:flex;align-items:center;gap:14px}
.round-label{
  font-family:var(--display);
  font-weight:600;
  font-size:18px;
  color:var(--teal-dark);
  white-space:nowrap;
}
.stars{display:flex;gap:3px}
.stars svg,.end-stars svg{width:24px;height:24px;fill:#fff;stroke:#D9C9A0;stroke-width:1.6}
.stars svg.on,.end-stars svg.on{fill:var(--sun);stroke:#E0A928}
.stars svg.pop{animation:starpop .5s ease-out}

/* ---------- Scène ---------- */
.scene{
  position:relative;
  margin-top:10px;
  aspect-ratio:16/9;
  width:100%;
  border:6px solid #fff;
  border-radius:28px;
  overflow:hidden;
  background:#BFE6EC url("images/Decor_jardin.jpg") center 60%/cover no-repeat;
  box-shadow:0 8px 0 #EADFC4;
  isolation:isolate;
}
.reveal-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .6s ease,transform .8s ease;
  z-index:1;
}
.scene.revealed .reveal-img{opacity:1;transform:scale(1)}

.colibouli{
  position:absolute;
  z-index:3;
  left:4%;
  top:26%;
  width:22%;
  max-width:200px;
  filter:drop-shadow(0 6px 4px rgba(30,94,87,.25));
  animation:hover 2.6s ease-in-out infinite;
  transition:opacity .4s ease;
}
.scene.revealed .colibouli,.scene.intro-on .colibouli{opacity:0}

.speech{
  position:absolute;
  z-index:4;
  top:6%;
  left:50%;
  transform:translateX(-46%);
  width:min(64%,560px);
  margin:0;
  padding:12px 20px;
  background:#fff;
  border-radius:22px;
  text-align:center;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(17px,2.6vw,26px);
  line-height:1.2;
  color:var(--teal-dark);
  box-shadow:0 5px 0 rgba(30,94,87,.15);
}
.speech:after{
  content:"";
  position:absolute;
  left:7%;
  bottom:-13px;
  border-width:14px 18px 0 0;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
}
.scene.revealed .speech:after{display:none}
.scene.intro-on .speech,.scene.end-on .speech{opacity:0}
.scene.end-on .colibouli{z-index:7;top:auto;bottom:6%}

/* Buisson dessiné aux couleurs de la marque */
.bush{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-4%;
  width:46%;
  height:52%;
  transform:translateX(-42%);
  transition:transform .6s cubic-bezier(.5,-.3,.7,1),opacity .5s ease;
}
.bush.wiggle{animation:wiggle 1.1s ease-in-out}
.scene.revealed .bush{transform:translateX(-42%) translateY(110%);opacity:0}
.bush-ball{position:absolute;border-radius:50%;background:var(--leaf);box-shadow:inset -10px -12px 0 rgba(0,0,0,.08)}
.b1{left:0;bottom:0;width:48%;height:70%;background:var(--leaf-dark)}
.b2{left:22%;bottom:12%;width:56%;height:88%}
.b3{right:0;bottom:0;width:48%;height:72%;background:var(--leaf-dark)}
.b4{left:30%;bottom:-6%;width:44%;height:52%;background:var(--leaf-light)}
.bush-q{
  position:absolute;
  left:50%;top:32%;
  transform:translate(-50%,-50%);
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(46px,9vw,96px);
  line-height:1;
  color:#fff;
  text-shadow:0 4px 0 rgba(30,94,87,.35);
}
.flower{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:var(--sun);box-shadow:0 0 0 .5vw #fff}
.f1{left:16%;top:30%;box-shadow:0 0 0 clamp(3px,.6vw,6px) var(--tuft)}
.f2{left:70%;top:20%;box-shadow:0 0 0 clamp(3px,.6vw,6px) #fff}
.f3{left:44%;top:70%;box-shadow:0 0 0 clamp(3px,.6vw,6px) var(--tuft)}

/* Écran d'accueil et de fin */
.intro,.end{
  position:absolute;
  z-index:6;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  text-align:center;
  background:rgba(255,248,234,.82);
}
.end[hidden],.intro[hidden]{display:none}
.intro-title,.end-title{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px,8vw,80px);
  line-height:1;
  color:var(--teal-dark);
}
.end-title{color:var(--rose-deep)}
.intro-text,.end-text{
  margin:0 0 6px;
  max-width:30ch;
  font-weight:800;
  font-size:clamp(16px,2.2vw,22px);
  color:var(--teal-dark);
}
.end-stars{display:flex;gap:6px;margin-bottom:6px}
.end-stars svg{width:clamp(30px,5vw,46px);height:clamp(30px,5vw,46px)}

/* Boutons */
.btn{
  border:0;
  border-radius:999px;
  cursor:pointer;
  font-family:var(--display);
  font-weight:700;
  color:#fff;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-play{
  min-height:64px;
  padding:12px 46px;
  font-size:clamp(24px,3.4vw,32px);
  background:var(--rose-deep);
  box-shadow:0 6px 0 #9C3249;
  animation:pulse 1.8s ease-in-out infinite;
}
.btn-next{
  display:block;
  min-height:56px;
  margin:14px auto 0;
  padding:10px 34px;
  font-size:22px;
  background:var(--teal-dark);
  box-shadow:0 5px 0 #123E39;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn:focus-visible,.choice:focus-visible,.btn-listen:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

/* ---------- Réponses ---------- */
.answers{padding:16px 0 4px;text-align:center}
.answer-head{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.hint{margin:0;font-weight:900;font-size:18px;color:var(--teal-dark);min-height:1.3em}
.btn-listen{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;
  padding:6px 16px 6px 12px;
  border:2px solid var(--teal-light);
  border-radius:999px;
  background:#fff;
  color:var(--teal-dark);
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}
.btn-listen[hidden]{display:none}
.btn-listen svg{width:24px;height:24px}

.choices{display:flex;justify-content:center;gap:16px}
.choice{
  width:min(31%,220px);
  padding:8px 8px 10px;
  border:4px solid #fff;
  border-radius:24px;
  background:#fff;
  box-shadow:0 6px 0 #EADFC4;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,opacity .3s ease;
}
.choice:hover{transform:translateY(-4px);box-shadow:0 10px 0 #EADFC4}
.choice .pic{
  display:block;
  width:100%;
  aspect-ratio:1;
  border-radius:16px;
  background-repeat:no-repeat;
  background-color:var(--cream-2);
}
.choice .name{
  display:block;
  margin-top:8px;
  font-family:var(--display);
  font-weight:700;
  font-size:22px;
  color:var(--teal-dark);
}
.choice.correct{border-color:var(--teal);box-shadow:0 6px 0 var(--teal)}
.choice.wrong{animation:nope .4s ease;border-color:#F3B3BE}
.choice.faded{opacity:.35}
.choice:disabled{cursor:default}
.choice:disabled:hover{transform:none;box-shadow:0 6px 0 #EADFC4}
.choice.correct:disabled:hover{box-shadow:0 6px 0 var(--teal)}

.footer{
  margin-top:auto;
  padding-top:14px;
  text-align:center;
  font-weight:800;
  font-size:13px;
  color:var(--muted);
}

/* Confettis aux couleurs de la marque */
.confetti{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;
  top:-6%;
  width:12px;height:12px;
  border-radius:3px;
  animation:fall 1.6s ease-in forwards;
}

/* ---------- Animations ---------- */
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wiggle{0%,100%{transform:translateX(-42%) rotate(0)}20%{transform:translateX(-42%) rotate(-3deg)}40%{transform:translateX(-42%) rotate(3deg)}60%{transform:translateX(-42%) rotate(-2deg)}80%{transform:translateX(-42%) rotate(2deg)}}
@keyframes nope{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes starpop{0%{transform:scale(.4)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes fall{to{transform:translateY(115%) rotate(540deg)}}

/* ---------- Téléphone ---------- */
@media (max-width:620px){
  .game{padding:10px 12px}
  .topbar{min-height:44px}
  .logo{font-size:24px}
  .round-label{font-size:14px}
  .progress{gap:8px}
  .stars svg{width:17px;height:17px}
  .scene{border-width:4px;border-radius:20px;aspect-ratio:4/3}
  .colibouli{width:26%;top:30%;left:2%}
  .speech{left:auto;right:3%;width:68%;padding:9px 12px;transform:none}
  .scene.revealed .speech{right:auto;left:50%;transform:translateX(-50%)}
  .bush{width:58%;height:50%}
  .answers{padding-top:12px}
  .hint{font-size:16px}
  .choices{gap:8px}
  .choice{width:33%;padding:5px 5px 7px;border-width:3px;border-radius:18px}
  .choice .pic{border-radius:12px}
  .choice .name{font-size:17px;margin-top:5px}
  .scene.end-on .colibouli{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Intégré dans le site (iframe) : le site affiche déjà le logo et la signature */
.embedded .footer{display:none}
.embedded .topbar{justify-content:flex-end;min-height:40px}
.embedded .game{min-height:0}

/* Bouton pour quitter le jeu (affiché quand le jeu est ouvert seul, en plein écran) */
.btn-quit{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 16px 6px 10px;border:2px solid var(--teal-light);border-radius:999px;background:#fff;color:var(--teal-dark);font-weight:900;font-size:15px;text-decoration:none}
.btn-quit svg{width:20px;height:20px}
.btn-quit:hover{border-color:var(--teal)}
.btn-quit:focus-visible,.logo:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
.embedded .brandbar{display:none}
@media (max-width:620px){.btn-quit span{display:none}.btn-quit{padding:6px 10px;order:-1}.brandbar{gap:8px}.topbar{flex-wrap:wrap;row-gap:6px}}