/* Habillage pour enfants : décors, police ronde, boutons en relief. L'espace parents garde un style sobre. */
@font-face { font-family: "Fredoka"; src: url("fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
body { font-family: "Fredoka", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; position: relative; }
body.theme-parents { font-family: -apple-system, system-ui, sans-serif; }
#app { position: relative; z-index: 1; }
h1, h2, .tuile b, .profil, .bouton { font-weight: 700; letter-spacing: .2px; }

/* ---------- décor de William et de la porte : l'espace ---------- */
body.theme-william, body.theme-porte {
  --carte: rgba(39, 42, 110, .86); --bord: #5a5fd0; --fond: #17124a;
  background: radial-gradient(circle at 75% 12%, #4b2a9e 0, transparent 46%), radial-gradient(circle at 12% 88%, #0f6a9e 0, transparent 42%), linear-gradient(170deg, #17124a, #0a1238 70%);
  background-attachment: fixed;
}
body.theme-william::before, body.theme-porte::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='24' cy='40' r='1.8'/%3E%3Ccircle cx='120' cy='18' r='1.2'/%3E%3Ccircle cx='210' cy='70' r='2.2'/%3E%3Ccircle cx='280' cy='30' r='1.2'/%3E%3Ccircle cx='70' cy='130' r='1.4'/%3E%3Ccircle cx='170' cy='150' r='1.8'/%3E%3Ccircle cx='260' cy='190' r='1.3'/%3E%3Ccircle cx='30' cy='220' r='2'/%3E%3Ccircle cx='120' cy='260' r='1.3'/%3E%3Ccircle cx='220' cy='280' r='1.7'/%3E%3Cpath d='M150 80l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' fill='%23ffe08a'/%3E%3Cpath d='M40 170l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='%23ffe08a'/%3E%3C/g%3E%3C/svg%3E");
  animation: scintille 4s ease-in-out infinite alternate;
}
body.theme-william::after, body.theme-porte::after {
  content: ""; position: fixed; right: -46px; bottom: -36px; width: 250px; height: 200px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 200'%3E%3Cdefs%3E%3CradialGradient id='p' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23ffd98a'/%3E%3Cstop offset='.55' stop-color='%23ff8f5a'/%3E%3Cstop offset='1' stop-color='%23b23a7a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='125' cy='100' r='70' fill='url(%23p)'/%3E%3Cpath d='M60 88c40 14 90 16 130 6M58 112c40 14 92 16 134 4' stroke='%23fff' stroke-opacity='.25' stroke-width='9' fill='none'/%3E%3Cellipse cx='125' cy='104' rx='120' ry='24' fill='none' stroke='%23ffe6b0' stroke-width='9' transform='rotate(-14 125 104)'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .9; animation: flotte 7s ease-in-out infinite;
}

/* ---------- décor de Juliette : le royaume ---------- */
body.theme-juliette {
  --carte: rgba(255, 255, 255, .88); --bord: #ffc2d9; --texte: #6b2d6b; --doux: #8d4f8a;
  background: linear-gradient(180deg, #a9e3ff 0, #d9f3ff 42%, #ffe6f2 74%); background-attachment: fixed;
}
body.theme-juliette::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 280px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 280' preserveAspectRatio='xMidYMin slice'%3E%3Cg fill='none' stroke-width='13'%3E%3Ccircle cx='300' cy='230' r='170' stroke='%23ff8fab'/%3E%3Ccircle cx='300' cy='230' r='157' stroke='%23ffd166'/%3E%3Ccircle cx='300' cy='230' r='144' stroke='%2395e6a8'/%3E%3Ccircle cx='300' cy='230' r='131' stroke='%2390cdff'/%3E%3Ccircle cx='300' cy='230' r='118' stroke='%23c9a7ff'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cellipse cx='70' cy='70' rx='52' ry='24'/%3E%3Ccircle cx='52' cy='58' r='24'/%3E%3Ccircle cx='88' cy='54' r='30'/%3E%3Cellipse cx='350' cy='215' rx='60' ry='22'/%3E%3Ccircle cx='330' cy='200' r='24'/%3E%3Ccircle cx='366' cy='196' r='28'/%3E%3C/g%3E%3C/svg%3E") top center / cover no-repeat;
  opacity: .85; -webkit-mask-image: linear-gradient(#000 52%, transparent 78%); mask-image: linear-gradient(#000 52%, transparent 78%);
}
body.theme-juliette::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 210px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 210' preserveAspectRatio='xMidYMax slice'%3E%3Cg%3E%3Crect x='262' y='62' width='92' height='86' fill='%23f7c6e0'/%3E%3Crect x='244' y='42' width='30' height='108' fill='%23fbd7ea'/%3E%3Crect x='342' y='42' width='30' height='108' fill='%23fbd7ea'/%3E%3Cpath d='M240 44 259 6 278 44ZM338 44 357 6 376 44Z' fill='%23b784f0'/%3E%3Cpath d='M296 148v-34a12 12 0 0 1 24 0v34z' fill='%23a55fb5'/%3E%3C/g%3E%3Cpath d='M0 130Q90 80 200 128T400 112V210H0Z' fill='%23a8e6a1'/%3E%3Cpath d='M0 165Q120 118 240 160T400 150V210H0Z' fill='%2379d487'/%3E%3Cg fill='%23ff8fab'%3E%3Ccircle cx='60' cy='165' r='5'/%3E%3Ccircle cx='150' cy='176' r='5'/%3E%3Ccircle cx='330' cy='182' r='5'/%3E%3C/g%3E%3Cg fill='%23ffd166'%3E%3Ccircle cx='105' cy='186' r='4'/%3E%3Ccircle cx='250' cy='190' r='4'/%3E%3C/g%3E%3C/svg%3E") bottom center / cover no-repeat;
}

/* ---------- boutons et tuiles en relief ---------- */
.bouton { background: linear-gradient(180deg, #ffe48f, #ffc23d); border-radius: 22px; box-shadow: 0 6px 0 #c98a14, 0 10px 18px rgba(0, 0, 0, .25); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.bouton:active { transform: translateY(5px); box-shadow: 0 1px 0 #c98a14; }
.retour { background: #fff; color: #4c3ab5; border: 0; box-shadow: 0 3px 0 rgba(0, 0, 0, .22); font-weight: 700; }
.pastille { background: linear-gradient(180deg, #ffe48f, #ffc23d); color: #5b3b00; border: 0; box-shadow: 0 3px 0 #c98a14; }
.tete h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, .18); font-size: 24px; }
.theme-juliette .tete h1 { text-shadow: 0 2px 0 #fff; }
.theme-juliette h2 { text-shadow: 0 2px 0 #fff; }
.tuile, .profil { position: relative; overflow: hidden; border: 4px solid #fff; border-radius: 28px; box-shadow: 0 7px 0 rgba(0, 0, 0, .2), 0 12px 20px rgba(0, 0, 0, .2); transition: transform .08s; }
.tuile:active, .profil:active { transform: translateY(5px) scale(.99); }
.tuile::after { content: ""; position: absolute; left: -10%; right: -10%; top: -60%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, .24); pointer-events: none; }
.tuile .ico { font-size: 60px; animation: flotte 3s ease-in-out infinite; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .22)); }
.tuile:nth-child(2) .ico { animation-delay: .5s; } .tuile:nth-child(3) .ico { animation-delay: 1s; }
.t-bleu { background: linear-gradient(145deg, #6fd3ff, #3f7bff); color: #fff; } .t-vert { background: linear-gradient(145deg, #7ff0b8, #10b98a); color: #06392e; } .t-mauve { background: linear-gradient(145deg, #e2a8ff, #8a4dff); color: #fff; }
.t-rose { background: linear-gradient(145deg, #ffc2dc, #ff6fa8); color: #fff; } .t-soleil { background: linear-gradient(145deg, #fff0a8, #ffbe3b); color: #6b4300; } .t-lilas { background: linear-gradient(145deg, #e5d0ff, #a678ff); color: #fff; }
.t-bleu b, .t-mauve b, .t-rose b, .t-lilas b, .t-bleu small, .t-mauve small { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.tuile b { font-size: 22px; } .tuile small { font-size: 16px; font-weight: 500; }
.p-william { background: linear-gradient(160deg, #6fd3ff, #3f4dff); color: #fff; } .p-juliette { background: linear-gradient(160deg, #ffc2dc, #c56bff); color: #fff; }
.profil { text-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
.profil span { animation: flotte 3s ease-in-out infinite; filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .25)); } .p-juliette span { animation-delay: .7s; }
.profils h1, .porte h1 { font-size: 36px; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }

/* ---------- progression : une petite fusée ou un papillon avance ---------- */
.progres { overflow: visible; height: 16px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.progres i { position: relative; min-width: 8px; border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ff7eb6); }
.progres i::after { content: "🚀"; position: absolute; right: -14px; top: -9px; font-size: 24px; transform: rotate(45deg); }
.theme-juliette .progres { background: rgba(255, 255, 255, .7); }
.theme-juliette .progres i::after { content: "🦋"; transform: none; }

/* ---------- drapeaux : le drapeau devient une carte postale ---------- */
.drapeau { background: #fff; border-radius: 22px; padding: 2px 22px 8px; box-shadow: 0 7px 0 rgba(0, 0, 0, .28); transform: rotate(-2deg); animation: arrive .35s; }
.reponses button { background: rgba(255, 255, 255, .96); color: #2b2478; border: 0; border-radius: 20px; box-shadow: 0 5px 0 #8f8fd8; font-weight: 600; }
.reponses button:active { transform: translateY(3px); box-shadow: 0 2px 0 #8f8fd8; }
.drapeau-rep { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.reponses .bon { background: linear-gradient(180deg, #4fe3a8, #10b98a); color: #fff; box-shadow: 0 5px 0 #0a8a66; animation: pulse .4s 2; }
.indice { color: #ffe08a; font-weight: 600; font-size: 20px; }
.question h2 { text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* ---------- récompenses ---------- */
.fin .grand { animation: flotte 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 4px rgba(0, 0, 0, .25)); font-size: 110px; }
.fin h1 { font-size: 32px; text-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
.theme-juliette .fin h1 { text-shadow: 0 2px 0 #fff; }
.fin .score { color: #ffe08a; font-size: 24px; }
.theme-william .fin p:not(.score):not(.formule) { color: #e7e6ff; }
.recompense { position: relative; overflow: hidden; background: radial-gradient(circle, #5a3fd6, #2a1f86); border: 4px solid #ffd166; border-radius: 30px; padding: 18px 34px; box-shadow: 0 8px 0 rgba(0, 0, 0, .25); }
.rayons { position: absolute; left: 50%; top: 42%; width: 520px; height: 520px; margin: -260px; background: repeating-conic-gradient(rgba(255, 224, 138, .28) 0 14deg, transparent 14deg 28deg); animation: tourne 14s linear infinite; }
.recompense svg, .recompense b, .recompense small { position: relative; }
.recompense svg { width: 176px; height: 176px; animation: flotte 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .3)); }
.recompense b { font-size: 28px; } .recompense small { font-size: 15px; color: #ffe08a; }

/* ---------- carnet ---------- */
.carte { border-radius: 20px; }
.carte svg { width: 82px; height: 82px; }
.carte small { font-size: 14px; font-weight: 500; }

/* ---------- labo : une vraie fiole qui bouillonne ---------- */
.cible { border-radius: 22px; }
.fiole { position: relative; overflow: hidden; min-height: 132px; border: 5px solid rgba(255, 255, 255, .85); border-radius: 26px 26px 54px 54px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 18px rgba(255, 255, 255, .22); align-content: center; }
.fiole::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, rgba(92, 240, 200, .55), rgba(40, 160, 255, .6)); border-radius: 50% 50% 0 0 / 12px 12px 0 0; }
.fiole::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 90%, rgba(255, 255, 255, .8) 0 4px, transparent 5px), radial-gradient(circle at 46% 82%, rgba(255, 255, 255, .7) 0 6px, transparent 7px), radial-gradient(circle at 78% 92%, rgba(255, 255, 255, .8) 0 4px, transparent 5px); animation: bulles 2.6s linear infinite; }
.fiole.melange { animation: secoue .14s 5; }
.fiole.melange::before { height: 100%; background: linear-gradient(180deg, #ffe08a, #ff7eb6); transition: height .5s; }
.fiole > * { position: relative; z-index: 1; }
.vide { color: #fff; font-weight: 500; }
.atome { color: #1c1650; background-image: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85), transparent 42%); box-shadow: inset -4px -5px 8px rgba(0, 0, 0, .22), 0 3px 4px rgba(0, 0, 0, .3); }
.element { position: relative; border: 3px solid rgba(255, 255, 255, .8); border-radius: 16px; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); background: linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%), var(--c); }
.element:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.element i { position: absolute; top: 3px; left: 7px; font-style: normal; font-size: 12px; font-weight: 600; opacity: .75; }

/* ---------- compter : des animaux dans le pré, des nombres en ballons ---------- */
.compte h2 { font-size: 26px; }
.consigne { font-size: 20px; font-weight: 500; color: var(--texte); text-shadow: 0 1px 0 #fff; }
.animal { background: rgba(255, 255, 255, .85); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 5px 0 rgba(107, 45, 107, .22); animation: flotte 2.6s ease-in-out infinite; }
.animal:nth-child(2n) { animation-delay: .6s; } .animal:nth-child(3n) { animation-delay: 1.1s; }
.animal.compte { background: linear-gradient(180deg, #fff0a8, #ffc23d); border-color: #fff; }
.animal em { background: #ff4f93; border: 2px solid #fff; }
.nombres button { position: relative; border-radius: 50% 50% 48% 48%; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .28); box-shadow: inset -7px -9px 14px rgba(0, 0, 0, .16), inset 8px 8px 12px rgba(255, 255, 255, .4), 0 5px 0 rgba(107, 45, 107, .2); animation: flotte 3s ease-in-out infinite; }
.nombres button:nth-child(1) { background-color: #ff6fa8; } .nombres button:nth-child(2) { background-color: #5aa9ff; animation-delay: .5s; } .nombres button:nth-child(3) { background-color: #ad6bff; animation-delay: 1s; }
.nombres .bon { background-color: #18c08f !important; }

/* ---------- atelier de Juliette ---------- */
.atelier { background: linear-gradient(180deg, #ffd5e8, #e3d0ff); }
.outil { background: #fff; border-radius: 18px; box-shadow: 0 4px 0 #e6a9cc; }
.outil.garder { background: linear-gradient(180deg, #ffb3d1, #ff6fa8); }
#toile { border: 6px solid #fff; border-radius: 22px; box-shadow: 0 5px 0 #e6a9cc; }
.couleurs { gap: 8px; }
.couleurs button { aspect-ratio: 1; height: auto; max-height: 52px; border-radius: 50%; background-image: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6), transparent 44%); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.couleurs .actif { outline: 4px solid #fff; outline-offset: 0; transform: scale(1.14); }
.tampons { box-shadow: 0 4px 0 #e6a9cc; }

/* ---------- château ---------- */
.galerie img { border: 7px solid #ffd166; border-radius: 12px; box-shadow: 0 0 0 3px #e0a62e, 0 7px 10px rgba(107, 45, 107, .28); }
.amis { background: rgba(255, 255, 255, .75); border-radius: 22px; padding: 10px; }
.vide-chateau { color: var(--texte); }

@keyframes scintille { from { opacity: .55; } to { opacity: 1; } }
@keyframes flotte { 50% { transform: translateY(-7px); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes bulles { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -90px, 0 -120px, 0 -70px; } }
@keyframes secoue { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }

@media (min-width: 700px) {
  .tuile .ico { font-size: 84px; } .tuile { grid-template-columns: 96px 1fr; }
  .tuile b { font-size: 28px; }
  .fiole { min-height: 200px; }
  .recompense svg { width: 240px; height: 240px; }
  .couleurs button { max-height: 64px; max-width: 64px; }
  body.theme-william::after, body.theme-porte::after { width: 380px; height: 300px; }
  body.theme-juliette::after { height: 300px; }
}