/* Cloche de notifications (en-tete) */
.tk-notif { position: relative; display: flex; align-items: center; }
.tk-notif__btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.tk-notif__btn svg { width: 24px; height: 24px; }
.tk-notif__count { position: absolute; top: -2px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #ff3b30; color: #fff; font: 700 10px/15px var(--tk-font, sans-serif); text-align: center; box-sizing: border-box; }
.tk-notif__count[hidden] { display: none; }
.tk-notif__panel {
  position: absolute; z-index: 400; top: calc(100% + 14px); right: -40px; width: 360px; max-width: calc(100vw - 24px); max-height: min(70vh, 520px); overflow: auto;
  background: #fff; color: #111; border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22); text-align: left; font-family: var(--tk-font, sans-serif);
}
.tk-notif__panel[hidden] { display: none; }
.tk-notif__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ececec; font: 600 1rem/1 var(--tk-font, sans-serif); }
.tk-notif__head button { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #111; }
.tk-notif__item { padding: 18px 20px; border-bottom: 1px solid #f0f0f0; }
.tk-notif__item:last-child { border-bottom: 0; }
.tk-notif__item.is-new { background: #faf8f4; }
.tk-notif__item h3 { margin: 0 0 6px; font: 600 0.9375rem/1.3 var(--tk-font, sans-serif); color: #111; }
.tk-notif__item p { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.45; color: #444; }
.tk-notif__cta { display: inline-block; padding: 0.7rem 1.1rem; border-radius: 6px; background: #111; color: #fff !important; font-size: 0.8125rem; text-decoration: none; }
@media (max-width: 999px) {
  .tk-notif { position: static; }
  .tk-notif__panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; max-width: none; }
}
.tk-fav__panel { width: 320px; }
.tk-fav .tk-notif__item h3 { margin: 12px 0 8px; }
.tk-fav .tk-notif__item p { color: #333; }
.tk-fav__sp { margin-top: 18px !important; }
.tk-notif__cta--line { background: #fff; color: #111 !important; border: 1px solid #111; }

.tk-fav__hint { margin: 10px 0 0; font-size: 0.75rem; line-height: 1.45; color: #777; }