/* ============================================
   WEEKIVOIRE — BILLETTERIE
   ============================================ */
.tk-page { padding: 96px 0 64px; background: #faf7f2; min-height: 70vh; }
.tk-hero { background: linear-gradient(120deg, #1E1E1E 0%, #3a2410 60%, #D97A0B 130%); color: #fff; border-radius: 22px; padding: 38px 34px; position: relative; overflow: hidden; margin-bottom: 28px; }
.tk-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(247,147,30,.25); }
.tk-hero h1, .tk-hero h1 i, .eticket-top h1 { color: #fff; }
.tk-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 8px; line-height: 1.15; position: relative; z-index: 1; }
.tk-hero p { color: rgba(255,255,255,.82); max-width: 640px; margin: 0; position: relative; z-index: 1; }
.tk-hero .tk-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; position: relative; z-index: 1; }
.tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 2px solid transparent; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, transform .15s; }
.tk-btn:active { transform: translateY(1px); }
.tk-btn.primary { background: #F7931E; color: #fff; }
.tk-btn.primary:hover { background: #D97A0B; color: #fff; }
.tk-btn.light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.tk-btn.light:hover { background: rgba(255,255,255,.22); color: #fff; }
.tk-btn.ghost { background: #fff; color: #1E1E1E; border-color: #e7e0d6; }
.tk-btn.ghost:hover { border-color: #F7931E; color: #D97A0B; }
.tk-btn.block { width: 100%; }
.tk-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Filtres */
.tk-filters { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.05); margin-bottom: 24px; }
.tk-filters input, .tk-filters select { flex: 1 1 160px; min-width: 0; height: 44px; border: 1.5px solid #ece5da; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; }
.tk-filters input[type=search] { flex: 2 1 220px; }
.tk-filters input:focus, .tk-filters select:focus { outline: none; border-color: #F7931E; }
.tk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 22px; }
.tk-chip { padding: 7px 14px; border-radius: 99px; background: #fff; border: 1.5px solid #ece5da; color: #444; font-size: 13px; font-weight: 600; text-decoration: none; }
.tk-chip.on, .tk-chip:hover { border-color: #F7931E; color: #D97A0B; background: #fffaf3; }

/* Cartes événements */
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.tk-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.06); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; color: inherit; text-decoration: none; }
.tk-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.tk-card-img { position: relative; aspect-ratio: 16/10; background: #f1ece4; }
.tk-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-date { position: absolute; left: 12px; top: 12px; background: #fff; border-radius: 12px; padding: 6px 10px; text-align: center; line-height: 1.1; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.tk-date strong { display: block; font-size: 20px; color: #1E1E1E; }
.tk-date span { font-size: 11px; text-transform: uppercase; color: #D97A0B; font-weight: 700; }
.tk-tag { position: absolute; right: 12px; top: 12px; background: rgba(30,30,30,.82); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.tk-tag.hot { background: #dc3545; }
.tk-tag.free { background: #1E9B3A; }
.tk-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tk-card-body h3 { margin: 0; font-size: 17px; line-height: 1.3; color: #1E1E1E; }
.tk-card-meta { color: #6c757d; font-size: 13px; display: grid; gap: 3px; }
.tk-card-meta i { color: #F7931E; width: 16px; }
.tk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed #eee5d8; }
.tk-price { font-size: 18px; font-weight: 700; color: #1E1E1E; }
.tk-price small { font-size: 12px; color: #6c757d; font-weight: 500; }
.tk-gauge { height: 6px; background: #f1ece4; border-radius: 99px; overflow: hidden; }
.tk-gauge span { display: block; height: 100%; background: linear-gradient(90deg, #F7931E, #dc3545); }
.tk-left { font-size: 12px; color: #b45309; font-weight: 600; }

/* Étapes */
.tk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 46px; }
.tk-step { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.tk-step b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFF1DF; color: #D97A0B; margin-bottom: 10px; }
.tk-step h4 { margin: 0 0 4px; font-size: 15px; }
.tk-step p { margin: 0; color: #6c757d; font-size: 14px; }

/* Page événement / achat */
.tk-event { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 26px; align-items: start; }
.tk-cover { border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; background: #f1ece4; margin-bottom: 18px; }
.tk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-box { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 6px 22px rgba(0,0,0,.06); margin-bottom: 18px; }
.tk-box h2 { font-size: 18px; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; }
.tk-box h2 i { color: #F7931E; }
.tk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tk-fact { display: flex; gap: 12px; align-items: flex-start; }
.tk-fact i { width: 38px; height: 38px; border-radius: 10px; background: #FFF1DF; color: #D97A0B; display: grid; place-items: center; flex-shrink: 0; }
.tk-fact small { display: block; color: #6c757d; font-size: 12px; }
.tk-fact strong { font-size: 14px; }
.tk-desc { line-height: 1.75; color: #333; white-space: pre-line; }
.tk-buy { position: sticky; top: 90px; }
.tk-buy .tk-buy-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tk-buy .tk-buy-price strong { font-size: 28px; }
.tk-qty { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid #ece5da; border-radius: 12px; padding: 6px; margin: 14px 0; }
.tk-qty button { width: 42px; height: 42px; border-radius: 10px; border: 0; background: #FFF1DF; color: #D97A0B; font-size: 18px; cursor: pointer; }
.tk-qty button:disabled { opacity: .4; cursor: not-allowed; }
.tk-qty output { font-size: 20px; font-weight: 700; min-width: 70px; text-align: center; }
.tk-total { display: flex; justify-content: space-between; font-size: 15px; padding: 10px 0; border-top: 1px dashed #eee5d8; margin-top: 4px; }
.tk-total strong { font-size: 20px; }
.tk-field { margin-bottom: 12px; }
.tk-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.tk-field input { width: 100%; height: 46px; border: 1.5px solid #ece5da; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; }
.tk-field input:focus { outline: none; border-color: #F7931E; box-shadow: 0 0 0 3px rgba(247,147,30,.15); }
.tk-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-note { font-size: 12.5px; color: #6c757d; display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.tk-note i { color: #1E9B3A; margin-top: 2px; }
.tk-alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
.tk-alert.err { background: #FDECEC; color: #8E1C1C; }
.tk-alert.ok { background: #E6F6EA; color: #166534; }
.tk-alert.info { background: #FFF1DF; color: #8a4b00; }
.tk-alert ul { margin: 4px 0 0 18px; }
.tk-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin-top: 14px; }
.tk-countdown div { background: #faf7f2; border-radius: 10px; padding: 8px 4px; }
.tk-countdown strong { display: block; font-size: 20px; }
.tk-countdown span { font-size: 11px; color: #6c757d; text-transform: uppercase; }
.tk-soldout { text-align: center; padding: 10px 0; }
.tk-soldout i { font-size: 34px; color: #dc3545; }

/* Mes billets */
.tk-event-group { background: #fff; border-radius: 18px; box-shadow: 0 6px 22px rgba(0,0,0,.06); margin-bottom: 20px; overflow: hidden; }
.tk-event-group header { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid #f1ece4; flex-wrap: wrap; }
.tk-event-group header img { width: 84px; height: 60px; border-radius: 10px; object-fit: cover; }
.tk-event-group header h3 { margin: 0; font-size: 17px; }
.tk-event-group header small { color: #6c757d; }
.tk-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px 18px; }
.tk-ticket { border: 1.5px dashed #e7d7c0; border-radius: 14px; padding: 14px; display: grid; gap: 8px; background: #fffdf9; }
.tk-ticket code { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.tk-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.tk-badge.valide { background: #E6F6EA; color: #15803d; }
.tk-badge.utilise { background: #E8F1FD; color: #1d4ed8; }
.tk-badge.en_attente { background: #FFF1DF; color: #B35F00; }
.tk-badge.annule { background: #FDECEC; color: #b91c1c; }

/* Billet électronique */
.eticket { max-width: 440px; margin: 0 auto; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.eticket-top { background: linear-gradient(120deg, #1E1E1E, #3a2410); color: #fff; padding: 20px 22px; position: relative; }
.eticket-top .brand { font-weight: 800; font-size: 18px; }
.eticket-top .brand span { color: #F7931E; }
.eticket-top h1 { font-size: 21px; margin: 12px 0 4px; line-height: 1.25; }
.eticket-top p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; }
.eticket-cut { height: 22px; position: relative; background: #fff; }
.eticket-cut::before, .eticket-cut::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #faf7f2; }
.eticket-cut::before { left: -11px; } .eticket-cut::after { right: -11px; }
.eticket-cut span { position: absolute; left: 18px; right: 18px; top: 0; border-top: 2px dashed #e7d7c0; }
.eticket-body { padding: 4px 22px 22px; text-align: center; }
.eticket-qr { width: 230px; height: 230px; margin: 6px auto 10px; position: relative; }
.eticket-qr svg { width: 100%; height: 100%; display: block; }
.eticket-qr .stamp { position: absolute; inset: 0; display: grid; place-items: center; }
.eticket-qr .stamp span { transform: rotate(-14deg); border: 4px solid currentColor; padding: 6px 14px; border-radius: 10px; font-weight: 800; font-size: 22px; background: rgba(255,255,255,.9); letter-spacing: 1px; }
.eticket-code { font-size: 20px; font-weight: 800; letter-spacing: 1.5px; }
.eticket-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1ece4; }
.eticket-info small { display: block; color: #6c757d; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.eticket-info strong { font-size: 14px; }
.eticket-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px auto 0; max-width: 440px; }

/* Contrôle à l'entrée */
.scan-wrap { max-width: 560px; margin: 0 auto; }
.scan-video { position: relative; border-radius: 18px; overflow: hidden; background: #111; aspect-ratio: 1; }
.scan-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-video .frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.scan-video .off { position: absolute; inset: 0; display: grid; place-items: center; color: #ddd; text-align: center; padding: 20px; }
.scan-result { border-radius: 16px; padding: 18px; margin: 16px 0; text-align: center; color: #fff; font-weight: 600; display: none; }
.scan-result.show { display: block; }
.scan-result.ok { background: #16a34a; } .scan-result.warn { background: #d97706; } .scan-result.ko { background: #dc2626; }
.scan-result i { font-size: 38px; display: block; margin-bottom: 6px; }
.scan-result small { display: block; font-weight: 500; opacity: .9; margin-top: 4px; }
.scan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.scan-stats div { background: #fff; border-radius: 12px; padding: 10px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.scan-stats strong { display: block; font-size: 22px; }
.scan-stats span { font-size: 12px; color: #6c757d; }
.scan-manual { display: flex; gap: 8px; }
.scan-manual input { flex: 1; min-width: 0; height: 46px; border: 1.5px solid #ece5da; border-radius: 10px; padding: 0 12px; font: inherit; text-transform: uppercase; }
.scan-history { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 13px; }
.scan-history li { background: #fff; border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; gap: 10px; }

@media (max-width: 900px) {
    .tk-event { grid-template-columns: 1fr; }
    .tk-buy { position: static; }
}
@media (max-width: 560px) {
    .tk-page { padding-top: 84px; }
    .tk-hero { padding: 26px 20px; border-radius: 18px; }
    .tk-2 { grid-template-columns: 1fr; }
    .tk-box { padding: 18px; }
}
@media print {
    header.header, footer, .eticket-actions, .skip-link, .flash-toast { display: none !important; }
    .tk-page { padding: 0; background: #fff; }
    .eticket { box-shadow: none; border: 1px solid #ddd; }
}