/* ============================================================================
   Landing MultiTicket+ dédiée (ticket.zic.fi) — portage CSS du template React
   « ZIC MultiTicket v2 » (18 sept 2026). Préfixe `tkl-` (DOM + classes),
   tokens `--tk-*` / `--tkl-*` sur html.zh-ticket-page. Chargé APRÈS
   landing-home.css (nav / footer fixe / launcher « + » / tokens --zh-*) et
   auth-modal.css, AVANT les CSS de modules.

   Mapping template → tokens : V.purple → --zh-purple, V.purpleB → --zh-purple-b,
   V.green → --zh-green, V.dark → --zh-dark, V.text → --zh-text, V.muted →
   --zh-muted, V.bg1/2/3 → --zh-bg1/2/3, V.hero → --zh-hero, V.line → --tk-line,
   V.ticket → --tk-ticket (jamais color-mix : les alphas du template — `AA`,
   `55` — sont rendus par des voiles rgba() ou des pseudo-éléments).

   Vert et contraste (WCAG AA) : `--zh-green` #16a34a ne fait que 3,3:1 sur
   blanc → il ne sert ICI qu'aux bordures, voiles rgba et à la pastille « ✓ »
   (non-texte, 3:1 suffit). Tout TEXTE vert sur fond clair et tout fond vert
   sous texte blanc (CTA verts, pilule de la barre, « Copié ») utilisent
   `--tk-green-d` #15803d (5,0:1 sur blanc, ≥ 4,5:1 sur les fonds vert pâle),
   hover `--tk-green-h` #166534 (7,1:1). Le jeton partagé --zh-green
   (landing-home.css) n'est jamais redéfini.

   Barre de suivi et « + » du footer : le launcher `.zh-fl-fab` (92 px desktop /
   80 px ≤768, margin-top -56 px) est centré et déborde de 44-46 px AU-DESSUS du
   footer, donc dans la bande de la barre fixe (z 90 > 80). `.tkl-bar-in` est
   une grille 3 colonnes dont la piste centrale (104 / 92 px) est une gouttière
   vide réservée au « + » : texte à gauche, CTA à droite, rien au centre.

   Empilement (racine) : filtres sticky 50 < suggestions 60 < barre de suivi
   80 < footer fixe 90 (landing-home.css) < nav / FAB chat 100 < menus 120-140
   < modales ticket 1500 (= overlays modules) < toast 5000. Le hero n'a AUCUN
   overflow:hidden (le halo vit dans .tkl-hero-bg) et .tkl-hero-in n'a pas de
   z-index : .tkl-search (z 60) reste dans le contexte racine et passe devant
   la barre sticky.

   Chrome re-scopé (3 règles de landing-home.css, scopées body.zh-home-page,
   que la page ticket n'a PAS) : réserve basse `.zh-page` = footer + barre de
   suivi (`--tkl-ft-h` + `--tkl-bar-h`, mesurés par landing-ticket.js
   `syncFixedOffsets()`), FAB chat au-dessus des deux, FAB masqué dock ouvert
   (`body.zh-fl-open`). Le `svg{height:auto}` de mobile.css écrase les
   attributs : chaque svg est dimensionné par classe.
   ============================================================================ */

html.zh-ticket-page {
  --tk-ticket: #e11d48;
  --tk-line: #dcd2f5;
  --tk-bar: #241452;
  --tk-stripe: #635bff;
  --tk-green-bg: #f0fdf4;
  /* Vert TEXTE / fond de CTA (5,0:1 sur blanc) et son hover (7,1:1) — cf.
     en-tête « Vert et contraste ». */
  --tk-green-d: #15803d;
  --tk-green-h: #166534;
  --tk-shade: #fafafc;
  --tkl-nav-h: 62px;
  --tkl-ft-h: 67px;
  --tkl-bar-h: 0px;
  /* Décalage de scroll des ancres #grille / #comment / #modules : nav + barre
     de filtres sticky. Desktop : 14 + 44 (select) + 14 + 1 px de bordure =
     73 px → 74 px. */
  --tkl-anchor: calc(var(--tkl-nav-h) + 74px);
  color-scheme: light;
  scroll-behavior: smooth;
}
@media (max-width: 768px) {
  html.zh-ticket-page {
    --tkl-nav-h: 60px;
    --tkl-ft-h: calc(43px + env(safe-area-inset-bottom, 0px));
    /* Barre de filtres compacte sur UNE ligne (10 + 44 + 10 + 1 = 65 px, cf.
       bloc ≤768 : .tkl-select-wrap / .tkl-count ne débordent plus à 360-375). */
    --tkl-anchor: calc(var(--tkl-nav-h) + 66px);
  }
}

body.zh-ticket-page {
  font-family: "DM Sans", sans-serif;
  color: var(--zh-text);
  background: var(--zh-bg1);
  overflow-x: hidden;
}
/* Verrou de scroll par CLASSE (l'auto-open de la modale auth lit l'overflowY
   CALCULÉ du body : un verrou inline serait invisible pour lui). */
body.tkl-lock {
  overflow: hidden;
}
.tkl-root input,
.tkl-root select,
.tkl-root button,
.tkl-modal input,
.tkl-modal select,
.tkl-modal button {
  font-family: "DM Sans", sans-serif;
}

/* Garde `hidden` : plusieurs éléments ticket ont un display de classe
   (flex/grid/inline-flex) qui l'emporterait sur le display:none UA. Scopée à
   la page ticket, aux modales, à la barre et au toast — jamais globale (les
   overlays de modules gèrent leur propre `hidden`). */
.tkl-root [hidden],
.tkl-modal[hidden],
.tkl-modal [hidden],
.tkl-bar[hidden],
.tkl-bar [hidden],
.tkl-toast[hidden],
.tkl-toast [hidden] {
  display: none !important;
}

.tkl-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Chrome re-scopé ─────────────────────────────────────────────────────── */
/* Réserve basse = footer fixe + barre de suivi ; fond sombre limité à la
   réserve (pas de bande claire entre la dernière section et le footer). */
body.zh-ticket-page .zh-page {
  padding-bottom: calc(var(--tkl-ft-h) + var(--tkl-bar-h));
  background: linear-gradient(#0f0722, #0f0722) no-repeat bottom / 100%
    calc(var(--tkl-ft-h) + var(--tkl-bar-h));
}
/* FAB chat au-dessus du footer ET de la barre de suivi (desktop 67 + 0 + 11 =
   78 px, comme la home ; ≤768 --tkl-ft-h porte déjà la safe-area). Spécificité
   (0,1,2) > `.zic-chat-fab-wrap` (0,1,0) de landing-chat-fab.css, chargé après. */
body.zh-ticket-page .zic-chat-fab-wrap {
  bottom: calc(var(--tkl-ft-h) + var(--tkl-bar-h) + 11px);
}
/* FAB masqué pendant que le dock « + » est ouvert (z 100 > footer 90) ; les
   boutons du wrap remettent pointer-events:auto → règle descendante. */
body.zh-ticket-page.zh-fl-open .zic-chat-fab-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
body.zh-ticket-page.zh-fl-open .zic-chat-fab-wrap * {
  pointer-events: none;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes tkl-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tkl-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tkl-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
@keyframes tkl-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ── Primitives partagées ────────────────────────────────────────────────── */
.tkl-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.tkl-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -1px;
  color: var(--zh-text);
  margin: 0;
}
.tkl-h2--center {
  text-align: center;
}
.tkl-sub {
  font-size: 15px;
  color: var(--zh-muted);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 560px;
}
.tkl-sub--center {
  text-align: center;
  margin: 12px auto 0;
}
.tkl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--zh-purple);
}
.tkl-kicker--green {
  color: var(--tk-green-d);
  letter-spacing: 0.5px;
  font-size: 11px;
}
.tkl-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--zh-muted);
  margin-bottom: 8px;
}
.tkl-lbl--green {
  color: var(--tk-green-d);
}
.tkl-lbl--inline {
  margin-bottom: 6px;
}
.tkl-help {
  font-size: 12px;
  color: var(--zh-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.tkl-help b {
  color: var(--zh-text);
}
.tkl-err {
  font-size: 12px;
  color: var(--tk-ticket);
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.45;
}

/* Boutons : ≥ 44 px, pleine largeur dans les cartes / modales. */
.tkl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 13px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.tkl-btn:disabled,
.tkl-btn[aria-busy="true"] {
  opacity: 0.72;
  cursor: wait;
}
.tkl-btn--buy {
  background: var(--zh-purple);
  border-color: var(--zh-purple);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
}
.tkl-btn--buy:hover {
  background: var(--zh-purple-b);
  border-color: var(--zh-purple-b);
}
.tkl-btn--add {
  background: #fff;
  border-color: var(--zh-purple);
  color: var(--zh-purple);
}
.tkl-btn--add:hover {
  background: var(--zh-bg3);
}
.tkl-btn-l1 {
  display: block;
}
.tkl-btn-l2 {
  display: block;
  font-size: 11.5px;
  color: var(--tk-green-d);
  font-weight: 700;
  margin-top: 2px;
}
/* Hover du bouton blanc (fond --zh-bg3 #f0ebff) : #15803d n'y fait que 4,3:1. */
.tkl-btn--add:hover .tkl-btn-l2 {
  color: var(--tk-green-h);
}
/* État « ✓ Dans ma boutique » : vert clair, texte vert foncé. */
.tkl-card.is-added .tkl-btn--add,
.tkl-btn--add[aria-pressed="true"] {
  background: var(--tk-green-bg);
  border-color: var(--zh-green);
  color: var(--tk-green-d);
}
.tkl-btn--green {
  background: var(--tk-green-d);
  border-color: var(--tk-green-d);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
}
.tkl-btn--green:hover {
  background: var(--tk-green-h);
  border-color: var(--tk-green-h);
}
.tkl-btn--green:disabled,
.tkl-btn--green[aria-disabled="true"] {
  background: #cbd5d1;
  border-color: #cbd5d1;
  cursor: not-allowed;
  opacity: 1;
}
.tkl-btn--ghost {
  background: #fff;
  border-color: var(--tk-line);
  color: var(--zh-text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
}
.tkl-btn--ghost:hover {
  background: var(--tk-shade);
}
.tkl-btn--block {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border-radius: 12px;
}
.tkl-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 100px;
  border: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.tkl-pill--purple {
  background: var(--zh-purple);
  color: #fff;
}
.tkl-pill--purple:hover {
  background: var(--zh-purple-b);
}

/* Select natif habillé (catégorie, opérateur). */
.tkl-select-wrap {
  position: relative;
  flex: 0 1 200px;
  min-width: 160px;
}
.tkl-select-wrap--full {
  flex: none;
  width: 100%;
  min-width: 0;
}
.tkl-select {
  width: 100%;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 32px 10px 14px;
  border-radius: 11px;
  border: 1.5px solid var(--tk-line);
  background: #fff;
  color: var(--zh-text);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
}
.tkl-select.is-active {
  border-color: var(--zh-purple);
  background: #f5f1fe;
  color: var(--zh-purple);
  font-weight: 700;
}
.tkl-select option {
  color: var(--zh-text);
  font-weight: 500;
}
.tkl-select-chev {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 9px;
  height: 6px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--zh-muted);
}
.tkl-select.is-active + .tkl-select-chev {
  color: var(--zh-purple);
}
.tkl-select:focus-visible,
.tkl-input:focus-visible {
  outline: 2px solid var(--zh-purple-b);
  outline-offset: 1px;
  border-color: var(--zh-purple);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.tkl-hero {
  position: relative;
  background: var(--zh-hero);
  padding: calc(var(--tkl-nav-h) + 54px) 36px 40px;
  color: #fff;
}
.tkl-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tkl-hero-halo {
  position: absolute;
  top: -130px;
  right: -110px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 245, 0.34), transparent 70%);
}
.tkl-hero-in {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.tkl-hero-badge {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.tkl-hero-h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 50px);
  letter-spacing: -1.8px;
  line-height: 1.08;
  color: #fff;
  margin: 18px 0 0;
}
.tkl-hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.6;
  max-width: 580px;
  margin: 14px auto 0;
}

/* Recherche : pilule 540 px + suggestions (z 60, contexte racine). */
.tkl-search {
  position: relative;
  max-width: 540px;
  margin: 26px auto 0;
  z-index: 60;
  text-align: left;
}
.tkl-search-ic {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--zh-muted);
  pointer-events: none;
}
.tkl-search-in {
  width: 100%;
  min-height: 54px;
  padding: 17px 52px 17px 48px;
  border-radius: 100px;
  border: none;
  background: #fff;
  color: var(--zh-text);
  font-size: 15.5px;
  box-shadow: 0 10px 30px -14px rgba(15, 7, 34, 0.45);
}
.tkl-search-in:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.tkl-search-in::placeholder {
  color: var(--zh-muted);
  opacity: 1;
}
.tkl-search-spin {
  position: absolute;
  right: 19px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--tk-line);
  border-top-color: var(--zh-purple);
  transform: translateY(-50%);
  animation: tkl-spin 0.7s linear infinite;
}
/* Croix : cible 44 px, disque 26 px dessiné par le dégradé radial. */
.tkl-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: none;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--zh-bg3) 13px, transparent 13.5px);
  color: var(--zh-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tkl-search-clear:hover {
  color: var(--zh-text);
}
.tkl-sug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 50px -18px rgba(15, 7, 34, 0.4);
  overflow: hidden;
  color: var(--zh-text);
}
.tkl-sug-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 11px 15px;
  border: none;
  border-bottom: 1px solid var(--zh-bg3);
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.tkl-sug-item:last-child {
  border-bottom: none;
}
.tkl-sug-item:hover,
.tkl-sug-item.is-active,
.tkl-sug-item[aria-selected="true"] {
  background: var(--zh-bg3);
}
.tkl-sug-thumb {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--zh-purple-b), var(--zh-purple));
  overflow: hidden;
}
.tkl-sug-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.tkl-sug-txt {
  flex: 1;
  min-width: 0;
}
.tkl-sug-name {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkl-sug-when {
  display: block;
  font-size: 11.5px;
  color: var(--zh-muted);
  margin-top: 2px;
}
.tkl-sug-price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
/* « Rien pour « q » » : clone du gabarit marqué is-empty par le JS. */
.tkl-sug-item.is-empty,
.tkl-sug-item.is-empty:hover {
  cursor: default;
  background: #fff;
  color: var(--zh-muted);
}
.tkl-sug-item.is-empty .tkl-sug-thumb,
.tkl-sug-item.is-empty .tkl-sug-price,
.tkl-sug-item.is-empty .tkl-sug-when {
  display: none;
}
.tkl-sug-item.is-empty .tkl-sug-name {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  white-space: normal;
}
.tkl-sug-empty {
  padding: 18px;
  font-size: 13.5px;
  color: var(--zh-muted);
}

/* ── Filtres sticky ──────────────────────────────────────────────────────── */
.tkl-filters {
  position: sticky;
  top: var(--tkl-nav-h);
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--tk-line);
  padding: 14px 36px;
}
.tkl-filters-in {
  max-width: 1200px;
  margin: 0 auto;
}
.tkl-filters-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tkl-filters-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1.5px solid var(--tk-line);
  background: #fff;
  color: var(--zh-text);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.tkl-filters-toggle svg {
  width: 15px;
  height: 15px;
}
.tkl-filters-toggle[aria-expanded="true"],
.tkl-filters-toggle.is-active {
  border-color: var(--zh-purple);
  color: var(--zh-purple);
  background: #f5f1fe;
}
.tkl-filters-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--zh-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Desktop : le conteneur « plus de filtres » est aplati dans la rangée — y
   compris si le JS l'a marqué `hidden` en le repliant à une largeur mobile
   avant un redimensionnement (spécificité > garde `.tkl-root [hidden]`). */
.tkl-filters-more {
  display: contents;
}
@media (min-width: 769px) {
  .tkl-root .tkl-filters-more[hidden] {
    display: contents !important;
  }
}
.tkl-range {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  min-height: 44px;
  border-radius: 11px;
  border: 1.5px solid var(--tk-line);
  background: #fff;
  flex: 1 1 280px;
  min-width: 240px;
}
.tkl-range.is-active {
  border-color: var(--zh-purple);
  background: #f5f1fe;
}
.tkl-range-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--zh-muted);
  white-space: nowrap;
}
.tkl-range.is-active .tkl-range-label {
  color: var(--zh-purple);
}
.tkl-range-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 20px;
  display: flex;
  align-items: center;
}
.tkl-range-rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 3px;
  background: var(--tk-line);
}
.tkl-range-fill {
  position: absolute;
  height: 4px;
  border-radius: 3px;
  background: var(--zh-purple);
}
/* Double range : les pistes ne captent rien, seuls les pouces sont cliquables ;
   min z 3 < max z 4, `is-min-top` remonte le min quand les deux pouces sont
   collés au plafond. */
.tkl-rng {
  position: absolute;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.tkl-rng--min {
  z-index: 3;
}
.tkl-rng--max {
  z-index: 4;
}
/* Classe posée par le JS sur le conteneur [data-tkl-range] (ou sur l'input). */
.tkl-rng--min.is-min-top,
.tkl-range.is-min-top .tkl-rng--min {
  z-index: 5;
}
.tkl-rng::-webkit-slider-runnable-track {
  background: transparent;
}
.tkl-rng::-moz-range-track {
  background: transparent;
}
.tkl-rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--zh-purple);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 7, 34, 0.25);
}
.tkl-rng::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--zh-purple);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 7, 34, 0.25);
}
.tkl-rng:focus-visible {
  outline: none;
}
.tkl-rng:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--zh-purple-b);
  outline-offset: 2px;
}
.tkl-rng:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--zh-purple-b);
  outline-offset: 2px;
}
.tkl-clear {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--zh-purple);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.tkl-clear:hover {
  background: var(--zh-bg3);
}
.tkl-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--zh-muted);
  white-space: nowrap;
}
.tkl-count b {
  color: var(--zh-text);
}

/* ── Grille ──────────────────────────────────────────────────────────────── */
.tkl-grid-sec {
  background: var(--zh-bg1);
  padding: 26px 36px 76px;
  min-height: 46vh;
  scroll-margin-top: var(--tkl-anchor);
}
.tkl-caption {
  font-size: 13px;
  color: var(--zh-muted);
  margin: 0 0 18px;
}
.tkl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: 18px;
}
.tkl-grid[aria-busy="true"],
.tkl-grid.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
/* Achat direct coupé (503 direct_unavailable) : le JS pose la classe sur
   #tkl-root ET `hidden` sur chaque bouton ; ceinture-bretelles. */
.tkl-root.tkl-no-direct [data-tkl-buy] {
  display: none !important;
}

/* Carte (16/10 média + dégradé de repli + chips + ligne « ville · date »). */
.tkl-card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--tk-line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tkl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(31, 19, 64, 0.42);
}
.tkl-card.is-added {
  border-color: var(--zh-green);
}
.tkl-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(140deg, var(--zh-purple-b), var(--zh-purple));
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font: inherit;
  text-align: left;
}
@supports not (aspect-ratio: 1) {
  .tkl-card-media {
    height: 0;
    padding-bottom: 62.5%;
  }
}
.tkl-card-media:focus-visible {
  outline: 3px solid var(--zh-purple-b);
  outline-offset: -3px;
}
.tkl-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.tkl-card-wm {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
}
.tkl-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 4, 20, 0.04), rgba(10, 4, 20, 0.52));
}
.tkl-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--zh-text);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
}
.tkl-card-cat {
  position: absolute;
  top: 11px;
  left: 11px;
  max-width: calc(100% - 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkl-card-when {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 11px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkl-card-body {
  padding: 15px 17px 17px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}
.tkl-card-head {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.tkl-card-head:focus-visible {
  outline: 2px solid var(--zh-purple-b);
  outline-offset: 4px;
  border-radius: 6px;
}
.tkl-card-name {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--zh-text);
  letter-spacing: -0.3px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tkl-card-via {
  display: block;
  font-size: 11.5px;
  color: var(--zh-muted);
  margin-top: 4px;
}
.tkl-card-more {
  display: block;
  font-size: 11.5px;
  color: var(--zh-purple);
  font-weight: 700;
  margin-top: 6px;
}
.tkl-card-price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.tkl-price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--zh-text);
}
.tkl-price-unit {
  font-size: 12px;
  color: var(--zh-muted);
}
.tkl-card-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Squelettes (shimmer) — même grille, même gabarit de carte. */
.tkl-skel-card {
  background: #fff;
  border: 1px solid var(--tk-line);
  border-radius: 18px;
  overflow: hidden;
  padding: 0 17px 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tkl-skel-card > span {
  position: relative;
  display: block;
  overflow: hidden;
  background: #ece6fb;
  border-radius: 6px;
}
.tkl-skel-card > span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: tkl-shimmer 1.4s ease-in-out infinite;
}
.tkl-skel-media {
  aspect-ratio: 16 / 10;
  margin: 0 -17px 6px;
  border-radius: 0 !important;
}
.tkl-skel-l {
  height: 12px;
  width: 70%;
}
.tkl-skel-l--t {
  height: 16px;
  width: 85%;
}
.tkl-skel-l--s {
  width: 40%;
}
.tkl-skel-btn {
  height: 44px;
  border-radius: 11px !important;
  margin-top: 4px;
}

/* États vide / erreur / charger plus. */
.tkl-empty,
.tkl-error {
  padding: 66px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--tk-line);
  border-radius: 18px;
}
.tkl-empty-t {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--zh-text);
}
.tkl-empty-s {
  font-size: 13.5px;
  color: var(--zh-muted);
  margin-top: 7px;
}
.tkl-empty .tkl-pill {
  margin-top: 18px;
}
.tkl-error {
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-color: rgba(225, 29, 72, 0.35);
}
.tkl-error-t {
  font-size: 14px;
  color: var(--zh-text);
  font-weight: 600;
}
.tkl-more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.tkl-more {
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 100px;
  border: 1.5px solid var(--zh-purple);
  background: #fff;
  color: var(--zh-purple);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.tkl-more:hover {
  background: var(--zh-bg3);
}
.tkl-more:disabled {
  opacity: 0.6;
  cursor: wait;
}
.tkl-loading {
  font-size: 13px;
  color: var(--zh-muted);
}
.tkl-noscript {
  text-align: center;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--zh-muted);
}

/* ── Comment ça marche ───────────────────────────────────────────────────── */
.tkl-how {
  background: var(--zh-bg3);
  border-top: 1px solid var(--tk-line);
  padding: 66px 36px 108px;
  scroll-margin-top: var(--tkl-anchor);
}
.tkl-how-in {
  max-width: 1000px;
  margin: 0 auto;
}
.tkl-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.tkl-how-col {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--tk-line);
  border-radius: 18px;
  padding: 24px 26px;
}
.tkl-how-tag {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13.5px;
}
.tkl-how-col--buy .tkl-how-tag,
.tkl-how-col--buy .tkl-step-n {
  background: #ede9fe;
  color: var(--zh-purple);
}
.tkl-how-col--add .tkl-how-tag,
.tkl-how-col--add .tkl-step-n {
  background: #dcfce7;
  color: var(--tk-green-d);
}
.tkl-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Carte survolable (= .how-card du template 18 sept) : padding compensé par
   des marges négatives, bordure transparente au repos. */
.tkl-step {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  margin: -12px -14px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: transform 0.18s, box-shadow 0.22s, border-color 0.18s, background 0.18s;
}
@media (hover: hover) {
  .tkl-step:hover {
    transform: translateY(-3px);
    background: #fff;
    box-shadow: 0 18px 40px -22px rgba(31, 19, 64, 0.35);
    border-color: #c4b5fd;
  }
}
.tkl-step-n {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 12px;
}
.tkl-step-t {
  font-size: 13.5px;
  color: var(--zh-text);
  line-height: 1.55;
}

/* ── Autres modules (rail scroll-snap) ───────────────────────────────────── */
.tkl-mods {
  background: #fff;
  border-top: 1px solid var(--tk-line);
  padding: 66px 0 108px;
  scroll-margin-top: var(--tkl-anchor);
}
.tkl-mods-head {
  max-width: 1200px;
  margin: 0 auto 26px;
  padding: 0 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tkl-mods-copy {
  min-width: 0;
}
.tkl-mods-copy .tkl-h2 {
  margin-top: 10px;
}
.tkl-mods-copy .tkl-sub {
  font-size: 14.5px;
  margin-top: 8px;
}
.tkl-mods-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tkl-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--tk-line);
  background: #fff;
  color: var(--zh-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tkl-arrow svg {
  width: 16px;
  height: 16px;
}
.tkl-arrow:hover {
  border-color: var(--zh-purple);
  color: var(--zh-purple);
}
.tkl-mods-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 36px 8px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 36px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.tkl-mods-rail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.tkl-mod {
  flex: 0 0 258px;
  scroll-snap-align: start;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--tk-line);
  border-radius: 18px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  color: var(--zh-text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tkl-mod:hover,
.tkl-mod:focus-visible {
  border-color: var(--tk-mod);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px var(--tk-mod);
  color: var(--zh-text);
}
/* Icône : dégradé couleur → couleur éclaircie (voile blanc, pas d'alpha hex). */
.tkl-mod-ic {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--tk-mod);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -12px var(--tk-mod);
  overflow: hidden;
}
.tkl-mod-ic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.3));
}
.tkl-mod-ic svg {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
}
.tkl-mod-name {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.4px;
  margin-top: 15px;
}
.tkl-mod-desc {
  display: block;
  font-size: 13px;
  color: var(--zh-muted);
  line-height: 1.5;
  margin-top: 6px;
  flex: 1;
}
.tkl-mod-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--tk-mod);
  margin-top: 16px;
}
.tkl-mod-cta svg {
  width: 13px;
  height: 13px;
}

/* ── Modales (détail, ajout) ─────────────────────────────────────────────── */
.tkl-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tkl-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: tkl-fade 0.2s ease both;
}
.tkl-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: tkl-rise 0.22s ease both;
  outline: none;
  color: var(--zh-text);
}
.tkl-modal-x {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--tk-line);
  background: #fff;
  color: var(--zh-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tkl-modal-x:hover {
  color: var(--zh-text);
  border-color: var(--zh-muted);
}
.tkl-modal-x--media {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--zh-text);
}
.tkl-modal-x--corner {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* Détail. */
.tkl-detail-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--zh-purple-b), var(--zh-purple));
  overflow: hidden;
}
@supports not (aspect-ratio: 1) {
  .tkl-detail-media {
    height: 0;
    padding-bottom: 56.25%;
  }
}
.tkl-detail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.tkl-detail-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 4, 20, 0.08), rgba(10, 4, 20, 0.6));
}
.tkl-detail-head {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
}
.tkl-detail-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: #fff;
  letter-spacing: -0.7px;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}
.tkl-detail-when {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 5px 0 0;
}
.tkl-detail-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tkl-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tk-line);
  border-radius: 13px;
  overflow: hidden;
  margin: 0;
}
.tkl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fff;
}
.tkl-row + .tkl-row {
  border-top: 1px solid var(--zh-bg3);
}
.tkl-row dt {
  font-size: 12.5px;
  color: var(--zh-muted);
  margin: 0;
  flex-shrink: 0;
}
.tkl-row dd {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--zh-text);
  text-align: right;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tkl-about-t {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--zh-muted);
  margin-bottom: 6px;
}
.tkl-about-p {
  font-size: 13.5px;
  color: var(--zh-text);
  line-height: 1.55;
  margin: 0;
}
.tkl-gain {
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--tk-green-bg);
  border: 1px solid rgba(22, 163, 74, 0.3);
}
.tkl-gain-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tkl-gain-title {
  font-size: 12.5px;
  color: var(--tk-green-d);
  font-weight: 600;
}
.tkl-gain-val {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--tk-green-d);
}
.tkl-gain-sub {
  font-size: 11.5px;
  color: var(--zh-muted);
  margin: 5px 0 0;
  line-height: 1.5;
}
.tkl-detail-ctas {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tkl-detail-ctas .tkl-btn {
  padding: 13px 14px;
  border-radius: 12px;
}
.tkl-detail-foot {
  font-size: 11px;
  color: var(--zh-muted);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* Ajout — panneaux. */
.tkl-add-step {
  display: block;
  margin: 0;
}
.tkl-add-head {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tk-line);
  align-items: center;
}
.tkl-add-head--thumb {
  align-items: flex-start;
}
.tkl-add-shopic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tkl-add-shopic svg {
  width: 22px;
  height: 22px;
}
.tkl-add-head-txt {
  flex: 1;
  min-width: 0;
}
.tkl-add-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--zh-text);
  letter-spacing: -0.4px;
  margin-top: 3px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tkl-add-meta {
  font-size: 12.5px;
  color: var(--zh-muted);
  margin-top: 4px;
}
.tkl-add-thumb,
.tkl-recap-thumb {
  position: relative;
  display: block;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--zh-purple-b), var(--zh-purple));
  overflow: hidden;
}
.tkl-add-thumb {
  width: 84px;
  height: 84px;
  border-radius: 14px;
}
.tkl-recap-thumb {
  width: 56px;
  height: 56px;
  border-radius: 11px;
}
.tkl-add-thumb img,
.tkl-recap-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.tkl-add-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tkl-recap {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--tk-shade);
  border: 1px solid var(--tk-line);
}
.tkl-recap-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tkl-recap-l {
  font-size: 11px;
  color: var(--zh-muted);
}
.tkl-recap-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--zh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkl-recap-gain {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--tk-green-d);
  flex-shrink: 0;
  white-space: nowrap;
}
.tkl-recap-unit {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: var(--zh-muted);
  font-weight: 500;
}
.tkl-field {
  display: block;
}
.tkl-input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--tk-line);
  background: #fff;
  color: var(--zh-text);
  font-size: 14.5px;
}
.tkl-input--name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.tkl-input.is-invalid,
.tkl-momo-row.is-invalid {
  border-color: var(--tk-ticket);
}
.tkl-payout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tkl-payout-opt {
  min-height: 44px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--tk-line);
  background: #fff;
  cursor: pointer;
  color: var(--zh-text);
}
.tkl-payout-opt.is-on,
.tkl-payout-opt[aria-checked="true"] {
  border-color: var(--zh-green);
  background: #f1fbf5;
}
.tkl-payout-t {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
}
.tkl-payout-s {
  display: block;
  font-size: 11.5px;
  color: var(--zh-muted);
  margin-top: 2px;
}
.tkl-momo,
.tkl-stripe {
  margin-top: 10px;
}
.tkl-momo-row {
  display: flex;
  align-items: stretch;
  border-radius: 11px;
  border: 1px solid var(--tk-line);
  overflow: hidden;
  background: #fff;
}
.tkl-momo-row:focus-within {
  border-color: var(--zh-purple);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.tkl-momo-cc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 12px;
  border-right: 1px solid var(--tk-line);
  background: var(--tk-shade);
  flex-shrink: 0;
}
.tkl-momo-flag {
  font-size: 18px;
  line-height: 1;
}
.tkl-momo-dial {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--zh-text);
}
.tkl-momo-chev {
  width: 9px;
  height: 6px;
  color: var(--zh-muted);
}
/* Le select natif recouvre le badge (opacité 0) : cible = tout le badge. */
.tkl-momo-country {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.tkl-momo-phone {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--zh-text);
  font-size: 14.5px;
}
.tkl-momo-phone:focus {
  outline: none;
}
.tkl-momo-prov {
  margin-top: 10px;
}
.tkl-stripe-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tkl-stripe-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 11px;
  border: none;
  background: var(--tk-stripe);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.tkl-stripe-now:hover {
  background: #5851e0;
}
.tkl-stripe-now:disabled,
.tkl-stripe-now.is-busy {
  cursor: wait;
  opacity: 0.8;
}
.tkl-stripe-now svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tkl-stripe-later {
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1.5px solid var(--tk-line);
  background: #fff;
  color: var(--zh-text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.tkl-stripe-later[aria-pressed="true"] {
  border-color: var(--zh-green);
  background: #f1fbf5;
}
.tkl-stripe-later[aria-pressed="true"]::before {
  content: "✓ ";
}
.tkl-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4f1fc;
  font-size: 12.5px;
  color: var(--zh-muted);
  line-height: 1.5;
}
.tkl-note-ic {
  font-size: 15px;
  line-height: 1.3;
}
.tkl-add-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px 20px;
}
.tkl-add-foot .tkl-btn {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
}
.tkl-add-foot .tkl-btn--grow {
  flex: 1.6;
}
.tkl-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tkl-kpi {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--tk-shade);
  border: 1px solid var(--tk-line);
}
.tkl-kpi--gain {
  background: #e6f7ee;
  border-color: rgba(22, 163, 74, 0.3);
}
.tkl-kpi-v {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--zh-text);
  overflow-wrap: anywhere;
}
.tkl-kpi-v--green {
  color: var(--tk-green-d);
}
.tkl-kpi-s {
  font-size: 11.5px;
  color: var(--zh-muted);
  margin-top: 2px;
}
.tkl-kpi-s--green {
  color: var(--tk-green-d);
}

/* Ajout — confirmé. */
.tkl-done {
  position: relative;
  padding: 34px 26px 24px;
  text-align: center;
}
.tkl-done-check {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto;
  background: var(--zh-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tkl-done-check svg {
  width: 30px;
  height: 30px;
}
.tkl-done-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--zh-text);
  letter-spacing: -0.5px;
  margin-top: 16px;
}
.tkl-done-body {
  font-size: 14px;
  color: var(--zh-muted);
  line-height: 1.6;
  margin: 8px 0 0;
}
.tkl-done-body b {
  color: var(--zh-text);
}
.tkl-done-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: var(--tk-shade);
  border: 1px solid var(--tk-line);
}
.tkl-done-url {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--zh-text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cible tactile ≥ 44 px comme tout contrôle `tkl-` (la rangée .tkl-done-link
   passe de 56 à 60 px). */
.tkl-copy {
  min-height: 44px;
  padding: 12px 13px;
  border-radius: 9px;
  border: none;
  background: var(--zh-text);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.tkl-copy.is-copied {
  background: var(--tk-green-d);
}
.tkl-done-draft {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}
.tkl-done-ctas {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.tkl-done-ctas .tkl-btn {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
}
.tkl-done-manage {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--zh-purple);
  text-decoration: none;
}
.tkl-done-manage:hover {
  text-decoration: underline;
}
.tkl-done-tip {
  font-size: 12px;
  color: var(--zh-muted);
  margin-top: 6px;
}

/* ── Barre de suivi fixe (au-dessus du footer) ───────────────────────────── */
.tkl-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--tkl-ft-h);
  z-index: 80;
  background: var(--tk-bar);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 30px;
  animation: tkl-rise 0.3s ease both;
}
/* Grille 3 colonnes : texte | GOUTTIÈRE du « + » | CTA. Les deux pistes
   latérales sont égales (minmax(0, 1fr) : jamais élargies par leur contenu),
   donc la piste centrale est exactement centrée, comme le launcher (footer
   `1fr auto 1fr`, conteneurs 1200 px centrés, paddings symétriques). 104 px =
   FAB 92 px + hover scale(1.07) 98 px + marge ; 92 px ≤768 (FAB 80 px). Aucun
   column-gap : il rognerait les colonnes latérales à 375 px. */
.tkl-bar-in {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
}
.tkl-bar-txt {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tkl-bar-count {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}
.tkl-bar-pot {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.tkl-bar-pot b {
  color: #86efac;
}
.tkl-bar-shop {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 100px;
  background: var(--tk-green-d);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13.5px;
  white-space: nowrap;
}
.tkl-bar-shop:hover {
  background: var(--tk-green-h);
  color: #fff;
}

/* ── Toast (au-dessus du FAB chat : footer + barre + 11 + 58 + 12) ───────── */
.tkl-toast {
  position: fixed;
  right: 22px;
  bottom: calc(var(--tkl-ft-h) + var(--tkl-bar-h) + 82px);
  z-index: 5000;
  max-width: 330px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(31, 19, 64, 0.42);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: var(--zh-text);
  line-height: 1.45;
  animation: tkl-rise 0.26s ease both;
}
.tkl-toast-ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #dcfce7;
  color: var(--tk-green-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.tkl-toast--err .tkl-toast-ic {
  background: #ffe4e6;
  color: var(--tk-ticket);
}
.tkl-toast--ok .tkl-toast-ic {
  background: #dcfce7;
  color: var(--tk-green-d);
}
.tkl-toast-body {
  flex: 1;
  min-width: 0;
}
.tkl-toast-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--zh-purple);
  font-weight: 700;
  text-decoration: none;
}
.tkl-toast-link:hover {
  text-decoration: underline;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tkl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  /* 152 px en haut comme le héro de la home (landing-home.css) : la nav + le
     FAB chat ancré en haut à droite sous elle (top 98 px + 46 px, bloc
     « FAB chat mobile » ci-dessous) — le kicker démarre dessous. */
  .tkl-hero {
    padding: calc(152px + env(safe-area-inset-top, 0px)) 16px 30px;
  }
  .tkl-hero-h1 {
    letter-spacing: -1.2px;
  }
  .tkl-hero-sub {
    font-size: 15px;
  }
  .tkl-search-in {
    padding: 15px 52px 15px 46px;
  }
  /* iOS Safari zoome la page au focus de tout champ texte / select dont la
     font-size est < 16 px (et ne revient pas en arrière) : 16 px sur TOUS les
     contrôles de la page, comme `.zic-auth-input` (auth-modal.css). Tailles
     desktop (13,5 / 14,5 / 15 / 15,5 px) inchangées. */
  .tkl-search-in,
  .tkl-input,
  .tkl-input--name,
  .tkl-momo-phone,
  .tkl-momo-country,
  .tkl-select {
    font-size: 16px;
  }
  .tkl-filters {
    padding: 10px 16px;
  }
  .tkl-filters-row {
    gap: 10px;
  }
  /* Rangée compacte sur UNE ligne dès 360 px (--tkl-anchor ≤768 = nav + 66 px
     en dépend) : bases 110 (select) + ≤ 127 (« Filtres » + pastille) + 70
     (compteur) + 2 × 10 = 327 ≤ 328 px utiles à 360. Le select prend 2/3 du
     reste ; le compteur peut se replier sur 2 lignes (≈ 31 px < 44 px) sans
     pousser la rangée. */
  .tkl-select-wrap {
    flex: 2 1 110px;
    min-width: 0;
  }
  .tkl-filters-toggle {
    display: inline-flex;
  }
  /* Rangée compacte : select · Filtres (n) · compteur ; le slider + Effacer
     se déplient sous la rangée (aria-expanded du bouton OU classe is-open). */
  .tkl-filters-more {
    display: none;
    order: 10;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
  }
  .tkl-filters-toggle[aria-expanded="true"] ~ .tkl-filters-more,
  .tkl-filters-more.is-open {
    display: flex;
  }
  .tkl-range {
    flex: 1 1 100%;
    min-width: 0;
  }
  .tkl-rng::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  .tkl-rng::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  .tkl-count {
    flex: 1 1 70px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
    text-align: right;
  }
  .tkl-grid-sec {
    padding: 20px 16px 56px;
  }
  .tkl-how {
    padding: 48px 16px 72px;
  }
  .tkl-how-col {
    padding: 20px 18px;
  }
  .tkl-mods {
    padding: 48px 0 72px;
  }
  .tkl-mods-head {
    padding: 0 16px;
    margin-bottom: 18px;
  }
  .tkl-mods-arrows {
    display: none;
  }
  .tkl-mods-rail {
    padding: 4px 16px 8px;
    scroll-padding-left: 16px;
    gap: 12px;
  }
  .tkl-mod {
    flex-basis: 232px;
    padding: 18px 18px 16px;
  }
  .tkl-bar {
    padding: 10px 16px;
  }
  /* FAB 80 px ≤768 → gouttière 92 px ; le gap ne va QUE sur le texte (un
     column-gap sur la grille rognerait les colonnes latérales). */
  .tkl-bar-in {
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  }
  .tkl-bar-txt {
    gap: 4px 14px;
  }
  .tkl-bar-count {
    font-size: 14px;
  }
  .tkl-bar-pot {
    font-size: 12px;
  }
  .tkl-bar-shop {
    padding: 9px 16px;
    font-size: 13px;
  }
  /* FAB chat mobile = 54 px : 11 + 54 + 12. */
  .tkl-toast {
    bottom: calc(var(--tkl-ft-h) + var(--tkl-bar-h) + 78px);
  }

  /* ── FAB chat mobile : MÊME position et MÊME animation que la home ──────
     Miroir déclaration pour déclaration du bloc « Home uniquement (D4) » de
     landing-chat-fab.css (@media ≤768, sélecteurs body.zh-home-page) re-scopé
     body.zh-ticket-page — ce fichier partagé n'est pas touché (patron des
     règles de chrome re-scopées). Le test tests/test_ticket_landing_ui.py
     (TicketFabMobileMirrorTest) interdit toute dérive entre les deux blocs :
     modifier la home = recopier ici. Wrap en haut à droite sous la nav (top
     98 px + safe-area), pastille « verre » 46 px (cycle 7 s de la règle
     générique), anneau 2,2 s, badge 18 px. */
  body.zh-ticket-page .zic-chat-fab-wrap {
    top: calc(98px + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: 300px;
    height: 46px;
  }
  body.zh-ticket-page .zic-chat-fab-clip {
    display: block;
    right: 23px;
  }
  body.zh-ticket-page .zic-chat-fab-pill {
    height: 46px;
    top: 10px;
    gap: 8px;
    padding: 0 34px 0 8px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-right: none;
    box-shadow: none;
  }
  body.zh-ticket-page .zic-chat-fab-pill-title {
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
  }
  body.zh-ticket-page .zic-chat-fab-pill-sub {
    display: none;
  }
  body.zh-ticket-page .zic-chat-fab-av {
    width: 26px;
    height: 26px;
    border-color: rgba(20, 8, 64, 0.9);
    margin-left: -8px;
    font-size: 10px;
    font-weight: 700;
  }
  body.zh-ticket-page .zic-chat-fab-av:first-child {
    margin-left: 0;
  }
  body.zh-ticket-page .zic-chat-fab {
    width: 46px;
    height: 46px;
    border: none;
    box-shadow:
      0 10px 28px -8px rgba(123, 63, 242, 0.7),
      0 0 0 4px rgba(168, 85, 247, 0.22);
  }
  body.zh-ticket-page .zic-chat-fab-icon svg {
    width: 21px;
    height: 21px;
  }
  body.zh-ticket-page .zic-chat-fab-ring {
    animation-duration: 2.2s;
  }
  body.zh-ticket-page .zic-chat-fab-badge {
    min-width: 18px;
    height: 18px;
    top: -4px;
    right: -4px;
    border-color: #1a0840;
    line-height: 14px;
  }
  /* Héro sorti du viewport (body.zh-hero-out, posé par landing-ticket.js —
     même observateur que landing-home.js) : la pastille verre serait
     illisible sur les sections claires ET la barre de filtres sticky vient se
     coller sous la nav, exactement sous le FAB → retour au bouton seul, en bas
     à droite au-dessus de la barre de suivi et du footer fixe (position
     générique mobile). Seul écart voulu avec la home, qui n'a pas de sticky. */
  body.zh-ticket-page.zh-hero-out .zic-chat-fab-clip {
    display: none;
  }
  body.zh-ticket-page.zh-hero-out .zic-chat-fab-wrap {
    top: auto;
    bottom: calc(var(--tkl-ft-h) + var(--tkl-bar-h) + 11px);
    width: 54px;
    height: 54px;
  }
  body.zh-ticket-page.zh-hero-out .zic-chat-fab {
    width: 54px;
    height: 54px;
  }
  body.zh-ticket-page.zh-hero-out .zic-chat-fab-icon svg {
    width: 26px;
    height: 26px;
  }
}
@media (max-width: 640px) {
  .tkl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tkl-how-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tkl-card-media {
    aspect-ratio: 16 / 9;
  }
  /* Colonne CTA = (343 − 92) / 2 ≈ 125 px à 375 : la pilule « Voir ma
     boutique » (≈ 141 px nowrap) déborderait à gauche SOUS le « + » → elle
     se replie sur 2 lignes centrées, toujours dans sa colonne (plus de
     width:100% : une pilule pleine largeur passait sous le FAB). */
  .tkl-bar-shop {
    white-space: normal;
    text-align: center;
    padding: 9px 12px;
  }
}
@media (max-width: 480px) {
  /* Modales en feuille bas plein écran. */
  .tkl-modal {
    padding: 0;
    align-items: flex-end;
  }
  .tkl-modal-card {
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tkl-add-head,
  .tkl-add-body,
  .tkl-add-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tkl-add-foot {
    flex-direction: column;
  }
  .tkl-add-foot .tkl-btn--grow {
    order: -1;
  }
  .tkl-done {
    padding: 30px 16px 20px;
  }
  .tkl-done-ctas {
    flex-direction: column;
  }
  .tkl-detail-body {
    padding: 18px 16px;
  }
  .tkl-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
  .tkl-hero-h1 {
    font-size: 30px;
  }
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.zh-ticket-page {
    scroll-behavior: auto;
  }
  .tkl-mods-rail {
    scroll-behavior: auto;
  }
  .tkl-card,
  .tkl-card:hover,
  .tkl-mod,
  .tkl-mod:hover,
  .tkl-step,
  .tkl-step:hover,
  .tkl-btn {
    transform: none !important;
    transition: none !important;
  }
  .tkl-modal-bg,
  .tkl-modal-card,
  .tkl-bar,
  .tkl-toast {
    animation: none !important;
  }
  .tkl-skel-card > span::after {
    animation: none;
  }
  .tkl-search-spin {
    animation-duration: 1.6s;
  }
}