/* Écran 8 — fond crème #F5F1EA qui se grise avec la fatigue (body --bg posé par le JS), disque pastel, pilules blanches, encre #1B1E2B.
   --tired (0 → 1) est posé par le JS sur la slide. */
.slide[data-screen="08"] { color: #1B1E2B; --ink: #1B1E2B; --accent: #BFF3D9; --line: #E7E0D3; --tired: 0; }

/* Barre d'avancement : trait encre arrondi sur fond translucide */
.slide[data-screen="08"] .q-progress { height: .3rem; background: rgb(27 30 43 / .1); }
.slide[data-screen="08"] .q-progress i { background: var(--ink); border-radius: 0 .3rem .3rem 0; }

.slide[data-screen="08"] .wrap { gap: 1rem; padding-top: 2.25rem; }
.slide[data-screen="08"] .face-wrap { display: grid; justify-items: center; gap: .35rem; }
.slide[data-screen="08"] .face {
  width: min(46vw, 184px); height: auto; overflow: visible; transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 30px var(--glow, rgb(191 243 217 / .55)));
}
.slide[data-screen="08"] .skin { fill: #FFFDF8; }
.slide[data-screen="08"] .p-drop { fill: #BEE3F8; }
.slide[data-screen="08"] .mood {
  margin: 0; font-size: .82rem; font-weight: 600; padding: .3rem .8rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
/* Question : une seule ligne, centrée, typo système */
.slide[data-screen="08"] .title {
  margin: 0; text-align: center; white-space: nowrap; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  font-family: "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, sans-serif;
  font-size: clamp(.95rem, 4.6vw, 1.5rem);
}
.slide[data-screen="08"] .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.slide[data-screen="08"] .row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .4rem .35rem 1.15rem;
  box-shadow: 0 8px 18px -14px rgb(27 30 43 / .35);
  animation: s08-in .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.slide[data-screen="08"] .row-label { font-size: .92rem; font-weight: 600; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
/* Groupe compact à droite : − valeur + collés */
.slide[data-screen="08"] .stepper {
  position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 0;
  background: #F1ECE4; border-radius: 999px; padding: .2rem;
}
.slide[data-screen="08"] .st-btn {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; background: #fff; color: var(--ink);
  font-size: 1.25rem; font-weight: 600; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgb(27 30 43 / .12);
  transition: background .5s, transform .18s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.slide[data-screen="08"] .st-btn.plus { background: var(--accent); }
.slide[data-screen="08"] .st-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.slide[data-screen="08"] .st-val {
  display: inline-flex; align-items: baseline; justify-content: center; min-width: 3.3rem; padding: 0 .1rem;
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.04em;
}
/* Chiffre qui roule : l'ancien et le nouveau partagent la même case, le conteneur masque le dépassement */
.slide[data-screen="08"] .st-roll { display: inline-grid; overflow: hidden; line-height: 1.1; }
.slide[data-screen="08"] .st-n { grid-area: 1 / 1; will-change: transform; }
.slide[data-screen="08"] .st-val small { font-weight: 600; opacity: .5; font-size: .5em; margin-left: .08em; letter-spacing: 0; }
/* « +1 » qui s'envole au-dessus du compteur */
.slide[data-screen="08"] .fly {
  position: absolute; left: 50%; top: -.1rem; z-index: 2; pointer-events: none; font-style: normal; font-weight: 800; font-size: .78rem;
  padding: .1rem .45rem; border-radius: 999px; background: var(--accent); color: var(--ink); box-shadow: 0 4px 10px -4px rgb(27 30 43 / .4);
}
.slide[data-screen="08"] .fly.down { background: #fff; color: #6B6F7D; box-shadow: 0 0 0 1px var(--line); }

.slide[data-screen="08"] .total-card {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; border-radius: 1.6rem; background: #fff; border: 1px solid var(--line);
}
.slide[data-screen="08"] .total-txt { display: grid; gap: .15rem; min-width: 0; }
.slide[data-screen="08"] .total-label { font-size: .8rem; opacity: .6; }
.slide[data-screen="08"] .total { font-size: clamp(2.8rem, 15vw, 4.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
/* Info discrète : ce que ça représente par mois */
.slide[data-screen="08"] .compare { font-size: .78rem; line-height: 1.35; color: #6B6F7D; font-variant-numeric: tabular-nums; min-height: 1.35em; }
.slide[data-screen="08"] .compare:empty { display: none; }
.slide[data-screen="08"] .compare b { color: var(--ink); font-weight: 700; }

.slide[data-screen="08"] .next {
  position: sticky; bottom: 0; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  padding: 1rem 1.5rem; font-weight: 650; font-size: 1.05rem; box-shadow: 0 12px 26px -12px rgb(27 30 43 / .6), 0 -14px 16px 4px var(--bg, #F5F1EA);
  transition: background .2s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .7s;
}
.slide[data-screen="08"] .next:hover { background: #2C3043; }
@keyframes s08-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (min-width: 768px) {
  .slide[data-screen="08"] .wrap { max-width: 34rem; }
  .slide[data-screen="08"] .face { width: 210px; }
  .slide[data-screen="08"] .title { font-size: 1.6rem; }
  .slide[data-screen="08"] .next { box-shadow: 0 12px 26px -12px rgb(27 30 43 / .6); }
}