/* TAKALO — améliorations UI v1 (11/10/2026) */

/* 1. Barre du bas mobile : textes lisibles */
.mobile-bottom-nav .mobile-nav-item small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

/* 2. Barre du bas : ordre logique Accueil, Explorer, Publier, Messages, Compte */
.mobile-bottom-nav .mobile-home-entry      { order: 1 !important; }
.mobile-bottom-nav .mobile-explore-entry   { order: 2 !important; }
.mobile-bottom-nav .mobile-nav-publish     { order: 3 !important; }
.mobile-bottom-nav .mobile-messenger-entry { order: 4 !important; }
.mobile-bottom-nav .mobile-account-entry   { order: 5 !important; }


/* 4. Grand titre : taille maîtrisée pour ne plus chevaucher les cartes */
.hero .hero-slogan-corporate {
  font-size: clamp(2.4rem, 4.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
}
.hero .hero-content { position: relative; z-index: 2; }

/* 5. Mobile : présentation plus courte pour voir les annonces plus vite */
@media (max-width: 720px) {
  .hero .hero-slogan-corporate { font-size: 2rem !important; }
  .hero .hero-lead,
  .hero .trust-row { display: none !important; }
}

/* 2b. Ordre réel de la barre du bas (styles.css utilise grid-column) */
.mobile-bottom-nav .mobile-home-entry      { grid-column: 1 !important; grid-row: 1 !important; }
.mobile-bottom-nav .mobile-explore-entry   { grid-column: 2 !important; grid-row: 1 !important; }
.mobile-bottom-nav .mobile-nav-publish     { grid-column: 3 !important; grid-row: 1 !important; }
.mobile-bottom-nav .mobile-messenger-entry { grid-column: 4 !important; grid-row: 1 !important; }
.mobile-bottom-nav .mobile-account-entry   { grid-column: 5 !important; grid-row: 1 !important; }

/* 6. Bandeau défilant : plus lisible, moins agressif */
html body .site-header .header-ticker {
  background: #0B3D2A !important;
}
html body .site-header .header-ticker .pinned-message-ticker,
html body .site-header .header-ticker .pinned-message-ticker * {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: #E6F5EC !important;
  text-shadow: none !important;
}

/* 7. Squelettes de chargement : forme de carte + reflet animé */
#listing-grid .skeleton {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(90deg, #E3EAE6 0%, #F3F7F4 45%, #E3EAE6 90%) !important;
  background-size: 200% 100% !important;
  animation: tkSkel 1.4s linear infinite !important;
}
#listing-grid .skeleton::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}
@keyframes tkSkel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #listing-grid .skeleton { animation: none !important; } }

/* 8. Bouton « Sauvegarder cette recherche » : bien visible quand il apparaît */
.a4e-save-search:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 10px 0 14px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1.5px dashed #0B7A53 !important;
  background: #F0F8F3 !important;
  color: #0B5E40 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  cursor: pointer !important;
}
.a4e-save-search:not([hidden]):hover,
.a4e-save-search:not([hidden]):focus-visible {
  background: #E1F2E8 !important;
  border-style: solid !important;
}

/* 9. Réponses rapides Messenger */
.tk-quick-replies { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tk-quick-replies::-webkit-scrollbar { display: none; }
.tk-quick-reply { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid #B9D3C5; background: #FFFFFF; color: #0B5E40; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.tk-quick-reply:hover, .tk-quick-reply:focus-visible { background: #F0F8F3; border-color: #0B7A53; }
.tk-quick-reply:active { transform: scale(0.96); }

/* 10. Cartes d'annonce : photo d'abord */
.listing-card .listing-image-wrap {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  overflow: hidden !important;
}
.listing-card .listing-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.listing-card .sale-price-copy strong {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: #0B5E40 !important;
}
@media (max-width: 720px) {
  .listing-card .listing-description { display: none !important; }
}

/* 11. Bande vendeur : Boost + Gérer, bien visibles et regroupés */
.listing-card .listing-actions:not(.multichannel-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
  padding: 10px 10px 8px !important;
  background: #F0F8F3 !important;
  border: 1px solid #CFE6D9 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}
.listing-card .listing-actions:not(.multichannel-actions)::before {
  content: "Espace vendeur";
  display: block;
  width: 100%;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3F5A4B;
}
.listing-card [data-promotion-entry] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #0B7A53 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.listing-card .manage-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  background: #F0F8F3 !important;
  border: 1px solid #CFE6D9 !important;
  border-top: 1px dashed #B9D3C5 !important;
  border-radius: 0 0 12px 12px !important;
  color: #0B5E40 !important;
  font: inherit !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* 12. Date de publication sur les cartes */
.listing-card .listing-age { margin: .1rem 0 .2rem; font-size: .78rem; color: #5B6B63; }

/* 13. Cartes compactes : taille ajustée */
.listing-card .listing-image-wrap { aspect-ratio: 1 / 1 !important; }
.listing-card .listing-body h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}
.listing-card .listing-age { margin: 2px 0 0 !important; }
.listing-card .listing-location { margin: 2px 0 0 !important; min-height: 0 !important; }
.listing-card .archive-auto-note,
.listing-card .sold-auto-remove {
  margin: 6px 0 4px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: #6B7A72 !important;
}
@media (max-width: 720px) {
  .listing-card .listing-body { padding: 10px 12px 12px !important; gap: 4px !important; }
  .listing-card .listing-body h3 { font-size: 1rem !important; margin: 0 0 2px !important; }
  .listing-card .sale-price-copy,
  .listing-card .donation-copy,
  .listing-card .exchange-wanted {
    padding: 6px 10px !important;
    margin: 4px 0 !important;
    min-height: 0 !important;
  }
  .listing-card .sale-price-copy strong { font-size: 1.15rem !important; }
  .listing-card .sale-price-copy span { font-size: .72rem !important; }
  .listing-card .listing-age,
  .listing-card .listing-location { font-size: .8rem !important; }
  .listing-card .multichannel-actions .button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: .85rem !important;
  }
}

/* 14. Cartes encore plus compactes */
.listing-card .listing-image-wrap { aspect-ratio: 4 / 3 !important; }
.listing-card .listing-description,
.listing-card .archive-auto-note,
.listing-card .sale-type-pill,
.listing-card .exchange-type-pill,
.listing-card .donation-pill { display: none !important; }
.listing-card .listing-body { padding: 10px 12px 12px !important; gap: 4px !important; }
.listing-card .listing-body h3 { font-size: .98rem !important; margin: 0 !important; }
.listing-card .sale-price-copy,
.listing-card .donation-copy,
.listing-card .exchange-wanted { padding: 6px 10px !important; margin: 4px 0 !important; min-height: 0 !important; }
.listing-card .sale-price-copy strong { font-size: 1.1rem !important; }
.listing-card .multichannel-actions { gap: 6px !important; margin-top: 6px !important; }
.listing-card .multichannel-actions .button { min-height: 36px !important; padding: 6px 8px !important; font-size: .8rem !important; }
.listing-card .listing-actions:not(.multichannel-actions) { margin-top: 8px !important; padding: 6px 8px !important; }
.listing-card .listing-actions:not(.multichannel-actions)::before { margin-bottom: 4px !important; font-size: 10px !important; }
.listing-card [data-promotion-entry] { min-height: 36px !important; font-size: .85rem !important; }
.listing-card .manage-link { min-height: 36px !important; font-size: 13px !important; }
@media (min-width: 900px) {
  html body #listing-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 16px !important; }
}

/* 15. Espace vendeur visible seulement sur mes annonces */
.listing-card:not(.tk-mine) .listing-actions:not(.multichannel-actions) { display: none !important; }
.listing-card:not(.tk-mine) .manage-link {
  min-height: 0 !important;
  margin: 6px 0 0 !important;
  padding: 4px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #6B7A72 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* 16. Cartes du catalogue au style de la carte du Hero */
.listing-card {
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(223,231,227,.9) !important;
  box-shadow: 0 14px 34px rgba(8,52,37,.12) !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .listing-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(8,52,37,.18) !important; }
}
.listing-card .listing-image-wrap { background: #e6efe9 !important; border-radius: 0 !important; }
.listing-card .listing-body { padding: 13px 15px 15px !important; }
.listing-card .listing-body h3 {
  font-family: var(--font-display) !important;
  font-weight: 850 !important;
  font-size: 1.12rem !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}
.listing-card .sale-price-copy {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
}
.listing-card .sale-price-copy strong { font-size: 1.2rem !important; color: #0B5E40 !important; }
.listing-card .sale-price-copy span { color: var(--muted) !important; font-size: .78rem !important; font-weight: 600 !important; }
.listing-card .listing-age,
.listing-card .listing-location { color: #6d7a75 !important; font-size: .8rem !important; }
.listing-card .multichannel-actions .button { border-radius: 12px !important; }
@media (max-width: 720px) {
  .listing-card { border-radius: 20px !important; box-shadow: 0 13px 30px rgba(0,0,0,.12) !important; }
  .listing-card .listing-image-wrap { aspect-ratio: 16 / 10 !important; }
  .listing-card .listing-body { padding: 12px 14px 14px !important; }
  .listing-card .listing-body h3 { font-size: 1.05rem !important; }
}

/* 17. Barre du bas : ordre de la maquette + icônes SVG */
html body .mobile-bottom-nav .mobile-home-entry { grid-column: 1 !important; }
html body .mobile-bottom-nav .mobile-messenger-entry { grid-column: 2 !important; }
html body .mobile-bottom-nav .mobile-nav-publish { grid-column: 3 !important; }
html body .mobile-bottom-nav .mobile-explore-entry { grid-column: 4 !important; }
html body .mobile-bottom-nav .mobile-account-entry { grid-column: 5 !important; }
.mobile-bottom-nav .tk-ico { width: 23px; height: 23px; display: block; margin: 0 auto; }

/* 18. Hero au style de la maquette */
html body .hero {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(115deg, #06301F 0%, #0B4A32 45%, #0E5C3E 100%) !important;
  border-radius: 0 0 48px 48px !important;
}
html body .hero .hero-bg-picture {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 52% !important;
  height: 100% !important;
  z-index: 0 !important;
}
html body .hero .hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 60% 20% !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}
html body .hero .hero-slogan-corporate {
  font-style: italic !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -.02em !important;
  color: #FFFFFF !important;
}
html body .hero .hero-slogan-first { display: block !important; color: #FFFFFF !important; }
html body .hero .hero-highlight {
  display: block !important;
  color: #5EE6A8 !important;
  -webkit-text-fill-color: #5EE6A8 !important;
  background: none !important;
}
html body .hero .hero-mode-kicker {
  margin-top: 12px !important;
  color: #FFFFFF !important;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .hero .hero-lead { max-width: 38rem !important; color: rgba(255,255,255,.88) !important; }
html body .hero .hero-actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  max-width: 40rem !important;
}
html body .hero .hero-actions a[href="#catalogue"] { grid-column: 1 / -1 !important; }
html body .hero .hero-actions .button {
  min-height: 52px !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}
html body .hero .hero-actions .button-secondary {
  background: #FFFFFF !important;
  color: #0B3D2A !important;
  border: 0 !important;
}
html body .hero .hero-actions .button-primary {
  background: linear-gradient(180deg, #14935F, #0B7A53) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
html body .hero .trust-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  max-width: 40rem !important;
  margin-top: 24px !important;
}
html body .hero .trust-row span {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 720px) {
  html body .hero { border-radius: 0 0 32px 32px !important; }
  html body .hero .hero-bg-picture { width: 78% !important; }
  html body .hero .hero-bg-image {
    object-position: 70% 15% !important;
    opacity: .75 !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  }
  html body .hero .hero-actions { gap: 8px !important; }
  html body .hero .hero-actions .button { min-height: 46px !important; font-size: .9rem !important; padding: 8px !important; }
}

/* 19. Hero : photo cadrée, cartes autour du visage, avantages 2x2 */
html body .hero .hero-bg-image { object-position: 55% 0% !important; }
html body .hero .trust-row span { grid-column: auto !important; width: auto !important; }
@media (min-width: 1101px) {
  html body .hero .hero-visual .hero-card {
    width: 180px !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
  }
  html body .hero .hero-visual .hero-card-copy { padding: 9px 11px 11px !important; gap: 2px !important; }
  html body .hero .hero-visual .hero-card-copy strong { font-size: .88rem !important; }
  html body .hero .hero-visual .hero-card-copy span,
  html body .hero .hero-visual .hero-card-copy small { font-size: .7rem !important; margin-top: 0 !important; }
  html body .hero .hero-visual .hero-card-fav { width: 30px !important; height: 30px !important; font-size: 1rem !important; top: 8px !important; right: 8px !important; }
  html body .hero .hero-visual .visual-status { font-size: .62rem !important; padding: 4px 8px !important; top: 8px !important; left: 8px !important; }
  html body .hero .hero-visual .hero-card-phone {
    top: 40% !important; left: -6% !important; right: auto !important; bottom: auto !important;
    transform: rotate(-4deg) !important; z-index: 3 !important;
  }
  html body .hero .hero-visual .hero-card-shelf {
    top: auto !important; bottom: 0 !important; left: 32% !important; right: auto !important;
    transform: rotate(2deg) !important; z-index: 4 !important;
  }
  html body .hero .hero-visual .hero-card-bike {
    top: 50% !important; right: -8% !important; left: auto !important; bottom: auto !important;
    transform: rotate(4deg) !important; z-index: 3 !important;
  }
}

/* 20. Hero : encadré communauté en haut à droite + photo téléphone */
@media (min-width: 1101px) {
  html body .hero .hero-national-card {
    top: 4% !important;
    bottom: auto !important;
    right: -6% !important;
    left: auto !important;
    z-index: 2 !important;
  }
}
@media (max-width: 720px) {
  html body .hero .hero-bg-picture { width: 62% !important; height: 62% !important; }
  html body .hero .hero-bg-image {
    object-position: 80% 0% !important;
    opacity: .9 !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* 21. Hero : carte de droite en haut, sans trait, icônes SVG, cartes mobiles */
html body .hero .hero-slogan-corporate::before,
html body .hero .hero-slogan-corporate::after,
html body .hero .hero-slogan-first::before,
html body .hero .hero-slogan-first::after { content: none !important; display: none !important; }
html body .hero .tk-ico-btn { width: 20px; height: 20px; flex: 0 0 auto; margin-right: 8px; vertical-align: -4px; }
html body .hero .tk-ico-gift { color: #F28C28; }
html body .hero .hero-actions .button { display: inline-flex !important; align-items: center !important; }
@media (min-width: 1101px) {
  html body .hero .hero-visual .hero-card-bike {
    top: 2% !important; right: -4% !important; bottom: auto !important; left: auto !important;
    transform: rotate(4deg) !important;
  }
}
@media (max-width: 720px) {
  html body .hero .hero-card { flex-basis: min(58vw, 220px) !important; border-radius: 18px !important; }
  html body .hero .hero-card-media { aspect-ratio: 16 / 10 !important; }
  html body .hero .hero-card-copy { padding: 9px 11px 11px !important; }
  html body .hero .hero-card-copy strong {
    font-size: .92rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  html body .hero .hero-card-copy small { display: none !important; }
}

/* 22. Hero : cartes en arc autour de la femme + flottement doux */
@media (min-width: 1101px) {
  html body .hero .hero-visual .hero-card-phone {
    top: 0 !important; left: -12% !important; right: auto !important; bottom: auto !important;
    transform: rotate(-4deg) !important; z-index: 3 !important;
  }
  html body .hero .hero-visual .hero-card-shelf {
    top: 54% !important; left: 2% !important; right: auto !important; bottom: auto !important;
    transform: rotate(3deg) !important; z-index: 4 !important;
  }
  html body .hero .hero-visual .hero-card-bike {
    top: 4% !important; right: -14% !important; left: auto !important; bottom: auto !important;
    transform: rotate(4deg) !important; z-index: 3 !important;
  }
  html body .hero .hero-visual .hero-card { animation: tkHeroFloat 6s ease-in-out infinite; }
  html body .hero .hero-visual .hero-card-shelf { animation-delay: -2s; animation-duration: 7s; }
  html body .hero .hero-visual .hero-card-bike { animation-delay: -4s; animation-duration: 6.5s; }
}
@keyframes tkHeroFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .hero .hero-visual .hero-card { animation: none !important; }
}

/* 23. Hero : carte de gauche éloignée du slogan */
@media (min-width: 1101px) {
  html body .hero .hero-visual .hero-card-phone { left: -2% !important; top: 2% !important; }
}

/* 24. Hero : encadré « Des objets… » en bas à droite, style vitré */
@media (min-width: 1101px) {
  html body .hero .hero-visual .hero-note {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    bottom: 2% !important;
    right: -12% !important;
    z-index: 5 !important;
    max-width: 210px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    background: rgba(6,48,31,.55) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.25) !important;
    transform: none !important;
    animation: tkHeroFloat 7.5s ease-in-out infinite;
    animation-delay: -3s;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .hero .hero-visual .hero-note { animation: none !important; }
}

/* 25. Téléphone : carte du catalogue centrée, glisser aimanté, photo 16/9 */
@media (max-width: 720px) {
  html body #listing-grid {
    grid-auto-columns: 84vw !important;
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    scroll-padding-left: 8vw !important;
    scroll-padding-right: 8vw !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
  }
  html body #listing-grid > .listing-card {
    flex: 0 0 84vw !important;
    width: 84vw !important;
    max-width: 84vw !important;
    scroll-snap-align: center !important;
  }
  html body .listing-card .listing-image-wrap { aspect-ratio: 16 / 9 !important; }
}

/* 26. Section Services allégée */
html body .services-section .services-flow-strip,
html body .services-section #services-summary { display: none !important; }
html body .services-section .services-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
html body .services-section .services-heading .eyebrow { margin-bottom: 4px !important; font-size: .72rem !important; }
html body .services-section #services-title {
  margin: 0 !important;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important;
  line-height: 1.15 !important;
}
html body .services-section .services-heading-actions { display: flex !important; gap: 8px !important; margin: 0 !important; }
html body .services-section .services-heading-actions .button { min-height: 42px !important; padding: 8px 16px !important; }
html body .services-section .services-filter-bar { padding: 8px !important; gap: 8px !important; border-radius: 16px !important; }
html body .services-section .services-filter-bar input,
html body .services-section .services-filter-bar select { min-height: 42px !important; }
@media (max-width: 720px) {
  html body .services-section .services-heading-actions { width: 100% !important; }
  html body .services-section .services-heading-actions .button { flex: 1 1 0 !important; }
  html body .services-section .services-filter-bar { display: grid !important; grid-template-columns: 1fr !important; }
  html body .services-section .services-filter-bar > label:nth-of-type(3),
  html body .services-section .services-filter-bar > label:nth-of-type(4) { display: none !important; }
}

/* 27. Live vraiment caché + sections Étapes, Sécurité, Billetterie allégées */
html body #takalo-live-header[hidden],
html body #takalo-live-section[hidden] { display: none !important; }

html body .how-section { padding-top: 32px !important; padding-bottom: 32px !important; }
html body .how-section .eyebrow { display: none !important; }
html body .how-section #how-title { font-size: clamp(1.3rem, 2vw, 1.7rem) !important; margin-bottom: 14px !important; }
html body .how-section .step-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
}
html body .how-section .step-card span { flex: 0 0 auto !important; margin: 0 !important; }
html body .how-section .step-card h3 { margin: 0 !important; font-size: .95rem !important; }
html body .how-section .step-card p { display: none !important; }

html body .safety-section .safety-card {
  padding: 16px 22px !important;
  gap: 14px !important;
  align-items: center !important;
}
html body .safety-section .eyebrow { display: none !important; }
html body .safety-section .safety-icon { width: 44px !important; height: 44px !important; font-size: 1.3rem !important; }
html body .safety-section h2 { font-size: clamp(1rem, 1.5vw, 1.2rem) !important; margin: 0 0 4px !important; }
html body .safety-section .safety-card p { font-size: .82rem !important; line-height: 1.45 !important; margin: 0 !important; }

html body .ticketing-section .ticketing-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}
html body .ticketing-section .ticketing-heading .eyebrow { margin-bottom: 4px !important; font-size: .72rem !important; }
html body .ticketing-section #ticketing-title {
  margin: 0 !important;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important;
  line-height: 1.15 !important;
}
html body .ticketing-section .ticketing-heading .muted { display: none !important; }
html body .ticketing-section .ticketing-heading-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
html body .ticketing-section .ticketing-heading-actions .button { min-height: 42px !important; padding: 8px 14px !important; }
html body .ticketing-section .ticketing-flow-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  margin-bottom: 12px !important;
  scrollbar-width: none;
}
html body .ticketing-section .ticketing-flow-strip span {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: .76rem !important;
  white-space: nowrap !important;
}
html body .ticketing-section .ticketing-flow-strip strong {
  width: 18px !important;
  height: 18px !important;
  font-size: .68rem !important;
}
html body .ticketing-section:has(#ticket-public-list:empty) .ticketing-discovery-toolbar { display: none !important; }
@media (max-width: 720px) {
  html body .ticketing-section .ticketing-heading-actions { width: 100% !important; }
  html body .ticketing-section .ticketing-heading-actions .button { flex: 1 1 auto !important; }
}

/* 29. Cartes de service allégées, au style des cartes d'annonces */
html body .service-card {
  overflow: hidden !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(223,231,227,.9) !important;
  box-shadow: 0 14px 34px rgba(8,52,37,.12) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  html body .service-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(8,52,37,.18) !important; }
}
html body .service-card .service-card-main { padding: 0 !important; text-align: left !important; }
html body .service-card .service-card-media.has-image { aspect-ratio: 4 / 3 !important; height: auto !important; }
html body .service-card .service-card-media.has-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body .service-card .service-card-media:not(.has-image) {
  display: grid !important;
  place-items: center !important;
  height: 90px !important;
  aspect-ratio: auto !important;
  background: linear-gradient(135deg, #E3F4EA, #F3FAF6) !important;
}
html body .service-card .service-card-placeholder { font-size: 2.2rem !important; }
html body .service-card .service-card-body { display: grid !important; gap: 4px !important; padding: 12px 14px 14px !important; }
html body .service-card .service-card-meta span:nth-child(2),
html body .service-card .service-card-description { display: none !important; }
html body .service-card .service-card-meta span { font-size: .7rem !important; padding: 3px 8px !important; }
html body .service-card .service-card-body strong {
  font-family: var(--font-display) !important;
  font-weight: 850 !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .service-card .service-card-bottom {
  display: grid !important;
  gap: 2px !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
html body .service-card .service-card-bottom b { font-size: 1.05rem !important; color: #0B5E40 !important; }
html body .service-card .service-card-bottom small { font-size: .78rem !important; color: #6d7a75 !important; }
@media (min-width: 900px) {
  html body #services-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 16px !important; }
}

/* 28. Live caché : règle renforcée (plus forte que les anciens styles) */
html body header #takalo-live-header#takalo-live-header[hidden],
html body #takalo-live-section#takalo-live-section[hidden] { display: none !important; }

/* 30. Espaces réduits entre les blocs Étapes, Sécurité, Billetterie */
html body .how-section { padding-top: 24px !important; padding-bottom: 20px !important; }
html body .safety-section { padding-top: 12px !important; padding-bottom: 12px !important; }
html body .ticketing-section { padding-top: 28px !important; padding-bottom: 32px !important; }
html body .services-section { padding-bottom: 28px !important; }

/* 31. Billetterie phase 1 : étapes, suppression, billets bientôt disponibles */
html body .ticket-lifecycle-actions [data-ticket-lifecycle][hidden],
html body #ticket-public-event-types[hidden],
html body .tk-ev-soon[hidden],
html body #ticket-public-event-dialog section[hidden],
html body [data-ticket-manage][hidden] { display: none !important; }
.tk-ev-tracker { margin: 4px 0 14px; }
.tk-ev-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.tk-ev-steps li { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #F1F5F3; color: #6d7a75; font-size: .78rem; font-weight: 700; }
.tk-ev-steps li span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #DCE6E0; font-size: .68rem; }
.tk-ev-steps li.done { background: #E3F4EA; color: #0B5E40; }
.tk-ev-steps li.done span { background: #0B7A53; color: #FFFFFF; }
.tk-ev-steps li.current { background: #0B7A53; color: #FFFFFF; }
.tk-ev-steps li.current span { background: #FFFFFF; color: #0B7A53; }
.tk-ev-hint { margin: 0; font-size: .85rem; color: #3F5A4B; }
.ticket-lifecycle-actions .tk-ev-delete { color: #B42318 !important; border-color: #F3C2BD !important; background: #FFF5F4 !important; }
.tk-ev-soon { display: grid; gap: 4px; margin: 8px 0; padding: 16px 18px; border-radius: 16px; background: #F0F8F3; border: 1px dashed #9CCFB3; color: #0B3D2A; }
.tk-ev-soon span { font-size: .88rem; color: #3F5A4B; }
.tk-ev-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 9999; padding: 10px 18px; border-radius: 999px; background: #0B3D2A; color: #FFFFFF; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* 32. Billetterie : billets enregistrés dans « Gérer » */
html body #ticket-created-types-session { display: none !important; }
.tk-ev-types { display: grid; gap: 6px; margin-top: 10px; }
.tk-ev-types-title { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #3F5A4B; }
.tk-ev-types-empty { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF8E6; color: #7A5300; font-size: .85rem; }
.tk-ev-type { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: #F0F8F3; border: 1px solid #CFE6D9; }
.tk-ev-type strong { font-size: .95rem; }
.tk-ev-type span { font-weight: 800; color: #0B5E40; text-align: right; }
.tk-ev-type small { grid-column: 1 / -1; color: #6d7a75; font-size: .78rem; }
.tk-ev-warn { color: #9A5B00 !important; font-weight: 700; }
.ticket-lifecycle-actions button:disabled { opacity: .5; cursor: not-allowed; }

/* 33. Billetterie : numéros Mobile Money pour l'acheteur */
html body #ticket-order-form button[type="submit"][hidden],
html body #tk-pay-numbers[hidden],
html body #tk-order-done[hidden] { display: none !important; }
.tk-order-done { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #E3F4EA; color: #0B5E40; font-weight: 700; }
.tk-pay-numbers { display: grid; gap: 8px; margin: 12px 0; padding: 14px; border-radius: 16px; background: #F0F8F3; border: 1px solid #CFE6D9; }
.tk-pay-title { margin: 0 0 2px; color: #0B3D2A; }
.tk-pay-title strong { color: #0B5E40; font-size: 1.1rem; }
.tk-pay-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #FFFFFF; border: 1px solid #DCE9E1; transition: border-color .2s, box-shadow .2s; }
.tk-pay-row span { color: #3F5A4B; font-weight: 700; }
.tk-pay-row strong { font-size: 1.05rem; letter-spacing: .02em; color: #0B3D2A; }
.tk-pay-row.active { border-color: #0B7A53; box-shadow: 0 0 0 3px rgba(11,122,83,.15); }
.tk-pay-note { margin: 2px 0 0; font-size: .82rem; color: #6d7a75; }
@media (max-width: 520px) {
  .tk-pay-row { grid-template-columns: 1fr auto; }
  .tk-pay-row span { grid-column: 1 / -1; font-size: .8rem; }
}

/* 34. Billet électronique */
.tk-ticket-dialog { padding: 0; border: 0; border-radius: 28px; width: min(420px, 94vw); background: transparent; }
.tk-ticket-dialog::backdrop { background: rgba(6, 30, 20, .7); }
.tk-ticket { overflow: hidden; border-radius: 28px; background: #FFFFFF; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.tk-ticket-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #0B3D2A; color: #FFFFFF; font-weight: 800; letter-spacing: .02em; }
.tk-ticket-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #FFFFFF; font-size: 1.3rem; cursor: pointer; }
.tk-ticket-body { padding: 18px 20px 6px; text-align: center; }
.tk-ticket-body h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 850; font-size: 1.4rem; color: #0B3D2A; }
.tk-ticket-body p { margin: 4px 0; color: #3F5A4B; font-size: .92rem; }
.tk-ticket-qr { margin: 14px auto 8px; width: min(260px, 70vw); padding: 10px; border-radius: 18px; background: #FFFFFF; border: 1px solid #DCE9E1; }
.tk-ticket-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.tk-ticket-code { font-family: ui-monospace, monospace; font-weight: 700; color: #0B3D2A !important; letter-spacing: .03em; }
.tk-ticket-status { font-weight: 800; color: #9A5B00 !important; }
.tk-ticket-status.s-ISSUED { color: #0B7A53 !important; }
.tk-ticket-tip { font-size: .8rem !important; color: #6d7a75 !important; }
.tk-ticket-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px 18px; border-top: 2px dashed #DCE9E1; }

/* 35. Téléphone : textes des cartes TAKALO Match dans leur cadre + boutons du Hero */
@media (max-width: 720px) {
  html body .hero .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .hero .trust-row span {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: .74rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  html body .hero .trust-row span::before { flex: 0 0 auto !important; }
  html body .hero .hero-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .hero .hero-actions .button {
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: .88rem !important;
    white-space: nowrap !important;
  }
  html body .hero .tk-ico-btn { width: 18px !important; height: 18px !important; margin-right: 6px !important; }
}
@media (max-width: 380px) {
  html body .hero .hero-actions .button { font-size: .8rem !important; }
  html body .hero .tk-ico-btn { margin-right: 4px !important; }
}

/* 35. Téléphone : textes des cartes TAKALO Match dans leur cadre + boutons du Hero */
@media (max-width: 720px) {
  html body .hero .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .hero .trust-row span {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: .74rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  html body .hero .trust-row span::before { flex: 0 0 auto !important; }
  html body .hero .hero-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .hero .hero-actions .button {
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: .88rem !important;
    white-space: nowrap !important;
  }
  html body .hero .tk-ico-btn { width: 18px !important; height: 18px !important; margin-right: 6px !important; }
}
@media (max-width: 380px) {
  html body .hero .hero-actions .button { font-size: .8rem !important; }
  html body .hero .tk-ico-btn { margin-right: 4px !important; }
}

/* 36. Appels audio TAKALO (LiveKit) */
#chat-header #tk-call-button{display:none;align-items:center;gap:6px}
#chat-header #tk-call-button.tk-show{display:inline-flex}
#chat-header #tk-call-button svg{flex:none}
dialog.tk-call{border:0;padding:0;background:transparent;width:min(360px,calc(100vw - 32px));max-width:none;color:#fff;overflow:visible}
dialog.tk-call::backdrop{background:rgba(4,30,22,.75);backdrop-filter:blur(6px)}
.tk-call-box{background:linear-gradient(160deg,#0f5a43,#0a3d2e);border-radius:28px;padding:32px 22px 26px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.tk-call-avatar{width:92px;height:92px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.35)}
dialog.tk-call[data-phase="incoming"] .tk-call-avatar,dialog.tk-call[data-phase="outgoing"] .tk-call-avatar{animation:tkCallPulse 1.6s ease-out infinite}
@keyframes tkCallPulse{0%{box-shadow:0 0 0 0 rgba(110,231,183,.55)}100%{box-shadow:0 0 0 22px rgba(110,231,183,0)}}
.tk-call-name{display:block;font-size:1.3rem;margin-bottom:4px;color:#fff;overflow-wrap:anywhere}
.tk-call-status{margin:0;color:rgba(255,255,255,.85);font-size:.95rem}
.tk-call-timer{margin:6px 0 0;color:#fff;font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:700;min-height:1.4em}
.tk-call-unlock{display:none;margin:12px auto 0;border:0;border-radius:999px;padding:8px 14px;background:#fff;color:#0a3d2e;font-weight:700;cursor:pointer}
.tk-call-unlock.tk-show{display:block}
.tk-call-actions{display:flex;justify-content:center;gap:28px;margin-top:26px;min-height:10px}
.tk-call-act{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;color:#fff;font:inherit;font-size:.85rem;cursor:pointer}
.tk-call-circle{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff}
.tk-call-circle svg{width:26px;height:26px}
.tk-call-act.tk-red .tk-call-circle{background:#e5484d}
.tk-call-act.tk-green .tk-call-circle{background:#22c55e}
.tk-call-act.tk-on .tk-call-circle{background:#fff;color:#0a3d2e}
.tk-call-audio{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.tk-call-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:9999;background:#0a3d2e;color:#fff;padding:10px 16px;border-radius:14px;font-size:.9rem;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* 37. ZOMA LIVE TAKALO — lecteur spectateur (lecture auto, likes, partage) */
.tkz-hidden{display:none!important}
.tkz-stage{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;width:100%}
.tkz-stage video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.tkz-stage:fullscreen{border-radius:0;aspect-ratio:auto}
.tkz-live-chip{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,#c8102e,#ff6a00);color:#fff;font-weight:900;font-size:.78rem;letter-spacing:.06em;padding:5px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:2}
.tkz-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:tkzBlink 1.2s infinite}
@keyframes tkzBlink{50%{opacity:.3}}
.tkz-viewers{position:absolute;left:10px;top:42px;background:rgba(0,0,0,.55);color:#fff;font-weight:700;font-size:.78rem;padding:4px 9px;border-radius:999px;z-index:2}
.tkz-unmute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.72);color:#fff;border:2px solid rgba(255,255,255,.6);border-radius:999px;padding:12px 18px;font-weight:800;font-size:.95rem;cursor:pointer;z-index:3;animation:tkzPulse 1.8s infinite}
@keyframes tkzPulse{50%{box-shadow:0 0 0 10px rgba(255,255,255,.12)}}
.tkz-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;background:radial-gradient(circle,#1a2a22,#000);font-weight:700;z-index:1}
.tkz-spin{width:36px;height:36px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:#ffd34d;animation:tkzSpin .9s linear infinite}
@keyframes tkzSpin{to{transform:rotate(360deg)}}
.tkz-side{position:absolute;right:10px;bottom:12px;display:flex;flex-direction:column;gap:8px;align-items:center;z-index:3}
.tkz-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:14px;padding:8px 9px;min-width:56px;font-weight:800;font-size:.72rem;cursor:pointer}
.tkz-btn .tkz-ico{font-size:1.35rem;line-height:1}
.tkz-like.tkz-liked{background:rgba(229,72,77,.88)}
.tkz-pop{animation:tkzPop .35s ease}
@keyframes tkzPop{40%{transform:scale(1.25)}}
.tkz-hearts{position:absolute;right:16px;bottom:150px;width:60px;height:60%;pointer-events:none;z-index:2}
.tkz-heart{position:absolute;bottom:0;left:50%;font-size:calc(1.6rem * var(--sz,1));animation:tkzFloat 2.2s ease-out forwards}
@keyframes tkzFloat{0%{transform:translate(-50%,0) scale(.6);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),-260px) scale(1.1);opacity:0}}
.tkz-sharemenu{position:absolute;right:76px;bottom:70px;display:flex;flex-direction:column;gap:6px;background:rgba(10,20,16,.94);padding:8px;border-radius:12px;z-index:4}
.tkz-sharemenu button{background:#17322a;color:#fff;border:0;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;text-align:left}
.tkz-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;padding:8px 14px;border-radius:999px;font-size:.85rem;font-weight:700;max-width:80%;text-align:center;z-index:4}
.tkz-card-media{display:flex;align-items:flex-start;justify-content:space-between}
.tkz-card-brand{display:flex;flex-direction:column;align-items:flex-end;font-weight:900;font-size:1.45rem;letter-spacing:.04em;color:#ffd34d;text-shadow:0 2px 0 #3a1500;line-height:1.1}
.tkz-card-brand b{color:#fff;background:#c8102e;padding:0 6px;border-radius:6px;font-size:.78em;text-shadow:none;margin-left:4px}
.tkz-card-brand small{font-size:.55rem;letter-spacing:.32em;color:#fff;text-shadow:none;margin-top:4px}

/* 38. ZOMA LIVE — partage multi-plateformes */
.tkz-sharemenu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(330px,calc(100% - 90px));right:74px;bottom:12px;max-height:calc(100% - 24px);overflow:auto}
.tkz-sharemenu button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.72rem;text-align:center;padding:8px 4px;color:#fff}
.tkz-sharemenu .tkz-si{font-size:1.15rem;line-height:1;font-weight:900}
.tkz-sharetitle{grid-column:1/-1;color:#fff;font-weight:800;font-size:.8rem;padding:2px 4px}
.tkz-sh-whatsapp{background:#1fa855!important}.tkz-sh-facebook{background:#1877f2!important}.tkz-sh-messenger{background:#7b3cf5!important}.tkz-sh-telegram{background:#229ed9!important}.tkz-sh-x{background:#111!important}.tkz-sh-linkedin{background:#0a66c2!important}.tkz-sh-email{background:#5b6770!important}.tkz-sh-sms{background:#2f855a!important}.tkz-sh-copy{background:#17322a!important}.tkz-sh-native{background:#c8102e!important}

/* 39. ZOMA SHOPPING — carte produit Famandrihana (spectateur) */
.tkz-shop{position:relative;margin:10px 0 4px;background:linear-gradient(180deg,#ffffff,#fff8ea);color:#1b1b1b;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden;border:2px solid #ffd34d}
.tkz-shop.tkz-pop{animation:tkzShopIn .45s ease}
@keyframes tkzShopIn{0%{transform:translateY(12px);opacity:0}100%{transform:none;opacity:1}}
.tkz-shop-flash{display:flex;justify-content:space-between;align-items:center;gap:8px;background:linear-gradient(90deg,#d70f2c,#ff7a00);color:#fff;font-weight:900;font-size:.85rem;letter-spacing:.03em;padding:7px 12px}
.tkz-shop-flash b{font-variant-numeric:tabular-nums;font-size:1rem;margin-left:4px}
.tkz-shop-flash.tkz-urgent{animation:tkzBlink 1s infinite}
.tkz-shop-body{display:flex;gap:10px;align-items:center;padding:10px 12px 4px}
.tkz-shop-img{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:none;background:#f1ece0}
.tkz-shop-info{min-width:0;flex:1}
.tkz-shop-title{font-weight:800;font-size:1rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tkz-shop-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:3px}
.tkz-shop-price b{font-size:1.25rem;font-weight:900;color:#c8102e}
.tkz-shop-price s{color:#8a8a8a;font-size:.9rem}
.tkz-shop-meta{font-size:.8rem;color:#b25a00;font-weight:700;margin-top:2px}
.tkz-shop-actions{display:flex;gap:8px;align-items:stretch;padding:8px 12px}
.tkz-qty{display:flex;align-items:center;border:2px solid #e8dcc0;border-radius:12px;overflow:hidden;flex:none}
.tkz-qty button{background:#fff;border:0;width:38px;height:100%;min-height:44px;font-size:1.3rem;font-weight:800;color:#333;cursor:pointer}
.tkz-qty span{min-width:28px;text-align:center;font-weight:900}
.tkz-reserve{flex:1;min-height:48px;border:0;border-radius:12px;background:linear-gradient(90deg,#c8102e,#ff6a00);color:#fff;font-weight:900;font-size:1.05rem;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 14px rgba(200,16,46,.35)}
.tkz-reserve:disabled{background:#9a9a9a;box-shadow:none;cursor:not-allowed}
.tkz-shop-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:0 12px 10px;font-size:.78rem;color:#666}
.tkz-shop-foot a{color:#0a7a4f;font-weight:800;text-decoration:none}
.tkz-shop-done{display:flex;flex-direction:column;gap:6px;padding:10px 14px 12px;text-align:center;background:#effbf4;border-top:1px solid #cfeedd}
.tkz-done-title{font-weight:900;font-size:1.05rem;color:#0a7a4f}
.tkz-done-text{font-size:.88rem;line-height:1.35}
.tkz-done-pay{font-size:.86rem;font-weight:700;background:#fff4d1;border-radius:10px;padding:7px 9px;white-space:pre-wrap;color:#5a3a00}
.tkz-shop-done button{align-self:center;border:0;border-radius:999px;background:#0a7a4f;color:#fff;font-weight:800;padding:9px 20px;cursor:pointer;margin-top:4px}

/* 40. ZOMA LIVE — économie de données (son seul) et rendez-vous programmés */
.tkz-datachip{position:absolute;left:10px;top:72px;background:rgba(0,0,0,.55);color:#fff;font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:999px;z-index:2}
.tkz-btn.tkz-liked#tkz-data{background:rgba(10,122,79,.9)}
.tkz-datamenu{position:absolute;right:76px;bottom:60px;display:flex;flex-direction:column;gap:6px;background:rgba(10,20,16,.95);padding:8px;border-radius:12px;z-index:4;width:min(250px,70%)}
.tkz-datamenu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#17322a;color:#fff;border:2px solid transparent;border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left}
.tkz-datamenu button small{font-size:.72rem;color:#b9d8cb}
.tkz-datamenu button.tkz-on{border-color:#2ee59d;background:#124e39}
.tkz-datanote{font-size:.72rem;color:#cfe;line-height:1.3}
.tkz-audio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;background:radial-gradient(circle at 50% 40%,#1f6b4f,#06140e 70%);z-index:1}
.tkz-audio-brand{font-weight:900;font-size:1.6rem;letter-spacing:.06em;color:#ffd34d;text-shadow:0 2px 0 #3a1500}
.tkz-audio-brand b{color:#fff;background:#c8102e;padding:0 7px;border-radius:6px;font-size:.8em;text-shadow:none;margin-left:4px}
.tkz-eq{display:flex;gap:5px;align-items:flex-end;height:36px}
.tkz-eq i{display:block;width:7px;height:100%;background:#2ee59d;border-radius:3px;animation:tkzEq 1s ease-in-out infinite;transform-origin:bottom}
.tkz-eq i:nth-child(2){animation-delay:-.2s}.tkz-eq i:nth-child(3){animation-delay:-.45s}.tkz-eq i:nth-child(4){animation-delay:-.7s}.tkz-eq i:nth-child(5){animation-delay:-.1s}
@keyframes tkzEq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.tkz-audio-txt{font-weight:700;font-size:.9rem}
.tkz-audio button{background:#fff;color:#0a3a2a;border:0;border-radius:999px;padding:9px 16px;font-weight:800;cursor:pointer}
.tkz-rdv{display:grid;gap:10px;margin:0 0 14px}
.tkz-rdv-card{background:linear-gradient(135deg,#0f3d2e,#145c43);color:#fff;border-radius:16px;padding:14px;box-shadow:0 8px 22px rgba(0,0,0,.18);border:2px solid #ffd34d}
.tkz-rdv-card.tkz-rdv-live{background:linear-gradient(135deg,#8a0f22,#d0391b);border-color:#fff}
.tkz-rdv-card.tkz-rdv-focus{animation:tkzFocus 1.2s ease 2}
@keyframes tkzFocus{50%{box-shadow:0 0 0 6px rgba(255,211,77,.6)}}
.tkz-rdv-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.74rem;font-weight:900;letter-spacing:.05em;color:#ffd34d}
.tkz-rdv-head b{background:rgba(0,0,0,.28);color:#fff;padding:3px 9px;border-radius:999px;font-size:.78rem;letter-spacing:0;white-space:nowrap}
.tkz-rdv-card h3{margin:8px 0 4px;font-size:1.12rem;line-height:1.25}
.tkz-rdv-date{margin:0;font-weight:700;font-size:.9rem}
.tkz-rdv-desc{margin:4px 0 0;font-size:.85rem;opacity:.9}
.tkz-rdv-actions{display:flex;gap:8px;margin-top:10px}
.tkz-rdv-bell,.tkz-rdv-watch{flex:1;min-height:44px;border:0;border-radius:12px;background:#ffd34d;color:#3a1500;font-weight:900;font-size:.98rem;cursor:pointer}
.tkz-rdv-bell.tkz-on{background:#fff;color:#0a7a4f}
.tkz-rdv-watch{background:#fff;color:#c8102e}
.tkz-rdv-cal{width:46px;min-height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;font-size:1.1rem;cursor:pointer}
.tkz-rdv-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:.78rem;opacity:.95}
.tkz-rdv-msg{color:#ffe38a;font-weight:700}

/* 41. ZOMA LIVE — menus Data et Partager adaptés aux petits écrans */
.tkz-datamenu,.tkz-sharemenu{max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:640px){
 .tkz-datamenu,.tkz-sharemenu{top:8px;bottom:auto;right:68px;left:8px;width:auto;max-height:calc(100% - 16px);padding:6px;gap:4px}
 .tkz-datamenu .tkz-sharetitle,.tkz-sharemenu .tkz-sharetitle{font-size:.72rem;margin:0}
 .tkz-datamenu button{padding:5px 8px;border-width:1px}
 .tkz-datamenu button b{font-size:.82rem}
 .tkz-datamenu button small{font-size:.66rem}
 .tkz-datanote{font-size:.66rem}
 .tkz-sharemenu{display:grid;grid-template-columns:1fr 1fr;align-content:start}
 .tkz-sharemenu .tkz-sharetitle{grid-column:1/-1}
 .tkz-sharemenu button{padding:6px 8px;font-size:.76rem}
 .tkz-side{gap:5px;bottom:8px}
 .tkz-btn{min-width:48px;padding:6px 7px;font-size:.66rem}
 .tkz-btn .tkz-ico{font-size:1.1rem}
}

/* 42. ZOMA LIVE — sondage en direct (Fitsapan-kevitra) */
.tkz-poll{margin:10px 0 4px;background:linear-gradient(160deg,#0f3d2e,#0a2a20);color:#fff;border-radius:16px;padding:12px;border:2px solid #2ee59d;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.tkz-poll.tkz-poll-closed{border-color:#ffd34d}
.tkz-poll.tkz-pop{animation:tkzShopIn .45s ease}
.tkz-poll-head{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;font-weight:900;letter-spacing:.05em;color:#2ee59d}
.tkz-poll-closed .tkz-poll-head{color:#ffd34d}
.tkz-poll-head b{background:rgba(0,0,0,.28);color:#fff;padding:2px 8px;border-radius:999px;letter-spacing:0}
.tkz-poll-q{font-weight:800;font-size:1.05rem;margin:8px 0;line-height:1.3}
.tkz-poll-opts{display:flex;flex-direction:column;gap:7px}
.tkz-poll-opt{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:2px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font-weight:800;font-size:.95rem;text-align:left;cursor:pointer;overflow:hidden}
.tkz-poll-opt:disabled{cursor:default;opacity:1}
.tkz-poll-opt i{position:absolute;left:0;top:0;bottom:0;background:rgba(46,229,157,.32);transition:width .6s ease;pointer-events:none}
.tkz-poll-opt span,.tkz-poll-opt b{position:relative}
.tkz-poll-opt.tkz-mine{border-color:#2ee59d}
.tkz-poll-opt.tkz-win{border-color:#ffd34d}.tkz-poll-opt.tkz-win i{background:rgba(255,211,77,.4)}
.tkz-poll-msg{margin-top:8px;font-size:.8rem;color:#ffe38a;font-weight:700;min-height:1em}

/* 43. ZOMA LIVE — modération : message épinglé */
.tkz-pin{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;padding:9px 12px;border-radius:12px;background:linear-gradient(135deg,#fff4d1,#ffe9a8);color:#3a2800;border-left:4px solid #e5a400;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.tkz-pin b{font-size:1.1rem;line-height:1.2}
.tkz-pin span{display:block;font-size:.72rem;font-weight:800;color:#8a5a00;letter-spacing:.02em}
.tkz-pin p{margin:2px 0 0;font-weight:700;font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}

/* 44. ZOMA LIVE — format portrait 9:16 (v67) */
.tkz-stage.tkz-portrait{aspect-ratio:9/16;width:min(100%,calc(78vh * 9 / 16));margin-left:auto;margin-right:auto}
.tkz-stage.tkz-portrait:fullscreen{width:100%;aspect-ratio:auto;margin:0}