/* Flashcards : accueil, carte qui se retourne, boutons de note, bilan, liste. */

/* ---------- Accueil ---------- */
.fc-today__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.fc-today__nums div { display: grid; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.fc-today__nums strong { font-size: var(--fs-2xl); font-weight: 850; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fc-today__nums span { font-size: var(--fs-sm); color: var(--text-2); }
.fc-today__done { font-weight: 650; }
.fc-today__streak { margin-top: var(--space-4); }
@media (max-width: 459px) { .fc-today__nums { gap: 6px; } .fc-today__nums div { padding: 10px; } .fc-today__nums strong { font-size: var(--fs-xl); } }

.fc-boxes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--space-3); }
.fc-box { display: grid; gap: 1px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.fc-box__n { font-size: var(--fs-xl); font-weight: 850; font-variant-numeric: tabular-nums; }
.fc-box__label { font-size: var(--fs-sm); font-weight: 700; }
.fc-box__when { font-size: var(--fs-xs); color: var(--text-3); }
.fc-box--new { background: var(--primary-soft); border-color: transparent; }
.fc-box--ok { background: var(--success-soft); border-color: transparent; }
.fc-box--ok .fc-box__n { color: var(--success); }

.fc-how { list-style: none; display: grid; gap: 10px; }
.fc-how li { display: flex; gap: 10px; align-items: flex-start; }
.fc-how li > span:first-child { font-size: 1.3rem; line-height: 1.2; }

/* ---------- Carte qui se retourne ---------- */
.fc { max-width: 760px; margin: 0 auto; perspective: 1600px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fc__inner { display: grid; transform-style: preserve-3d; transition: transform .55s var(--ease); }
.fc.is-flipped .fc__inner { transform: rotateY(180deg); }
.fc__face {
  grid-area: 1 / 1; min-width: 0; min-height: 300px;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: 22px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fc__face--front { background: linear-gradient(160deg, var(--primary-soft), var(--surface) 70%); }
.fc__face--back { transform: rotateY(180deg); border-top: 5px solid var(--success); }
.fc__face:focus { outline: none; }
.fc__face:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fc__meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.fc__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fc__text { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.fc__face--front .fc__label { margin-top: auto; text-align: center; }
.fc__face--front .fc__text { margin-bottom: auto; text-align: center; }
.fc__face--back .fc__text { font-size: var(--fs-lg); font-weight: 500; }
.fc__text code, .fc__detail code, .fc__q code { font-size: .92em; }
.fc__q { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.fc__detail { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
.fc__more { margin-top: auto; font-size: var(--fs-sm); }
.fc__more a, .fc-item__a a { display: inline-flex; align-items: center; gap: 4px; }
.fc__more .icon, .fc-item__a .icon { width: 16px; height: 16px; }
.fc__tap { text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .fc__inner { transition: none; } }
@media (max-width: 639px) {
  .fc__face { min-height: 240px; padding: var(--space-5) var(--space-4); border-radius: 18px; }
}

/* Glisser la carte (écran tactile) : --dx, --rot et --swipe (-1 à 1) sont posés par js/views/flashcards.js */
.fc { position: relative; touch-action: pan-y; transform: translate3d(var(--dx, 0px), 0, 0) rotate(var(--rot, 0deg)); transition: transform .3s var(--ease); }
.fc.is-dragging { transition: none; }
.fc.is-leaving { transition: transform .2s ease-in, opacity .2s ease-in; opacity: 0; }
.fc__stamp {
  position: absolute; top: 16px; z-index: 2; padding: 4px 12px; border-radius: 12px; border: 3px solid currentColor;
  background: var(--surface); font-weight: 900; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.fc__stamp--ok { left: 16px; color: var(--success); transform: rotate(-8deg); opacity: calc(var(--swipe, 0) * 1.6); }
.fc__stamp--ko { right: 16px; color: var(--danger); transform: rotate(8deg); opacity: calc(var(--swipe, 0) * -1.6); }
.fc-swipe { display: none; }
@media (hover: none) and (pointer: coarse) { .fc-swipe { display: block; max-width: 760px; margin: var(--space-2) auto 0; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .fc, .fc.is-leaving { transition: none; } }
:root[data-motion="reduced"] .fc, :root[data-motion="off"] .fc { transition: none; }

/* ---------- Boutons de note ---------- */
.fc-actions { display: flex; justify-content: center; max-width: 760px; min-height: 92px; margin: var(--space-4) auto 0; }
.fc-actions > .btn { align-self: flex-start; }
.fc-rate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.fc-rate__btn {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 88px; padding: 10px 8px; border-radius: 14px; border: 1.5px solid transparent;
  font: inherit; color: var(--text); cursor: pointer; text-align: center;
  transition: transform .1s var(--ease), border-color .15s var(--ease);
}
.fc-rate__btn:hover { border-color: currentColor; }
.fc-rate__btn:active { transform: translateY(1px); }
.fc-rate__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fc-rate__btn--ko { background: var(--danger-soft); color: var(--danger); }
.fc-rate__btn--mid { background: var(--warning-soft); color: var(--warning); }
.fc-rate__btn--ok { background: var(--success-soft); color: var(--success); }
.fc-rate__emoji { font-size: 1.7rem; line-height: 1.1; }
.fc-rate__label { font-weight: 800; }
.fc-rate__when { font-size: var(--fs-xs); color: var(--text-2); }
.fc-rate__btn kbd { position: absolute; top: 6px; right: 8px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; font-size: 11px; opacity: .7; }
.fc-last { max-width: 760px; margin: var(--space-2) auto 0; min-height: 1.4em; text-align: center; }
.fc ~ .qhint { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 479px) { .qbar--cards .qbar__score { display: none; } }
@media (max-width: 639px) {
  .fc-rate { gap: 6px; } .fc-rate__btn { min-height: 80px; padding: 8px 4px; } .fc-rate__btn kbd { display: none; }
  .fc-rate__btn:active { transform: scale(.96); }
  /* Session sur téléphone : boutons de note collés en bas, au-dessus de la zone de la barre d'accueil */
  .is-immersive .fc-actions {
    position: sticky; bottom: 0; z-index: 12; min-height: 0;
    margin: var(--space-3) calc(-1 * var(--space-4)) 0; padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .is-immersive .fc-actions > .btn { align-self: auto; width: 100%; }
  .is-immersive .fc-rate__btn { min-height: 72px; }
}

/* ---------- Bilan ---------- */
.fc-tally { display: flex; flex-wrap: wrap; gap: 10px; }
.fc-tally span { display: grid; min-width: 96px; padding: 12px 16px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .14); font-size: var(--fs-sm); text-align: center; }
.fc-tally strong { font-size: var(--fs-xl); }
.fc-next { display: grid; gap: 8px; }

/* ---------- Liste des cartes ---------- */
.fc-toolbar { flex-wrap: wrap; }
.fc-toolbar select { min-height: 44px; }
.fc-list { list-style: none; display: grid; gap: 8px; }
.fc-item { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.fc-item[open] { border-left: 4px solid var(--success); }
.fc-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.fc-item summary::-webkit-details-marker { display: none; }
.fc-item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.fc-item__q { flex: 1; min-width: 0; font-weight: 650; }
.fc-item summary .badge { flex: none; }
.fc-item__a { display: grid; gap: 6px; padding: 0 14px 14px; }

/* Filtre par module de la liste des cartes : les titres longs (parcours carrière IT) ne doivent pas élargir la page */
.field:has(> #fc-module) { min-width: 0; max-width: 100%; }
.field #fc-module { max-width: 100%; }