/* ===== 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;
  --radius: 10px; /* rayon par défaut des contrôles (var utilisée mais jamais définie auparavant) */
  /* Aliases (legacy) — résolus dynamiquement avec --bg-card / --border */
  --card-bg: var(--bg-card);
  --border-color: var(--border);

  --text: #221E17;
  /* Encre vert profond : texte de lecture teinté à l'accent (liste des cartes). */
  --text-deep-green: #14382B;
  --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;
}

/* (padding mobile de .screen : voir le bloc ===== RESPONSIVE ===== plus bas,
   qui définissait déjà la valeur effective — l'ancien doublon ici était mort) */
.screen.active { display: block; }

/* ===== TRANSITIONS ENTRE ÉCRANS =====
   Définies plus bas (screenSlideIn / screenSlideOut) : l'ancien doublon
   .screen-enter/.screen-exit qui vivait ici était mort (toujours écrasé). */

/* ===== 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;
}

/* Étiquette typographique façon carte à jouer : enseigne + petites capitales
   Fraunces, encre colorée, SANS fond ni bordure (exit la pastille teintée). */
.phase-badge {
padding: 0;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 13px;
letter-spacing: .05em;
text-transform: uppercase;
margin-bottom: 0;
}
.phase-suit { display: inline-flex; align-items: center; }
.phase-suit svg { width: 14px; height: 14px; display: block; }
/* ========== 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 { color: #B5705A; }
.phase-badge.revision { color: var(--primary); }
.phase-badge.new-cards { color: #A9762A; }
.phase-badge.free-learning { color: var(--quiz); }
.phase-badge.encode { color: #0E8A6B; }
body.dark-mode .phase-badge.new-cards { color: #D6A24E; }
body.dark-mode .phase-badge.difficult { color: #C98C73; }

.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;
}
/* Énoncés longs : corps réduit au lieu de déborder sur l'indice du bas
   (classes posées par fitCardText selon la longueur du texte). */
.flashcard-text.text-long  { font-size: 18px; }
.flashcard-text.text-xlong { font-size: 16px; }
/* Un mot seul plus large que la carte (« l'impressionnisme » en écran étroit)
   se coupe en fin de ligne au lieu d'être rogné par overflow:hidden. */
.flashcard-text { overflow-wrap: break-word; }

/* ===== 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 ===== */
/* Chaque carte est un objet posé sur l'écran : panneau clair, coins arrondis, ombre
   courte, liseré vert en tête. D'où le retour à une liste à gouttières — le bord à bord
   et son trait de séparation n'avaient de sens que pour des lignes de tableau. */
.learned-list{
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 18px;
}
/* Fond teinté sous la liste : des panneaux clairs sur un écran clair n'ont aucun relief,
   l'ombre seule ne suffit pas à les détacher. */
#learned-screen {
background: var(--bg);
}
#learned-screen .library-stat {
background: var(--bg-card);
}
.learned-item{
position: relative;
background: var(--bg-card);
border: none;
border-radius: 20px;
padding: 13px 15px 11px;
box-shadow: 0 12px 24px -16px rgba(34, 30, 23, 0.5), 0 2px 5px -3px rgba(34, 30, 23, 0.16);
content-visibility: auto;
contain-intrinsic-size: 0 230px;
}
/* Le liseré vert de tête a été retiré : sur une liste, la même barre répétée à chaque
   carte n'apporte aucune information et alourdit le défilement. La carte se détache par
   son ombre, et sa nature se lit à son contenu. */

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



/* ===== LEARNED ITEM HEADER (avec bouton toggle difficile + source + suppression) ===== */
/* Le filet de séparation question/réponse vit sur l'en-tête, pas sur .learned-a : la
   réponse se floute (filter: blur) quand les réponses sont cachées, et le filet aurait
   flouté avec elle. */
.learned-item-header {
display: flex;
align-items: flex-start;
gap: 10px;
padding-bottom: 7px;
margin-bottom: 7px;
border-bottom: 1px solid var(--border-light);
position: relative;
}
/* Quatre actions de carte en 2×2 : source et suppression sur la première ligne, niveau et
   image sous elles. La colonne garde la largeur de deux pastilles, donc la question
   conserve exactement la même laisse qu'avant ce regroupement. */
.learned-item-actions {
display: grid;
grid-template-columns: repeat(2, 32px);
gap: 5px;
justify-items: end;
flex-shrink: 0;
margin-left: auto;
}

.tier-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
font-size: 15px;
color: var(--text-secondary);
background: var(--bg);
border: none;
border-radius: 50%;
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: 50%;
border: none;
background: var(--bg);
color: var(--primary);
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);
background: var(--marked-bg);
}
.btn-toggle-mark:active {
transform: scale(0.95);
}
/* Marquée : le signet se remplit et prend la teinte « difficile » — la pastille n'a plus
   de bordure à colorer, c'est l'aplat qui porte l'état. */
.learned-item.marked .btn-toggle-mark {
color: var(--marked);
background: rgba(181, 112, 90, 0.16);
}

.btn-show-source {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--bg);
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: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--bg);
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: 32px;
height: 32px;
border-radius: 50%;
border: none;
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;
}
.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);
}

/* Question et réponse en Fraunces : c'est le contenu de la carte, il porte l'identité.
   La réponse n'est plus grisée — sur une carte-objet, elle est l'autre moitié du recto. */
/* Encre vert profond plutôt que le brun-noir global : sur la liste, question et réponse
   sont le seul texte long, et cette teinte les rattache à l'accent de la marque sans
   perdre le contraste d'un texte de lecture. */
/* Échelle typographique de l'app : 22 px pour un titre d'écran, 21 px pour la carte de
   session (le héros de son écran), 16 px pour un titre de modale, 14-15 px pour le texte
   courant. Une question de liste est le titre d'un élément répété dans un écran qui
   défile : à 19,5 px elle rivalisait avec le titre de l'écran qui la contient. 17 px la
   remet à son rang — au-dessus du texte courant, nettement sous les titres. */
.learned-q{
font-family: 'Fraunces', Georgia, serif;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--text-deep-green);
flex: 1;
}
.learned-a{
font-family: 'Fraunces', Georgia, serif;
font-size: 16px;
font-weight: 500;
color: var(--text-deep-green);
line-height: 1.4;
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;
}
/* Une seule ligne ne tient pas : quatre pastilles + vignette + capsule libellée
   demandent ~520 px et le conteneur de l'app plafonne à 540 px (moins les marges, ~464
   utilisables) — sur téléphone la capsule se réduisait à un filet illisible. Elle passe
   donc en pleine largeur sous les outils dès que sa base de 190 px n'entre plus, et
   revient sur la ligne si un jour la colonne s'élargit. La vignette est repoussée à
   droite pour que la première ligne reste équilibrée. */
.learned-item-footer {
display: flex;
flex-wrap: wrap;
gap: 7px;
row-gap: 8px;
margin-top: 9px;
align-items: center;
}
/* Une seule rangée : œil, haut-parleur, capsule, vignette. Le niveau et l'image sont
   remontés en tête de carte (voir .learned-item-actions) — ce sont des actions sur la
   carte, comme la source et la suppression, alors qu'œil et haut-parleur portent sur la
   réponse juste au-dessus. La capsule prend tout ce que la vignette laisse ; celle-ci
   ayant une largeur fixe, cette largeur est la même sur toutes les cartes illustrées. */
.learned-item-footer .btn-show-note { flex: 1 1 auto; }
/* Téléphone : la capsule ne tient pas à côté des outils (il lui faut 239 px, il en reste
   ~155). Elle passe alors en pleine largeur SOUS eux, et la vignette rejoint la première
   ligne. Ordre explicite plutôt que retour à la ligne spontané : sinon c'est la vignette
   qui se retrouvait seule sur la seconde ligne. */
@media (max-width: 480px) {
.learned-item-footer .btn-show-note { order: 2; flex-basis: 100%; }
.learned-item-footer .learned-card-visual { order: 1; margin-left: auto; }
}
/* Vignette + pastille « + » forment UN seul élément de la ligne : en frères, le retour
   à la ligne les séparait et le « + » atterrissait seul à gauche sous la vignette. */
.learned-card-visual {
position: relative;
display: inline-flex;
align-items: flex-end;
flex: 0 0 auto;
}

.btn-toggle-answer-blur {
width: 32px;
height: 32px;
padding: 0;
background: var(--bg);
border: none;
color: var(--text-secondary);
border-radius: 50%;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
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) ===== */
/* Pastille pleine posée sur le coin de la vignette : l'anneau couleur carte la détache de
   la photo. La marge négative ne s'applique que s'il y a une vignette juste avant. */
.btn-toggle-explication {
margin-left: auto;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--primary);
color: #fff;
cursor: pointer;
transition: all var(--transition);
}
/* Badge posé SUR le coin bas-droit de la vignette (hors flux) : en élément de flex, il se
   rangeait à côté d'elle et poussait l'ensemble contre le bord de la carte. Hors flux, la
   vignette reste alignée à droite et le badge chevauche son coin, comme une pastille de
   notification. Le débord de 10 px est absorbé par les 18 px de marge interne de la carte. */
.learned-card-image:not(:empty) + .btn-toggle-explication {
position: absolute;
right: -9px;
bottom: -5px;
margin: 0;
box-shadow: 0 0 0 3px var(--bg-card);
}
.btn-toggle-explication i {
font-size: 18px;
line-height: 1;
}
.btn-toggle-explication:hover {
filter: brightness(1.08);
}
.btn-toggle-explication:active {
transform: scale(0.94);
}
/* La pastille est déjà pleine au repos : l'état déplié se lit au « + » qui bascule en croix. */
.btn-toggle-explication i {
transition: transform var(--transition);
}
.btn-toggle-explication[aria-expanded="true"] i {
transform: rotate(45deg);
}

/* ===== IMAGE PERSO PAR CARTE (liste « Cartes apprises ») ===== */
.btn-card-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
width: 32px;
height: 32px;
  padding: 0;
border: none;
border-radius: 50%;
  background: var(--bg);
  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 « + »). */
/* `flex: 0 0 auto` et non `flex: 1` : la vignette se dimensionnait comme la capsule et
   se partageait l'espace libre avec elle, ce qui tronquait « Ajouter une accroche
   mémoire » en « …joutre une accroche mém… ». Elle prend maintenant sa largeur propre. */
.learned-card-image {
  flex: 0 0 auto;
  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%;
}
/* Cadre de largeur FIXE, et non largeur proportionnelle à l'image : c'est ce qui donne à
   la capsule voisine la même largeur sur toutes les cartes. Une photo en portrait était
   deux fois moins large qu'un paysage (52 px contre 100), et la capsule sautait d'autant
   d'une carte à l'autre. `contain` conserve l'image entière dans le cadre — les portraits
   se posent sur un fond sable, sans recadrage. */
.learned-card-img {
  height: 48px;
  width: 64px;
  border-radius: 12px;
  object-fit: contain;     /* image entière, sans recadrage (portrait comme paysage) */
  border: none;
  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;
  flex-direction: column;   /* photo + ligne de crédit dessous */
}
/* Crédit auteur + licence : obligatoire pour les photos CC BY / CC BY-SA.
   Discret (il ne doit pas concurrencer l'explication) mais lisible. */
.card-art-credit {
  margin-top: 5px;
  max-width: 240px;
  font-family: 'Spline Sans', sans-serif;
  font-size: 9.5px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: inherit;
  opacity: 0.55;
}
.card-art-img {
  max-width: 240px;
  max-height: 170px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

/* Visionneuse plein écran */
/* ===== MODALE IMAGE DE CARTE =====
   Remplace l'ancienne visionneuse plein écran (image nue sur fond noir, un clic pour
   fermer) : on peut maintenant lire la légende, le crédit, et agir sur l'image. */
.modal-card-image .modal-content {
  position: relative;
  padding: 14px;
  width: min(92%, 460px);
  max-width: 460px;
}
.card-image-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background var(--transition);
}
.card-image-modal-close:hover { background: var(--bg); }
.card-image-stage {
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Photos en portrait comme en paysage : on contient, jamais on ne rogne — une carte
     illustrée par un drapeau ou un plan perdrait son sujet au recadrage. */
  min-height: 180px;
}
.card-image-modal-img {
  display: block;
  width: 100%;
  max-height: 54vh;
  object-fit: contain;
  touch-action: pan-y; /* le glissé horizontal sert à changer d'image */
}
.card-image-modal-caption {
  margin: 12px 6px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.card-image-modal-credit {
  margin: 4px 6px 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.card-image-modal-credit:empty { display: none; }
.card-image-modal-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card-image-modal-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.card-image-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(34, 30, 23, 0.16);
  cursor: pointer;
  transition: background var(--transition);
}
.card-image-dot.active { background: var(--primary); }
.card-image-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.card-image-action {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.card-image-action svg { width: 18px; height: 18px; flex: 0 0 auto; }
.card-image-action.replace {
  border: 1px solid rgba(14, 138, 107, 0.35);
  color: var(--primary);
}
.card-image-action.replace:hover { background: rgba(14, 138, 107, 0.07); }
.card-image-action.delete {
  border: 1px solid rgba(181, 112, 90, 0.4);
  color: var(--error);
  background: rgba(181, 112, 90, 0.05);
}
.card-image-action.delete:hover { background: rgba(181, 112, 90, 0.12); }
.card-image-action:active { transform: scale(0.99); }
/* Écrans étroits : deux libellés de cette longueur côte à côte se coupent en trois
   lignes chacun — mieux vaut empiler. */
@media (max-width: 400px) {
  .card-image-modal-actions { flex-direction: column; gap: 8px; }
  .card-image-action { padding: 11px 10px; }
}

.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); }
}
/* display:flex (donc bloc) : l'étiquette passe sous la question au lieu de courir à la
   suite du point d'interrogation. width:fit-content pour qu'elle ne s'étire pas. */
/* En ligne à la suite de la question, et non en bloc sous elle : `display: flex` lui
   imposait une ligne entière + 10 px de marge, soit 34 px de carte pour un mot. Elle ne
   passe à la ligne que si la question occupe déjà toute la dernière. */
.marked-badge {
display: inline-flex;
align-items: center;
vertical-align: 0.1em;
width: fit-content;
margin: 0 0 0 8px;
padding: 3px 9px;
font-family: 'Spline Sans', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--marked);
background: var(--marked-bg);
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.08em;
}

/* ===== 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;
}

/* Action principale de la carte : bouton plein, il occupe la place libre de la rangée. */
/* Capsule : c'est l'action principale de la rangée, elle prend la forme d'un bouton
   plein et non d'un carré d'icône comme ses voisines. */
.btn-show-note {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 auto;
padding: 9px 14px;
font-size: 12.5px;
font-weight: 600;
color: #fff;
background: var(--primary);
border: 1px solid var(--primary);
border-radius: 999px;
box-shadow: 0 8px 16px -12px rgba(14, 138, 107, 0.95);
cursor: pointer;
transition: all var(--transition);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-show-note i {
font-size: 15px;
line-height: 1;
flex-shrink: 0;
}
.btn-show-note:hover {
filter: brightness(1.06);
}
.btn-show-note:active {
transform: scale(0.97);
}

/* V2.5.0: Style spécial quand note existe — l'accroche est écrite, l'appel à l'action
   n'a plus lieu d'être : le bouton se vide et redevient une commande discrète. */
.btn-show-note.has-note {
color: var(--primary);
background: rgba(14, 138, 107, 0.08);
border: 1px solid rgba(14, 138, 107, 0.2);
box-shadow: none;
}
.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-top: 18px;
margin-bottom: 12px;
}
/* Tuile en rangée (icône pleine à gauche, libellé + chiffre à droite) plutôt qu'en
   colonne centrée : le chiffre est la donnée, il doit pouvoir grossir sans que le
   libellé se batte avec lui pour l'axe central. */
.library-stat {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 14px 16px;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
text-align: left;
min-width: 0; /* sinon la grille refuse de descendre sous la largeur min-content */
}
.library-stat-icon {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.library-stat-icon svg {
width: 26px;
height: 26px;
display: block;
}
.library-stat-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.library-stat-label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-align: left;
}
.library-stat-value {
font-size: 28px;
font-weight: 700;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Acquis : vert plein. Reste à faire : neutre. Le contraste porte le sens, pas un emoji. */
.library-stat.is-learned {
background: rgba(14, 138, 107, 0.07);
border-color: rgba(14, 138, 107, 0.16);
}
.library-stat.is-learned .library-stat-icon {
background: var(--primary-dark);
color: #FFFFFF;
}
.library-stat.is-learned .library-stat-value { color: var(--primary-dark); }
.library-stat.is-unseen {
background: rgba(34, 30, 23, 0.035);
}
.library-stat.is-unseen .library-stat-icon {
background: rgba(34, 30, 23, 0.07);
color: var(--text-secondary);
}
.library-stat.is-unseen .library-stat-value { color: var(--text-secondary); }

/* ===== BANDEAU DE SYNTHÈSE (total / progression / dernière session) ===== */
.library-summary {
display: flex;
align-items: stretch;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 3px;
margin-bottom: 20px;
}
/* Trois cellules dans un conteneur plafonné à 540 px : la place par cellule est connue
   (~166 px), les tailles ci-dessous sont calées pour que « 19 juin 2026 » y tienne sans
   césure. En dessous (cf. media query), on empile. */
.library-summary-cell {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
padding: 12px 9px;
}
/* Hairline entre cellules : la séparation se fait au trait, pas au fond. */
.library-summary-cell + .library-summary-cell::before {
content: "";
position: absolute;
left: 0;
top: 15%;
bottom: 15%;
width: 1px;
background: var(--border-light);
}
.library-summary-icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(14, 138, 107, 0.10);
color: var(--primary);
}
.library-summary-icon.muted {
background: rgba(34, 30, 23, 0.06);
color: var(--text-secondary);
}
.library-summary-icon svg {
width: 19px;
height: 19px;
display: block;
}
.library-summary-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.library-summary-label {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.25;
}
.library-summary-value {
font-size: 16px;
font-weight: 700;
line-height: 1.15;
color: var(--text);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.library-summary-value.accent { color: var(--primary); }

/* Le conteneur de l'app plafonne à 540 px : dès que la fenêtre passe sous ce seuil, la
   rangée de trois n'a plus la place de tenir « 19 juin 2026 » et débordait du panneau.
   On empile alors, hairlines à l'horizontale — et on profite de la largeur retrouvée
   pour remonter d'un cran la taille des valeurs. */
@media (max-width: 540px) {
.library-summary { flex-direction: column; padding: 2px 6px; }
.library-summary-cell { padding: 11px 6px; gap: 11px; }
.library-summary-cell + .library-summary-cell::before {
left: 0;
right: 0;
top: 0;
bottom: auto;
width: auto;
height: 1px;
}
.library-summary-icon { width: 38px; height: 38px; }
.library-summary-icon svg { width: 20px; height: 20px; }
.library-summary-label { font-size: 12.5px; }
.library-summary-value { font-size: 17px; }
}

/* Téléphones : tuiles resserrées d'un cran (deux colonnes à tenir dans ~330 px). */
@media (max-width: 480px) {
.library-stats { margin-top: 16px; }
.library-stat { gap: 11px; padding: 12px 13px; }
.library-stat-icon { width: 44px; height: 44px; border-radius: 13px; }
.library-stat-icon svg { width: 23px; height: 23px; }
.library-stat-label { font-size: 12px; }
.library-stat-value { font-size: 24px; }
}
@media (max-width: 360px) {
.library-stat { gap: 9px; padding: 11px 11px; }
.library-stat-icon { width: 40px; height: 40px; border-radius: 12px; }
.library-stat-icon svg { width: 21px; height: 21px; }
.library-stat-value { font-size: 22px; }
}

.library-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
/* ── Crédits photos : attribution complète des images Wikimedia Commons ── */
.credits-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.credits-item {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 12px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.credits-thumb {
flex-shrink: 0;
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 8px;
background: var(--bg-card);
}
.credits-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.credits-subject {
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
}
.credits-line {
font-size: 12px;
line-height: 1.45;
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.credits-line a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.credits-empty {
margin-top: 16px;
font-size: 14px;
color: var(--text-secondary);
}

.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) ===== */
/* Bord à bord comme .learned-list (qui annule le padding latéral de .screen) : sinon les
   cartes défilent en clair dans les deux bandes de 20 px laissées libres par la barre. */
.learned-sticky-bar {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-card);
margin-left: -20px;
margin-right: -20px;
padding: 8px 20px 6px;
border-bottom: 1px solid var(--border-light);
/* Angles du bas adoucis : la barre se pose sur la liste au lieu de la trancher. */
border-radius: 0 0 var(--radius-md) var(--radius-md);
/* Ombre courte : dit que la liste passe DESSOUS, sinon la carte tranchée net par le bord
   de la barre se lit comme un bug de rendu. */
box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.22);
margin-bottom: 4px;
}
@media (max-width: 480px) {
  .learned-sticky-bar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

.learned-controls-row {
display: flex;
align-items: center;
gap: 8px;
}
/* Colonne de la barre : rangée de filtres, rangée secondaire, tiroir des catégories.
   `stretch` (et non `flex-start`) pour que la rangée de filtres dispose de la largeur
   entière — sinon elle se dimensionne à son contenu et déborde au lieu de défiler — et
   pour que la rangée secondaire puisse repousser les réglages d'affichage à droite. */
.learned-controls-filters {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.filter-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* ── Rangée unique des filtres de sélection ──
   Source et niveau de maîtrise sont deux familles du même geste (choisir quelles cartes
   afficher) : une seule ligne de six pilules plutôt que deux lignes de trois. La ligne ne
   wrappe pas, elle défile horizontalement quand l'espace manque. C'est ce `nowrap` qui
   rend enfin la hairline verticale fiable : elle ne peut plus atterrir en début de ligne
   comme au temps de la rangée qui wrappait. */
.filter-row-main {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* Bord à bord dans la barre sticky : les pilules doivent filer sous le bord physique de
   la carte, pas s'arrêter net sur une ligne invisible à l'intérieur du padding — c'est ce
   qui faisait lire la troncature comme un bug plutôt que comme un défilement. Le padding
   symétrique remet la première et la dernière pilule à l'aplomb de la colonne de texte.
   Les 4 px verticaux laissent passer le halo de 3 px et le translateY(-1px) de
   .filter-btn.active, qu'`overflow-x` rognerait au bord de la boîte de padding. */
margin-left: -20px;
margin-right: -20px;
padding: 4px 20px;
}
@media (max-width: 480px) {
  .filter-row-main { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
.filter-row-main::-webkit-scrollbar { display: none; }
/* Pas de compression : chaque pilule garde sa largeur et c'est la rangée qui défile. */
.filter-row-main > .filter-btn {
flex: 0 0 auto;
padding: 6px 9px;
}
/* Fondu sur le bord qui déborde encore : dit « ça continue par là ». Posé par classe et
   non en permanence, pour ne jamais estomper la première pilule quand on est au début ni
   la dernière quand on est au bout — sinon le fondu devient le bug qu'il devait corriger.
   Préfixe -webkit- requis : l'appli tourne en PWA sur iOS Safari. */
.filter-row-main.fade-end {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.filter-row-main.fade-start {
-webkit-mask-image: linear-gradient(to right, transparent, #000 44px);
mask-image: linear-gradient(to right, transparent, #000 44px);
}
.filter-row-main.fade-start.fade-end {
-webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
/* Frontière « quel ensemble » / « quel niveau de maîtrise ». Assez pour marquer les deux
   familles, pas assez pour couper la rangée en deux blocs. */
.filter-family-sep {
flex: 0 0 auto;
align-self: center;
width: 1px;
height: 18px;
margin: 0 3px;
background: var(--border);
}

/* ── Rangée secondaire : filtre catégories à gauche, réglages de lecture à droite ── */
.learned-controls-secondary {
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
/* Réglages d'affichage. Ce ne sont pas des critères de sélection : ni pilule, ni bordure,
   ni fond. Texte en retrait, poussé en marge droite, isolé par une hairline. */
.display-prefs {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
padding-left: 10px;
/* `--border` et non `--border-light` : en mode sombre `--border-light` est plus sombre que
   `--bg-card`, le filet disparaissait. `--border` reste au-dessus du fond dans les deux
   thèmes, et c'est déjà la valeur de .filter-family-sep — un seul poids de filet. */
border-left: 1px solid var(--border);
}
.display-pref-btn {
background: none;
border: none;
padding: 4px 6px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
transition: color var(--transition);
}
.display-pref-btn:hover { color: var(--primary); }
.display-pref-btn:active { color: var(--primary-dark); }
.display-pref-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
/* Sous ~420 px les deux réglages passent à la ligne : la hairline se retrouverait en tête
   de ligne, on la retire à ce palier. */
@media (max-width: 420px) {
  .learned-controls-secondary { row-gap: 4px; }
  .display-prefs { padding-left: 0; border-left: none; }
}
.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;
}
/* Libellé toujours affiché : masqué sauf sur le bouton actif, la puce n'était plus qu'un
   nombre nu (« ◇ 2670 ») et changeait de largeur à chaque clic, ce qui re-wrappait la
   rangée. Le nom accessible du bouton était le compteur seul. */
.filter-level .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 {
display: inline-flex;
align-items: center;
gap: 5px;
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);
}
/* ── Filtre à compteur zéro ──
   Un palier vide ne mérite pas le poids visuel d'un palier peuplé. On l'atténue, on ne le
   désactive pas : ni `disabled`, ni `pointer-events` — vérifier qu'un palier est vide est
   une information légitime. Il reprend son poids plein au survol, au focus et quand il est
   sélectionné, sinon l'utilisateur perd de vue où il se trouve. */
.filter-btn.is-empty {
opacity: 0.45;
}
/* Le fond sombre avale plus vite les faibles opacités : même écart perçu, valeur plus haute. */
body.dark-mode .filter-btn.is-empty {
opacity: 0.55;
}
.filter-btn.is-empty:hover,
.filter-btn.is-empty:focus-visible,
.filter-btn.is-empty.active,
body.dark-mode .filter-btn.is-empty:hover,
body.dark-mode .filter-btn.is-empty:focus-visible,
body.dark-mode .filter-btn.is-empty.active {
opacity: 1;
}

/* ===== 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;
}

/* ===== HISTORIQUE D'UNE CARTE ===== */
.btn-card-history {
  margin-top: var(--space-4);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  background: var(--free-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn-card-history:hover { background: var(--success-bg); border-color: var(--primary); }

.card-history[hidden] { display: none; } /* explicite : une règle display en amont neutraliserait l'attribut */
.card-history {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: left;
}
.card-history-section + .card-history-section { margin-top: var(--space-5); }
.card-history-section h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.card-history-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-history-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 5px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-light);
}
.card-history-fact:last-child { border-bottom: none; }
.card-history-fact span { color: var(--text-secondary); flex: none; }
.card-history-fact strong {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  /* Les formules (« 6 j × 2,60 (EF) ») peuvent être longues : on les laisse revenir à la ligne. */
  overflow-wrap: anywhere;
}

.card-history-log { list-style: none; margin: 0; padding: 0; }
.card-history-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}
.card-history-entry + .card-history-entry { margin-top: 4px; }
.card-history-entry > i { font-size: 15px; line-height: 1.4; flex: none; }
.card-history-entry.ok   { background: var(--success-bg); border-left-color: var(--success); }
.card-history-entry.ok > i { color: var(--success); }
.card-history-entry.fail { background: var(--error-bg); border-left-color: var(--error); }
.card-history-entry.fail > i { color: var(--error); }
.card-history-entry.warn { background: var(--marked-bg); border-left-color: var(--gold); }
.card-history-entry.warn > i { color: var(--gold); }
.card-history-entry-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.card-history-date { font-weight: 400; color: var(--text-secondary); }
.card-history-entry-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.card-history-empty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.card-history-section .card-history-empty { margin-top: var(--space-2); }

/* ===== 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 : voir la définition unique en fin de fichier (badge de version
   en bas à gauche). L'ancienne pastille centrée qui vivait ici laissait fuiter
   son translateX(-50%) et poussait le badge à moitié hors écran. */
@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) ===== */
/* En-tête de groupe : pastille centrée posée sur le fond de l'écran, entre deux cartes.
   align-self, parce que la liste est une colonne flex — margin:auto ne centrerait rien. */
.date-separator {
display: flex;
align-items: center;
align-self: center;
max-width: 100%;
margin: 8px 0 2px;
padding: 9px 20px;
background: var(--bg-card);
border-radius: 999px;
box-shadow: 0 6px 14px -12px rgba(34, 30, 23, 0.5);
}
.date-separator-label {
font-size: 13.5px;
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;
}

.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;
}
/* Les tuiles de « Cartes apprises » sont des filtres cliquables ; celles de la
   bibliothèque sont de simples indicateurs (.is-static). */
.library-stat {
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.library-stat.is-static { cursor: default; }
.library-stat:not(.is-static):hover { border-color: rgba(34, 30, 23, 0.14); }
.library-stat.is-learned:not(.is-static):hover { border-color: rgba(14, 138, 107, 0.3); }
.library-stat:not(.is-static):active { transform: scale(0.99); }
/* Sélection = liseré interne dans la teinte de la tuile. L'ancien `outline: 2px solid
   var(--accent)` ne s'affichait pas : --accent n'existe pas dans :root. */
.library-stat.is-learned.active {
  background: rgba(14, 138, 107, 0.13);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--primary);
}
.library-stat.is-unseen.active {
  background: rgba(34, 30, 23, 0.07);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px rgba(34, 30, 23, 0.3);
}
.library-stat:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.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-force-mnemo-toggle { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.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.) */
/* Étiquette typographique (voir .phase-badge global) : ici on ne pilote que
   l'encre par phase — aucun fond, aucune bordure. */
.rv-theme .phase-badge { background: none; border: none; padding: 0; color: var(--rv-ink); }
.rv-theme .phase-badge .phase-suit { color: currentColor; }
.rv-theme .phase-badge.revision  { color: var(--rv-em); }
.rv-theme .phase-badge.new-cards { color: #A9762A; }
.rv-theme .phase-badge.difficult { color: var(--rv-redInk); }
.rv-theme .phase-badge.encode    { color: var(--rv-emDeep); }
/* Dark : l'or éclairci pour le contraste (les encres rv-* s'adaptent déjà) */
body.dark-mode .rv-theme .phase-badge.new-cards { color: #D6A24E; }
.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;
  /* Haut : dégage le label « QUESTION » (absolu, top 26px).
     Bas : réserve la place du .rv-hint (absolu, bottom 24px) pour que le texte
     ne le recouvre plus sur les énoncés longs / écrans étroits. */
  padding: 46px 26px 60px;
  box-shadow: 0 22px 50px -28px rgba(20,16,10,.5);
  /* Filet de sécurité : si le contenu dépasse malgré tout (verso chargé sur
     très petit écran), il devient défilable au lieu d'être rogné. « safe »
     rend le haut atteignable ; ignoré par les vieux navigateurs (= centré). */
  overflow-y: auto;
  justify-content: safe center;
}
.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); }
/* Corps FLUIDES (clamp sur vw) : la carte fait ~90vw en écran étroit, donc les
   tailles fixes débordaient (réponse coupée, texte sur le hint) dès ~300px. */
.rv-theme .flashcard-text {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(16px, 6.6vw, 22px);
  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: clamp(17px, 7.2vw, 25px);
}
/* Adaptation à la longueur (voir fitCardText) : évite le débordement sur le hint */
.rv-theme .flashcard-text.text-long  { font-size: clamp(15px, 5.8vw, 19px); }
.rv-theme .flashcard-text.text-xlong { font-size: clamp(13px, 5vw, 16px); }
/* 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: clamp(12px, 4.8vw, 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-weight: 500;
  font-size: clamp(11px, 4.2vw, 14px); /* fluide et compact : doit tenir sur UNE ligne */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px;
}
.rv-theme .rv-hint svg { width: 1.15em; height: 1.15em; }

/* ── 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; }
/* As de pique : l'enseigne se pose directement sur la carte, à l'émeraude —
   exit le carré arrondi dégradé façon « icône d'app store ». */
.wel-master-pip { position:absolute; inset:0; display:grid; place-items:center; color:var(--wc-em); }
.wel-master-pip svg {
  width:58px; height:58px;
  filter: drop-shadow(0 10px 16px rgba(14, 138, 107, 0.3));
}

/* 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; }
/* Icône nue à l'émeraude (exit la pastille arrondie teintée) ; largeur fixe
   pour garder l'alignement des trois lignes. */
.wel-feat-ico { width:36px; height:44px; display:grid; place-items:center; flex-shrink:0; color:var(--wc-emDeep); }
.wel-feat-ico svg { width:24px; height:24px; }
.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, en bas à gauche, 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));
  font-size: 11px; color: var(--text-muted);
  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:32px; height:38px; }
  .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-wrap { display:flex; align-items:baseline; gap:7px; }
.hub-logo { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:20px; line-height:1.15; margin:0; color:var(--primary); letter-spacing:-.01em; }
.hub-version { font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text-secondary); opacity:.75; }
.hub-version::before { content:"v"; opacity:.7; }
.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; }
/* Tag net à coins doux (exit la pilule pastel à bord coloré) ; l'état actif
   passe en encre PLEINE — inversé de lui-même en mode sombre via les vars. */
.duel-cat-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; font-size:13px; font-weight:600; border-radius:10px; 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(--text-primary); background:var(--text-primary); color:var(--bg-card); }
/* L'icône colorée (style inline) passe à l'encre inversée quand le tag est actif */
.duel-cat-chip.active .cat-ic { color: inherit !important; }
.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;
}

/* ===== Licence / fin d'essai =====
   Sobriété voulue : pas de rouge, pas de cadenas géant, pas de bandeau d'urgence.
   L'écran informe, il ne met pas la pression. Tout passe par les variables de thème,
   donc le mode sombre suit sans règle dédiée. */
.modal-paywall { max-width: 460px; }
.paywall-body { padding: 2px 2px 4px 2px; }
.paywall-lead {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.paywall-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.paywall-key-shown {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text);
  background: var(--free-bg);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.paywall-buy {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.paywall-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
}
.paywall-buy-btn { width: 100%; }
.paywall-key-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.paywall-key-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.paywall-key-row { display: flex; gap: 8px; }
#paywall-key-input {
  flex: 1;
  min-width: 0;
  padding: 13px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}
/* Le gabarit complet de la clé ne tient pas dans le champ sur un écran de 360 px :
   police réduite pour l'indication, et sur les plus étroits le bouton passe dessous. */
#paywall-key-input::placeholder { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: 11.5px; }
@media (max-width: 380px) {
  .paywall-key-row { flex-direction: column; }
  .paywall-key-row .btn { width: 100%; }
}
#paywall-key-input:focus { outline: none; border-color: var(--primary); }
.paywall-key-row .btn { width: auto; padding-left: 18px; padding-right: 18px; white-space: nowrap; }
.paywall-key-msg {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 10px 0 0 0;
  min-height: 1em;
  line-height: 1.45;
}
.paywall-key-msg.error { color: var(--error); }

/* Sources de quiz qui contiennent des cartes jamais vues : atténuées, jamais retirées.
   Le clic reste actif et ouvre l'explication. */
.quiz-source-card.locked { opacity: 0.55; }
.quiz-source-card.locked .qsc-sub::after { content: " · licence requise"; }

/* Bibliothèque : ce qui n'est pas affiché est annoncé en fin de liste. */
.library-locked-note {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--free-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.library-locked-note span { color: var(--primary); font-weight: 600; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   APPRENTISSAGE ACTIF
   Deux compteurs, rien d'autre. Pas de barre de progression : une carte
   ratée retourne dans le tas et la barre reculerait. Pas de pile de barres
   colorées, pas d'animation, pas de ligne de position. Zéro gamification.
   ══════════════════════════════════════════════════════════════ */

/* Tête du filtre « Difficiles », dans l'onglet Cartes */
.apprentissage-launch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin: 0 0 14px;
}
.apprentissage-launch-text { min-width: 0; flex: 1 1 180px; }
.apprentissage-launch-title {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--text);
}
.apprentissage-launch-sub {
  margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4;
}
.apprentissage-launch-btn { flex: 0 0 auto; width: auto; }

/* Écran de session */
/* Compteurs de l'apprentissage actif, dans l'en-tete de l'ecran de seance, a la
   place exacte de la barre de progression. */
.apprentissage-counters {
  display: flex; gap: 8px; margin: 2px 0 4px;
}
.apprentissage-counter {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 8px 6px;
}
.apprentissage-counter-value {
  font-size: 21px; font-weight: 700; color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.apprentissage-counter-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
}

/* (Le CSS de l'ancien ecran de carte du mode a ete retire : le mode utilise
   desormais #session-screen, il n'a plus de markup propre.) */

.apprentissage-done { padding: 40px 24px; text-align: center; }
.apprentissage-done .home-greeting { margin: 10px 0 24px; }

/* ══════════════════════════════════════════════════════════════
   FRISE DE PROGRESSION D'UNE CARTE (modal de niveau)
   Un chemin sur lequel on peut reculer, pas une barre qui se remplit.
   Aucun badge, aucun pourcentage, aucune célébration.
   ══════════════════════════════════════════════════════════════ */
.level-path { margin: 14px 0 4px; text-align: left; }

.level-path-steps {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.level-path-step {
  position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 0 0 12px 0; padding-left: 20px;
  font-size: 14px; color: var(--text-muted);
}
/* Le trait qui relie les étapes */
.level-path-step::before {
  content: ""; position: absolute; left: 4px; top: 12px; bottom: 0;
  width: 1px; background: var(--border);
}
.level-path-step:last-child { padding-bottom: 0; }
.level-path-step:last-child::before { display: none; }

.level-path-dot {
  position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
}
.level-path-step.is-passed .level-path-dot { background: var(--text-secondary); border-color: var(--text-secondary); }
.level-path-step.is-current .level-path-dot { background: var(--primary); border-color: var(--primary); }
.level-path-step.is-passed { color: var(--text-secondary); }
.level-path-step.is-current { color: var(--text); font-weight: 700; }

.level-path-here {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--primary); white-space: nowrap;
}

.level-path-next-title {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
}
.level-conds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.level-cond {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px; color: var(--text-secondary);
}
.level-cond-label { min-width: 0; }
.level-cond-val {
  flex: 0 0 auto; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Condition déjà remplie : atténuée, elle n'est plus ce qu'on attend. Pas de coche
   verte ni de pastille : ce n'est pas une récompense, c'est un état. */
.level-cond.is-ok { opacity: .5; }
.level-cond.is-ok .level-cond-val { font-weight: 600; color: var(--text-secondary); }

/* Carte retenue par une condition qui ne s'affiche pas : la phrase porte seule
   l'explication, elle doit donc se lire, pas se deviner. Ton neutre, pas une alerte. */
.level-path-slow {
  margin: 10px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 12px;
}

.level-path-warn {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 10px;
}

/* Le second lien : la provenance du fait, sous la fiche.
   Discret par construction — la fiche est l'action principale, l'origine est la
   verification. Les 208 cartes dont l'origine etait l'ancien domaine n'en ont
   pas : la meme page a son ancienne adresse n'est pas une seconde source. */
.flashcard-source .source-origine {
display: block;
margin-top: 2px;
font-size: 11px;
opacity: 0.72;
}

.source-modal-origine {
margin: 10px 0 0;
font-size: 13px;
color: var(--text-muted, rgba(0, 0, 0, 0.6));
}

.source-modal-origine a {
color: var(--primary);
text-decoration: none;
}

.source-modal-origine a:hover {
text-decoration: underline;
}

/* ============================================================
   MODE « RÉPONSE À VOIX HAUTE »
   Le mode se joue sur l'écran de séance : rien ici ne redéfinit la carte, les
   compteurs ni les boutons de jugement. Il n'y a que le panneau qui remplace
   « Je sais / Je ne sais pas », et les deux avertissements.
   ============================================================ */

.vocal-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* Indicateur d'écoute. Le pouls est la seule animation du mode : il dit « le micro
   est ouvert », ce qu'aucun texte ne dit aussi vite. */
.vocal-listening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: var(--radius);
  background: var(--success-bg);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 15px;
}
.vocal-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: vocal-pulse 1.4s ease-in-out infinite;
}
@keyframes vocal-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}
/* Respecter le réglage système : le pouls est un confort, pas une information
   qu'on perdrait en le retirant — le texte « Je t'écoute » la porte aussi. */
@media (prefers-reduced-motion: reduce) {
  .vocal-pulse { animation: none; }
}

/* Ce que la reconnaissance comprend, au fil de la phrase. */
.vocal-heard {
  min-height: 20px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
}

.vocal-retry { width: 100%; }

/* Le verdict : ce que la machine a compris, la bonne réponse, et le dernier mot. */
.vocal-verdict {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.vocal-verdict-line {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}
.vocal-verdict-line strong { color: var(--text-primary); font-size: 16px; }
.vocal-verdict-heard { color: var(--text-primary); }
.vocal-verdict-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

/* Les avertissements. Même gabarit que les autres modals de l'application. */
.modal-vocal-consent { max-width: 420px; }
.vocal-consent-body {
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vocal-consent-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}
.vocal-consent-lien { font-size: 14px; }
.vocal-consent-lien a { color: var(--primary-dark); }
.vocal-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

/* Liens légaux, en pied du menu « Plus ». Discrets par dessein : on les cherche
   quand on en a besoin, ils ne disputent pas la place aux entrées du menu. */
.more-sheet-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 16px;
}
.more-sheet-legal a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}
.more-sheet-legal a:hover,
.more-sheet-legal a:focus-visible { text-decoration: underline; color: var(--text-primary); }

/* ---- Mode vocal : la restitution après chaque réponse (21/09/2026) ----
   Retour d'usage : l'enchaînement était trop rapide, rien n'était dit ni relu.
   La réponse est désormais redite à voix haute et montrée, dans les deux cas. */

/* Bouton pause, dans l'en-tête de séance. Une seule des deux icônes est visible. */
.vocal-pause-btn .vocal-ico-play { display: none; }
.vocal-pause-btn.en-pause .vocal-ico-pause { display: none; }
.vocal-pause-btn.en-pause .vocal-ico-play { display: inline; }
.vocal-pause-btn.en-pause { color: var(--gold); }

.vocal-paused {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Réponse juste. Sobre : un mot, la réponse, et comment abréger l'attente. */
.vocal-juste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-radius: var(--radius);
  background: var(--success-bg);
  border: 1px solid transparent;
  text-align: center;
}
.vocal-juste-verdict {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--primary-dark);
}
.vocal-juste-note {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Réponse fausse : même bloc qu'avant, plus le mot « Incorrect » et l'explication,
   qui est ce qui construit l'accroche. */
.vocal-verdict-verdict {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 15px;
  color: var(--error);
  text-align: center;
}
.vocal-verdict-expl {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
}