/* ════════════════════════════════════════════════════════════
   KWF LESSON DRAWER — Support Pédagogique
   ════════════════════════════════════════════════════════════ */
:root {
  --kwf-teal: #00A79D;
  --kwf-teal-dark: #00867e;
  --kwf-border: #eaecf0;
  --kwf-text: #344054;
  --kwf-text-muted: #667085;
  --kwf-bg-muted: #f8f9fa;
}

.kwf-drawer-layout { display: flex; align-items: flex-start; }
.kwf-drawer-main { flex: 1; min-width: 0; position: relative; }

.kwf-drawer {
  position: relative; width: 320px; min-width: 320px; background: #fff; border-right: 1px solid var(--kwf-border);
  display: flex; flex-direction: column; transition: width 0.25s ease, min-width 0.25s ease, opacity 0.2s ease;
  overflow: hidden; align-self: stretch;
}
.kwf-drawer.kwf-drawer-collapsed { width: 0; min-width: 0; border-right: none; visibility: hidden; }
.kwf-card-floating,
.kwf-card-fullscreen { visibility: visible !important; }
.kwf-drawer-inner { width: 320px; height: 100%; overflow-y: auto; }
.kwf-drawer-header { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--kwf-border); position: sticky; top: 0; background: #fff; z-index: 6; }
.kwf-drawer-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kwf-text-muted); }
.kwf-drawer-collapse-btn { border: none; background: transparent; color: var(--kwf-text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 6px; border-radius: 6px; }
.kwf-drawer-collapse-btn:hover { background: var(--kwf-bg-muted); color: var(--kwf-text); }

.kwf-drawer-reopen {
  display: none; position: fixed; top: 50%; left: 0; transform: translateY(-50%); background: var(--kwf-teal); color: #fff;
  padding: 10px 8px; border-radius: 0 10px 10px 0; cursor: pointer; z-index: 60; font-size: 12px; font-weight: 600;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12); flex-direction: column; align-items: center; gap: 6px;
  writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.03em;
}
.kwf-drawer-collapsed-active .kwf-drawer-reopen { display: flex; }

.kwf-drawer-body { padding: 24px; display: flex; flex-direction: column; gap: 28px; }
.kwf-drawer-section h3 { font-size: 11px; font-weight: 600; color: var(--kwf-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 10px 0; }

/* ---------- Slides — just the embed, no footer/counter/nav buttons ---------- */
.kwf-slides-card { border: 1px solid var(--kwf-border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.kwf-slides-preview { position: relative; height: 200px; background: #1e293b; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kwf-slides-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.kwf-load-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; background: rgba(15, 23, 42, 0.35); }
.kwf-load-overlay .kwf-play-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.15s ease; }
.kwf-slides-preview:hover .kwf-play-btn, .kwf-video-preview:hover .kwf-play-btn { background: var(--kwf-teal); }
.kwf-load-overlay span { font-size: 12px; font-weight: 500; }

/* ---------- Video ---------- */
.kwf-video-card { border: 1px solid var(--kwf-border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.kwf-video-preview { position: relative; aspect-ratio: 16 / 9; background: #f2f4f7 center/cover no-repeat; cursor: pointer; }
.kwf-video-preview iframe, .kwf-video-preview video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.kwf-video-footer { padding: 12px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.kwf-video-title { font-weight: 600; font-size: 13px; color: var(--kwf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwf-video-time { font-size: 11px; color: var(--kwf-text-muted); font-family: monospace; }

/* ---------- Resources (now supports multiple rows) ---------- */
.kwf-resource-item {
  border: 1px solid var(--kwf-border); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px;
  background: #fff; cursor: pointer; transition: border-color 0.15s ease; text-decoration: none; margin-top: 10px;
}
.kwf-resource-item:first-of-type { margin-top: 0; }
.kwf-resource-item:hover { border-color: var(--kwf-teal); }
.kwf-resource-icon { width: 38px; height: 38px; border-radius: 8px; background: #e6fffd; color: var(--kwf-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.kwf-resource-info { flex: 1; min-width: 0; }
.kwf-resource-name { font-size: 13px; font-weight: 500; color: var(--kwf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwf-resource-size { font-size: 11px; color: var(--kwf-text-muted); background: var(--kwf-bg-muted); padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 4px; }
.kwf-resource-download { color: var(--kwf-text-muted); font-size: 16px; }
.kwf-resource-item:hover .kwf-resource-download { color: var(--kwf-teal); }

@media screen and (max-width: 991px) {
  .kwf-drawer {
    position: fixed; top: 0; left: 0; height: 100%; z-index: 90; width: 85%; max-width: 340px; min-width: 0;
    transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15); opacity: 1; border-right: none;
  }
  .kwf-drawer.kwf-drawer-open-mobile { transform: translateX(0); }
  .kwf-drawer-reopen { top: auto; bottom: 20px; border-radius: 8px; padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════════
   HIDE OLD HEADER UI ON LESSON & QUIZ PAGES
   ════════════════════════════════════════════════════════════ */
body.single-sfwd-lessons .ld-breadcrumbs-segments,
body.single-sfwd-quiz .ld-breadcrumbs-segments,
body.single-sfwd-topic .ld-breadcrumbs-segments,

body.single-sfwd-lessons .kwf-drawer-main .lms-header-title,
body.single-sfwd-quiz .kwf-drawer-main .lms-header-title,
body.single-sfwd-topic .kwf-drawer-main .lms-header-title,

body.single-sfwd-lessons .kwf-drawer-main h1.entry-title,
body.single-sfwd-topic .kwf-drawer-main h1.entry-title,

body.single-sfwd-lessons .kwf-drawer-main .bb-course-title,
body.single-sfwd-topic .kwf-drawer-main .bb-course-title,

body.single-sfwd-lessons .lms-lesson-header,
body.single-sfwd-quiz .lms-lesson-header,
body.single-sfwd-topic .lms-lesson-header,

body.single-sfwd-lessons .bb-type-list,
body.single-sfwd-quiz .bb-type-list,
body.single-sfwd-topic .bb-type-list,

body.single-sfwd-lessons .prev-button,
body.single-sfwd-lessons .next-button,
body.single-sfwd-quiz .prev-button,
body.single-sfwd-quiz .next-button,
body.single-sfwd-topic .prev-button,
body.single-sfwd-topic .next-button,

body.single-sfwd-lessons .icons-container,
body.single-sfwd-quiz .icons-container,
body.single-sfwd-topic .icons-container,

body.single-sfwd-lessons .learndash_next_prev_link,
body.single-sfwd-quiz .learndash_next_prev_link,
body.single-sfwd-topic .learndash_next_prev_link {
    display: none !important;
}

.kwf-drawer-main .learndash-wrapper,
.kwf-drawer-main #learndash-content,
.kwf-drawer-main .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   NEW LESSON HEADER (breadcrumb pill + title + progress)
   ════════════════════════════════════════════════════════════ */
.kwf-lesson-header { padding: 24px 24px 0 24px; box-sizing: border-box; }
.kwf-crumb-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--kwf-border); border-radius: 9999px; padding: 8px 16px; font-size: 13px; color: var(--kwf-text-muted); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); margin-bottom: 20px; position: relative; }
.kwf-crumb-pill.kwf-panel-open .kwf-crumb-caret { transform: rotate(180deg); }
.kwf-crumb-sep { font-style: normal; font-size: 11px; color: #d0d5dd; }
.kwf-crumb-dropdown { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
.kwf-crumb-current { font-weight: 600; color: var(--kwf-text); }
.kwf-crumb-caret { font-style: normal; color: var(--kwf-teal); font-size: 11px; }
.kwf-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.kwf-lesson-title { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: #101828; margin: 0; }
.kwf-lesson-progress { text-align: right; flex-shrink: 0; }
.kwf-progress-label { display: block; font-size: 11px; font-weight: 700; color: var(--kwf-teal); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.kwf-progress-track { width: 130px; height: 8px; border-radius: 9999px; background: #e4e7ec; overflow: hidden; }
.kwf-progress-fill { height: 100%; background: var(--kwf-teal); border-radius: 9999px; transition: width 0.3s ease; }

@media screen and (max-width: 767px) {
  .kwf-crumb-pill { max-width: 100%; overflow-x: auto; }
  .kwf-lesson-title { font-size: 20px; }
  .kwf-title-row { align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   MAXIMIZE MAIN CONTENT WIDTH — next to the drawer
   ════════════════════════════════════════════════════════════ */
.kwf-drawer-main #lessonsContent { margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }
.kwf-drawer-main #learndash-content, .kwf-drawer-main .bb-learndash-content-wrap { width: 100% !important; max-width: 100% !important; }

/* Centering the slide embed — text-align:center on the parent +
   display:inline-block on the embed is bulletproof regardless of
   whether Google's own generated wrapper is block or inline-block,
   and stays correct whether the drawer is open or collapsed since
   it's relative to .kwf-drawer-main's own current width. */
.kwf-drawer-main .entry-content,
.kwf-drawer-main .learndash-content-body {
  text-align: center !important;
  max-width: 100% !important;
}
.kwf-drawer-main [class*="ose-google-docs"] {
  display: block !important;
  position: static !important;
  float: none !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  left: auto !important; right: auto !important; top: auto !important;
  text-align: left !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ---------- Content-area loader (shown during AJAX nav) ---------- */
.kwf-content-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.kwf-content-loading .kwf-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--kwf-border);
  border-top-color: var(--kwf-teal);
  border-radius: 50%;
  animation: kwf-content-spin 0.7s linear infinite;
}
@keyframes kwf-content-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   KWF BREADCRUMB MEGA-DROPDOWN
   ════════════════════════════════════════════════════════════ */
.kwf-crumb-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 60; display: none; }
.kwf-crumb-overlay.kwf-panel-open { display: block; }

.kwf-crumb-panel {
  position: absolute; top: 100%; left: 0; margin-top: 8px; width: 900px; max-width: 90vw; max-height: 440px;
  background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); border: 1px solid var(--kwf-border);
  display: none; overflow: hidden; z-index: 70;
}
.kwf-crumb-panel.kwf-panel-open { display: flex; }

.kwf-panel-col { flex: 1; min-width: 0; border-right: 1px solid var(--kwf-border); display: flex; flex-direction: column; }
.kwf-panel-col:last-child { border-right: none; }
.kwf-panel-col-title { padding: 16px 24px; font-size: 11px; font-weight: 700; color: var(--kwf-text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--kwf-border); flex-shrink: 0; }
.kwf-panel-items { overflow-y: auto; padding: 4px 0; }

.kwf-panel-item {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 24px; cursor: pointer; font-size: 14px; font-weight: 500; color: #374151;
  border-left: 4px solid transparent; line-height: 1.35;
}
/* Visible hover — was too close to white before */
.kwf-panel-item:hover { background: #e9edf1; color: #101828; }
.kwf-panel-item.kwf-panel-locked { opacity: 0.5; cursor: not-allowed; }
.kwf-panel-item .kwf-panel-label { flex: 1; min-width: 0; }

/* Active row: same teal treatment across all 3 columns so it reads
   as "you are here" consistently — and still visible/readable on hover */
.kwf-panel-item.kwf-panel-active {
  background: #e6fffd;
  color: var(--kwf-teal);
  border-left-color: var(--kwf-teal);
  font-weight: 700;
}
.kwf-panel-item.kwf-panel-active:hover { background: #d7fbf7; }

.kwf-panel-courses .kwf-panel-item .kwf-panel-arrow { display: none; color: var(--kwf-teal); font-size: 13px; }
.kwf-panel-courses .kwf-panel-item.kwf-panel-active .kwf-panel-arrow { display: inline-block; }

.kwf-panel-lessons .kwf-panel-item .kwf-panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kwf-teal); flex-shrink: 0; display: none; }
.kwf-panel-lessons .kwf-panel-item.kwf-panel-active .kwf-panel-dot { display: block; }
.kwf-panel-lessons .kwf-panel-item .kwf-panel-check { display: none; width: 20px; height: 20px; border-radius: 50%; background: #d1fae5; color: #12b76a; font-size: 11px; align-items: center; justify-content: center; flex-shrink: 0; }
.kwf-panel-lessons .kwf-panel-item.kwf-panel-complete .kwf-panel-check { display: flex; }

.kwf-panel-exercises .kwf-panel-item .kwf-panel-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 700; border: 2px solid #e4e7ec; color: #9ca3af; background: #fff; }
.kwf-panel-exercises .kwf-panel-item.kwf-panel-active .kwf-panel-badge { background: var(--kwf-teal); border-color: var(--kwf-teal); color: #fff; }
.kwf-panel-exercises .kwf-panel-item.kwf-panel-complete .kwf-panel-badge { background: #d1fae5; border-color: #d1fae5; color: #12b76a; }

@media screen and (max-width: 767px) {
  .kwf-crumb-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; max-height: 70vh; margin: 0; border-radius: 16px 16px 0 0; flex-direction: column; }
  .kwf-panel-col { border-right: none; border-bottom: 1px solid var(--kwf-border); max-height: none; }
}

/* ════════════════════════════════════════════════════════════
   DRAWER POLISH — bigger cards, a visible rail, micro-interactions
   ════════════════════════════════════════════════════════════ */

.kwf-drawer, .kwf-drawer-inner { width: 340px; }
.kwf-drawer.kwf-drawer-collapsed { width: 0; min-width: 0; }
.kwf-drawer-body { padding: 24px 28px; gap: 32px; }
.kwf-slides-preview { height: 220px; }
.kwf-drawer-section h3 { font-size: 12px; letter-spacing: 0.05em; }




/* Cards fade/slide in on build, staggered */
.kwf-drawer-section { animation: kwf-card-in 0.35s ease both; }
.kwf-drawer-section:nth-child(1) { animation-delay: 0.03s; }
.kwf-drawer-section:nth-child(2) { animation-delay: 0.09s; }
.kwf-drawer-section:nth-child(3) { animation-delay: 0.15s; }
@keyframes kwf-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover lift */
.kwf-slides-card, .kwf-video-card, .kwf-resource-item { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kwf-slides-card:hover, .kwf-video-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.kwf-resource-item:hover { transform: translateX(3px); }

/* Play button invites the click */
.kwf-load-overlay .kwf-play-btn { animation: kwf-pulse 2s ease-in-out infinite; }
@keyframes kwf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 167, 157, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(0, 167, 157, 0); }
}

/* Reopen tab nudges gently so a collapsed drawer isn't forgotten */
.kwf-drawer-reopen { animation: kwf-nudge 2.4s ease-in-out infinite; }
@keyframes kwf-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(3px); }
}

/* Progress bar: smooth width transitions + subtle shimmer */
.kwf-progress-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.kwf-progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: kwf-shimmer 2s ease-in-out infinite;
}
@keyframes kwf-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Dropdown rows: hover nudges text right, active row transitions in smoothly */
.kwf-panel-item { transition: background 0.15s ease, border-left-color 0.2s ease, padding-left 0.15s ease; }
.kwf-panel-item:hover:not(.kwf-panel-active):not(.kwf-panel-locked) { padding-left: 28px; }
.kwf-crumb-panel.kwf-panel-open { animation: kwf-panel-in 0.2s ease both; }
@keyframes kwf-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.kwf-content-loading .kwf-spinner { border-right-color: rgba(0, 167, 157, 0.3); }

.kwf-panel-item { padding-right: 40px !important; position: relative; }
.kwf-panel-expand {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--kwf-text-muted); font-size: 13px; transition: background 0.15s ease, color 0.15s ease;
}
.kwf-panel-expand:hover { background: #e6fffd; color: var(--kwf-teal); }
.kwf-panel-item.kwf-panel-expand-active .kwf-panel-expand { color: var(--kwf-teal); transform: translateY(-50%) rotate(90deg); }
.kwf-panel-loading { padding: 24px; text-align: center; font-size: 13px; color: var(--kwf-text-muted); }
.kwf-panel-icon { margin-right: 6px; font-size: 12px; opacity: 0.7; }
.kwf-panel-nested { padding-left: 28px; opacity: 0.85; font-size: 0.93em; }
.kwf-drawer-main [class*="ose-google-docs"] {
  height: auto !important;
  max-height: none !important;
}
.kwf-drawer-main [class*="ose-google-docs"] iframe {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 700 / 450 !important;
  margin: 0 !important;
}
body.single-sfwd-lessons .kwf-drawer-main .learndash_content_wrap {
  padding-top: 0 !important;
}
body.single-sfwd-lessons .kwf-drawer-main .learndash-content-body {
  margin-top: 0 !important;
  padding-top: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-sfwd-lessons .lms-topic-sidebar-progress {
  display: none !important;
}
body.single-sfwd-lessons .kwf-drawer-main .learndash-content-body {
  width: 100% !important;
  display: block !important;
}
body.single-sfwd-lessons .kwf-drawer-main [class*="ose-google-docs"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.single-sfwd-lessons .kwf-drawer-main .learndash_content_wrap {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
body.single-sfwd-lessons .kwf-drawer-main .learndash-content-body {
  background: transparent !important;
  box-shadow: none !important;
}
body.single-sfwd-lessons .kwf-drawer-main .learndash-content-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.single-sfwd-lessons #page.site {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}
/* ════════════════════════════════════════════════════════════
   KWF FIX — double scrollbar (html vs #page.site split scroll)
   ════════════════════════════════════════════════════════════ */
body.single-sfwd-lessons #page.site {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}
body.single-sfwd-lessons #learndash-page-content,
body.single-sfwd-quiz #learndash-page-content,
body.single-sfwd-topic #learndash-page-content {
  margin-left: 15px !important;
  padding-left: 85px !important;
}
body.single-sfwd-lessons #learndash-page-content,
body.single-sfwd-quiz #learndash-page-content,
body.single-sfwd-topic #learndash-page-content {
  padding-top: 0 !important;
  margin-top: -12px !important;
}
/* ════════════════════════════════════════════════════════════
   KWF RESOURCES — redesigned cards
   ════════════════════════════════════════════════════════════ */
.kwf-resource-item {
  position: relative;
  border: none;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  cursor: pointer;
  text-decoration: none;
  margin-top: 12px;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.kwf-resource-item:first-of-type { margin-top: 0; }

.kwf-resource-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--kwf-teal) 0%, #00d4c4 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
}
.kwf-resource-item:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 24px rgba(0, 167, 157, 0.18), 0 4px 8px rgba(16, 24, 40, 0.06);
}
.kwf-resource-item:hover::before { opacity: 0.04; }

.kwf-resource-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00A79D 0%, #00d4c4 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(0, 167, 157, 0.3);
  transition: transform 0.25s ease;
}
.kwf-resource-item:hover .kwf-resource-icon { transform: rotate(-6deg) scale(1.08); }

/* Per-file-type color coding via data attribute or class you can add server-side;
   falls back to teal gradient above if not matched */
.kwf-resource-item[data-ext="PDF"] .kwf-resource-icon { background: linear-gradient(135deg, #f04438 0%, #ff8a75 100%); box-shadow: 0 4px 10px rgba(240, 68, 56, 0.3); }
.kwf-resource-item[data-ext="DOC"] .kwf-resource-icon,
.kwf-resource-item[data-ext="DOCX"] .kwf-resource-icon { background: linear-gradient(135deg, #2970ff 0%, #66a3ff 100%); box-shadow: 0 4px 10px rgba(41, 112, 255, 0.3); }
.kwf-resource-item[data-ext="ZIP"] .kwf-resource-icon { background: linear-gradient(135deg, #f79009 0%, #ffc069 100%); box-shadow: 0 4px 10px rgba(247, 144, 9, 0.3); }
.kwf-resource-item[data-ext="TXT"] .kwf-resource-icon { background: linear-gradient(135deg, #667085 0%, #98a2b3 100%); box-shadow: 0 4px 10px rgba(102, 112, 133, 0.3); }

.kwf-resource-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.kwf-resource-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1d2939;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kwf-resource-size {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #00867e;
  background: #e6fffd;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 5px;
}

.kwf-resource-download {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kwf-teal);
  background: #f0fdfb;
  font-size: 15px;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.kwf-resource-item:hover .kwf-resource-download {
  background: var(--kwf-teal);
  color: #fff;
  transform: translateY(2px);
}
/* ════════════════════════════════════════════════════════════
   KWF DRAWER REOPEN — v2, bigger + clearer
   ════════════════════════════════════════════════════════════ */
.kwf-drawer-reopen {
  writing-mode: initial;
  text-orientation: initial;
  letter-spacing: normal;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 64px;
  height: 130px;
  padding: 16px 0;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(160deg, #00c9b8 0%, #00A79D 50%, #00756e 100%);
  box-shadow: 4px 0 20px rgba(0, 134, 126, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: width 0.25s ease, box-shadow 0.25s ease;
}

.kwf-drawer-reopen-icon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}
.kwf-drawer-reopen-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kwf-drawer-reopen span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.kwf-drawer-reopen:hover {
  width: 72px;
  box-shadow: 6px 0 28px rgba(0, 134, 126, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.kwf-drawer-reopen:hover .kwf-drawer-reopen-icon {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.28);
}
.kwf-drawer-reopen:active { transform: scale(0.97); }
.kwf-resource-download svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Slides control bar — tighten so it stays on one line without widening the drawer */
.kwf-slides-card iframe {
  font-size: 13px;
}
@media screen and (min-width: 992px) {
  .kwf-drawer, .kwf-drawer-inner {
    width: 360px;
  }
}
.kwf-drawer.kwf-drawer-collapsed { width: 0; min-width: 0; }
/* ════════════════════════════════════════════════════════════
   KWF STEP NAV — lesson exercise/quiz progress, real data
   ════════════════════════════════════════════════════════════ */
.kwf-step-nav {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  padding: 4px 2px;
}
.kwf-step-nav .kwf-step {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}
.kwf-step-nav .kwf-step:last-child { flex: 0 0 auto; }

.kwf-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  z-index: 1;
  transition: transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.kwf-step-circle:hover { transform: scale(1.12); }

.kwf-step-circle.kwf-step-complete {
  background: #22c55e;
  color: #fff;
}
.kwf-step-circle.kwf-step-complete svg {
  width: 14px; height: 14px; fill: none; stroke: #fff;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

.kwf-step-circle.kwf-step-current {
  width: 38px;
  height: 38px;
  background: var(--kwf-teal);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--kwf-teal), 0 4px 10px rgba(0, 167, 157, 0.35);
}

.kwf-step-circle.kwf-step-future {
  background: #fff;
  color: var(--kwf-text-muted);
  border: 2px solid var(--kwf-border);
}

.kwf-step-line {
  height: 3px;
  flex: 1;
  background: var(--kwf-border);
  margin: 0 -1px;
}
.kwf-step-line.kwf-step-line-complete { background: #22c55e; }

.kwf-step-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1d2939;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
  margin-bottom: 8px;
  pointer-events: none;
  z-index: 5;
}
.kwf-step:hover .kwf-step-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
.kwf-lesson-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.kwf-mini-progress-track {
  width: 130px;
  height: 8px;
  border-radius: 9999px;
  background: #e4e7ec;
  overflow: hidden;
}
.kwf-mini-progress-fill {
  height: 100%;
  background: var(--kwf-teal);
  border-radius: 9999px;
  transition: width 0.4s ease;
}
/* ════════════════════════════════════════════════════════════
   KWF CINEMATIC PLAY BUTTON
   ════════════════════════════════════════════════════════════ */
.kwf-load-overlay {
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.15) 0%, rgba(6,10,20,0.7) 100%) !important;
  overflow: hidden;
}

/* diagonal light sweep, like a lens catching a glint */
.kwf-load-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.09) 50%, transparent 58%);
  background-size: 260% 260%;
  animation: kwf-cine-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes kwf-cine-sweep {
  0%   { background-position: 220% 0%; }
  100% { background-position: -60% 0%; }
}

/* letterbox bars — slide in on hover, film-mode feel */
.kwf-cine-bar {
  position: absolute; left: 0; right: 0; height: 0;
  background: linear-gradient(#000, rgba(0,0,0,0.85));
  transition: height 0.4s cubic-bezier(.4,0,.2,1);
  z-index: 1;
  pointer-events: none;
}
.kwf-cine-bar-top { top: 0; }
.kwf-cine-bar-bottom { bottom: 0; }
.kwf-slides-preview:hover .kwf-cine-bar,
.kwf-video-preview:hover .kwf-cine-bar { height: 16px; }

/* the whole cluster: rings + spinning arc + glass button */
.kwf-play-cinema {
  position: relative;
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

/* sonar pulse — two rings offset in time */
.kwf-play-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 212, 196, 0.9);
  opacity: 0;
  animation: kwf-sonar 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
.kwf-play-ring-2 { animation-delay: 1.2s; }
@keyframes kwf-sonar {
  0%   { transform: scale(0.55); opacity: 0.75; }
  70%  { opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* slow rotating teal arc, like a loading halo */
.kwf-play-spin {
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--kwf-teal) 65deg, transparent 130deg, transparent 360deg);
  animation: kwf-spin-ring 3s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0.9;
}
@keyframes kwf-spin-ring { to { transform: rotate(360deg); } }

/* glass button itself — overrides old kwf-pulse animation */
.kwf-load-overlay .kwf-play-btn {
  position: relative;
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.25s ease, box-shadow 0.25s ease;
  animation: none !important;
  font-size: 0; /* kill leftover ▶ character sizing if it ever falls back */
}
.kwf-load-overlay .kwf-play-btn svg {
  width: 20px; height: 20px;
  fill: #fff;
  margin-left: 2px; /* optical centering — triangles look off-center otherwise */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: fill 0.25s ease;
}
.kwf-slides-preview:hover .kwf-play-btn,
.kwf-video-preview:hover .kwf-play-btn {
  background: var(--kwf-teal) !important;
  transform: scale(1.14);
  box-shadow: 0 10px 30px rgba(0,167,157,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.kwf-slides-preview:active .kwf-play-btn,
.kwf-video-preview:active .kwf-play-btn { transform: scale(0.92); }

/* label — subtle uppercase, tracks out on hover */
.kwf-load-overlay .kwf-play-label,
.kwf-load-overlay span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  opacity: 0.85;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
  position: relative;
  z-index: 2;
}
.kwf-slides-preview:hover .kwf-play-label,
.kwf-video-preview:hover .kwf-play-label {
  opacity: 1;
  letter-spacing: 0.13em;
}

.kwf-panel-items::-webkit-scrollbar { width: 6px; }
.kwf-panel-items::-webkit-scrollbar-track { background: transparent; }
.kwf-panel-items::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 10px; }
.kwf-panel-items::-webkit-scrollbar-thumb:hover { background: var(--kwf-teal); }
.kwf-panel-items { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
.kwf-panel-loading { display: flex; align-items: center; justify-content: center; }
.kwf-panel-loading .kwf-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--kwf-border);
  border-top-color: var(--kwf-teal);
  border-radius: 50%;
  animation: kwf-content-spin 0.7s linear infinite;
}

/* ── KWF RETOUR BUTTON — own row-slot, sits beside crumb-pill ── */
.kwf-lesson-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}
.kwf-lesson-nav-row .kwf-crumb-pill { margin-bottom: 0; }

body.single-sfwd-lessons .kwf-retour-btn,
body.single-sfwd-quiz .kwf-retour-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kwf-retour-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}


.kwf-retour-popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 6px;
  flex-direction: column;
  min-width: 140px;
  z-index: 75;
}
.kwf-retour-popover.kwf-retour-pop-open { display: flex; }
.kwf-retour-popover.kwf-retour-pop-open { display: flex; }
.kwf-retour-pop-btn {
  display: block;
  text-decoration: none;
  text-align: center;
  background: #F7941D;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kwf-retour-pop-btn:hover { background: #e07f0a; transform: translateY(-1px); }

@media screen and (max-width: 767px) {
  .kwf-lesson-nav-row { flex-wrap: wrap; }
}
.kwf-lesson-nav-row .course-nav-wrapper.kwf-retour-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: auto !important;
}

.kwf-lesson-nav-row .course-nav-toggle {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.kwf-script-preview {
  height: 340px;
}
@media screen and (min-width: 992px) {
  .kwf-drawer {
    align-self: flex-start !important;
    position: sticky;
    top: 130px;                        /* match your sticky-header offset (120px + margin) */
    max-height: calc(100vh - 150px);   /* tune visually */
  }
  .kwf-drawer-inner {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
}

/* Slides — indigo/blue, reads as "document/presentation" */
.kwf-load-overlay-slides {
  background: radial-gradient(ellipse at center, rgba(30,41,99,0.25) 0%, rgba(15,20,50,0.75) 100%) !important;
}
.kwf-load-overlay-slides .kwf-play-ring { border-color: rgba(99, 132, 255, 0.9); }
.kwf-load-overlay-slides .kwf-play-spin {
  background: conic-gradient(from 0deg, transparent 0deg, #6384ff 65deg, transparent 130deg, transparent 360deg);
}
.kwf-slides-preview:hover .kwf-load-overlay-slides .kwf-play-btn { background: #4f63d1 !important; }

/* Script — amber/orange, visually distinct from both slides and video */
.kwf-load-overlay-script {
  background: radial-gradient(ellipse at center, rgba(120,72,10,0.25) 0%, rgba(50,30,5,0.75) 100%) !important;
}
.kwf-load-overlay-script .kwf-play-ring { border-color: rgba(247, 148, 29, 0.9); }
.kwf-load-overlay-script .kwf-play-spin {
  background: conic-gradient(from 0deg, transparent 0deg, #F7941D 65deg, transparent 130deg, transparent 360deg);
}
.kwf-script-preview:hover .kwf-load-overlay-script .kwf-play-btn { background: #d97c0f !important; }
body.single-sfwd-lessons .kwf-drawer-main [class*="ose-google-docs"],
body.single-sfwd-quiz .kwf-drawer-main [class*="ose-google-docs"] {
  display: none !important;
}
/* ── Reduce gap between "Contenu du Lesson" heading and exercise list ── */
.kwf-drawer-main .ld-table-list-header {
  margin-bottom: 8px !important;
}

/* ── Hide "Lessons" link in the Retour popover, keep "Cours" ── */
.course-nav-wrapper .lessons-link {
  display: none !important;
}
/* ── Kill the leftover vertical gap in the main lesson content
   (was space reserved around the tabs/course_content wrapper —
   became visible once the redundant Google Slides embed was hidden) ── */
.kwf-drawer-main .ld-tabs,
.kwf-drawer-main .ld-tabs-content,
.kwf-drawer-main .ld-tab-content,
.kwf-drawer-main .learndash-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
/* Undo LearnDash's built-in -80px margin-top on quiz content —
   it was designed for LearnDash's original header layout and now
   pulls the quiz box above our custom .learndash_content_wrap box */
body.single-sfwd-quiz .kwf-drawer-main .wpProQuiz_content {
  margin-top: 0 !important;
}
@media screen and (min-width: 992px) {
  .kwf-drawer {
    align-self: flex-start !important;
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
  }
  .kwf-drawer-inner {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
  }
}

body.single-sfwd-lessons #page.site,
body.single-sfwd-quiz #page.site,
body.single-sfwd-topic #page.site {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}
.kwf-drawer-main .learndash-content-body {
  flex-grow: 1 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.kwf-cours-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--kwf-border);
  color: var(--kwf-text);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px 6px 6px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.kwf-cours-btn:hover {
  border-color: var(--kwf-teal);
  box-shadow: 0 4px 12px rgba(0, 167, 157, 0.15);
  transform: translateY(-1px);
  color: var(--kwf-teal);
}
.kwf-cours-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00A79D 0%, #00d4c4 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.kwf-cours-btn:hover .kwf-cours-icon { transform: scale(1.08) rotate(-4deg); }
.kwf-cours-icon svg { width: 15px; height: 15px; }
.kwf-drawer-inner {
  scrollbar-width: auto;
  scrollbar-color: #00A79D #f1f5f9;
}
.kwf-drawer-inner::-webkit-scrollbar {
  width: 10px;
  -webkit-appearance: none;
}
.kwf-drawer-inner::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 20px;
}
.kwf-drawer-inner::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d4c4, #00A79D);
  border-radius: 20px;
  border: 2px solid #f1f5f9;
  background-clip: padding-box;
  min-height: 40px;
}
.kwf-drawer-inner::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00A79D, #00867e);
  background-clip: padding-box;
}
.kwf-cours-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: #fff;
  color: var(--kwf-text);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 18px 5px 5px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--kwf-border);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}

/* diagonal shine sweep on hover */
.kwf-cours-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(0,167,157,0.12) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 200% 0%;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.kwf-cours-btn:hover::before { background-position: -60% 0%; }

.kwf-cours-btn:hover {
  box-shadow: 0 8px 20px rgba(0, 167, 157, 0.22), 0 0 0 1px rgba(0,167,157,0.3);
  transform: translateY(-2px);
}
.kwf-cours-btn:active { transform: translateY(0) scale(0.97); }

.kwf-cours-orb {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4c4 0%, #00A79D 60%, #00756e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 167, 157, 0.35);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.kwf-cours-btn:hover .kwf-cours-orb { transform: rotate(-8deg) scale(1.1); }
.kwf-cours-orb svg { width: 15px; height: 15px; position: relative; z-index: 1; }
.kwf-cours-btn,
.kwf-cours-btn:link,
.kwf-cours-btn:visited,
.kwf-cours-btn:active,
.kwf-cours-btn:focus {
  background: #fff !important;
  color: var(--kwf-text) !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}
.kwf-cours-btn:hover {
  color: var(--kwf-teal-dark) !important;
}

/* sonar pulse ring, subtle, only animates on hover */
.kwf-cours-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 167, 157, 0.6);
  opacity: 0;
}
.kwf-cours-btn:hover .kwf-cours-ring {
  animation: kwf-cours-sonar 1.1s ease-out infinite;
}
@keyframes kwf-cours-sonar {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.kwf-cours-text {
  background: linear-gradient(90deg, var(--kwf-text), var(--kwf-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: color 0.2s ease;
}
.kwf-cours-btn:hover .kwf-cours-text { color: var(--kwf-teal-dark); }
/* ════════════════════════════════════════════════════════════
   FIX 1 — step-nav "complete" state uses the app's own teal
   instead of a generic green.
   ════════════════════════════════════════════════════════════ */
.kwf-step-circle.kwf-step-complete { background: var(--kwf-teal) !important; }
.kwf-step-line.kwf-step-line-complete { background: var(--kwf-teal) !important; }


/* ════════════════════════════════════════════════════════════
   KWF FLOATING CARD STAGE — Diapo / Vidéo / Script (v4)
   ════════════════════════════════════════════════════════════ */
#kwf-card-stage{ position:fixed; inset:0; pointer-events:none; z-index:2147483647; isolation:isolate; }

.kwf-card-lifted{
  position:fixed !important; margin:0 !important;
  display:flex; flex-direction:column; box-sizing:border-box;
  pointer-events:auto; overflow:hidden;
  transition:opacity .18s ease;
}
.kwf-card-lifted > [class*="-card"]{ flex:1; min-height:0; display:flex; flex-direction:column; }
.kwf-card-lifted .kwf-slides-preview,
.kwf-card-lifted .kwf-video-preview,
.kwf-card-lifted .kwf-script-preview{ flex:1; height:auto !important; min-height:0; }

.kwf-card-inline{ position: relative; border-radius: 12px; }

.kwf-card-floating{
  z-index:500; border-radius:18px; background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 26px 60px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.14);
  animation:kwf-float-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.kwf-card-floating.kwf-card-dragging,
.kwf-card-floating.kwf-card-resizing{ transition:none !important; box-shadow:0 34px 70px rgba(0,0,0,.35); }
.kwf-card-floating.kwf-card-snapping{ transition:left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1), width .3s ease, height .3s ease, opacity .2s ease; }
@keyframes kwf-float-pop{ from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} }
.kwf-card-floating > h3{ display:none; }

.kwf-float-head{
  display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--kwf-teal) 0%, var(--kwf-teal-dark) 100%);
  cursor:grab; user-select:none; touch-action:none;
}
.kwf-float-head:active{ cursor:grabbing; }
.kwf-float-grip{ display:grid; grid-template-columns:repeat(2,5px); gap:3px; }
.kwf-float-grip span{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.6); }
.kwf-float-title{ flex:1; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; }

/* toolbar — hover-only reveal, tooltip per button */
.kwf-card-toolbar{
  position:absolute; top:8px; right:8px; z-index:8; display:flex; gap:6px;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.kwf-card-inline:hover .kwf-card-toolbar,
.kwf-card-floating:hover .kwf-card-toolbar,
.kwf-card-floating.kwf-card-dragging .kwf-card-toolbar,
.kwf-card-fullscreen:hover .kwf-card-toolbar{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.kwf-card-floating .kwf-card-toolbar{ position:static; top:auto; right:auto; }

.kwf-card-btn{
  position:relative;
  width:28px; height:28px; border-radius:8px; border:none; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.85);
  color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background .16s ease, transform .16s ease;
}
.kwf-card-floating .kwf-card-btn{ background:rgba(30,35,50,.55); }
.kwf-icon-glyph {
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-style: normal !important;
  font-family: -apple-system, "Segoe UI Symbol", "Segoe UI", Arial, sans-serif !important;
  pointer-events: none !important;
}
.kwf-icon-glyph-sm { font-size: 12px !important; }
.kwf-card-btn:hover{ background:var(--kwf-teal); transform:scale(1.1); }
.kwf-card-btn:active{ transform:scale(.92); }

.kwf-card-btn[data-tip]::after{
  content:attr(data-tip);
  position:absolute; top:50%; right:calc(100% + 8px); transform:translateY(-50%);
  background:#1d2939; color:#fff; font-size:11px; font-weight:600;
  padding:5px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.kwf-card-btn[data-tip]:hover::after{ opacity:1; }

.kwf-card-resize{
  position:absolute; right:4px; bottom:4px; z-index:8;
  width:22px; height:22px; border-radius:7px; cursor:nwse-resize; touch-action:none;
  display:flex; align-items:flex-end; justify-content:flex-end; padding:3px;
  background:rgba(15,23,42,.65);
  color:#fff; opacity:0; pointer-events:none; transition:opacity .15s ease, background .15s ease, transform .15s ease;
}
.kwf-card-floating:hover .kwf-card-resize,
.kwf-card-floating.kwf-card-resizing .kwf-card-resize{ opacity:.85; pointer-events:auto; }
.kwf-card-inline .kwf-card-resize{ opacity:0 !important; pointer-events:none !important; }
.kwf-card-resize:hover{ opacity:1; background:var(--kwf-teal); transform:scale(1.08); }
.kwf-card-resize svg{ width:12px; height:12px; }
.kwf-card-docked .kwf-card-resize{ cursor:ns-resize; }

.kwf-card-slot{ position:relative; border-radius:14px; }
.kwf-card-slot.kwf-slot-docked{ opacity:0; pointer-events:none; }
.kwf-card-slot.kwf-slot-floating{
  border:1.5px dashed #c7d2da; overflow:hidden;
  background:linear-gradient(135deg, rgba(0,167,157,.07), rgba(0,167,157,.02));
  backdrop-filter:blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px; text-align:center; animation:kwf-slot-in .25s ease both;
}
@keyframes kwf-slot-in{ from{opacity:0; transform:scale(.95);} to{opacity:1; transform:scale(1);} }
.kwf-card-slot.kwf-slot-magnet{
  border-color:var(--kwf-teal); border-style:solid;
  box-shadow:0 0 0 6px rgba(0,167,157,.12), 0 0 32px rgba(0,167,157,.24);
}
.kwf-slot-ring{
  position:relative; width:42px; height:42px; border-radius:50%;
  background:#fff; border:2px solid #dbe2e8; color:var(--kwf-teal);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, border-color .2s ease;
}
.kwf-slot-ring svg{ width:18px; height:18px; }
.kwf-card-slot.kwf-slot-magnet .kwf-slot-ring{ transform:scale(1.15); border-color:var(--kwf-teal); }
.kwf-card-slot.kwf-slot-dragging .kwf-slot-ring::after{
  content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(0,167,157,.35);
  animation:kwf-magnet-pulse 1.5s ease-out infinite;
}
@keyframes kwf-magnet-pulse{ 0%{transform:scale(.8); opacity:.85;} 100%{transform:scale(2); opacity:0;} }
.kwf-slot-label{ font-size:11.5px; font-weight:700; color:var(--kwf-text); }
.kwf-slot-sub{ font-size:10.5px; color:var(--kwf-text-muted); }
.kwf-slot-return{
  border:none; background:var(--kwf-teal); color:#fff; font-size:11px; font-weight:700;
  padding:6px 14px; border-radius:9999px; cursor:pointer; box-shadow:0 4px 12px rgba(0,167,157,.3);
  transition:background .15s ease, transform .15s ease;
}
.kwf-slot-return:hover{ background:var(--kwf-teal-dark); transform:translateY(-1px); }

/* fullscreen — backdrop lives INSIDE the stage so it shares the
   card's stacking context; a backdrop on <body> could out-rank
   a "fullscreen" card nested in a lower-z-index stage regardless
   of the card's own z-index. */
/* Solid dark overlay, no backdrop-filter — avoids Safari's known
   stacking bugs where a blurred fixed element can paint over fixed
   siblings that are supposed to be above it. Lives directly on
   <body>, z-index kept well below #kwf-card-stage's 999500 so the
   whole stage (and the fullscreen card inside it) always wins. */
.kwf-fullscreen-backdrop{
  position:fixed; inset:0; background:rgba(10,14,26,.72);
  z-index:2147483646; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.kwf-fullscreen-backdrop.kwf-backdrop-visible{ opacity:1; pointer-events:auto; }

.kwf-card-fullscreen{
  left:24px !important; top:24px !important;
  width:calc(100vw - 48px) !important; height:calc(100vh - 48px) !important;
  border-radius:16px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.5) !important;
  pointer-events:auto !important;
  z-index: 999999 !important;
  transition:left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1),
             width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1) !important;
}
.kwf-card-fullscreen .kwf-card-toolbar,
.kwf-card-fullscreen .kwf-card-resize{
  opacity:1 !important; transform:none !important; pointer-events:auto !important;
}

@media screen and (max-width:767px){
  .kwf-card-floating{ max-width:90vw; }
  .kwf-card-fullscreen{ left:10px !important; top:10px !important; width:calc(100vw - 20px) !important; height:calc(100vh - 20px) !important; }
}
/* Fix stacking : sticky crée son propre contexte, sans z-index il perd
   contre .kwf-drawer-main (ordre DOM). On élève seulement pendant
   qu'une carte est détachée/fullscreen. */
.kwf-drawer.kwf-drawer-elevated {
  z-index: 2147483647;
}
#kwf-design-loader {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease;
}

#kwf-design-loader.kwf-design-loader-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kwf-design-loader-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #ddd;
  border-top-color: #04a49c;
  border-radius: 50%;
  animation: kwfDesignSpin .8s linear infinite;
}

@keyframes kwfDesignSpin {
  to {
    transform: rotate(360deg);
  }
}