/* Flashcards mode pour /bac/<slug>.
   Activé via le bouton « Mode révision » en haut de fiche.
   État stocké en localStorage par slug. */

.bac-notion .fc-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  font-size: .85rem;
  flex-wrap: wrap;
}

.bac-notion .fc-btn {
  background: transparent;
  color: var(--def);
  border: 1px solid var(--def);
  padding: .35rem .9rem;
  border-radius: 3px;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.bac-notion .fc-btn:hover { background: var(--def-bg); }
.bac-notion .fc-btn.is-on { background: var(--def); color: white; }

.bac-notion .fc-progress {
  color: var(--muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.bac-notion .fc-bar {
  width: 8rem;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.bac-notion .fc-bar > i {
  display: block;
  height: 100%;
  background: #2c8a5b;
  width: var(--p, 0%);
  transition: width .25s ease;
}

.bac-notion .fc-reset {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  opacity: .7;
}
.bac-notion .fc-reset:hover { opacity: 1; color: inherit; }

/* ─── Masquage : seulement actif quand body.fc-on ────────────────────── */

body.fc-on .bac-notion section.card .body {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  transition: filter .15s ease;
}
body.fc-on .bac-notion section.card.is-revealed .body {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}

/* Overlay « Révéler » par carte (n'apparaît qu'en mode fc-on et carte non révélée) */
.bac-notion section.card .fc-overlay {
  display: none;
}
body.fc-on .bac-notion section.card:not(.is-revealed) .fc-overlay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .8rem;
  background: color-mix(in srgb, currentColor 4%, transparent);
  border-top: 1px dashed var(--rule);
  gap: .8rem;
}

.bac-notion .fc-overlay .fc-prompt {
  color: var(--muted);
  font-style: italic;
  font-size: .85rem;
  flex: 1;
}
.bac-notion .fc-overlay .fc-reveal {
  background: var(--prop-bg);
  color: var(--prop);
  border: 1px solid color-mix(in srgb, var(--prop) 30%, transparent);
  padding: .25rem .75rem;
  border-radius: 3px;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.bac-notion .fc-overlay .fc-reveal:hover { background: var(--prop); color: white; }

/* Rating buttons après reveal */
.bac-notion section.card .fc-rate {
  display: none;
}
body.fc-on .bac-notion section.card.is-revealed .fc-rate {
  display: flex;
  gap: .4rem;
  padding: .5rem .8rem .8rem;
  border-top: 1px dashed var(--rule);
  margin-top: .4rem;
}
.bac-notion .fc-rate button {
  flex: 1;
  padding: .3rem .6rem;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 3px;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.bac-notion .fc-rate button:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.bac-notion .fc-rate button[data-r="todo"]:hover { border-color: #c0392b; color: #c0392b; }
.bac-notion .fc-rate button[data-r="seen"]:hover { border-color: #b85c1f; color: #b85c1f; }
.bac-notion .fc-rate button[data-r="mastered"]:hover { border-color: #2c8a5b; color: #2c8a5b; }
.bac-notion .fc-rate button.is-active { color: white; }
.bac-notion .fc-rate button[data-r="todo"].is-active { background: #c0392b; border-color: #c0392b; }
.bac-notion .fc-rate button[data-r="seen"].is-active { background: #b85c1f; border-color: #b85c1f; }
.bac-notion .fc-rate button[data-r="mastered"].is-active { background: #2c8a5b; border-color: #2c8a5b; }

/* Indicateurs sur l'en-tête de carte (visibles même hors mode révision) */
.bac-notion section.card.fc-mastered > header::after { content: ' ✓'; color: #2c8a5b; font-weight: 700; }
.bac-notion section.card.fc-seen > header::after { content: ' ○'; color: #b85c1f; }
.bac-notion section.card.fc-todo > header::after { content: ' ×'; color: #c0392b; font-weight: 700; }

/* Exemples imbriqués (.appli.exo) : seuls « Énoncé » est visible quand la carte
   est révélée mais que l'exemple ne l'est pas. */
body.fc-on .bac-notion section.card.is-revealed .appli.exo p:nth-child(n+2) {
  display: none;
}
body.fc-on .bac-notion section.card.is-revealed .appli.exo.is-revealed p {
  display: block;
}
.bac-notion .appli.exo .fc-exo-mask {
  display: none;
}
body.fc-on .bac-notion section.card.is-revealed .appli.exo:not(.is-revealed) .fc-exo-mask {
  display: inline-block;
  background: transparent;
  border: 1px dashed var(--rule);
  padding: .15rem .55rem;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  margin-top: .35rem;
  font-family: inherit;
}
.bac-notion .appli.exo:not(.is-revealed) .fc-exo-mask:hover { color: inherit; border-color: var(--prop); }