@import url('https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap');

:root{
  --papier:#F5F0E6; --carte:#FFFCF6; --encre:#221F1A; --encre-doux:#736B5E;
  --trait:#DFD6C4; --vert:#4E9E5C; --orange:#E0983A; --rouge:#C55240;
  --bleu:#2C6DA4; --vert-clair:#E7F2E4; --orange-clair:#FBEEDA; --rouge-clair:#F8E3DE;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--papier); color:var(--encre);
  font-family:'Andika',-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
.enveloppe{max-width:1000px;margin:0 auto;padding:20px 22px 40px;min-height:100%;display:flex;flex-direction:column}

/* ---------- entête ---------- */
header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:8px}
.titre{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:23px;letter-spacing:-.01em;margin:0}
.sous{color:var(--encre-doux);font-size:14px;margin:2px 0 0}
a.lien{color:var(--encre-doux);font-size:13px;text-decoration:none;border-bottom:1px solid var(--trait)}

/* ---------- fleur ---------- */
.fleur-bloc{display:flex;flex-direction:column;align-items:center;gap:4px}
.fleur svg{display:block}
.jours{display:flex;gap:2px;font-size:10px;color:var(--encre-doux);letter-spacing:.09em}
.jours span{width:16px;text-align:center}
.jours span.actif{color:var(--encre);font-weight:700}

/* ---------- cartes ---------- */
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:18px;padding:26px 28px;
       box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 30px -22px rgba(60,45,20,.4)}
.centre{flex:1;display:flex;flex-direction:column;justify-content:center}
h2.grand{font-family:'Fraunces',Georgia,serif;font-size:30px;line-height:1.15;margin:0 0 6px}
p.intro{color:var(--encre-doux);font-size:16px;margin:0 0 22px;max-width:52ch}

button{font-family:inherit;cursor:pointer;border:none;font-size:16px}
.bouton{background:var(--encre);color:var(--carte);border-radius:999px;padding:16px 30px;font-size:18px;
        font-weight:700;transition:transform .12s ease, background .12s ease}
.bouton:hover{transform:translateY(-1px)}
.bouton:active{transform:translateY(1px)}
.bouton.vert{background:var(--vert)}
.bouton.clair{background:transparent;color:var(--encre-doux);border:1px solid var(--trait)}
.rangee{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- texte de lecture ---------- */
#texte{font-size:clamp(25px,3.4vw,34px);line-height:1.95;letter-spacing:.005em;
       max-width:22em;margin:0 auto;padding:6px 0}
/* Le texte qu'elle doit lire est ce qu'il y a de PLUS lisible à l'écran :
   encre pleine. Ce sont les mots déjà lus qui s'effacent doucement en vert,
   pour montrer le chemin parcouru — l'inverse rendait la page illisible. */
#texte .m{border-radius:8px;padding:2px 5px;transition:background .12s ease,color .12s ease;
          color:var(--encre)}
#texte .m.ok{color:#6E8F6B}
#texte .m.corrige{color:#6E8F6B;box-shadow:inset 0 -3px 0 var(--vert)}
#texte .m.saute{color:#A79E8C}
/* le mot en cours de lecture : bleu franc, visible d'un coup d'oeil */
#texte .m.courant{background:var(--bleu);color:#fff;font-weight:700}
/* le mot à relire : c'est le rouge qui le désigne, pas la voix */
#texte .m.erreur{background:var(--rouge);color:#fff;font-weight:700;
                 animation:attire 1s ease-in-out 3}
#texte .m.erreur.courant{background:var(--rouge)}
@keyframes attire{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
#texte .br{display:block;height:.35em}

/* ---------- barre d'état ---------- */
.etat{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;
      color:var(--encre-doux);font-size:15px;min-height:26px}
.point{width:9px;height:9px;border-radius:50%;background:var(--vert);animation:respire 1.6s ease-in-out infinite}
.point.parle{background:var(--bleu);animation:none}
@keyframes respire{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.bulle{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:12px 18px;
       font-size:17px;text-align:center;max-width:34em;margin:14px auto 0}

/* ---------- fin ---------- */
.bandeau{border-radius:14px;padding:16px 20px;font-size:18px;text-align:center;margin-bottom:18px}
.bandeau.vert{background:var(--vert-clair);color:#2F6B3A}
.bandeau.orange{background:var(--orange-clair);color:#8A5A12}
.bandeau.rouge{background:var(--rouge-clair);color:#8E3527}
.cadeaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}
.cadeau{background:var(--carte);border:1.5px solid var(--trait);border-radius:14px;padding:18px;
        font-size:17px;text-align:left;transition:border-color .12s ease}
.cadeau:hover{border-color:var(--encre)}
.cadeau.choisi{border-color:var(--vert);background:var(--vert-clair)}
.stats{display:flex;gap:26px;flex-wrap:wrap;color:var(--encre-doux);font-size:14px;margin-top:6px}
.stats b{display:block;color:var(--encre);font-size:22px;font-family:'Fraunces',serif}
.cache{display:none!important}

/* ---------- cagnotte & boutique ---------- */
.tirelire{background:var(--carte);border:1.5px solid var(--trait);border-radius:999px;
  padding:9px 17px;font-weight:700;font-size:17px;white-space:nowrap}
.tirelire::before{content:"Cagnotte ";font-weight:400;font-size:12px;color:var(--encre-doux);
  display:block;letter-spacing:.06em;text-transform:uppercase}
.gain{background:var(--vert-clair);color:#2F6B3A;border-radius:14px;padding:14px 20px;
  font-size:19px;font-weight:700;text-align:center;margin-top:16px;
  animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.cadeau-carte{background:var(--carte);border:1.5px solid var(--trait);border-radius:16px;
  padding:14px;text-align:left;display:flex;flex-direction:column;gap:8px;
  transition:border-color .12s ease, transform .12s ease}
.cadeau-carte:hover{border-color:var(--encre);transform:translateY(-2px)}
.cadeau-carte img{width:100%;height:120px;object-fit:contain;background:#fff;border-radius:10px}
.cadeau-carte .nom{font-size:14px;line-height:1.35;min-height:2.6em}
.cadeau-carte .prix{font-family:'Fraunces',serif;font-size:20px;font-weight:700}
.cadeau-carte.verrouille{opacity:.55;filter:saturate(.4)}
.cadeau-carte.verrouille:hover{transform:none;border-color:var(--trait)}
.cadeau-carte .manque{font-size:12.5px;color:var(--orange);font-weight:700}
.voile{position:fixed;inset:0;background:rgba(30,25,18,.45);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:40}
.confirme{max-width:430px;text-align:center}
.confirme img{max-height:150px;object-fit:contain;margin:0 auto 10px;display:block}
.debug{position:fixed;bottom:6px;left:8px;font-size:11px;color:#B0A794;font-family:ui-monospace,monospace}

.bande-titre{font-family:'Fraunces',Georgia,serif;font-size:17px;margin:22px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--trait)}

/* petit encouragement visuel, muet : ne bloque jamais la lecture */
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;
  background:var(--vert);color:#fff;font-weight:700;font-size:16px;
  padding:10px 22px;border-radius:999px;box-shadow:0 6px 20px -8px rgba(0,0,0,.35)}
#toast.anim{animation:toastin .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes toastin{0%{transform:translate(-50%,-16px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}

/* ---------- argent : pièces, billets, pécule ---------- */
.pecule{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--carte);
  border:1.5px solid var(--trait);border-radius:16px;padding:14px 16px;margin:6px 0 4px}
.pecule .argent{filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.pecule-vide{color:var(--encre-doux);font-size:15px}
.paquet{display:inline-flex;align-items:center;gap:5px}
.paquet .fois{font-family:'Fraunces',serif;font-size:18px}
.bloc-argent{text-align:center;margin-top:16px}
.argent-tombe{display:flex;gap:10px;justify-content:center;align-items:center}
.argent-tombe .argent{animation:tombe .7s cubic-bezier(.2,1.4,.4,1)}
.argent-tombe .argent:nth-child(2){animation-delay:.12s}
.argent-tombe .argent:nth-child(3){animation-delay:.24s}
@keyframes tombe{0%{transform:translateY(-90px) rotate(-16deg);opacity:0}
  60%{transform:translateY(8px) rotate(4deg);opacity:1}100%{transform:none}}
.gain-libelle{font-family:'Fraunces',serif;font-weight:700;font-size:21px;color:#2F6B3A;margin-top:10px}
.zero-triste{font-family:'Fraunces',serif;font-weight:700;font-size:56px;color:var(--encre-doux);
  animation:secoue .6s ease}
.zero-triste + .gain-libelle{color:var(--encre-doux);font-size:16px;font-weight:400}
@keyframes secoue{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}