/* ==========================================================================
   GHOST RECORDS — Réservation « cahier de session »
   ========================================================================== */
.page-booking {
  --paper: #f7f2e4;
  --paper-2: #efe7d2;
  --rule: rgba(72, 120, 196, .22);
  --margin-line: rgba(214, 76, 76, .55);
  --ink: #1f3aa6;
  --ink-soft: rgba(31, 58, 166, .55);
  --pencil: #55535e;
  --red-pen: #cf3428;
  --marker: #6c3fe0;
  --hl: rgba(255, 224, 51, .7);
  --line-h: 36px;
}
.bk-hero { padding-bottom: clamp(36px, 5vw, 64px); }
.bk { position: relative; padding-bottom: clamp(80px, 10vw, 140px); }
@media (max-width: 1079px) { .bk { padding-bottom: 120px; } }
.bk::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; z-index: -1; background: radial-gradient(60% 50% at 30% 20%, rgba(90, 47, 216, .18), transparent 70%); }
.bk__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1080px) { .bk__grid { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ---------- Le cahier ---------- */
.bk__book { position: relative; }
.notebook[hidden] { display: none; }
.notebook {
  position: relative; display: block; max-width: 880px; margin-inline: auto;
  transform: rotate(-.6deg);
  color: var(--pencil); font-family: var(--f-hand); transition: transform .9s var(--ease-in-out), opacity .7s;
}
.nb-page {
  position: relative; overflow: clip;
  padding: clamp(28px, 4vw, 54px) clamp(18px, 4vw, 56px) clamp(32px, 4vw, 60px) clamp(64px, 9vw, 112px);
  border-radius: 6px 14px 14px 6px;
  background:
    linear-gradient(90deg, transparent calc(clamp(52px, 7.6vw, 92px) - 1px), var(--margin-line) calc(clamp(52px, 7.6vw, 92px) - 1px), var(--margin-line) calc(clamp(52px, 7.6vw, 92px) + 1px), transparent calc(clamp(52px, 7.6vw, 92px) + 1px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--line-h) - 1px), var(--rule) calc(var(--line-h) - 1px) var(--line-h)),
    radial-gradient(120% 80% at 80% 0%, #fbf8ee, transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  background-position: 0 0, 0 92px, 0 0, 0 0;
  box-shadow: inset 0 0 60px rgba(120, 90, 40, .12), inset -1px 0 0 rgba(0, 0, 0, .05), 0 40px 70px -10px rgba(0, 0, 0, .6), 0 8px 16px rgba(0, 0, 0, .35);
}
/* trous + spirale */
.nb-page::before { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 16px; background: radial-gradient(circle at 8px 14px, #1a1820 5.5px, rgba(0, 0, 0, .25) 6.5px, transparent 7.5px) 0 0 / 16px 34px repeat-y; }
.nb-spiral { position: absolute; z-index: 3; left: -14px; top: 20px; bottom: 20px; width: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f3f3f6'/%3E%3Cstop offset='.5' stop-color='%23a7a6b0'/%3E%3Cstop offset='1' stop-color='%2350505a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 14 C 18 6, 4 6, 4 14 C 4 22, 18 22, 30 16' fill='none' stroke='url(%23g)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 44px 34px repeat-y; }
/* coin corné */
.nb-page::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; background: linear-gradient(135deg, rgba(0, 0, 0, .0) 50%, #e2d9c2 50%, #f3ecda 70%); box-shadow: -4px -4px 8px rgba(0, 0, 0, .08); border-top-left-radius: 6px; }

/* doodles */
.nb-doodles { position: absolute; inset: 0; pointer-events: none; color: var(--marker); }
.dd { position: absolute; opacity: .55; }
.dd-ghost { width: clamp(60px, 9vw, 104px); right: clamp(14px, 4vw, 44px); top: clamp(18px, 3vw, 34px); transform: rotate(9deg); color: var(--ink); opacity: .5; animation: dd-float 4s ease-in-out infinite alternate; }
@keyframes dd-float { to { transform: rotate(4deg) translateY(-8px); } }
.dd-star { width: 30px; right: clamp(110px, 16vw, 190px); top: 40px; color: var(--red-pen); transform: rotate(-12deg); }
.dd-notes { width: 64px; right: 30px; top: 46%; transform: rotate(-8deg); color: var(--ink); opacity: .35; }
.dd-coffee { width: 150px; height: 150px; right: -40px; bottom: 90px; border-radius: 50%; background: radial-gradient(circle, transparent 58%, rgba(140, 92, 40, .16) 60%, rgba(140, 92, 40, .05) 64%, transparent 66%), radial-gradient(circle at 40% 40%, rgba(140, 92, 40, .05), transparent 60%); opacity: 1; transform: rotate(20deg) scaleX(1.06); }

/* en-tête */
.nb-head { position: relative; margin-bottom: clamp(18px, 3vw, 30px); }
.nb-date { font-family: var(--f-hand); font-size: 1.15rem; color: var(--pencil); opacity: .8; }
.nb-title { font-family: var(--f-marker); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; color: #22202a; margin-top: 6px; transform: rotate(-1.2deg); letter-spacing: .01em; }
.nb-hl { position: relative; white-space: nowrap; }
.nb-hl::before { content: ""; position: absolute; z-index: -1; left: -.15em; right: -.15em; bottom: .02em; height: .55em; background: var(--hl); transform: rotate(-1.5deg) skewX(-8deg); border-radius: 3px 8px 4px 10px; }
.nb-sub { font-size: 1.25rem; color: var(--ink-soft); margin-top: 6px; }

/* parties */
.nb-part { border: 0; margin: 0; padding: clamp(18px, 2.4vw, 26px) 0 clamp(10px, 1.6vw, 18px); min-width: 0; position: relative; }
.nb-part + .nb-part { border-top: 2px dashed rgba(31, 58, 166, .16); }
.nb-part legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin-bottom: 10px; }
.nb-tag { font-family: var(--f-marker); font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--marker); transform: rotate(-2deg); display: inline-block; }
.nb-h { position: relative; font-family: var(--f-marker); font-size: clamp(1.5rem, 3vw, 2.1rem); color: #22202a; line-height: 1.1; }
.nb-h::after { content: ""; position: absolute; left: -4px; right: -6px; bottom: -4px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C40 2 80 7 120 4 S180 2 198 5' fill='none' stroke='%23cf3428' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease-out); }
.nb-part.is-done .nb-h::after { transform: scaleX(1); }
.nb-part.is-done .nb-tag::after { content: " ✓"; color: #1d9a5b; font-family: var(--f-hand); font-weight: 700; }

/* lignes de saisie */
.nb-row { display: grid; gap: 0 28px; }
@media (min-width: 680px) { .nb-row { grid-template-columns: 1fr 1fr; } }
.nb-line { position: relative; display: grid; padding-top: 6px; margin-bottom: 6px; }
.nb-line label, .nb-label { font-family: var(--f-hand); font-size: 1.22rem; color: var(--pencil); line-height: 1.2; }
.nb-label { margin-top: 18px; margin-bottom: 6px; }
.nb-line small, .nb-label small { font-size: .95rem; opacity: .7; }
.nb-line input, .nb-line textarea {
  width: 100%; min-height: 46px; border: 0; border-radius: 0; padding: 4px 2px 2px; background: transparent;
  font-family: var(--f-hand); font-weight: 600; font-size: 1.75rem; line-height: 1.2; color: var(--ink);
  border-bottom: 2px solid rgba(31, 58, 166, .35); caret-color: var(--red-pen);
  transition: border-color .3s, background-color .3s;
}
.nb-line input::placeholder, .nb-line textarea::placeholder { color: rgba(85, 83, 94, .38); font-weight: 400; }
.nb-line input:focus, .nb-line textarea:focus { outline: none; border-bottom-color: var(--ink); background: linear-gradient(transparent 55%, rgba(255, 224, 51, .28) 55%); }
.nb-line--area textarea { min-height: calc(var(--line-h) * 4); resize: vertical; border-bottom: 0; line-height: var(--line-h); padding-top: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--line-h) - 2px), rgba(31, 58, 166, .3) calc(var(--line-h) - 2px) var(--line-h)); }
.nb-line--area textarea:focus { background: repeating-linear-gradient(180deg, transparent 0 calc(var(--line-h) - 2px), rgba(31, 58, 166, .55) calc(var(--line-h) - 2px) var(--line-h)); }
.nb-line.is-invalid input { border-bottom-color: var(--red-pen); }
.nb-err { display: block; min-height: 0; font-family: var(--f-hand); font-weight: 700; font-size: 1.2rem; color: var(--red-pen); transform: rotate(-1deg); }
.nb-err:empty { display: none; }

/* options entourées */
.nb-opts { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.nb-opts--list { flex-direction: column; align-items: flex-start; gap: 2px; }
.nb-opt, .nb-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nb-opt input, .nb-chip input, .nb-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nb-opt__t { position: relative; display: inline-block; padding: 6px 16px; font-family: var(--f-hand); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.7rem); line-height: 1.25; color: #2b2933; transition: color .25s, transform .3s var(--ease-spring); }
.nb-opt__t::before { content: "○"; position: absolute; left: -14px; top: 50%; translate: 0 -52%; font-size: .9em; color: var(--pencil); opacity: .6; transition: opacity .2s; }
.nb-opt__t em { font-style: normal; font-weight: 400; color: var(--pencil); font-size: .85em; }
.nb-chip span { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; font-family: var(--f-hand); font-weight: 600; font-size: 1.55rem; color: #2b2933; transition: color .25s, transform .3s var(--ease-spring); }
.scrib { position: absolute; inset: -6px -10px; width: calc(100% + 20px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.scrib path { fill: none; stroke: var(--red-pen); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .55s var(--ease-out); }
.nb-opt:hover .nb-opt__t, .nb-chip:hover span { transform: rotate(-1deg) translateY(-1px); color: var(--ink); }
.nb-opt input:checked + .nb-opt__t, .nb-chip input:checked + span { color: var(--ink); }
.nb-opt input:checked + .nb-opt__t::before { opacity: 0; }
.nb-opt input:checked + .nb-opt__t .scrib path, .nb-chip input:checked + span .scrib path { stroke-dashoffset: 0; }
.nb-opt input:focus-visible + .nb-opt__t, .nb-chip input:focus-visible + span { outline: 2px dashed var(--ink); outline-offset: 4px; border-radius: 8px; }
.nb-chip input:disabled + span { color: rgba(85, 83, 94, .35); text-decoration: line-through; text-decoration-color: rgba(207, 52, 40, .5); text-decoration-thickness: 2px; cursor: not-allowed; transform: none; }
.nb-badge { font-family: var(--f-marker); font-size: .78rem; color: #fff; background: var(--marker); padding: 2px 8px; border-radius: 4px; transform: rotate(4deg); }
.nb-note { margin-top: 10px; font-family: var(--f-hand); font-size: 1.3rem; line-height: 1.3; color: var(--marker); }
.nb-note--ink { color: var(--ink); font-weight: 700; }
.nb-note--red { color: var(--red-pen); font-weight: 700; }

/* cases à cocher */
.nb-check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 10px; cursor: pointer; font-family: var(--f-hand); font-weight: 600; font-size: 1.5rem; color: #2b2933; }
.nb-box { position: relative; width: 26px; height: 26px; flex: none; border: 2px solid #3a3844; border-radius: 3px 5px 4px 6px; transform: rotate(-3deg); background: rgba(255, 255, 255, .35); }
.nb-box svg { position: absolute; left: -2px; top: -8px; width: 34px; height: 34px; overflow: visible; }
.nb-box path { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .4s var(--ease-out); }
.nb-check input:checked + .nb-box path { stroke-dashoffset: 0; }
.nb-check input:focus-visible + .nb-box { outline: 2px dashed var(--ink); outline-offset: 3px; }
.nb-check--big { font-size: 1.6rem; color: #22202a; margin-top: 10px; }
.nb-check--big .nb-box { width: 30px; height: 30px; }

/* calendrier dessiné */
.nb-cal { max-width: 460px; padding: 14px 14px 10px; border: 2px solid #3a3844; border-radius: 12px 18px 10px 16px; transform: rotate(.6deg); background: rgba(255, 255, 255, .28); }
.nb-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.nb-cal__month { font-family: var(--f-marker); font-size: 1.35rem; color: #22202a; text-transform: capitalize; }
.nb-cal__nav { width: 44px; height: 44px; border-radius: 50%; font-family: var(--f-hand); font-size: 2rem; line-height: 1; color: var(--ink); display: grid; place-items: center; transition: background .2s; }
.nb-cal__nav:hover:not(:disabled) { background: rgba(31, 58, 166, .1); }
.nb-cal__nav:disabled { opacity: .25; cursor: not-allowed; }
.nb-cal__dow, .nb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.nb-cal__dow span { font-family: var(--f-hand); font-weight: 700; font-size: 1.15rem; color: var(--pencil); padding-bottom: 4px; border-bottom: 1.5px solid rgba(58, 56, 68, .5); margin-bottom: 4px; }
.nb-day { position: relative; aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; font-family: var(--f-hand); font-weight: 600; font-size: 1.45rem; color: #2b2933; border-radius: 50%; transition: color .2s, transform .25s var(--ease-spring); }
.nb-day:hover:not(:disabled) { color: var(--ink); transform: scale(1.12) rotate(-4deg); }
.nb-day:disabled { color: rgba(85, 83, 94, .3); cursor: not-allowed; }
.nb-day:disabled::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 1.5px; background: rgba(207, 52, 40, .45); transform: rotate(-28deg); }
.nb-day.is-today { text-decoration: underline wavy rgba(108, 63, 224, .6); text-underline-offset: 4px; }
.nb-day .scrib { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
.nb-day[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.nb-day[aria-pressed="true"] .scrib path { stroke-dashoffset: 0; }
.nb-day:focus-visible { outline: 2px dashed var(--ink); outline-offset: 0; }

/* créneaux */
.nb-slots { display: grid; gap: 6px; }
.nb-slots__empty { font-family: var(--f-hand); font-size: 1.3rem; color: var(--ink-soft); }
.nb-slot-row { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 4px; }
.nb-slot-row > b { font-family: var(--f-marker); font-weight: 400; font-size: 1rem; color: var(--marker); transform: rotate(-3deg); }
.nb-slot-row .nb-opts { gap: 2px 2px; }
.nb-slot-row .nb-chip span { font-size: 1.35rem; min-height: 42px; padding: 2px 9px; }
@media (max-width: 520px) { .nb-slot-row { grid-template-columns: 1fr; } .nb-slot-row > b { margin-top: 6px; } }

/* règles */
.nb-rules { margin: 4px 0 0; padding-left: 1.6em; display: grid; gap: 2px; font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.45; color: #2b2933; }
.nb-rules li::marker { font-family: var(--f-marker); color: var(--marker); }
.nb-rules mark { background: linear-gradient(100deg, transparent 2%, var(--hl) 4%, var(--hl) 96%, transparent 98%) 0 70% / 100% 62% no-repeat; color: inherit; padding: 0 .1em; }
.nb-rules .ok { color: #1d9a5b; font-weight: 700; } .nb-rules .mid { color: #c27a00; font-weight: 700; } .nb-rules .no { color: var(--red-pen); font-weight: 700; }
.nb-aside { font-family: var(--f-hand); font-size: 1.15rem; color: var(--pencil); margin-top: 8px; }
.nb-aside a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* signature */
.nb-sign { position: relative; max-width: 460px; height: 150px; margin-top: 6px; border-bottom: 2px solid #3a3844; }
.nb-sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.nb-sign__hint { position: absolute; left: 6px; bottom: 8px; font-family: var(--f-hand); font-size: 1.3rem; color: rgba(85, 83, 94, .5); pointer-events: none; transition: opacity .3s; }
.nb-sign.is-signed .nb-sign__hint { opacity: 0; }
.nb-sign__clear { position: absolute; right: 0; bottom: -34px; font-family: var(--f-hand); font-size: 1.2rem; color: var(--red-pen); text-decoration: underline; padding: 4px; min-height: 32px; }
.nb-total { display: flex; align-items: baseline; gap: 14px; margin-top: 52px; font-family: var(--f-hand); font-size: 1.4rem; color: var(--pencil); }
.nb-total b { font-family: var(--f-marker); font-weight: 400; font-size: 2.2rem; color: #22202a; position: relative; }
.nb-total b::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -4px; height: 10px; border-bottom: 3px double var(--red-pen); }

/* bouton REC */
.nb-submit {
  position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; min-height: 64px; padding: 0 30px 0 22px;
  border-radius: 999px; background: #17151d; color: #f1eee8; font-family: var(--f-tech); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 8px 0 #000, 0 18px 30px -8px rgba(0, 0, 0, .5); transform: rotate(-1deg); transition: transform .2s, box-shadow .2s, background .3s;
}
.nb-submit:hover { background: #241f30; transform: rotate(-1deg) translateY(-2px); box-shadow: 0 10px 0 #000, 0 24px 40px -10px rgba(207, 52, 40, .55); }
.nb-submit:active { transform: rotate(-1deg) translateY(6px); box-shadow: 0 2px 0 #000, 0 8px 14px -6px rgba(0, 0, 0, .5); }
.nb-submit__dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7a70, var(--rec) 55%, #a01010); box-shadow: 0 0 16px var(--rec); animation: rec 1.2s steps(2, jump-none) infinite; }
.nb-submit:disabled { opacity: .6; cursor: progress; }

/* ---------- Ticket (récap) ---------- */
.bk__aside { position: relative; }
@media (min-width: 1080px) { .bk__aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.ticket {
  --t-bg: #fbfaf6;
  position: relative; max-width: 360px; margin-inline: auto; padding: 26px 22px 30px; color: #1b1a20; background: var(--t-bg);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: .8rem; line-height: 1.5;
  transform: rotate(1.2deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7);
}
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(135deg, var(--t-bg) 5px, transparent 0) 0 0 / 10px 10px repeat-x, linear-gradient(-135deg, var(--t-bg) 5px, transparent 0) 0 0 / 10px 10px repeat-x; }
.ticket::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -14px; width: 110px; height: 30px; translate: -50% 0; background: rgba(230, 220, 170, .55); transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); }
.ticket__head { text-align: center; display: grid; justify-items: center; gap: 4px; }
.ticket__head svg { width: 38px; filter: invert(1); }
.ticket__brand { font-family: var(--f-tech); font-size: .9rem; letter-spacing: .3em; margin-top: 4px; }
.ticket__sub { font-size: .7rem; color: #55535e; }
.ticket__sec { text-align: center; margin: 14px 0 8px; font-size: .7rem; letter-spacing: .08em; color: #55535e; }
.ticket__tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: t; }
.ticket__tracks li { counter-increment: t; display: flex; justify-content: space-between; gap: 10px; color: #8a8892; }
.ticket__tracks li::before { content: counter(t, decimal-leading-zero) "  "; white-space: pre; }
.ticket__tracks li::after { content: "[ ]"; margin-left: auto; }
.ticket__tracks li.is-done { color: #1b1a20; }
.ticket__tracks li.is-done::after { content: "[✓]"; color: #1d9a5b; font-weight: 700; }
.ticket__rows { margin: 0; display: grid; gap: 4px; }
.ticket__rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted #c9c6bc; padding-bottom: 3px; }
.ticket__rows dt { color: #55535e; flex: none; }
.ticket__rows dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.ticket__rows dd.flash { animation: print .6s steps(3); }
@keyframes print { 0% { background: #1b1a20; color: #fbfaf6; } 100% { background: transparent; } }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 2px dashed #1b1a20; font-size: 1rem; font-weight: 700; letter-spacing: .1em; }
.ticket__total b { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -.03em; }
.ticket__note { font-size: .7rem; color: #55535e; margin-top: 4px; }
.ticket__barcode { height: 46px; margin: 16px 6px 6px; background: repeating-linear-gradient(90deg, #1b1a20 0 2px, transparent 2px 4px, #1b1a20 4px 5px, transparent 5px 8px, #1b1a20 8px 11px, transparent 11px 12px, #1b1a20 12px 13px, transparent 13px 16px); }
.ticket__thanks { text-align: center; font-size: .72rem; letter-spacing: .1em; }
.ticket.is-printing { animation: ticket-print .9s var(--ease-out); }
@keyframes ticket-print { 0% { transform: rotate(1.2deg) translateY(-20px); clip-path: inset(0 0 100% 0); } 100% { transform: rotate(1.2deg); clip-path: inset(0 0 0 0); } }

/* ---------- Barre mobile ---------- */
.bk-bar { position: fixed; z-index: 300; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border-radius: 16px; background: rgba(14, 13, 19, .92); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 20px 40px -10px #000; transform: translateY(140%); transition: transform .5s var(--ease-out); }
.bk-bar.is-on { transform: none; }
@media (max-width: 1079px) { .bk-bar { display: flex; } }
.bk-bar__k { font-family: var(--f-tech); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); display: block; }
.bk-bar b { font-family: var(--f-display); font-size: 1.2rem; }
.bk-bar__steps { display: flex; gap: 5px; }
.bk-bar__steps i { width: 18px; height: 6px; border-radius: 3px; background: var(--bg-3); transition: background .3s; }
.bk-bar__steps i.on { background: var(--violet); box-shadow: 0 0 8px var(--violet); }

/* ---------- Envoi : la page se déchire, la cassette sort ---------- */
.notebook.is-sent { transform: rotate(6deg) translate(30px, 60px) scale(.9); opacity: 0; pointer-events: none; }
.bk-done { display: grid; justify-items: center; text-align: center; gap: 6px; padding: clamp(10px, 3vw, 30px) 0 20px; }
.bk-done[hidden] { display: none; }
.bk-done .lead { margin-inline: auto; }
.bk-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.bk-done.is-in .cassette { animation: tape-in 1.1s var(--ease-spring) both; }
@keyframes tape-in { from { transform: translateY(60px) rotate(-14deg) scale(.7); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
.cassette { position: relative; width: min(420px, 88vw); aspect-ratio: 1.58; margin-bottom: 26px; border-radius: 16px; padding: 14px; background: linear-gradient(160deg, #2a2633, #121017); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 70px -25px rgba(90, 47, 216, .7), inset 0 1px 0 rgba(255, 255, 255, .1); transform: rotate(-3deg); display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.cassette::before, .cassette::after { content: ""; position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #0a090d; box-shadow: inset 0 1px 2px rgba(255, 255, 255, .15); }
.cassette::before { left: 10px; } .cassette::after { right: 10px; }
.cassette__label { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 10px 14px; border-radius: 8px; text-align: left; background: repeating-linear-gradient(180deg, #f7f2e4 0 15px, #c9d7f0 15px 16px), #f7f2e4; color: var(--ink); }
.cassette__side { grid-row: span 2; font-family: var(--f-marker); font-size: 2rem; color: var(--red-pen); }
.cassette__title { font-family: var(--f-marker); font-size: clamp(1rem, 3.4vw, 1.35rem); line-height: 1.1; color: #22202a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cassette__meta { font-family: var(--f-hand); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.cassette__window { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 16%; border-radius: 40px; background: #0b0a0e; border: 1px solid rgba(255, 255, 255, .08); }
.reel { position: relative; z-index: 2; width: 22%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#f1eee8 0 10deg, transparent 10deg 60deg, #f1eee8 60deg 70deg, transparent 70deg 120deg, #f1eee8 120deg 130deg, transparent 130deg 180deg, #f1eee8 180deg 190deg, transparent 190deg 240deg, #f1eee8 240deg 250deg, transparent 250deg 300deg, #f1eee8 300deg 310deg, transparent 310deg), radial-gradient(circle, #f1eee8 26%, #3a3542 27%); border: 3px solid #3a3542; animation: spin 2.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tape { position: absolute; left: 22%; right: 22%; top: 50%; height: 34%; translate: 0 -50%; background: linear-gradient(180deg, #4a2a1a, #2b170e); border-radius: 4px; opacity: .85; }
.cassette__brand { font-family: var(--f-tech); font-size: .55rem; letter-spacing: .3em; color: var(--fg-3); text-align: center; }

@media (max-width: 640px) {
  .notebook { transform: none; }
  .nb-page { border-radius: 4px 10px 10px 4px; }
  .dd-coffee, .dd-notes { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .notebook, .notebook.is-sent { transition: none; }
  .dd-ghost, .reel { animation: none; }
}