/* =========================================================
   Revisly — page « Flashcards »
   (se charge par-dessus dashboard.css, qui fournit l'ossature)
   ========================================================= */

/* en-tête, puces de filtre et état vide viennent de dashboard.css */

/* ---------- paquets ---------- */
.decks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.deck{
  display:flex;flex-direction:column;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:14px;padding:18px;min-width:0;
  transition:border-color .15s,background .15s;
}
.deck:hover{border-color:var(--border-fort);background:var(--surface-hover)}
.deck .tag{align-self:flex-start;border:.8px solid var(--surface-border);border-radius:999px;padding:1px 9px;font-size:.6875rem;color:var(--ink-secondary)}
.deck h3{margin-top:10px;font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.deck .total{margin-top:4px;font-size:.8125rem;color:var(--ink-tertiary)}

.seg{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--track);margin-top:14px}
.seg i{display:block;height:100%;transition:width .5s ease}
.seg .s-new{background:var(--ink-mute)}
.seg .s-encours{background:var(--daisy)}
.seg .s-jeunes{background:var(--sky)}
.seg .s-ok{background:var(--moss)}

.legend{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:.75rem;color:var(--ink-tertiary)}
.legend span{display:flex;align-items:center;gap:6px;min-width:0}
.legend i{width:8px;height:8px;border-radius:3px;flex:none}
.legend .p-new{background:var(--ink-mute)}
.legend .p-encours{background:var(--daisy)}
.legend .p-jeunes{background:var(--sky)}
.legend .p-ok{background:var(--moss)}

/* margin-top:auto colle l’action en bas : les paquets à jour portent une
   ligne de plus, sans ça les cartes de la grille se désalignent */
.deck .go{margin-top:auto;padding-top:16px}
.deck .go .btn{width:100%}
.deck .done{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 10px;border-radius:10px;font-size:.8125rem;text-align:center;
  background:rgba(78,163,90,.14);border:.8px solid rgba(78,163,90,.4);color:var(--ink-ok);
}
.deck .done svg{width:15px;height:15px;flex:none}
.deck .avance{
  margin-top:8px;width:100%;padding:7px;border-radius:9px;font-size:.75rem;
  color:var(--ink-tertiary);border:.8px solid transparent;
  transition:color .15s,border-color .15s;
}
.deck .avance:hover{color:var(--ink-secondary);border-color:var(--surface-border)}

/* ---------- session de révision ---------- */
.study{max-width:720px;margin:0 auto;width:100%}

.study-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.study-top .lbl{min-width:0}
.study-top .lbl b{display:block;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.study-top .lbl span{font-size:.75rem;color:var(--ink-tertiary)}
.study-bar{flex:1;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.study-bar i{display:block;height:100%;border-radius:999px;background:var(--sky);transition:width .35s ease}
.study-count{font-size:.8125rem;color:var(--ink-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}

.flash{perspective:1400px;cursor:pointer;user-select:none}
.flash-inner{position:relative;min-height:300px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.flash.flip .flash-inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:36px 32px;text-align:center;border-radius:18px;
  background:var(--surface-card);border:.8px solid var(--surface-border);
}
.face .role{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-tertiary)}
.face p{font-size:1.375rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;max-width:34ch}
.face.back{transform:rotateY(180deg);background:var(--surface-reponse);border-color:var(--sky-border)}
.face.back p{font-size:1.125rem;font-weight:500;color:var(--ink-reponse)}
.face .nudge{font-size:.75rem;color:var(--ink-tertiary)}

.rate{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rate button{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:13px 10px 11px;border-radius:12px;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-primary);
  transition:background .15s,border-color .15s,transform .1s;
}
.rate button:hover{background:var(--surface-soft-hover)}
.rate button:active{transform:translateY(1px)}
.rate .lb{font-size:.9375rem;font-weight:500}
/* l’échéance que produira ce bouton, calculée par srs.js */
.rate .dl{font-size:.75rem;color:var(--ink-tertiary);font-variant-numeric:tabular-nums}
.rate button small{position:absolute;top:5px;right:8px;font-size:.625rem;color:var(--ink-mute)}
.rate .r-encore:hover{border-color:var(--ink-ko)}
.rate .r-difficile:hover{border-color:var(--daisy)}
.rate .r-correct:hover{border-color:var(--sky)}
.rate .r-facile:hover{border-color:var(--moss)}
.rate[hidden]{display:none}

.reveal-hint{margin-top:18px;text-align:center;font-size:.8125rem;color:var(--ink-tertiary)}
kbd{
  display:inline-block;min-width:18px;padding:1px 5px;border-radius:5px;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  font:inherit;font-size:.6875rem;color:var(--ink-secondary);
}

/* ---------- bilan ---------- */
.recap{
  max-width:520px;margin:0 auto;text-align:center;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:18px;padding:36px 28px;
}
.recap .seal{
  width:60px;height:60px;margin:0 auto 18px;border-radius:999px;
  background:rgba(26,122,184,.18);border:1px solid var(--sky);
  display:flex;align-items:center;justify-content:center;
}
.recap .seal svg{width:28px;height:28px;color:var(--sky-soft)}
.recap h2{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.recap .sub{margin-top:8px;font-size:.875rem;color:var(--ink-secondary)}
.recap .tally{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.recap .tally div{background:var(--surface-soft);border:.8px solid var(--surface-border);border-radius:12px;padding:13px 6px}
.recap .tally b{display:block;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.recap .tally span{display:block;margin-top:2px;font-size:.625rem;color:var(--ink-tertiary)}
.recap .suite{margin-top:16px;font-size:.8125rem;color:var(--ink-tertiary)}
.recap .actions{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.recap .actions .btn{width:100%}

@media (prefers-reduced-motion: reduce){
  .flash-inner,.seg i,.study-bar i{transition:none}
}

@media (max-width:1180px){
  .decks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .decks{grid-template-columns:1fr}
  .face p{font-size:1.125rem}
  .flash-inner{min-height:260px}
}
@media (max-width:640px){
  .rate{grid-template-columns:1fr 1fr}
  .recap .tally{grid-template-columns:1fr 1fr}
  .study-top .lbl{display:none}
}