/* ===== BADGE ICONS ===== */
.phase-badge {
display: inline-flex;
align-items: center;
gap: 8px;
}

.phase-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.phase-icon svg,
.intro-icon svg,
.feature-icon svg,
.session-card-icon svg,
.transition-icon svg,
.end-trophy svg {
display: block;
}

/* ===== DAY LABEL (HOME) ===== */
.day-label{
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.75;
}

/* ===== HOME STATS ROW (3 cards horizontales) ===== */
.home-stats-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}

.home-stat-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 8px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg);
gap: 4px;
}

.home-stat-card-value {
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1;
}

.home-stat-card-value.blue { color: var(--primary); }
.home-stat-card-value.gold { color: var(--gold); }
.home-stat-card-value.streak { color: var(--success); font-size: 15px; }

.home-stat-card-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
}

/* ===== THEME (LIGHT ONLY) ===== */
:root {
  /* ── Couleurs (palette sable chaud + accent émeraude) ── */
  --primary: #0E8A6B;
  --primary-light: #2FB58C;
  --primary-dark: #0A6F56;

  --gold: #BE8A3A;
  --gold-light: #D6A24E;

  --success: #0E8A6B;
  --success-light: #2FB58C;
  --success-bg: rgba(14, 138, 107, 0.12);

  --error: #B5705A;
  --error-light: #C98C73;
  --error-bg: rgba(181, 112, 90, 0.14);

  --quiz: #0E8A6B;
  --quiz-dark: #0A6F56;
  --quiz-bg: rgba(14, 138, 107, 0.12);

  --free: #0E8A6B;
  --free-light: #2FB58C;
  --free-bg: rgba(14, 138, 107, 0.08);

  --marked: #B5705A;
  --marked-bg: rgba(181, 112, 90, 0.12);

  --bg: #F4EFE6;
  --bg-card: #FFFEFB;
  --bg-elevated: #FFFFFF;
  /* Aliases (legacy) — résolus dynamiquement avec --bg-card / --border */
  --card-bg: var(--bg-card);
  --border-color: var(--border);

  --text: #221E17;
  --text-primary: #221E17;
  --text-secondary: #8A8073;
  --text-muted: #B8AE9F;

  --border: #E7DFD2;
  --border-light: #EFE8DA;

  /* ── Rayons ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ── Espacements (grille 4px) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Typographie ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  28px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-primary: 0 4px 14px rgba(14, 138, 107, 0.25);

  /* ── Transitions ── */
  --transition: 0.2s ease;
  --transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== DARK MODE (sable foncé + émeraude) ===== */
body.dark-mode {
  --primary: #2FB58C;
  --primary-light: #2FB58C;
  --primary-dark: #1E9573;
  --gold: #D6A24E;
  --gold-light: #E2B768;
  --success: #2FB58C;
  --success-light: #2FB58C;
  --error: #C98C73;
  --error-light: #C98C73;
  --quiz: #2FB58C;
  --quiz-dark: #1E9573;
  --free: #2FB58C;
  --free-light: #2FB58C;
  --marked: #C98C73;

  --bg: #1A1814;
  --bg-card: #2C2820;
  --bg-elevated: #26221C;

  --text: #F2ECE0;
  --text-primary: #F2ECE0;
  --text-secondary: #9C9384;
  --text-muted: #6B6356;

  --border: #393327;
  --border-light: #241F18;

  --success-bg: rgba(47, 181, 140, 0.15);
  --error-bg: rgba(201, 140, 115, 0.15);
  --quiz-bg: rgba(47, 181, 140, 0.15);
  --free-bg: rgba(47, 181, 140, 0.12);
  --marked-bg: rgba(201, 140, 115, 0.15);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 14px rgba(47, 181, 140, 0.35);
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
font-family: 'Spline Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0;
color: var(--text);
transition: background var(--transition), color var(--transition);
}

@media (max-width: 480px) {
body {
align-items: flex-start;
}
}

/* ── Titres en serif Fraunces (identité globale) ── */
h1, h2, h3, h4,
.logo, .intro-title, .home-title, .home-greeting, .end-title, .transition-title,
.modal-title, .stats-card-title, .intro-subtitle {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.01em;
}

#app {
  width: 100%; 
  max-width: 540px; 
  position: relative; 
  padding-bottom: 72px; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 480px) {
  #app {
    max-width: 100%;
    min-height: 100vh;
  }
}
.screen {
display: none;
background: var(--bg-card);
border-radius: 0;
padding: 24px 20px;
border: none;
}

@media (max-width: 480px) {
  .screen {
    padding: 20px 16px;
  }
}
.screen.active { display: block; }

/* ===== TRANSITIONS ENTRE ÉCRANS ===== */
.screen-exit {
  animation: screenExit 150ms ease-in forwards;
}
.screen-enter {
  animation: screenEnter 200ms ease-out forwards;
}
@keyframes screenExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== HEADER ===== */
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.theme-toggle-btn {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: all var(--transition);
}

.theme-toggle-btn:hover {
background: var(--border-light);
border-color: var(--text-muted);
color: var(--text);
}

.theme-toggle-btn:active {
transform: scale(0.95);
}

.theme-toggle { display: none; }

/* ===== INTRO ===== */
.intro-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: #fff;
overflow: hidden;
}

.intro-logo-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.intro-title {
font-size: var(--text-2xl);
font-weight: 800;
text-align: center;
color: var(--text);
margin-bottom: 10px;
line-height: 1.2;
letter-spacing: -0.02em;
}
.intro-subtitle {
font-size: var(--text-base);
text-align: center;
color: var(--text-secondary);
margin-bottom: 32px;
font-weight: 500;
}

.intro-features {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
background: var(--bg);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
}
.feature-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text);
}
.feature-icon.blue { background: rgba(14, 138, 107, 0.1); color: var(--primary); }
.feature-icon.gold { background: rgba(190, 138, 58, 0.1); color: var(--gold); }
.feature-icon.green { background: rgba(14, 138, 107, 0.1); color: var(--success); }

.feature-content h4 {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.feature-content p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.4;
}

.intro-anchor {
font-size: var(--text-sm);
text-align: center;
color: var(--text-muted);
margin-bottom: 24px;
letter-spacing: 0.01em;
}

/* ===== BUTTONS ===== */
.btn {
width: 100%;
padding: 16px 24px;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn:active { transform: scale(0.97); box-shadow: inset 0 2px 6px rgba(0,0,0,0.15); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-primary);
  letter-spacing: 0.01em;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(14, 138, 107, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: scale(0.97) translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-gold {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
color: white;
}

.btn-free {
background: linear-gradient(135deg, var(--free) 0%, var(--free-light) 100%);
color: white;
}
.btn-free:hover:not(:disabled) {
background: linear-gradient(135deg, var(--quiz-dark) 0%, var(--free) 100%);
}

.btn-ghost {
background: transparent;
color: var(--text-secondary);
padding: 12px;
font-size: 13px;
}
.btn-ghost:hover:not(:disabled) { color: var(--primary); }

/* ===== V2.4.0: BOUTON MéTHODE MéMORISATION (HOME) ===== */
.memory-method-section {
text-align: center;
}
.btn-memory-method {
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.btn-memory-method:hover {
background: rgba(14, 138, 107, 0.05);
}

/* ===== HOME ===== */
.home-greeting {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.home-title {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin-bottom: 24px;
}

/* ===== SESSION CARDS (GRID 2 COLONNES) ===== */
.session-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
.session-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.session-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}


.session-card-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.session-card.revision .session-card-icon { background: rgba(14, 138, 107, 0.1); color: var(--primary); }
.session-card.new-cards .session-card-icon { background: rgba(190, 138, 58, 0.1); color: var(--gold); }

.session-card-label {
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 4px;
line-height: 1.3;
}
.session-card-value {
font-size: 20px;
font-weight: 700;
}
.session-card.revision .session-card-value { color: var(--primary); }
.session-card.new-cards .session-card-value { color: var(--gold); }

.divider {
height: 1px;
background: var(--border);
margin: 24px 0;
}

.reset-section { text-align: center; }
.reset-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}

.home-actions {
margin-top: 10px;
}

/* Grille nav 2×2 */
.home-nav-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}

.home-nav-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg);
cursor: pointer;
transition: all var(--transition);
color: var(--text-secondary);
}

.home-nav-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(14, 138, 107, 0.04);
}

.home-nav-btn:active {
transform: scale(0.97);
}

.home-nav-btn-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
background: rgba(14, 138, 107, 0.08);
color: var(--primary);
transition: background var(--transition);
}

.home-nav-btn:hover .home-nav-btn-icon {
background: rgba(14, 138, 107, 0.14);
}

.home-nav-btn-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
text-align: center;
color: var(--text);
}

/* Lien secondaire sous la grille (Ajouter carte perso) */
.home-nav-secondary {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 4px;
}

.home-status{
margin-top: 12px;
font-size: 13px;
color: var(--text-secondary);
text-align: center;
}

/* ===== TOTAL CARDS INFO ===== */
.total-cards-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
}
.total-cards-label {
font-size: 13px;
color: var(--text-secondary);
}
.total-cards-value {
font-size: 18px;
font-weight: 700;
color: var(--primary);
}

/* ===== CUSTOM CARDS SECTION (HOME) ===== */
.custom-cards-section { text-align: center; }
.section-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.custom-cards-actions {
display: flex;
flex-direction: column;
gap: 4px;
}

/* ===== FREE LEARNING SECTION ===== */
.free-learning-section {
margin-top: 16px;
background: var(--free-bg);
border: 1px solid rgba(14, 138, 107, 0.2);
border-radius: var(--radius-md);
padding: 20px;
}
.free-learning-section.end-free {
margin-top: 20px;
}

.free-learning-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.free-learning-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: rgba(14, 138, 107, 0.12);
color: var(--free);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.free-learning-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.free-learning-info {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 14px;
line-height: 1.4;
}

.free-count-selector {
margin-bottom: 14px;
}
.free-count-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
display: block;
margin-bottom: 8px;
}
.free-count-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.free-count-btn {
padding: 10px 6px;
font-size: 14px;
font-weight: 600;
border: 1px solid rgba(14, 138, 107, 0.2);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition);
text-align: center;
}
.free-count-btn:hover:not(:disabled) {
border-color: var(--free);
color: var(--free);
}
.free-count-btn.active {
background: rgba(14, 138, 107, 0.12);
border-color: var(--free);
color: var(--free);
}
.free-count-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}

/* ===== SESSION ===== */
.session-header { margin-bottom: 20px; }

.session-topbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}

.session-topbar-right {
display: flex;
align-items: center;
gap: 8px;
}

.phase-badge {
padding: 5px 10px;
border-radius: 16px;
font-size: 11px;
font-weight: 600;
margin-bottom: 0;
}
/* ========== HOME SESSION PHASES ========== */
.home-session-phases {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.home-phase-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
}

.home-phase-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.home-phase-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.home-phase-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.home-phase-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.home-phase-count {
  font-size: 20px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

.home-session-done {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 16px 0 8px;
}

/* ========== END HOME SESSION PHASES ========== */

/* ========== BRIEFING SCREEN ========== */
.briefing-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 20px;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
}

.briefing-header {
  text-align: center;
}

.briefing-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.briefing-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.briefing-phases {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.briefing-phase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
}

.briefing-phase-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.briefing-phase-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.briefing-phase-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.briefing-phase-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.briefing-phase-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

.briefing-phase-count {
  font-size: 22px;
  font-weight: 700;
  min-width: 32px;
  text-align: right;
}

/* ========== END BRIEFING ========== */

.phase-badge.difficult {
  background: rgba(181, 112, 90, 0.15);
  color: #B5705A;
}

.phase-badge.revision { background: rgba(14, 138, 107, 0.1); color: var(--primary); }
.phase-badge.new-cards { background: rgba(190, 138, 58, 0.1); color: var(--gold); }
.phase-badge.free-learning { background: rgba(14, 138, 107, 0.1); color: var(--quiz); }
.phase-badge.encode { background: rgba(14, 138, 107, 0.1); color: #0E8A6B; }

.session-progress {
font-size: 13px;
color: var(--text-secondary);
}

/* ===== ICON BUTTON ===== */
.icon-btn{
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
}
.icon-btn:hover{ color: var(--primary); border-color: rgba(14, 138, 107, 0.25); }
.icon-btn:active{ transform: scale(0.98); }
.icon-btn.tts-active{ color: var(--primary); border-color: rgba(14, 138, 107, 0.35); }

/* ===== MARK BUTTON ===== */
.mark-btn.marked {
color: var(--marked);
border-color: rgba(190, 138, 58, 0.4);
background: var(--marked-bg);
}
.mark-btn:hover { color: var(--marked); border-color: rgba(190, 138, 58, 0.4); }

/* ===== FLASHCARD ===== */
.flashcard-wrapper {
  /* La carte (ratio 5:7) prend le maximum de place : bornée par la largeur,
     par la hauteur réellement visible (svh, tient compte de la barre d'URL)
     moins le header + les boutons, et par un max absolu. */
  width: min(90vw, 430px);                                     /* repli navigateurs anciens */
  width: min(90vw, calc((100svh - 290px) * 4 / 5), 430px);     /* précis, anti-débordement */
  margin: 0 auto 24px;
  perspective: 1200px;
  will-change: transform, opacity;
}

/* Mode QCM : les 4 réponses occupent 2 rangées sous la carte. On compacte la carte
   (cap absolu réduit + budget vertical élargi pour la 2e rangée + la barre d'onglets)
   → fin du débordement sous la barre, et moins de vide dans la carte. */
#quiz-screen.qcm-mode .flashcard-wrapper {
  width: min(90vw, calc((100svh - 360px) * 4 / 5), 360px);
}

/* Sortie / entrée : on anime UNIQUEMENT l'étage (la carte du dessus), pas le
   .flashcard-wrapper — sinon les cartes fantômes empilées (::before/::after du
   wrapper) partiraient avec, et c'est tout le paquet qui s'envolerait. */
/* Sortie vers la droite (Je sais) */
.flashcard-stage.exit-right {
  animation: exitRight 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}
/* Sortie vers la gauche (Je sais pas) */
.flashcard-stage.exit-left {
  animation: exitLeft 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}
/* Entrée de la carte suivante */
.flashcard-stage.card-enter {
  animation: cardEnter 0.28s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

@keyframes exitRight {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(110%) rotate(8deg); opacity: 0; }
}
@keyframes exitLeft {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(-110%) rotate(-8deg); opacity: 0; }
}
@keyframes cardEnter {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.flashcard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(min-content, 1fr);
  aspect-ratio: 4 / 5;        /* portrait équilibré : grande carte sans grand vide */
  border-radius: var(--radius-xl);
  position: relative;
  transform-style: preserve-3d;
  /* Courbe plus « organique » : démarrage progressif (comme une main qui saisit
     la carte) puis décélération douce, durée un peu allongée pour le poids. */
  transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
  touch-action: pan-y;
  user-select: none;
}
.flashcard.flipped {
  transform: rotateY(180deg);
}

/* Étage entre le wrapper (qui porte le paquet/fantômes) et la carte. C'est LUI
   qu'on soulève → seule la carte retournée bouge, le paquet derrière reste fixe.
   Il porte aussi la perspective (parent direct de .flashcard, requis pour le 3D). */
.flashcard-stage {
  width: 100%;
  perspective: 1200px;
  will-change: transform;
}
/* Léger soulèvement + grandissement pendant le retournement → effet « prise en
   main » d'un vrai carton (l'ombre de la carte grandit avec l'échelle).
   La classe est retirée puis ré-ajoutée (avec reflow) à CHAQUE flip côté JS,
   pour que l'animation rejoue à l'identique au 2e, 3e… retournement. */
.flashcard-stage.flip-lift {
  animation: cardLift 0.55s ease-in-out;
}
@keyframes cardLift {
  0%   { transform: translateY(0) scale(1); }
  44%  { transform: translateY(-12px) scale(1.045); }
  100% { transform: translateY(0) scale(1); }
}
.flashcard.no-transition {
  transition: none;
}
.card-face {
  grid-area: 1 / 1;            /* les deux faces occupent la même cellule (flip sans saut) */
  position: relative;
  border-radius: var(--radius-xl);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.26),
    0 4px 10px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Voile lumineux discret en haut → effet matière/profondeur */
.card-face::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 0;
}
/* Cadre intérieur : la signature visuelle d'une vraie carte à jouer */
.card-face::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-radius: calc(var(--radius-xl) - 7px);
  pointer-events: none;
  z-index: 0;
}
.card-front {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.card-back {
  background: linear-gradient(135deg, var(--success) 0%, #0A6F56 100%);
  transform: rotateY(180deg);
}
.flashcard.wrong-answer .card-back {
  background: linear-gradient(135deg, var(--error) 0%, #9A5E4B 100%);
}
.flashcard.free-learning .card-front {
  background: linear-gradient(135deg, var(--quiz) 0%, var(--quiz-dark) 100%);
}
.flashcard.showing-answer {
background: linear-gradient(135deg, var(--success) 0%, #0A6F56 100%);
}
.flashcard.wrong-answer,
.flashcard.showing-answer.wrong-answer,
.flashcard.free-learning.showing-answer.wrong-answer,
.flashcard.quiz.showing-answer.wrong-answer {
background: linear-gradient(135deg, var(--error) 0%, #9A5E4B 100%);
}
.flashcard.free-learning {
background: linear-gradient(135deg, var(--quiz) 0%, var(--quiz-dark) 100%);
}
.flashcard.free-learning.showing-answer {
background: linear-gradient(135deg, var(--success) 0%, #0A6F56 100%);
}

/* ===== SWIPE INDICATORS ===== */
.swipe-indicator {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}

.swipe-hint {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 64px;
font-weight: 700;
opacity: 0;
transition: opacity 0.2s ease;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.swipe-hint.swipe-left {
left: 40px;
color: var(--error);
}

.swipe-hint.swipe-right {
right: 40px;
color: var(--success);
}

.flashcard-label {
position: absolute;
top: 18px;
left: 20px;
z-index: 1;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 1.5px;
}
.flashcard-text {
position: relative;
z-index: 1;
font-size: 21px;
line-height: 1.4;
letter-spacing: -0.01em;
color: white;
font-weight: 600;
text-align: center;
padding: 0 4px;
text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
text-wrap: balance;
}

/* ===== CTA ACCROCHE MÉMOIRE (sous « Dévoiler la réponse ») ===== */
.mnemonic-zone { margin-top: 10px; }
.btn-mnemonic-cta {
width: 100%;
padding: 11px 14px;
font-family: 'Spline Sans', sans-serif;
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: var(--radius-md);
cursor: pointer;
background: rgba(190, 138, 58, 0.08);
color: var(--gold);
border: 1px solid rgba(190, 138, 58, 0.22);
transition: all var(--transition);
}
.btn-mnemonic-cta i { font-size: 1.15em; }
.btn-mnemonic-cta:hover {
background: rgba(190, 138, 58, 0.14);
border-color: rgba(190, 138, 58, 0.35);
}
.btn-mnemonic-cta:active { transform: scale(0.98); }
.mnemonic-reveal {
margin-top: 10px;
padding: 12px 14px;
border-radius: var(--radius-md);
background: rgba(190, 138, 58, 0.10);
border: 1px solid rgba(190, 138, 58, 0.22);
font-family: 'Fraunces', Georgia, serif;
font-size: 15px;
line-height: 1.5;
animation: afterIn .28s cubic-bezier(.2,.7,.3,1) both;
}
.rv-theme .btn-mnemonic-cta { color: var(--rv-em); background: var(--rv-cardInner); border-color: var(--rv-cardBorder); }
.rv-theme .mnemonic-reveal { color: var(--rv-ink); background: var(--rv-cardInner); border-color: var(--rv-cardBorder); }

.buttons-zone { min-height: 140px; position: relative; }

/* ===== BULLE D'ONBOARDING CONTEXTUELLE (1re carte) ===== */
.onboarding-bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 8px;
  right: 8px;
  z-index: 60;
  background: var(--text);
  color: var(--bg-card);
  border-radius: 14px;
  padding: 13px 38px 13px 15px;
  box-shadow: 0 12px 30px -10px rgba(20, 16, 10, 0.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.onboarding-bubble.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Flèche pointant vers le bouton « révéler » en dessous */
.onboarding-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--text);
}
.onboarding-bubble-text {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
}
.onboarding-bubble-text i {
  color: var(--gold-light);
  margin-right: 2px;
  vertical-align: -1px;
}
.onboarding-bubble-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--bg-card);
  opacity: 0.6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.onboarding-bubble-close:hover { opacity: 1; }

/* MORPHING : « Dévoiler la réponse » (vert pleine largeur, rouge replié) → à la
   révélation, le vert se rétrécit en « Je sais » pendant que « Je ne sais pas »
   s'ouvre à gauche. */
.answer-buttons {
display: grid;
grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
gap: 0;
transition: grid-template-columns .5s cubic-bezier(.34, 1.04, .4, 1), gap .4s ease;
}
.answer-buttons.revealed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.answer-buttons.hidden { display: none; }   /* QCM / mains libres / état « jugé » */

.btn-answer {
padding: 16px 12px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.btn-answer:active { transform: scale(0.97); }

/* « Je ne sais pas » : replié/invisible tant que la réponse n'est pas révélée. */
.answer-buttons:not(.revealed) .btn-answer.red { opacity: 0; pointer-events: none; }
.answer-buttons.revealed .btn-answer.red { opacity: 1; }

/* Bouton vert : deux libellés superposés qui se fondent (« Dévoiler la réponse » ↔ « Je sais »). */
.btn-answer.green { position: relative; }
.btn-answer.green .lbl { transition: opacity .26s ease; }
.btn-answer.green .lbl-know { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; }
.answer-buttons:not(.revealed) .btn-answer.green .lbl-know   { opacity: 0; }
.answer-buttons:not(.revealed) .btn-answer.green .lbl-reveal { opacity: 1; }
.answer-buttons.revealed .btn-answer.green .lbl-reveal { opacity: 0; }
.answer-buttons.revealed .btn-answer.green .lbl-know   { opacity: 1; }


.btn-answer.red {
background: var(--error-bg);
color: var(--error);
border: 1px solid rgba(181, 112, 90, 0.2);
}
.btn-answer.red:hover {
background: rgba(181, 112, 90, 0.18);
border-color: rgba(181, 112, 90, 0.4);
}

.btn-answer.green {
background: var(--success-bg);
color: var(--success);
border: 1px solid rgba(14, 138, 107, 0.2);
}
.btn-answer.green:hover {
background: rgba(14, 138, 107, 0.18);
border-color: rgba(14, 138, 107, 0.4);
}

/* ===== AFTER ANSWER ===== */
.after-answer {
display: none;
flex-direction: column;
gap: 8px;
}
.after-answer.visible { display: flex; animation: afterIn .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes afterIn { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: none; } }
.after-answer .btn{ width: 100%; }


.after-answer-row {
display: flex;
gap: 8px;
width: 100%;
}

/* ===== V2.4.0: BOUTON ENCODER MAINTENANT (SESSION/QUIZ) ===== */
.btn-encode {
font-size: 13px;
font-weight: 600;
color: var(--gold);
background: rgba(190, 138, 58, 0.08);
border: 1px solid rgba(190, 138, 58, 0.2);
}
.btn-encode:hover {
background: rgba(190, 138, 58, 0.12);
border-color: rgba(190, 138, 58, 0.3);
color: var(--gold);
}

/* ===== TRANSITION ===== */
.transition-content { text-align: center; }
.transition-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: #fff;
}
.transition-title {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
}
.transition-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 24px;
line-height: 1.5;
}
.transition-stat {
background: var(--bg);
border-radius: var(--radius-md);
padding: 20px;
margin-bottom: 24px;
border: 1px solid var(--border);
}
.transition-stat-label {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.transition-stat-value {
font-size: 32px;
font-weight: 700;
color: var(--gold);
}
.transition-screen--blue .transition-icon {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.transition-screen--blue .transition-stat-value {
color: var(--primary);
}
.transition-screen--gold .transition-icon {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}
.transition-screen--gold .transition-stat-value {
color: var(--gold);
}

/* ===== END ===== */
.end-content { text-align: center; }
.end-trophy {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: #fff;
}
.end-title {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.end-subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 28px;
}

.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.stat-card {
padding: 20px 16px;
border-radius: var(--radius-md);
text-align: center;
}
.stat-card.red { background: var(--error-bg); }
.stat-card.green { background: var(--success-bg); }
.stat-card-value {
font-size: 32px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-card.red .stat-card-value { color: var(--error); }
.stat-card.green .stat-card-value { color: var(--success); }
.stat-card-label {
font-size: 12px;
color: var(--text-secondary);
}

.total-cards {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 24px;
}
.total-cards strong { color: var(--text); }

/* ===== LEARNED LIST ===== */
.learned-list{
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
/* Pleine largeur : annule le padding latéral de l'écran (20px) pour gagner de la place. */
margin-left: -20px;
margin-right: -20px;
}
@media (max-width: 480px) {
  .learned-list { margin-left: -16px; margin-right: -16px; }
}
.learned-item{
background: var(--bg);
border: none;
border-bottom: 1px solid #2ca813;  /* un seul trait vert par carte → plus de double ligne */
border-radius: 0;                  /* coins arrondis inutiles bord à bord */
padding: 14px 14px;
content-visibility: auto;
contain-intrinsic-size: 0 90px;
}

.learned-item.marked {
background: var(--marked-bg);
}



/* ===== LEARNED ITEM HEADER (avec bouton toggle difficile + source + suppression) ===== */
.learned-item-header {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
position: relative;
}
.learned-item-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
margin-left: auto;
}

.tier-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-muted);
background: none;
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
transition: all var(--transition);
}
.tier-badge:hover {
border-color: var(--primary);
color: var(--primary);
}

.btn-toggle-mark {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
}
.btn-toggle-mark:hover {
color: var(--marked);
border-color: rgba(190, 138, 58, 0.4);
}
.btn-toggle-mark:active {
transform: scale(0.95);
}
.learned-item.marked .btn-toggle-mark {
color: var(--marked);
border-color: rgba(190, 138, 58, 0.4);
background: var(--marked-bg);
}

.btn-show-source {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
}
.btn-show-source:hover {
background: rgba(14, 138, 107, 0.08);
border-color: rgba(14, 138, 107, 0.25);
}
.btn-show-source:active {
transform: scale(0.95);
}

.btn-delete-learned-card {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--error);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
}
.btn-delete-learned-card:hover {
background: var(--error-bg);
border-color: rgba(181, 112, 90, 0.3);
}
.btn-delete-learned-card:active {
transform: scale(0.95);
}

.btn-speak-answer {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
}
.btn-speak-answer:hover {
background: rgba(14, 138, 107, 0.08);
border-color: rgba(14, 138, 107, 0.25);
color: var(--primary);
}
.btn-speak-answer:active {
transform: scale(0.95);
}

.learned-q{
font-size: 14px;
font-weight: 700;
color: var(--text);
flex: 1;
}
.learned-a{
font-size: 14px;
color: var(--text-secondary);
line-height: 1.45;
transition: filter 0.3s ease;
}

/* ===== BLUR POUR RéPONSES CACHéES (au lieu de display:none) ===== */
.learned-a.blurred-answer,
.learned-list.answers-hidden .learned-a:not(.force-show) {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}
.learned-item-footer {
display: flex;
gap: 8px;
margin-top: 8px;
align-items: center;
}

.btn-toggle-answer-blur {
background: none;
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
flex-shrink: 0;
}

.btn-toggle-answer-blur:hover {
background: var(--card-bg);
border-color: var(--primary);
color: var(--primary);
}

.btn-toggle-answer-blur svg {
width: 14px;
height: 14px;
}

/* ===== EXPLICATION DÉROULANTE (bouton "+" en bas à droite de la carte) ===== */
.btn-toggle-explication {
margin-left: auto;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid rgba(14, 138, 107, 0.2);
border-radius: 50%;
background: rgba(14, 138, 107, 0.08);
color: var(--primary);
cursor: pointer;
transition: all var(--transition);
}
.btn-toggle-explication i {
font-size: 16px;
line-height: 1;
}
.btn-toggle-explication:hover {
background: rgba(14, 138, 107, 0.14);
border-color: rgba(14, 138, 107, 0.35);
}
.btn-toggle-explication:active {
transform: scale(0.94);
}
.btn-toggle-explication[aria-expanded="true"] {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}

/* ===== IMAGE PERSO PAR CARTE (liste « Cartes apprises ») ===== */
.btn-card-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-card-image i { font-size: 16px; line-height: 1; }
.btn-card-image:hover { border-color: var(--primary); color: var(--primary); }
/* La vignette occupe l'espace libre du bas de carte (zone à droite des boutons),
   sans déplacer le bouton « + » : quand elle est vide ou masquée, elle disparaît. */
/* Image de la carte : dans la barre du bas, occupe l'espace libre à droite (avant le « + »). */
.learned-card-image {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.learned-card-image:empty { display: none; }
.images-hidden .learned-card-image { display: none !important; }
.learned-card-photo-inner {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.learned-card-img {
  height: 58px;
  width: auto;
  max-width: 150px;
  border-radius: 8px;
  object-fit: contain;     /* image entière, sans recadrage (portrait comme paysage) */
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: zoom-in;
  display: block;
}
/* Bouton supprimer : coin haut-droit de l'image. */
.card-image-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.card-image-remove:hover { background: var(--error); }

/* Image perso sur les cartes de révision/quiz (emplacement de l'emblème) */
.card-art.has-img {
  width: auto;
  height: auto;
  max-width: 240px;
}
.card-art-img {
  max-width: 240px;
  max-height: 170px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

/* Visionneuse plein écran */
.image-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.learned-explication {
display: none;
margin-top: 10px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
background: rgba(14, 138, 107, 0.06);
border-radius: 8px;
}
.learned-explication.visible {
display: block;
animation: explicationFadeIn 0.2s ease;
}
@keyframes explicationFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
.marked-badge {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: var(--marked);
background: rgba(190, 138, 58, 0.15);
padding: 2px 6px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.3px;
}

/* ===== NOTES MNÉMOTECHNIQUES (caché par défaut, bouton pour afficher) ===== */
.learned-note-section {
margin-top: 10px;
display: none;
flex-direction: column;
gap: 8px;
}

.learned-note-section.visible {
display: flex;
}

.btn-show-note {
align-self: none;
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
color: var(--primary);
background: rgba(14, 138, 107, 0.08);
border: 1px solid rgba(14, 138, 107, 0.15);
border-radius: 6px;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-show-note:hover {
background: rgba(14, 138, 107, 0.12);
border-color: rgba(14, 138, 107, 0.25);
}
.btn-show-note:active {
transform: scale(0.97);
}

/* V2.5.0: Style spécial quand note existe */
.btn-show-note.has-note {
color: var(--success);
background: rgba(14, 138, 107, 0.08);
border: 1px solid rgba(14, 138, 107, 0.2);
}
.btn-show-note.has-note:hover {
background: rgba(14, 138, 107, 0.12);
border-color: rgba(14, 138, 107, 0.3);
}

.learned-note-input {
width: 100%;
min-height: 60px;
padding: 10px 12px;
font-size: 12px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--text);
resize: vertical;
transition: border-color var(--transition);
}
.learned-note-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(14, 138, 107, 0.1);
}
.learned-note-input::placeholder {
color: var(--text-muted);
font-style: italic;
}

.btn-save-note {
align-self: flex-end;
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
background: rgba(14, 138, 107, 0.1);
border: 1px solid rgba(14, 138, 107, 0.2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition);
}
.btn-save-note:hover {
background: rgba(14, 138, 107, 0.15);
border-color: rgba(14, 138, 107, 0.3);
}
.btn-save-note:active {
transform: scale(0.97);
}

/* ===== LIBRARY (BIBLIOTHÈQUE) ===== */
.library-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.library-stat {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.library-stat-icon {
font-size: 18px;
font-weight: 700;
}
.library-stat-icon.learned { color: var(--success); }
.library-stat-icon.new { color: var(--text-muted); }
.library-stat-label {
font-size: 11px;
color: var(--text-secondary);
text-align: center;
}
.library-stat-value {
font-size: 16px;
font-weight: 700;
color: var(--text);
}

.library-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.library-item {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 12px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.library-item.marked {
background: var(--marked-bg);
}
.library-item-status {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
margin-top: 2px;
}
.library-item-status.learned {
background: var(--success-bg);
color: var(--success);
}
.library-item-status.new {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-muted);
}

.library-item-content {
flex: 1;
min-width: 0;
}

.library-item-question {
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
flex: 1;
}

/* ===== LIBRARY STICKY BAR ===== */
.library-sticky-bar {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-card);
padding: 8px 0 4px;
border-bottom: 1px solid var(--border-light);
margin-bottom: 4px;
}

/* ===== LEARNED STICKY BAR (avec filtres) ===== */
.learned-sticky-bar {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-card);
padding: 8px 0 4px;
border-bottom: 1px solid var(--border-light);
margin-bottom: 4px;
}

.learned-controls-row {
display: flex;
align-items: center;
gap: 8px;
}
.learned-controls-top {
justify-content: flex-start;
margin-bottom: 8px;
}
.learned-controls-filters {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.filter-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.filter-separator {
width: 100%;
height: 1px;
background: var(--border-light);
margin: 2px 0;
}
/* Rangée principale : Toutes/Difficiles + niveaux, tout sur une ligne (wrap si besoin). */
.filter-main-row {
gap: 7px;
align-items: center;
}
/* Fin séparateur vertical entre filtres de difficulté et filtres de niveau. */
.filter-divider {
flex: 0 0 auto;
align-self: stretch;
width: 1px;
min-height: 20px;
margin: 0 3px;
background: var(--border-light);
}
.filter-level {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 0;
padding: 6px 10px;
font-size: 11px;
white-space: nowrap;
}
/* Par défaut : seulement l'icône + le compteur. */
.filter-level .filter-level-label {
display: none;
}
/* Au clic (bouton actif) : on révèle le titre. */
.filter-level.active .filter-level-label {
display: inline;
}
/* Compteur discret pour ne pas écraser le reste (ex. les 1983 nouvelles). */
.filter-level-count {
opacity: 0.5;
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ===== Filtres par catégorie ===== */
.filter-cats-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
}
.filter-cats-caret {
transition: transform var(--transition);
font-size: 12px;
opacity: 0.7;
}
.filter-cats-toggle[aria-expanded="true"] .filter-cats-caret {
transform: rotate(180deg);
}
.filter-row-cats {
flex-wrap: wrap;
gap: 6px;
width: 100%;
margin-top: 6px;
}
.filter-row-cats.collapsed {
display: none;
}
.filter-cat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
font-size: 11px;
}
.filter-cat .filter-cat-label {
white-space: nowrap;
}
.filter-cat .filter-level-count {
opacity: 0.65;
font-variant-numeric: tabular-nums;
}
.filter-cat .ph {
font-size: 13px;
opacity: 0.85;
}

.filter-btn {
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition);
}
.filter-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.filter-btn.active {
background: rgba(14, 138, 107, 0.12);
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 0 0 3px rgba(14, 138, 107, 0.08);
transform: translateY(-1px);
}

.filter-btn:active {
transform: translateY(0px) scale(0.97);
}

/* ===== CARD LEVEL ===== */
.btn-card-level {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.btn-card-level:hover { opacity: 1; }

.modal-card-level .card-level-body {
  text-align: center;
  padding: 8px 0 4px;
}
.card-level-badge {
  font-size: 36px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.card-level-badge span:last-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
#card-level-msg {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.card-level-seen {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ===== QUIZ (FIXED) ===== */
.flashcard.quiz{
touch-action: pan-y;
user-select: none;
}
.card-front-quiz {
background: linear-gradient(135deg, var(--quiz) 0%, var(--quiz-dark) 100%);
}
.flashcard.quiz.showing-answer .card-back {
background: linear-gradient(135deg, var(--success) 0%, #0A6F56 100%);
}
.flashcard.quiz.showing-answer.wrong-answer .card-back {
background: linear-gradient(135deg, var(--error) 0%, #9A5E4B 100%);
}

/* ===== ADD CARD FORM ===== */
.add-card-form {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.form-input {
width: 100%;
padding: 14px 16px;
font-size: 15px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg);
color: var(--text);
resize: vertical;
transition: border-color var(--transition);
}
.form-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(14, 138, 107, 0.1);
}
.form-input::placeholder {
color: var(--text-muted);
}

/* ===== DELETE CARD BUTTON ===== */
.btn-delete-card {
margin-top: 10px;
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
color: var(--error);
background: var(--error-bg);
border: 1px solid rgba(181, 112, 90, 0.2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition);
}
.btn-delete-card:hover {
background: rgba(181, 112, 90, 0.18);
border-color: rgba(181, 112, 90, 0.4);
}
.btn-delete-card:active { transform: scale(0.97); }

.custom-card-item {
position: relative;
}

/* ===== FOOTER VERSION ===== */
/* ===== TAB BAR ===== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 76px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 2000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.tab-bar.hidden {
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  position: relative;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 0;
}

.tab-bar-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 32px;
  height: 2px;
  background: var(--primary);
  border-radius: 0 0 2px 2px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-bar-item.active::before {
  transform: translateX(-50%) scaleX(1);
}

.tab-bar-item.active {
  color: var(--primary);
}

.tab-bar-item:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}

.tab-bar-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.tab-bar-item.active .tab-bar-icon {
  transform: scale(1.08);
}

.tab-bar-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Padding bottom sur les écrans pour ne pas que le contenu soit masqué */
.screen {
  padding-bottom: 92px !important;
}

/* Dark mode fine-tuning */
body.dark-mode .tab-bar {
  background: #0F1923;
  border-top-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* Light mode subtle shadow */
.tab-bar {
  box-shadow: 0 -1px 12px rgba(15, 23, 42, 0.04);
}

.app-footer{
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(248,250,252,0.75);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 1500;
}

@media (max-width: 480px) {
  .app-footer {
    display: none;
  }
}

/* ===== MODAL ===== */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
}
.modal.active { display: flex; align-items: center; justify-content: center; }
.modal-content {
  background: var(--bg-card);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: modalEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--bg);
cursor: pointer;
font-size: 18px;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
}
/* Réglage de la vitesse de la voix */
.voice-settings-intro {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.5;
}
/* Choix de la voix */
.voice-field {
  margin: 0 0 20px;
}
.voice-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.voice-select {
  width: 100%;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}
.voice-select:focus {
  outline: none;
  border-color: var(--primary);
}
.voice-rate-value {
  text-align: center;
  margin-bottom: 14px;
}
.voice-rate-value #voice-rate-display {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}
.voice-rate-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.voice-rate-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg-card);
  box-shadow: var(--shadow-md, 0 2px 6px rgba(0,0,0,0.2));
  cursor: pointer;
}
.voice-rate-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg-card);
  cursor: pointer;
}
.voice-rate-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

#debug-content {
background: var(--bg);
padding: 16px;
border-radius: var(--radius-sm);
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
white-space: pre-wrap;
color: var(--text-secondary);
border: 1px solid var(--border);
}

/* SOURCE MODAL */
.source-modal-url {
display: block;
color: var(--primary);
text-decoration: none;
word-break: break-all;
margin-top: 12px;
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-size: 13px;
transition: all var(--transition);
}
.source-modal-url:hover {
background: rgba(14, 138, 107, 0.05);
border-color: var(--primary);
}

/* ===== V2.4.0: MODALES MéTHODE MéMORISATION ===== */

/* MODALE ONBOARDING */
.modal-onboarding .onboarding-memory-content {
text-align: center;
}
.modal-onboarding .onboarding-intro {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 20px;
line-height: 1.5;
}
.modal-onboarding .btn {
margin-bottom: 8px;
}

/* MODALE MéTHODE "2 éTAPES" */
.modal-memory-method {
max-width: 540px;
}
.memory-method-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.memory-step {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 18px;
}
.memory-step-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.memory-step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}
.memory-step-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.memory-step-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 10px;
line-height: 1.5;
}
.memory-step-text:last-of-type {
margin-bottom: 0;
}
.memory-emphasis {
color: var(--primary);
font-weight: 600;
}
.memory-example {
background: rgba(14, 138, 107, 0.05);
border: 1px solid rgba(14, 138, 107, 0.15);
border-radius: var(--radius-sm);
padding: 12px;
margin-top: 12px;
}
.memory-example-label {
font-size: 11px;
font-weight: 600;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.memory-example-text {
font-size: 13px;
color: var(--text);
line-height: 1.4;
}
.memory-warning {
font-size: 14px;
color: var(--error);
font-weight: 600;
margin-top: 10px;
}

/* MODALE ENCODER (avec textarea) */
.modal-encode {
max-width: 480px;
}
.encode-modal-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.encode-question {
font-size: 14px;
font-weight: 600;
color: var(--text);
padding: 10px 12px;
background: rgba(14, 138, 107, 0.05);
border-left: 0px solid var(--primary);
border-radius: var(--radius-sm);
}
.encode-answer {
font-size: 13px;
color: var(--text-secondary);
padding: 10px 12px;
background: var(--bg);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.encode-instruction {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
text-align: center;
}

/* Indice du mode encodage FORCÉ (fin de session) : cadre comme une aide, pas un péage. */
.encode-forced-hint {
font-size: 13px;
line-height: 1.45;
color: var(--primary);
background: color-mix(in srgb, var(--primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
border-radius: 12px;
padding: 10px 12px;
margin: 4px 0 12px;
text-align: center;
}

/* ===== TOAST ===== */
.toast {
position: fixed;
bottom: calc(92px + env(safe-area-inset-bottom, 0px));  /* au-dessus de la tab bar (76px) */
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--text);
color: var(--bg);
padding: 14px 20px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
max-width: 88%;
text-align: center;
opacity: 0;
pointer-events: none;  /* ne jamais intercepter les clics (ex. tab bar) */
transition: all 0.3s ease;
z-index: 2100;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { background: var(--success); color: white; }
.toast.error { background: var(--error); color: white; }

/* ===== END OPTIONAL ACTIONS ===== */
.end-optional-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover {
  background: var(--primary);
  color: #fff;
}

/* ===== XP SYSTEM ===== */
.xp-row {
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
  margin: 6px 0 10px;
}
.xp-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 6px;
  margin: 8px 0 0;
  overflow: hidden;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.xp-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 9999;
}
.xp-toast.visible { opacity: 1; }
.xp-toast.bonus {
  background: linear-gradient(135deg, #BE8A3A 0%, #D97706 100%);
  color: #000;
  font-size: 15px;
  padding: 8px 18px;
  animation: xpBonusPulse 0.4s ease;
}
@keyframes xpBonusPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ===== SCORE QUI JAILLIT (+2) ===== */
.score-pop {
  position: fixed;
  z-index: 10001;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--success, #0E8A6B);
  text-shadow: 0 2px 16px rgba(14, 138, 107, 0.55);
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  animation: scorePop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes scorePop {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.4); }
  22%  { opacity: 1; transform: translate(-50%, -75%) scale(1.3); }
  55%  { opacity: 1; transform: translate(-50%, -125%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -210%) scale(0.95); }
}

/* ===== ÉVOLUTION DE CARTE ===== */
.card-evo-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.card-evo-overlay.active { opacity: 1; }
.card-evo-content {
  text-align: center;
  padding: 22px 32px;
  border-radius: 22px;
  background: rgba(18, 18, 24, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 64px rgba(14, 138, 107, 0.38);
  animation: cardEvoPop 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-evo-content.mastered {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 70px rgba(190, 138, 58, 0.5);
}
.card-evo-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--success, #0E8A6B);
  margin-bottom: 14px;
}
.card-evo-content.mastered .card-evo-label { color: var(--accent-gold, #BE8A3A); }
.card-evo-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 46px;
}
.card-evo-from {
  color: var(--text-muted, #888);
  animation: evoFromFade 1.5s ease forwards;
}
.card-evo-arrow { font-size: 22px; color: var(--text-muted, #888); }
.card-evo-to {
  color: var(--accent-gold, #BE8A3A);
  animation: evoToPop 0.7s 0.12s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.card-evo-name {
  margin-top: 12px;
  font-size: 23px;
  font-weight: 800;
  color: #fff;
}

/* --- Variante discrète (palier "À consolider") : petit pop en haut --- */
.card-evo-overlay.discreet {
  align-items: flex-start;
  justify-content: center;
  padding-top: 72px;
}
.card-evo-overlay.discreet .card-evo-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(18, 18, 24, 0.9);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  animation: cardEvoDiscreet 1.2s ease forwards;
}
.card-evo-overlay.discreet .card-evo-label { display: none; }
.card-evo-overlay.discreet .card-evo-icons { font-size: 22px; gap: 8px; }
.card-evo-overlay.discreet .card-evo-arrow { font-size: 14px; }
.card-evo-overlay.discreet .card-evo-to { animation: none; }
.card-evo-overlay.discreet .card-evo-from { animation: none; opacity: 0.45; }
.card-evo-overlay.discreet .card-evo-name {
  margin-top: 0;
  font-size: 15px;
  font-weight: 700;
}
@keyframes cardEvoDiscreet {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.92); }
  15%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@keyframes cardEvoPop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes evoToPop {
  0%   { transform: scale(0.3) rotate(-12deg); }
  60%  { transform: scale(1.32) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes evoFromFade {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0.22; transform: scale(0.82); }
}

/* ===== TIER UP OVERLAY ===== */
.tier-up-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.tier-up-overlay.active { opacity: 1; pointer-events: auto; }
.tier-up-content { text-align: center; animation: tierUpPop 0.5s cubic-bezier(0.16,1,0.3,1); }
.tier-up-icon { font-size: 56px; color: var(--accent-gold, #BE8A3A); margin-bottom: 12px; }
.tier-up-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 4px; }
.tier-up-name { font-size: 28px; font-weight: 800; color: #fff; }
@keyframes tierUpPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== SESSION XP RECAP (end-screen) ===== */
.session-xp-recap {
  width: 100%; margin: 20px 0; padding: 16px;
  background: var(--surface, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 14px;
}
/* Relevé de séance factuel (révisées / nouvelles / à ancrer) */
.session-recap { display: flex; justify-content: space-around; gap: 8px; }
.session-recap-item { display: flex; flex-direction: column; align-items: center; }
.session-recap-num { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.session-recap-lbl { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sxp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sxp-earned { font-size: 18px; font-weight: 700; color: var(--accent-gold, #BE8A3A); }
.sxp-streak { font-size: 13px; color: var(--text-muted); }
.sxp-bar-wrap {
  width: 100%; height: 8px;
  background: var(--border); border-radius: 8px; overflow: hidden;
}
.sxp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-gold, #BE8A3A) 100%);
  border-radius: 8px;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
.sxp-tier-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; font-size: 13px;
}
.sxp-tier-current { font-weight: 600; color: var(--text-primary); }
.sxp-tier-next { color: var(--text-muted); }
.sxp-details-btn {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-primary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.2s;
}
.sxp-details-btn:hover { background: var(--surface-hover, rgba(255,255,255,0.08)); }

/* ===== SESSION XP DETAIL MODAL ===== */
.modal-xp-session { max-width: 400px; max-height: 75vh; overflow-y: auto; }
.sxp-modal-total {
  text-align: center; font-size: 24px; font-weight: 800;
  color: var(--accent-gold, #BE8A3A);
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border);
}
.sxp-detail-list { padding: 8px 0; }
.sxp-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 14px;
}
.sxp-detail-row:last-child { border-bottom: none; }
.sxp-detail-reason { color: var(--text-primary); }
.sxp-detail-amount { font-weight: 700; color: var(--accent-gold, #BE8A3A); }
.sxp-detail-row.bonus { background: rgba(190, 138, 58, 0.08); border-radius: 8px; }
.sxp-detail-row.bonus .sxp-detail-reason { font-weight: 700; color: var(--accent-gold, #BE8A3A); }

/* ===== XP PROFILE MODAL ===== */
.modal-xp-profile { max-width: 420px; max-height: 85vh; overflow-y: auto; }
.xp-profile-body { padding: 0 4px; }
.xp-profile-bar-section { padding: 12px 0 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); margin-bottom: 4px; }
.xp-profile-label { font-size: 18px; font-weight: 700; text-align: center; }
.xp-profile-next { font-size: 12px; opacity: 0.5; text-align: center; margin-top: 4px; }
.xp-profile-section { padding: 14px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); }
.xp-profile-section:last-child { border-bottom: none; }
.xp-profile-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin-bottom: 10px; }
.xp-tiers-list { display: flex; flex-direction: column; gap: 4px; }
.xp-tier-row { display: flex; align-items: center; padding: 8px 12px; border-radius: 10px; font-size: 14px; gap: 10px; }
.xp-tier-row.current { background: var(--accent, #3a6fd8); color: white; font-weight: 600; }
.xp-tier-row .tier-xp { margin-left: auto; opacity: 0.7; font-size: 12px; }
.xp-tier-row.current .tier-xp { opacity: 1; }
.xp-scoring-list { display: flex; flex-direction: column; gap: 6px; }
.xp-scoring-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.xp-gain { font-weight: 600; }
.xp-gain.muted { opacity: 0.4; font-weight: 400; }

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
.screen { padding: 24px 16px; }
.flashcard-text { font-size: 20px; }
.btn-answer { padding: 16px 12px; font-size: 14px; }

/* Session cards responsive */
.session-cards {
grid-template-columns: 1fr;
}
.session-card {
flex-direction: row;
justify-content: flex-start;
text-align: left;
}
.session-card-icon {
margin-bottom: 0;
margin-right: 12px;
}

/* Modales responsive */
.modal-content {
width: 95%;
padding: 20px;
}
.memory-step {
padding: 14px;
}
}
@media (max-width: 480px) {
  /* Touch targets minimum 44px */
  .icon-btn {
    width: 44px;
    height: 44px;
  }
  
  .btn-toggle-mark,
.btn-show-source,
  .btn-speak-answer,
  .btn-delete-learned-card {
    min-width: 36px;
    min-height: 36px;
  }
  
  /* Buttons pleine largeur */
  .btn {
    padding: 18px 24px;
    font-size: 16px;
  }
  
  /* Spacing optimisé */
  .session-cards {
    gap: 10px;
  }
  
  .home-stats-row {
    gap: 8px;
  }

  .home-stat-card {
    padding: 12px 6px 10px;
  }

  .home-stat-card-value {
    font-size: 19px;
  }

  .home-nav-grid {
    gap: 8px;
  }
}
/* ===== TOGGLE ANSWERS BUTTON ===== */
.toggle-answers-btn {
font-size: 12px;
color: var(--primary);
font-weight: 600;
}

/* ===== LEARNED COUNTER ===== */
.learned-counter {
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-top: 4px;
margin-bottom: 8px;
}

/* ===== DATE SEPARATOR (à la place de pack separator) ===== */
.date-separator {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 12px;
}
.date-separator-line {
flex: 1;
height: 1px;
background: var(--border);
}
.date-separator-label {
font-size: 12px;
font-weight: 600;
color: var(--primary);
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}

/* ===== PACK SEPARATOR (bibliothèque uniquement) ===== */
.pack-separator {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 10px;
}
.pack-separator-line {
flex: 1;
height: 1px;
background: var(--border);
}
.pack-separator-label {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}



/* ===== QUIZ SETUP ===== */
.quiz-setup-form {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.quiz-source-options {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-top: 6px;
}
.quiz-source-btn {
padding: 14px 12px;
font-size: 13px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition);
text-align: center;
}
.quiz-source-btn:hover {
border-color: var(--quiz);
color: var(--quiz);
}
.quiz-source-btn.active {
background: var(--quiz-bg);
border-color: var(--quiz);
color: var(--quiz);
}
.quiz-source-info {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.4;
}
.quiz-count-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 6px;
}
.quiz-count-btn {
padding: 12px 8px;
font-size: 15px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition);
}
.quiz-count-btn:hover {
border-color: var(--quiz);
color: var(--quiz);
}
.quiz-count-btn.active {
background: var(--quiz-bg);
border-color: var(--quiz);
color: var(--quiz);
}
.flashcard-source {
position: absolute;
bottom: 12px;
left: 16px;
right: 16px;
font-size: 12px;
text-align: center;
}

.flashcard-source a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color var(--transition);
display: inline-flex;
align-items: center;
gap: 4px;
}

.flashcard-source a:hover {
color: rgba(255, 255, 255, 0.8);
}

.flashcard-source a::before {
content: "\2139";
font-size: 11px;
opacity: 0.7;
}
.total-cards-badge{
position: fixed;
right: 14px;
bottom: 14px;
z-index: 999;
padding: 8px 10px;
border-radius: 999px;
font-size: 12px;
line-height: 1;
background: rgba(0,0,0,0.55);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
user-select: none;
}
/* ===== MODE MAINS LIBRES ===== */
.quiz-mode-toggle {
display: flex;
gap: 8px;
margin: 16px 0;
}

.mode-toggle-btn {
flex: 1;
padding: 12px;
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--text-secondary);
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 10px
}

.mode-toggle-btn:hover {
border-color: var(--primary);
}

.mode-toggle-btn.active {
border-color: var(--primary);
background: rgba(14, 138, 107, 0.1);
color: var(--primary);
}

#handsfree-settings {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}

.setting-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.setting-row:last-child {
margin-bottom: 0;
}

.setting-row label {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}

.counter-controls {
display: flex;
align-items: center;
gap: 12px;
}

.btn-counter {
width: 32px;
height: 32px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-primary);
border-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}

.btn-counter:hover {
border-color: var(--primary);
background: rgba(14, 138, 107, 0.05);
}

.counter-controls span {
min-width: 30px;
text-align: center;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}

/* Champ de saisie libre des secondes de pause (mains libres) */
.counter-input {
width: 56px;
text-align: center;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 4px;
}
.counter-input:focus {
outline: none;
border-color: var(--primary);
}
.counter-input::-webkit-inner-spin-button,
.counter-input::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.library-stat {
  cursor: pointer;
  transition: background 0.2s;
}
.library-stat:hover {
  background: rgba(128,128,128,0.12);
  border-radius: 8px;
} 
.library-stat.active {
  background: rgba(128,128,128,0.22);
  border-radius: 8px;
  outline: 2px solid var(--accent);
}
.learned-item.unseen-card {
  border: 1px solid var(--error, #e74c3c);
}
.learned-list.answers-hidden .blurred-answer {
  filter: blur(6px);
  user-select: none;
}
/* ===== CONTENT FADE ON FILTER ===== */
@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.learned-list.refreshing {
  pointer-events: none;
}
.learned-list.refreshing .learned-item {
  animation: contentFadeIn 0.22s cubic-bezier(0.0, 0.0, 0.2, 1) both;
}
.learned-list.refreshing .learned-item:nth-child(1) { animation-delay: 0ms; }
.learned-list.refreshing .learned-item:nth-child(2) { animation-delay: 30ms; }
.learned-list.refreshing .learned-item:nth-child(3) { animation-delay: 60ms; }
.learned-list.refreshing .learned-item:nth-child(4) { animation-delay: 90ms; }
.learned-list.refreshing .learned-item:nth-child(5) { animation-delay: 120ms; }

/* ===== SKELETON ===== */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-item {
  height: 72px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--border) 25%, var(--border-light) 50%, var(--border) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.2s ease infinite;
  margin-bottom: 10px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.session-summary-line {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 10px 4px 0;
  line-height: 1.6;
  padding: 0 8px;
}
/* ═══════════════════════════════════════════
   KULTRA GLOBAL ANIMATIONS — Premium Layer
   ═══════════════════════════════════════════ */

/* --- 1. UNIVERSAL PRESS FEEDBACK (tous les éléments cliquables) --- */
.btn,
.nav-item,
.icon-btn,
.card-option,
.learned-item,
[role="button"],
[onclick] {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

/* Ripple container */
.btn::after,
.nav-item::after,
.icon-btn::after,
.card-option::after,
[role="button"]::after,
[onclick]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.35s ease;
  pointer-events: none;
  border-radius: inherit;
}

.btn:active::after,
.nav-item:active::after,
.icon-btn:active::after,
.card-option:active::after,
[role="button"]:active::after,
[onclick]:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: opacity 0s, transform 0s;
}

/* --- 2. SCREEN TRANSITIONS (upgrade existant) --- */
@keyframes screenSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screenSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

.screen-enter {
  animation: screenSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.screen-exit {
  animation: screenSlideOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* --- 3. MODAL ENTRANCE (upgrade global) --- */
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.95); }
}

.modal.active .modal-content,
.modal-encode.active .encode-modal-content {
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Backdrop fade */
.modal.active,
.tier-up-overlay.active {
  animation: backdropIn 0.25s ease forwards;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- 4. STAGGER AUTO SUR LISTES --- */
@keyframes itemReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-grid > *,
.stats-hero > *,
.phase-pills > * {
  animation: itemReveal 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.nav-grid > *:nth-child(1),
.stats-hero > *:nth-child(1),
.phase-pills > *:nth-child(1) { animation-delay: 0ms; }
.nav-grid > *:nth-child(2),
.stats-hero > *:nth-child(2),
.phase-pills > *:nth-child(2) { animation-delay: 50ms; }
.nav-grid > *:nth-child(3),
.stats-hero > *:nth-child(3),
.phase-pills > *:nth-child(3) { animation-delay: 100ms; }
.nav-grid > *:nth-child(4),
.stats-hero > *:nth-child(4),
.phase-pills > *:nth-child(4) { animation-delay: 150ms; }

/* --- 5. MICRO-INTERACTION: Bouton CTA pulse subtil --- */
@keyframes ctaSoftPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(190, 138, 58, 0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(190, 138, 58, 0); }
}

.btn-cta:not(:active) {
  animation: ctaSoftPulse 3s ease-in-out infinite;
}

/* --- 6. REDUCED MOTION (accessibilité) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* Modal info révision */
.home-phase-row.clickable {
  cursor: pointer;
}
.revision-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
}
.revision-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.revision-info-count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-blue, #0E8A6B);
  margin: 0 0 0.75rem 0;
}
.revision-info-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary, #1e293b);
  margin: 0 0 1.5rem 0;
}
.revision-info-btn {
  background: var(--accent-blue, #0E8A6B);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.revision-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.5;
  cursor: pointer;
}
/* ===== BOTTOM SHEET "PLUS" ===== */
.more-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 2500;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.more-overlay.visible {
  display: block;
  opacity: 1;
}
.more-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 540px;
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  z-index: 2600;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.12);
  touch-action: none; /* le glisser vertical (tirer pour fermer) est géré en JS */
}
body.dark-mode .more-sheet {
  background: #131E2E;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
}
.more-sheet.open {
  transform: translateX(-50%) translateY(0);
}
/* Zone d'accroche du haut : plus haute pour être facile à attraper au doigt */
.more-sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 4px;
  background: var(--border);
  margin: 6px auto 12px;
  cursor: grab;
}
.more-sheet-handle:active {
  cursor: grabbing;
}
.more-sheet-items {
  display: flex;
  flex-direction: column;
}
.more-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.more-sheet-item:active {
  background: rgba(14, 138, 107, 0.06);
}
.more-sheet-item svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.more-sheet-item-muted {
  color: var(--text-secondary);
}
.more-sheet-item-danger {
  color: var(--error);
}
.more-sheet-item-danger svg {
  color: var(--error);
}
.more-sheet-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 24px;
}/* ===== PHASE STEPPER (HOME) ===== */
.home-phase-row.phase-active {
  border-color: var(--primary);
  background: rgba(14, 138, 107, 0.04);
  box-shadow: 0 0 0 1px var(--primary);
}
body.dark-mode .home-phase-row.phase-active {
  background: rgba(14, 138, 107, 0.10);
}

.home-phase-row.phase-done {
  opacity: 0.45;
}
.home-phase-row.phase-done .home-phase-label,
.home-phase-row.phase-done .home-phase-desc {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.home-phase-row.phase-pending {
  opacity: 0.55;
}

.home-phase-row.phase-clickable {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.home-phase-row.phase-clickable:active {
  transform: scale(0.99);
}

.phase-check {
  color: var(--success);
}
.phase-count-done {
  color: var(--success);
  font-size: 16px;
  font-weight: 700;
}
/* === END SCREEN RECAP === */
.end-coaching-msg {
  text-align: center;
  margin-bottom: 24px;
}
.end-coaching-msg .ecm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.end-coaching-msg .ecm-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}
.end-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}
.end-recap-cell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 8px;
  text-align: center;
}
.end-recap-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.end-recap-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 4px;
}
.end-next-session {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
}
.end-next-session strong {
  color: var(--text-primary);
  font-weight: 600;
}
/* ===== QUIZ SOURCE CARDS ===== */
.quiz-source-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-size: 15px;
}
.quiz-source-card:hover {
  border-color: var(--primary-light);
  background: #F0F4FF;
}
.quiz-source-card.active {
  border-color: var(--primary);
  background: #EFF6FF;
}
.qsc-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.qsc-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qsc-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.qsc-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.quiz-source-card.active .qsc-title {
  color: var(--primary);
}
/* Dark mode : les fonds blancs bleutés (#F0F4FF / #EFF6FF) codés en dur au-dessus
   laissaient le texte crème (var(--text)) illisible. On repasse sur des fonds
   sombres teintés, cohérents avec le thème. */
body.dark-mode .quiz-source-card:hover { background: var(--bg-elevated); }
body.dark-mode .quiz-source-card.active { background: var(--quiz-bg); }

/* ========== STATS SCREEN ========== */
.stats-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.stats-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
}
.stats-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.stats-kpi-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stats-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.stats-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.stats-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stats-mastered-total { font-size: 13px; font-weight: 700; color: var(--primary); }
/* Cible suivante (boussole factuelle, sous la grille catégories) */
.next-threshold { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.nt-label { font-size: 13px; color: var(--text-secondary); }
.nt-frac { font-size: 22px; font-weight: 700; color: var(--text); margin: 4px 0 8px; }
.nt-bar { width: 100%; height: 8px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.nt-bar-fill { height: 100%; background: var(--primary); border-radius: var(--radius-sm); transition: width .3s ease; }
/* Réussites (jalons factuels, modèle Search Console — sobre, aucune célébration) */
.reussites-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin: 20px 0 10px; }
.reussite-item { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; }
.reussite-hex { position: relative; flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background: var(--gold); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.reussite-hex.done { background: var(--gold-light); }
.reussite-check { position: absolute; right: -4px; bottom: -4px; font-size: 13px; color: #fff; background: var(--primary); border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; }
.reussite-body { flex: 1; min-width: 0; }
.reussite-title { font-size: 15px; font-weight: 600; color: var(--text); }
.reussite-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.reussite-bar { margin-top: 8px; width: 100%; height: 8px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.reussite-bar-fill { height: 100%; background: var(--primary); border-radius: var(--radius-sm); transition: width .3s ease; }
.reussites-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 14px; }
.stats-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.stats-toggle-btn {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.stats-toggle-btn.active {
  background: var(--primary);
  color: #fff;
}
.stats-retention-bar-wrap {
  margin-bottom: 8px;
}
.stats-retention-bar {
  display: flex;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--border);
}
.stats-retention-green {
  background: var(--success);
  transition: width .3s ease;
}
.stats-retention-red {
  background: var(--danger, #B5705A);
  transition: width .3s ease;
}
.stats-retention-detail {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}
.stats-chart-container {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.stats-projection {
  font-size: 13px;
  color: var(--gold);
  text-align: center;
  font-weight: 600;
  margin: 8px 0 0;
  min-height: 18px;
}
.stats-heatmap-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stats-heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  gap: 2px;
}
.stats-heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--border);
}
.stats-heatmap-cell[data-level="1"] { background: rgba(14, 138, 107, 0.25); }
.stats-heatmap-cell[data-level="2"] { background: rgba(14, 138, 107, 0.50); }
.stats-heatmap-cell[data-level="3"] { background: rgba(14, 138, 107, 0.75); }
.stats-heatmap-cell[data-level="4"] { background: #0E8A6B; }
.stats-heatmap-days {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-muted);
}
.stats-cat-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.stats-cat-label {
  width: 100px;
  font-size: 12px;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-cat-bar-bg {
  flex: 1;
  height: 16px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 8px;
}
.stats-cat-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width .3s ease;
}
.stats-cat-pct {
  width: 36px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}
.stats-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: -2px 0 10px;
  line-height: 1.4;
}
.stats-title-count {
  font-weight: 600;
  color: var(--text-muted);
}
.stats-weak-revise {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.stats-weakest {
  max-height: 320px;
  overflow-y: auto;
}
.stats-weak-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.stats-weak-item:last-child {
  border-bottom: none;
}
.stats-weak-item:hover,
.stats-weak-item:focus-visible {
  background: var(--bg-subtle, rgba(0,0,0,.03));
  outline: none;
}
.stats-weak-edit {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 16px;
  color: var(--text-muted);
  opacity: .55;
}
.stats-weak-item:hover .stats-weak-edit,
.stats-weak-item:focus-visible .stats-weak-edit {
  opacity: 1;
  color: var(--accent, var(--text));
}
.stats-weak-rank {
  width: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger, #B5705A);
  flex-shrink: 0;
}
.stats-weak-content {
  flex: 1;
  min-width: 0;
}
.stats-weak-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-weak-q {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-weak-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.stats-weak-badge.urgent {
  color: var(--error);
  background: var(--error-bg);
}
.stats-weak-badge.high {
  color: var(--gold);
  background: rgba(190, 138, 58, 0.14);
}
.stats-weak-badge.mid {
  color: var(--text-secondary);
  background: var(--border-light);
}
.stats-weak-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 4px;
  overflow: hidden;
}
.stats-weak-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--error);
}
/* Couleur barre + rang alignées sur le niveau d'urgence */
.stats-weak-item.weak-urgent .stats-weak-bar-fill { background: var(--error); }
.stats-weak-item.weak-high .stats-weak-bar-fill { background: var(--gold); }
.stats-weak-item.weak-mid .stats-weak-bar-fill { background: var(--text-secondary); }
.stats-weak-item.weak-urgent .stats-weak-rank { color: var(--error); }
.stats-weak-item.weak-high .stats-weak-rank { color: var(--gold); }
.stats-weak-item.weak-mid .stats-weak-rank { color: var(--text-secondary); }
.stats-weak-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.stats-weak-todo {
  color: var(--danger, #B5705A);
  font-weight: 600;
}
.quiz-count-input {
  width: 64px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 0 4px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.quiz-count-input::-webkit-inner-spin-button,
.quiz-count-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.quiz-count-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ===== PROFIL D'INTENSITÉ ===== */
.home-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin: 10px 0 12px 0;
  background: var(--surface, #f7f8fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  font: inherit;
  color: var(--text-primary, #111);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}
.home-profile-badge:hover { background: var(--surface-hover, #eef0f3); }
.home-profile-badge i { font-size: 18px; opacity: .8; }
.hpb-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #6b7280);
  flex: 1;
}
.hpb-value {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary, #0E8A6B);
  color: #fff;
}
.home-profile-badge[data-profile="leger"] .hpb-value { background: #0A6F56; }
.home-profile-badge[data-profile="standard"] .hpb-value { background: #0E8A6B; }
.home-profile-badge[data-profile="intensif"] .hpb-value { background: #B5705A; }

.modal-intensity { max-width: 460px; }
.intensity-body { padding: 4px 4px 8px 4px; }
.intensity-intro {
  font-size: 13px;
  color: var(--text-secondary, #4b5563);
  margin: 0 0 14px 0;
  line-height: 1.45;
}

/* ===== Choix du nombre de nouvelles cartes (apprentissage libre) ===== */
.free-learn-body { padding: 4px 4px 10px 4px; }
.free-learn-intro {
  font-size: 13px;
  color: var(--text-secondary, #4b5563);
  margin: 0 0 16px 0;
  line-height: 1.45;
}
.free-learn-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.free-learn-choice {
  padding: 18px 8px;
  font-size: 22px;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: transform .1s ease, border-color .2s ease, background .2s ease;
}
.free-learn-choice:hover { border-color: var(--primary); }
.free-learn-choice:active { transform: scale(0.96); }
.free-learn-custom {
  display: flex;
  gap: 8px;
}
#free-learn-custom-input {
  flex: 1;
  min-width: 0;
  padding: 14px 14px;
  font-size: 15px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}
.free-learn-custom .btn { width: auto; padding-left: 20px; padding-right: 20px; white-space: nowrap; }
.intensity-options { display: flex; flex-direction: column; gap: 10px; }
.intensity-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--surface, #f7f8fa);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s, transform .1s;
}
.intensity-option:hover { background: var(--surface-hover, #eef0f3); }
.intensity-option:active { transform: scale(.99); }
.intensity-option.active {
  border-color: var(--primary, #0E8A6B);
  background: var(--surface-hover, #eef0f3);
}
.intensity-option-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.intensity-option-name { font-size: 15px; font-weight: 700; }
.intensity-option-active-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary, #0E8A6B);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.intensity-option-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--text-secondary, #4b5563);
  margin-bottom: 8px;
}
.intensity-option-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   TUNNEL D'ENCODAGE (cartes neuves — récupération active)
   ============================================================ */
#tunnel-screen { padding-bottom: 24px; }

.tunnel-topbar-spacer { flex: 1; }
.tunnel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gold);
  margin: 10px 0 2px;
}
.tunnel-title i { font-size: 23px; }
.tunnel-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.tunnel-progress-wrap { margin-top: 12px; }
.tunnel-progress-bar {
  height: 4px;
  width: 100%;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.tunnel-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.tunnel-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
}

.tunnel-step-tag {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(190, 138, 58, 0.12);
  padding: 5px 12px;
  border-radius: 999px;
}

.tunnel-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tunnel-question {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
  text-align: center;
  margin: 0;
}

.tunnel-stage { display: flex; flex-direction: column; gap: 14px; }

.tunnel-answer-input {
  width: 100%;
  resize: none;
  font-size: 15px;
}

.tunnel-reveal-btn {
  width: 100%;
  transition: opacity 0.25s ease, transform 0.1s ease;
}
.tunnel-reveal-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.tunnel-reveal-btn:not(:disabled) {
  animation: tunnelReady 0.3s ease;
}
@keyframes tunnelReady { from { transform: scale(0.97); } to { transform: scale(1); } }

.tunnel-hint-text {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
  margin: 0;
}

/* --- Révélation --- */
.tunnel-answer-block {
  text-align: center;
  padding-bottom: 4px;
  animation: tunnelReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tunnelReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.tunnel-answer-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--success);
  margin: 6px 0 0;
  line-height: 1.3;
}

.tunnel-your-answer {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.tunnel-your-answer strong { color: var(--text-secondary); font-weight: 600; }
.tunnel-your-answer.correct,
.tunnel-your-answer.close,
.tunnel-your-answer.wrong { font-size: 14px; }
.tya-badge { font-weight: 700; color: var(--success); }
.tya-badge.close { color: var(--gold); }
.tya-badge.wrong { color: var(--error); }
.tya-badge i { font-size: 16px; vertical-align: -3px; }
.tya-typed { color: var(--text-muted); font-weight: 400; }
.tya-note { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--gold); }

.tunnel-accroche {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--marked-bg);
  border: 1px solid rgba(190, 138, 58, 0.22);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tunnel-accroche i { color: var(--gold); font-size: 18px; margin-top: 1px; flex-shrink: 0; }

.tunnel-add-accroche {
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.tunnel-add-accroche:hover { color: var(--gold); }
.tunnel-add-accroche i { font-size: 14px; vertical-align: -1px; }

/* --- Auto-évaluation 4 niveaux --- */
.tunnel-eval-q, .tunnel-retest .tunnel-eval-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  margin: 4px 0 10px;
}
.tunnel-eval-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.tunnel-eval-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}
.tunnel-eval-btn:active { transform: scale(0.96); }
.tunnel-eval-btn .tev-main { font-size: 13.5px; font-weight: 650; color: var(--text); line-height: 1.15; text-align: center; }

.tunnel-eval-btn[data-eval="nesaispas"]:hover { border-color: var(--error); background: var(--error-bg); }
.tunnel-eval-btn[data-eval="doute"]:hover     { border-color: var(--gold); background: var(--marked-bg); }
.tunnel-eval-btn[data-eval="parfait"]:hover   { border-color: var(--success); background: var(--success-bg); }

.tunnel-eval-btn[data-eval="nesaispas"] .tev-main { color: var(--error); }
.tunnel-eval-btn[data-eval="doute"] .tev-main { color: var(--gold); }
.tunnel-eval-btn[data-eval="parfait"] .tev-main { color: var(--success); }

/* --- Actions discrètes du bas : Source · Accroche --- */
.tunnel-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tunnel-bottom-actions .tunnel-source-btn,
.tunnel-bottom-actions .tunnel-add-accroche { margin: 0; }

/* --- Lien Source (ⓘ) --- */
.tunnel-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px auto 0;
  padding: 3px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.tunnel-source-btn:hover { color: var(--primary); }
.tunnel-source-btn i { font-size: 15px; }

/* --- Continuer (après QCM) --- */
.tunnel-continue-btn { width: 100%; }

/* --- Re-test binaire --- */
.tunnel-retest-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tunnel-retest-row .btn-answer { width: 100%; }

/* --- QCM dans la carte du Quiz (sur fond violet) --- */
.quiz-card-mcq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(7px, 1.2vh, 10px); /* identique à .duel-opts */
  width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.quiz-card-mcq-btn {
  width: 100%;
  text-align: center;
  padding: clamp(10px, 1.7vh, 16px) 10px; /* identique à .duel-opt */
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.quiz-card-mcq-btn:hover { background: rgba(255, 255, 255, 0.22); }
.quiz-card-mcq-btn:active { transform: scale(0.98); }
.quiz-card-mcq-btn:disabled { cursor: default; }
.quiz-card-mcq-btn.correct {
  background: #fff;
  border-color: #fff;
  color: var(--success);
  font-weight: 800;
}
.quiz-card-mcq-btn.wrong {
  background: rgba(0, 0, 0, 0.20);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  text-decoration: line-through;
  opacity: 0.85;
}

/* --- QCM (1re découverte) --- */
.tunnel-mcq-options { display: flex; flex-direction: column; gap: 9px; }
.tunnel-mcq-btn {
  width: 100%;
  text-align: left;
  padding: 14px 15px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}
.tunnel-mcq-btn:hover { border-color: var(--gold); }
.tunnel-mcq-btn:active { transform: scale(0.985); }
.tunnel-mcq-btn:disabled { cursor: default; }
.tunnel-mcq-btn.correct {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
  font-weight: 700;
}
.tunnel-mcq-btn.wrong {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error);
}

/* ============================================================
   ÉCRAN RÉVISER — design "carte à jouer" (sable chaud + émeraude)
   Scopé à .rv-theme pour ne pas toucher quiz / tunnel / accueil.
   ============================================================ */
.rv-theme {
  --rv-bg:#F4EFE6; --rv-surface:#FFFFFF; --rv-card:#FFFEFB; --rv-ink:#221E17;
  --rv-muted:#8A8073; --rv-faint:#B8AE9F; --rv-line:#E7DFD2; --rv-em:#0E8A6B;
  --rv-emDeep:#0A6F56; --rv-redInk:#B5705A; --rv-cardBorder:#E2D8C8; --rv-cardInner:#EFE8DA;
  background: var(--rv-bg);
  font-family: 'Spline Sans', system-ui, sans-serif;
  color: var(--rv-ink);
}
body.dark-mode .rv-theme {
  --rv-bg:#1A1814; --rv-surface:#26221C; --rv-card:#2C2820; --rv-ink:#F2ECE0;
  --rv-muted:#9C9384; --rv-faint:#6B6356; --rv-line:#393327; --rv-em:#2FB58C;
  --rv-emDeep:#1E9573; --rv-redInk:#C98C73; --rv-cardBorder:#403828; --rv-cardInner:#241F18;
}

/* En-tête : badge coloré PAR PHASE pour se repérer d'un coup d'œil.
   Révisions = vert · Nouvelles cartes = doré · Difficiles = terracotta.
   (Base = vert pour révision/mémorisation, surchargée ci-dessous.) */
.rv-theme .phase-badge { background: var(--rv-emSoft, rgba(14,138,107,.1)); color: var(--rv-em); border: 1px solid var(--rv-cardBorder); }
.rv-theme .phase-badge .phase-icon { color: currentColor; }

.rv-theme .phase-badge.new-cards {
  background: rgba(190, 138, 58, 0.14);
  color: #A9762A;
  border-color: rgba(190, 138, 58, 0.30);
}
.rv-theme .phase-badge.difficult {
  background: rgba(181, 112, 90, 0.15);
  color: #B5705A;
  border-color: rgba(181, 112, 90, 0.30);
}

/* Dark mode : mêmes familles, teintes éclaircies pour le contraste */
body.dark-mode .rv-theme .phase-badge.new-cards {
  background: rgba(214, 162, 78, 0.16);
  color: #D6A24E;
  border-color: rgba(214, 162, 78, 0.30);
}
body.dark-mode .rv-theme .phase-badge.difficult {
  background: rgba(201, 140, 115, 0.16);
  color: #C98C73;
  border-color: rgba(201, 140, 115, 0.30);
}
.rv-theme .session-progress { color: var(--rv-muted); font-weight: 600; }
.rv-theme .icon-btn { background: var(--rv-surface); border: 1px solid var(--rv-line); color: var(--rv-muted); }
.rv-theme .icon-btn.marked { color: var(--rv-redInk); }

/* Cartes fantômes empilées derrière */
.rv-theme .flashcard-wrapper { position: relative; }
.rv-theme .flashcard-wrapper::before,
.rv-theme .flashcard-wrapper::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  background: var(--rv-card); border: 1px solid var(--rv-cardBorder);
  box-shadow: 0 14px 30px -22px rgba(20,16,10,.4);
  transform-origin: top center; z-index: -1; pointer-events: none;
}
.rv-theme .flashcard-wrapper::before { transform: translateY(-7px) scaleX(.97); opacity: .7; }
.rv-theme .flashcard-wrapper::after  { transform: translateY(-14px) scaleX(.94); opacity: .45; }

/* La carte : fond chaud, plus de dégradé violet */
.rv-theme .card-face {
  background: var(--rv-card);
  border: 1px solid var(--rv-cardBorder);
  border-radius: 24px;
  padding: 34px 26px;
  box-shadow: 0 22px 50px -28px rgba(20,16,10,.5);
}
.rv-theme .flashcard.showing-answer,
.rv-theme .flashcard.wrong-answer,
.rv-theme .flashcard.wrong-answer .card-back { background: transparent; }
.rv-theme .card-face::before { display: none; }                 /* pas de voile blanc */
.rv-theme .card-face::after {                                     /* cadre intérieur chaud */
  inset: 12px; border: 1.5px solid var(--rv-cardInner); border-radius: 16px;
}

/* Coins rang/enseigne */
.rv-theme .rv-corner {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center;
  line-height: 1; font-family: 'Spline Sans', sans-serif; font-weight: 700; color: var(--rv-ink);
}
.rv-theme .rv-corner.rv-red { color: var(--rv-redInk); }
.rv-theme .rv-corner-tl { top: 20px; left: 20px; }
.rv-theme .rv-corner-br { bottom: 20px; right: 20px; transform: rotate(180deg); }
.rv-theme .rv-corner .rv-rank { font-size: 18px; }
.rv-theme .rv-corner .rv-suit-svg { width: 13px; height: 13px; margin-top: 3px; display: block; }

/* Typo : serif Fraunces, encre chaude, réponse émeraude */
.rv-theme .flashcard-label {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  position: absolute; top: 26px; left: 0; right: 0; text-align: center;
}
.rv-theme .card-front .flashcard-label { color: var(--rv-em); }
.rv-theme .card-back .flashcard-label  { color: var(--rv-muted); }
.rv-theme .flashcard-text {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 25px;
  line-height: 1.34; letter-spacing: -.01em; color: var(--rv-ink);
  text-shadow: none; text-wrap: balance;
}
.rv-theme .card-back .flashcard-text {
  color: var(--rv-em); font-weight: 700; font-size: 28px;
}
/* Phrase d'explication sous la réponse : sobre, atténuée, en retrait — elle
   éclaire le « pourquoi » sans voler la vedette à la réponse. */
.flashcard-explanation {
  margin-top: 12px;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  opacity: 0.85;
}
/* Art des cartes : SVG line-art injecté au reveal, juste avant l'explication.
   stroke="currentColor" hérite la couleur de texte de la carte ;
   --accent (= or) allume l'accent défini en var(--accent, currentColor) dans le SVG. */
.card-art {
  --accent: var(--gold);
  width: 92px;
  height: 92px;
  margin: 10px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rv-theme .flashcard-explanation {
  font-family: 'Spline Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--rv-muted);
  opacity: 1;
}
.rv-theme .flashcard-source a { color: var(--rv-muted); }
.rv-theme .btn-mnemonic-hint { color: var(--rv-em); }

/* ── Quiz : neutraliser les fonds vert/rouge + QCM dans la carte crème ── */
.rv-theme .flashcard.quiz.showing-answer .card-back,
.rv-theme .flashcard.quiz.showing-answer.wrong-answer .card-back,
.rv-theme .card-front-quiz { background: var(--rv-card); }
.rv-theme .quiz-card-mcq-btn {
  background: var(--rv-cardInner); border: 1.5px solid var(--rv-cardBorder);
  color: var(--rv-ink); font-family: 'Spline Sans', sans-serif; opacity: 1;
}
.rv-theme .quiz-card-mcq-btn:hover { border-color: var(--rv-em); }
.rv-theme .quiz-card-mcq-btn.correct { background: var(--rv-em); border-color: var(--rv-em); color: #fff; }
.rv-theme .quiz-card-mcq-btn.wrong {
  background: transparent; border-color: var(--rv-redInk); color: var(--rv-redInk);
  text-decoration: line-through;
}

/* Badges de swipe : "À REVOIR" / "JE SAIS" */
.rv-theme .swipe-hint {
  top: 28px; transform: none; font-size: 15px; font-weight: 800; letter-spacing: .05em;
  padding: 8px 14px; border-radius: 12px; border: 2.5px solid currentColor;
  background: var(--rv-surface); text-shadow: none; width: auto; height: auto;
}
.rv-theme .swipe-hint.swipe-left  { left: 26px; right: auto; color: var(--rv-redInk); transform: rotate(12deg); }
.rv-theme .swipe-hint.swipe-right { right: 26px; left: auto; color: var(--rv-em); transform: rotate(-12deg); }

/* Boutons du bas */
.rv-theme .btn-answer.red {
  background: transparent; border: 1.5px solid rgba(181, 112, 90, 0.35); color: var(--rv-redInk);
}
.rv-theme .btn-answer.red:hover { background: rgba(181, 112, 90, 0.08); border-color: rgba(181, 112, 90, 0.55); }
.rv-theme .btn-answer.red svg { opacity: 0.9; }
.rv-theme .btn-answer.green {
  background: var(--rv-em); border: none; color: #fff;
  box-shadow: 0 10px 24px -10px var(--rv-emDeep);
}
.rv-theme .btn-primary { background: var(--rv-em); box-shadow: 0 10px 24px -10px var(--rv-emDeep); }
.rv-theme .btn-ghost { color: var(--rv-muted); }
.rv-theme .btn-encode { color: var(--rv-em); }

/* ── HUD Réviser : barre de progression, stats, hint carte ── */
.rv-theme .rv-progress { margin-top: 16px; }
.rv-theme .rv-progress-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--rv-muted); margin-bottom: 6px; }
.rv-theme .rv-progress-pct { color: var(--rv-em); }
.rv-theme .rv-progress-bar { height: 7px; border-radius: 99px; background: var(--rv-line); overflow: hidden; }
.rv-theme .rv-progress-fill { height: 100%; border-radius: 99px; background: var(--rv-em); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.rv-theme .rv-stats { display: flex; gap: 18px; margin-top: 14px; font-size: 13.5px; color: var(--rv-muted); }
.rv-theme .rv-stat { display: inline-flex; align-items: center; gap: 6px; }
.rv-theme .rv-stat b { color: var(--rv-ink); font-weight: 700; }
.rv-theme .rv-stat .rv-ico { color: var(--rv-em); }
.rv-theme .rv-hint {
  position: absolute; bottom: 24px; left: 0; right: 0; z-index: 1;
  text-align: center; color: var(--rv-faint); font-size: 16.25px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px;
}
.rv-theme .rv-hint svg { width: 19px; height: 19px; }

/* ── Fix dispositions carte à jouer (chevauchements) ── */
/* Espace au-dessus pour les cartes fantômes (qui dépassent vers le haut) */
.rv-theme .flashcard-wrapper { margin-top: 22px; }
/* Source dans le flux (sous la réponse) → ne chevauche plus le hint du bas */
.rv-theme .flashcard-source { position: static; margin-top: 12px; left: auto; right: auto; bottom: auto; }

/* ============================================================
   ÉCRAN D'ACCUEIL (landing) — éventail de cartes, sable + émeraude
   ============================================================ */
#intro-screen.wel-screen {
  --wc-bg:#F4EFE6; --wc-surface:#FFFEFB; --wc-ink:#221E17; --wc-muted:#8A8073;
  --wc-faint:#B8AE9F; --wc-line:#E7DFD2; --wc-em:#0E8A6B; --wc-emDeep:#0A6F56;
  --wc-emSoft:#E2F1EB; --wc-cardBorder:#E2D8C8; --wc-cardInner:#EFE8DA; --wc-red:#B23A48;
  background: var(--wc-bg); color: var(--wc-ink);
  font-family: 'Spline Sans', system-ui, sans-serif;
  padding: 0 !important;
  /* Hauteur calée sur la zone RÉELLEMENT visible (dvh) : sinon, sur mobile, la
     barre d'URL masque le bas de l'écran et le bouton « Commencer » disparaît. */
  position: absolute; top: 0; left: 0; right: 0; bottom: auto;
  height: 100vh; height: 100dvh; overflow: hidden;
}
#intro-screen.wel-screen.active { display: flex; justify-content: center; }

/* Dark mode : l'écran d'accueil a sa propre palette --wc-* (claire). On la
   redéfinit en sombre pour qu'il respecte le thème (sinon il restait tout clair).
   Comme tous les éléments .wel-* lisent ces variables, ça se propage partout. */
body.dark-mode #intro-screen.wel-screen {
  --wc-bg:#1A1814; --wc-surface:#2C2820; --wc-ink:#F2ECE0; --wc-muted:#9C9384;
  --wc-faint:#6B6356; --wc-line:#393327; --wc-em:#2FB58C; --wc-emDeep:#1E9573;
  --wc-emSoft:rgba(47,181,140,.15); --wc-cardBorder:#393327; --wc-cardInner:#26221C; --wc-red:#C98C73;
}

.wel-halo { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% -10%, var(--wc-emSoft) 0%, transparent 55%); }
.wel-grain { position:absolute; inset:0; opacity:.04; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wel-wrap {
  position:relative; z-index:1; width:100%; max-width:420px;
  /* Marge basse généreuse : en PWA plein écran (standalone), le bas passe derrière
     la barre de navigation Android (les 3 boutons), et env(safe-area-inset-bottom)
     y renvoie souvent 0. On garantit donc ~72px pour que « Commencer » reste
     entièrement visible sans avoir à scroller. */
  padding:0 26px max(72px, calc(28px + env(safe-area-inset-bottom,0px)));
  display:flex; flex-direction:column; min-height:100%; overflow-y:auto;
  scrollbar-width: none;            /* Firefox : pas de barre */
  -ms-overflow-style: none;          /* IE/Edge ancien */
}
.wel-wrap::-webkit-scrollbar { width:0; height:0; display:none; }  /* WebKit : pas de barre */

/* HÉRO : éventail + as maître */
.wel-hero { position:relative; height:200px; margin-top:30px; display:flex; justify-content:center; align-items:center; flex-shrink:0; }
.wel-fan {
  position:absolute; width:100px; height:142px; border-radius:16px;
  background:var(--wc-surface); border:1px solid var(--wc-cardBorder);
  box-shadow:0 18px 38px -24px rgba(20,16,10,.4);
  transform-origin:bottom center; color:var(--wc-ink);
  transform: rotate(var(--r)); opacity:var(--o);
  animation: wel-fanIn .7s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d);
}
.wel-fan.wel-red { color:var(--wc-red); }
.wel-fan-frame { position:absolute; inset:8px; border-radius:11px; border:1.5px solid var(--wc-cardInner); }
.wel-fan-center { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.wel-fan-center svg { width:38px; height:38px; opacity:.9; }
.wel-pip { position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1; font-weight:700; }
.wel-pip b { font-size:13px; }
.wel-pip svg { width:11px; height:11px; margin-top:1px; }
.wel-pip-tl { top:7px; left:9px; }
.wel-pip-br { bottom:7px; right:9px; transform:rotate(180deg); }

.wel-master { position:relative; z-index:3; animation: wel-rise .7s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d); }
.wel-master-card {
  width:112px; height:156px; border-radius:18px;
  background:var(--wc-surface); border:1px solid var(--wc-cardBorder);
  box-shadow:0 26px 50px -22px rgba(20,16,10,.45); position:relative; color:var(--wc-ink);
  animation: wel-float 5s ease-in-out 1.1s infinite;
}
.wel-master-card .wel-fan-frame { inset:9px; border-radius:12px; }
.wel-pip-master b { font-size:17px; }
.wel-pip-master svg { width:14px; height:14px; }
.wel-pip-master.wel-pip-tl { top:13px; left:14px; }
.wel-pip-master.wel-pip-br { bottom:13px; right:14px; }
.wel-master-pip { position:absolute; inset:0; display:grid; place-items:center; }
.wel-master-pip svg {
  width:56px; height:56px; padding:13px; box-sizing:border-box; border-radius:16px;
  background:linear-gradient(135deg, var(--wc-em), var(--wc-emDeep));
  box-shadow:0 10px 20px -6px var(--wc-em);
}

/* TITRE / ATOUTS / CTA */
.wel-screen .rise { animation: wel-rise .6s cubic-bezier(.2,.7,.3,1) both; }
.wel-title { text-align:center; margin-top:22px; }
.wel-title h1 { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:33px; line-height:1.12; margin:0; letter-spacing:-.02em; color:var(--wc-ink); }
.wel-title p { margin:12px 0 0; color:var(--wc-muted); font-size:15.5px; font-weight:500; }
.wel-title em { font-family:'Fraunces',Georgia,serif; font-style:italic; color:var(--wc-em); font-weight:600; }

.wel-features { margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.wel-feat { display:flex; align-items:center; gap:15px; background:var(--wc-surface); border:1px solid var(--wc-line); border-radius:18px; padding:15px 16px; }
.wel-feat-ico { width:44px; height:44px; border-radius:13px; background:var(--wc-emSoft); display:grid; place-items:center; flex-shrink:0; color:var(--wc-emDeep); }
.wel-feat-ico svg { width:22px; height:22px; }
.wel-feat-title { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:16.5px; color:var(--wc-ink); letter-spacing:-.01em; }
.wel-feat-desc { color:var(--wc-muted); font-size:13.5px; line-height:1.45; margin-top:2px; }

.wel-cta { margin-top:auto; padding-top:26px; }
.wel-tagline { text-align:center; color:var(--wc-faint); font-size:13.5px; margin:0 0 14px; font-family:'Fraunces',Georgia,serif; font-style:italic; }
.wel-start {
  width:100%; padding:17px 0; border-radius:18px; border:none; cursor:pointer;
  color:#fff; font-family:'Spline Sans',system-ui,sans-serif; font-weight:700; font-size:16.5px; letter-spacing:.01em;
  background:linear-gradient(100deg, var(--wc-emDeep), var(--wc-em) 45%, var(--wc-emDeep));
  background-size:200% 100%;
  box-shadow:0 14px 30px -10px var(--wc-em);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: transform .14s ease, box-shadow .25s ease;
  animation: wel-rise .6s cubic-bezier(.2,.7,.3,1) both, wel-shine 3.5s linear infinite;
  animation-delay:.9s, 0s;
}
.wel-start svg { width:19px; height:19px; }
.wel-start:active { transform: scale(.97); }

/* Numéro de version : discret, centré tout en bas, ne bloque pas les clics,
   et passe sous la tab bar (donc masqué sur les écrans qui en ont une). */
.app-footer {
  position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); right: auto;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  text-align: left; pointer-events: none; z-index: 1;
}
#app-version {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #B8AE9F; opacity: .7;
}
/* Dark mode : #B8AE9F (gris clair) sur fond très sombre = contraste faible.
   On passe sur le gris secondaire du thème, plus lisible tout en restant discret. */
body.dark-mode #app-version { color: var(--text-secondary); }
#app-version::before { content: "v"; opacity: .7; }

@keyframes wel-rise { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes wel-fanIn { from{opacity:0; transform:translateY(20px) rotate(var(--r0)) scale(.92);} to{opacity:var(--o); transform:translateY(0) rotate(var(--r)) scale(1);} }
@keyframes wel-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
@keyframes wel-shine { 0%{background-position:-180% 0;} 100%{background-position:180% 0;} }

/* Écrans courts (la majorité des téléphones en dvh réel) : on compacte le héros et
   les espacements pour que tout — y compris le bouton « Commencer » — tienne sans scroll.
   Seuil calé à 900px : la plupart des mobiles ont une hauteur visible dans cette plage. */
@media (max-height: 900px) {
  .wel-hero { height:158px; margin-top:14px; }
  .wel-fan { width:84px; height:120px; }
  .wel-master-card { width:96px; height:134px; }
  .wel-title { margin-top:14px; }
  .wel-title h1 { font-size:27px; }
  .wel-title p { margin-top:8px; font-size:14.5px; }
  .wel-features { margin-top:14px; gap:8px; }
  .wel-feat { padding:11px 13px; gap:12px; }
  .wel-feat-ico { width:38px; height:38px; border-radius:11px; }
  .wel-cta { padding-top:14px; }
  .wel-tagline { margin-bottom:10px; }
  .wel-start { padding:15px 0; }
}
@media (max-height: 600px) {
  .wel-hero { height:120px; margin-top:8px; }
  .wel-fan { width:68px; height:96px; }
  .wel-master-card { width:78px; height:108px; }
  .wel-feat-desc { font-size:12.5px; }
}
/* Très petits écrans en largeur : on évite tout débordement horizontal. */
@media (max-width: 360px) {
  .wel-wrap { padding-left:18px; padding-right:18px; }
  .wel-title h1 { font-size:26px; }
}

@media (prefers-reduced-motion: reduce) {
  .wel-screen .rise, .wel-fan, .wel-master, .wel-master-card, .wel-start {
    animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important;
  }
}

/* ============================================================
   ACCUEIL (hub) — médaille de progression, XP, série, récap
   ============================================================ */
#home-screen.hub-screen {
  padding:0 !important; background:var(--bg); position:absolute; inset:0; overflow:hidden;
  font-family:'Spline Sans', system-ui, sans-serif; color:var(--text);
}
#home-screen.hub-screen.active { display:flex; justify-content:center; }
.hub-halo { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(110% 60% at 50% 0%, var(--success-bg) 0%, transparent 50%); }
.hub-wrap {
  position:relative; z-index:1; width:100%; max-width:440px;
  padding:0 22px calc(96px + env(safe-area-inset-bottom,0px));
  overflow-y:auto; min-height:100%; scrollbar-width:none;
}
.hub-wrap::-webkit-scrollbar { width:0; display:none; }

.hub-header { padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.hub-logo { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:26px; margin:0; color:var(--primary); letter-spacing:-.01em; }
.hub-header-right { display:flex; gap:9px; }
.hub-icon-btn { width:42px; height:42px; border-radius:13px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); display:grid; place-items:center; cursor:pointer; transition:transform .14s ease; }
.hub-icon-btn:active { transform:scale(.95); }

.hub-hero { position:relative; text-align:center; margin-top:24px; }
.hub-confetti { position:absolute; inset:0 0 auto; height:0; pointer-events:none; }
.hub-confetti span { position:absolute; width:7px; height:11px; border-radius:1px; opacity:0; top:36px; }
.hub-medal { display:inline-block; position:relative; z-index:1; animation: hub-float 5s ease-in-out 1.2s infinite; }
.hub-medal-svg { display:block; width:148px; height:148px; overflow:visible; }
.hub-medal-halo { fill:var(--success-bg); opacity:.6; }
.hub-medal-track { fill:none; stroke:var(--border-light); stroke-width:7; }
.hub-medal-ring { fill:none; stroke:var(--primary); stroke-width:7; stroke-linecap:round; transition: stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1); }
.hub-medal-disc { fill:var(--primary); }
.hub-medal-check { fill:none; stroke:#fff; stroke-width:4.6; stroke-linecap:round; stroke-linejoin:round; }
.hub-medal-pct { fill:#fff; font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:25px; }
.hub-title { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:26px; margin:14px 0 0; letter-spacing:-.02em; color:var(--text); }
.hub-subtitle { color:var(--text-secondary); font-size:14.5px; margin:7px 0 0; }
.hub-subtitle em { font-family:'Fraunces',Georgia,serif; font-style:italic; color:var(--primary); font-weight:600; }

.hub-card { background:var(--bg-card); border:1px solid var(--border); border-radius:18px; }
.hub-xp { margin-top:20px; padding:14px 16px; }
.hub-xp-head { display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:600; margin-bottom:9px; }
.hub-xp-head #xp-display { color:var(--text); display:inline-flex; align-items:center; gap:6px; }
.hub-xp-count { color:var(--text-secondary); }
.hub-xp-bar { height:8px; border-radius:99px; background:var(--border-light); overflow:hidden; }
.hub-xp-fill { height:100%; border-radius:99px; background:linear-gradient(90deg, var(--primary), var(--primary-dark)); transition:width .6s cubic-bezier(.2,.7,.3,1); }

.hub-streak { margin-top:12px; display:flex; align-items:center; gap:14px; padding:15px 17px; background:linear-gradient(100deg, var(--success-bg), var(--bg-card)); }
.hub-streak-ico { width:46px; height:46px; border-radius:14px; background:var(--bg-card); border:1px solid var(--border); display:grid; place-items:center; flex-shrink:0; color:var(--primary); }
.hub-streak-ico svg { width:24px; height:24px; }
.hub-streak-title { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:19px; color:var(--text); line-height:1.1; }
.hub-streak-sub { font-size:13px; color:var(--text-secondary); margin-top:2px; }

.hub-stats { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hub-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:14px 8px; text-align:center; }
.hub-stat-val { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:24px; color:var(--text); line-height:1; }
.hub-stat-big .hub-stat-val { font-size:28px; color:var(--primary); }
.hub-stat-lbl { font-size:11.5px; color:var(--text-secondary); font-weight:600; margin-top:5px; text-transform:uppercase; letter-spacing:.04em; }

.hub-start-btn {
  width:100%; margin-top:18px; padding:17px 0; border-radius:16px; border:none; cursor:pointer;
  color:#fff; font-family:'Spline Sans',system-ui,sans-serif; font-weight:700; font-size:16px;
  background:linear-gradient(100deg, var(--primary-dark), var(--primary) 45%, var(--primary-dark));
  box-shadow:0 14px 30px -12px var(--primary); transition:transform .14s ease;
}
.hub-start-btn:active { transform:scale(.98); }
.hub-start-btn:disabled { opacity:.6; cursor:default; box-shadow:none; }

.hub-done { margin-top:16px; overflow:hidden; }
.hub-done-row { display:flex; align-items:center; gap:13px; padding:13px 16px; }

/* Aperçu « ce qui attend le joueur » (cliquable) */
#hub-phases { margin-top:18px; }
.hub-phase-row { display:flex; align-items:center; gap:13px; padding:13px 16px; cursor:pointer; transition:background .15s ease; }
.hub-phase-row + .hub-phase-row { border-top:1px solid var(--border); }
.hub-phase-row:active { background:var(--border-light); }
.hub-phase-row .hub-done-ico { background:var(--bg); border:1px solid var(--border); }
.hub-phase-name { font-weight:600; font-size:15px; flex:1; color:var(--text); }
.hub-phase-sub { font-size:12.5px; color:var(--text-secondary); margin-top:1px; }
.hub-phase-count { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:18px; }
.hub-phase-chev { color:var(--text-muted); display:flex; }
.hub-done-row + .hub-done-row { border-top:1px solid var(--border); }
.hub-done-ico { width:36px; height:36px; border-radius:11px; background:var(--success-bg); display:grid; place-items:center; flex-shrink:0; color:var(--primary-dark); }
.hub-done-ico svg { width:18px; height:18px; }
.hub-done-name { font-weight:600; font-size:15px; flex:1; color:var(--text); }
.hub-done-count { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:17px; color:var(--primary); }

.hub-next { margin-top:18px; text-align:center; }
.hub-next span { display:inline-flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border); border-radius:99px; padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--text); }
.hub-next svg { width:17px; height:17px; color:var(--primary); flex-shrink:0; }

.hub-secondary {
  width:100%; margin-top:14px; padding:15px 0; border-radius:16px; cursor:pointer;
  color:var(--primary); font-family:'Spline Sans',system-ui,sans-serif; font-weight:600; font-size:15px;
  background:transparent; border:1.5px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .14s ease, border-color .2s ease;
}
.hub-secondary svg { width:19px; height:19px; }
.hub-secondary:active { transform:scale(.98); }
.hub-secondary:hover { border-color:var(--primary); }

.hub-screen .home-status { text-align:center; color:var(--text-muted); font-size:13px; margin-top:14px; }

/* Hub : compaction sur écrans courts (hauteur dvh réelle des téléphones + tab bar),
   pour que médaille, stats et bouton tiennent avec un minimum de scroll. */
@media (max-height: 860px) {
  .hub-header { padding-top:16px; }
  .hub-medal-svg { width:116px; height:116px; }
  .hub-hero { margin-top:14px; }
  .hub-title { font-size:22px; margin-top:10px; }
  .hub-subtitle { font-size:13.5px; margin-top:5px; }
  .hub-xp { margin-top:14px; }
  .hub-streak { margin-top:10px; padding:12px 15px; }
  .hub-streak-ico { width:40px; height:40px; }
  .hub-stats { margin-top:10px; }
  .hub-stat { padding:11px 8px; }
  .hub-start-btn { margin-top:14px; padding:15px 0; }
}
@media (max-height: 680px) {
  .hub-medal-svg { width:92px; height:92px; }
  .hub-hero { margin-top:8px; }
  .hub-title { font-size:20px; }
}

@keyframes hub-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes hub-confetti { 0%{transform:translateY(0) rotate(0);opacity:1;} 100%{transform:translateY(130px) rotate(220deg);opacity:0;} }
.hub-hero.celebrate .hub-confetti span { animation: hub-confetti var(--cd,1.8s) ease-in var(--cdel,.4s) forwards; }
@media (prefers-reduced-motion: reduce) {
  .hub-medal { animation:none !important; }
  .hub-medal-ring { transition:none !important; }
  .hub-hero.celebrate .hub-confetti span { animation:none !important; opacity:0 !important; }
}

/* ============================================================
   DUEL 2 JOUEURS (même téléphone, face à face)
   ============================================================ */
#duel-setup-screen.duel-setup-screen { padding:0 !important; background:var(--bg); position:absolute; top:0; left:0; right:0; bottom:auto; height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#duel-setup-screen.duel-setup-screen.active { display:block; }
.duel-setup-wrap { max-width:440px; margin:0 auto; padding:18px 22px calc(28px + env(safe-area-inset-bottom,0px)); position:relative; }
.duel-setup-back { position:absolute; top:14px; left:16px; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); font-size:20px; cursor:pointer; }
.duel-setup-hero { text-align:center; margin-top:46px; }
.duel-vs { display:flex; align-items:flex-start; justify-content:center; gap:16px; }
.duel-vs-badge { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:700; font-size:20px; color:#fff; }
.duel-vs-x { font-family:'Fraunces',serif; font-style:italic; font-weight:600; color:var(--text-secondary); font-size:18px; align-self:center; }

/* Joueurs : photo + nom */
.duel-vs-player { display:flex; flex-direction:column; align-items:center; gap:9px; width:108px; }
.duel-avatar { position:relative; width:72px; height:72px; border-radius:50%; border:none; padding:0; cursor:pointer; display:grid; place-items:center; overflow:visible; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.duel-avatar-img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.duel-avatar-ph { font-family:'Fraunces',serif; font-weight:700; font-size:24px; color:#fff; pointer-events:none; }
.duel-avatar-cam { position:absolute; right:-2px; bottom:-2px; width:24px; height:24px; border-radius:50%; background:var(--bg-card); color:var(--text); display:grid; place-items:center; border:2px solid var(--bg); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.duel-name-input { width:100%; text-align:center; padding:9px 6px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text); font-size:14px; font-weight:600; }
.duel-name-input::placeholder { color:var(--text-muted); font-weight:500; }
.duel-name-input:focus { outline:none; border-color:var(--primary); }
.duel-bg-p1 { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.duel-bg-p2 { background:linear-gradient(135deg, #C99A4A, #9C7430); }
.duel-setup-title { font-family:'Fraunces',serif; font-weight:600; font-size:28px; margin:16px 0 0; letter-spacing:-.02em; color:var(--text); }
.duel-setup-sub { color:var(--text-secondary); font-size:14.5px; margin:8px 0 0; line-height:1.45; }
.duel-setup-sub em { font-family:'Fraunces',serif; font-style:italic; color:var(--primary); font-weight:600; }
.duel-setup-section { margin-top:24px; }
.duel-setup-label { font-size:12.5px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.duel-count-choices { display:flex; gap:10px; }
.duel-count-btn { flex:1 1 0; padding:16px 8px; font-family:'Fraunces',serif; font-size:22px; font-weight:700; border-radius:14px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s; }
.duel-count-btn.active { border-color:var(--primary); background:var(--success-bg); color:var(--primary); }
.duel-count-input { flex:1 1 0; min-width:0; width:0; padding:16px 8px; border-radius:14px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text); font-size:15px; font-weight:600; text-align:center; }
.duel-count-input::placeholder { color:var(--text-muted); font-weight:500; font-size:14px; }
.duel-count-input:focus { outline:none; border-color:var(--primary); }
.duel-count-input.active { border-color:var(--primary); background:var(--success-bg); color:var(--primary); }
.duel-count-input::-webkit-inner-spin-button, .duel-count-input::-webkit-outer-spin-button { -webkit-appearance:none; appearance:none; margin:0; }
.duel-timer-choices { display:flex; flex-wrap:wrap; gap:8px; }
.duel-timer-btn { flex:1 1 0; min-width:62px; padding:11px 8px; font-size:14px; font-weight:600; border-radius:12px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s; }
.duel-timer-btn.active { border-color:var(--primary); background:var(--success-bg); color:var(--primary); }

/* Sélecteur de catégories (multi-sélection, mémorisé) */
.duel-cat-choices { display:flex; flex-wrap:wrap; gap:8px; }
.duel-cat-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; font-size:13px; font-weight:600; border-radius:99px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s, color .15s, transform .1s; }
.duel-cat-chip .cat-ic { font-size:17px; flex-shrink:0; line-height:1; }
.duel-cat-chip:active { transform:scale(.96); }
.duel-cat-chip.active { border-color:var(--primary); background:var(--success-bg); color:var(--primary); }
.duel-cat-count { margin:10px 0 0; font-size:12px; color:var(--text-muted); }
.duel-timer-custom { flex:1 1 0; min-width:80px; display:flex; align-items:center; justify-content:center; gap:3px; padding:0 10px; border-radius:12px; border:1.5px solid var(--border); background:var(--bg-card); transition:border-color .15s, background .15s; }
.duel-timer-custom.active { border-color:var(--primary); background:var(--success-bg); }
.duel-timer-input { width:100%; min-width:0; border:none; background:transparent; color:var(--text); font-size:14px; font-weight:600; text-align:center; padding:11px 0; }
.duel-timer-input:focus { outline:none; }
.duel-timer-input::-webkit-inner-spin-button, .duel-timer-input::-webkit-outer-spin-button { -webkit-appearance:none; appearance:none; margin:0; }
.duel-timer-custom.active .duel-timer-input, .duel-timer-custom.active .duel-timer-unit { color:var(--primary); }
.duel-timer-unit { font-size:13px; font-weight:600; color:var(--text-secondary); flex-shrink:0; }
.duel-toggle { display:flex; align-items:center; gap:11px; cursor:pointer; }
.duel-toggle input { position:absolute; opacity:0; pointer-events:none; }
.duel-toggle-box { width:46px; height:27px; border-radius:99px; background:var(--border); position:relative; flex-shrink:0; transition:background .2s; }
.duel-toggle-box::after { content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.duel-toggle input:checked + .duel-toggle-box { background:var(--primary); }
.duel-toggle input:checked + .duel-toggle-box::after { transform:translateX(19px); }
.duel-toggle-text { font-size:14px; color:var(--text); }
.duel-toggle-text em { color:var(--text-secondary); font-style:normal; font-size:12.5px; }
.duel-start-btn { width:100%; margin-top:26px; padding:17px 0; border-radius:16px; border:none; cursor:pointer; color:#fff; font-weight:700; font-size:16px; background:linear-gradient(100deg, var(--primary-dark), var(--primary) 45%, var(--primary-dark)); box-shadow:0 14px 30px -12px var(--primary); transition:transform .14s; }
.duel-start-btn:active { transform:scale(.98); }
.duel-setup-hint { text-align:center; color:var(--text-muted); font-size:12.5px; margin:16px 0 0; line-height:1.5; }

/* Réglage du duel sur écrans courts : on compacte pour éviter que « Lancer le duel »
   ne se retrouve hors écran / sous la barre du navigateur. (Le wrap scrolle déjà.) */
@media (max-height: 740px) {
  .duel-setup-hero { margin-top:30px; }
  .duel-setup-title { font-size:24px; }
  .duel-setup-sub { font-size:13.5px; }
  .duel-setup-section { margin-top:16px; }
  .duel-avatar { width:62px; height:62px; }
  .duel-avatar-ph { font-size:21px; }
  .duel-count-btn { padding:13px 8px; font-size:20px; }
  .duel-count-input { padding:13px 8px; }
  .duel-start-btn { margin-top:18px; padding:15px 0; }
  .duel-setup-hint { margin-top:12px; }
}
@media (max-width: 360px) {
  .duel-setup-wrap { padding-left:16px; padding-right:16px; }
  .duel-vs { gap:10px; }
  .duel-vs-player { width:92px; }
}

/* ── Jeu ── */
#duel-screen.duel-screen { padding:0 !important; background:var(--bg); position:fixed; top:0; bottom:0; left:0; right:0; margin-inline:auto; max-width:540px; height:100vh; height:100dvh; overflow:hidden; }
#duel-screen.duel-screen.active { display:flex; flex-direction:column; }
.duel-half { position:relative; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(8px,1.8vh,14px); padding:clamp(12px,2.6vh,26px) 18px; min-height:0; overflow:hidden; transition:opacity .2s; }
/* Mort subite : moitié active mise en avant ; moitié spectateur lisible mais en retrait
   (l'autre joueur voit la question/les choix, sans pouvoir répondre). */
.duel-half.sd-wait { opacity:.6; }
.duel-half.sd-wait .duel-opt { cursor:default; }
.duel-half.sd-turn { opacity:1; }
.duel-top { transform:rotate(180deg); }
.duel-bg-p1.duel-half { background:linear-gradient(180deg, var(--success-bg), transparent 60%); }
.duel-bg-p2.duel-half { background:linear-gradient(180deg, rgba(201,154,74,.14), transparent 60%); }
.duel-half-head { display:flex; align-items:center; justify-content:space-between; }
.duel-name { font-weight:700; font-size:13px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Jokers : ligne dédiée sous l'en-tête (sortis de l'en-tête pour ne pas le surcharger). */
.duel-jokers { display:flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; }
.duel-joker { padding:5px 9px; min-height:30px; border-radius:99px; border:1.5px solid var(--primary); background:var(--success-bg); color:var(--primary); font-weight:800; font-size:12px; line-height:1; cursor:pointer; transition:transform .12s, opacity .25s, background .25s, border-color .25s, color .25s; }
.duel-joker:active { transform:scale(.94); }
.duel-joker.used { opacity:.3; text-decoration:line-through; border-color:var(--border); background:transparent; color:var(--text-muted); cursor:default; }
.duel-joker:disabled { cursor:default; opacity:.45; }
.duel-joker.used:disabled { opacity:.3; }
.duel-name-p1 { color:var(--primary); }
.duel-name-p2 { color:#B8862F; }
.duel-pts { font-family:'Fraunces',serif; font-weight:700; font-size:26px; color:var(--text); line-height:1; }
.duel-q { font-family:'Fraunces',serif; font-weight:600; font-size:clamp(15px,2.2vh,18px); line-height:1.25; text-align:center; color:var(--text); text-wrap:balance; min-height:0; overflow:hidden; }
.duel-opts { display:grid; grid-template-columns:1fr 1fr; gap:clamp(7px,1.2vh,10px); flex-shrink:0; }
.duel-opt { position:relative; overflow:hidden; padding:clamp(10px,1.7vh,16px) 10px; border-radius:13px; border:1.5px solid var(--border); background:var(--bg-card); color:var(--text); font-weight:600; font-size:13px; line-height:1.25; cursor:pointer; transition:transform .1s, background .15s, border-color .15s; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
/* 50:50 : options éliminées — petite « disparition » animée puis état barré atténué */
.duel-opt.removed { opacity:.28; text-decoration:line-through; pointer-events:none; animation:joker-5050-out .42s cubic-bezier(.3,.7,.3,1) both; }
@keyframes joker-5050-out {
  0% { opacity:1; transform:scale(1); }
  30% { transform:scale(1.05) rotate(-1.5deg); }
  60% { opacity:.6; transform:scale(.88); }
  100% { opacity:.28; transform:scale(.92); }
}
/* Double chance : la mauvaise réponse du 1er essai tremble */
.duel-opt.joker-shake { animation:joker-shake .42s ease; }
@keyframes joker-shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-6px); } 40% { transform:translateX(6px); }
  60% { transform:translateX(-4px); } 80% { transform:translateX(4px); }
}
/* Badge de joker qui jaillit au centre de la moitié du joueur */
.duel-joker-flash {
  position:absolute; left:50%; top:46%; z-index:6; pointer-events:none;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-weight:800; font-size:16px; color:var(--primary);
  background:var(--bg-card); border:1.5px solid var(--primary);
  padding:9px 17px; border-radius:99px; box-shadow:0 12px 32px -8px rgba(0,0,0,.38);
  animation:joker-flash 1s cubic-bezier(.2,.8,.2,1) forwards;
}
.duel-joker-flash i { font-size:19px; }
@keyframes joker-flash {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.5); }
  18% { opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  34% { transform:translate(-50%,-50%) scale(.98); }
  48% { transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-135%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .duel-opt.removed, .duel-opt.joker-shake, .duel-joker-flash { animation:none !important; }
  .duel-joker-flash { transform:translate(-50%,-50%); }
}
/* Vote du public : barre de remplissage derrière le texte + pourcentage */
.duel-opt.voted { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.opt-vote-fill { position:absolute; left:0; top:0; bottom:0; z-index:0; background:color-mix(in srgb, var(--primary) 20%, transparent); transition:width .35s ease; }
.opt-label { position:relative; z-index:1; }
.opt-vote-num { position:relative; z-index:1; font-size:11px; font-weight:700; color:var(--text-secondary); flex-shrink:0; }
/* Pas de feedback d'appui visible : le « pop » de retour au relâchement révélerait
   à J2 quel bouton J1 vient de toucher. La confirmation du tap passe par l'haptique. */
.duel-opt:not(:disabled):active { transform:none; }
/* Survol : signal neutre quasi imperceptible, uniquement sur appareils à pointeur (jamais sur tactile). */
@media (hover:hover) {
  .duel-opt:not(:disabled):hover { border-color:color-mix(in srgb, var(--text) 14%, var(--border)); }
}
/* Réponse choisie (avant révélation) : marqueur quasi invisible — juste un voile de teinte,
   le tap est déjà confirmé par l'haptique et le verrouillage du bouton. */
.duel-opt.picked { border-color:color-mix(in srgb, var(--primary) 5%, var(--border)); background:color-mix(in srgb, var(--primary) 4%, transparent); }
.duel-opt.correct { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:800; animation:duel-correct-pop .38s ease; }
@keyframes duel-correct-pop { 0%{transform:scale(1);} 40%{transform:scale(1.07);} 100%{transform:scale(1);} }
.duel-opt.wrong { background:transparent; border-color:var(--error); color:var(--error); text-decoration:line-through; }
.duel-opt:disabled { cursor:default; }
.duel-mid { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px 14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-card); position:relative; flex-shrink:0; }
.duel-counter { font-weight:600; color:var(--text-secondary); font-size:13px; }
.duel-time-left { font-family:'Fraunces',serif; font-weight:700; font-size:16px; color:var(--primary); min-width:34px; text-align:center; }
.duel-id { display:flex; align-items:center; gap:12px; min-width:0; }
.duel-id-avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--border); box-shadow:0 3px 10px rgba(0,0,0,.15); }
.duel-id-ph { width:80px; height:80px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:30px; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.duel-bg-p1 .duel-id-avatar { border-color:var(--primary); }
.duel-bg-p2 .duel-id-avatar { border-color:#C99A4A; }
.duel-bg-p1 .duel-id-ph { background:var(--primary); }
.duel-bg-p2 .duel-id-ph { background:#B8862F; }

/* Révélation : verdict + bonne réponse + explication (remplace la question, gain de place) */
.duel-reveal-info { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; min-height:0; overflow-y:auto; padding:2px; animation:duel-reveal-in .25s ease; }
.dri-verdict { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:15px; letter-spacing:.01em; }
.dri-verdict i { font-size:18px; }
.dri-verdict.is-ok { color:var(--primary); }
.dri-verdict.is-ko { color:var(--error); }
.dri-answer { font-family:'Fraunces',serif; font-weight:700; font-size:clamp(15px,2.2vh,19px); line-height:1.2; color:var(--text); text-wrap:balance; }
.dri-expl { font-size:12.5px; line-height:1.35; color:var(--text-secondary); text-wrap:balance; }
@keyframes duel-reveal-in { 0%{opacity:0;transform:translateY(4px);} 100%{opacity:1;transform:translateY(0);} }

/* Confettis par moitié (joueur qui trouve) */
.duel-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
.duel-confetti span { position:absolute; top:34%; border-radius:1px; opacity:0; animation:duel-confetti-fall var(--cd,1.3s) ease-in var(--cdel,0s) forwards; }
@keyframes duel-confetti-fall { 0%{transform:translateY(-12px) rotate(0);opacity:1;} 100%{transform:translateY(130px) rotate(280deg);opacity:0;} }
@media (prefers-reduced-motion: reduce) { .duel-confetti span { animation:none !important; opacity:0 !important; } }
.duel-next-btn { padding:9px 20px; border-radius:99px; border:none; background:var(--primary); color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.duel-quit-btn { position:absolute; left:10px; width:30px; height:30px; border-radius:50%; border:none; background:transparent; color:var(--text-muted); font-size:16px; cursor:pointer; }
.duel-end { position:absolute; inset:0; background:rgba(20,16,10,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:10; padding:24px; }
.duel-end-card { background:var(--bg-card); border:1px solid var(--border); border-radius:22px; padding:30px 26px; text-align:center; width:100%; max-width:340px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); }
.duel-end-trophy { font-size:46px; }
.duel-end-avatars { display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 2px; }
.duel-end-av { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:20px; background-size:cover; background-position:center; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.duel-end-av-vs { font-family:'Fraunces',serif; font-style:italic; color:var(--text-secondary); font-size:15px; }
.duel-end-title { font-family:'Fraunces',serif; font-weight:600; font-size:24px; margin:8px 0 0; color:var(--text); }
.duel-end-score { font-family:'Fraunces',serif; font-weight:700; font-size:40px; color:var(--primary); margin:6px 0 22px; letter-spacing:.02em; }
.duel-end-home { width:100%; margin-top:10px; padding:13px 0; border-radius:14px; border:1.5px solid var(--border); background:transparent; color:var(--text-secondary); font-weight:600; font-size:14px; cursor:pointer; }

/* Chrono du duel : barre qui se vide dans le bandeau central */
.duel-timer { position:absolute; top:0; left:0; right:0; height:6px; background:var(--border); overflow:hidden; }
.duel-timer-fill { height:100%; width:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); }
.duel-timer.hidden { display:none; }

/* ===== MÉMORISATION DES CARTES ===== */
.memorize-view { max-width: 560px; margin: 0 auto; }

/* Intro : hero + sélection de source */
.memorize-hero {
  width: 60px; height: 60px; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--success-bg); color: var(--primary);
}
.memorize-hero-title { text-align: center; margin-top: 0; }
.memorize-hero-sub { text-align: center; margin-bottom: 22px; }

.memorize-source-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mem-src {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border); background: var(--bg-card);
  text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mem-src:hover:not(.is-empty):not(.active) { border-color: var(--primary-light); }
.mem-src.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,138,107,.10); }
.mem-src.is-empty { opacity: .5; cursor: not-allowed; }

.mem-src-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--success-bg); color: var(--primary);
}
.mem-src-ic--difficult { background: var(--error-bg); color: var(--error); }

.mem-src-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mem-src-title { font-weight: 700; font-size: 15px; color: var(--text); }
.mem-src.active .mem-src-title { color: var(--primary); }
.mem-src-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mem-src-count {
  flex: 0 0 auto; min-width: 30px; height: 26px; padding: 0 9px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border);
}
.mem-src.active .mem-src-count { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Progression carte + étapes */
.memorize-progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 16px;
}
.memorize-card-pos {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: .02em;
}
.memorize-dots { display: flex; gap: 8px; }
.memorize-dots .mdot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border); transition: background .2s, transform .2s;
}
.memorize-dots .mdot.done { background: var(--primary-light); }
.memorize-dots .mdot.active { background: var(--primary); transform: scale(1.25); }

/* Carte question / réponse */
.memorize-qa {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px;
}
.memorize-qa-row { display: flex; flex-direction: column; gap: 3px; }
.memorize-qa-row + .memorize-qa-row {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.memorize-qa-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
}
.memorize-qa-label-a { color: var(--primary); }
.memorize-q { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.memorize-a { font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1.4; }

/* Chips récap (mot-clé, image) */
.memorize-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.memorize-chips:empty { display: none; }
.memorize-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--success-bg); color: var(--primary);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
  max-width: 100%;
}
.memorize-chip .mchip-key {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; opacity: .7;
}
.memorize-chip .mchip-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Boîte de l'étape courante */
.memorize-step-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
}
.memorize-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.memorize-step-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.memorize-step-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.memorize-step-instr {
  font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 12px;
}
.memorize-step-instr strong { color: var(--text); font-weight: 700; }
.memorize-step-hint {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.memorize-step-hint strong { color: var(--text); font-weight: 700; }
.memorize-input { width: 100%; resize: vertical; min-height: 52px; background: var(--bg-card); }

/* Navigation */
.memorize-nav { display: flex; gap: 10px; margin-top: 16px; }
.memorize-nav .btn { flex: 1; }
.memorize-nav .btn-ghost.is-hidden { display: none; }
.memorize-method-link {
  display: block; margin: 12px auto 0; padding: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.memorize-method-link:hover { color: var(--text-secondary); }

/* Écran de fin : boutons empilés */
#memorize-done .end-subtitle { margin-bottom: 20px; }
#memorize-done .btn + .btn { margin-top: 10px; }

/* Bouton play/pause du mode mains libres, dans l'en-tête du quiz (à gauche du son).
   Il reprend le style .icon-btn ; on le teinte juste quand la lecture est en pause
   pour signaler qu'il faut taper pour reprendre. */
#quiz-hf-toggle.is-paused {
  color: var(--primary);
  border-color: var(--primary);
}

/* Écran quiz : remplir la hauteur, pas de scroll, carte équilibrée verticalement.
   L'écran devient une colonne flex qui occupe la hauteur visible (moins la
   tab-bar). La carte prend les marges auto haut/bas : elle se centre dans
   l'espace libre (donc descend) et le grand vide du bas disparaît. */
#quiz-screen.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 72px);
  overflow: hidden;                /* pas de scroll vertical */
  padding-bottom: 16px !important; /* on annule le 92px : plus besoin puisque ça ne scrolle plus */
}
#quiz-screen.active .flashcard-wrapper {
  margin-top: auto;
  margin-bottom: auto;
}