/* Écran 7 — crème #FBF6EA qui vire au jaune foncé à mesure qu'on coche (fond posé par le JS sur body --bg),
   horloge sobre crème + noir, secteur miel #F7D36A, pilules fines, bouton noir.
   --dark (0 → 1) est posé par le JS sur la slide : il suit le nombre de tâches cochées. */
.slide[data-screen="07"] { --ink: #16140F; --honey: #F7D36A; --line: #E4DCC8; --dark: 0; color: var(--ink); }

/* Barre d'avancement : filet miel sur fond encre translucide */
.slide[data-screen="07"] .q-progress { height: .35rem; background: rgb(22 20 15 / .1); }
.slide[data-screen="07"] .q-progress i { background: linear-gradient(90deg, #F7D36A, #C99414); border-radius: 0 .35rem .35rem 0; }

.slide[data-screen="07"] .wrap { position: relative; gap: .85rem; padding-top: 2rem; align-items: stretch; }
.slide[data-screen="07"] .halo {
  position: absolute; z-index: -1; left: 50%; top: 5rem; width: 26rem; height: 22rem; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 226 120 / .6), rgb(255 236 170 / .22) 55%, transparent);
  filter: blur(8px); opacity: calc(.9 - var(--dark) * .8); transition: opacity .7s;
  animation: s07-breathe 5s ease-in-out infinite;
}
.slide[data-screen="07"] .chip { align-self: center; margin: 0; padding: .3rem .85rem; border-radius: 2rem; background: rgb(255 255 255 / .75); border: 1px solid var(--line); font-size: .78rem; }
.slide[data-screen="07"] .q { margin: 0; text-align: center; font-size: clamp(1.1rem, 5.3vw, 2.3rem); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.slide[data-screen="07"] .q b { font-weight: 800; }

/* Horloge : cadran minimal, index discrets, aiguilles fines, trotteuse miel */
.slide[data-screen="07"] .clock { position: relative; width: min(56vw, 13.5rem); margin: .2rem auto 0; animation: s07-in .7s cubic-bezier(.22,1,.36,1) both; }
.slide[data-screen="07"] .clock svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 24px rgb(22 20 15 / .16)); }
.slide[data-screen="07"] .face { fill: #FFFDF7; stroke: rgb(22 20 15 / .16); stroke-width: 1; transition: stroke .6s, stroke-width .6s; }
.slide[data-screen="07"] .sector { fill: none; stroke: var(--honey); opacity: calc(.42 + var(--dark) * .45); transition: opacity .7s; }
.slide[data-screen="07"] .mk { stroke: var(--ink); stroke-width: 1; stroke-linecap: round; opacity: .32; }
.slide[data-screen="07"] .mq { stroke-width: 1.7; opacity: .8; }
.slide[data-screen="07"] .hh line, .slide[data-screen="07"] .mh line { stroke: var(--ink); stroke-linecap: round; }
.slide[data-screen="07"] .hh line { stroke-width: 3.2; }
.slide[data-screen="07"] .mh line { stroke-width: 2; }
.slide[data-screen="07"] .sh line { stroke: #D3A21C; stroke-width: 1; stroke-linecap: round; }
.slide[data-screen="07"] .pin { fill: var(--ink); }
.slide[data-screen="07"] .pin-in { fill: #FFFDF7; }
.slide[data-screen="07"] .hh, .slide[data-screen="07"] .mh, .slide[data-screen="07"] .sh { transform-origin: 120px 120px; }
.slide[data-screen="07"] .sh { animation: s07-sweep 60s linear infinite; }
.slide[data-screen="07"] .clock.full .face { stroke: #C99414; stroke-width: 1.6; }

/* Compteur sous le cadran */
.slide[data-screen="07"] .readout { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; line-height: 1.1; }
.slide[data-screen="07"] .big { font-weight: 300; font-size: 1.7rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.slide[data-screen="07"] .small { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(22 20 15 / .6); }

/* « +2 h » qui s'envole du cadran */
.slide[data-screen="07"] .gain {
  position: absolute; left: 50%; top: 24%; padding: .2rem .6rem; border-radius: 2rem; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--honey); font-weight: 600; font-size: .85rem;
  box-shadow: 0 8px 18px -8px rgb(22 20 15 / .6);
}
.slide[data-screen="07"] .gain.off { background: #fff; color: #8C826A; box-shadow: 0 0 0 1px var(--line); }

.slide[data-screen="07"] .tally { margin: 0; text-align: center; font-size: .9rem; color: rgb(22 20 15 / .65); min-height: 1.3em; }

/* Pilules 2 colonnes */
.slide[data-screen="07"] .grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.slide[data-screen="07"] .pill {
  position: relative; overflow: hidden; min-height: 3.1rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 1.6rem;
  background: rgb(255 255 255 / .8); color: var(--ink); font-size: .86rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center;
  display: grid; place-items: center;
  animation: s07-in .5s cubic-bezier(.22,1,.36,1) backwards;
  transition: border-color .3s, box-shadow .3s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="07"] .grid > :nth-child(2) { animation-delay: .05s; }
.slide[data-screen="07"] .grid > :nth-child(3) { animation-delay: .1s; }
.slide[data-screen="07"] .grid > :nth-child(4) { animation-delay: .15s; }
.slide[data-screen="07"] .grid > :nth-child(5) { animation-delay: .2s; }
.slide[data-screen="07"] .grid > :nth-child(6) { animation-delay: .25s; }
.slide[data-screen="07"] .grid > :nth-child(7) { animation-delay: .3s; }
.slide[data-screen="07"] .grid > :nth-child(8) { animation-delay: .35s; }
.slide[data-screen="07"] .grid > :nth-child(9) { animation-delay: .4s; }
.slide[data-screen="07"] .grid > :nth-child(10) { animation-delay: .45s; }
/* remplissage miel qui monte depuis le centre */
.slide[data-screen="07"] .pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #FADF8A, var(--honey));
  clip-path: circle(0% at 50% 50%); transition: clip-path .45s cubic-bezier(.22,1,.36,1);
}
.slide[data-screen="07"] .pill > * { position: relative; }
.slide[data-screen="07"] .pill[aria-pressed="true"] { border-color: #E9BE3E; box-shadow: 0 8px 18px -10px rgb(200 150 20 / .7); }
.slide[data-screen="07"] .pill[aria-pressed="true"]::before { clip-path: circle(75% at 50% 50%); }
.slide[data-screen="07"] .pill[aria-pressed="true"] span { font-weight: 700; }

.slide[data-screen="07"] .other { grid-column: 1 / -1; display: flex; gap: .4rem; padding: .3rem .35rem .3rem .3rem; }
.slide[data-screen="07"] .other-t { flex: none; min-height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 1.4rem; background: transparent; color: inherit; font-size: .86rem; font-weight: 600; letter-spacing: -.01em; }
.slide[data-screen="07"] .other input { flex: 1; min-width: 0; border: 0; border-radius: 1.3rem; padding: .55rem .9rem; background: rgb(255 255 255 / .85); font-size: .85rem; }

.slide[data-screen="07"] .next {
  position: sticky; bottom: 0; min-height: 3.5rem; margin-top: .3rem; border: 0; border-radius: 2rem; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 1.05rem; box-shadow: 0 14px 28px -14px rgb(22 20 15 / .8), 0 -14px 16px 4px var(--bg, #FBF6EA);
  transition: opacity .25s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .7s;
}
.slide[data-screen="07"] .next:disabled { opacity: .35; cursor: not-allowed; }

@media (max-height: 720px) and (max-width: 767px) {
  .slide[data-screen="07"] .clock { width: min(48vw, 11rem); }
}
@media (min-width: 768px) {
  .slide[data-screen="07"] .wrap { max-width: 36rem; padding-top: 0; }
  .slide[data-screen="07"] .clock { width: 14.5rem; }
  .slide[data-screen="07"] .pill { font-size: .92rem; }
  .slide[data-screen="07"] .pill:hover:not([aria-pressed="true"]) { border-color: #CFC3A4; }
  .slide[data-screen="07"] .next { position: static; box-shadow: 0 14px 28px -14px rgb(22 20 15 / .8); }
}

@keyframes s07-sweep { to { transform: rotate(360deg); } }
@keyframes s07-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes s07-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="07"] .halo, .slide[data-screen="07"] .sh { animation: none !important; }
}