/* =========================================================
   ChouettIA — Formation Claude (index à vignettes + lecteur)
   ========================================================= */

/* ---------- Index : grille de vignettes ---------- */
.fc-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-bottom: var(--space-7);
}
.fc-filter {
  border: 1px solid var(--c-line); background: var(--c-bg);
  color: var(--c-text-muted); font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: var(--r-pill); cursor: pointer;
  transition: all 0.15s ease;
}
.fc-filter:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
.fc-filter.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.fc-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fc-card {
  display: flex; flex-direction: column; background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fc-card:hover, .fc-card:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-accent);
}
.fc-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--c-bg-tint); }
.fc-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(15, 27, 61, 0.32); opacity: 0; transition: opacity 0.18s ease;
}
.fc-card:hover .fc-card__play, .fc-card:focus-visible .fc-card__play { opacity: 1; }
.fc-card__play span {
  width: 54px; height: 54px; border-radius: 50%; background: var(--c-accent);
  display: grid; place-items: center; box-shadow: var(--shadow-glow);
}
.fc-card__video {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--c-accent); color: #fff; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.fc-card__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.fc-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.fc-card__num { color: var(--c-accent-dark); }
.fc-tag { padding: 0.15rem 0.6rem; border-radius: var(--r-pill); font-size: 0.7rem; letter-spacing: 0.03em; }
.fc-tag--decouvrir { background: #DBEAFE; color: #1E40AF; }
.fc-tag--decrypter { background: #FEE2E2; color: #991B1B; }
.fc-tag--regler    { background: #FEF3C7; color: #92400E; }
.fc-tag--utiliser  { background: #DCFCE7; color: #166534; }
.fc-card__title { font-size: 1.02rem; line-height: 1.35; margin: 0; }
.fc-card__desc { font-size: 0.88rem; color: var(--c-text-muted); margin: 0; flex: 1; }
.fc-card__foot { display: flex; align-items: center; gap: var(--space-3); font-size: 0.8rem; color: var(--c-text-muted); border-top: 1px solid var(--c-line); padding-top: var(--space-3); }
.fc-card__foot strong { color: var(--c-accent-dark); font-weight: 600; }

/* ---------- Carte formation mise en avant (zone de téléchargement) ---------- */
.download-card--wide {
  border: 1px solid var(--c-accent); background: linear-gradient(180deg, var(--c-accent-soft), var(--c-bg) 70%);
  border-radius: var(--r-lg); padding: var(--space-5); margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}
.download-card--wide h3 { margin: var(--space-2) 0 var(--space-3); }
.download-card--wide p { max-width: 70ch; }
.fc-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* ---------- Lecteur de slides ---------- */
.fc-player { max-width: 1000px; margin: 0 auto; }
.fc-stage {
  position: relative; aspect-ratio: 16 / 9; background: var(--c-ink);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.fc-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--c-ink);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: background 0.15s ease, opacity 0.15s ease;
}
.fc-nav:hover { background: #fff; }
.fc-nav[disabled] { opacity: 0.25; cursor: default; }
.fc-nav--prev { left: 12px; }
.fc-nav--next { right: 12px; }
.fc-stage__label {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(15, 27, 61, 0.82); color: #fff;
  font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: var(--r-pill);
}
.fc-stage__full {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(15, 27, 61, 0.82); color: #fff; border: none; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 0.4rem;
}
.fc-thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  gap: var(--space-2); margin-top: var(--space-4); overflow-x: auto; padding-bottom: 4px;
}
.fc-thumb {
  border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden;
  padding: 0; cursor: pointer; background: none; line-height: 0;
}
.fc-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.fc-thumb.is-active { border-color: var(--c-accent); }
.fc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); justify-content: center; }

/* ---------- Emplacement vidéo (à venir) ---------- */
.fc-video {
  max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9;
  border: 2px dashed var(--c-line); border-radius: var(--r-lg);
  display: grid; place-items: center; text-align: center; padding: var(--space-5);
  background: var(--c-bg-soft);
}
.fc-video__inner span { font-size: 2rem; }
.fc-video__inner p { color: var(--c-text-muted); margin: var(--space-2) 0 0; }

/* ---------- Lecteur vidéo ---------- */
.fc-videoplayer {
  display: block; width: 100%; max-width: 1000px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000;
  box-shadow: var(--shadow-lg);
}

/* ---------- Fiche mémo / prompt ---------- */
.fc-prompt {
  background: var(--c-ink); color: var(--c-text-on-dark); border-radius: var(--r-lg);
  padding: var(--space-5); max-width: 1000px; margin: 0 auto;
}
.fc-prompt h3 { color: #fff; margin: 0 0 var(--space-3); font-size: 1rem; }
.fc-prompt code {
  display: block; white-space: pre-wrap; font-size: 0.92rem; line-height: 1.55;
  background: rgba(255, 255, 255, 0.06); padding: var(--space-4);
  border-radius: var(--r-md); border-left: 3px solid var(--c-accent);
}
.fc-prompt__copy { margin-top: var(--space-4); }

/* ---------- Liste « À retenir » ---------- */
.fc-memo {
  max-width: 1000px; margin: 0 auto; list-style: none; padding: 0;
  display: grid; gap: var(--space-3);
}
.fc-memo li {
  background: var(--c-bg-tint); border-radius: var(--r-md);
  padding: 0.85rem 1.1rem 0.85rem 2.4rem; position: relative; font-size: 0.95rem;
}
.fc-memo li::before {
  content: "▪"; position: absolute; left: 1.1rem; color: var(--c-accent-dark); font-weight: 700;
}

/* ---------- Sommaire du module ---------- */
.fc-toc { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fc-toc button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 0.7rem 1rem; cursor: pointer; font: inherit; font-size: 0.9rem; color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fc-toc button:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.fc-toc b { color: var(--c-accent-dark); font-variant-numeric: tabular-nums; }

/* ---------- Respiration entre les blocs du module ---------- */
#fcDetail .section-head--spaced { margin-top: var(--space-8); }
.fc-toc, .fc-memo { margin-bottom: var(--space-5); }

/* ---------- Navigation entre modules ---------- */
.fc-pager {
  display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-8);
}

@media (max-width: 640px) {
  .fc-nav { width: 36px; height: 36px; }
  .fc-thumbs { display: none; }
}