:root { --encre: #14213d; --papier: #fff; --doux: #5c677d; --bleu: #1f6feb; --vert: #06a77d; --jaune: #ffd166; --rouge: #ef476f; --fond: #f4f7fb; --carte: #fff; --bord: #dfe5ee; --texte: #14213d; color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; background: var(--fond); color: var(--texte); -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body.theme-william { --fond: #0f1b33; --carte: #1b2a4a; --bord: #2e4068; --texte: #f2f5ff; --doux: #b7c3dc; }
body.theme-juliette { --fond: #fff3f7; --carte: #fff; --bord: #f6cfdc; --texte: #5a2a48; --doux: #8a5a78; }
body.theme-porte { --fond: #14213d; --carte: #1b2a4a; --texte: #f2f5ff; --doux: #b7c3dc; --bord: #2e4068; }
#app { max-width: 820px; margin: 0 auto; min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
h1 { font-size: 26px; margin: 0; line-height: 1.15; } h2 { font-size: 22px; margin: 18px 0 10px; line-height: 1.2; } h3 { font-size: 14px; margin: 16px 0 8px; color: var(--doux); }
p { line-height: 1.4; }
.grand { font-size: 84px; line-height: 1.1; }
.bouton { background: var(--jaune); color: #14213d; font-weight: 800; font-size: 20px; padding: 16px 32px; border-radius: 18px; min-height: 58px; box-shadow: 0 4px 0 #d9a93e; }
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9a93e; }
.bouton:disabled { opacity: .45; }
.lien { color: var(--doux); text-decoration: underline; padding: 12px; font-size: 16px; }
.erreur { color: #ff9eb1; min-height: 1.4em; font-weight: 700; }
.porte, .profils, .fin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.porte form { display: flex; flex-direction: column; gap: 12px; width: min(300px, 100%); }
input { font: inherit; font-size: 20px; padding: 14px; border-radius: 14px; border: 2px solid var(--bord); background: var(--carte); color: var(--texte); text-align: center; -webkit-user-select: text; user-select: text; }
.choix-profils { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; width: min(620px, 100%); margin: 16px 0; }
.profil { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px; border-radius: 26px; font-size: 24px; font-weight: 800; color: #14213d; }
.profil span { font-size: 76px; line-height: 1; }
.p-william { background: linear-gradient(160deg, #7cc6fe, #4c8dff); } .p-juliette { background: linear-gradient(160deg, #ffc2d9, #e7a6ff); }
.tete { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tete h1 { flex: 1; font-size: 22px; }
.retour { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--carte); border: 2px solid var(--bord); font-size: 28px; line-height: 1; padding-bottom: 4px; }
.pastille { background: var(--carte); border: 2px solid var(--bord); border-radius: 99px; padding: 8px 12px; font-weight: 800; white-space: nowrap; }
.progres { flex: 1; height: 12px; border-radius: 99px; background: var(--bord); overflow: hidden; }
.progres i { display: block; height: 100%; background: var(--jaune); transition: width .3s; }
.bandeau { background: var(--jaune); color: #14213d; font-weight: 800; text-align: center; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tuile { display: grid; grid-template-columns: 64px 1fr; align-items: center; column-gap: 12px; text-align: left; padding: 20px; border-radius: 22px; color: #14213d; min-height: 112px; }
.tuile .ico { font-size: 52px; grid-row: span 2; line-height: 1; }
.tuile b { font-size: 20px; align-self: end; } .tuile small { align-self: start; font-size: 15px; }
.t-bleu { background: #8ecbff; } .t-vert { background: #7fe3c1; } .t-mauve { background: #cdb4ff; } .t-rose { background: #ffb3cf; } .t-soleil { background: #ffe08a; } .t-lilas { background: #d9c2ff; }
.juliette .tuile { min-height: 150px; } .juliette .tuile b { grid-row: span 2; align-self: center; font-size: 24px; }
.question { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 6px; }
.drapeau { font-size: 128px; line-height: 1.1; }
.question h2 { margin: 4px 0; }
.indice { min-height: 1.5em; margin: 2px 0 6px; font-weight: 700; color: var(--jaune); font-size: 18px; }
.theme-juliette .indice { color: var(--texte); }
.reponses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; width: 100%; }
.reponses button { background: var(--carte); border: 2px solid var(--bord); border-radius: 16px; padding: 14px; font-size: 19px; font-weight: 700; min-height: 62px; transition: opacity .2s; }
.reponses.en-drapeaux { grid-template-columns: 1fr 1fr; }
.drapeau-rep { font-size: 76px; line-height: 1; display: block; }
.reponses .bon { background: #06a77d; border-color: #06a77d; color: #fff; }
.reponses .non { opacity: .35; }
.montre { animation: pulse .8s infinite; outline: 3px solid var(--jaune); }
.fin .score { font-size: 22px; font-weight: 800; margin: 0; }
.fin p { color: var(--doux); font-size: 18px; margin: 0; }
.recompense { display: flex; flex-direction: column; align-items: center; background: var(--carte); border: 2px solid var(--bord); padding: 16px 28px; border-radius: 22px; margin: 6px 0 10px; animation: arrive .5s; }
.recompense svg { width: 150px; height: 150px; } .recompense b { font-size: 24px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.carte { background: var(--carte); border: 2px solid var(--bord); border-radius: 16px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 118px; }
.carte svg { width: 70px; height: 70px; } .carte small { font-size: 13px; line-height: 1.2; }
.mol { font-size: 42px; line-height: 1.2; }
.labo { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cible { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 2px solid var(--bord); border-radius: 18px; padding: 10px 14px; }
.cible h2 { margin: 0; font-size: 20px; } .formule { font-size: 24px; font-weight: 800; color: var(--jaune); margin: 0; }
.fiole { min-height: 92px; border: 3px dashed var(--bord); border-radius: 22px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.vide { color: var(--doux); }
.atome { width: 46px; height: 46px; border-radius: 50%; color: #14213d; font-weight: 800; animation: arrive .2s; }
.labo .indice { text-align: center; margin: 0; }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.element { background: var(--c); color: #14213d; border-radius: 14px; padding: 8px 4px; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.element b { font-size: 24px; line-height: 1.1; } .element small { font-size: 12px; }
.labo .bouton { margin-top: auto; }
.compte { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.compte h2 { margin: 4px 0 0; } .consigne { margin: 4px 0 12px; font-size: 18px; color: var(--doux); }
.pre { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: auto 0; }
.animal { position: relative; font-size: 62px; line-height: 1; width: 92px; height: 92px; border-radius: 22px; background: var(--carte); border: 2px solid var(--bord); }
.animal em { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: 18px; font-weight: 800; min-width: 30px; background: var(--rouge); color: #fff; border-radius: 99px; visibility: hidden; padding: 3px; }
.animal.compte { background: #ffe08a; } .animal.compte em { visibility: visible; }
.saute { animation: saut .5s; }
.nombres { display: flex; gap: 12px; margin: 14px 0 6px; }
.nombres button { width: 92px; height: 92px; border-radius: 24px; background: #d9c2ff; color: #5a2a48; font-size: 44px; font-weight: 800; }
.nombres .bon { background: #06a77d; color: #fff; } .nombres .non { opacity: .35; }
.atelier { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background: #ffe3ec; }
.barre { display: flex; gap: 8px; align-items: center; }
.outil { flex: 1; height: 50px; font-size: 26px; border-radius: 14px; background: #fff; }
.outil.actif { outline: 3px solid var(--rouge); } .outil.garder { background: #ffc2d9; }
#toile { flex: 1; min-height: 0; width: 100%; border-radius: 16px; background: #fff; touch-action: none; }
.couleurs { display: flex; justify-content: center; gap: 6px; }
.couleurs button { flex: 1; max-width: 62px; height: 48px; border-radius: 14px; }
.couleurs .actif { outline: 4px solid #5a2a48; outline-offset: -4px; }
.tampons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: #fff; padding: 6px; border-radius: 14px; }
.tampons[hidden] { display: none; }
.tampons button { font-size: 36px; height: 56px; }
.amis { display: flex; flex-wrap: wrap; gap: 6px; font-size: 42px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(90, 42, 72, .18); }
.vide-chateau { text-align: center; color: var(--doux); font-size: 18px; }
.fiche { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 4px 16px 14px; margin-bottom: 14px; }
.chiffres { display: flex; gap: 16px; flex-wrap: wrap; color: var(--doux); margin: 4px 0; } .chiffres b { color: var(--texte); }
.jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .durees { grid-template-columns: repeat(4, 1fr); }
.jours button { border: 1px solid var(--bord); border-radius: 10px; min-height: 44px; font-size: 15px; background: #fff; text-transform: capitalize; }
.jours .actif { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 700; }
.bonus { padding-left: 0; }
.stats { list-style: none; margin: 0; padding: 0; } .stats li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--bord); flex-wrap: wrap; } .stats span { flex: 1; } .stats small { color: var(--doux); }
.petit { color: var(--doux); font-size: 15px; margin: 8px 0 0; }
.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9; }
.confettis i { position: absolute; top: -14px; width: 10px; height: 14px; animation: tombe 1.7s ease-in forwards; }
@keyframes tombe { to { transform: translateY(105vh) rotate(540deg); } }
@keyframes pulse { 50% { transform: scale(1.04); } }
@keyframes arrive { from { transform: scale(.5); opacity: 0; } }
@keyframes saut { 40% { transform: translateY(-16px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { *, .confettis i { animation: none !important; transition: none !important; } .confettis { display: none; } }
/* iPad : on profite de la place, tout est plus grand et centré */
@media (min-width: 700px) {
  .labo { justify-content: center; gap: 18px; }
  .labo .bouton { margin-top: 8px; }
  .cible { padding: 18px 22px; } .cible h2 { font-size: 28px; } .formule { font-size: 34px; } .mol { font-size: 60px; }
  .fiole { min-height: 170px; } .atome { width: 64px; height: 64px; font-size: 24px; }
  .palette { grid-template-columns: repeat(3, 1fr); gap: 12px; } .element { min-height: 110px; } .element b { font-size: 36px; } .element small { font-size: 16px; }
  .drapeau { font-size: 200px; } .question h2 { font-size: 30px; } .reponses button { font-size: 24px; min-height: 84px; } .drapeau-rep { font-size: 120px; }
  .tuile { min-height: 170px; } .tuile b { font-size: 26px; } .tuile small { font-size: 18px; }
  .animal { width: 130px; height: 130px; font-size: 88px; } .nombres button { width: 130px; height: 130px; font-size: 60px; }
}