/* =============================================================================
 * odin-formation — feuille de style (theme par defaut + variables surchargeables)
 * Sprint B6-2.
 *
 * Thematisation par app : chaque app surcharge ces variables CSS, soit via
 * Formation.init({ theme:{ accent:'#c8962e' } }), soit dans son propre CSS.
 * Le theme par defaut est sombre, coherent avec la PWA ODIN.
 * ========================================================================== */

:root {
  --fmn-accent:        #c8962e;   /* or Valknut ODIN par defaut */
  --fmn-accent-ink:    #111;      /* texte sur fond accent */
  --fmn-bg:            #16181d;
  --fmn-bg-elevated:   #1f232b;
  --fmn-bg-row:        #232830;
  --fmn-text:          #e8e8ea;
  --fmn-text-muted:    #9aa0ad;
  --fmn-border:        rgba(255, 255, 255, 0.10);
  --fmn-overlay:       rgba(0, 0, 0, 0.66);
  --fmn-radius:        12px;
  --fmn-radius-sm:     8px;
  --fmn-shadow:        0 8px 28px rgba(0, 0, 0, 0.45);
  --fmn-z:             999000;     /* au-dessus de l'app hote */
  --fmn-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fmn-launcher, .fmn-drawer, .fmn-modal, .fmn-bubble, .fmn-hint {
  font-family: var(--fmn-font);
  box-sizing: border-box;
}
.fmn-drawer *, .fmn-modal *, .fmn-bubble *, .fmn-hint * { box-sizing: border-box; }

/* --- Bouton flottant « ? » ------------------------------------------------- */
.fmn-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--fmn-accent);
  color: var(--fmn-accent-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--fmn-shadow);
  z-index: var(--fmn-z);
}
.fmn-launcher:hover { filter: brightness(1.08); }
.fmn-launcher:focus-visible { outline: 2px solid var(--fmn-text); outline-offset: 2px; }

/* --- Backdrop du tiroir ---------------------------------------------------- */
.fmn-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: calc(var(--fmn-z) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* --- Tiroir catalogue ------------------------------------------------------ */
.fmn-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 94vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fmn-bg);
  color: var(--fmn-text);
  box-shadow: var(--fmn-shadow);
  z-index: var(--fmn-z);
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.fmn-drawer.fmn-open { transform: translateX(0); }
.fmn-drawer.fmn-open + .fmn-backdrop,
.fmn-backdrop:has(+ .fmn-drawer.fmn-open) { opacity: 1; pointer-events: auto; }

.fmn-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.fmn-drawer-head h3 { margin: 0; font-size: 17px; }

.fmn-search {
  margin: 0 18px 12px;
  padding: 9px 12px;
  border: 1px solid var(--fmn-border);
  border-radius: var(--fmn-radius-sm);
  background: var(--fmn-bg-elevated);
  color: var(--fmn-text);
  font-size: 13px;
}
.fmn-search:focus { outline: 2px solid var(--fmn-accent); }

.fmn-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 24px;
}
.fmn-empty { color: var(--fmn-text-muted); font-size: 13px; padding: 18px 2px; }

/* --- Carte « recommandation » epinglee ------------------------------------ */
.fmn-reco {
  background: var(--fmn-bg-elevated);
  border: 1px solid var(--fmn-accent);
  border-radius: var(--fmn-radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.fmn-reco-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fmn-accent);
}
.fmn-reco-title { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }

/* --- Bloc cours ------------------------------------------------------------ */
.fmn-course { margin-bottom: 18px; }
.fmn-course-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fmn-course-title { font-size: 14px; font-weight: 600; }
.fmn-course-pct { font-size: 12px; color: var(--fmn-text-muted); }

/* --- Ligne lecon ----------------------------------------------------------- */
.fmn-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--fmn-border);
  border-radius: var(--fmn-radius-sm);
  background: var(--fmn-bg-row);
  color: var(--fmn-text);
  cursor: pointer;
}
.fmn-lesson:hover { border-color: var(--fmn-accent); }
.fmn-lesson:focus-visible { outline: 2px solid var(--fmn-accent); }
.fmn-lesson-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--fmn-text-muted);
}
.fmn-lesson-completed  .fmn-lesson-mark { background: var(--fmn-accent); color: var(--fmn-accent-ink); }
.fmn-lesson-in_progress .fmn-lesson-mark { color: var(--fmn-accent); }
.fmn-lesson-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fmn-lesson-title { font-size: 13px; font-weight: 500; }
.fmn-lesson-meta { font-size: 11px; color: var(--fmn-text-muted); }

/* --- Barre de progression -------------------------------------------------- */
.fmn-progress {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.fmn-progress > span {
  display: block;
  height: 100%;
  background: var(--fmn-accent);
  transition: width 0.25s ease;
}

/* --- Boutons --------------------------------------------------------------- */
.fmn-btn {
  border: 1px solid var(--fmn-border);
  background: var(--fmn-bg-row);
  color: var(--fmn-text);
  border-radius: var(--fmn-radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--fmn-font);
  cursor: pointer;
}
.fmn-btn:hover { border-color: var(--fmn-accent); }
.fmn-btn:focus-visible { outline: 2px solid var(--fmn-accent); }
.fmn-btn-primary {
  background: var(--fmn-accent);
  color: var(--fmn-accent-ink);
  border-color: var(--fmn-accent);
  font-weight: 600;
}
.fmn-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.fmn-btn-ghost { background: transparent; }

.fmn-x {
  border: none;
  background: transparent;
  color: var(--fmn-text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.fmn-x:hover { color: var(--fmn-text); }

/* --- Modale (runner de lecon : article / checklist) ----------------------- */
.fmn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--fmn-overlay);
  z-index: calc(var(--fmn-z) + 5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fmn-modal {
  width: 560px;
  max-width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--fmn-bg);
  color: var(--fmn-text);
  border-radius: var(--fmn-radius);
  box-shadow: var(--fmn-shadow);
  overflow: hidden;
}
.fmn-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--fmn-border);
}
.fmn-modal-head h3 { margin: 0; font-size: 16px; }
.fmn-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--fmn-border);
}

/* --- Contenu article (Markdown rendu) ------------------------------------- */
.fmn-article {
  padding: 16px 18px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
}
.fmn-article h3, .fmn-article h4, .fmn-article h5 { margin: 14px 0 6px; }
.fmn-article p { margin: 8px 0; }
.fmn-article ul { margin: 8px 0; padding-left: 22px; }
.fmn-article li { margin: 3px 0; }
.fmn-article code {
  background: var(--fmn-bg-elevated);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.fmn-article pre {
  background: var(--fmn-bg-elevated);
  padding: 10px 12px;
  border-radius: var(--fmn-radius-sm);
  overflow-x: auto;
}
.fmn-article pre code { background: none; padding: 0; }
.fmn-article a { color: var(--fmn-accent); }

/* --- Checklist ------------------------------------------------------------- */
.fmn-checklist { padding: 8px 18px 4px; overflow-y: auto; }
.fmn-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--fmn-border);
  cursor: pointer;
}
.fmn-check-item:last-child { border-bottom: none; }
.fmn-check-item input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--fmn-accent); }

/* --- Overlay + surbrillance de visite guidee ------------------------------ */
.fmn-tour {
  position: fixed;
  inset: 0;
  z-index: calc(var(--fmn-z) + 10);
  pointer-events: none;          /* l'app hote reste interactive (etapes 'check') */
}
.fmn-spotlight {
  position: fixed;
  border-radius: var(--fmn-radius-sm);
  box-shadow: 0 0 0 9999px var(--fmn-overlay);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/* --- Bulle d'info d'etape -------------------------------------------------- */
.fmn-bubble {
  position: fixed;
  max-width: 320px;
  width: 320px;
  background: var(--fmn-bg-elevated);
  color: var(--fmn-text);
  border-radius: var(--fmn-radius);
  box-shadow: var(--fmn-shadow);
  padding: 14px 16px;
  pointer-events: auto;          /* la bulle, elle, est cliquable */
  z-index: calc(var(--fmn-z) + 11);
}
.fmn-bubble-step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fmn-accent);
}
.fmn-bubble h4 { margin: 4px 0 6px; font-size: 15px; }
.fmn-bubble p  { margin: 0 0 10px; font-size: 13px; color: var(--fmn-text-muted); }
.fmn-bubble-hint { font-style: italic; }
.fmn-bubble-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.fmn-bubble-nav-right { display: flex; gap: 8px; }

/* --- Bulle de nudge contextuel (discrete, non bloquante) ------------------ */
.fmn-hint {
  position: fixed;
  right: 18px;
  bottom: 78px;
  max-width: 280px;
  background: var(--fmn-bg-elevated);
  color: var(--fmn-text);
  border-left: 3px solid var(--fmn-accent);
  border-radius: var(--fmn-radius-sm);
  padding: 12px 14px;
  box-shadow: var(--fmn-shadow);
  z-index: var(--fmn-z);
}
.fmn-hint-title { font-size: 12px; color: var(--fmn-text-muted); }
.fmn-hint-body { font-size: 14px; font-weight: 600; margin: 3px 0 10px; }
.fmn-hint-nav { display: flex; gap: 8px; justify-content: flex-end; }

/* --- Confort lecture clair (si une app surcharge --fmn-bg en clair) -------- */
@media (prefers-reduced-motion: reduce) {
  .fmn-drawer, .fmn-progress > span, .fmn-spotlight, .fmn-backdrop {
    transition: none;
  }
}