/* Écran 12 — ticket / agenda : jaune miel #F6C945, billets blancs perforés, tampon rouge */
.slide[data-screen="12"] { --ink: #111; --red: #D7261E; --honey: #F6C945; color: var(--ink); }
.slide[data-screen="12"] .tk { gap: 1.2rem; }
.slide[data-screen="12"] .tk-title {
  margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 800;
  font-size: clamp(1rem, 4.3vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; text-align: center; text-wrap: balance;
  animation: tk-in .55s cubic-bezier(.2,.9,.3,1.1) both;
}
.slide[data-screen="12"] .tk-list { display: flex; flex-direction: column; gap: .9rem; }

/* Billet : talon + corps séparés par une ligne perforée, encoches rondes sur les bords */
.slide[data-screen="12"] .tk-ticket {
  position: relative; display: flex; align-items: stretch; width: 100%; min-height: 5.6rem; padding: 0;
  border: 0; border-radius: .9rem; background: #fff; color: var(--ink); text-align: left;
  box-shadow: 0 2px 0 rgb(0 0 0 / .08), 0 14px 26px -16px rgb(80 50 0 / .55);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  animation: tk-in .55s cubic-bezier(.2,.9,.3,1.1) both;
  -webkit-tap-highlight-color: transparent;
}
.slide[data-screen="12"] .tk-ticket:nth-child(1) { animation-delay: .1s; rotate: -.6deg; }
.slide[data-screen="12"] .tk-ticket:nth-child(2) { animation-delay: .2s; rotate: .5deg; }
.slide[data-screen="12"] .tk-ticket:nth-child(3) { animation-delay: .3s; rotate: -.3deg; }
.slide[data-screen="12"] .tk-ticket:hover { transform: translateY(-3px); }
.slide[data-screen="12"] .tk-ticket:active { transform: scale(.97); }
.slide[data-screen="12"] .tk-ticket:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ink), 0 14px 26px -16px rgb(80 50 0 / .55); }
.slide[data-screen="12"] .tk-ticket.is-dim { opacity: .4; transform: scale(.97); }

.slide[data-screen="12"] .tk-stub {
  flex: none; width: 5.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  border-right: 2px dashed rgb(17 17 17 / .28); background: #FFF8E1;
}
.slide[data-screen="12"] .tk-ic svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="12"] .tk-n { font-family: "Courier New", Courier, monospace; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.slide[data-screen="12"] .tk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: .9rem 1rem .9rem 1.1rem; }
.slide[data-screen="12"] .tk-v { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.slide[data-screen="12"] .tk-sub { font-size: .85rem; opacity: .6; }

/* Encoches du billet (couleur du fond) */
.slide[data-screen="12"] .tk-ticket::before, .slide[data-screen="12"] .tk-ticket::after {
  content: ""; position: absolute; left: 5.2rem; width: 1.1rem; height: 1.1rem; margin-left: -.55rem;
  border-radius: 50%; background: var(--honey); z-index: 1;
}
.slide[data-screen="12"] .tk-ticket::before { top: -.55rem; }
.slide[data-screen="12"] .tk-ticket::after { bottom: -.55rem; }
.slide[data-screen="12"] .tk-stub { border-radius: .9rem 0 0 .9rem; }

/* Tampon : apparaît en tournant et en s'écrasant */
.slide[data-screen="12"] .tk-stamp {
  position: absolute; right: .8rem; top: 50%; display: flex; flex-direction: column; align-items: center;
  padding: .25rem .6rem; border: 3px solid var(--red); border-radius: .4rem; color: var(--red);
  font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 1rem; letter-spacing: .12em; line-height: 1.1;
  opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(2.4); pointer-events: none; mix-blend-mode: multiply;
}
.slide[data-screen="12"] .tk-stamp em { font-style: normal; font-size: .72rem; letter-spacing: .06em; }
.slide[data-screen="12"] .tk-ticket.is-stamped .tk-stamp { animation: tk-stamp .45s cubic-bezier(.2,1.5,.4,1) forwards; }
.slide[data-screen="12"] .tk-ticket.is-stamped { animation: tk-thud .45s .12s ease-out; }

.slide[data-screen="12"] .tk-note { margin: 0; font-size: .88rem; opacity: .7; text-align: center; }

@keyframes tk-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes tk-stamp {
  0% { opacity: 0; transform: translateY(-50%) rotate(-40deg) scale(2.4); }
  60% { opacity: .95; transform: translateY(-50%) rotate(-10deg) scale(.92); }
  100% { opacity: .9; transform: translateY(-50%) rotate(-12deg) scale(1); }
}
@keyframes tk-thud { 40% { transform: scale(.985) translateY(2px); } }

@media (min-width: 768px) {
  .slide[data-screen="12"] .tk { max-width: 34rem; }
  .slide[data-screen="12"] .tk-ticket { min-height: 6.4rem; }
  .slide[data-screen="12"] .tk-v { font-size: 1.6rem; }
  .slide[data-screen="12"] .tk-stamp { font-size: 1.2rem; right: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="12"] * { animation: none !important; }
  .slide[data-screen="12"] .tk-ticket.is-stamped .tk-stamp { opacity: .9; transform: translateY(-50%) rotate(-12deg); }
}

/* Barre d'avancement : bande de billet perforée, remplie à l'encre, coup de tampon rouge en tête */
.slide[data-screen="12"] .q-progress {
  top: max(.5rem, env(safe-area-inset-top));
  width: 100%; max-width: 34rem; height: 6px;
  margin: calc(max(.5rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-top))) auto .5rem;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #FFF8E1 0 9px, rgb(17 17 17 / .22) 9px 11px);
  box-shadow: 0 1px 0 rgb(80 50 0 / .25);
}
.slide[data-screen="12"] .q-progress i { border-radius: 3px; background: var(--ink); box-shadow: inset -3px 0 0 var(--red); }