/* Cartes de vocabulaire (cartes.js) : page du jour et espace flashcards */
.memo {
  --c-surface: #16161a; --c-bg: #0d0d0f; --c-border: #2a2a35; --c-text: #e8e6e0; --c-dim: #a9a79f; --c-faint: #8a8880;
  --c-or: #c8a96e; --c-bleu: #7c9ec9; --c-vert: #9ecba0; --c-rose: #c97c9e; --c-papier: #f3eee4; --c-encre: #23201b;
  --c-serif: 'Newsreader', Georgia, serif; --c-titre: 'Playfair Display', Georgia, serif; --c-mono: 'DM Mono', monospace;
}
.memo button, .memo select { font-family: inherit; }

.memo { scroll-margin-top: 140px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 22px; padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.memo [hidden] { display: none; }
.memo-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.memo-tete h3 { font-family: var(--c-titre); font-size: 1.4rem; font-weight: 700; }
.memo-paquets { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.memo-paquet { font-size: 0.8rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-dim); cursor: pointer; transition: all 0.2s; }
.memo-paquet:hover { color: var(--c-text); }
.memo-paquet.actif { color: #0d0d0f; background: var(--c-or); border-color: var(--c-or); }
.memo-progres { display: flex; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--c-dim); }
.memo-jauge { flex: 1; height: 6px; border-radius: 3px; background: var(--c-bg); overflow: hidden; }
.memo-jauge i { display: block; height: 100%; width: 0; background: var(--c-vert); border-radius: 3px; transition: width 0.3s; }
.memo-carte { min-height: 230px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding: 36px 28px; border-radius: 18px; background: var(--c-papier); color: var(--c-encre); cursor: pointer; outline: none; }
.memo-carte:focus-visible { box-shadow: 0 0 0 3px var(--c-or); }
.memo-sens { font-family: var(--c-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a7f6e; }
.memo-recto { font-family: var(--c-serif); font-size: 2.1rem; font-weight: 600; line-height: 1.2; }
.memo-verso { display: none; border-top: 1px solid #d8cfbf; padding-top: 12px; width: min(100%, 480px); }
.memo-carte.retournee .memo-verso { display: block; animation: apparait 0.2s ease; }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.memo-trad { font-family: var(--c-serif); font-size: 1.6rem; font-weight: 600; color: #3f679b; }
.memo-ex { margin-top: 4px; font-family: var(--c-serif); font-size: 1.06rem; color: #6d655a; }
.memo-fin { font-family: var(--c-serif); font-size: 1.6rem; font-weight: 600; }
.memo-fin small { display: block; margin-top: 6px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 400; color: #6d655a; }
.memo-fin-actions { display: flex; justify-content: center; margin-top: 16px; }
.memo-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.memo-actions .memo-non, .memo-actions .memo-oui { display: none; }
.memo-carte.retournee + .memo-actions .memo-retourner { display: none; }
.memo-carte.retournee + .memo-actions .memo-non, .memo-carte.retournee + .memo-actions .memo-oui { display: inline-block; }
.memo-actions.fini { display: none; }
.memo-non, .memo-oui { font-size: 1rem; font-weight: 500; min-width: 160px; padding: 13px 22px; border-radius: 999px; cursor: pointer; transition: all 0.2s; }
.memo-non { border: 1px solid var(--c-rose); background: transparent; color: var(--c-rose); }
.memo-non:hover { background: var(--c-rose); color: #0d0d0f; }
.memo-oui { border: 1px solid var(--c-vert); background: var(--c-vert); color: #0d0d0f; }
.memo-oui:hover { filter: brightness(1.08); }
.memo-aide { text-align: center; font-size: 0.82rem; color: var(--c-faint); }

.memo-retourner { font-size: 0.95rem; font-weight: 500; padding: 12px 22px; border-radius: 999px; border: 0; background: var(--c-bleu); color: #0d0d0f; cursor: pointer; }
.memo-retourner:hover { filter: brightness(1.08); }
.memo-jour { max-width: 100%; min-width: 0; text-overflow: ellipsis; font-size: 0.8rem; padding: 7px 30px 7px 13px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-dim); cursor: pointer; }
.memo-jour.actif { color: #0d0d0f; background: var(--c-or); border-color: var(--c-or); }
@media (max-width: 768px) {
  .memo { padding: 18px 16px 20px; }
  .memo-recto { font-size: 1.7rem; }
}