/* v10.26 : l'écran de paiement (ui/checkout.js) — le même dans le jeu et sur le site (/buy/, importé par site/src/pages).
   Style moderne et rassurant (Romain, 2026-10-21) : sombre, or « soleil », Inter + Unbounded. Tout est sous `.ck`. */
@font-face { font-family: 'CK Inter'; font-weight: 100 900; font-display: swap; src: url('../../../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'CK Inter'; font-weight: 100 900; font-display: swap; src: url('../../../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'CK Unbounded'; font-weight: 200 900; font-display: swap; src: url('../../../fonts/Unbounded-latin.woff2') format('woff2'); }

.ck {
  --ck-bg: #0d111c; --ck-bg2: #121829; --ck-line: rgba(255, 255, 255, 0.09); --ck-line2: rgba(255, 255, 255, 0.16);
  --ck-text: #f1f2f6; --ck-muted: #9ba3b6; --ck-sun: #ffe58f; --ck-amber: #ffc247; --ck-gold: #f5a524; --ck-teal: #35d6c4;
  --ck-grad: linear-gradient(100deg, var(--ck-sun) 0%, var(--ck-amber) 50%, var(--ck-gold) 100%);
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; width: min(960px, 100%); text-align: left;
  font: 400 15px/1.55 'CK Inter', 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  color: var(--ck-text); background: var(--ck-bg); border: 1px solid var(--ck-line2); border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 194, 71, 0.06); cursor: default;
  -webkit-font-smoothing: antialiased; letter-spacing: normal; text-transform: none;
}
.ck *, .ck *::before, .ck *::after { box-sizing: border-box; font-family: inherit; }
.ck p { margin: 0; }
.ck-left { position: relative; display: flex; flex-direction: column; padding: 0; background:
  radial-gradient(600px 380px at -10% -20%, rgba(245, 165, 36, 0.22), transparent 70%),
  radial-gradient(500px 360px at 110% 120%, rgba(47, 183, 168, 0.16), transparent 70%), var(--ck-bg); }
.ck-right { padding: 36px 34px 28px; background: var(--ck-bg2); border-left: 1px solid var(--ck-line); display: flex; flex-direction: column; }

.ck-media { position: relative; flex: 1 1 auto; min-height: 280px;   /* la vidéo prend toute la hauteur libre de la colonne */
  overflow: hidden; background: #000 url('/img/poster-reel.webp') center / cover; }
.ck-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ck-vid.off { display: none; }
.ck-media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.55) 0%, rgba(8, 10, 16, 0) 30%, rgba(8, 10, 16, 0) 62%, var(--ck-bg) 100%); }
.ck-brand { position: absolute; z-index: 1; top: 18px; left: 20px; display: flex; align-items: center; gap: 12px; }
.ck-copy { position: relative; padding: 4px 32px 30px; margin-top: -28px; }
.ck-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ck-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 650;
  color: #e6e9f1; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ck-line2); }
.ck-chip::before { content: ''; width: 15px; height: 15px; flex: none; background: var(--ck-amber);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ck-c-isl { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17l-6.1 3.4 1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E"); }
.ck-c-multi { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M1 21c0-4 3-7 7-7s7 3 7 7zM15 21c0-2-.6-4-1.8-5.4A6 6 0 0 1 23 20v1z'/%3E%3C/svg%3E"); }
.ck-c-langs { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c3 3 3 16 0 19M12 2.5c-3 3-3 16 0 19'/%3E%3C/svg%3E"); }
.ck-logo { display: inline-flex; align-items: baseline; gap: 6px; }
.ck-logo b { font: 700 20px/1 'CK Unbounded', 'Unbounded Variable', sans-serif; letter-spacing: -0.03em; }
.ck-logo i { font: 700 15px/1 'CK Unbounded', 'Unbounded Variable', sans-serif; font-style: normal; letter-spacing: 0.08em;
  background: var(--ck-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-badge { white-space: nowrap; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--ck-sun);
  background: rgba(255, 194, 71, 0.1); border: 1px solid rgba(255, 194, 71, 0.28); }
.ck-h { margin: 0; font: 700 clamp(24px, 3vw, 32px)/1.12 'CK Unbounded', 'Unbounded Variable', sans-serif; letter-spacing: -0.03em; }
.ck-sub { margin-top: 10px !important; color: #c5cbd9; font-size: 15px; max-width: 440px; }
.ck-k { margin: 26px 0 12px !important; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ck-muted); }
.ck-right > .ck-k:first-child { margin-top: 0 !important; }

.ck-line { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ck-line); font-size: 14.5px; color: #dfe3ec; }
.ck-line b { font-weight: 650; white-space: nowrap; }
.ck-tot { border-bottom: 0; padding-bottom: 2px; font-size: 16px; color: var(--ck-text); }
.ck-tot b { font: 700 26px/1 'CK Unbounded', 'Unbounded Variable', sans-serif; letter-spacing: -0.03em;
  background: var(--ck-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-once { color: var(--ck-muted); font-size: 12.5px; margin-bottom: 8px !important; }

.ck-step { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ck-line); }
.ck-step.dim { opacity: 0.55; }
.ck-step-h { font-weight: 700; font-size: 15px; }
.ck-step-s { color: var(--ck-muted); font-size: 13px; margin: 3px 0 12px !important; }
.ck-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ck-line); }
.ck-tabs button { padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--ck-muted); font-size: 13.5px; font-weight: 650; cursor: pointer; }
.ck-tabs button.on { background: rgba(255, 255, 255, 0.1); color: var(--ck-text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.ck-form { display: grid; gap: 10px; margin-top: 12px; }
.ck-f { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: #c5cbd9; }
.ck-f input { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--ck-line2); background: #0a0e18; color: var(--ck-text);
  font-size: 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.ck-f input:focus { border-color: rgba(255, 194, 71, 0.7); box-shadow: 0 0 0 3px rgba(255, 194, 71, 0.18); }
.ck-err { min-height: 0; color: #ff9b8a; font-size: 13px; }
.ck-err:empty { display: none; }
.ck-who { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(53, 214, 196, 0.08); border: 1px solid rgba(53, 214, 196, 0.3); }
.ck-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ck-grad); color: #2a1606; font-weight: 800; font-size: 14px; flex: none; }
.ck-who-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-link { border: 0; background: none; color: var(--ck-muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; }

.ck-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; padding: 15px 20px; border: 0; border-radius: 14px;
  font-size: 16px; font-weight: 750; color: #2a1606; background: var(--ck-grad); cursor: pointer;
  box-shadow: 0 10px 30px rgba(245, 165, 36, 0.28), 0 1px 0 rgba(255, 255, 255, 0.5) inset; transition: transform 0.12s, filter 0.12s; }
.ck-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ck-btn:active { transform: translateY(0); }
.ck-btn:disabled { opacity: 0.6; cursor: wait; }
.ck-btn-2 { padding: 12px 16px; font-size: 15px; color: var(--ck-text); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px var(--ck-line2) inset; }
.ck-pay { margin-top: 12px; }
.ck-pay::before { content: ''; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ck-note { font-size: 13px; color: var(--ck-muted); margin-top: 10px !important; }
.ck-note:empty { display: none; }
.ck-note.on { padding: 11px 13px; border-radius: 12px; color: var(--ck-sun); background: rgba(255, 194, 71, 0.08); border: 1px dashed rgba(255, 194, 71, 0.4); }
.ck-note.warn { color: #ffcf8a; }
.ck-owned { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(53, 214, 196, 0.08); border: 1px solid rgba(53, 214, 196, 0.3); }
.ck-later { margin: 16px auto 0; border: 0; background: none; color: var(--ck-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 6px 10px; }
.ck-later:hover { color: var(--ck-text); }
.ck-x { position: absolute; z-index: 2; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ck-line2);
  background: rgba(255, 255, 255, 0.06); color: var(--ck-text); font-size: 20px; line-height: 1; cursor: pointer; }
.ck-x:hover { background: rgba(255, 255, 255, 0.12); }

/* dans le jeu : par-dessus tout, fond flouté */
.ck-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; padding: 24px; overflow: auto;
  background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: default;
  animation: ck-in 0.25s ease-out; pointer-events: auto; }
.ck-overlay .ck { margin: auto; flex: none; animation: ck-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1); }   /* margin auto : centré, et défilable s'il dépasse */
@keyframes ck-in { from { opacity: 0; } }
@keyframes ck-pop { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

/* écrans bas (jeu en 720-800 px) : plus serré */
@media (max-height: 860px) {
  .ck-copy { padding: 0 28px 22px; } .ck-right { padding: 26px 28px 20px; }
  .ck-k { margin: 18px 0 10px !important; } .ck-chips { margin-top: 14px; }
  .ck-line { padding: 9px 0; } .ck-step { margin-top: 12px; padding-top: 12px; } .ck-step-s { margin-bottom: 9px !important; }
  .ck-form { gap: 7px; margin-top: 9px; } .ck-f input { padding: 9px 12px; } .ck-btn { padding: 13px 18px; } .ck-later { margin-top: 8px; }
}
@media (max-width: 760px) {
  .ck { grid-template-columns: 1fr; border-radius: 20px; }
  .ck-copy { padding: 0 22px 24px; } .ck-right { padding: 26px 22px; }
  .ck-media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .ck-right { border-left: 0; border-top: 1px solid var(--ck-line); }
  .ck-overlay { padding: 12px; }
}